<template>
|
|
<view class="payOrder">
|
|
<u-navbar :title="$t('page.productDetail.payOrder.select-pay-method')" :safeAreaInsetTop="false" placeholder
|
|
@leftClick="leftClick">
|
|
</u-navbar>
|
|
<view class="img">
|
|
<img src="/static/payOrder/46660.png" alt="" />
|
|
<view class="text"></view>
|
|
</view>
|
|
<view class="line">
|
|
<u-cell class="celi" :title="$t('page.productDetail.payOrder.order-number')" :value="orderInfo.id"></u-cell>
|
|
<u-cell class="celi" :title="$t('page.productDetail.payOrder.price')" :value="orderInfo.sumPrice"></u-cell>
|
|
<u-cell class="celi" :title="$t('page.productDetail.payOrder.pay-method')"
|
|
:value="$t('page.productDetail.payOrder.balance_payment')" isLink></u-cell>
|
|
<selectAddress @selectAddress="selectAddress" @toAdd="toAdd" ref="selectAddress"></selectAddress>
|
|
</view>
|
|
<!-- <view class="line">
|
|
<u-input :placeholder="$t('page.productDetail.payOrder.pay-input-placeholder')" class="celi">
|
|
<u-text
|
|
:text="$t('page.productDetail.payOrder.pay-password')"
|
|
slot="prefix"
|
|
margin="0 3px 0 0"
|
|
color="#000"
|
|
></u-text>
|
|
</u-input>
|
|
</view> -->
|
|
<u--form labelPosition="left" :model="model1" :rules="rules" class="line" ref="uForm">
|
|
<u-form-item :label="$t('page.productDetail.payOrder.pay-password')" prop="payPassword" borderBottom
|
|
labelWidth="80px">
|
|
<u--input v-model="model1.payPassword" type="password"
|
|
:placeholder="$t('page.productDetail.payOrder.pay-input-placeholder')"></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
<u-button class="submit" size="large" @click="submit"
|
|
:text="$t('page.productDetail.payOrder.firm-pay')"></u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import selectAddress from '@/components/select-address/selectAddress.vue'
|
|
export default {
|
|
components: {
|
|
selectAddress,
|
|
},
|
|
data() {
|
|
return {
|
|
shopId: null,
|
|
model1: {
|
|
payPassword: '',
|
|
addressId: 0,
|
|
},
|
|
orderInfo: {},
|
|
rules: {
|
|
'payPassword': {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$t('page.productDetail.payOrder.pay-input-placeholder'),
|
|
trigger: ['blur', 'change']
|
|
},
|
|
},
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getOrder();
|
|
if (this.$refs.selectAddress) {
|
|
this.$refs.selectAddress.getAddressList()
|
|
}
|
|
},
|
|
methods: {
|
|
submit() {
|
|
this.$refs.uForm.validate().then(res => {
|
|
if(!this.model1.addressId){
|
|
this.$u.toast(this.$t('page.payOrder.no-address'));
|
|
return this.toAdd();
|
|
}
|
|
this.request('payOrder', {
|
|
orderId: this.orderInfo.id,
|
|
payPass: this.model1.payPassword,
|
|
addressId: this.model1.addressId,
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
uni.$u.toast(this.$t('success-operation'));
|
|
uni.redirectTo({
|
|
url: '/pages/productDetail/successTransaction/successTransaction'
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
leftClick() {
|
|
uni.redirectTo({
|
|
url: '/pages/productDetail/productDetail?id=' + this.shopId
|
|
})
|
|
this.$MyToast(this.$t('page.productDetail.payOrder.cancel-pay'), {
|
|
title: this.$t('myToactTitle')
|
|
})
|
|
},
|
|
selectAddress(id) {
|
|
this.model1.addressId = id
|
|
},
|
|
getOrder() { //获取当前订单
|
|
this.request("getOrderOne", {}, {
|
|
id: this.$route.query.id
|
|
}).then(res => {
|
|
this.shopId = res.result.shopId;
|
|
this.orderInfo = res.result;
|
|
})
|
|
},
|
|
toAdd(){
|
|
return setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: `/pages/user/address/addAddres?url=/pages/productDetail/payOrder/payOrder&oid=${this.$route.query.id}&quantity=${this.$route.query.quantity}`
|
|
})
|
|
}, 500)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.payOrder {
|
|
padding-bottom: 50px;
|
|
|
|
.img {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
margin-top: 10px;
|
|
flex-direction: column;
|
|
font-size: 28rpx;
|
|
|
|
.text {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
|
|
.celi {
|
|
background-color: #F8F8F8;
|
|
border-radius: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
|
|
.submit {
|
|
border-radius: 30px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #ED762F;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|