<template>
|
<view class="content">
|
<image class="image-top" mode="aspectFill" lazy-load src="../../static/image/recharge.jpg"></image>
|
<view class="balance">
|
<view><text style="font-weight: 550;">余额：</text><text style="color:#3c9cff ;">￥{{ balance }}</text></view>
|
</view>
|
<view class="recharge">
|
<view class="option" v-for="(item, index) in package" :key="index" @click="sel(item, index)">
|
<text class="info-left" :style="selIndex == index ? 'color:#3c9cff' : ''">￥{{ item.amount }}
|
<text class="info-right" v-if="item.description">
|
( <text>{{ item.description }}</text> )
|
</text>
|
</text>
|
<u-icon v-if="selIndex == index" name="checkbox-mark" color="#3c9cff"></u-icon>
|
</view>
|
</view>
|
<view class="submit">
|
<u-button size="large" type="primary" @click="submit">立即支付</u-button>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import { ref, reactive, toRefs, onMounted } from "vue";
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
import { useBasicInfoStore } from "../../store/basicInfo"
|
import { CreateActiveOrder, getWalletDetail, depositActivityList } from "../../apis/api"
|
export default {
|
setup() {
|
const userStore = useBasicInfoStore()
|
const state = reactive({
|
package: [],
|
selIndex: 0,
|
depositSel: null,
|
balance: 0,
|
})
|
|
onMounted(() => {
|
Init();
|
});
|
|
onShow(() => {
|
getWalletDetailInfo()
|
})
|
|
const Init = () => {
|
}
|
|
const getWalletDetailInfo = () => {
|
|
getWalletDetail(userStore.userinfo.id).then((res) => {
|
if (res) {
|
state.balance = res.balance
|
}
|
})
|
let obj = {
|
pageIndex: 1,
|
pageSize: 100
|
}
|
depositActivityList(obj).then((res) => {
|
if (res) {
|
state.package = res.data
|
} else {
|
uni.$u.toast('暂无充值选项');
|
}
|
})
|
}
|
|
const sel = (item, index) => {
|
state.depositSel = item
|
state.selIndex = index
|
}
|
|
const submit = () => {
|
let products = []
|
products.push({
|
productid: state.depositSel.id,
|
price: state.depositSel.amount * state.depositSel.discountrate,
|
productname: state.depositSel.name,
|
})
|
|
let condition = {
|
no: 1,
|
vipuserid: userStore.userinfo.id,
|
vipname: userStore.userinfo.nickname,
|
vipphone: userStore.userinfo.cellphone,
|
totalmoney: state.depositSel.amount * state.depositSel.discountrate,
|
paymoney: state.depositSel.amount * state.depositSel.discountrate,
|
products: products,
|
type: 0
|
}
|
userStore.payInfo = condition
|
|
CreateActiveOrder(condition).then(resp => {
|
if (resp.code == 200) {
|
userStore.payInfo.id = resp.data.id
|
userStore.payInfo.payedmoney = resp.data.totalmoney
|
userStore.payInfo.paymentmethod = 2
|
userStore.payInfo.payPrice = state.depositSel.amount * state.depositSel.discountrate
|
userStore.routePage = 'recharge'
|
uni.navigateTo({
|
url: '/pages/pay/pay'
|
})
|
}
|
else {
|
state.vipShow = false
|
uni.$u.toast('订单创建失败！');
|
}
|
|
}).catch(err => {
|
console.error(err);
|
});
|
|
|
|
// userStore.testTitle = item.title
|
// if (item.type == 2) {
|
// //state.discountPrice = item.price * userStore.vipDiscount / 10
|
// state.vipShow = true
|
|
|
// } else {
|
// uni.navigateTo({
|
// url: '/pages/question/type'
|
// });
|
// }
|
}
|
|
|
|
|
return { ...toRefs(state), userStore, sel, submit }
|
}
|
}
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
}
|
|
.content {
|
@extend .center;
|
height: 100vh;
|
width: 100%;
|
background-color: #f5f5f5;
|
}
|
|
.image-top {
|
width: 100%;
|
height: 18vh;
|
}
|
|
.balance {
|
@extend .center;
|
width: calc(95% - 40rpx);
|
//height: 15vh;
|
overflow: auto;
|
padding: 40rpx 20rpx;
|
border-radius: 10px;
|
background-color: #fff;
|
margin-top: 20rpx;
|
}
|
|
.recharge {
|
@extend .center;
|
width: calc(95% - 40rpx);
|
//height: 15vh;
|
overflow: auto;
|
padding: 20rpx;
|
border-radius: 10px;
|
background-color: #fff;
|
margin-top: 20rpx;
|
|
|
.option {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
border-bottom: 1rpx solid #f5f5f5;
|
display: flex;
|
justify-content: space-between;
|
|
.info-left {}
|
|
.info-right {
|
font-size: 20rpx;
|
color: gray !important;
|
margin-left: 5px;
|
}
|
}
|
|
}
|
|
.submit {
|
width: 95%;
|
overflow: auto;
|
margin-top: 40rpx;
|
}
|
</style>
|
