Refact(优惠券):优惠券重构

This commit is contained in:
linxi
2024-09-11 11:08:15 +08:00
parent b0fffe8101
commit 6f24c71d96
5 changed files with 159 additions and 5 deletions
+12
View File
@@ -113,6 +113,14 @@ each(@colors, {
.generateRadius(100);
/*=========================================*/
.generateSpacing(@n, @i: 0) when(@i <= @n) {
@baseSpacing:@i * 1rpx;
.v12-spacing-@{i} {
letter-spacing: @baseSpacing !important;
}
.generateSpacing(@n, (@i + 1))
}
.generateSpacing(100);
/*====================flex 函数表达式=====================*/
.v12-d-flex{
@@ -141,6 +149,10 @@ each(@colors, {
display: flex;
justify-content: center;
}
.v12-justify-around{
display: flex;
justify-content: space-around;
}
.v12-justify-between{
display: flex;
justify-content: space-between;
+80 -1
View File
@@ -8,8 +8,62 @@
:not-use="notUse"
radio-model
@change="changeNav"
v-if="showTab"
/>
<view class="v12-radius-20 v12-white v12-align-center v12-justify-around v12-pa-3" v-else>
<view class="">
<view class="v12-text-center v12-font-28">
券后价
</view>
<view class="v12-mt-3 v12-text-center v12-red-text">
<text class="v12-font-28">
</text>
<text class="v12-font-44">
{{ computePrice }}
</text>
</view>
</view>
<view class="v12-text-center v12-font-44">
=
</view>
<view class="">
<view class="v12-text-center v12-font-28">
当前售价
</view>
<view class="v12-mt-3 v12-text-center">
<text class="v12-font-28">
</text>
<text class="v12-font-44">
{{ currentPrice }}
</text>
</view>
</view>
<view class="v12-text-center v12-font-44">
-
</view>
<view class="">
<view class="v12-text-center">
满减
</view>
<view class="v12-mt-3 v12-text-center v12-font-44">
{{ selectItem.couponPrice }}
</view>
</view>
</view>
<view class="list-box">
<view class="larg-one v12-mb-3">
<Coupons
:data="largOne"
:radio-model="current === 0"
@change="selectCoupon"
/>
</view>
<view class="v12-font-32 v12-dark-text v12-spacing-2 v12-font-bold v12-mb-3">
更多可使用券
</view>
<view
v-for="(item, index) in list"
:key="index"
@@ -19,6 +73,7 @@
:data="item"
:radio-model="current === 0"
@change="selectCoupon"
v-if="index !== maxIndex"
/>
</view>
<view
@@ -55,6 +110,14 @@ export default {
usable: [],
unusable: []
}
},
showTab: {
type: Boolean,
default: true
},
currentPrice: {
default: 0,
type: Number
}
},
data() {
@@ -62,7 +125,9 @@ export default {
webUrl: this.$VUE_APP_RESOURCES_URL,
current: 0,
couponId: uni.getStorageSync('couponId') || 0,
selectItem: {}
selectItem: {
couponPrice: 0
},
}
},
computed: {
@@ -81,7 +146,21 @@ export default {
},
notUse() {
return this.twoList['unusable'].length
},
computePrice() {
return this.currentPrice - this.selectItem.couponPrice
},
maxIndex() {
const maxIndex = this.list.reduce((a, b, c) => {
return (this.list[a].couponPrice < b.couponPrice) ? c : a
}, 0)
return maxIndex
},
largOne() {
this.selectCoupon(this.list[this.maxIndex].id)
return this.list[this.maxIndex]
}
},
methods: {
changeNav(index) {
+56
View File
@@ -0,0 +1,56 @@
<template>
<view class="">
<u-popup :show="show" @close="close" @open="open" closeable>
<view class="v12-px-3">
<view class="v12-text-center v12-font-32 v12-py-3 v12-secondary-dark-text">
服务说明
</view>
<view class="wrap v12-dark-text">
<view class="service-title">
<text class="v12-dark-text v12-font-32">
售后服务
</text>
</view>
<view class="">
<text class="v12-font-28 v12-font-bold">
{{ info }}
</text>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
info: ''
},
data() {
return {
show:false
}
},
methods: {
close() {
this.show = false
this.$emit('close')
},
open() {
this.show = true
this.$emit('open')
}
}
}
</script>
<style>
.wrap{
height: 388rpx;
height: 120rpx;
background: rgba(197,39,51,0.1);
border-radius: 16rpx;
padding: 20rpx;
}
</style>
+1
View File
@@ -251,6 +251,7 @@
v-if="couponList.usable.length > 0"
:two-list="couponList"
@change="changeCoupons"
:show-tab="false"
/>
</u-popup>
<!-- v9 优惠券结束 -->
+10 -4
View File
@@ -171,7 +171,7 @@
<!-- v9 优惠券开始 -->
<u-popup :show="show" :round="10" mode="bottom" closeOnClickOverlay @close="changeCoupons()">
<CouponsPopup :two-list="couponList" @change="changeCoupons"/>
<CouponsPopup :two-list="couponList" @change="changeCoupons" :showTab="false" :currentPrice="storeInfo.price" />
</u-popup>
<!-- v9 优惠券结束 -->
@@ -255,8 +255,8 @@
</view>
<!-- <view class="value red">销量{{ storeInfo.sales }}</view> -->
</view>
<view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee">
<!-- v-if="storeInfo.guarantee" -->
<view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee" @click="showService">
<view class="flex ai-center" >
<view class="after-title flex-0 v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/服务.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
@@ -447,6 +447,7 @@
:product-value-arr="productValueArr"
:cartNum="cart_num"
/>
<ServiceWin ref="serviceWin" :info="storeInfo.guarantee" />
<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
:posterData="posterData" :goodId="id"></StorePoster>
<ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
@@ -478,6 +479,7 @@ import ProductWindow from "@/components/ProductWindow";
import StorePoster from "@/components/StorePoster";
import ShareInfo from "@/components/ShareInfo";
import CountDown from "@/components/CountDown";
import ServiceWin from "@/components/ServiceWin";
import {getCartCount, getProductCode, getProductDetail, postCartAdd} from "@/api/store";
import {userBindParent} from "@/api/user";
import {handleQrCode, isWeixin} from "@/utils";
@@ -501,7 +503,8 @@ export default {
ProductWindow,
StorePoster,
ShareInfo,
CouponsPopup
CouponsPopup,
ServiceWin
},
mixins: [pageListenMixins],
data: function () {
@@ -728,6 +731,9 @@ export default {
}
},
methods: {
showService() {
this.$refs.serviceWin.show = true
},
toQualifications() {
const merInfo = {
name: this.storeInfo.merName,