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",
"style": {
"navigationBarTitleText": "酒卡转赠"
"navigationBarTitleText": "酒卡额度转赠"
}
},
{

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

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