You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
365 lines
7.8 KiB
365 lines
7.8 KiB
<!-- 充值界面 -->
|
|
<template>
|
|
<view class="purse bx">
|
|
<navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar>
|
|
|
|
<!-- 用户余额信息 -->
|
|
<view class="user-money content">
|
|
<view class="title">{{ $t('page.purse.account') }}</view>
|
|
<view class="money">
|
|
<view class="money-unit">{{ $t('page.purse.unit') }}</view>
|
|
<view class="money-detail">{{ money }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 充值方案列表 -->
|
|
<view class="recharge-list content">
|
|
<view @click="selectRecharge(index)" v-for="(item,index) in rechargeList" :key="item.id" class="recharge-item" :class="{ selectRecharge : index === active}">
|
|
<view class="money">{{ item.price }}</view>
|
|
<view class="unit">{{ $t('page.purse.unit') }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 输入框 -->
|
|
<view class="input content">
|
|
<input v-model="form.no" class="input content" type="text" disabled :placeholder="$t('page.purse.orderId')" />
|
|
</view>
|
|
<view class="input content">
|
|
<input @input="moneyChange" v-model="form.money" class="input content" type="number" :placeholder="$t('page.purse.deposit-now')" />
|
|
</view>
|
|
<view class="input content">
|
|
<view class="address-info" style="margin-top: 20rpx;">
|
|
{{ userInfo.moneyAddress }}
|
|
</view>
|
|
<view @click="copy(userInfo.moneyAddress)" class="btn content">{{ $t('page.purse.copyAddress') }}</view>
|
|
</view>
|
|
|
|
<view class="input content" style="display: flex;">
|
|
|
|
<image :src="form.image"
|
|
v-if="form.image" mode=""
|
|
@click="uploadImage"></image>
|
|
|
|
<view class="image" v-else
|
|
@click="uploadImage">
|
|
<u-icon name="plus"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 按钮 -->
|
|
<view @click="recharge" class="btn content">{{ $t('page.purse.deposit-now') }}</view>
|
|
|
|
<!-- 客服列表 -->
|
|
<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/m-navbar.vue'
|
|
import serviceList from '@/components/serviceList/serviceList.vue';
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
serviceList
|
|
},
|
|
data() {
|
|
return {
|
|
rechargeList : [],
|
|
active : 0,
|
|
money : '',
|
|
form : {
|
|
money : '',
|
|
id : '',
|
|
no : Date.now(),
|
|
image : '',
|
|
address : ''
|
|
},
|
|
serverList : [],
|
|
showService : false,
|
|
userInfo: {}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo()
|
|
this.getTopUpScheme()
|
|
this.forgetPass()
|
|
},
|
|
methods: {
|
|
leftClick() {
|
|
if(this.$route.query.type){
|
|
return uni.navigateTo({
|
|
url: '/pages/home/home'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url: '/pages/center/center'
|
|
})
|
|
}
|
|
},
|
|
|
|
uploadImage(){
|
|
let self = this
|
|
uni.chooseImage({
|
|
success(res) {
|
|
self.form.image = res.tempFilePaths[0]
|
|
}
|
|
})
|
|
},
|
|
|
|
//选择充值方案
|
|
selectRecharge(index){
|
|
this.$play()
|
|
this.active = index
|
|
this.form.money = this.rechargeList[index].price
|
|
this.form.id = this.rechargeList[index].id
|
|
},
|
|
|
|
//获取用户信息
|
|
getUserInfo(){
|
|
this.request('userInfo').then(res => {
|
|
if(res.code == 200){
|
|
this.userInfo = res.result.userInfo
|
|
this.money = res.result.userInfo.money
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取充值方案
|
|
getTopUpScheme(){
|
|
this.request('shopNo').then(res => {
|
|
if(res.code == 200){
|
|
this.rechargeList = res.result
|
|
this.form.money = res.result[0].price; //默认选中第一个
|
|
}
|
|
})
|
|
},
|
|
|
|
//充值
|
|
recharge(){
|
|
this.$play()
|
|
this.form.address = this.userInfo.moneyAddress
|
|
let { money , no , address , image } = this.form
|
|
if(!no){
|
|
return uni.$u.toast(this.$t('page.purse.orderNumberEmpty'))
|
|
}
|
|
if(!money){
|
|
return uni.$u.toast(this.$t('page.purse.moneyEmpty'))
|
|
}
|
|
if(money <= 0){
|
|
return uni.$u.toast(this.$t('page.purse.AmountThan0'))
|
|
}
|
|
if(address.trim() == ''){
|
|
return uni.$u.toast(this.$t('page.purse.addressEmpty'))
|
|
}
|
|
if(image.trim() == ''){
|
|
return uni.$u.toast(this.$t('page.purse.imgEmpty'))
|
|
}
|
|
this.request('recharge2',{},this.form).then(res => {
|
|
if(res.code == 200){
|
|
uni.$u.toast(this.$t('page.purse.success'))
|
|
this.cleanForm()
|
|
this.revealServiceList()
|
|
this.getUserInfo() //刷新用户信息(更新用户余额)
|
|
}
|
|
})
|
|
},
|
|
|
|
//用户手动填写充值金额
|
|
moneyChange(e){
|
|
this.active = ''
|
|
let inputValue= e.detail.value;
|
|
this.rechargeList.forEach((recharge,index) => {
|
|
if(parseInt(recharge.price) == inputValue){
|
|
this.active = index
|
|
}
|
|
})
|
|
},
|
|
|
|
//显示客服列表
|
|
revealServiceList(){
|
|
this.$play()
|
|
this.showService = true;
|
|
},
|
|
|
|
//关闭客服列表
|
|
closeServiceList(){
|
|
this.showService = false;
|
|
},
|
|
|
|
//忘记密码(获取客服列表)
|
|
forgetPass(){
|
|
this.request('forgetPass').then(res => {
|
|
if(res.code == 200){
|
|
this.serverList = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
//清空表单数据
|
|
cleanForm(){
|
|
this.form = {
|
|
money : '100',
|
|
id : '',
|
|
no : Date.now(),
|
|
image : '',
|
|
address : ''
|
|
}
|
|
},
|
|
|
|
//复制内容
|
|
copy(content) {
|
|
if(!content){
|
|
return uni.$u.toast(this.$t('page.purse.addressEmpty'))
|
|
}
|
|
uni.setClipboardData({
|
|
data: content,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$t('page.purse.copySuccess'),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.purse {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
// background-color: black;
|
|
margin: 0 auto;
|
|
// background-image: url('@/static/pruse/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.content {
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.user-money {
|
|
background: $uni-bg-color-app;
|
|
// background: rgba(176, 199, 59, .8);
|
|
margin: 20rpx auto 30rpx auto;
|
|
border: 4rpx solid #D3EA5E;
|
|
border: 4rpx solid $uni-bg-color-app;
|
|
padding: 60rpx 0rpx;
|
|
font-size: 36rpx;
|
|
color: $uni-bg-color;
|
|
.title,
|
|
.money {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
|
|
.money-unit {
|
|
margin-right: 15rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.money-detail{
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
color: $uni-bg-color-app;
|
|
|
|
.recharge-item {
|
|
box-sizing: border-box;
|
|
width: calc(50% - 7rpx);
|
|
border: 1px solid #636363;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.money , .unit{
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.money{
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.unit{
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.selectRecharge{
|
|
color: white;
|
|
// border: 1px solid #D3EA5E;
|
|
background: $uni-bg-color-app;
|
|
// background: rgba(176, 199, 59, .8);
|
|
}
|
|
}
|
|
|
|
.input{
|
|
margin: 30rpx auto;
|
|
input{
|
|
border: 1px solid $uni-bg-color-app;
|
|
height: 80rpx;
|
|
font-size: 34rpx;
|
|
color: $uni-bg-color-app;
|
|
text-indent: 15rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
margin-left: 10rpx;
|
|
border: 1px solid #333;
|
|
}
|
|
.image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border: 1px solid #333;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.address-info{
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding-left: 20rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
background: #e9ecef;
|
|
font-size: 34rpx;
|
|
width: 96%;
|
|
margin: 0rpx auto 20rpx auto;
|
|
}
|
|
}
|
|
|
|
.btn{
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: $uni-bg-color-app;
|
|
border-radius: 10rpx;
|
|
color: $uni-bg-color;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|