324 lines
7.2 KiB
Vue
324 lines
7.2 KiB
Vue
<template>
|
|
<view class="more-coupon-page">
|
|
<HeaderCom></HeaderCom>
|
|
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="main" v-if="list.length > 0" @scrolltolower="scrolltolower">
|
|
<view class="list" v-for="(item,index) in list" :key="index">
|
|
<view class="price">
|
|
<text class="price-sym">{{Number(item.amount)}}</text>{{item.type === 'REDUCTION' ? '' : '折'}}
|
|
</view>
|
|
<view class="detail">
|
|
<view class="title">
|
|
{{item.name}}
|
|
<image src="@/static/new/mine/zs.png" mode="" class="title-icon"></image>
|
|
</view>
|
|
<view class="sub">{{typeObj[item.type]}}券</view>
|
|
<view class="sub">{{item.tips}}</view>
|
|
|
|
<view class="detail-footer">
|
|
<view class="prices">{{item.point}}积分</view>
|
|
<view class="operation">
|
|
<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub(index)"></image>
|
|
<view class="operation-num">{{item.quantity}}</view>
|
|
<image src="@/static/new/mine/add.png" mode="" class="add" @click="add(index)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
<view class="footer">
|
|
<view class="point">
|
|
<text class="total">合计</text>
|
|
<text class="sym"></text>
|
|
{{totalPoint}} 积分
|
|
</view>
|
|
<view class="buy" @click="pay">立即支付</view>
|
|
</view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/mine/moreCoupon"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
import {couponApi,userCouponRewardApi,userCouponBatchApi} from '@/API/user.js'
|
|
import { mathDiv,mathAdd,mathMul } from'@/utils/mathUtils.js'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
list:[],
|
|
page:1,
|
|
total:0,
|
|
typeObj:{
|
|
'REDUCTION':"立减",
|
|
'DISCOUNT':"折扣"
|
|
},
|
|
totalPoint:0
|
|
}
|
|
},
|
|
components:{HeaderCom},
|
|
onLoad(option) {
|
|
this.getCoupon()
|
|
},
|
|
methods:{
|
|
getCoupon() {
|
|
uni.showLoading()
|
|
couponApi({
|
|
page: this.page,
|
|
size: 10,
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
console.log("aaaa")
|
|
console.log(res.data.content)
|
|
this.total = res.data.total
|
|
console.log(this.total)
|
|
res.data.content.forEach(item => {
|
|
item.period = mathDiv(item.period,60)
|
|
item['quantity'] = 0
|
|
})
|
|
if (this.page > 1) {
|
|
this.list = [...this.list, ...res.data.content]
|
|
} else {
|
|
this.list = res.data.content
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
scrolltolower() {
|
|
if (this.total == this.list.length) {
|
|
return
|
|
}
|
|
this.page += 1
|
|
this.getCoupon()
|
|
},
|
|
//减
|
|
sub(index){
|
|
if(this.list[index].quantity === 0){
|
|
let total = 0
|
|
this.list.forEach(item => {
|
|
if(item.quantity > 0){
|
|
total += mathMul(item.quantity,item.point)
|
|
}
|
|
})
|
|
this.totalPoint = total
|
|
return;
|
|
}
|
|
if(this.list[index].quantity >= 1){
|
|
this.list[index].quantity--
|
|
}
|
|
let total = 0
|
|
this.list.forEach(item => {
|
|
if(item.quantity > 0){
|
|
total += mathMul(item.quantity,item.point)
|
|
}
|
|
})
|
|
this.totalPoint = total
|
|
},
|
|
//加
|
|
add(index){
|
|
this.list[index].quantity++
|
|
let total = 0
|
|
this.list.forEach(item => {
|
|
if(item.quantity > 0){
|
|
total += mathMul(item.quantity,item.point)
|
|
}
|
|
})
|
|
this.totalPoint = total
|
|
},
|
|
pay(){
|
|
if(this.totalPoint === 0){
|
|
this.$api.msg("请选择优惠券")
|
|
return
|
|
}
|
|
let obj = {
|
|
map:{}
|
|
}
|
|
this.list.forEach(item => {
|
|
if(item.quantity > 0){
|
|
obj.map[item.id] = item.quantity
|
|
}
|
|
})
|
|
uni.showLoading()
|
|
userCouponBatchApi(uni.getStorageSync('box-id'),obj).then(res => {
|
|
|
|
this.$api.msg(res.message)
|
|
if(res.code === 200){
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.redirectTo({
|
|
url:`/pages/mine/coupon`
|
|
})
|
|
},1000)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
|
|
|
|
// userCouponRewardApi({couponId:this.list[0].id,userId:uni.getStorageSync('box-id')}).then(res => {
|
|
// uni.hideLoading()
|
|
// this.$api.msg(res.message)
|
|
// if(res.code === 200){
|
|
|
|
// }
|
|
// }).catch(err => {
|
|
// uni.hideLoading()
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-color: #F5F5F5;
|
|
}
|
|
.more-coupon-page{
|
|
padding: 112rpx 32rpx 0rpx 32rpx;
|
|
.main{
|
|
height: calc(100vh - 256rpx);
|
|
.list{
|
|
height: 686rpx;
|
|
height: 200rpx;
|
|
background-image: url('@/static/new/mine/buy.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.price{
|
|
width: 264rpx;
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
.price-sym{
|
|
font-weight: 500;
|
|
font-size: 64rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
.detail{
|
|
width: 518rpx;
|
|
height: 200rpx;
|
|
padding: 24rpx 32rpx 24rpx 0;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
.title-icon{
|
|
margin-left: 8rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
.sub{
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.detail-footer{
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
.prices{
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
}
|
|
.operation{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
border-radius: 8rpx;
|
|
.subs{
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
}
|
|
.operation-num{
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
border-top: 2rpx solid #E6E6E6;
|
|
border-bottom: 2rpx solid #E6E6E6;
|
|
}
|
|
.add{
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
width: 750rpx;
|
|
height: 144rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
.point {
|
|
// display: flex;
|
|
// align-items: center;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #000000;
|
|
.total{
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
.sym{
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
margin: 0 6rpx 0 10rpx;
|
|
}
|
|
|
|
.ponit-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: 328rpx;
|
|
height: 96rpx;
|
|
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
|
border-radius: 16rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |