wanma-benteng
/
new-mshop-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化：酒卡额度转赠页面样式优化、接收用户搜索优化

This commit is contained in:
wuhui_zzw 2024-01-19 10:55:41 +08:00
parent c80bcc0d09
commit 2ba942f6b0
2 changed files with 113 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages.json
View File

@ -567,7 +567,7 @@
{ {
"path": "online_payment/record/quota_transfer", "path": "online_payment/record/quota_transfer",
"style": { "style": {
"navigationBarTitleText": "酒卡转赠" "navigationBarTitleText": "酒卡额度转赠"
} }
}, },
{ {

145
pages/users/online_payment/record/quota_transfer.vue
View File

@ -3,32 +3,47 @@
<!--具体内容--> <!--具体内容-->
<view class='content-box'> <view class='content-box'>
<!-- 顶部内容 --> <!-- 顶部内容 -->
<view class="top"> <!--<view class="top">-->
<view class="left"> <!-- <view class="left">-->
<view class="name">接收用户：{{ (consume_info.nickname || consume_info.real_name || consume_info.uid) || '请选择接收用户' }}</view> <!-- <view class="name">接收用户：{{ (consume_info.nickname || consume_info.real_name || consume_info.uid) || '请选择接收用户' }}</view>-->
<view class="change-btn" @click="showConsumePopup" v-if="consume_search.default_consume_id <= 0"> <!-- <view class="change-btn" @click="showConsumePopup" v-if="consume_search.default_consume_id <= 0">-->
{{ consume_info.uid > 0 ? '切换' : '选择' }} <!-- {{ consume_info.uid > 0 ? '切换' : '选择' }}-->
</view> <!-- </view>-->
</view> <!-- </view>-->
</view> <!--</view>-->
<!-- 金额 --> <!-- 金额 -->
<view class="money"> <view class="money">
<view class="top-bg-line"></view> <view class="top-bg-line"></view>
<view class="money-box"> <view class="money-box">
<view class="title">转赠额度</view> <view class="receive-user padding15">
<view class="input-box"> <view class="name">接收用户</view>
<view class="unit">¥</view> <input class="user-search" v-model.number="consume_search.search_id_and_phone" type='text' placeholder="请输入手机号/UID" />
<input class="money-input" v-model.number="pay_info.transfer_num" type='number' step="0.01" placeholder="0.00" />
</view> </view>
<view class="info-box"> <view class="receive-user-info padding15" v-if="consume_info.uid > 0">
<view class="left">
<image class="left-image" :src="consume_info.avatar" />
</view>
<view class="right">
<view class="nickname">{{ consume_info.nickname || consume_info.real_name || consume_info.uid }}</view>
<view class="uid">UID：{{ consume_info.uid }}</view>
</view>
</view>
<view class="money-content padding15">
<view class="title">转赠额度</view>
<view class="input-box">
<view class="unit">¥</view>
<input class="money-input" v-model.number="pay_info.transfer_num" type='number' step="0.01" placeholder="0.00" />
</view>
</view>
<view class="info-box padding15">
<view class="info-title">剩余可用额度</view> <view class="info-title">剩余可用额度</view>
<view class="info-value">{{ pointUserInfo.available }}</view> <view class="info-value">{{ pointUserInfo.available }}</view>
</view> </view>
<view class="info-box"> <view class="info-box padding15">
<view class="info-title">实际到账数量</view> <view class="info-title">实际到账数量</view>
<view class="info-value">{{ pay_info.receipt_num }}</view> <view class="info-value">{{ pay_info.receipt_num }}</view>
</view> </view>
<view class="info-box" v-if="pay_info.service_charge > 0"> <view class="info-box padding15" v-if="pay_info.service_charge > 0">
<view class="info-title">手续费</view> <view class="info-title">手续费</view>
<view class="info-value">{{ pay_info.service_charge }}</view> <view class="info-value">{{ pay_info.service_charge }}</view>
</view> </view>
@ -48,7 +63,7 @@
<view class="search-btn" @click="getConsumeList">搜索</view> <view class="search-btn" @click="getConsumeList">搜索</view>
<view class="close-btn" @click="consumeClosePopup">取消</view> <view class="close-btn" @click="consumeClosePopup">取消</view>
</view> </view>
<view class="point-list"> <view class="point-list" v-if="Object.values(consume_list).length > 0">
<view class="point-box" v-for="(item,index) in consume_list" :key="index"> <view class="point-box" v-for="(item,index) in consume_list" :key="index">
<view class="left"> <view class="left">
<image class="image" :src="item.avatar || '/static/images/f.png'"></image> <image class="image" :src="item.avatar || '/static/images/f.png'"></image>
@ -60,6 +75,7 @@
<view class="selected-btn" @click="selectedConsume(item)">选中</view> <view class="selected-btn" @click="selectedConsume(item)">选中</view>
</view> </view>
</view> </view>
<emptyPage v-else title="暂无信息~"></emptyPage>
</view> </view>
</uni-popup> </uni-popup>
@ -91,6 +107,7 @@ export default {
consume_list: {}, consume_list: {},
consume_search: { consume_search: {
search_text: '', search_text: '',
search_id_and_phone: '',
default_consume_id: 0, default_consume_id: 0,
}, },
// 提交信息 // 提交信息
@ -137,6 +154,12 @@ export default {
this.pay_info.receipt_num = (Number(this.pay_info.transfer_num) - Number(this.pay_info.service_charge)).toFixed(2) this.pay_info.receipt_num = (Number(this.pay_info.transfer_num) - Number(this.pay_info.service_charge)).toFixed(2)
}, },
deep: false deep: false
},
'consume_search.search_id_and_phone':{
handler(val) {
this.getConsumeList();
},
deep: false
} }
}, },
methods: { methods: {
@ -156,7 +179,7 @@ export default {
let _this = this; let _this = this;
// 获取用户信息 // 获取用户信息
this.getUserInfo(); this.getUserInfo();
this.showConsumePopup(); // this.showConsumePopup();
}, },
// 获取用户持有信息 // 获取用户持有信息
getUserInfo(){ getUserInfo(){
@ -173,7 +196,7 @@ export default {
}, },
// 兑换用户选择 - 显示弹框 // 兑换用户选择 - 显示弹框
showConsumePopup(){ showConsumePopup(){
if(Object.keys(this.consume_list).length <= 0) this.getConsumeList(); // if(Object.keys(this.consume_list).length <= 0) this.getConsumeList();
// 不存在默认选中 显示弹框 // 不存在默认选中 显示弹框
this.$refs.selectedConsume.open('center'); this.$refs.selectedConsume.open('center');
}, },
@ -184,17 +207,17 @@ export default {
// 兑换用户选择 - 获取列表 // 兑换用户选择 - 获取列表
getConsumeList(){ getConsumeList(){
let _this = this; let _this = this;
if(_this.consume_search.search_id_and_phone.length <= 0){
// this.$util.Tips({
// title: '请输入搜索内容!'
// });
return false;
}
consumeList(this.consume_search) consumeList(this.consume_search)
.then(res => { .then(res => {
_this.consume_list = res.data || {}; _this.consume_list = res.data || {};
// 判断：是否只有一个替换点-是则选中 // 判断：是否只有一个替换点-是则选中
if(Object.values(_this.consume_list).length == 1){ _this.selectedConsume(_this.consume_list[0]);
_this.selectedConsume(_this.consume_list[0]);
}
// 判断：是否存在默认选中提货点
else if(_this.consume_search.default_consume_id > 0){
_this.selectedConsume(_this.consume_list[0]);
}
}) })
.catch(err => { .catch(err => {
this.$util.Tips({ this.$util.Tips({
@ -204,7 +227,7 @@ export default {
}, },
// 兑换用户选择 - 选中 // 兑换用户选择 - 选中
selectedConsume(item){ selectedConsume(item){
this.consume_info = item; this.consume_info = item || {};
this.consumeClosePopup(); this.consumeClosePopup();
}, },
// 确认付款 // 确认付款
@ -270,6 +293,9 @@ export default {
height: 30rpx; height: 30rpx;
background: #1777ff; background: #1777ff;
} }
.padding15{
padding: 15rpx 0;
}
// 顶部内容 // 顶部内容
.top{ .top{
width: 100%; width: 100%;
@ -347,10 +373,58 @@ export default {
border-radius: 15rpx; border-radius: 15rpx;
padding: 20rpx; padding: 20rpx;
box-shadow: 0px 3px 5px 0px #ececec; box-shadow: 0px 3px 5px 0px #ececec;
.receive-user{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.name{
width: 150rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
font-weight: bold;
}
.user-search{
width: calc(100% - 140rpx) !important;
height: 60rpx;
line-height: 60rpx;
}
}
.receive-user-info{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.left{
width: 100rpx;
text-align: left;
.left-image{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
}
.right{
width: calc(100% - 100rpx);
.nickname{
width: 100%;
font-size: 30rpx;
font-weight: bold;
}
.uid{
width: 100%;
}
}
}
.title{ .title{
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
font-size: 26rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
} }
.input-box{ .input-box{
@ -462,8 +536,8 @@ export default {
border-radius: 15rpx; border-radius: 15rpx;
font-size: 30rpx; font-size: 30rpx;
text-align: center; text-align: center;
height: 70rpx; height: 80rpx;
line-height: 70rpx; line-height: 80rpx;
position: absolute; position: absolute;
left: 20rpx; left: 20rpx;
bottom: 150rpx; bottom: 150rpx;
@ -481,9 +555,10 @@ export default {
border-radius: 20rpx; border-radius: 20rpx;
.search-content{ .search-content{
--search-height-: 70rpx;
width: 100%; width: 100%;
height: 60rpx; height: var(--search-height-);
line-height: 60rpx; line-height: var(--search-height-);
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -491,10 +566,12 @@ export default {
justify-content: flex-start; justify-content: flex-start;
.money-input{ .money-input{
width: calc(100% - (100rpx * 2)) !important; width: calc(100% - (100rpx * 2)) !important;
height: 60rpx; height: var(--search-height-);
line-height: 60rpx; line-height: var(--search-height-);
} }
.search-btn{ .search-btn{
height: var(--search-height-);
line-height: var(--search-height-);
width: 100rpx; width: 100rpx;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
@ -502,6 +579,8 @@ export default {
color: #fff; color: #fff;
} }
.close-btn{ .close-btn{
height: var(--search-height-);
line-height: var(--search-height-);
width: 100rpx; width: 100rpx;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;