wangxiaowei/jianbing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善余额功能

Browse Source
This commit is contained in:
wangxiaowei
2025-05-09 17:51:34 +08:00
parent 2a32bd6fe5
commit 9cd1e5eaca
23 changed files with 603 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
bundle/pages/coupon/coupon.vue
View File

@ -1,106 +1,79 @@
<template>
<view class="coupon">
<view>
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="themeColor" height="96"></u-tabs>
<u-tabs :list="tab" :is-scroll="false" :current="current" @change="change" :active-color="themeColor" height="96"></u-tabs>
</view>
<view class="u-relative" v-if="current === 0">
<view class="package u-text-center u-p-t-22 u-p-b-28">
<view class="bold-500">超级省钱券包</view>
<view>超值权益一单回本</view>
<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
<view class="u-relative" v-if="current === 0">
<view class="package u-text-center u-p-t-22 u-p-b-28">
<view class="bold-500">超级省钱券包</view>
<view>超值权益一单回本</view>
</view>
<view class="list u-absolute left-0 right-0">
<view class="block br20">
<view class="row-between">
<view>
<view class="row">
<u-image :src="cloudPath + 'img/icon_package1.png'" width="34" height="28"></u-image>
<view class="text-333 u-m-l-10 nr">券包</view>
</view>
<view class="text-755023 xs u-m-t-10">
<text>2元最低可抵111元/共<text class="primary">1</text>张券</text>
</view>
</view>
<view class="u-relative">
<u-image :src="cloudPath + 'img/icon_package2.png'" width="220" height="60"></u-image>
<view class="text-755023 u-absolute price xs">￥2.00</view>
</view>
</view>
<view class="coupon-bg u-m-t-32">
<view class="xxs u-text-center u-p-t-4 text-845F2E">满减券x1</view>
<view class="bold-600 u-text-center u-p-t-26">
<price-format color="#FF0000" :price="121.99" :subscriptSize="32" :firstSize="52" :secondSize="52"></price-format>
</view>
<view class="text-D8A658 u-text-center u-p-t-32">满11元可用</view>
</view>
</view>
</view>
</view>
<view class="list u-absolute left-0 right-0">
<view class="block br20">
<view class="row-between">
<view class="coupon-list u-m-t-12" v-if="current === 1">
<view class="coupon-list-bg row-between" v-for="(item, index) in list" :key="index">
<view class="row-start row-column u-row-center u-text-center">
<view>
<view class="row">
<u-image :src="cloudPath + 'img/icon_package1.png'" width="34" height="28"></u-image>
<view class="text-333 u-m-l-10 nr">券包</view>
</view>
<view class="text-755023 xs u-m-t-10">
<text>2元最低可抵111元/共<text class="primary">1</text>张券</text>
</view>
<price-format :color="themeColor" :price="item.money" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
</view>
<view class="u-relative">
<u-image :src="cloudPath + 'img/icon_package2.png'" width="220" height="60"></u-image>
<view class="text-755023 u-absolute price xs">￥2.00</view>
<view class="full">{{ item.use_condition }}</view>
</view>
<view class="flex1 u-m-l-80 row-between">
<view>
<view class="coupon-text bold-600">优惠券</view>
<view class="xs u-m-t-20 date">有效期 {{ item.use_time_tips }}天</view>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
</view>
</view>
<view class="coupon-bg u-m-t-32">
<view class="xxs u-text-center u-p-t-4 text-845F2E">满减券x1</view>
<view class="bold-600 u-text-center u-p-t-26">
<price-format color="#FF0000" :price="121.99" :subscriptSize="32" :firstSize="52" :secondSize="52"></price-format>
</view>
<view class="text-D8A658 u-text-center u-p-t-32">满11元可用</view>
</view>
</view>
</view>
</view>
<view class="coupon-list u-m-t-12" v-if="current === 1">
<view class="coupon-list-bg row-between">
<view class="row-start row-column u-row-center u-text-center">
<view>
<price-format :color="themeColor" :price="121" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
</view>
<view class="full">满20元可用</view>
</view>
<view class="flex1 u-m-l-80 row-between">
<view>
<view class="coupon-text bold-600">优惠券</view>
<view class="xs u-m-t-20 date">有效期3天</view>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
</view>
</view>
</view>
<view class="coupon-list-bg row-between">
<view class="row-start row-column u-row-center u-text-center">
<view>
<price-format :color="themeColor" :price="121" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
</view>
<view class="full">满20元可用</view>
</view>
<view class="flex1 u-m-l-80 row-between">
<view>
<view class="coupon-text bold-600">优惠券</view>
<view class="xs u-m-t-20 date">有效期3天</view>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
</view>
</view>
</view>
<view class="coupon-list-bg row-between">
<view class="row-start row-column u-row-center u-text-center">
<view>
<price-format :color="themeColor" :price="121" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
</view>
<view class="full">满20元可用</view>
</view>
<view class="flex1 u-m-l-80 row-between">
<view>
<view class="coupon-text bold-600">优惠券</view>
<view class="xs u-m-t-20 date">有效期3天</view>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
</view>
</view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import { getCoupon } from "@/api/user"
import { getCouponList } from '@/api/activity';
export default {
mixins: [MescrollMixin],
data() {
return {
list: [
tab: [
{
name: '购买'
},
@ -108,13 +81,38 @@
name: '兑换'
}
],
current: 1
current: 1,
upOption:{
noMoreSize: 4,
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: ''
},
textNoMore: '没有更多了'
},
list: []
}
},
methods: {
change(index) {
this.current = index;
}
this.current = index
},
// 初始化数据
upCallback(page) {
getCouponList({
page: page.num,
current: this.current,
}).then(res => {
const {data} = res
this.mescroll.endSuccess(data.length, data.totalPages);
//设置列表数据
if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
this.list = this.list.concat(data); //追加新数据
}).catch(()=>{
this.mescroll.endErr();
})
},
}
}
</script>

10
bundle/pages/points/points.vue
View File

@ -24,10 +24,12 @@
</view>
<view class="u-absolute right-0">
<view class="excharge row-center text-default">
<text class="xs">兑换商品</text>
<u-icon name="arrow-right" size="22" :color="themeColor" class="u-m-l-10"></u-icon>
</view>
<navigator url="/bundle/pages/points/points_store" hover-class="none">
<view class="excharge row-center text-default">
<text class="xs">兑换商品</text>
<u-icon name="arrow-right" size="22" :color="themeColor" class="u-m-l-10"></u-icon>
</view>
</navigator>
</view>
</view>

8
bundle/pages/points/points_store.vue
View File

@ -31,7 +31,7 @@
<text class="text-7c">元</text>
</view>
<view>
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '145rpx', height: '61rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '31rpx'}" :hair-line="false">兑换</u-button>
<u-button @click="toExchange" hover-class="none" :customStyle="{width: '145rpx', height: '61rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '31rpx'}" :hair-line="false">兑换</u-button>
</view>
</view>
</view>
@ -59,6 +59,12 @@
methods: {
change(index) {
this.current = index;
},
toExchange() {
uni.navigateTo({
url: `/bundle/pages/points/points_shop`
})
}
}
}