shop-uniapp-240426/pages/repurchase/repurchase.vue

<template>
	<view class="repurchase">
		<u-navbar :title="$t('page.repurchase.repurchase')" @rightClick="rightClick"
			@leftClick="leftClick()"></u-navbar>
		<view class="product-list">
			<orderProductListVue :product="orderInfo"></orderProductListVue>
		</view>
		<div class="price-count">
			<text>{{ $t('page.repurchase.totalPrice') }}</text>
			<text>{{ $t('$') + orderInfo.price }}</text>
		</div>
		<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 @click="submit()" type="primary" :text="$t('page.repurchase.repurchaseNow')"
			shape="circle"></u-button>
	</view>
</template>

<script>
	import orderProductListVue from '../../components/order-product/orderProductList.vue'
	export default {
		components: {
			orderProductListVue,
		},
		data() {
			return {
				productList: [{
					productName: 'Huawei Enjoy 70/ ProHuaweiPro/Huawei',
					price: '1236.00',
					num: 1
				}],
				model1: {
					payPassword: ''
				},
				rules: {
					'payPassword': {
						type: 'string',
						required: true,
						message: this.$t('page.productDetail.payOrder.pay-input-placeholder'),
						trigger: ['blur', 'change']
					},
				},
				orderInfo: {}
			}
		},
		onShow() {
			this.getOrderDetail();
		},
		methods: {
			leftClick() {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + this.$route.query.id
				})
			},
			toPay() { //支付
				uni.redirectTo({
					url: '/pages/payOrder/payOrder'
				})
			},
			getOrderDetail() { //获取订单详情
				this.request("getOrderOne", {}, {
					id: this.$route.query.id
				}).then(res => {
					this.orderInfo = res.result;
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.request("return", {
						id: this.$route.query.id,
						money: this.orderInfo.price,
						payPass: this.model1.payPassword
					}).then(res => {
						if (res.code == 200) {
							this.$u.toast(this.$t('page.repurchase.repurchase-now-succes'));
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/order/order'
								})
							}, 500)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repurchase {
		box-sizing: border-box;

		&::v-deep .product-list {
			margin-top: 54px;

			.order-body {
				background: white;

				.selling-price {
					color: black !important;
				}
			}
		}

		.price-count {
			height: 50px;
			line-height: 50px;
			background: white;
			padding: 0px 20px;

			text {
				&:nth-child(2) {
					color: #666;
					margin-left: 10px;
				}
			}
		}

		.u-button {
			height: 45px;
			margin-top: 15px;
			background: linear-gradient(to right, #ff7601, #ff4901);
			border: none;
		}

		.line {
			background-color: #fff;
			padding: 10px;
			margin-top: 10px;

			.celi {
				background-color: #F8F8F8;
				border-radius: 10px;
				margin: 10px 0;
			}
		}
	}
</style>