支付金额为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>
|
||||
@@ -115,6 +115,7 @@
|
||||
<ChargeVue
|
||||
@updateChargeSel="(e) => updateChargeSel(e)"
|
||||
@updateRechargeId="updateRechargeId"
|
||||
@updateIsShow="updateIsShow"
|
||||
v-if="listinfo.status == 'unpaid' || !listinfo.id"
|
||||
></ChargeVue>
|
||||
</view>
|
||||
@@ -275,7 +276,12 @@ const customStyle = {
|
||||
|
||||
const cartStore = useCartsStore();
|
||||
|
||||
//充值相关
|
||||
//充值相关start
|
||||
//充值和余额支付是否可用
|
||||
const isCanUseCharge = ref(false);
|
||||
function updateIsShow(e){
|
||||
isCanUseCharge.value = e;
|
||||
}
|
||||
const rechargeItem = ref({
|
||||
id: "",
|
||||
});
|
||||
@@ -289,6 +295,7 @@ function updateChargeSel(newval) {
|
||||
rechargeItem.value = newval;
|
||||
console.log("updateChargeSel", newval);
|
||||
}
|
||||
//充值相关end
|
||||
|
||||
async function onMessage(Message) {
|
||||
cartStore.onMessage(Message, cartsSocket);
|
||||
@@ -435,14 +442,15 @@ const orderorderInfo = async () => {
|
||||
orderId: listinfo.id,
|
||||
})
|
||||
: await APIhistoryOrder({
|
||||
tableCode: options.tableCode,
|
||||
tableCode: options.tableCode||"",
|
||||
});
|
||||
orderRemarker.value = res.remark;
|
||||
Object.assign(listinfo, res);
|
||||
if (res && res.tableCode) {
|
||||
socketInitPar.table_code = res.tableCode;
|
||||
let tableRes = await getTableInfo({
|
||||
tableCode: options.tableCode,
|
||||
tableCode: options.tableCode||"",
|
||||
|
||||
});
|
||||
console.log(tableRes);
|
||||
listinfo.tableName = tableRes.name;
|
||||
@@ -450,7 +458,7 @@ const orderorderInfo = async () => {
|
||||
if (options.tableCode) {
|
||||
socketInitPar.table_code = options.tableCode;
|
||||
let tableRes = await getTableInfo({
|
||||
tableCode: options.tableCode,
|
||||
tableCode: options.tableCode||"",
|
||||
});
|
||||
console.log(tableRes);
|
||||
listinfo.tableName = tableRes.name;
|
||||
@@ -626,7 +634,7 @@ const createOrder = async () => {
|
||||
placeNum: listinfo.id ? listinfo.placeNum * 1 + 1 : 1, //当前订单下单次数
|
||||
waitCall: "", //是否等叫 0 否 1 等叫
|
||||
orderId: listinfo.id || "",
|
||||
tableCode: options.tableCode,
|
||||
tableCode: options.tableCode||'',
|
||||
userId: uni.cache.get("userInfo").id || "", //
|
||||
});
|
||||
// 清空购物车
|
||||
@@ -1055,7 +1063,7 @@ async function init(opt) {
|
||||
if (res) {
|
||||
uni.cache.set("tableCode", res.tableCode);
|
||||
uni.cache.set("tableCode", res.seatNum);
|
||||
options.tableCode = res.tableCode;
|
||||
options.tableCode = res.tableCode||'';
|
||||
cartStore.setSeatFeeConfig("personCount", res.seatNum);
|
||||
cartStore.setDinnerType(res.dineMode || "dine-in");
|
||||
orderRemarker.value = res.remark;
|
||||
@@ -1151,8 +1159,11 @@ const disablePayType = computed(() => {
|
||||
) {
|
||||
arr.add("余额支付");
|
||||
}
|
||||
if (cartStore.orderCostSummary.orderOriginFinalPayAmount <= 0) {
|
||||
arr.add("微信支付");
|
||||
// if (cartStore.orderCostSummary.orderOriginFinalPayAmount <= 0) {
|
||||
// arr.add("微信支付");
|
||||
// }
|
||||
if(!isCanUseCharge.value){
|
||||
arr.add("余额支付");
|
||||
}
|
||||
|
||||
return Array.from(arr);
|
||||
|
||||
@@ -1,411 +1,451 @@
|
||||
<!-- 充值中心 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<up-navbar bgColor="transparent" title="充值中心" @leftClick="back"></up-navbar>
|
||||
<view class="header-wrap">
|
||||
<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
|
||||
<view class="select-shop">
|
||||
<view class="select-btn">
|
||||
<up-icon name="map" color="#333"></up-icon>
|
||||
<text class="t">{{shopInfo.shopName}}</text>
|
||||
<up-icon name="arrow-right" color="#333"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-wrap">
|
||||
<view class="left">
|
||||
<text class="i t">余额</text>
|
||||
<text class="n t">{{shopUserInfo.amount||0}}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="t" @click="toDetail">明细</text>
|
||||
<text class="t" @click="toPwd">密码设置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btm-wrap">
|
||||
<view class="">
|
||||
<view class="container">
|
||||
<up-navbar
|
||||
bgColor="transparent"
|
||||
title="充值中心"
|
||||
@leftClick="back"
|
||||
></up-navbar>
|
||||
<view class="header-wrap">
|
||||
<image
|
||||
class="bg"
|
||||
src="/static/czzx_header_bg.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="select-shop">
|
||||
<view class="select-btn">
|
||||
<up-icon name="map" color="#333"></up-icon>
|
||||
<text class="t">{{ shopInfo.shopName }}</text>
|
||||
<up-icon name="arrow-right" color="#333"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-wrap">
|
||||
<view class="left">
|
||||
<text class="i t">余额</text>
|
||||
<text class="n t">{{ shopUserInfo.amount || 0 }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="t" @click="toDetail">明细</text>
|
||||
<text class="t" @click="toPwd">密码设置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btm-wrap">
|
||||
<view class=""> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-flex">
|
||||
<image
|
||||
src="/static/vip/money.png"
|
||||
style="width: 44rpx; height: 44rpx"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="u-m-l-24 color-333 font-16 font-700">立即充值</text>
|
||||
</view>
|
||||
<view class="font-12 color-999">
|
||||
<text>充值代表接受</text>
|
||||
<text style="color: #ecb592">《用户隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list u-m-t-40">
|
||||
<view
|
||||
class="item color1"
|
||||
@click="sel = index"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="{ active: sel == index }"
|
||||
>
|
||||
<view class="">
|
||||
<text>¥</text>
|
||||
<text
|
||||
class="font-700"
|
||||
style="font-size: 48 u-flex-1rpx"
|
||||
: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" style="color: #5f2e0f">
|
||||
<text>送</text>
|
||||
<text class="font-14">{{ item.rewardPoints }}</text>
|
||||
<text class="">积分</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>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-flex ">
|
||||
<image src="/static/vip/money.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
|
||||
<text class="u-m-l-24 color-333 font-16 font-700">立即充值</text>
|
||||
</view>
|
||||
<view class="font-12 color-999">
|
||||
<text>充值代表接受</text>
|
||||
<text style="color: #ECB592;">《用户隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list u-m-t-40">
|
||||
<view class="item color1" @click="sel=index" v-for="(item,index) in list" :key="index"
|
||||
:class="{active:sel==index}">
|
||||
<view class="">
|
||||
<text>¥</text>
|
||||
<text class="font-700" style="font-size: 48 u-flex-1rpx;"
|
||||
: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" style="color: #5F2E0F;">
|
||||
<text>送</text>
|
||||
<text class="font-14">{{item.rewardPoints}}</text>
|
||||
<text class="">积分</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>
|
||||
<template v-if="state.isCustom">
|
||||
<view class="u-flex other flex-center">
|
||||
<text class="font-14 color-333 font-700 u-m-r-28">其他金额</text>
|
||||
<up-input
|
||||
v-model="money"
|
||||
type="number"
|
||||
placeholder="请输入充值金额"
|
||||
border="none"
|
||||
placeholder-style="font-size:14px;"
|
||||
></up-input>
|
||||
</view>
|
||||
<view class="color-999 font-12 u-m-t-4"
|
||||
>自定义金额充值时,不享受任何优惠赠送</view
|
||||
>
|
||||
</template>
|
||||
|
||||
<view class="sel u-flex" v-if="sel==index">
|
||||
<image class="image" src="/static/vip/sel.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="state.isCustom">
|
||||
<view class="u-flex other flex-center">
|
||||
<text class="font-14 color-333 font-700 u-m-r-28">其他金额</text>
|
||||
<up-input v-model="money" type="number" placeholder="请输入充值金额" border="none"
|
||||
placeholder-style="font-size:14px;"></up-input>
|
||||
</view>
|
||||
<view class="color-999 font-12 u-m-t-4">自定义金额充值时,不享受任何优惠赠送</view>
|
||||
</template>
|
||||
|
||||
<button class="buy-btn" @click="buy">
|
||||
<text class="font-16 ">¥{{charge_money}}</text>
|
||||
<text class="font-14 u-m-l-24">立即充值</text>
|
||||
</button>
|
||||
<view class="u-m-t-36 color-999 font-12">
|
||||
<view>充值说明</view>
|
||||
<view class="u-m-t-16">
|
||||
<text>适用门店</text>
|
||||
<text class="color2 u-m-l-28" @click="toShopList">全国门店通用 {{'>'}} </text>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<text>有效期限</text>
|
||||
<text class=" u-m-l-28">永久有效 </text>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-flex-y-center">
|
||||
<text class="no-wrap">注意事项</text>
|
||||
<view class="u-m-l-28">
|
||||
<view>1.储值完成后不支持自助退款,可联系商家处理</view>
|
||||
<view> 2.余额不支持转赠,不可提现,长期有效</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-flex-y-center">
|
||||
<text class="no-wrap">充值说明</text>
|
||||
<text class="u-m-l-28" style="word-break: break-all;">
|
||||
{{state.remark||''}}
|
||||
</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CouponList v-model="couponModel.show" :list="couponModel.couponInfoList"></CouponList>
|
||||
</view>
|
||||
<button
|
||||
class="buy-btn"
|
||||
@click="buy"
|
||||
:class="{ disabled: !state.isEnable }"
|
||||
>
|
||||
<text class="font-16">¥{{ charge_money }}</text>
|
||||
<text class="font-14 u-m-l-24">立即充值</text>
|
||||
</button>
|
||||
<view class="u-m-t-36 color-999 font-12">
|
||||
<view>充值说明</view>
|
||||
<view class="u-m-t-16">
|
||||
<text>适用门店</text>
|
||||
<text class="color2 u-m-l-28" @click="toShopList"
|
||||
>全国门店通用 {{ ">" }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<text>有效期限</text>
|
||||
<text class="u-m-l-28">永久有效 </text>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-flex-y-center">
|
||||
<text class="no-wrap">注意事项</text>
|
||||
<view class="u-m-l-28">
|
||||
<view>1.储值完成后不支持自助退款,可联系商家处理</view>
|
||||
<view> 2.余额不支持转赠,不可提现,长期有效</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-flex-y-center">
|
||||
<text class="no-wrap">充值说明</text>
|
||||
<text class="u-m-l-28" style="word-break: break-all">
|
||||
{{ state.remark || "" }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CouponList
|
||||
v-model="couponModel.show"
|
||||
:list="couponModel.couponInfoList"
|
||||
></CouponList>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
APIusershopInfodetail,
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
import CouponList from '@/components/coupon/list.vue'
|
||||
import * as rechargeApi from '@/common/api/market/recharge.js'
|
||||
import {
|
||||
recharge
|
||||
} from '@/common/api/order/index.js'
|
||||
import {
|
||||
joinMember
|
||||
} from '@/common/api/order/index.js'
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed,
|
||||
reactive,
|
||||
watch
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
pay
|
||||
} from '@/utils/pay.js'
|
||||
|
||||
function toShopList(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/user/member/czzx-shop-list?shopId='+option.shopId
|
||||
})
|
||||
}
|
||||
import { APIusershopInfodetail, APIshopUserInfo } from "@/common/api/member.js";
|
||||
import CouponList from "@/components/coupon/list.vue";
|
||||
import * as rechargeApi from "@/common/api/market/recharge.js";
|
||||
import { recharge } from "@/common/api/order/index.js";
|
||||
import { joinMember } from "@/common/api/order/index.js";
|
||||
import { ref, onMounted, computed, reactive, watch } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { pay } from "@/utils/pay.js";
|
||||
|
||||
function couponNum(list) {
|
||||
return list.reduce((prve, cur) => {
|
||||
return prve + cur.num
|
||||
}, 0)
|
||||
}
|
||||
const couponModel = reactive({
|
||||
show: false,
|
||||
couponInfoList: []
|
||||
})
|
||||
function toShopList() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user/member/czzx-shop-list?shopId=" + option.shopId,
|
||||
});
|
||||
}
|
||||
|
||||
function lookCoupon(item) {
|
||||
couponModel.show = true
|
||||
couponModel.couponInfoList = item.couponInfoList
|
||||
}
|
||||
async function buy() {
|
||||
if (!charge_money.value) {
|
||||
return uni.showToast({
|
||||
title: '请选择或者输入充值金额',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
const json = {
|
||||
shopId: option.shopId,
|
||||
shopUserId: shopUserInfo.id,
|
||||
}
|
||||
if (sel.value < 0) {
|
||||
json.amount = `${money.value}`.trim() * 1
|
||||
} else {
|
||||
json.rechargeDetailId = list.value[sel.value].id
|
||||
json.amount = list.value[sel.value].amount
|
||||
}
|
||||
const res = await recharge(json)
|
||||
if (!res) {
|
||||
return uni.showToast({
|
||||
title: '充值失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
const payRes = await pay(res)
|
||||
console.log(payRes);
|
||||
if (payRes) {
|
||||
uni.showToast({
|
||||
title: '充值成功',
|
||||
icon: 'none'
|
||||
})
|
||||
init()
|
||||
}
|
||||
function couponNum(list) {
|
||||
return list.reduce((prve, cur) => {
|
||||
return prve + cur.num;
|
||||
}, 0);
|
||||
}
|
||||
const couponModel = reactive({
|
||||
show: false,
|
||||
couponInfoList: [],
|
||||
});
|
||||
|
||||
}
|
||||
function lookCoupon(item) {
|
||||
couponModel.show = true;
|
||||
couponModel.couponInfoList = item.couponInfoList;
|
||||
}
|
||||
async function buy() {
|
||||
if (!state.isEnable) {
|
||||
return uni.showToast({
|
||||
title: "充值未开启,暂不能充值",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
if (!charge_money.value) {
|
||||
return uni.showToast({
|
||||
title: "请选择或者输入充值金额",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
const json = {
|
||||
shopId: option.shopId,
|
||||
shopUserId: shopUserInfo.id,
|
||||
};
|
||||
if (sel.value < 0) {
|
||||
json.amount = `${money.value}`.trim() * 1;
|
||||
} else {
|
||||
json.rechargeDetailId = list.value[sel.value].id;
|
||||
json.amount = list.value[sel.value].amount;
|
||||
}
|
||||
const res = await recharge(json);
|
||||
if (!res) {
|
||||
return uni.showToast({
|
||||
title: "充值失败",
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
const payRes = await pay(res);
|
||||
console.log(payRes);
|
||||
if (payRes) {
|
||||
uni.showToast({
|
||||
title: "充值成功",
|
||||
icon: "none",
|
||||
});
|
||||
init();
|
||||
}
|
||||
}
|
||||
|
||||
function toDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/member/billDetails?type=1&shopId=' + option.shopId
|
||||
})
|
||||
}
|
||||
function toDetail() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user/member/billDetails?type=1&shopId=" + option.shopId,
|
||||
});
|
||||
}
|
||||
|
||||
function toPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/member/setPassword?type=1&shopId=' + option.shopId
|
||||
})
|
||||
}
|
||||
function toPwd() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user/member/setPassword?type=1&shopId=" + option.shopId,
|
||||
});
|
||||
}
|
||||
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
const list = ref([])
|
||||
const sel = ref(0)
|
||||
const money = ref(null);
|
||||
const option = reactive({
|
||||
shopId: ''
|
||||
})
|
||||
const shopInfo = reactive({})
|
||||
const shopUserInfo = reactive({})
|
||||
const state = reactive({})
|
||||
async function init() {
|
||||
const shopInfoRes = await APIusershopInfodetail({
|
||||
shopId: option.shopId
|
||||
})
|
||||
if (shopInfoRes) {
|
||||
Object.assign(shopInfo, shopInfoRes.shopInfo)
|
||||
}
|
||||
const shopUserInfoRes = await APIshopUserInfo({
|
||||
shopId: option.shopId
|
||||
})
|
||||
if (shopUserInfoRes) {
|
||||
Object.assign(shopUserInfo, shopUserInfoRes)
|
||||
}
|
||||
const res = await rechargeApi.config({
|
||||
shopId: option.shopId
|
||||
})
|
||||
if (res) {
|
||||
Object.assign(state, res)
|
||||
list.value = res.rechargeDetailList
|
||||
}
|
||||
}
|
||||
const charge_money = computed(() => {
|
||||
if (sel.value < 0) {
|
||||
if (money.value > 0) {
|
||||
return money.value
|
||||
}
|
||||
return ''
|
||||
}
|
||||
const item = list.value[sel.value]
|
||||
if (item) {
|
||||
return item.amount
|
||||
}
|
||||
return ''
|
||||
})
|
||||
onLoad((opt) => {
|
||||
Object.assign(option, opt)
|
||||
init()
|
||||
})
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
const list = ref([]);
|
||||
const sel = ref(0);
|
||||
const money = ref(null);
|
||||
const option = reactive({
|
||||
shopId: "",
|
||||
});
|
||||
const shopInfo = reactive({});
|
||||
const shopUserInfo = reactive({});
|
||||
const state = reactive({});
|
||||
async function init() {
|
||||
const shopInfoRes = await APIusershopInfodetail({
|
||||
shopId: option.shopId,
|
||||
});
|
||||
if (shopInfoRes) {
|
||||
Object.assign(shopInfo, shopInfoRes.shopInfo);
|
||||
}
|
||||
const shopUserInfoRes = await APIshopUserInfo({
|
||||
shopId: option.shopId,
|
||||
});
|
||||
if (shopUserInfoRes) {
|
||||
Object.assign(shopUserInfo, shopUserInfoRes);
|
||||
}
|
||||
const res = await rechargeApi.config({
|
||||
shopId: option.shopId,
|
||||
});
|
||||
if (res) {
|
||||
Object.assign(state, res);
|
||||
list.value = res.rechargeDetailList;
|
||||
}
|
||||
}
|
||||
const charge_money = computed(() => {
|
||||
if (sel.value < 0) {
|
||||
if (money.value > 0) {
|
||||
return money.value;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
const item = list.value[sel.value];
|
||||
if (item) {
|
||||
return item.amount;
|
||||
}
|
||||
return "";
|
||||
});
|
||||
onLoad((opt) => {
|
||||
Object.assign(option, opt);
|
||||
init();
|
||||
});
|
||||
|
||||
watch(() => money.value, (newval) => {
|
||||
if (newval && newval > 0) {
|
||||
sel.value = -1
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => money.value,
|
||||
(newval) => {
|
||||
if (newval && newval > 0) {
|
||||
sel.value = -1;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.color1 {
|
||||
color: #5F2E0F;
|
||||
}
|
||||
.color1 {
|
||||
color: #5f2e0f;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
color: #FF6300;
|
||||
}
|
||||
.color2 {
|
||||
color: #ff6300;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
margin-top: 28rpx;
|
||||
padding: 32rpx 32rpx;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 80rpx;
|
||||
line-height: 1;
|
||||
background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
|
||||
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
|
||||
}
|
||||
.buy-btn {
|
||||
margin-top: 28rpx;
|
||||
padding: 32rpx 32rpx;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 80rpx;
|
||||
line-height: 1;
|
||||
background: linear-gradient(98deg, #fe6d1100 40.64%, #ffd1b4 105.2%),
|
||||
linear-gradient(259deg, #fe6d11 50.14%, #ffd1b4 114.93%);
|
||||
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
|
||||
&.disabled {
|
||||
background: #eee;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.other {
|
||||
background: #F6F6F6;
|
||||
padding: 24rpx 16rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.other {
|
||||
background: #f6f6f6;
|
||||
padding: 24rpx 16rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
width: 100%;
|
||||
height: 530rpx;
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--status-bar-height) + 140rpx) 28rpx 28rpx;
|
||||
position: relative;
|
||||
.header-wrap {
|
||||
width: 100%;
|
||||
height: 530rpx;
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--status-bar-height) + 140rpx) 28rpx 28rpx;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.select-shop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.select-shop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.select-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12upx;
|
||||
.select-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12upx;
|
||||
|
||||
.t {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.balance-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-top: 40upx;
|
||||
.balance-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-top: 40upx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
color: #5e3110;
|
||||
.t {
|
||||
color: #5e3110;
|
||||
|
||||
&.i {
|
||||
position: relative;
|
||||
top: 10upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
&.i {
|
||||
position: relative;
|
||||
top: 10upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
&.n {
|
||||
font-size: 64upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n {
|
||||
font-size: 64upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12upx;
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12upx;
|
||||
|
||||
.t {
|
||||
color: #86491d;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.t {
|
||||
color: #86491d;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
padding: 40rpx 28rpx 0 28rpx;
|
||||
transform: translateY(-140rpx);
|
||||
border-radius: 74rpx 74rpx 0 0;
|
||||
}
|
||||
.bottom {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
padding: 40rpx 28rpx 0 28rpx;
|
||||
transform: translateY(-140rpx);
|
||||
border-radius: 74rpx 74rpx 0 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 20rpx;
|
||||
row-gap: 22rpx;
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 20rpx;
|
||||
row-gap: 22rpx;
|
||||
|
||||
.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;
|
||||
.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 0.3s ease-in-out;
|
||||
|
||||
&.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>
|
||||
@@ -125,6 +125,10 @@ export const Memberpay = defineStore('memberpay', {
|
||||
userId: uni.cache.get('userInfo').id || ''
|
||||
})
|
||||
console.log('actionsltPayOrder:res',res);
|
||||
if(typeof res ==='string'){
|
||||
resolve(res)
|
||||
return
|
||||
}
|
||||
if(!res){
|
||||
console.log('支付失败');
|
||||
reject(false)
|
||||
|
||||
Reference in New Issue
Block a user