taoke/pages/order/cashier.vue

<template>
	<view style="overflow: hidden;">
		<timer-tips :createtime="orders[0].createtime"></timer-tips>
		<view class="order-list">
			<view class="order-item" v-for="order in orders">
				<view class="order-head">
					<view class="factory-name">{{order.seller.nickname?order.seller.nickname:'省心直供（该厂家暂未设置昵称）'}}</view>
				</view>
				<view class="order-info" @tap="openDetails(order.id)">
					<view class="product-item" v-for="product in order.products_json">
						<view class="product-image">
							<image class="image" :src="product.spec_image|imagesFilter" mode="scaleToFill"></image>
						</view>
						<view class="product-info">
							<view class="row">
								<view class="name">{{product.name}}</view>
								<view class="price">￥{{product.spec_price|priceFilter}}</view>
							</view>
							<view class="row">
								<view class="spec">{{product.spec_name}}</view>
								<view class="num">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="total-price">
					总价 <text class="warning">￥{{order.total_amount}}</text>
				</view>
			</view>
		</view>
		<view class="sum">合计：{{total_amount_sum|priceFilter}}元</view>

		<view class="pay-method">
			<view class="label">请选择支付方式</view>
			<view>
				<view class="item" :class="{'active':pay_method==='alipay'}"
					@tap="pay_method='alipay',pay_provider='alipay'">
					<image class="image" src="../../static/alipay.png" mode="scaleToFill"
						style="width: 50upx;height: 50upx;"></image>支付宝
				</view>
				<view class="item" :class="{'active':pay_method==='wechat'}"
					@tap="pay_method='wechat',pay_provider='wxpay'">
					<image class="image" src="../../static/wxpay.png" mode="scaleToFill"
						style="width: 50upx;height: 50upx;"></image>微信支付
				</view>
				<view class="item" :class="{'active':pay_method==='balance'}" @tap="pay_method='balance'">
					<image class="image" src="../../static/logo.png" mode="scaleToFill"
						style="width: 50upx;height: 50upx;"></image>使用余额
				</view>
			</view>
			<view class="" style="margin-top: 40upx;">
				<button class="pay-btn" type="default" @tap="pay">立即支付</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pay_method: "alipay",
				pay_provider: "alipay",
				orders: [{}],
				order_no: ""
			}
		},
		computed: {
			total_amount_sum() {
				return this.orders.reduce((prev, cur) => {
					return prev + Number(cur.total_amount)
				}, 0)
			}
		},

		onLoad(option) {
			this.order_no = option.order_no,
				this.getCashierData();
		},
		methods: {
			getCashierData() {
				this.$http.get({
					url: "/order/cashier",
					data: {
						order_no: this.order_no
					},
					success: (res) => {
						this.orders = res.data.data.map((value) => {
							value.products_json = JSON.parse(value.products_snapshot)
							return value;
						})
					}
				})
			},
			pay() {
				if (this.pay_method !== 'balance') {
					this.$http.get({
						url: '/order/pay',
						data: {
							'order_no': this.order_no,
							'pay_method': this.pay_method,
							'amount': this.total_amount_sum

						},
						success: (res) => {

							uni.requestPayment({
								provider: this.pay_provider,
								orderInfo: res.data.data,
								success: (res) => {
									uni.showModal({
										content: JSON.stringify(res)
									})
								},
								fail: (res) => {
									uni.showModal({
										content: "支付失败",
									})
								}
							})
						}
					})

				} else {					
					this.$http.get({
						url: '/order/balancePay',
						data: {
							'order_no': this.order_no,
							'pay_method': this.pay_method,
							'amount': this.total_amount_sum
						},
						success: (res) => {
							uni.navigateTo({
								url:"/pages/order/order",
							})
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		overflow: hidden;
	}


	.order-list {
		.order-item {

			background: white;
			margin: 20upx;
			padding: 20upx;
			border-radius: 20upx;

			.order-head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20upx;

				.order-status {
					color: $primary-color;
					font-size: 24upx;
				}
			}

			.factory-name {
				font-size: 28upx;
				font-weight: bold;
			}

			.product-item {
				display: flex;

				.product-image {
					width: 120upx;
					height: 120upx;
					margin-right: 20upx;
					margin-top: 10upx;

					.image {
						width: 120upx;
						height: 120upx;
					}
				}

				.product-info {
					flex-grow: 1;
					font-size: 28upx;

					.name {
						font-size: 28upx;
						white-space: normal;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;

					}

					.num {
						color: #999999;
					}

					.spec {
						font-size: 26upx;
						background: #CCCCCC;
						color: white;
						padding: 0 10upx;
						border-radius: 10upx;
					}
				}

				.row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10upx;
				}

			}

			.total-price {
				text-align: right;
				font-size: 28upx;
				padding: 10upx 0;

				.warning {
					color: $primary-color;
					font-weight: bold;
				}

			}

		}
	}

	.sum {
		margin: 20upx;
		font-size: 30upx;
		text-align: right;
		font-weight: bold;
	}

	.pay-method {
		margin: 20upx;
		padding: 20upx;
		background: white;

		.label {
			font-size: 30upx;
			margin-bottom: 20upx;
		}

		.item {
			height: 80upx;
			display: flex;
			align-items: center;
			font-size: 30upx;
			border-bottom: 2upx solid #F5F5F5;

			.image {
				margin-right: 10upx;
			}

			&.active {
				background: url(../../static/gou.png) no-repeat;
				background-size: 40upx 40upx;
				background-position: 600upx 20upx;
			}
		}
	}

	.pay-btn {
		margin: 20upx 0;
		background: $primary-color;
		color: white;
		font-size: 32upx;
		font-weight: bold;
	}
</style>