<template><view class="pageContainer"><u-navbar :title="$t('支付费用')" :autoBack="true"  ></u-navbar><view class="flex flexColumn flexAiCenter mt20"><u-text color="#999999" :text="$t('需支付')" align="center"></u-text><view class="price">¥{{price}}</view></view><!-- <view class="cellsBox"><u-cell-group :border="false"><template v-for="item in rechargeTypes"><u-cell :title="item.name" :icon="item.ico" :label="item.info" :iconStyle="style.icon"></u-cell></template></u-cell-group></view> --><view class="detail flexColumn flexJcCenter"><view class="title">{{$t('请选择支付方式')}}</view><view class="flexColumn"><view class="type-row" v-for="(item,index) in rechargeTypes" :key="`type_${index}`" @click="select(item)":class="{'disabled': item.disabled}"><view class="type-row-name"><u-icon :name="item.ico" size="24"></u-icon><text>{{item.name}}</text><text class="info" v-if="item.info">({{item.info}})</text></view><view v-if="typeChosed == item.code"><u-icon name="/static/icon/selected.png" size="24"></u-icon></view></view></view><view class=""><u-button :text="$t('立即支付')" shape="circle" class="colorsButton" @click="startPayment"></u-button></view></view><lyy-pass-input ref="passInput" :title="$t('支付金额')" :money="parseInt(price)" @confirm="confirm" @close="close"></lyy-pass-input></view>
</template><script>export default {data() {return {rechargeTypes:[],orderNo:'',price:'',isApp: false,style:{icon:{width:"50rpx",height:"50rpx"}},typeChosed:'',paymentPassword:null,};},onLoad(option) {this.orderNo = option.no;this.price = option.price;// #ifdef APP-PLUSthis.isApp = true// #endifthis.getRechargeTypes()},methods:{// 确认支付confirm(e){this.$refs.passInput.close();this.paymentPassword = e.pass;this.startPayment();this.paymentPassword=null;},close(){this.paymentPassword=null;},select(item) {if (item.disabled) return false;this.typeChosed = item.code;},getRechargeTypes(){this.$axios.post(`/user/rechargeTypes`,{orderNo:this.orderNo,isApp: this.isApp}).then(res=>{this.rechargeTypes = res.data;})},startPayment() {if (!this.orderNo) {uni.$u.toast(this.$t('订单号为空'))return false;}if (!this.typeChosed) {uni.$u.toast(this.$t('请选择一个支付方式'))return false;}let obj = {type: this.typeChosed,orderNo: this.orderNo}if(this.typeChosed == "legal" ){if(!getApp().globalData.loginUserInfo.hasSetWithdrawalPassword){uni.$u.toast(this.$t('请先设置您的支付密码'));setTimeout(()=>{uni.navigateTo({url: '/pages/my/securityPassword?type=0'})},2000)return false;}if(!this.paymentPassword){this.$refs.passInput.open();return;}elseobj.payPassword = this.paymentPassword;}this.$axios.post(`/user/doPayment`, obj).then(res => {this.paymentPassword=null;if (res.data.type === 'balance') {uni.$u.toast(res.data.res)// this.$u.$parent.call(this).callAnimation(res.data.items);setTimeout(() => {// uni.$u.$parent.call(this).loadSeries();this.$utils.getUserInfo((res => {getApp().globalData.loginUserInfo = res;}))uni.redirectTo({url: '/pages/my/pictures',animationType:"slide-in-right",animationDuration: 200})}, 1e3)// this.close();}if (res.data.payUrl) {//#ifdef H5let platform = uni.getSystemInfoSync().platformif (platform == 'ios') {location.href = res.data.payUrl;} else {open(res.data.payUrl)}//#endif//#ifdef APP-PLUSplus.runtime.openURL(res.data.payUrl)// this.close();this.$utils.showConfirmEx(this.$t('请在打开的页面中支付'), this.$t('我已完成支付'), this.$t('取消支付'), (e) => {if (e) {// uni.switchTab({//     url: '/pages/my/my'// });this.$axios.post(`/user/rechargeStatus`, {order: this.orderNo}).then(res => {if (res.status == 1) {let items = res.items;console.log(item)}});}})//#endif}})}}}
</script><style lang="scss">.price {margin-top: 32rpx;font-size: 70rpx;font-weight: 600    ;}.detail {margin-top: 102rpx;min-width: 280px;background: #222;padding: 20px;border-radius: 30rpx;.title {padding: 20rpx 0;font-size: 18px;width: 100%;text-align: center;border-bottom: #36364c 1px solid;}.type-row {display: flex;justify-content: space-between;align-items: center;margin-top: 20px;font-size: 14px;&-name {display: flex;align-items: center;text {margin-left: 10rpx;}.info {color: #666;font-size: 12px;}}}.type-row.disabled {color: #666;text-decoration: line-through;}.colorsButton {margin-top: 20px;}}
</style>