初始化代码
This commit is contained in:
313
uniapp/uni-app/mine/pages/balance/list.vue
Normal file
313
uniapp/uni-app/mine/pages/balance/list.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<view class="mine-balance-list">
|
||||
<view class="count-info flex-center flex-column c-base" :style="{background:primaryColor}">
|
||||
<view class="f-caption">当前余额(元)</view>
|
||||
<view class="price mt-sm">{{userInfo.balance}}</view>
|
||||
</view>
|
||||
<view class="flex-center fill-base mg-big pd-lg box-shadow radius-24" v-for="(item,index) in list.data"
|
||||
:key="index">
|
||||
<view class="flex-1 mr-lg">
|
||||
<view class="flex-y-baseline f-caption c-warning text-bold">
|
||||
¥<view class="f-sm-title">{{item.price}}</view>
|
||||
</view>
|
||||
<view class="f-caption c-desc mt-sm">{{item.title}}</view>
|
||||
<view class="f-caption mt-sm" :style="{color:primaryColor}" v-if="item.member_level*1>0">
|
||||
{{item.member_title}}
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="toChangeItem('chooseInd',index)" class="stored-btn flex-center f-caption c-base radius-4"
|
||||
:style="{background:primaryColor}">立即充值
|
||||
</view>
|
||||
</view>
|
||||
<view class="fill-base mg-big pd-lg box-shadow radius-24">
|
||||
<view class="input-item flex-between radius-16">
|
||||
<input v-model="price" v-on:input="checkInput($event,'price')" type="digit"
|
||||
class="flex-1 mr-lg pt-md pb-md pl-lg f-paragraph c-title" placeholder="请输入充值金额，无赠送"
|
||||
placeholder-class="f-paragraph c-caption" />
|
||||
<view @tap.stop="toChangeItem('chooseInd','price')" class="stored-btn flex-center f-caption c-base"
|
||||
:style="{background:primaryColor}">立即充值
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fill-base mg-big pd-lg box-shadow radius-24">
|
||||
<view class="flex-y-center mb-lg">
|
||||
<view class="common-line" :style="{background:primaryColor}"></view>
|
||||
<view class="f-title c-title text-bold">充值说明</view>
|
||||
</view>
|
||||
<view class="f-desc c-caption" v-html="text"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
<uni-popup ref="choose_item" type="bottom" :custom="true">
|
||||
<view @touchmove.stop.prevent class="popup-choose-item fill-base pt-lg pb-lg radius-top-34">
|
||||
<view @tap.stop="$refs.choose_item.close()" class="flex-between pl-lg pr-lg pb-lg" style="width: 100%;">
|
||||
<view class="flex-center f-title c-title text-bold">选择支付方式</view>
|
||||
<i class="iconfont icon-add-circle rotate-45" :style="{color:subColor}"></i>
|
||||
</view>
|
||||
|
||||
<view @tap.stop="toChangeItem('payInd',index)" class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg"
|
||||
:class="[{'b-1px-t':index>0}]" v-for="(item,index) in payList" :key="index">
|
||||
<view class="pay-item flex-y-center"><i class="iconfont mr-md" :class="[item.icon]"
|
||||
:style="{color:item.id==1?primaryColor:'#01AAF2'}"></i>
|
||||
<view class="flex-y-baseline">{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<i class="pay-icon iconfont c-caption"
|
||||
:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
|
||||
:style="{color:payInd==index?primaryColor:''}"></i>
|
||||
</view>
|
||||
<view class="space-lg"></view>
|
||||
<view @tap="toPay" class="pay-btn flex-center f-title c-base radius" :style="{background:primaryColor}">
|
||||
立即支付</view>
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 1微信支付；2余额支付；3支付宝支付
|
||||
payList: [{
|
||||
id: 1,
|
||||
title: '微信支付',
|
||||
icon: 'icon-wechat-pay'
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
, {
|
||||
id: 3,
|
||||
title: '支付宝支付',
|
||||
icon: 'icon-alipay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #endif
|
||||
],
|
||||
payInd: 0,
|
||||
chooseInd: 0,
|
||||
param: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
text: `
|
||||
<p>1、充值的本金和赠送金额均不可提现、转移、转赠</p>
|
||||
<p>2、使用范围：本平台所有项目或者商品皆可购买</p>`,
|
||||
price: ''
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
async onLoad() {
|
||||
this.$util.showLoading()
|
||||
await this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
this.$util.back()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo']),
|
||||
async initIndex() {
|
||||
await this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
} = this
|
||||
let newList = await this.$api.mine.cardList(param);
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
checkInput(e, key) {
|
||||
let val = this.$util.formatMoney(e.detail.value)
|
||||
this.$nextTick(() => {
|
||||
this[key] = val
|
||||
})
|
||||
},
|
||||
toChangeItem(key, val) {
|
||||
this[key] = val
|
||||
if (key === 'payInd') return
|
||||
this.$refs.choose_item.open()
|
||||
this.lockTap = false
|
||||
},
|
||||
//表单验证
|
||||
validate(param) {
|
||||
let validate = new this.$util.Validate();
|
||||
validate.add(param.price, {
|
||||
name: "price",
|
||||
checkType: "isMoney",
|
||||
errorMsg: "请输入充值金额"
|
||||
});
|
||||
let message = validate.start();
|
||||
return message;
|
||||
},
|
||||
// 去支付
|
||||
async toPay() {
|
||||
let {
|
||||
chooseInd,
|
||||
price
|
||||
} = this
|
||||
let param = {}
|
||||
if (chooseInd == 'price') {
|
||||
param = {
|
||||
price
|
||||
}
|
||||
let msg = this.validate(param);
|
||||
if (msg) {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
});
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
let {
|
||||
id: card_id,
|
||||
} = this.list.data[chooseInd]
|
||||
param = {
|
||||
card_id
|
||||
}
|
||||
}
|
||||
let {
|
||||
id: pay_model
|
||||
} = this.payList[this.payInd]
|
||||
param.pay_model = pay_model
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.mine.payBalanceOrder(param)
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (param.pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
console.log(pay_list, "========pay_listpay_listpay_listpay_list")
|
||||
await this.$util.pay(pay_list)
|
||||
this.lockTap = false;
|
||||
this.price = ''
|
||||
this.$refs.choose_item.close()
|
||||
this.getUserInfo()
|
||||
this.$util.back()
|
||||
let url = `/mine/pages/stored/record`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
} catch (e) {
|
||||
this.lockTap = false;
|
||||
this.price = ''
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.price = ''
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.mine-balance-list {
|
||||
.count-info {
|
||||
height: 338rpx;
|
||||
|
||||
.price {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-item {
|
||||
overflow: hidden;
|
||||
background: #F9F9F9;
|
||||
|
||||
.stored-btn {
|
||||
width: 134rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.stored-btn {
|
||||
width: 132rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.popup-choose-item {
|
||||
.icon-add-circle {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 500rpx;
|
||||
height: 88rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user