smart-tourism/smart-ui-app/pages/goods/pay.vue

<template>
	<view>
		<!--列表数据-->
		<view class="list">
			<view class="info">
				<view class="order_title">
					<text>广安农机农技智慧服务</text>
					<view class="zhu" style="margin-top: -2px;"><u-tag text="租" type="success" /></view>
				</view>
				<view class="order_item" v-for="(item, index) in list" :key="index">
					<image :src="ip + item.goods.pic" class="pic" mode="aspectFill"></image>
					<view class="con">
						<view class="title">
							<text>{{ item.goods.title }}</text>
						</view>
						<view class="price">
							<text>¥{{ item.goods.price }}</text>
							<text class="day">/天</text>
						</view>
					</view>
					<view class="clear"></view>
				</view>
				<u-divider style="padding: 10px;">共计{{ list.length }}项服务</u-divider>
			</view>
			<view class="info">
				<view class="form_group hr">
					<view class="lable">我的姓名</view>
					<input type="text" placeholder="请输入姓名" v-model="item.name" />
				</view>
				<view class="form_group hr">
					<view class="lable">联系电话</view>
					<input type="number" placeholder="请输入联系电话" v-model="item.phone" />
				</view>
				<view class="form_group hr">
					<view class="lable">租赁天数</view>
					<u-number-box v-model="item.days" :min="1" @change="change"></u-number-box>
				</view>
				<view class="form_group hr">
					<view class="lable">备注信息</view>
					<textarea placeholder="备注信息" v-model="item.notes" />
				</view>
			</view>
			<view class="phone">请填写正确的手机号，我们客服人员会和你取得联系</view>
		</view>
		<view class="footer">
			<view class="lfx">
				<view class="f">
					<view class="hej">
						<text class="price">¥{{ item.totalPrice }}</text>
					</view>
				</view>
				<view class="f js" @click="pay()">支付</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			list: [],
			item: { orderList: [], totalPrice: 0, days: 1, phone: this.$getUser().phone }
		};
	},
	onLoad(e) {
		this.list = JSON.parse(e.list);
		this.calcul();
	},
	methods: {
		change(e) {
			this.calcul();
		},
		//计算
		calcul() {
			this.item.totalPrice = 0;
			this.list.forEach(item => {
				this.item.totalPrice = this.$util.accAdd(this.item.totalPrice, item.goods.price);
			});
			this.item.totalPrice = this.$util.accMul(this.item.totalPrice, this.item.days);
			this.$forceUpdate();
		},
		//结算
		pay() {
			let rule = [
				{ name: 'name', checkType: 'notnull', errorMsg: '请输入姓名' },
				{ name: 'phone', checkType: 'phoneno', errorMsg: '请输入正确手机号' },
				{ name: 'days', checkType: 'notnull', errorMsg: '请选择租赁天数' }
			];
			if (!this.$verify.check(this.item, rule)) {
				uni.showModal({ content: this.$verify.error, showCancel: false });
				return;
			}
			this.item.orderList = [];
			this.item.title = '';
			this.list.forEach(item => {
				this.item.orderList.push({ id: item.id, goodsId: item.goodsId, price: item.goods.price, title: item.goods.title, pic: item.goods.pic });
				this.item.title += item.goods.title + '，';
			});
			this.item.openId = this.$getUser().openId;
			this.item.userId = this.$getUser().id;
			this.$http.request({
				url: this.$http.urls.pay,
				method: 'POST',
				data: this.item,
				success: res => {
					if (res.data.code === 200) {
						//调起微信支付
						wx.requestPayment({
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: r => {
								uni.redirectTo({ url: '/pages/order/list' });
							},
							fail: r => {
								uni.redirectTo({ url: '/pages/order/list' });
							}
						});
					} else {
						uni.showModal({ content: res.data.msg, showCancel: false });
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page;
}
.list {
	padding: 0px 10px 75px 10px;
	.info {
		background-color: white;
		border-radius: 5px;
		margin-top: 10px;
	}
	.phone {
		padding-top: 5px;
		font-size: 13px;
		color: #838383;
	}
}
.footer {
	.price {
		font-size: 15px;
	}
}
</style>