jewelry-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">
				<view class="img-box">
					<image :src="projectDetail.image" mode="aspectFill"></image>
				</view>

				<view class="server-info">
					<view class="server-title">MOMEIREN双面黑钻项链</view>

					<view class="texture">
						材质：S25银
					</view>

					<view class="stepper">
						<uv-number-box button-size="60" v-model="value" @change="valChange"></uv-number-box>
					</view>

					<view class="sales-volume">
						<view class="desc">已售出 666+ 单</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">
				<!-- 账户余额 -->
				<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">

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

					</view>
				</view>
			</view>

			<!-- 优惠券 -->
			<view 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">$20</view>
				</view>
				<view class="cell-item-right">

				</view>
			</view>

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

			<!-- 用户协议 -->
			<view class="agreement">
				<radio @click="agreement = !agreement" :checked="agreement" />
				本人已同意<text @click="configPopupShow = true">《用户使用协议》</text>
			</view>

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

		<!-- 地址选择 -->
		<uv-popup ref="addressPopup" :round="30">
			<addressList ref="addressList" height="60vh" @select="selectAddress" />
		</uv-popup>

	</view>
</template>

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

	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			addressList,
		},
		data() {
			return {
				productList: [],
				address: {
					name: '请选择地址',
					address: '',
				},
				addressTotal: 0,
				remark: '',
				num: 1,
				agreement: true
			}
		},
		computed: {
			totalPrice() {
				let price = 0

				this.productList.forEach(n => {

					if ([2].includes(n.type) && [1].includes(this.userInfo.isPay)) {
						// 常规、普通商品的同时用户是会员就计算会员价
						price += n.vipPrice * n.num
					} else {
						// 普通价格
						price += n.price * n.num
					}
				})

				return Number(price).toFixed(2)
			},
			...mapState(['payOrderProduct', 'userInfo']),
		},
		onLoad() {
			this.getRiceProductDetail()
			this.$store.commit('getUserInfo')
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			// 获取商品
			getRiceProductDetail() {
				this.productList = JSON.parse(JSON.stringify(this.payOrderProduct))
			},
			// 打开
			getAddressList() {
				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},
			// 打开选择地址
			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()
			},
			submit() {

				let addressId = this.address.id

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

				let data = {}
				let api = ''


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

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

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

				} else { //体验、常规商品
					data = {
						addressId,
						num: this.productList[0].num,
						shopId: this.productList[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
				})
			},
		}
	}
</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;
						}
					}

					.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: 60rpx;
				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;
				}
			}
		}
	}
</style>