Merge branch 'Branch_1' of https://git.u8t.cn/tangxinyue/alipay-emulator into Branch_1
2
main.js
|
|
@ -29,7 +29,7 @@ export function createApp() {
|
|||
app.config.globalProperties.$system = plus.os.name;
|
||||
// #endif
|
||||
app.config.globalProperties.$systemInfo = systemInfo
|
||||
uni.setStorageSync('version', '1.0.6.sp17')
|
||||
uni.setStorageSync('version', '1.0.6.sp20')
|
||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||
app.use(globalMethods);
|
||||
return {
|
||||
|
|
|
|||
180
pages.json
|
|
@ -9,25 +9,30 @@
|
|||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pages/call-log",
|
||||
"pages": [{
|
||||
"path": "call",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通话记录页面",
|
||||
"navigationStyle": "custom"
|
||||
"pages": [
|
||||
{
|
||||
"path": "call",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通话记录页面",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "detail/callDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通话记录详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"path": "detail/callDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通话记录详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/message",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "list-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "短信列表首页",
|
||||
|
|
@ -48,7 +53,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/shopping",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物app首页",
|
||||
|
|
@ -150,7 +156,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/balance",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "余额页面",
|
||||
|
|
@ -171,12 +178,27 @@
|
|||
"navigationBarTitleText": "转账模拟",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pay-successful/pay-successful",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付成功",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pay-successful/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改支付成功",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/bill",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "bill-list/bill-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账单列表页面",
|
||||
|
|
@ -201,7 +223,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/ant-credit-pay",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "花呗首页",
|
||||
|
|
@ -219,7 +242,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/finance-management",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "理财首页",
|
||||
|
|
@ -244,7 +268,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/other",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "/video-group-chat/video-group-chat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "视频群聊",
|
||||
|
|
@ -382,122 +407,107 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path" : "bank/zsyh",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "招商银行",
|
||||
"path": "bank/zsyh",
|
||||
"style": {
|
||||
"navigationBarTitleText": "招商银行",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "bank/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "选择银行卡",
|
||||
"path": "bank/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择银行卡",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "bank/gsyh",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "工商银行",
|
||||
"path": "bank/gsyh",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工商银行",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "bank/nyyh",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "农业银行",
|
||||
"path": "bank/nyyh",
|
||||
"style": {
|
||||
"navigationBarTitleText": "农业银行",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "bank/jsyh",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "建设银行",
|
||||
"path": "bank/jsyh",
|
||||
"style": {
|
||||
"navigationBarTitleText": "建设银行",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "game/honor-of-kings",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "王者荣耀",
|
||||
"path": "game/honor-of-kings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "王者荣耀",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "game/sanjiaozhou",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "三角洲",
|
||||
"path": "game/sanjiaozhou",
|
||||
"style": {
|
||||
"navigationBarTitleText": "三角洲",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "game/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "游戏首页",
|
||||
"path": "game/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "游戏首页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "wx-payment-success/wx-payment-success",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "微信支付成功",
|
||||
"path": "wx-payment-success/wx-payment-success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "微信支付成功",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "score/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "高考分数",
|
||||
"path": "score/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "高考分数",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "score/center",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "查询中心",
|
||||
"path": "score/center",
|
||||
"style": {
|
||||
"navigationBarTitleText": "查询中心",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "score/chongqing",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "重庆",
|
||||
"path": "score/chongqing",
|
||||
"style": {
|
||||
"navigationBarTitleText": "重庆",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "score/hebei",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "河北",
|
||||
"path": "score/hebei",
|
||||
"style": {
|
||||
"navigationBarTitleText": "河北",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "score/guandong",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "广东",
|
||||
"path": "score/guandong",
|
||||
"style": {
|
||||
"navigationBarTitleText": "广东",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "video-chat/video-chat",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "视频单聊",
|
||||
"path": "video-chat/video-chat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "视频单聊",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
|
@ -505,7 +515,8 @@
|
|||
},
|
||||
{
|
||||
"root": "pages/common",
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "hot-icon/hot-icon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "热门图标",
|
||||
|
|
@ -541,10 +552,9 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path" : "shipinjiaocheng/shipinjiaocheng",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "视频教程",
|
||||
"path": "shipinjiaocheng/shipinjiaocheng",
|
||||
"style": {
|
||||
"navigationBarTitleText": "视频教程",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
{
|
||||
"randomData": [
|
||||
{
|
||||
"title": "充值满减券",
|
||||
"tag": "特惠充",
|
||||
"desc": "满50元可用",
|
||||
"price": "1",
|
||||
"butText": "去看看",
|
||||
"imgUrl": "/static/image/balance/pay-successful/chongzhi.png"
|
||||
},
|
||||
{
|
||||
"title": "芭芭农场肥料",
|
||||
"tag": "芭芭农场",
|
||||
"desc": "现实翻倍",
|
||||
"price": "",
|
||||
"butText": "去看看",
|
||||
"imgUrl": "/static/image/balance/pay-successful/88nongchang.png"
|
||||
},
|
||||
{
|
||||
"title": "心相印抽纸优惠券",
|
||||
"tag": "分期生活",
|
||||
"desc": "满一元可用",
|
||||
"price": "1",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/xinxiangyin.png"
|
||||
},
|
||||
{
|
||||
"title": "蜜雪冰城全场券",
|
||||
"tag": "外卖福利",
|
||||
"desc": "满10元可用",
|
||||
"price": "3",
|
||||
"butText": "去领取",
|
||||
"imgUrl": "/static/image/balance/pay-successful/mixue.png"
|
||||
},
|
||||
{
|
||||
"title": "充值满减券",
|
||||
"tag": "中国石化",
|
||||
"desc": "满50元可用",
|
||||
"price": "3",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shiyou.png"
|
||||
},
|
||||
{
|
||||
"title": "零售购物券",
|
||||
"tag": "淘宝闪购",
|
||||
"desc": "满29元可用",
|
||||
"price": "8",
|
||||
"butText": "去领取",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shangou.png"
|
||||
},
|
||||
{
|
||||
"title": "公交乘车券",
|
||||
"tag": "公交地铁",
|
||||
"desc": "享3笔0.3乘车优惠",
|
||||
"price": "0.8",
|
||||
"butText": "去看看",
|
||||
"imgUrl": "/static/image/balance/pay-successful/chengche.png"
|
||||
},
|
||||
{
|
||||
"title": "电燃费优惠红包",
|
||||
"tag": "生活缴费",
|
||||
"desc": "缴电燃气费立减",
|
||||
"price": "0.5",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shuidian.png"
|
||||
}
|
||||
],
|
||||
"defaultData": {
|
||||
"user": "小王",
|
||||
"money": "88888.88",
|
||||
"payMethod": "招商银行卡(8888)",
|
||||
"bannerTime": "07月12日12:22",
|
||||
"styleType": "style3",
|
||||
"style1": {
|
||||
"couponlist": [
|
||||
{
|
||||
"title": "充值满减券",
|
||||
"tag": "中国石化",
|
||||
"desc": "满50元可用",
|
||||
"price": "3",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shiyou.png"
|
||||
}
|
||||
],
|
||||
"bannerUrl": "/static/image/balance/transfer/bottom-banner-1.png"
|
||||
},
|
||||
"style2": {
|
||||
"couponlist": [
|
||||
{
|
||||
"title": "蜜雪冰城全场券",
|
||||
"tag": "外卖福利",
|
||||
"desc": "满10元可用",
|
||||
"price": "3",
|
||||
"butText": "去领取",
|
||||
"imgUrl": "/static/image/balance/pay-successful/mixue.png"
|
||||
},
|
||||
{
|
||||
"title": "充值满减券",
|
||||
"tag": "中国石化",
|
||||
"desc": "满50元可用",
|
||||
"price": "3",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shiyou.png"
|
||||
},
|
||||
{
|
||||
"title": "零售购物券",
|
||||
"tag": "淘宝闪购",
|
||||
"desc": "满29元可用",
|
||||
"price": "8",
|
||||
"butText": "去领取",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shangou.png"
|
||||
},
|
||||
{
|
||||
"title": "公交乘车券",
|
||||
"tag": "公交地铁",
|
||||
"desc": "享3笔0.3乘车优惠",
|
||||
"price": "0.8",
|
||||
"butText": "去看看",
|
||||
"imgUrl": "/static/image/balance/pay-successful/chengche.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"style3": {
|
||||
"couponlist": [
|
||||
{
|
||||
"title": "充值满减券",
|
||||
"tag": "中国石化",
|
||||
"desc": "满50元可用",
|
||||
"price": "3",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/shiyou.png"
|
||||
},
|
||||
{
|
||||
"title": "心相印抽纸优惠券",
|
||||
"tag": "分期生活",
|
||||
"desc": "满一元可用",
|
||||
"price": "1",
|
||||
"butText": "免费领",
|
||||
"imgUrl": "/static/image/balance/pay-successful/xinxiangyin.png"
|
||||
},
|
||||
{
|
||||
"title": "蜜雪冰城全场券",
|
||||
"tag": "外卖福利",
|
||||
"desc": "满10元可用",
|
||||
"price": "3",
|
||||
"butText": "去领取",
|
||||
"imgUrl": "/static/image/balance/pay-successful/mixue.png"
|
||||
}
|
||||
],
|
||||
"bannerTime": "07月12日12:22"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,691 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<nav-bar bgColor="#F5F5F5" :isBack="true" title="编辑账单详情" isRightButton @right-click="saveData"></nav-bar>
|
||||
|
||||
<view class="tabs">
|
||||
<view class="tab-item" :class="{ active: payData.styleType == 'style1' }"
|
||||
@click="payData.styleType = 'style1'">样式1
|
||||
</view>
|
||||
<view class="tab-item" :class="{ active: payData.styleType == 'style2' }"
|
||||
@click="payData.styleType = 'style2'">样式2
|
||||
</view>
|
||||
<view class="tab-item" :class="{ active: payData.styleType == 'style3' }"
|
||||
@click="payData.styleType = 'style3'">样式3
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main-content">
|
||||
<!-- 基础信息卡片 -->
|
||||
<view class="card basic-card">
|
||||
<view class="amount-wrap">
|
||||
<text class="symbol">¥</text>
|
||||
<auto-width-input class="alipay-font" type="digit" v-model="payData.money" fontSize="88rpx"
|
||||
fontWeight="500" color="#1A1A1A" :showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<view class="info-item">
|
||||
<auto-width-input v-model="payData.user" fontSize="28rpx" color="#333"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
<view class="info-item" style="justify-content: flex-end;">
|
||||
<text class="value-symbol">¥ </text>
|
||||
<auto-width-input type="digit" v-model="payData.money" fontSize="28rpx" color="#333"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-row" style="margin-top: 16rpx;">
|
||||
<view class="info-item">
|
||||
<text class="label">付款方式</text>
|
||||
</view>
|
||||
<view class="info-item" style="justify-content: flex-end;">
|
||||
<auto-width-input v-model="payData.payMethod" fontSize="28rpx" color="#333"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 样式1 -->
|
||||
<template v-if="payData.styleType == 'style1'">
|
||||
<view class="card list-card">
|
||||
<view class="card-title" style="display: flex; justify-content: space-between;">
|
||||
支付有礼
|
||||
<image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
|
||||
mode="widthFix" @click="randomCoupon('style1')"></image>
|
||||
</view>
|
||||
<!-- 券1 -->
|
||||
<view class="list-item" v-if="payData.style1.couponlist && payData.style1.couponlist[0]">
|
||||
<view class="left-icon-wrap" @click="chooseImage('style1_coupon_0')">
|
||||
<image v-if="payData.style1.couponlist[0].imgUrl" class="item-img"
|
||||
:src="payData.style1.couponlist[0].imgUrl" mode="aspectFill"></image>
|
||||
<image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="row-flex" style="flex-wrap: wrap;">
|
||||
<view class="row-flex" style="margin-right: 12rpx;"
|
||||
v-if="payData.style1.couponlist[0].price !== undefined">
|
||||
<auto-width-input v-model="payData.style1.couponlist[0].price" fontSize="28rpx"
|
||||
color="#E6372D" fontWeight="500"></auto-width-input>
|
||||
<text class="main-title" style="color: #E6372D; width: auto;">元</text>
|
||||
<image class="edit-icon" src="/static/image/common/edit.png"
|
||||
style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
|
||||
</view>
|
||||
<view class="row-flex">
|
||||
<auto-width-input v-model="payData.style1.couponlist[0].title" fontSize="28rpx"
|
||||
color="#333" fontWeight="500" :showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-flex mt">
|
||||
<view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
|
||||
v-if="payData.style1.couponlist[0].tag !== undefined">
|
||||
<auto-width-input v-model="payData.style1.couponlist[0].tag" fontSize="20rpx"
|
||||
color="#E6372D" :showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
<view class="row-flex" v-if="payData.style1.couponlist[0].desc !== undefined">
|
||||
<auto-width-input v-model="payData.style1.couponlist[0].desc" fontSize="24rpx"
|
||||
color="#999" :showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-btn btn-get"
|
||||
style="display: flex; align-items: center; justify-content: center;"
|
||||
@click="toggleBtnText(payData.style1.couponlist[0])">
|
||||
<text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{
|
||||
payData.style1.couponlist[0].butText || '免费领' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 飞猪广告 -->
|
||||
<view class="card fliggy-card">
|
||||
<view class="banner-wrap" @click="toggleBanner">
|
||||
<image class="banner-img"
|
||||
:src="payData.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png'"
|
||||
mode="widthFix"></image>
|
||||
<view class="guanggao-tag">
|
||||
<image style="width: 70rpx;height: 32rpx;"
|
||||
src="/static/image/balance/transfer/guanggao.png"></image>
|
||||
</view>
|
||||
<view class="yaoyiyao-container">
|
||||
<view class="yaoyiyao-box">
|
||||
<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
|
||||
</image>
|
||||
<text class="text">摇动或点击查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fliggy-footer"
|
||||
v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info">
|
||||
<view class="text-content">
|
||||
<text class="b-title">飞猪旅行</text>
|
||||
<text class="b-desc">飞猪出行 超多折扣</text>
|
||||
</view>
|
||||
<view class="b-btn">领优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fliggy-footer"
|
||||
v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info" style="padding: 0;">
|
||||
<view class="text-content">
|
||||
<text class="b-title">淘宝闪购</text>
|
||||
<text class="b-desc">每天领大额外面红包</text>
|
||||
</view>
|
||||
<view class="b-btn">去领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 样式2 -->
|
||||
<template v-if="payData.styleType == 'style2'">
|
||||
<view class="card list-card">
|
||||
<view class="card-title" style="display: flex; justify-content: space-between;">支付有礼
|
||||
<image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
|
||||
mode="widthFix" @click="randomCoupon('style2')"></image>
|
||||
</view>
|
||||
|
||||
<view class="list-item" v-for="(item, index) in payData.style2.couponlist" :key="index">
|
||||
<view class="left-icon-wrap" @click="chooseImage('style2_coupon_' + index)">
|
||||
<image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
|
||||
<image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="row-flex" style="flex-wrap: wrap;">
|
||||
<view class="row-flex" style="margin-right: 12rpx;" v-if="item.price !== undefined">
|
||||
<auto-width-input v-model="item.price" fontSize="28rpx"
|
||||
:color="item.price.includes('g') ? '#333' : '#E6372D'"
|
||||
fontWeight="500"></auto-width-input>
|
||||
<text class="main-title"
|
||||
:style="{ color: item.price.includes('g') ? '#333' : '#E6372D', width: 'auto' }">{{
|
||||
item.price.includes('g') ? '' : '元' }}</text>
|
||||
<image class="edit-icon" src="/static/image/common/edit.png"
|
||||
style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
|
||||
</view>
|
||||
<view class="row-flex">
|
||||
<auto-width-input v-model="item.title" fontSize="28rpx" color="#333"
|
||||
fontWeight="500" :showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-flex mt">
|
||||
<view class="tag-red" :class="{ 'tag-orange': item.tag == '芭芭农场' }"
|
||||
style="margin-right: 12rpx; display: flex; align-items: center;"
|
||||
v-if="item.tag !== undefined">
|
||||
<auto-width-input v-model="item.tag" fontSize="20rpx"
|
||||
:color="item.tag == '芭芭农场' ? '#EF673C' : '#E6372D'"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
<view class="row-flex" v-if="item.desc !== undefined">
|
||||
<auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-btn btn-get" :class="{ 'btn-look': item.butText == '去看看' }"
|
||||
style="display: flex; align-items: center; justify-content: center;"
|
||||
@click="toggleBtnText(item)">
|
||||
<text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{ item.butText || '免费领'
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 样式3 -->
|
||||
<template v-if="payData.styleType == 'style3'">
|
||||
<view class="card list-card" style="padding-bottom: 24rpx;">
|
||||
<view class="flex-between" style="margin-bottom: 24rpx;">
|
||||
<text class="card-title" style="margin-bottom: 0;">碰一下立减</text>
|
||||
<view class="row-flex">
|
||||
<auto-width-input v-model="payData.style3.bannerTime" fontSize="24rpx"
|
||||
color="#666"></auto-width-input>
|
||||
<text class="time-text" style="width: auto;">后过期</text>
|
||||
<image class="edit-icon" src="/static/image/common/edit.png"
|
||||
style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="banner-box">
|
||||
<text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
|
||||
<image src="/static/image/balance/pay-successful/pengyipengbanner.png"
|
||||
style="width: 100%; border-radius: 12rpx; display: block;" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-title" style="display: flex; justify-content: flex-end;padding: 0 16px;">
|
||||
<image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png" mode="widthFix"
|
||||
@click="randomCoupon('style3')">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view class="card list-card" style="margin-top: 24rpx;">
|
||||
<view class="list-item" v-for="(item, index) in payData.style3.couponlist" :key="index">
|
||||
<view class="left-icon-wrap" @click="chooseImage('style3_coupon_' + index)">
|
||||
<image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
|
||||
<image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
|
||||
</view>
|
||||
<view class="item-content" style="flex: 1;">
|
||||
<view class="row-flex">
|
||||
<auto-width-input v-model="item.title" fontSize="28rpx" color="#333" fontWeight="500"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
<view class="row-flex mt">
|
||||
<view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
|
||||
v-if="item.tag !== undefined">
|
||||
<auto-width-input v-model="item.tag" fontSize="20rpx" color="#E6372D"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
<view class="row-flex" v-if="item.desc !== undefined">
|
||||
<auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-flex" style="align-items: baseline;" v-if="item.price !== undefined">
|
||||
<auto-width-input v-model="item.price" fontSize="40rpx" color="#E6372D" fontWeight="500"
|
||||
:showEdit="true"></auto-width-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { defaultData, randomData } from './data.json';
|
||||
import { util } from '@/utils/common.js';
|
||||
import autoWidthInput from '@/components/common/auto-width-input.vue';
|
||||
|
||||
const payData = ref(JSON.parse(JSON.stringify(defaultData)));
|
||||
|
||||
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
|
||||
|
||||
const randomCoupon = (styleName) => {
|
||||
// #ifdef APP-PLUS
|
||||
const oldList = payData.value[styleName].couponlist || [];
|
||||
oldList.forEach(item => {
|
||||
if (item.imgUrl && !item.imgUrl.startsWith('/static') && !item.imgUrl.startsWith('http')) {
|
||||
uni.removeSavedFile({ filePath: item.imgUrl });
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
const count = payData.value[styleName].couponlist.length;
|
||||
const shuffled = [...randomData].sort(() => 0.5 - Math.random());
|
||||
const selected = shuffled.slice(0, count);
|
||||
payData.value[styleName].couponlist = JSON.parse(JSON.stringify(selected));
|
||||
};
|
||||
const loadStorageData = () => {
|
||||
const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
|
||||
if (savedData) {
|
||||
payData.value = Object.assign({}, payData.value, savedData);
|
||||
}
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
loadStorageData();
|
||||
});
|
||||
|
||||
const saveData = () => {
|
||||
uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const chooseImage = (type) => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempPath = res.tempFilePaths[0];
|
||||
|
||||
let oldPath = '';
|
||||
if (type === 'style1_coupon_0') {
|
||||
oldPath = payData.value.style1.couponlist[0].imgUrl;
|
||||
} else if (type.startsWith('style2_coupon_')) {
|
||||
const idx = parseInt(type.split('_')[2]);
|
||||
oldPath = payData.value.style2.couponlist[idx].imgUrl;
|
||||
} else if (type.startsWith('style3_coupon_')) {
|
||||
const idx = parseInt(type.split('_')[2]);
|
||||
oldPath = payData.value.style3.couponlist[idx].imgUrl;
|
||||
}
|
||||
|
||||
const updateImgUrl = (path) => {
|
||||
if (type === 'style1_coupon_0') {
|
||||
payData.value.style1.couponlist[0].imgUrl = path;
|
||||
} else if (type.startsWith('style2_coupon_')) {
|
||||
const idx = parseInt(type.split('_')[2]);
|
||||
payData.value.style2.couponlist[idx].imgUrl = path;
|
||||
} else if (type.startsWith('style3_coupon_')) {
|
||||
const idx = parseInt(type.split('_')[2]);
|
||||
payData.value.style3.couponlist[idx].imgUrl = path;
|
||||
}
|
||||
};
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
if (oldPath && !oldPath.startsWith('/static') && !oldPath.startsWith('http')) {
|
||||
// 尝试删除旧的本地文件,避免存储空间堆积
|
||||
uni.removeSavedFile({ filePath: oldPath });
|
||||
}
|
||||
uni.saveFile({
|
||||
tempFilePath: tempPath,
|
||||
success: (saveRes) => {
|
||||
updateImgUrl(saveRes.savedFilePath);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
updateImgUrl(tempPath);
|
||||
// #endif
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toggleBtnText = (item) => {
|
||||
const textList = ['免费领', '去看看', '去领取'];
|
||||
const currentIndex = textList.indexOf(item.butText);
|
||||
if (currentIndex > -1) {
|
||||
item.butText = textList[(currentIndex + 1) % textList.length];
|
||||
} else {
|
||||
item.butText = '免费领';
|
||||
}
|
||||
};
|
||||
|
||||
const toggleBanner = () => {
|
||||
const current = payData.value.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png';
|
||||
if (current.includes('bottom-banner-1.png')) {
|
||||
payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-2.png';
|
||||
} else {
|
||||
payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-1.png';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/common/main.css";
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F5;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #3884FD;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 32rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20rpx;
|
||||
margin: 24rpx 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 12rpx 40rpx;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #3884FD;
|
||||
border-color: #3884FD;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.basic-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
color: #1A1A1A;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 60rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.value-symbol {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.edit-icon-center {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-icon-wrap {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #F5F5F5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mt {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tag-red {
|
||||
font-size: 20rpx;
|
||||
color: #E6372D;
|
||||
background: #FFF1F0;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.tag-orange {
|
||||
color: #EF673C;
|
||||
background: #FFF2F1;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
padding: 10rpx 28rpx;
|
||||
border-radius: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-get {
|
||||
background-color: #E6372D;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-look {
|
||||
background-color: #E6372D;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fliggy-card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-wrap {
|
||||
position: relative;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.guanggao-tag {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
}
|
||||
|
||||
.yaoyiyao-container {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.yaoyiyao-box {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fliggy-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
|
||||
.logo-box {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.b-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.b-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.b-btn {
|
||||
background-color: #E6372D;
|
||||
color: #fff;
|
||||
padding: 10rpx 28rpx;
|
||||
border-radius: 26rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.banner-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.banner-time {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 170rpx;
|
||||
top: 68rpx;
|
||||
font-size: 20rpx;
|
||||
color: #C70B0C;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,762 @@
|
|||
<template>
|
||||
<!-- 水印 -->
|
||||
<view v-if="$isVip()">
|
||||
<watermark dark="light" source="uni_alipay_pay-successful" />
|
||||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_pay-successful')">
|
||||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||||
</liu-drag-button>
|
||||
</view>
|
||||
<view class="container">
|
||||
<!-- 蓝色背景区域 -->
|
||||
<view class="header-section">
|
||||
<nav-bar ref="navBarRef" bgColor="transparent" :isBack="false" :buttonGroup="buttonGroup"
|
||||
tipLayerType="pay-successful-tip" isTipLayer tipLayerText="修改支付数据" @button-click="handleButtonClick">
|
||||
<template v-slot:right>
|
||||
<view class="nav-link w100"
|
||||
style="display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; padding: 0;">
|
||||
<text @click="util.goBack()" style="margin-right: 20rpx;">回首页</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:center>
|
||||
<view class="status-box">
|
||||
<image class="image" src="/static/image/balance/transfer/success.png"></image>
|
||||
<text class="status-text">支付成功</text>
|
||||
</view>
|
||||
</template>
|
||||
</nav-bar>
|
||||
|
||||
<!-- 转账状态信息 -->
|
||||
<view class="success-info">
|
||||
<view class="amount-box" @click="goEdit">
|
||||
<text class="symbol">¥</text>
|
||||
<text class="amount alipay-font">{{ Number(payData.money).toFixed(2) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 收款方/付款方式 -->
|
||||
<view class="details-box">
|
||||
<view class="detail-item">
|
||||
<text class="label">{{ payData.user }}</text>
|
||||
<text class="value">{{ Number(payData.money).toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">付款方式</text>
|
||||
<text class="value">{{ payData.payMethod }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="main-content" :style="{ top: `${190 + statusBarHeight}px` }">
|
||||
<!-- 样式1 -->
|
||||
<template v-if="payData.styleType == 'style1'">
|
||||
<view class="pay-success-card">
|
||||
<image class="title-img" style="width: 106rpx;height: 28rpx;"
|
||||
src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
|
||||
<view class="banner-footer" style="padding: 0 16rpx;">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info" style="border-top: none;">
|
||||
<view class="text-content">
|
||||
<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
|
||||
<text class="b-desc">领优惠,支付更省钱</text>
|
||||
</view>
|
||||
<view class="b-btn">去看看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="banner-footer" style="padding: 0 16rpx;">
|
||||
<view class="logo-box">
|
||||
<image class="logo" :src="payData.style1.couponlist[0].imgUrl" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info">
|
||||
<view class="text-content">
|
||||
<text class="b-title">
|
||||
<text
|
||||
v-if="payData.style1.couponlist[0].price && payData.style1.couponlist[0].price > 0"
|
||||
style="color: #EA4833;">{{ payData.style1.couponlist[0].price }}元</text>
|
||||
{{ payData.style1.couponlist[0].title }}
|
||||
</text>
|
||||
<text class="b-desc">
|
||||
<text class="b-desc-tag">{{ payData.style1.couponlist[0].tag }}</text>
|
||||
{{ payData.style1.couponlist[0].desc }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-section">
|
||||
<!-- 飞猪广告 -->
|
||||
<view class="card fliggy-card">
|
||||
<image class="banner-img" :src="payData.style1.bannerUrl" mode="widthFix" @click="toggleBanner">
|
||||
</image>
|
||||
<view class="guanggao-tag">
|
||||
<image style="width: 70rpx;height: 32rpx;"
|
||||
src="/static/image/balance/transfer/guanggao.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="yaoyiyao-container">
|
||||
<view class="yaoyiyao-box">
|
||||
<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
|
||||
</image>
|
||||
<text class="text">摇动或点击查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="banner-footer"
|
||||
v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info" style="padding: 0;">
|
||||
<view class="text-content">
|
||||
<text class="b-title">飞猪旅行</text>
|
||||
<text class="b-desc">飞猪出行 超多折扣</text>
|
||||
</view>
|
||||
<view class="b-btn">领优惠</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="banner-footer"
|
||||
v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info" style="padding: 0;">
|
||||
<view class="text-content">
|
||||
<text class="b-title">淘宝闪购</text>
|
||||
<text class="b-desc">每天领大额外面红包</text>
|
||||
</view>
|
||||
<view class="b-btn">去领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 样式2 -->
|
||||
<template v-if="payData.styleType == 'style2'">
|
||||
<view class="pay-success-card">
|
||||
<image class="title-img" style="width: 106rpx;height: 28rpx;"
|
||||
src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
|
||||
<view class="banner-footer" style="padding: 0 16rpx;">
|
||||
<view class="logo-box">
|
||||
<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info" style="border-top: none;">
|
||||
<view class="text-content">
|
||||
<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
|
||||
<text class="b-desc">领优惠,支付更省钱</text>
|
||||
</view>
|
||||
<view class="b-btn">去看看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="banner-footer" style="padding: 0 16rpx;"
|
||||
v-for="item, index in payData.style2.couponlist" :key="index">
|
||||
<view class="logo-box">
|
||||
<image class="logo" :src="item.imgUrl" mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
<view class="banner-info">
|
||||
<view class="text-content">
|
||||
<text class="b-title">
|
||||
<text v-if="item.price" style="color: #EA4833;">{{ item.price }}元</text>{{
|
||||
item.title
|
||||
}}</text>
|
||||
<text class="b-desc">
|
||||
<text class="b-desc-tag">{{ item.tag }}</text>
|
||||
{{ item.desc }}</text>
|
||||
</view>
|
||||
<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="payData.styleType == 'style3'">
|
||||
<view style="padding: 24rpx 20rpx;margin-bottom: 24rpx;" class="pay-success-card">
|
||||
<text class="title">支付有礼</text>
|
||||
<view class="banner-box">
|
||||
<text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
|
||||
<image src="/static/image/balance/pay-successful/pengyipengbanner.png" style="width: 100%;"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="promo-card" v-for="item, index in payData.style3.couponlist" :key="index">
|
||||
<view class="promo-left-box">
|
||||
<image class="img" :src="item.imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="promo-right">
|
||||
<view class="promo-content">
|
||||
<text class="promo-title">{{ item.title }}</text>
|
||||
<view class="promo-tags">
|
||||
<text class="tag">{{ item.tag }}</text>
|
||||
<text class="tag-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="promo-right-box">
|
||||
|
||||
<view class="price-box">
|
||||
<text class="p-num alipay-font">{{ item.price }}</text>
|
||||
<text class="p-unit">元</text>
|
||||
</view>
|
||||
<view class="free-btn">{{ item.butText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<view class="footer-section">
|
||||
<view class="finish-btn" @click="goBack">完成</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow,
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
util
|
||||
} from '@/utils/common.js';
|
||||
import {
|
||||
defaultData
|
||||
} from './data.json';
|
||||
const {
|
||||
appContext,
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
|
||||
const statusBarHeight = ref(0);
|
||||
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
|
||||
const payData = ref(defaultData);
|
||||
|
||||
const bannerImages = [
|
||||
'/static/image/balance/transfer/bottom-banner-1.png',
|
||||
'/static/image/balance/transfer/bottom-banner-2.png'
|
||||
];
|
||||
|
||||
// 从缓存加载数据
|
||||
const loadStorageData = () => {
|
||||
const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
|
||||
if (savedData) {
|
||||
payData.value = savedData;
|
||||
}
|
||||
};
|
||||
loadStorageData();
|
||||
|
||||
const navBarRef = ref(null);
|
||||
const buttonGroup = ref([{
|
||||
name: '编辑支付数据',
|
||||
action: 'edit'
|
||||
}]);
|
||||
const handleButtonClick = (button) => {
|
||||
if (button.action === 'edit') {
|
||||
goEdit()
|
||||
}
|
||||
};
|
||||
|
||||
const goEdit = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/balance/pay-successful/edit'
|
||||
});
|
||||
}
|
||||
|
||||
const toggleBanner = () => {
|
||||
const currentIndex = bannerImages.indexOf(payData.value.style1.bannerUrl);
|
||||
const nextIndex = (currentIndex + 1) % bannerImages.length;
|
||||
payData.value.style1.bannerUrl = bannerImages[nextIndex];
|
||||
uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
// 进入支付成功页面埋点
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: 'click',
|
||||
key: 'pay-successful',
|
||||
value: "支付成功"
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
if (systemInfo.statusBarHeight) {
|
||||
statusBarHeight.value = systemInfo.statusBarHeight;
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
loadStorageData();
|
||||
// #ifdef APP-PLUS
|
||||
util.setAndroidSystemBarColor('#F5F5F5')
|
||||
uni.setNavigationBarColor({
|
||||
animation: { // 动画效果
|
||||
duration: 100,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
plus.navigator.setStatusBarStyle("light");
|
||||
}, 500);
|
||||
// #endif
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/common/main.css";
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
height: 860rpx;
|
||||
background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);
|
||||
|
||||
::v-deep .nav-bar-container {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
::v-deep .placeholder-box {
|
||||
display: none !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep .tipLayer {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
|
||||
.nav-link {
|
||||
padding: 0 30rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.success-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pay-success-card {
|
||||
margin: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.title-img {
|
||||
width: 106rpx;
|
||||
height: 28rpx;
|
||||
margin-top: 22rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 24rpx;
|
||||
color: #252525;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.banner-box {
|
||||
position: relative;
|
||||
width: 660rpx;
|
||||
height: 166rpx;
|
||||
margin-top: 18rpx;
|
||||
|
||||
.banner-time {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 156rpx;
|
||||
top: 68rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #C70B0C;
|
||||
line-height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
height: 34rpx;
|
||||
|
||||
.image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 34rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #fff;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 68rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 92rpx;
|
||||
line-height: 92rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.details-box {
|
||||
width: 100%;
|
||||
padding: 0 46rpx;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
// background-color: #F5F5F5;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.fliggy-card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guanggao-tag {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
}
|
||||
|
||||
.yaoyiyao-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -80rpx;
|
||||
padding-bottom: 16rpx;
|
||||
|
||||
.yaoyiyao-box {
|
||||
padding: 12rpx 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #000000;
|
||||
border-radius: 28rpx;
|
||||
opacity: 0.5;
|
||||
|
||||
.img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.banner-footer {
|
||||
padding: 24rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.logo-box {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.logo {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.banner-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #F6F6F6;
|
||||
padding: 30rpx 0;
|
||||
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.b-title {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.b-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #969696;
|
||||
|
||||
.b-desc-tag {
|
||||
font-size: 24rpx;
|
||||
color: #E4711F;
|
||||
background-color: #FDF6F3;
|
||||
line-height: 24rpx;
|
||||
padding: 2px 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-btn {
|
||||
padding: 0 20rpx;
|
||||
background-color: #FF3A31;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: url('/static/image/balance/pay-successful/more.png');
|
||||
top: 16rpx;
|
||||
right: 20rpx;
|
||||
width: 24rpx;
|
||||
height: 12rpx;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
padding: 0px 40rpx 0;
|
||||
margin-top: 50rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 24rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||||
|
||||
.finish-btn {
|
||||
height: 84rpx;
|
||||
width: 390rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #2172CA;
|
||||
border-radius: 42rpx;
|
||||
color: #2172CA;
|
||||
font-size: 32rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 190px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.promo-card {
|
||||
// padding: 30rpx;
|
||||
margin: 16rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.promo-left-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 34rpx;
|
||||
background-image: url("/static/image/balance/transfer/card-bg-2-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
height: 144rpx;
|
||||
margin-right: -1px;
|
||||
|
||||
|
||||
.img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.promo-right {
|
||||
height: 144rpx;
|
||||
background-image: url("/static/image/balance/transfer/card-bg-2-right.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
|
||||
.promo-title {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.promo-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
height: 34rpx;
|
||||
color: #EF673C;
|
||||
background-color: #FFF2F1;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.tag-desc {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.promo-right-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.price-box {
|
||||
color: #F93950;
|
||||
|
||||
.p-num {
|
||||
font-size: 34rpx;
|
||||
line-height: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.p-unit {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.free-btn {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 24rpx;
|
||||
background-color: #FA3A49;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -232,6 +232,11 @@ const menuList = [{
|
|||
name: "转账模拟",
|
||||
isHot: false,
|
||||
path: "/pages/balance/transfer/transfer"
|
||||
}, {
|
||||
icon: "zhifuchenggong",
|
||||
name: "支付成功",
|
||||
isHot: false,
|
||||
path: "/pages/balance/pay-successful/pay-successful"
|
||||
}, {
|
||||
icon: "nianduzhangdan",
|
||||
name: "年度账单",
|
||||
|
|
@ -1013,7 +1018,7 @@ onUnload(() => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
|
|
@ -1050,6 +1055,7 @@ onUnload(() => {
|
|||
|
||||
.activity-box {
|
||||
margin: 0 32rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 195 B |
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.2 KiB |