修改转账页面,可切换图片区域样式,编辑优惠券内容
This commit is contained in:
parent
b1f41cfcbb
commit
d54877fb85
|
|
@ -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;
|
||||||
|
|
|
||||||
|
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 |
Loading…
Reference in New Issue