修改转账页面,可切换图片区域样式,编辑优惠券内容

This commit is contained in:
tangxinyue 2026-06-11 11:12:00 +08:00
parent b1f41cfcbb
commit d54877fb85
5 changed files with 91 additions and 7 deletions

View File

@ -79,13 +79,14 @@
<view class="promo-card"> <view class="promo-card">
<view class="promo-left-box"> <view class="promo-left-box">
<image class="img" src="/static/image/balance/transfer/card-img-2.png" mode="aspectFill"></image> <image class="img" :src="transferData.promoImage || '/static/image/balance/transfer/card-img-2.png'"
mode="aspectFill"></image>
</view> </view>
<view class="promo-right"> <view class="promo-right">
<view class="promo-content"> <view class="promo-content">
<text class="promo-title">{{ transferData.promoTitle }}</text> <text class="promo-title">{{ transferData.promoTitle }}</text>
<view class="promo-tags"> <view class="promo-tags">
<text class="tag">淘宝闪购</text> <text class="tag">{{ transferData.promoTag }}</text>
<text class="tag-desc">{{ transferData.promoTagDesc }}</text> <text class="tag-desc">{{ transferData.promoTagDesc }}</text>
</view> </view>
</view> </view>
@ -98,24 +99,27 @@
<view class="free-btn">免费领</view> <view class="free-btn">免费领</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 白色卡片区域 --> <!-- 白色卡片区域 -->
<view class="content-section"> <view class="content-section">
<!-- 飞猪广告 --> <!-- 飞猪广告 -->
<view class="card fliggy-card"> <view class="card fliggy-card">
<image class="banner-img" src="/static/image/balance/transfer/bottom-banner.png" mode="widthFix"> <image class="banner-img" :src="transferData.bannerUrl" mode="widthFix" @click="toggleBanner">
</image> </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-container">
<view class="yaoyiyao-box"> <view class="yaoyiyao-box">
<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix"></image> <image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix"></image>
<text class="text">摇动或点击查看详情</text> <text class="text">摇动或点击查看详情</text>
</view> </view>
</view> </view>
<view class="banner-footer"> <view class="banner-footer"
v-if="transferData.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
<view class="banner-info"> <view class="banner-info">
<view class="logo-box"> <view class="logo-box">
<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit"> <image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
@ -128,6 +132,20 @@
</view> </view>
<view class="b-btn">领优惠</view> <view class="b-btn">领优惠</view>
</view> </view>
<view class="banner-footer"
v-if="transferData.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
<view class="banner-info">
<view class="logo-box">
<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png" mode="aspectFit">
</image>
</view>
<view class="text-content">
<text class="b-title">淘宝闪购</text>
<text class="b-desc">每天领大额外面红包</text>
</view>
</view>
<view class="b-btn">去领取</view>
</view>
</view> </view>
</view> </view>
<!-- 底部操作区 --> <!-- 底部操作区 -->
@ -171,6 +189,20 @@
</view> </view>
<!-- 闪购神券配置 --> <!-- 闪购神券配置 -->
<text class="form-title-desc">闪购神券配置</text> <text class="form-title-desc">闪购神券配置</text>
<view class="form-item">
<text class="require-dot"></text>
<text class="label">闪购图片</text>
<view class="avatar-picker" @click="choosePromoImage">
<image :src="tempEditData.promoImage || '/static/image/balance/transfer/card-img-2.png'"
mode="aspectFill"></image>
</view>
</view>
<view class="form-item">
<text class="require-dot"></text>
<text class="label">闪购标签</text>
<uni-easyinput class="input" v-model="tempEditData.promoTag" :inputBorder="false"
placeholder="请输入闪购标签" />
</view>
<view class="form-item"> <view class="form-item">
<text class="require-dot"></text> <text class="require-dot"></text>
<text class="label">闪购标题</text> <text class="label">闪购标题</text>
@ -234,11 +266,26 @@ const transferData = reactive({
recipient: '小王(*王)', recipient: '小王(*王)',
paymentMethod: '工商银行卡(9999)', paymentMethod: '工商银行卡(9999)',
avatar: '', avatar: '',
promoImage: '',
promoTitle: '零售购物券', promoTitle: '零售购物券',
promoTag: '淘宝闪购',
promoTagDesc: '满29元可用', promoTagDesc: '满29元可用',
promoPrice: '8' promoPrice: '8',
bannerUrl: '/static/image/balance/transfer/bottom-banner-1.png'
}); });
const bannerImages = [
'/static/image/balance/transfer/bottom-banner-1.png',
'/static/image/balance/transfer/bottom-banner-2.png'
];
const toggleBanner = () => {
const currentIndex = bannerImages.indexOf(transferData.bannerUrl);
const nextIndex = (currentIndex + 1) % bannerImages.length;
transferData.bannerUrl = bannerImages[nextIndex];
uni.setStorageSync(STORAGE_KEY, transferData);
};
onLoad(() => { onLoad(() => {
// //
proxy.$apiUserEvent('all', { proxy.$apiUserEvent('all', {
@ -263,7 +310,9 @@ const tempEditData = reactive({
recipient: '', recipient: '',
paymentMethod: '', paymentMethod: '',
avatar: '', avatar: '',
promoImage: '',
promoTitle: '', promoTitle: '',
promoTag: '',
promoTagDesc: '', promoTagDesc: '',
promoPrice: '' promoPrice: ''
}); });
@ -280,7 +329,9 @@ const openEditPopup = () => {
tempEditData.recipient = transferData.recipient; tempEditData.recipient = transferData.recipient;
tempEditData.paymentMethod = transferData.paymentMethod; tempEditData.paymentMethod = transferData.paymentMethod;
tempEditData.avatar = transferData.avatar; tempEditData.avatar = transferData.avatar;
tempEditData.promoImage = transferData.promoImage;
tempEditData.promoTitle = transferData.promoTitle; tempEditData.promoTitle = transferData.promoTitle;
tempEditData.promoTag = transferData.promoTag;
tempEditData.promoTagDesc = transferData.promoTagDesc; tempEditData.promoTagDesc = transferData.promoTagDesc;
tempEditData.promoPrice = transferData.promoPrice; tempEditData.promoPrice = transferData.promoPrice;
editPopup.value.open(); editPopup.value.open();
@ -378,11 +429,25 @@ const confirmEdit = async () => {
} }
// #endif // #endif
// ( APP )
let finalPromoImagePath = tempEditData.promoImage;
// #ifdef APP-PLUS
if (tempEditData.promoImage !== transferData.promoImage) {
//
finalPromoImagePath = await saveImageToLocal(tempEditData.promoImage);
if (transferData.promoImage) {
removeLocalFile(transferData.promoImage);
}
}
// #endif
transferData.amount = tempEditData.amount; transferData.amount = tempEditData.amount;
transferData.recipient = tempEditData.recipient; transferData.recipient = tempEditData.recipient;
transferData.paymentMethod = tempEditData.paymentMethod; transferData.paymentMethod = tempEditData.paymentMethod;
transferData.avatar = finalAvatarPath; transferData.avatar = finalAvatarPath;
transferData.promoImage = finalPromoImagePath;
transferData.promoTitle = tempEditData.promoTitle; transferData.promoTitle = tempEditData.promoTitle;
transferData.promoTag = tempEditData.promoTag;
transferData.promoTagDesc = tempEditData.promoTagDesc; transferData.promoTagDesc = tempEditData.promoTagDesc;
transferData.promoPrice = tempEditData.promoPrice; transferData.promoPrice = tempEditData.promoPrice;
@ -403,6 +468,17 @@ const chooseAvatar = () => {
}); });
}; };
const choosePromoImage = () => {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
tempEditData.promoImage = res.tempFilePaths[0];
}
});
};
onMounted(() => { onMounted(() => {
const systemInfo = uni.getSystemInfoSync(); const systemInfo = uni.getSystemInfoSync();
if (systemInfo.statusBarHeight) { if (systemInfo.statusBarHeight) {
@ -822,6 +898,7 @@ const goBack = () => {
.img { .img {
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
border-radius: 50%;
} }
} }
@ -908,11 +985,18 @@ const goBack = () => {
.fliggy-card { .fliggy-card {
overflow: hidden; overflow: hidden;
position: relative;
.banner-img { .banner-img {
width: 100%; width: 100%;
} }
.guanggao-tag {
position: absolute;
top: 16rpx;
right: 16rpx;
}
.yaoyiyao-container { .yaoyiyao-container {
width: 100%; width: 100%;
display: flex; display: flex;

View File

Before

Width:  |  Height:  |  Size: 427 KiB

After

Width:  |  Height:  |  Size: 427 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB