初始化代码
This commit is contained in:
297
uniapp/uni-app/mine/pages/pay.vue
Normal file
297
uniapp/uni-app/mine/pages/pay.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="mine-pay" v-if="isLoad">
|
||||
<view
|
||||
class="flex-center flex-column fill-base mt-md ml-md mr-md pd-lg f-paragraph c-title box-shadow radius-24">
|
||||
<view class="flex-y-baseline f-sm-title">¥<view style="font-size: 60rpx;">{{orderInfo.pay_price}}</view>
|
||||
</view>
|
||||
<view>实付金额</view>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24"
|
||||
v-if="orderInfo.page_type == 'breed'">
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg">
|
||||
<view class="item-text">订单备注</view>
|
||||
<input v-model="text" type="text" class="flex-1 f-paragraph" maxlength="100"
|
||||
placeholder-class="c-placeholder" placeholder="请输入订单备注" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-sm-title box-shadow radius-24">
|
||||
<view @tap.stop="toChangeItem(index)" class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg b-1px-b"
|
||||
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:item.id==2?subColor:'#01AAF2'}"></i>
|
||||
<view class="flex-y-baseline">{{item.title}}
|
||||
<view class="f-paragraph c-caption ml-sm" v-if="item.id==2">余额{{userInfo.balance || 0}}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<i class="pay-icon iconfont c-caption"
|
||||
:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':item.is_disabled || payInd == index}]"
|
||||
:style="{color:payInd==index?primaryColor:''}"></i>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-lg"></view>
|
||||
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toPay">
|
||||
<view class="pay-btn flex-center f-title c-base radius" :style="{background:primaryColor}">立即支付</view>
|
||||
</auth>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
import parser from "@/components/jyf-Parser/index"
|
||||
export default {
|
||||
components: {
|
||||
parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
// 1微信支付；2余额支付；3支付宝支付
|
||||
payList: [{
|
||||
id: 1,
|
||||
title: '微信支付',
|
||||
icon: 'icon-wechat-pay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
, {
|
||||
id: 3,
|
||||
title: '支付宝支付',
|
||||
icon: 'icon-alipay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #endif
|
||||
, {
|
||||
id: 2,
|
||||
title: '余额支付',
|
||||
icon: 'icon-qianbao',
|
||||
is_disabled: false
|
||||
}
|
||||
],
|
||||
payInd: 0,
|
||||
// #ifdef APP-PLUS
|
||||
balanceInd: 2,
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
balanceInd: 1,
|
||||
// #endif
|
||||
text: '',
|
||||
tmplIds: [],
|
||||
lockTap: false,
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
orderInfo: state => state.order.orderInfo,
|
||||
}),
|
||||
async onLoad() {
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo']),
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex(flag = false) {
|
||||
await this.getUserInfo()
|
||||
let {
|
||||
balance
|
||||
} = this.userInfo
|
||||
let {
|
||||
pay_price,
|
||||
page_type,
|
||||
send_type = 0
|
||||
} = this.orderInfo
|
||||
|
||||
let is_disabled = balance * 1 < pay_price * 1
|
||||
let {
|
||||
balanceInd
|
||||
} = this
|
||||
this.payList[balanceInd].is_disabled = is_disabled
|
||||
if (pay_price * 1 == 0) {
|
||||
this.payList[0].is_disabled = true
|
||||
// #ifdef APP-PLUS
|
||||
this.payList[1].is_disabled = true
|
||||
// #endif
|
||||
this.payInd = balanceInd
|
||||
}
|
||||
|
||||
let tmplIds = []
|
||||
this.tmplIds = tmplIds
|
||||
this.isLoad = true
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex(true)
|
||||
},
|
||||
toChangeItem(index) {
|
||||
if (index === 2 && this.payList[index].is_disabled) return
|
||||
this.payInd = index
|
||||
},
|
||||
async toPay() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let that = this;
|
||||
let {
|
||||
tmplIds
|
||||
} = that
|
||||
if (tmplIds && tmplIds.length > 0) {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
complete(res) {
|
||||
that.toConfirmPay()
|
||||
console.log(res, "complete requestSubscribeMessage");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.toConfirmPay()
|
||||
}
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.toConfirmPay()
|
||||
// #endif
|
||||
},
|
||||
async toConfirmPay() {
|
||||
let {
|
||||
payList,
|
||||
payInd,
|
||||
text = ''
|
||||
} = this
|
||||
let orderInfo = this.$util.deepCopy(this.orderInfo)
|
||||
let {
|
||||
page_type,
|
||||
} = orderInfo
|
||||
let {
|
||||
id: pay_model
|
||||
} = payList[payInd]
|
||||
let add_params = page_type == 'breed' ? {
|
||||
pay_model,
|
||||
text
|
||||
} : {
|
||||
pay_model
|
||||
}
|
||||
let param = Object.assign({}, orderInfo, add_params);
|
||||
delete param.pay_price
|
||||
delete param.page_type
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
let url = ['breed', 'claim_send', 'land_send'].includes(page_type) ? 1 : ''
|
||||
let openType = ['breed', 'claim_send', 'land_send'].includes(page_type) ? 'navigateBack' : ''
|
||||
let method_key = ['breed', 'claim_send'].includes(page_type) ? 'claim' : 'land'
|
||||
let method = {
|
||||
breed: 'breedOrder',
|
||||
claim_send: 'sendOrderApply',
|
||||
land_send: 'sendOrderApply',
|
||||
}
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api[method_key][method[page_type]](param)
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
try {
|
||||
if (param.pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
await this.$util.pay(pay_list)
|
||||
this.$util.showToast({
|
||||
title: `支付成功`
|
||||
})
|
||||
if (page_type == 'breed') {
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
console.log(url, openType, "===========")
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType
|
||||
})
|
||||
}, 1000)
|
||||
this.lockTap = false
|
||||
return
|
||||
} catch (e) {
|
||||
this.$util.showToast({
|
||||
title: `支付失败`
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType
|
||||
})
|
||||
}, 1000)
|
||||
this.lockTap = false
|
||||
return
|
||||
}
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: `支付成功`
|
||||
})
|
||||
if (page_type == 'breed') {
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: true
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
console.log(url, openType, "=========333==")
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType
|
||||
})
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.mine-pay {
|
||||
.item-text {
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 622rpx;
|
||||
height: 94rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user