161 lines
3.8 KiB
Vue
161 lines
3.8 KiB
Vue
<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" 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>￥</text>
|
|
<text class="font-14">{{item.rewardPoints}}</text>
|
|
</view>
|
|
<view class="font-12 color-666" v-if="item.couponInfoList.length">
|
|
<text>送</text>
|
|
<text>{{item.couponInfoList.length}}</text>
|
|
<text>张券</text>
|
|
<text class="color2 u-m-l-8" v-if="sel==index">查看</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>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as rechargeApi from '@/common/api/market/recharge.js'
|
|
import {
|
|
useCartsStore
|
|
} from '@/stores/carts.js';
|
|
const cartStore = useCartsStore()
|
|
import {
|
|
onMounted,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
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){
|
|
sel.value=0
|
|
updateSel()
|
|
}
|
|
}
|
|
}
|
|
watch(()=>cartStore.orderCostSummary.finalPayAmount,(newval)=>{
|
|
list.value=$riginList.filter(v=>v.amount>newval)
|
|
if(list.value.length){
|
|
sel.value=0
|
|
updateSel()
|
|
}
|
|
})
|
|
|
|
function updateSel(){
|
|
const selItem=list.value[sel.value]
|
|
emits('updateChargeSel',selItem?selItem:{})
|
|
emits('updateRechargeId',data.id)
|
|
}
|
|
function itemClick(index){
|
|
if(sel.value==index){
|
|
sel.value=-1
|
|
}
|
|
sel.value=index
|
|
}
|
|
const emits=defineEmits(['updateChargeSel'])
|
|
watch(()=>sel.value,(newval)=>{
|
|
updateSel()
|
|
})
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
background: linear-gradient(179.4deg, #f8eadc 0%, #fdf9f6 82%, #ffffff 100%);
|
|
padding: 30rpx;
|
|
margin-top: 32rpx;
|
|
border-radius: 22rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.charge {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
padding: 20rpx 0;
|
|
|
|
.item {
|
|
padding: 36rpx 22rpx;
|
|
border-radius: 42rpx;
|
|
background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 140.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;
|
|
|
|
&.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%;
|
|
|
|
transform: translateX(-50%) translateY(21rpx);
|
|
|
|
.image {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |