dingdong-mall/pages/order/order-detail.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单确认</block>
		</cu-custom>
		<!-- 服务地址 -->
		<view v-if="formInfo.defaultAddress" class="bg-white">
			<view class="padding flex justify-between align-center" @click="showAddress2Choose">
				<view>
					<view class="flex justify-start align-center">
						<view class="text-gray margin-right-xs">{{formInfo.defaultAddress.countryName}}</view>
						<view class="text-gray margin-right-xs">{{formInfo.defaultAddress.provinceName}}</view>
						<view class="text-gray margin-right-xs">{{formInfo.defaultAddress.cityName}}</view>
					</view>
					<view class="text-lg margin-tb-sm">{{formInfo.defaultAddress.address}}</view>
					<view class="text-gray">
						<text class="margin-right">{{formInfo.defaultAddress.name}}</text>
						<text>{{formInfo.defaultAddress.phone}}</text>
					</view>
				</view>
				<view class="text-lg"><text class="text-bold text-gray cuIcon-right"></text></view>
			</view>
			<view class="cu-progress sm striped">
				<view class="bg-orange" style="width: 100%;"></view>
			</view>
		</view>
		<view v-else class="bg-white" @click="showAddress2Choose">
			<view class="flex justify-between align-center padding-lg">
				<view class="text-lg text-black">
					<text class="cuIcon-locationfill text-blue light"></text>
					选择服务地址
				</view>
				<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
			</view>
			<view class="cu-progress sm striped">
				<view class="bg-orange" style="width: 100%;"></view>
			</view>
		</view>
		<!-- 预约时间 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding" v-if="pickedProductList && pickedProductList[0].product[0].type == 1">
			<view class="flex justify-between">
				<text class="text-black">预约时间</text>
				<view class="flex justify-end align-center">
					<uni-datetime-picker @change="changeDoorTime" type="date">
						<view v-if="formInfo.doorTime">
							<text>{{formInfo.doorTime}}</text>
						</view>
						<view v-else class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
					</uni-datetime-picker>
					<picker class="margin-left-xs" v-if="formInfo.doorTime" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
						@change="timeRangeChange">
						<input class="radius-input time-picker" v-model="timeRange" disabled></input>
					</picker>
				</view>
			</view>
			<view class="text-sm text-gray margin-top-sm"><text
					class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
		</view>
		<!-- 选购的商品列表 -->
		<view class="margin-lr-sm margin-top-sm bg-white">
			<view class="solid-top" v-for="(item, index0) in pickedProductList" :key="index0">
				<view class="cu-bar">
					<view class="action bar-first-action">
						<text class="cuIcon-shopfill text-main-color"></text>
						{{item.name}}
						<view>
							<view class="cuIcon-right"></view>
						</view>
					</view>
				</view>
				<view class="margin-top-sm padding-lr">
					<product-picked :columnTitleArr="columnTitleArr" v-for="(product, index1) in item.product"
					:key="product.id"
						:product="product" :pickedList="product.pickedList">
					</product-picked>
				</view>
			</view>
			<!-- <view class="solid-bottom" v-for="(item, index) in pickedProductList">
				<product-picked :columnTitleArr="columnTitleArr" :product="item.product" :pickedList="item.pickedList">
				</product-picked>
			</view> -->
		</view>
		<!-- 支付方式 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<view class="flex justify-between align-center">
				<text class="text-black">支付方式</text>
				<radio-group @change="changePayWay">
					<label class="radio">
						<radio class="main-color" value="0" :checked="formInfo.payWay=='0'" />
						<text class="margin-left-xs">在线支付</text>
					</label>
					<template v-if="pickedProductList && pickedProductList[0].product[0].type == 1">
						<label class="radio margin-left">
							<radio class="main-color" value="1" :checked="formInfo.payWay=='1'" />
							<text class="margin-left-xs">上门到付</text>
						</label>
					</template>
					<template v-else>
						<label class="radio margin-left" v-if="pickedProductList && pickedProductList[0].product[0].expectDuration.indexOf('同城') > -1">
							<radio class="main-color" value="1" :checked="formInfo.payWay=='1'" />
							<text class="margin-left-xs">上门到付</text>
						</label>
					</template>
				</radio-group>
			</view>
		</view>
		<view class="margin-lr-sm margin-top-sm bg-white padding" v-if="pickedProductList && (pickedProductList[0].product[0].storeService || pickedProductList[0].product[0].installService) && formInfo.defaultAddress && serviceShop">
			<view class="text-black text-bold flex justify-between">
				<text>安装/服务/施工门店</text>
				<text @click="goChooseShop" v-if="orderType == 2 && hasDefaultServiceShop">更多></text>
			</view>
			<view class="flex-sub flex margin-top-sm" @click="openShopLocation(serviceShop)">
				<view style="width: 150rpx;height: 150rpx;margin-right:10px;">
					<image style="width: 100%;height: 100%;" :src="serviceShop.imageUrl" mode="aspectFill"></image>
				</view>
				<view class="flex-sub">
					<view class="text-bold" style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{serviceShop.shopName}}</view>
					<view class="padding-tb-xs" style="position: relative;">
						<view class='cu-tag round bg-orange light'>
							<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 1">到店服务</text>
							<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 2">到店+配送（服务）</text>
							<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 3">到店+上门（服务）</text>
						</view>
						<view class="margin-lr-sm" style="display: inline-block;" v-if="serviceShop.distance">
							<view class="cu-tag bg-red" style="padding: 0 2px;height: auto;">距离您</view>
							<text class="text-gray" style="vertical-align: middle;">{{serviceShop.distance}}</text>
						</view>
						<image src="/static/navigation.png" style="width: 50rpx;height: 50rpx;display: inline-block;position: absolute;top: 5px;right: -10px;"></image>
					</view>
					<view style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{serviceShop.provinceName + serviceShop.cityName + serviceShop.countryName + serviceShop.streetName + serviceShop.address}}</view>
					<view v-if="orderType == 2">
						<checkbox style="transform:scale(0.8);" class="main-color" :checked="formInfo.isDeliveryToStore === '1'" @click.stop="formInfo.isDeliveryToStore = formInfo.isDeliveryToStore == 1 ? '0' : '1';formInfo.payWay='0';"></checkbox>
						<text style="font-size: 24rpx;color: #0081ff;">发货到服务店<text style="font-size: 20rpx;color: gray;">(支付须选在线支付)</text></text>
					</view>
				</view>
			</view>
			<view class="text-orange" style="margin-top: 10px;" v-if="pickedProductList[0].product[0].installService != 2 && orderType == 2">
				注:如包安装商品与安装服务点距离太远，下单后与商家协商处理方式!
				未包安装商品可能需您另出服务费。请留意[商品信息]处标注是否包安装!
			</view>
			<view class="text-orange" style="margin-top: 10px;" v-else>
				注:你可点击更多查看或选择附近安装服务点，并可导航前往，安装服务费自行与服务点沟通。或在服务商城内相应店铺下单。
			</view>
		</view>
		<view class="margin-lr-sm margin-top-sm bg-white padding" v-if="!serviceShop && goodShop">
			<view class="text-black text-bold flex justify-between">
				<text>安装/服务/施工门店</text>
			</view>
			<view class="flex-sub flex margin-top-sm" @click="openShopLocation(goodShop)">
				<view style="width: 150rpx;height: 150rpx;margin-right:10px;">
					<image style="width: 100%;height: 100%;" :src="goodShop.imageUrl" mode="aspectFill"></image>
				</view>
				<view class="flex-sub">
					<view class="text-bold" style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{goodShop.shopName}}</view>
					<view class="padding-tb-xs" style="position: relative;">
						<view class='cu-tag round bg-orange light'>
							<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 1">到店服务</text>
							<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 2">到店+配送（服务）</text>
							<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 3">到店+上门（服务）</text>
						</view>
						<view class="margin-lr-sm" style="display: inline-block;" v-if="goodShop.distance">
							<view class="cu-tag bg-red" style="padding: 0 2px;height: auto;">距离您</view>
							<text class="text-gray" style="vertical-align: middle;">{{goodShop.distance}}</text>
						</view>
						<image src="/static/navigation.png" style="width: 50rpx;height: 50rpx;display: inline-block;position: absolute;top: 5px;right: -10px;"></image>
					</view>
					<view style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{goodShop.provinceName + goodShop.cityName + goodShop.countryName + goodShop.streetName + goodShop.address}}</view>
					<view v-if="orderType == 2">
						<checkbox style="transform:scale(0.8);" class="main-color" :checked="formInfo.isDeliveryToStore === '1'" @click.stop="formInfo.isDeliveryToStore = formInfo.isDeliveryToStore == 1 ? '0' : '1';formInfo.payWay='0';"></checkbox>
						<text style="font-size: 24rpx;color: #0081ff;">发货到服务店<text style="font-size: 20rpx;color: gray;">(支付须选在线支付)</text></text>
					</view>
				</view>
			</view>
			<view class="text-orange" style="margin-top: 10px;" v-if="pickedProductList[0].product[0].installService != 2 && orderType == 2">
				注:如包安装商品与安装服务点距离太远，下单后与商家协商处理方式!
				未包安装商品可能需您另出服务费。请留意[商品信息]处标注是否包安装!
			</view>
		</view>
		<template v-if="InsuranceList.length">
			<view class="margin-lr-sm margin-top-sm bg-white padding">
				<view class="text-black">
					<!-- insuranceAmount -->
					<text style="font-size: 40rpx;">保险</text> <text style="font-size: 26rpx;margin-left: 10upx;" v-if="chooseInsurance.insuranceAmount">核对服务费￥{{chooseInsurance.insuranceAmount}}(预付)，未出发上门可退!</text>
				</view>
				<view class="text-black" style="font-size: 26rpx;padding-top: 10upx;">本订单勾选全程保险，请平台核对本单家政公司的雇主雇员与订单关联者按下方保险购买并生效:</view>
				<radio-group @change="changeInsurance" style="width: 100%;">
					<label v-for="item in InsuranceList" :key="item.id" class="radio" style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 20upx 0;">
						<view>
							<radio class="main-color" :value="item.id" :checked="chooseInsurance.id == item.id" />
							<text class="margin-left-xs text-red">{{item.insuranceName}}</text>
						</view>
						<text class="text-main-color">条款查看</text>
					</label>
				</radio-group>
				<view style="text-align: right;padding: 10upx 0;">
					<view class="cu-tag light bg-blue radius" @click="chooseInsurance.id = null; chooseInsurance.insuranceAmount = 0;">清除保险</view>
				</view>
			</view>
		</template>
		
		<!-- 发票信息 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<view class="flex justify-between align-center">
				<!-- <text class="text-black">发票信息</text>
				<text class="text-sm text-bold cuIcon-right"></text> -->
				<view class="basis-df">
					<view class="text-black">是否需要发票</view>
					<view class="text-red text-sm">需开具发票请在下面备注发票信息</view>
				</view>
				<radio-group @change="changeIsNeedBill">
					<label class="radio">
						<radio class="main-color" value="0" :checked="formInfo.isNeedBill=='0'" />
						<text class="margin-left-xs">不需要</text>
					</label>
					<label class="radio margin-left">
						<radio class="main-color" value="1" :checked="formInfo.isNeedBill=='1'" />
						<text class="margin-left-xs">需要</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<text class="text-black">订单下单图片说明 (选填)</text>
			<view class="grid col-3 grid-square flex-sub margin-top-sm">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index"
					@tap="viewImage($event, imgList)" :data-url="item">
					<image :src="item" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="delImg($event, imgList)" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImgList(e, imgList)" v-if="imgList.length < 3">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<!-- 备注留言 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<text class="text-black">备注留言</text>
			<view class="margin-top uni-textarea">
				<textarea class="solid" maxlength="-1" @input="inputComments" placeholder="请填写备注" />
			</view>
		</view>
		<!-- 平台提醒 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding margin-bottom-with-bar">
			<view class="text-sm text-orange"><text
					class="cuIcon-roundcheck">为保障您的权益，请在平台内交易，师傅服务离开后发生损坏或退款以及售后质保，平台可为您追责！</text></view>
		</view>
		<!-- 底部操作栏 -->
		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
			<view class="action text-df left-grid">
				<text class="margin-left-lg">共计</text>
				<text class="margin-left-xs text-red text-price text-xl">{{totalPrice}}</text>
			</view>
			<view class="bg-main-color submit" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	import productPicked from '@/components/goods-card/product-picked.vue';
	import { wgs84ToGcj02 } from '@/common/js/locationUtils.js'

	export default {
		components: {
			productPicked
		},
		data() {
			return {
				columnTitleArr: ['购买型号', '购买数量'],
				pickedProductList: [],
				formInfo: {
					payWay: '0',
					isNeedBill: '0',
					comments: '',
					doorTime: null,
					defaultAddress: null,
					expectTimeStart: '',
					expectTimeEnd: '',
					orderImages: '',
					isDeliveryToStore: '0'
				},
				totalPrice: 0,
				timeRangeIndex: 0,
				timeRange: '',
				timeRangeList: [],
				InsuranceList: [],
				chooseInsurance: {id: null, insuranceAmount: 0},
				imgList: [],
				hasDefaultServiceShop: false,
				serviceShop: null,
				// 商品上架维护的店铺
				goodShop: null,
				orderType: null
			}
		},
		onLoad(options) {
			let params = JSON.parse(decodeURIComponent(options.params));
			this.loadData(params);
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData(params) {
				this.loadDefaultAddress();
				// this.pickedProductList = await this.$api.data('pickedProductList');
				this.pickedProductList = params.pickedProductList;
				console.log(params);
				this.InsuranceList = params.pickedProductList[0].insuranceManagers || []
				if(this.InsuranceList.length) {
					this.chooseInsurance.id = this.InsuranceList[0].id;
					this.chooseInsurance.insuranceAmount = this.InsuranceList[0].insuranceAmount;
				}
				
				this.orderType = params.pickedProductList[0].product[0].type
				
				this.loadTotalPrice();
				this.timeRangeList = this.$globalData.timeRangeList;
				this.timeRange = this.timeRangeList[0];
			},
			async loadDefaultAddress() {
				let res = await this.$request.getAddressList({
					customerId: this.$request.getCurUserInfo().customerId,
					isDefault: 1
				});
				// if (res && res.data &&res.data.length) {
				// 	this.formInfo.defaultAddress = res.data[0];
				// }
				if (res && res.data &&res.data.length) {
					const defaultAdd = res.data.filter(i => i.isDefault === 1)
					this.formInfo.defaultAddress = defaultAdd.length ? defaultAdd[0] : res.data[0];
					this.getDefaultShop(this.formInfo.defaultAddress)
				}
			},
			loadTotalPrice() {
				// 计算totalprice
				this.pickedProductList.forEach((obj) => {
					this.totalPrice = Math.round((this.totalPrice + Number(obj.totalMoney)) * 100) / 100;
				})
			},
			bindEvent() {
				uni.$on(this.$globalFun.CHOOSE_ADDRESS, this.chooseAddress);
				uni.$on('chooseShop', this.chooseShop)
			},
			offBindEvent() {
				uni.$off(this.$globalFun.CHOOSE_ADDRESS);
				uni.$off('chooseShop');
			},
			chooseShop(shopInfo) {
				this.serviceShop = shopInfo;
			},
			changePayWay(e) {
				this.formInfo.payWay = e.detail.value;
				if(this.formInfo.payWay === '1') {
					this.formInfo.isDeliveryToStore = '0'
				}
			},
			changeIsNeedBill(e) {
				this.formInfo.isNeedBill = e.detail.value;
			},
			changeInsurance(e) {
				if(e.detail.value) {
					const current = this.InsuranceList.find(i => i.id == e.detail.value)
					this.chooseInsurance.id = current.id;
					this.chooseInsurance.insuranceAmount = current.insuranceAmount;
				} else {
					this.chooseInsurance.id = null;
					this.chooseInsurance.insuranceAmount = 0;
				}
			},
			openShopLocation(item) {
				// const gcj02Coord = wgs84ToGcj02(item.shop.longitude, item.shop.latitude)
				// const gcj02Coord = wgs84ToGcj02(102.80154676649306, 24.969456922743056)
				// const gcj02Coord = [102.82868680950929, 24.864792838337802]
				const gcj02Coord = [item.longitude, item.latitude]
				wx.openLocation({
				  latitude: gcj02Coord[1],
				  longitude: gcj02Coord[0],
				  scale: 18,
				  name: item.shopName,
				  address: `${item.provinceName}${item.cityName}${item.countryName}${item.streetName}${item.address}`
				})
			},
			inputComments(e) {
				this.formInfo.comments = e.detail.value
			},
			showAddress2Choose() {
				uni.navigateTo({
					url: '/pages/my/my-address?chooseMode=true'
				})
			},
			async goChooseShop() {
				const addressDetail = await this.$request.getByCustomerAddressId(
					this.formInfo.defaultAddress.customerAddressId
				);
				const addressFullObj = {
					provinceName: addressDetail.data.provinceName,
					cityName: addressDetail.data.cityName,
					countryName: addressDetail.data.countryName,
					streetName: addressDetail.data.streetName,
					address: addressDetail.data.address
				}
				uni.navigateTo({
					url: '/pages/order/choose-shop?goodsId='+this.pickedProductList[0].product[0].goodsId+'&addressFullObj='+JSON.stringify(addressFullObj)+'&shopId='+this.serviceShop.shopId
				})
			},
			chooseAddress(addressInfo) {
				this.formInfo.defaultAddress = addressInfo;
				this.getDefaultShop(addressInfo)
			},
			async getDefaultShop(addressInfo) {
				const params = {
					goodsId: this.pickedProductList[0].product[0].goodsId,
				}
				if(addressInfo.latitude && addressInfo.longitude) {
					params.latitude = addressInfo.latitude
					params.longitude = addressInfo.longitude
				} else {
					params.provinceName = addressInfo.provinceName
					params.cityName = addressInfo.cityName
					params.countryName = addressInfo.countryName
					params.streetName = addressInfo.streetName
					params.address = addressInfo.address
				}
				const productDetail = await this.$request.getGoodsDetail(params);
				console.log(productDetail);
				if(productDetail.storeService || productDetail.installService) {
					this.serviceShop = productDetail.serviceShop;
				}
				if(productDetail.serviceShop) {
					this.hasDefaultServiceShop = true
				}
				if(productDetail.shop) {
					this.goodShop = productDetail.shop
				}
			},
			changeDoorTime(value) {
				this.formInfo.doorTime = value;
				this.changeExpectTime();
			},
			timeRangeChange(e) {
				this.timeRangeIndex = e.detail.value;
				this.timeRange = this.timeRangeList[this.timeRangeIndex];
				this.changeExpectTime();
			},
			changeExpectTime() {
				let timeRangeSplit = this.$globalData.timeRangeSplit;
				let timeArr = this.timeRange.split(timeRangeSplit);
				this.formInfo.expectTimeStart = this.formInfo.doorTime + ' ' + timeArr[0] + ':00';
				this.formInfo.expectTimeEnd = this.formInfo.doorTime + ' ' + timeArr[1] + ':00';
			},
			parseGoodsList() {
				let goodsList = [];
				this.pickedProductList.forEach((shopInfo) => {
					shopInfo.product.forEach((productInfo) => {
						productInfo.pickedList.forEach((pickedSpecs) => {
							goodsList.push({
								goodsStandardId: pickedSpecs.id,
								num: pickedSpecs.pickedNum,
							})
						})
					})
				})
				return goodsList;
			},
			chooseImgList(e, imgList) {
				uni.chooseImage({
					count: 3 - imgList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						res.tempFilePaths.forEach((tmpUrl, index) => {
							this.$request.uploadFile(tmpUrl).then((url) => {
								imgList.push(url);
								if (index === res.tempFilePaths.length - 1) {
									uni.hideLoading();
								}
							});
						});
					}
				});
			},
			viewImage(e, imgList) {
				uni.previewImage({
					urls: imgList,
					current: e.currentTarget.dataset.url
				});
			},
			delImg(e, imgList) {
				uni.showModal({
					title: '',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			validForm() {
				if (!this.formInfo.defaultAddress) {
					uni.showToast({
						title: '请选择服务地址',
						icon: 'none'
					})
					return false;
				}
				if (this.pickedProductList[0].product[0].type === 1) {
					if (!this.formInfo.doorTime || !this.formInfo.expectTimeEnd || !this.formInfo.expectTimeStart) {
						uni.showToast({
							title: '请选择上门时间',
							icon: 'none'
						})
						return false;
					}
				} else {
					const toDay = new Date().toISOString().split('T')[0]
					this.formInfo.doorTime = toDay
					this.formInfo.expectTimeStart = toDay + ' 09:00:00'
					this.formInfo.expectTimeEnd = toDay + ' 09:30:00'
				}
				return true;
			},
			// 检测当前默认地址是否在服务区域之间
			checkDefaultAddressIfInclude() {
				if(!this.formInfo.defaultAddress) return true
				const allAreaId = []
				this.pickedProductList.forEach(item => {
					item.product.forEach(pro => {
						allAreaId.push(...pro.goodsAreaList.map(i => i.countryAreaId))
					})
				})
				// console.log(allAreaId, this.formInfo.defaultAddress);
				// const allAreaId = this.shopInfo.workerAreas.map(i => i.districtId)
				return allAreaId.includes(this.formInfo.defaultAddress.countryId)
			},
			submit() {
				let valid = this.validForm();
				if (!valid) {
					return;
				}
				if(!this.checkDefaultAddressIfInclude()) {
					uni.showModal({
						title: '提示',
						content: '所选服务的区域与您所填地址的区域不匹配!可能会无法服务，请核对!',
						cancelText: '查看',
						confirmText: '仍然下单',
						success: res => {
							if (res.confirm) {
								this.makeOrderOpration()
							}
						}
					})
				} else {
					this.makeOrderOpration()
				}
			},
			async makeOrderOpration() {
				
				let curUserInfo = this.$request.getCurUserInfo();
				let params = {
					customerId: curUserInfo.customerId,
					expectTimeStart: this.formInfo.expectTimeStart,
					expectTimeEnd: this.formInfo.expectTimeEnd,
					addressId: this.formInfo.defaultAddress.customerAddressId,
					payType: this.formInfo.payWay,
					remark: this.formInfo.comments,
					isNeedBill: this.formInfo.isNeedBill,
					goodsList: this.parseGoodsList(),
					goodsId: this.pickedProductList[0].product[0].goodsId,
					// 保险id
					insuranceId: this.chooseInsurance.id,
					orderImages: this.imgList.length ? this.imgList.join(',') : '',
					isDeliveryToStore: this.formInfo.isDeliveryToStore,
					serviceShopId: this.serviceShop ? this.serviceShop.shopId : null
				}
				console.log(params);	
				// 调用下单接口
				let res = await this.$request.placeOrder(params);
				if (res.code != 0) {
					return;
				} else if (this.formInfo.payWay == '1') {
					// 上门支付则不拉起微信支付窗口，直接跳转至提示导航页面
					uni.navigateTo({
						url: '/pages/order/pay-result?customTip=您选择上门到付款，师傅/服务人员上门后会让您付款，请配合！可从对方出示的系统二维码或你订单中的“付款”键支付！'
					})
					return;
				}
				
				try {
					// 获取微信支付所需参数
					let exPayParams = {
						code: this.$request.getCurUserInfo().openId,
						orderMasterCode: res.data.code
					}
					let wxPayParamRes = await this.$request.getWxPayParams(exPayParams);
					// 拉起微信支付窗口,支付成功跳转到支付成功页面
					let payInfo = JSON.parse(wxPayParamRes.data.expend.pay_info);
					let wxPayRes = await wx.requestPayment(payInfo);
					if (wxPayRes.errMsg === "requestPayment:ok") {
						uni.navigateTo({
							url: '/pages/order/pay-result?payResult=0'
						})
					} else {
						throw 'err';
					}
				} catch(e) {
					// 支付失败弹出提示并跳转到我的订单待支付页
					uni.navigateTo({
						url: '/pages/order/pay-result?payResult=1'
					})
				}
			}
		},
	}
</script>

<style scoped>
	.fixed-bottom-bar .text-df {
		font-size: 28rpx !important;
	}

	.fixed-bottom-bar .left-grid {
		width: 55% !important;
		text-align: left;
	}

	.bar-first-action {
		margin-left: unset !important;
		padding-left: 40rpx;
		font-size: 30rpx !important;
	}

	.cu-progress {
		display: inherit;
	}

	.cu-progress.sm {
		height: 12rpx;
	}
	
	.time-picker {
		width: 180rpx;
	}
</style>