qjd-user-uniapp/pagesGood/orderPay.vue

<template>
	<view class="container">
		<view class="address-info-box" @click="selectAddress()">
			<view class="address-icon">
				<text class="iconfont icondizhi"></text>
			</view>
			<view class="address-content">
				<text class="address-info">
					<text class="address-name">{{addressData.username}}</text>
					<text class="address-phone">{{addressData.phone}}</text>
				</text>
				<view class="address-detail">{{addressData.address}}</view>
			</view>
			<view class="address-link">
				<text class="iconfont iconfangxiang"></text>
			</view>
		</view>
		<view class="goods-info-box">
			<view class="shop-info">
				<text class="iconfont icondianpu"></text>
				<text class="shop-name">{{orderData.supplierName}}</text>
				<text class="iconfont iconfangxiang"></text>
			</view>
			<view class="goods-list">
				<view class="goods-row" v-for="(item, index) in orderData.goodsList" :key="index">
					<cover-image class="goods-img" :src="item.imgUrl"></cover-image>
					<view class="goods-info">
						<view class="goods-name">{{item.productName}}</view>
						<view class="goods-type">
							类型：{{item.productType == 1 ? '普通商品' : (item.productType == 2 ? '拍卖商品' : (item.productType == 3 ? '自助采摘' : '共享种植'))}}
						</view>
						<view class="plant-area" v-if="orderType == 3">面积：{{orderData.areaSize}}㎡</view>
						<view class="goods-price-number">
							<text class="goods-unit">￥</text>
							<text class="goods-price">{{orderType == 1 ? item.bizPrice : paySum}}</text>
							<text class="goods-number">x{{item.buyNum}}</text>
							<text class="plant-text" v-if="orderType == 3">有效期：{{orderData.term}}天</text>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<u-cell-group :border="false">
					<u-cell-item title="商品金额" :arrow="false" :border-bottom="false" title-width="170" :title-style="{textAlign: 'right'}">
						<text class="order-text-right">￥{{orderType == 1 ? getAllGoodsInitialPrice() : paySum}}</text>
					</u-cell-item>
					<u-cell-item title="积分抵扣" :arrow="false" :border-bottom="false" title-width="170" :title-style="{textAlign: 'right'}"
					 v-if="orderType == 1">
						<view>
							<text class="order-text-left">-{{getIntegral()+'积分'}}</text>
							<text class="order-text-right">-￥{{(getIntegral()/100).toFixed(2)}}</text>
						</view>
					</u-cell-item>
					<u-cell-item title="优惠卷" :border-bottom="false" title-width="170" :title-style="{textAlign: 'right'}" @click="showCoupon()"
					 v-if="orderType == 1">
						<view>
							<text class="order-text-left">{{coupon.couponName}}</text>
							<text class="order-text-right">-￥{{coupon.discountAmount.toFixed(2)}}</text>
						</view>
					</u-cell-item>
					<u-field label="备注" v-model="notes" placeholder="请输入备注" :border-bottom="false" label-align="right" label-width="170"
					 :field-style="{marginLeft: '16px'}"></u-field>
				</u-cell-group>
			</view>
			<view class="pay-info">
				<text class="pay-text">共{{getAllGoodsNumber()}}件</text>
				<text class="pay-text">总计</text>
				<text class="pay-price">￥{{orderType == 1 ? getAllGoodsPrice() : paySum}}</text>
			</view>
		</view>
		<view class="handle-box">
			<view class="handle-info">
				<text class="handle-text" style="margin-right: 12px;">共{{getAllGoodsNumber()}}件</text>
				<text class="handle-text">合计：</text>
				<text class="handle-price">￥{{orderType == 1 ? getAllGoodsPrice() : paySum}}</text>
			</view>
			<view class="handle-button" @click="submitOrder()">提交订单</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="coupon-box">
				<view class="coupon-row" v-for="(item, index) in couponList" :key="index" @click="selectCoupon(item)">
					<view class="coupon-left">
						<view class="coupon-left-price"><text style="font-size: 16px;">￥</text>{{item.discountAmount}}</view>
						<view class="coupon-left-text">满减金额</view>
					</view>
					<view class="coupon-info">
						<view class="coupon-text1">{{item.couponName}}</view>
						<view class="coupon-text1" style="margin-bottom: 4px;">满{{item.fullAmount}}减{{item.discountAmount}}</view>
						<view class="coupon-text2">{{item.couponType == 1 ? '仅限用于' + item.supplierName + '的店铺' : ''}}</view>
						<view class="coupon-text2" style="color: #999999;">有效期：{{item.publishStartTime}}~{{item.useEndTime}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				flag: 1,
				orderType: 1,
				addressData: {
					memberAddressId: '',
					username: '',
					phone: '',
					province: '',
					city: '',
					area: '',
					address: '',
				},
				userData: {},
				orderData: {
					tenantCode: '',
					supplierName: '',
					areaSize: '',
					term: '',
					goodsList: []
				},
				integral: 0,
				coupon: {
					couponId: '',
					couponName: '',
					discountAmount: 0,
					couponType: '',
				},
				couponList: [],
				notes: '',
				paySum: 0,
			}
		},
		onLoad(options) {
			this.orderType = options.orderType
			this.paySum = options.paySum ? options.paySum : 0
			this.flag = options.flag
			this.userData = uni.getStorageSync("userData")
			this.orderData = uni.getStorageSync("orderData")
			if (!uni.getStorageSync("defaultAddress")) {
				NET.request(API.getAddressList, {}, 'POST').then(res => {
					if (res.data.find(site => site.isDefault == 1)) {
						let address = res.data.find(site => site.isDefault == 1)
						this.addressData = {
							memberAddressId: address.id,
							username: address.username,
							phone: address.phone,
							province: address.province,
							city: address.city,
							area: address.area,
							address: address.address
						}
					}
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取默认地址失败',
						type: 'warning',
					})
				})
			}
			if (this.orderType == 1) {
				NET.request(API.getIntegral, {}, 'POST').then(res => {
					this.mineIntegral = res.data.usableIntegral
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取个人积分失败',
						type: 'warning',
					})
				})
				NET.request(API.getUsableCouponList, {
					tenantCode: this.orderData.tenantCode,
					totalPrice: this.getAllGoodsInitialPrice(),
				}, 'GET').then(res => {
					this.couponList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取优惠券列表失败',
						type: 'warning',
					})
				})
			}
		},
		onShow() {
			if (uni.getStorageSync("defaultAddress")) {
				this.addressData = uni.getStorageSync("defaultAddress")
			}
		},
		methods: {
			//  获取全部商品原价格
			getAllGoodsInitialPrice() {
				let price = this.orderData.goodsList.reduce((total, site) => {
					return total + site.bizPrice * site.buyNum
				}, 0)
				return price.toFixed(2)
			},
			//  获取全部价格
			getAllGoodsPrice() {
				let price = this.orderData.goodsList.reduce((total, site) => {
					return total + site.bizPrice * site.buyNum
				}, 0)
				return (price - this.coupon.discountAmount - (this.getIntegral() / 100)).toFixed(2)
			},
			//  获取全部商品数量
			getAllGoodsNumber() {
				let number = this.orderData.goodsList.reduce((total, site) => {
					return total + site.buyNum
				}, 0)
				return number
			},
			//  选择地址
			selectAddress() {
				uni.navigateTo({
					url: '/pagesMain/addressList?type=2'
				});
			},
			//  获取积分
			getIntegral() {
				let price = this.orderData.goodsList.reduce((total, site) => {
					return total + site.bizPrice * site.buyNum
				}, 0) - this.coupon.discountAmount
				if (this.integral / 100 > price) {
					return price * 100
				} else {
					return this.integral
				}
			},
			//  显示优惠券弹窗
			showCoupon() {
				this.$refs.popup.open()
			},
			//  选择优惠券
			selectCoupon(item) {
				this.coupon = {
					couponId: item.couponId,
					couponName: item.couponName,
					discountAmount: item.discountAmount,
					couponType: item.couponType,
				}
				this.$refs.popup.close()
			},
			//  提交订单
			submitOrder() {
				if (!this.addressData.username) {
					this.$refs.uTips.show({
						title: '请选择地址',
						type: 'warning',
					})
				} else {
					NET.request(API.submitOrder, {
						//  会员
						mid: this.userData.userId,
						nickname: this.userData.userName,
						//  地址
						...this.addressData,
						//  商铺
						supplierName: this.orderData.supplierName,
						tenantCode: this.orderData.tenantCode,
						//  商品
						productIds: this.orderData.goodsList.map(site => {
							return site.productId
						}).join(','),
						productType: this.orderData.goodsList.map(site => {
							return site.productType
						}).join(','),
						products: this.orderData.goodsList.map(site => {
							return {
								...site,
								supplierName: this.orderData.supplierName,
								tenantCode: this.orderData.tenantCode,
								bizPrice: this.orderType == 1 ? site.bizPrice : this.paySum,
							}
						}),
						//  优惠券
						couponId: this.orderType == 1 ? this.coupon.couponId : '',
						couponDiscountAmount: this.orderType == 1 ? this.coupon.discountAmount : '',
						couponType: this.orderType == 1 ? this.coupon.couponType : '',
						//  积分
						integralValue: this.orderType == 1 ? this.getIntegral() : 0,
						integralAmount: this.orderType == 1 ? this.getIntegral() / 100 : 0,
						//  金额
						discountAmount: this.orderType == 1 ? (parseFloat(this.coupon.discountAmount) + (this.getIntegral() / 100)) : 0,
						orderSum: this.orderType == 1 ? this.orderData.goodsList.reduce((total, site) => {
							return total + site.bizPrice * site.buyNum
						}, 0) : this.paySum,
						paySum: this.orderType == 1 ? this.getAllGoodsPrice() : this.paySum,
						//  支付类型
						flag: this.flag,
						orderType: this.orderType,
						//  备注
						notes: this.notes,
					}, 'POST').then(res => {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageValue,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (payRes) => {
								console.log('success:' + JSON.stringify(payRes));
								uni.reLaunch({
									url: '/pagesMain/paySuccess'
								});
							},
							fail: (error) => {
								console.log('fail:' + JSON.stringify(error));
								this.$refs.uTips.show({
									title: '支付失败',
									type: 'warning',
								})
							}
						})
					}).catch(error => {
						this.$refs.uTips.show({
							title: '提交订单失败',
							type: 'warning',
						})
					})
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		box-sizing: border-box;
		padding-bottom: 70px;
		overflow-y: auto;

		.address-info-box {
			width: calc(100% - 32px);
			float: left;
			box-sizing: border-box;
			padding: 16px 18px 16px 16px;
			margin: 10px 16px;
			background: #FFFFFF;
			border-radius: 10px;

			.address-icon {
				width: 36px;
				height: 40px;
				float: left;
				align-items: center;
				display: flex;

				.iconfont {
					color: #52A63A;
					font-size: 36px;
				}
			}

			.address-content {
				width: calc(100% - 66px);
				height: 40px;
				float: left;
				margin: 0 8px 0 12px;

				.address-info {
					height: 20px;
					font-family: PingFang SC;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.address-name {
						font-size: 16px;
						color: #333333;
						margin-right: 14px;
					}

					.address-phone {
						font-size: 12px;
						color: #666666;
					}
				}

				.address-detail {
					height: 20px;
					font-size: 16px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.address-link {
				width: 10px;
				height: 40px;
				float: left;
				align-items: center;
				display: flex;

				.iconfont {
					color: #999999;
					font-size: 12px;
				}
			}
		}

		.goods-info-box {
			width: calc(100% - 32px);
			float: left;
			margin: 0 16px 10px 16px;
			background: #FFFFFF;
			border-radius: 10px;

			.shop-info {
				width: 100%;
				height: 48px;
				float: left;
				box-sizing: border-box;
				padding: 13px 15px 12px 15px;
				border-bottom: 1px solid #EEEEEE;
				line-height: 22px;

				.icondianpu {
					font-size: 22px;
					color: #333333;
				}

				.shop-name {
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					margin: 0 8px 0 10px;
				}

				.iconshangjia {
					font-size: 12px;
					color: #999999;
				}
			}

			.goods-list {
				width: 100%;
				float: left;
				box-sizing: border-box;
				padding: 10px 15px 0 15px;

				.goods-row {
					width: 100%;
					height: 90px;
					float: left;
					display: flex;
					margin-bottom: 10px;

					.goods-img {
						width: 90px;
						height: 90px;
						border-radius: 5px;
						object-fit: cover;
					}

					.goods-info {
						width: calc(100% - 106px);
						height: 90px;
						margin-left: 16px;

						.goods-name {
							width: 100%;
							height: 36px;
							float: left;
							font-size: 14px;
							font-family: PingFang SC;
							color: #333333;
							line-height: 18px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
						}

						.goods-type {
							height: 20px;
							float: left;
							background: #F0F0F0;
							border-radius: 4px;
							padding: 0 8px;
							margin: 6px 0;
							font-size: 10px;
							font-family: PingFang SC;
							color: #666666;
							line-height: 20px;
						}

						.plant-area {
							height: 20px;
							float: right;
							margin: 6px 0;
							font-size: 12px;
							font-family: PingFang SC;
							color: #333333;
						}

						.goods-price-number {
							width: 100%;
							height: 20px;
							float: left;
							line-height: 20px;
							font-family: PingFang SC;
							color: #333333;

							.goods-unit {
								font-size: 12px;
							}

							.goods-price {
								font-size: 15px;
								margin-right: 6px;
							}

							.goods-number {
								font-size: 12px;
							}
						}

						.plant-text {
							float: right;
							font-size: 12px;
							font-family: PingFang SC;
							color: #333333;
						}
					}
				}
			}

			.order-info {
				width: 100%;
				float: left;

				.order-text-left {
					font-size: 13px;
					font-family: PingFang SC;
					color: #666666;
					float: left;
					margin-left: 16px;
				}

				.order-text-right {
					font-size: 13px;
					font-family: PingFang SC;
					color: #52A63A;
				}

				/deep/.u-cell_title {
					color: #333333;
				}

				/deep/.u-label-text {
					color: #333333;
				}

			}

			.pay-info {
				width: 100%;
				height: 46px;
				float: left;
				box-sizing: border-box;
				border-top: 1px solid #EEEEEE;
				padding-right: 15px;
				line-height: 44px;
				font-family: PingFang SC;
				font-size: 14px;
				text-align: right;
				white-space: nowrap;

				.pay-text {
					color: #333333;
					margin-right: 6px;
				}

				.pay-price {
					color: #52A63A;
				}
			}
		}

		.handle-box {
			width: 100%;
			height: 70px;
			box-sizing: border-box;
			padding: 15px 0 15px 16px;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.15);

			.handle-info {
				width: calc(100% - 110px);
				height: 40px;
				float: left;
				line-height: 40px;
				font-family: PingFang SC;
				text-align: left;
				white-space: nowrap;

				.handle-text {
					font-size: 16px;
					color: #666666;
				}

				.handle-price {
					font-size: 15px;
					color: #52A63A;
				}
			}

			.handle-button {
				width: 100px;
				height: 40px;
				float: right;
				box-sizing: border-box;
				padding-left: 10px;
				background: #52A63A;
				border-radius: 20px 0px 0px 20px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 40px;
				text-align: center;
			}
		}

		.coupon-box {
			width: 100vw;
			height: 500px;
			background-color: #FFFFFF;
			border-radius: 15px 15px 0px 0px;
			box-sizing: border-box;
			padding: 16px 16px 0 16px;
			overflow-y: auto;

			.coupon-row {
				width: 100%;
				height: 105px;
				float: left;
				margin-bottom: 10px;
				border-radius: 10px;
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 0px rgba(103, 103, 103, 0.3);
				overflow: hidden;

				.coupon-left {
					width: 107px;
					height: 105px;
					box-sizing: border-box;
					padding-right: 10px;
					float: left;
					background-size: 107px 105px;
					background-position: center;
					background-repeat: no-repeat;
					background-image: url(@/static/images/couponHead.png);

					.coupon-left-price {
						width: 100%;
						height: 24px;
						float: left;
						margin: 28px 0 12px 0;
						font-size: 24px;
						font-family: PingFang SC;
						color: #FFFFFF;
						line-height: 24px;
						text-align: center;
					}

					.coupon-left-text {
						width: 100%;
						height: 20px;
						float: left;
						color: #FFFFFF;
						font-size: 12px;
						font-family: PingFang SC;
						line-height: 20px;
						text-align: center;
					}
				}

				.coupon-info {
					width: calc(100% - 115px);
					height: 100%;
					float: right;
					box-sizing: border-box;
					padding: 16px 0 12px 0;

					.coupon-text1 {
						width: 100%;
						height: 20px;
						float: right;
						font-size: 15px;
						font-family: PingFang SC;
						color: #333333;
						line-height: 20px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.coupon-text2 {
						width: 100%;
						height: 18px;
						float: right;
						font-size: 13px;
						font-family: PingFang SC;
						color: #EB5F2F;
						line-height: 18px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>