362 lines
8.2 KiB
Vue
362 lines
8.2 KiB
Vue
<template>
|
||
<view class="container">
|
||
<nav-bar bgColor="transparent" :isBack="false">
|
||
<template v-slot:center>
|
||
<view class="flex-cneter title-box flex" style="margin-top: 24rpx;">
|
||
<image class="wx-logo" src="/static/image/other/payment-success/payment-success.png"></image>
|
||
<text class="title">支付成功</text>
|
||
</view>
|
||
</template>
|
||
</nav-bar>
|
||
<view class="content-box flex-column flex-cneter" @click="editPaymentInfo">
|
||
<image v-if="paymetInfo.userImg" class="user-img" :src="paymetInfo.userImg" mode="aspectFill"></image>
|
||
<text class="product-name">{{ paymetInfo.productName }}</text>
|
||
<view class="money flex wx-font-medium" :style="{ 'margin-top': paymetInfo.userImg ? '78rpx' : '46rpx' }">
|
||
<image class="symbol" src="/static/image/other/payment-success/symbol-yuan.png"></image>{{
|
||
Number(paymetInfo.money).toFixed(2) }}
|
||
</view>
|
||
<image v-if="paymetInfo.isAd" class="ad-img" src="/static/image/other/payment-success/ad-img.png"
|
||
mode="widthFix">
|
||
</image>
|
||
</view>
|
||
<view class="finish-butn" @click="util.goBack()">完成</view>
|
||
|
||
<!-- 修改支付信息弹窗 -->
|
||
<uni-popup ref="editPaymentInfoPopup" type="center">
|
||
<view class="edit-popup">
|
||
<view class="title">修改支付信息</view>
|
||
<view class="input-item flex-align-center">
|
||
<text class="label">用户头像</text>
|
||
<view class="avatar-uploader flex-1">
|
||
<view class="avatar-preview" v-if="paymetInfo.userImg">
|
||
<image class="preview-img" :src="paymetInfo.userImg" mode="aspectFill"></image>
|
||
<view class="delete-icon" @click="handleDeleteAvatar">×</view>
|
||
</view>
|
||
<view class="upload-btn" v-else @click="handleChooseAvatar">
|
||
<text class="plus">+</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="input-item flex-align-center">
|
||
<text class="label"><text style="color: #FF3B30;">*</text>商品名称</text>
|
||
<input class="flex-1" type="text" v-model="paymetInfo.productName" placeholder="请输入商品名称" />
|
||
</view>
|
||
<view class="input-item flex-align-center">
|
||
<text class="label"><text style="color: #FF3B30;">*</text>支付金额</text>
|
||
<input class="flex-1" type="digit" v-model="paymetInfo.money" placeholder="请输入支付金额" />
|
||
</view>
|
||
<view class="input-item flex-align-center">
|
||
<text class="label">展示广告</text>
|
||
<switch class="flex-1" :checked="paymetInfo.isAd" @change="paymetInfo.isAd = $event.detail.value"
|
||
color="#16B264" style="transform:scale(0.8);transform-origin:left center;" />
|
||
</view>
|
||
<view class="btn-group flex">
|
||
<view class="btn cancel flex-1" @click="editPaymentInfoPopup.close()">取消</view>
|
||
<view style="width: 30rpx;"></view>
|
||
<view class="btn confirm flex-1" @click="confirmEditPaymentInfo">确定</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<!-- 水印 -->
|
||
<view v-if="$isVip()">
|
||
<watermark dark="light" source="uni_alipay_other_wx_pay_success" />
|
||
<liu-drag-button :canDocking="false"
|
||
@clickBtn="$goRechargePage('watermark', 'uni_alipay_other_wx_pay_success')">
|
||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||
</liu-drag-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, getCurrentInstance } from 'vue';
|
||
import { onShow, onLoad } from '@dcloudio/uni-app';
|
||
import { util } from '@/utils/common';
|
||
import { storage } from '@/utils/storage';
|
||
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance();
|
||
|
||
const editPaymentInfoPopup = ref(null);
|
||
|
||
const editPaymentInfo = () => {
|
||
editPaymentInfoPopup.value.open('center');
|
||
}
|
||
|
||
const handleChooseAvatar = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
const tempFilePath = res.tempFilePaths[0];
|
||
// #ifndef H5
|
||
uni.saveFile({
|
||
tempFilePath: tempFilePath,
|
||
success: (saveRes) => {
|
||
if (paymetInfo.value.userImg && !paymetInfo.value.userImg.startsWith('/static/')) {
|
||
uni.removeSavedFile({ filePath: paymetInfo.value.userImg });
|
||
}
|
||
paymetInfo.value.userImg = saveRes.savedFilePath;
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
paymetInfo.value.userImg = tempFilePath;
|
||
// #endif
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleDeleteAvatar = () => {
|
||
// #ifndef H5
|
||
if (paymetInfo.value.userImg && !paymetInfo.value.userImg.startsWith('/static/')) {
|
||
uni.removeSavedFile({ filePath: paymetInfo.value.userImg });
|
||
}
|
||
// #endif
|
||
paymetInfo.value.userImg = '';
|
||
};
|
||
|
||
const confirmEditPaymentInfo = () => {
|
||
editPaymentInfoPopup.value.close();
|
||
storage.set('wx_payment_success_info', paymetInfo.value);
|
||
}
|
||
|
||
const buttonGroup = [
|
||
{
|
||
name: "修改支付信息",
|
||
click: () => {
|
||
editPaymentInfo()
|
||
}
|
||
}
|
||
]
|
||
|
||
|
||
const paymetInfo = ref({
|
||
userImg: '',
|
||
productName: '王者荣耀',
|
||
money: 298,
|
||
isAd: false,
|
||
});
|
||
|
||
onShow(() => {
|
||
// #ifdef APP-PLUS&&!APP-HARMONY
|
||
util.setAndroidSystemBarColor('#FFFFFF')
|
||
setTimeout(() => {
|
||
plus.navigator.setStatusBarStyle("dark");
|
||
}, 500)
|
||
// #endif
|
||
})
|
||
|
||
onLoad(async () => {
|
||
const cachedInfo = storage.get('wx_payment_success_info');
|
||
if (cachedInfo) {
|
||
paymetInfo.value = cachedInfo;
|
||
} else {
|
||
paymetInfo.value = { productName: '王者荣耀', money: 168 };
|
||
}
|
||
|
||
// 微信支付成功页面埋点
|
||
proxy.$apiUserEvent('all', {
|
||
type: 'event',
|
||
key: 'wx_pay_success',
|
||
prefix: '.uni.other.',
|
||
value: "微信支付成功"
|
||
})
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.title-box {
|
||
.wx-logo {
|
||
width: 40rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
color: #16B264;
|
||
line-height: 32rpx;
|
||
font-weight: 500;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.content-box {
|
||
margin-top: 162rpx;
|
||
align-items: center;
|
||
|
||
.user-img {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
border-radius: 50%;
|
||
background-color: #D8D8D8;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.money {
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 46rpx;
|
||
font-weight: 500;
|
||
font-size: 88rpx;
|
||
color: #1A1A1A;
|
||
line-height: 88rpx;
|
||
|
||
.symbol {
|
||
width: 32rpx;
|
||
height: 46rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.ad-img {
|
||
margin-top: 100rpx;
|
||
width: 654rpx;
|
||
}
|
||
}
|
||
|
||
.finish-butn {
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 348rpx;
|
||
height: 92rpx;
|
||
background-color: #F1F1F1;
|
||
color: #1A1A1A;
|
||
line-height: 92rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
bottom: 170rpx;
|
||
bottom: calc(170rpx + env(safe-area-inset-bottom));
|
||
bottom: calc(170rpx + constant(safe-area-inset-bottom));
|
||
}
|
||
|
||
.edit-popup {
|
||
width: 600rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.input-item {
|
||
margin-bottom: 30rpx;
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #1A1A1A;
|
||
width: 140rpx;
|
||
}
|
||
|
||
input {
|
||
height: 72rpx;
|
||
background-color: #F8F8F8;
|
||
border-radius: 12rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.avatar-uploader {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.upload-btn {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
background-color: #F8F8F8;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 2rpx dashed #CCCCCC;
|
||
|
||
.plus {
|
||
font-size: 60rpx;
|
||
color: #999;
|
||
font-weight: 300;
|
||
margin-top: -6rpx;
|
||
}
|
||
}
|
||
|
||
.avatar-preview {
|
||
position: relative;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
|
||
.preview-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.delete-icon {
|
||
position: absolute;
|
||
top: -4rpx;
|
||
right: -4rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background-color: red;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-group {
|
||
margin-top: 50rpx;
|
||
justify-content: space-between;
|
||
|
||
.btn {
|
||
height: 80rpx;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
font-size: 30rpx;
|
||
|
||
&.cancel {
|
||
background-color: #F1F1F1;
|
||
color: #333333;
|
||
}
|
||
|
||
&.confirm {
|
||
background-color: #3b82f6;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
@import '/common/main.css';
|
||
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
</style>
|