支付金额为0时的处理修改
This commit is contained in:
@@ -1,189 +1,213 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="box" v-if="isShow">
|
||||
<view class="u-flex u-col-center" style="align-items: center;">
|
||||
<image src="/static/icon/charge.png" class="charge" mode=""></image>
|
||||
<view class="u-m-l-28 color-333 font-700"> 充值享优惠</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="u-m-t-20">
|
||||
<view class="list">
|
||||
<view class="item color1" @click="itemClick(index)" v-for="(item,index) in list" :key="index"
|
||||
:class="{active:sel==index}">
|
||||
<view class="">
|
||||
<text>￥</text>
|
||||
<text class="font-700" style="font-size: 48rpx;"
|
||||
:class="{color2:sel==index}">{{item.amount}}</text>
|
||||
</view>
|
||||
<view class="font-12" v-if="item.rewardAmount" :class="{color2:sel==index}">
|
||||
<text>赠</text>
|
||||
<text>￥</text>
|
||||
<text class="font-14">{{item.rewardAmount}}</text>
|
||||
</view>
|
||||
<view class="font-12" v-if="item.rewardPoints">
|
||||
<text>送</text>
|
||||
<text class="font-14">{{item.rewardPoints}}</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view class="font-12 color-666" v-if="item.couponInfoList.length">
|
||||
<text>送</text>
|
||||
<text>{{couponNum(item.couponInfoList)}}</text>
|
||||
<text>张券</text>
|
||||
<text class="color2 u-m-l-8" v-if="sel==index" @click="lookCoupon(item)">查看</text>
|
||||
</view>
|
||||
|
||||
<view class="sel u-flex" v-if="sel==index">
|
||||
<image class="image" src="/static/vip/sel.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="" v-else></view>
|
||||
<CouponList v-model="couponModel.show" :list="couponModel.couponInfoList"></CouponList>
|
||||
</view>
|
||||
<view>
|
||||
<view class="box" v-if="isShow">
|
||||
<view class="u-flex u-col-center" style="align-items: center">
|
||||
<image src="/static/icon/charge.png" class="charge" mode=""></image>
|
||||
<view class="u-m-l-28 color-333 font-700"> 充值享优惠</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="u-m-t-20">
|
||||
<view class="list">
|
||||
<view
|
||||
class="item color1"
|
||||
@click="itemClick(index)"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="{ active: sel == index }"
|
||||
>
|
||||
<view class="">
|
||||
<text>￥</text>
|
||||
<text
|
||||
class="font-700"
|
||||
style="font-size: 48rpx"
|
||||
:class="{ color2: sel == index }"
|
||||
>{{ item.amount }}</text
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="font-12"
|
||||
v-if="item.rewardAmount"
|
||||
:class="{ color2: sel == index }"
|
||||
>
|
||||
<text>赠</text>
|
||||
<text>￥</text>
|
||||
<text class="font-14">{{ item.rewardAmount }}</text>
|
||||
</view>
|
||||
<view class="font-12" v-if="item.rewardPoints">
|
||||
<text>送</text>
|
||||
<text class="font-14">{{ item.rewardPoints }}</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view class="font-12 color-666" v-if="item.couponInfoList.length">
|
||||
<text>送</text>
|
||||
<text>{{ couponNum(item.couponInfoList) }}</text>
|
||||
<text>张券</text>
|
||||
<text
|
||||
class="color2 u-m-l-8"
|
||||
v-if="sel == index"
|
||||
@click="lookCoupon(item)"
|
||||
>查看</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="sel u-flex" v-if="sel == index">
|
||||
<image class="image" src="/static/vip/sel.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="" v-else></view>
|
||||
<CouponList
|
||||
v-model="couponModel.show"
|
||||
:list="couponModel.couponInfoList"
|
||||
></CouponList>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CouponList from '@/components/coupon/list.vue'
|
||||
import * as rechargeApi from '@/common/api/market/recharge.js'
|
||||
import {
|
||||
useCartsStore
|
||||
} from '@/stores/carts.js';
|
||||
import {
|
||||
onMounted,reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const couponModel = reactive({
|
||||
show: false,
|
||||
couponInfoList: []
|
||||
})
|
||||
|
||||
function lookCoupon(item) {
|
||||
couponModel.couponInfoList = item.couponInfoList
|
||||
couponModel.show = true
|
||||
}
|
||||
|
||||
function couponNum(list) {
|
||||
return list.reduce((prve, cur) => {
|
||||
return prve + cur.num
|
||||
}, 0)
|
||||
}
|
||||
const cartStore = useCartsStore()
|
||||
import CouponList from "@/components/coupon/list.vue";
|
||||
import * as rechargeApi from "@/common/api/market/recharge.js";
|
||||
import { useCartsStore } from "@/stores/carts.js";
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
const couponModel = reactive({
|
||||
show: false,
|
||||
couponInfoList: [],
|
||||
});
|
||||
|
||||
const list = ref([])
|
||||
const sel = ref(-1)
|
||||
const isShow = ref(false)
|
||||
let data={}
|
||||
let $riginList=[]
|
||||
async function init() {
|
||||
console.log('recharge', )
|
||||
const shopId = uni.cache.get('shopId')
|
||||
const res = await rechargeApi.config({
|
||||
shopId
|
||||
})
|
||||
if (res) {
|
||||
data=res;
|
||||
$riginList=res.rechargeDetailList
|
||||
isShow.value = res.isOrder
|
||||
list.value = res.rechargeDetailList.filter(v=>v.amount>cartStore.orderCostSummary.finalPayAmount)
|
||||
if(list.value.length){
|
||||
updateSel()
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(()=>cartStore.orderCostSummary.finalPayAmount,(newval)=>{
|
||||
list.value=$riginList.filter(v=>v.amount>newval)
|
||||
if(list.value.length){
|
||||
updateSel()
|
||||
}
|
||||
})
|
||||
const emits=defineEmits(['updateChargeSel','updateRechargeId'])
|
||||
function updateSel(){
|
||||
const selItem=list.value[sel.value]
|
||||
emits('updateChargeSel',selItem?selItem:{})
|
||||
emits('updateRechargeId',data.id)
|
||||
}
|
||||
function itemClick(index){
|
||||
|
||||
console.log('itemClick',sel.value,index);
|
||||
if(sel.value==-1){
|
||||
sel.value=index
|
||||
return
|
||||
}
|
||||
if(sel.value==index){
|
||||
sel.value=-1
|
||||
return
|
||||
}
|
||||
sel.value=index
|
||||
}
|
||||
watch(()=>sel.value,(newval)=>{
|
||||
updateSel()
|
||||
})
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
function lookCoupon(item) {
|
||||
couponModel.couponInfoList = item.couponInfoList;
|
||||
couponModel.show = true;
|
||||
}
|
||||
|
||||
function couponNum(list) {
|
||||
return list.reduce((prve, cur) => {
|
||||
return prve + cur.num;
|
||||
}, 0);
|
||||
}
|
||||
const cartStore = useCartsStore();
|
||||
|
||||
const list = ref([]);
|
||||
const sel = ref(-1);
|
||||
const isShow = ref(false);
|
||||
let data = {};
|
||||
let $riginList = [];
|
||||
const emits = defineEmits(["updateChargeSel", "updateRechargeId","updateIsShow"]);
|
||||
|
||||
async function init() {
|
||||
console.log("recharge");
|
||||
const shopId = uni.cache.get("shopId");
|
||||
const res = await rechargeApi.config({
|
||||
shopId,
|
||||
});
|
||||
if (res) {
|
||||
data = res;
|
||||
$riginList = res.rechargeDetailList;
|
||||
isShow.value = res.isOrder&&res.isEnable?true:false;
|
||||
list.value = res.rechargeDetailList.filter(
|
||||
(v) => v.amount > cartStore.orderCostSummary.finalPayAmount
|
||||
);
|
||||
if (list.value.length) {
|
||||
updateSel();
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => cartStore.orderCostSummary.finalPayAmount,
|
||||
(newval) => {
|
||||
list.value = $riginList.filter((v) => v.amount > newval);
|
||||
if (list.value.length) {
|
||||
updateSel();
|
||||
}
|
||||
}
|
||||
);
|
||||
function updateSel() {
|
||||
const selItem = list.value[sel.value];
|
||||
emits("updateChargeSel", selItem ? selItem : {});
|
||||
emits("updateRechargeId", data.id);
|
||||
}
|
||||
function itemClick(index) {
|
||||
console.log("itemClick", sel.value, index);
|
||||
if (sel.value == -1) {
|
||||
sel.value = index;
|
||||
return;
|
||||
}
|
||||
if (sel.value == index) {
|
||||
sel.value = -1;
|
||||
return;
|
||||
}
|
||||
sel.value = index;
|
||||
}
|
||||
watch(
|
||||
() => sel.value,
|
||||
(newval) => {
|
||||
updateSel();
|
||||
}
|
||||
);
|
||||
watch(()=>isShow.value,(newval)=>{
|
||||
emits("updateIsShow", newval);
|
||||
})
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.color1{
|
||||
color: #5F2E0F;
|
||||
}
|
||||
.color2{
|
||||
color: #FF6300;
|
||||
}
|
||||
.box {
|
||||
background-color: #fdf9f6;
|
||||
padding: 30rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 22rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color1 {
|
||||
color: #5f2e0f;
|
||||
}
|
||||
.color2 {
|
||||
color: #ff6300;
|
||||
}
|
||||
.box {
|
||||
background-color: #fdf9f6;
|
||||
padding: 30rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 22rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.charge {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.charge {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
.list {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.item {
|
||||
padding: 36rpx 22rpx;
|
||||
border-radius: 42rpx;
|
||||
background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 104.47%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid transparent;
|
||||
transition: all .3s ease-in-out;
|
||||
min-width: 202rpx;
|
||||
.item {
|
||||
padding: 36rpx 22rpx;
|
||||
border-radius: 42rpx;
|
||||
background: linear-gradient(180deg, #f5f5f5 58.54%, #fff 104.47%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid transparent;
|
||||
transition: all 0.3s ease-in-out;
|
||||
min-width: 202rpx;
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(180deg, #FFC29A -26.17%, #FFF 64.06%);
|
||||
border: 6rpx solid #FE6C0E;
|
||||
box-shadow: 0 0 31rpx 2rpx #fe8b435e;
|
||||
}
|
||||
&.active {
|
||||
background: linear-gradient(180deg, #ffc29a -26.17%, #fff 64.06%);
|
||||
border: 6rpx solid #fe6c0e;
|
||||
box-shadow: 0 0 31rpx 2rpx #fe8b435e;
|
||||
}
|
||||
|
||||
.sel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
.sel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
|
||||
transform: translateX(-50%) translateY(21rpx);
|
||||
transform: translateX(-50%) translateY(21rpx);
|
||||
|
||||
.image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user