341 lines
7.6 KiB
Vue
341 lines
7.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="towcontentitem">
|
||
<view class="towcontentitemone flex-start">
|
||
<image class="towcontentitemoneimage" :src="userInfo.logo" mode="aspectFill"></image>
|
||
<view class="towcontentitemonetext flex-colum-start">
|
||
<text class="towcontentitemonetextone">{{userInfo.chainName || '暂无昵称'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="towcontentitemthere flex-start">
|
||
余额：<text class="towcontentitemtheretext">{{userInfo.amount || '0.00'}}</text>
|
||
|
||
</view>
|
||
<view class="towcontentitemtow flex-between">
|
||
<text class="towcontentitemtowetext">vip{{userInfo.code || '无'}}</text>
|
||
</view>
|
||
<view class="towcontentitevip">
|
||
vip{{userInfo.is_vip}}
|
||
</view>
|
||
</view>
|
||
<view class="therecontent">
|
||
<input type="number" v-model="amount" placeholder="自定义金额">
|
||
</view>
|
||
<view class="fourcontent flex-start">
|
||
<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
|
||
<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
|
||
@click="clickinput(item,index)">
|
||
<text>{{item.minNum}}元</text>
|
||
<text style="margin-top: 10rpx;">充{{item.minNum}}送{{item.handselNum}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fivecontent" @tap="$u.debounce(userbalancerechangesub, 500)">
|
||
立即充值
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
inputshow: 0,
|
||
memberlist: {},
|
||
listdata: [],
|
||
amount: '',
|
||
shopUser: {},
|
||
userInfo: {}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
console.log(e,'调试2')
|
||
if (e.type == 'list') {//从列表进来的
|
||
this.paygetShopByMember(e.shopId_id)
|
||
}else{
|
||
this.paygetShopByMember(e.shopId_id)
|
||
}
|
||
this.paygetActive(e.shopId_id) //列表
|
||
},
|
||
methods: {
|
||
async paygetShopByMember(w) {
|
||
let res = await this.api.paygetShopByMember({
|
||
page: 1,
|
||
pageSize: 10,
|
||
userId: uni.cache.get('userInfo').id,
|
||
shopId: w
|
||
})
|
||
this.userInfo = res.data.list[0]
|
||
},
|
||
async paygetActive(shopid) {
|
||
let res = await this.api.paygetActive({
|
||
shopId:shopid,
|
||
page: 1,
|
||
pageSize: 10
|
||
})
|
||
try {
|
||
this.listdata = res.data.list
|
||
this.amount = res.data.list[0].minNum
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
async userbalancerechangesub() {
|
||
if (this.amount == null || this.amount == '') {
|
||
uni.showToast({
|
||
title: '金额不能为空',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
let res = await this.api.paymemeberIn({
|
||
shopId: uni.cache.get('shopUser'), // 判断显示哪家的作品,
|
||
amount: this.amount // 判断显示哪家的作品,
|
||
})
|
||
if (res) {
|
||
// #ifdef MP-WEIXIN
|
||
uni.requestPayment({
|
||
provider: 'wxpay', //支付类型-固定值
|
||
partnerid: res.data.appId, // 微信支付商户号
|
||
timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
|
||
nonceStr: res.data.nonceStr, // 随机字符串
|
||
package: res.data.package, // 固定值
|
||
signType: res.data.signType, //固定值
|
||
paySign: res.data.paySign, //签名
|
||
success: (res) => {
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
})
|
||
setTimeout(res => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '支付失败'
|
||
})
|
||
setTimeout(res => {
|
||
uni.hideLoading()
|
||
}, 1000)
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
},
|
||
clickinput(a, b) {
|
||
console.log(a, b)
|
||
this.inputshow = b
|
||
this.amount = a.minNum
|
||
},
|
||
eeInfo(e) {
|
||
uni.pro.navigateTo('my/member/memberinfo', {
|
||
id: e,
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 28rpx;
|
||
|
||
.towcontentitem {
|
||
width: 100%;
|
||
position: relative;
|
||
padding: 32rpx;
|
||
border-radius: 12rpx;
|
||
background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 68rpx;
|
||
content: '';
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
height: 232rpx;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.towcontentitemimage {
|
||
top: 0;
|
||
left: 0;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
z-index: 5;
|
||
}
|
||
|
||
.towcontentitemone {
|
||
width: 100%;
|
||
position: relative;
|
||
z-index: 9;
|
||
|
||
.towcontentitemoneimage {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
|
||
|
||
.towcontentitemonetext {
|
||
height: 76rpx;
|
||
margin-left: 16rpx;
|
||
|
||
.towcontentitemonetextone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontentitemonetexttow {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #422A07;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.towcontentitemprogressa {
|
||
padding: 8rpx 44rpx;
|
||
z-index: 10;
|
||
position: relative;
|
||
margin-top: 54rpx;
|
||
}
|
||
|
||
.towcontentitemtow {
|
||
margin-top: 84rpx;
|
||
z-index: 10;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #422A07;
|
||
}
|
||
.towcontentitevip{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 92rpx;
|
||
height: 40rpx;
|
||
font-size: 20rpx;
|
||
background: #F4C380;
|
||
border-radius: 0rpx 12rpx 0rpx 12rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
color: #fff;
|
||
font-family:Source Han Sans CN-Medium;
|
||
font-weight: Medium;
|
||
|
||
}
|
||
.towcontentitemthere {
|
||
margin-left: 92rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: Medium;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
|
||
.towcontentitemtheretext {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.therecontent {
|
||
margin-top: 32rpx;
|
||
position: relative;
|
||
padding: 22rpx 32rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
|
||
input {
|
||
padding-left: 30rpx;
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.therecontent::after {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 32rpx;
|
||
transform: translateY(-50%);
|
||
content: '￥';
|
||
display: inline-block;
|
||
width: 28rpx;
|
||
height: 40rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.fourcontent {
|
||
.fourcontentlnage {
|
||
width: 33.33%;
|
||
|
||
.fourcontentitem {
|
||
margin: 24rpx 10rpx;
|
||
padding: 16rpx 0;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #333333;
|
||
font-size: 28rpx;
|
||
font-family: Roboto-Medium, Roboto;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.fourcontentitems {
|
||
margin: 24rpx 10rpx;
|
||
padding: 16rpx 0;
|
||
text-align: center;
|
||
border-radius: 8rpx;
|
||
background: #F1CB66;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #F1CB66;
|
||
font-size: 28rpx;
|
||
font-family: Roboto-Medium, Roboto;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.fivecontent {
|
||
position: relative;
|
||
bottom: 44rpx;
|
||
margin-top: 62rpx;
|
||
padding: 20rpx 0;
|
||
text-align: center;
|
||
width: 100%;
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
background: #F1CB66;
|
||
}
|
||
}
|
||
</style> |