Merge branch 'Branch_1' of https://git.u8t.cn/tangxinyue/alipay-emulator into Branch_1

This commit is contained in:
小李 2026-07-08 10:37:55 +08:00
commit c933a2c663
21 changed files with 1709 additions and 87 deletions

View File

@ -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 {

View File

@ -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"
}
}

View File

@ -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"
}
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB