Merge branch 'test' of https://newgitea.sxczgkj.cn/czg_team/cashier_wx into test
This commit is contained in:
@@ -1,228 +1,228 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="w-qrcode">
|
||||
<w-qrcode
|
||||
:options="codeOptions"
|
||||
:opacity="0"
|
||||
ref="wQrcode"
|
||||
@generate="(e) => qrcodeResult(e)"
|
||||
></w-qrcode>
|
||||
</view>
|
||||
|
||||
<up-popup
|
||||
:show="show"
|
||||
bgColor="transparent"
|
||||
:safeAreaInsetBottom="false"
|
||||
:closeOnClickOverlay="true"
|
||||
@close="close"
|
||||
mode="center"
|
||||
>
|
||||
<view class="box">
|
||||
<view class="info">
|
||||
<view class="u-flex justify-center">
|
||||
<up-avatar size="214rpx" :src="shopUserInfo.headImg"></up-avatar>
|
||||
</view>
|
||||
<view
|
||||
class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54"
|
||||
>
|
||||
<view>{{ shopUserInfo.nickName }} </view>
|
||||
<view>{{ desensitizePhone(shopUserInfo.phone) }}</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 font-14 line-height-54 text-center">
|
||||
<text class="color-666">邀请码</text>
|
||||
<text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700">{{
|
||||
inviteCode
|
||||
}}</text>
|
||||
<text class="" style="color: #fe6d11" @click="copyCode">复制</text>
|
||||
</view>
|
||||
<view class="u-flex justify-center" style="margin-top: 90rpx">
|
||||
<!-- <w-qrcode
|
||||
<view class="">
|
||||
<view class="w-qrcode">
|
||||
<w-qrcode :options="codeOptions" :opacity="0" ref="wQrcode" @generate="(e) => qrcodeResult(e)"></w-qrcode>
|
||||
</view>
|
||||
<up-popup :show="show" bgColor="transparent" :safeAreaInsetBottom="false" :closeOnClickOverlay="true" @close="close" mode="center">
|
||||
<view class="box">
|
||||
<view class="info">
|
||||
<view class="u-flex justify-center">
|
||||
<up-avatar size="214rpx" :src="shopUserInfo.headImg"></up-avatar>
|
||||
</view>
|
||||
<view class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54">
|
||||
<view>{{ shopUserInfo.nickName }}</view>
|
||||
<view>{{ desensitizePhone(shopUserInfo.phone) }}</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 font-14 line-height-54 text-center">
|
||||
<text class="color-666">邀请码</text>
|
||||
<text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700">{{ inviteCode }}</text>
|
||||
<text class="" style="color: #fe6d11" @click="copyCode">复制</text>
|
||||
</view>
|
||||
<view class="u-flex justify-center" style="margin-top: 90rpx">
|
||||
<!-- <w-qrcode
|
||||
:options="codeOptions"
|
||||
:opacity="1"
|
||||
ref="wQrcode"
|
||||
@generate="(e) => qrcodeResult(e)"
|
||||
></w-qrcode> -->
|
||||
<up-image width="322rpx" height="322rpx" :src="code"></up-image>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-60 u-flex u-col-center justify-center">
|
||||
<view class="confirm" @click="save">保存图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
<up-image width="322rpx" height="322rpx" :src="code"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="confirm line" @click="save">保存图片</view>
|
||||
<ymf-share><view class="confirm">微信分享</view></ymf-share>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import wQrcode from "@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue";
|
||||
import {desensitizePhone} from "@/utils/util.js";
|
||||
import { ref } from "vue";
|
||||
|
||||
<script setup>
|
||||
import ymfShare from '@/components/ymf-components/ymf-share.vue';
|
||||
import wQrcode from '@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue';
|
||||
import { desensitizePhone } from '@/utils/util.js';
|
||||
import { ref } from 'vue';
|
||||
const props = defineProps({
|
||||
inviteCode: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
shopUserInfo: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
inviteCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
shopUserInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const codeOptions = ref({
|
||||
size: 200,
|
||||
code: props.inviteCode,
|
||||
size: 200,
|
||||
code: props.inviteCode
|
||||
});
|
||||
function copyCode() {
|
||||
uni.setClipboardData({
|
||||
data: props.inviteCode,
|
||||
success: function () {
|
||||
console.log("success");
|
||||
},
|
||||
});
|
||||
uni.setClipboardData({
|
||||
data: props.inviteCode,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
const code = ref("");
|
||||
const code = ref('');
|
||||
|
||||
function qrcodeResult(e) {
|
||||
console.log("qrcodeResult", e);
|
||||
code.value = e.img.tempFilePath;
|
||||
console.log("code", code.value);
|
||||
console.log('qrcodeResult', e);
|
||||
code.value = e.img.tempFilePath;
|
||||
console.log('code', code.value);
|
||||
}
|
||||
|
||||
const show = defineModel({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
});
|
||||
const emits = defineEmits(["cancel", "confirm"]);
|
||||
const emits = defineEmits(['cancel', 'confirm']);
|
||||
function close() {
|
||||
show.value = false;
|
||||
emits("cancel");
|
||||
show.value = false;
|
||||
emits('cancel');
|
||||
}
|
||||
function save() {
|
||||
show.value = false;
|
||||
show.value = false;
|
||||
|
||||
// 保存图片到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: code.value,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('保存失败原因：', err);
|
||||
// 判断是否为授权拒绝（微信小程序授权拒绝的特征）
|
||||
if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize fail')) {
|
||||
// 弹出提示引导用户去设置页开启授权
|
||||
uni.showModal({
|
||||
title: '授权提示',
|
||||
content: '保存图片需要授权访问相册，请前往设置开启授权',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '去设置',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
// 跳转到微信小程序的授权设置页
|
||||
uni.openSetting({
|
||||
success: function (settingRes) {
|
||||
// 检查用户是否开启了相册授权
|
||||
if (settingRes.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.showToast({
|
||||
title: '授权成功，可重新保存',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '未开启授权，保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: '打开设置失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 非授权问题的保存失败（如文件路径错误、系统问题等）
|
||||
uni.showToast({
|
||||
title: "保存失败",
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
// 保存图片到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: code.value,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('保存失败原因：', err);
|
||||
// 判断是否为授权拒绝（微信小程序授权拒绝的特征）
|
||||
if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize fail')) {
|
||||
// 弹出提示引导用户去设置页开启授权
|
||||
uni.showModal({
|
||||
title: '授权提示',
|
||||
content: '保存图片需要授权访问相册，请前往设置开启授权',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '去设置',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
// 跳转到微信小程序的授权设置页
|
||||
uni.openSetting({
|
||||
success: function (settingRes) {
|
||||
// 检查用户是否开启了相册授权
|
||||
if (settingRes.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.showToast({
|
||||
title: '授权成功，可重新保存',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '未开启授权，保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: '打开设置失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 非授权问题的保存失败（如文件路径错误、系统问题等）
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
emits("confirm", code.value);
|
||||
emits('confirm', code.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.info .canvas) {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.border {
|
||||
border: 2rpx solid #d9d9d9;
|
||||
padding: 18rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
padding: 18rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.box {
|
||||
width: 638rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.top {
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
}
|
||||
.info {
|
||||
padding: 96rpx 40rpx 96rpx 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.small-title {
|
||||
min-width: 84rpx;
|
||||
text-align: right;
|
||||
}
|
||||
width: 638rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
// overflow: hidden;
|
||||
position: relative;
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.top {
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
}
|
||||
.info {
|
||||
padding: 96rpx 40rpx 96rpx 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.small-title {
|
||||
min-width: 84rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.footer-wrap {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -100upx;
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #e8ad7b;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 48rpx;
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #e8ad7b;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.confirm {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #e8ad7b;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 48rpx;
|
||||
white-space: nowrap;
|
||||
$color: #e8ad7b;
|
||||
flex: 1;
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: $color;
|
||||
border: 2rpx solid $color;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.line {
|
||||
background-color: #fff;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.line-height-54 {
|
||||
line-height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
}
|
||||
.w-qrcode {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,461 +1,427 @@
|
||||
<!-- 充值中心 -->
|
||||
<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="toduihuan">兑换码</text>
|
||||
<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 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>
|
||||
<ymf-share></ymf-share>
|
||||
</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="toduihuan">兑换码</text>
|
||||
<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 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"
|
||||
: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>
|
||||
<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, onShow } from "@dcloudio/uni-app";
|
||||
import { pay } from "@/utils/pay.js";
|
||||
import ymfShare from '@/components/ymf-components/ymf-share.vue';
|
||||
import { shareMixin, handleMixinOnLoad, returnQuery } from '@/utils/share.js';
|
||||
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, onShow } from '@dcloudio/uni-app';
|
||||
import { pay } from '@/utils/pay.js';
|
||||
|
||||
function toShopList() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user/member/czzx-shop-list?shopId=" + option.shopId,
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/member/czzx-shop-list?shopId=' + option.shopId
|
||||
});
|
||||
}
|
||||
|
||||
function toduihuan() {
|
||||
uni.navigateTo({
|
||||
url: "/user/exchange/index",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: '/user/exchange/index'
|
||||
});
|
||||
}
|
||||
|
||||
function couponNum(list) {
|
||||
return list.reduce((prve, cur) => {
|
||||
return prve + cur.num;
|
||||
}, 0);
|
||||
return list.reduce((prve, cur) => {
|
||||
return prve + cur.num;
|
||||
}, 0);
|
||||
}
|
||||
const couponModel = reactive({
|
||||
show: false,
|
||||
couponInfoList: [],
|
||||
show: false,
|
||||
couponInfoList: []
|
||||
});
|
||||
|
||||
function lookCoupon(item) {
|
||||
couponModel.show = true;
|
||||
couponModel.couponInfoList = item.couponInfoList;
|
||||
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();
|
||||
}
|
||||
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,
|
||||
});
|
||||
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,
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: '/pages/user/member/setPassword?type=1&shopId=' + option.shopId
|
||||
});
|
||||
}
|
||||
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
uni.navigateBack();
|
||||
}
|
||||
const list = ref([]);
|
||||
const sel = ref(0);
|
||||
const money = ref(null);
|
||||
const option = reactive({
|
||||
shopId: "",
|
||||
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 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 "";
|
||||
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();
|
||||
|
||||
onShareAppMessage(async (res) => {
|
||||
let query = await returnQuery();
|
||||
return {
|
||||
title: `充值-${shopInfo.shopName}`,
|
||||
path: `/pages/user/member/czzx?${query}`,
|
||||
imageUrl: shopInfo.logo,
|
||||
query
|
||||
};
|
||||
});
|
||||
|
||||
onLoad(async (opt) => {
|
||||
Object.assign(option, opt);
|
||||
await handleMixinOnLoad(opt);
|
||||
// init();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => money.value,
|
||||
(newval) => {
|
||||
if (newval && newval > 0) {
|
||||
sel.value = -1;
|
||||
}
|
||||
}
|
||||
() => money.value,
|
||||
(newval) => {
|
||||
if (newval && newval > 0) {
|
||||
sel.value = -1;
|
||||
}
|
||||
}
|
||||
);
|
||||
onShow(() => {
|
||||
init();
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.color1 {
|
||||
color: #5f2e0f;
|
||||
color: #5f2e0f;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
color: #ff6300;
|
||||
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;
|
||||
&.disabled {
|
||||
background: #eee;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
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: 20rpx;
|
||||
.balance-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.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, 0.3);
|
||||
padding: 40rpx 28rpx 0 28rpx;
|
||||
transform: translateY(-140rpx);
|
||||
border-radius: 74rpx 74rpx 0 0;
|
||||
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;
|
||||
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 0.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>
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user