fanxing-shop/pages/order/order_confirm.vue

<!-- 订单确认页 -->
<template>
	<view class="order_confirm" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
		<view class="all">
			<view class="title">您选择的{{ setData.packageName }}</view>
			<view class="menu">
				<view class="amounts flex jcsb">
					<view class="amontl">
						<view class="now flex aife">
							<text class="dw fs40">¥</text>
							<text class="num">{{ setData.currentPrice }}</text>
							<text class="unit">/条</text>
						</view>
						<view class="past flex aic">
							<text class="past_text fs28">原价</text>
							<text class="past_num fs32">¥{{ setData.originalPrice }}/条</text>
						</view>
					</view>
					<view class="amontr">
						<text class="num">{{ strip }}</text>
						<text class="unit">条</text>
					</view>
				</view>
				<view class="choose">
					<view v-for="(item, index) in setData.selectContents" :key="index"
						class="choose_item-box flex aic jcsb">
						<view class="choose_item flex aic">
							<image :src="guoxuanImg"></image>
							<text>{{ item.configKey }}可选 {{ item.count || 0 }} 个</text>
						</view>
						<view v-if="index == 0" class="choose_item-more flex aic" @click="toDetail">
							<text>查看更多</text>
							<image :src="moreBImg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="choosion">
				<view class="name">选择内容</view>
				<view class="content">
					<view v-for="(item, index) in orderContents" :key="index" class="content_item flex aic jcsb"
						@click="chooseScene(item, index)">
						<view class="aic flex">
							<view class="item_label">{{ item.name }}</view>
							<view v-if="item.scenes.length > 0" class="item_num">{{ item.scenes.join('; ') }}</view>
							<view v-else class="item_text">{{ setData.packageName }}可选 {{ item.count || 0 }} 个{{
                  item.name
                }}
							</view>
						</view>
						<image class="more_img" :src="moreImg"></image>
					</view>
				</view>
			</view>
			<view class="choosion">
				<view class="name">支付方式</view>
				<view class="content">
					<view class="content_item flex aic jcsb">
						<view class="aic flex">
							<image class="icon_img" :src="weixinImg"></image>
							<view class="item_name">微信支付</view>
						</view>
						<image class="icon_img" :src="guoyuanImg"></image>
					</view>
				</view>
			</view>
			<view class="choosion">
				<view class="name">收件方式</view>
				<view class="content">
					<view class="content_item flex aic jcsb">
						<view class="aic flex">
							<view class="item_label">收件人</view>
							<u--input v-model="formData.recipientName" placeholder="输入收件人姓名" fontSize="14"
								:customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
						</view>
					</view>
					<view class="content_item flex aic jcsb">
						<view class="aic flex">
							<view class="item_label">联系电话</view>
							<u--input v-model="formData.contactPhone" placeholder="输入手机号码" fontSize="14"
								:customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
						</view>
					</view>
					<view class="content_item flex aic jcsb">
						<view class="aic flex">
							<view class="item_label">邮箱地址</view>
							<u--input v-model="formData.email" placeholder="输入邮箱地址" fontSize="14"
								:customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
						</view>
					</view>
				</view>
			</view>
			<view class="choosion">
				<view class="name">需求相关</view>
				<view class="content">
					<view class="content_item flex aic jcsb">
						<view class="flex">
							<view class="item_label">以往案例</view>
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="5">
								<view class="item_updata">
									<image :src="upImg"></image>
									<text>上传案例</text>
								</view>
							</u-upload>
						</view>
					</view>
					<view class="content_item flex aic jcsb">
						<view class="flex w100">
							<view class="item_label pt18">拍摄需求</view>
							<u--textarea v-model="formData.shootingRequirements" placeholder="简单描述您的拍摄需求" count
								maxlength="200"></u--textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="agree">
				<text>点击“确认支付”，即代表您已阅读并同意</text>
				<text class="agree_text">《用户购买协议》</text>
			</view>
		</view>
		<view class="btom">
			<view class="sum">
				<text>应付款：</text>
				<text class="money">
					<text class="unit">¥</text>
					{{ numMultiR }}
				</text>
			</view>
			<view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="submitOrder">立即购买</view>
		</view>
		<u-popup ref="uPicker" mode="bottom" :loading="loading" :show="isSelect" round="12" @close="close" @open="open"
			:customStyle="{ height: '100px' }">
			<view class="popup_content safe-area-inset-bottom">
				<view class="checkbox">
					<u-checkbox-group v-model="checked" placement="column" iconPlacement="right"
						@change="checkboxChange">
						<u-checkbox v-for="(item, index) in configData" :key="index" :label="item" :name="item"
							:customStyle="{ marginBottom: '24px' }" :disabled="isDisabled(item)"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="btns flex aic jcsb">
					<view class="cancel" @click="close">取消</view>
					<view class="confirm" @click="confirm">确认</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getPackageById,
		getConfigById,
		upload,
		save
	} from '@/apis/index';
	import {
		baseUrl
	} from "@/config"
	import {
		numMulti
	} from '@/utils/calculate'
	import wx from 'jweixin-module';
	import {
		getWxBuyConfig,
		submitOrder
	} from "../../apis";

	export default {
		components: {},
		data() {
			return {
				type: '',
				fileList1: [],
				count: '', //可选数量
				strip: '', //条数
				packageId: '', //套餐id
				setData: {}, // 套餐数据
				configData: [], //选择内容数据
				loading: false,
				isSelect: false,
				name: '',
				phone: '',
				checked: [], //多选
				orderContents: [], //选中后的内容
				configKey: '', //内容标题
				bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
				guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
				guoyuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuanyuan.png',
				moreBImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_black.png',
				moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more%403x.png',
				weixinImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_weixinzhifu.png',
				upImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_up.png',
				buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
				formData: {
					recipientName: '',
					contactPhone: '',
					email: '',
					shootingRequirements: '',
				}
			};
		},
		computed: {
			numMultiR() {
				return numMulti(Number(this.setData.currentPrice), Number(this.strip))
			}
		},
		watch: {},
		onLoad(options) {
			if (options.id) this.packageId = options.id
			if (options.strip) this.strip = options.strip
			if (options.type) this.type = options.type
			this.getPackage()
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pages/index/detail?type=' + this.type
				})
			},
			// 判断当前选项是否应该禁用
			isDisabled(value) {
				// 已选中6个且当前选项未被选中时禁用
				return this.checked.length >= this.count &&
					!this.checked.includes(value)
			},

			// 选择变化时的处理
			checkboxChange(values) {
				if (values.length > this.count) {
					// 如果超过6个，自动截断并提示
					this.checked = values.slice(0, thsi.count);
					uni.showToast({
						title: '最多只能选择6个选项',
						icon: 'none'
					});
				}
			},

			// 获取套餐内容
			getPackage() {
				getPackageById({
					packageId: this.packageId
				}).then(res => {
					this.setData = res
					this.orderContents = res.selectContents.map(item => {
						return {
							name: item.configKey,
							configId: item.configId,
							count: item.count,
							scenes: []
						}
					})
					console.log('orderContents', this.orderContents);
				})
			},
			open() {
				console.log('打开');
			},
			// 选择内容
			chooseScene(item, index) {
				if (!item.count) {
					uni.showToast({
						title: '无可选内容',
						icon: 'none'
					});
					return
				}
				this.loading = true
				getConfigById({
					packageId: this.packageId,
					configId: item.configId
				}).then(res => {
					this.loading = false
					this.count = item.count
					console.log(this.checked, this.count, '数量');
					this.configData = res
					this.configKey = item.name
					this.orderContents.map(itm => {
						if (itm.name === this.configKey && itm.scenes.length !== 0) {
							this.checked = itm.scenes
						}
					})
					this.isSelect = true

				})
			},
			confirm() {
				if (this.checked.length < this.count) {
					uni.showToast({
						title: '至少选择' + this.count + '个选项',
						icon: 'none',
					});
					return
				}
				this.orderContents.map(item => {
					if (item.name === this.configKey) {
						item.scenes = this.checked
					}
				})
				this.checked = []
				this.isSelect = false

			},
			close() {
				this.isSelect = false
				this.checked = []
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式

				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign({
							// status: "success",
							// message: "",
							url: result,
						})
					);
					fileListLen++;
				}
				console.log(this.fileList1, 'fileList1');
			},
			uploadFilePromise(url) {
				console.log(url, upload, 'url');
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + '/sys/oss/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							setTimeout(() => {
								resolve(data.data.src);
							}, 1000);
						},
						fail: (err) => {
							console.log(err, 'err');
							reject(err);
						},
					});
				});
			},

			// 校验选择内容
			checkContents() {

				for (const item of this.orderContents) {
					if (!item.scenes || item.scenes.length === 0) {
						uni.showToast({
							title: `请选择${item.name}`,
							icon: 'none',
							duration: 2000
						});
						return false; // 校验失败
					}
				}
				return true; // 校验成功
			},

			// 校验表单
			checkForm() {
				if (this.formData.recipientName === '' || this.formData.contactPhone === '' || this.formData.email ===
					'') {
					if (!/^1[3-9]\d{9}$/.test(this.formData.contactPhone)) {
							uni.showToast({
								title: '请填写正确的手机号码',
								icon: 'none',
							});
							return
						}
						if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.formData.email)) {
								uni.showToast({
									title: '请填写正确的邮箱',
									icon: 'none',
								});
								return
							}
							uni.showToast({
								title: '请填写完整收件方式',
								icon: 'none',
							});
							return false
						}
						return true; // 校验成功

					},

					invokePayment(rePayInfo) {
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									appId: rePayInfo.appid,
									timeStamp: rePayInfo.timeStamp,
									nonceStr: rePayInfo.nonceStr,
									package: rePayInfo.packages,
									signType: rePayInfo.signType,
									paySign: rePayInfo.sign
								},
								(res) => {
									if (res.err_msg === 'get_brand_wcpay_request:ok') {
										uni.navigateTo({
											url: '/pages/order/success?orderId=' + rePayInfo.orderId
										})
									} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
										uni.showToast({
											title: '用户取消了支付',
                                            icon: 'none'
										})
									} else {
										console.error('支付失败', res.err_msg);
										// 处理支付失败的逻辑
									}
								}
							);
						},

						// 提交订单
						submitOrder() {
							if (!this.checkForm()) {
								return; // 如果校验失败，停止提交
							}
							
							if (!this.checkContents()) {
								return; // 如果校验失败，停止提交
							}

							let params = {
								packageId: Number(this.packageId),
								quantity: this.strip,
								unitPrice: this.setData.currentPrice,
								totalAmount: this.numMultiR,
								packageName: this.setData.packageName,
								...this.formData,
								caseFileUrls: this.fileList1.map(item => {
									return item.url
								}),
								orderContents: this.orderContents,
							}

							submitOrder({
								...params
							}).then((res) => {
								// 检查是否在微信浏览器中
								if (typeof WeixinJSBridge === 'undefined') {
									if (document.addEventListener) {
										document.addEventListener('WeixinJSBridgeReady', () => {
											this.invokePayment(res);
										}, false);
									} else if (document.attachEvent) {
										document.attachEvent('WeixinJSBridgeReady', () => {
											this.invokePayment(res);
										});
										document.attachEvent('onWeixinJSBridgeReady', () => {
											this.invokePayment(res);
										});
									}
								} else {
									this.invokePayment(res);
								}
							})
						}


				},
				created() {

					},
					mounted() {

					},
			}
</script>
<style lang="scss">
	uni-toast {
		z-index: 99999 !important;
	}
</style>
<style lang='scss' scoped>
	.order_confirm {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: top;

		.all {
			padding: 0 24rpx;
			flex: 1;
			overflow: auto;

			.title {
				font-weight: 500;
				font-size: 36rpx;
				color: #0D121A;
				margin: 48rpx 0 40rpx;
				text-align: center;
			}

			.menu {
				width: 100%;
				background: linear-gradient(180deg, #E4F8FF 0%, #FFFFFF 100%);
				border-radius: 24rpx;
				border: 2rpx solid #FFFFFF;
				padding: 64rpx 48rpx;

				.amounts {
					.now {
						font-size: 32rpx;
						color: #0D121A;

						.dw {
							line-height: 40rpx;
						}

						.limit {
							margin-left: 24rpx;
							width: 72rpx;
							height: 40rpx;
							background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
							border-radius: 8rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #0D121A;
							text-align: center;
							line-height: 40rpx;
						}
					}

					.num {
						font-size: 72rpx;
						line-height: 56rpx;
						font-weight: bold;
					}

					.unit {
						margin-left: 8px;
					}

					.past {
						color: #0D121A;
						margin-top: 34rpx;

						.past_text {
							margin-right: 8rpx;
						}
					}
				}

				.choose {
					margin-top: 64rpx;

					.choose_item-box {
						margin-top: 16rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 24rpx;
						}

						text {
							color: #0D121A;
							font-size: 28rpx;
						}
					}

					.choose_item-more {
						text {
							font-size: 28rpx;
							color: #0D121A;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin-left: 12rpx;
						}
					}

					.choose_item-box:nth-child(1) {
						margin-top: 0;
					}
				}
			}

			.choosion {
				.name {
					font-weight: 400;
					font-size: 28rpx;
					color: #9EA3B1;
					margin: 32rpx 0 20rpx 32rpx;
				}

				.content {
					background-color: #FFFFFF;
					border-radius: 24rpx;

					.content_item {
						padding: 36rpx 32rpx;

						.item_updata {
							width: 168rpx;
							height: 168rpx;
							background: #F4F5F9;
							border-radius: 16rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							// margin-left: 48rpx;

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

							text {
								color: #9EA3B1;
								font-weight: 400;
								font-size: 24rpx;
							}
						}

						.item_label {
							font-weight: 500;
							font-size: 28rpx;
							color: #0D121A;
							min-width: 150rpx;
							white-space: nowrap;
						}

						.item_num {
							font-size: 28rpx;
							margin-left: 48rpx;

						}

						.item_text {
							font-size: 28rpx;
							color: #9EA3B1;
							margin-left: 48rpx;
						}

						.item_name {
							font-size: 28rpx;
							color: #0D121A;
							margin-left: 16rpx;
						}

						.more_img {
							width: 32rpx;
							height: 32rpx;
							flex-shrink: 0;
						}

						.icon_img {
							width: 48rpx;
							height: 48rpx;
						}

						input {
							height: 0;
						}
					}

					.content_item_input {}
				}
			}

			.agree {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #9EA3B1;
				padding: 48rpx 0 32rpx;

				.agree_text {
					color: #0D121A;
				}
			}
		}

		.btom {
			background: #FFFFFF;
			flex-shrink: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 24rpx;
			padding-bottom: calc(16rpx + constant(safe-area-inset-bottom)) !important;
			padding-bottom: calc(16rpx + env(safe-area-inset-bottom)) !important;

			.sum {
				font-weight: 400;
				font-size: 30rpx;
				color: #0D121A;

				.money {
					font-size: 56rpx;
					color: #0D121A;
				}

				.unit {
					font-size: 40rpx;
				}
			}

			.btn {
				width: 312rpx;
				height: 84rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #0D121A;
				background-size: 100% 100% !important;

			}
		}

		.pt18 {
			padding-top: 18rpx;
		}

		.popup_content {
			padding: 32rpx;
			max-height: 1000rpx;
			display: flex;
			flex-direction: column;

			.checkbox {
				flex: 1;
				overflow: auto;
			}

			.btns {
				flex-shrink: 1;
			}
		}

		.btns {
			padding: 0 0 16rpx;
			color: #0D121A;

			.cancel {
				width: 45%;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: #9EA3B1 1px solid;
			}

			.confirm {
				width: 45%;
				height: 84rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
			}
		}

		.u-popup {
			flex: 0;
			z-index: 999;
		}
	}
</style>