teambuy-front/pages_order/order/createOrder.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="确认订单" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

		<view class="bac"></view>

		<view class="box">
			<!-- 商品详情 -->
			<view class="product-item" v-for="item in payOrderProduct" :key="item.id">
				<view class="img-box">
					<image :src="item.image" mode="aspectFill"></image>
				</view>

				<view class="server-info">
					<view class="server-title">{{ item.title }}</view>

					<view class="texture">
						材质：暂无
					</view>

					<view class="stepper">
						<uv-number-box button-size="60" v-model="item.num"></uv-number-box>
					</view>

					<view class="sales-volume">
						<view class="desc">已售出 {{ item.num }}单</view>
					</view>
				</view>
			</view>

			<!-- 地址 -->
			<view @click="openAddress" class="cell-item">
				<view class="cell-item-left">
					<image src="@/pages_order/static/createOrder/address.png" mode="widthFix" class="cell-icon"></image>
					<view class="user-name">{{ address.name }}</view>
					<view class="user-address">{{ address.address}}</view>
				</view>
				<view class="cell-item-right">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>

			<view class="cell-list">
				<radio-group @change="selectPayMethod">

					<!-- 账户余额 -->
					<view class="cell-item">
						<view class="cell-item-left">
							<image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon">
							</image>
							<view class="user-name">账户余额</view>
							<view class="descript">(余额: {{ userInfo.money}})</view>
						</view>
						<view class="cell-item-right">
							<radio color="#E3441A" :value="1" :checked="index === current" />
						</view>
					</view>

					<!-- 微信支付 -->
					<view class="cell-item">
						<view class="cell-item-left">
							<image src="@/pages_order/static/createOrder/wx.png" mode="widthFix" class="cell-icon">
							</image>
							<view class="user-name">微信支付</view>
							<view class="descript"></view>
						</view>
						<view class="cell-item-right">
							<radio color="#E3441A" :value="2" :checked="index === current" />
						</view>
					</view>
				</radio-group>
			</view>

			<!-- 优惠券 -->
			<view @click="openCoupon" class="cell-item">
				<view class="cell-item-left">
					<image src="@/pages_order/static/createOrder/coupon.png" mode="widthFix" class="cell-icon"></image>
					<view class="user-name">优惠券</view>
					<view class="descript">(￥{{ coupon.money || 0}})</view>
				</view>
				<view class="cell-item-right">
					<radio color="#E3441A" :value="2" :checked="coupon.id" />
				</view>
			</view>

			<!-- 提示 -->
			<view class="hint">
				温馨提示，下单前请仔细查看下单需知
			</view>

			<!-- 用户协议 -->
			<view class="agreement">
				<radio color="#E3441A" @click="agreement = !agreement" :checked="agreement" />
				本人已同意<text @click="$refs.popup.open('user_xy')">《用户使用协议》</text>
			</view>

			<!-- 下单 -->
			<view class="submit">
				<view class="price">
					<view>
						<text style="color: #000;">合计</text>
						￥<text style="font-size: 18px;
						font-weight: 600;">{{ totalPrice }}</text>元
					</view>
				</view>
				<view class="btn" @click="submit">
					立即支付
				</view>
			</view>
		</view>

		<!-- 地址选择 -->
		<uv-popup ref="addressPopup" :round="30" style="padding-bottom: 90rpx;">
			<addressList ref="addressList" height="60vh" @select="selectAddress" />
			<view class="add-btn">
				<view @click="$utils.navigateTo('/pages_order/mine/address')" class="button-submit">新增地址</view>
			</view>
		</uv-popup>

		<!-- 优惠券选择-->
		<uv-popup ref="couponPopup" :round="30">
			<couponList ref="couponList" height="60vh" @select="selectCoupon" />
		</uv-popup>
		
		<configPopup ref="popup"></configPopup>

	</view>
</template>

<script>
	import addressList from '../components/address/addressList.vue'
	import couponList from '@/components/couponList/couponList.vue'

	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			addressList,
			couponList
		},
		data() {
			return {
				address: {
					name: '请选择地址',
					address: '',
				},
				addressTotal: 0,
				remark: '',
				num: 1,
				agreement: true,
				coupon: {},
			}
		},
		computed: {
			totalPrice() {
				let price = 0

				this.payOrderProduct.forEach(n => {
					price += n.price * n.num
				})

				if (this.coupon.id) {
					price -= this.coupon.money
				}

				return Number(price).toFixed(2)
			},
			...mapState(['userInfo', 'payOrderProduct']),
		},
		onLoad() {
			this.$store.commit('getUserInfo')
		},
		onShow() {
			this.getAddressList()
			this.getCouponList()
		},
		methods: {
			// 打开
			getAddressList() {
				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},
			//获取优惠券列表
			getCouponList() {
				this.$refs.couponList.getCouponList()
			},
			// 打开选择地址
			openAddress() {
				if (this.addressTotal == 0) {
					return uni.navigateTo({
						url: '/pages_order/mine/address?type=back'
					})
				}
				this.$refs.addressPopup.open('bottom')
			},
			// 选择地址
			selectAddress(e) {
				this.address = e
				this.$refs.addressPopup.close()
			},
			// 打开优惠券选择
			openCoupon() {
				if (this.addressTotal == 0) {
					return uni.navigateTo({
						url: '/pages_order/mine/address?type=back'
					})
				}
				this.$refs.couponPopup.open('bottom')
			},
			// 选择优惠券
			selectCoupon(e) {
				//判断优惠券限制
				let {
					useMoney
				} = e
				let productTotalPrice = 0
				this.payOrderProduct.forEach(item => {
					productTotalPrice += item.price
				})
				if (productTotalPrice < useMoney) {
					return uni.showToast({
						title: `此优惠券需要满${useMoney}使用`,
						icon: "none"
					})
				}
				this.coupon = e
				this.$refs.couponPopup.close()
			},

			submit() {

				let addressId = this.address.id

				if (!addressId) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}

				let data = {}
				let api = ''


				if (this.payOrderProduct[0].shopId || this.payOrderProduct[0].type == 2) { //普通商品

					let list = []
					this.payOrderProduct.forEach(n => {
						list.push({
							num: n.num,
							shopId: n.shopId || n.id,
						})
					})
					data = {
						addressId,
						list: JSON.stringify(list),
					}
					api = 'createSumOrder'

					this.deleteCart(this.payOrderProduct.map(n => n.id).join(','))

				} else { //体验、常规商品
					data = {
						addressId,
						num: this.payOrderProduct[0].num,
						shopId: this.payOrderProduct[0].id,
					}
					api = 'createOrder'
				}

				this.$api(api, data, res => {
					if (res.code == 200) {
						uni.requestPaymentWxPay(res)
							.then(res => {
								uni.showToast({
									title: '下单成功',
									icon: 'none'
								})

								setTimeout(uni.redirectTo, 700, {
									url: '/pages/index/order'
								})
							}).catch(n => {
								setTimeout(uni.redirectTo, 700, {
									url: '/pages/index/order'
								})
							})
					} else if (res.code == 902) {
						uni.showModal({
							title: res.message,
							success(e) {
								if (e.confirm) {
									uni.redirectTo({
										url: '/pages/index/order'
									})
								}
							}
						})
					}
				})
			},
			// 删除购物车
			deleteCart(ids) {
				this.$api('deleteCart', {
					ids
				})
			},
			//选择支付方式
			selectPayMethod(e) {
				console.log(e.detail.value)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {

		.bac {
			width: 100%;
			height: 100px;
			background: $uni-color;
		}

		.box {
			padding: 20rpx;
			margin-top: -150rpx;

			// 商品详情
			.product-item {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				background: white;
				border-radius: 15rpx;
				box-sizing: border-box;
				padding: 25rpx;
				margin: 20rpx 0rpx;

				.img-box {
					width: 200rpx;
					height: 200rpx;
					background: #ccc;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.server-info {
					width: calc(100% - 200rpx);
					box-sizing: border-box;
					padding: 10rpx 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.server-title {
						font-size: 34rpx;
					}

					.texture {
						color: #B8B8B8;
						margin: 10rpx 0rpx;
					}

					.stepper {
						margin-bottom: 10rpx;

						&::v-deep .uv-number-box__input {
							color: $uni-color !important;
							width: 100rpx !important;
						}
					}

					.sales-volume {
						display: flex;
						align-items: center;
						color: #B8B8B8;
						font-size: 26rpx;

						image {
							width: 25rpx;
							height: 25rpx;
						}

					}

				}
			}

			//cell单元格(地址)
			.cell-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: white;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.cell-item-left {
					display: flex;
					align-items: center;
					width: 90%;

					.cell-icon {
						width: 40rpx;
					}

					.user-name,
					.user-address {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 150rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
					}

					.descript {
						color: #888888;
					}

					.user-address {
						width: calc(100% - 230rpx);
					}
				}

				.cell-item-right {
					width: 10%;
					display: flex;
					justify-content: flex-end;
				}
			}

			.cell-list {
				margin: 20rpx 0rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.cell-item {
					border-radius: 0rpx;
				}
			}

			// 提示
			.hint {
				font-size: 26rpx;
				margin-top: 80rpx;
				color: #BFBFBF;
			}

			// 用户协议
			.agreement {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px 0;

				.van-checkbox {
					margin-right: 5rpx;
				}

				text {
					color: $uni-color;
				}
			}

			// 下单
			.submit {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 60px;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					color: #F39637;
					padding: 0 20px;
				}

				.btn {
					background: $uni-color;
					color: white;
					width: 120px;
					height: 45px;
					border-radius: 23px;
					font-size: 16px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		//新增地址按钮
		.add-btn {
			width: 100%;

			.button-submit {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 596rpx;
				height: 90rpx;
				background: #E3441A;
				border-radius: 46rpx;

				margin: 20rpx auto;

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>