shop-uniapp-240426/pages/productDetail/payOrder/payOrder.vue

<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>