Refact(优惠券):优惠券重构
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
@@ -251,6 +251,7 @@
|
||||
v-if="couponList.usable.length > 0"
|
||||
:two-list="couponList"
|
||||
@change="changeCoupons"
|
||||
:show-tab="false"
|
||||
/>
|
||||
</u-popup>
|
||||
<!-- v9 优惠券结束 -->
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user