junzitang/pagesT/order/createOrderT.vue

<template>
	<view class="content page-contanier" :class="['qn-page-' + theme]">
		<view class="" style="background-color: #4076d6;height: 100rpx;">

		</view>
		<view class="good-info-wrap">
			<view class="good-list">
				<!-- <view class="empty" v-if="xmlist.length == 0" @click="chooseGoods">
					选择项目
				</view> -->
				<!-- 商品详情 -->
				<view class="good-wrap">
					<view class="good">
						<image :src="item_detail.image" mode="" class="good-img"></image>
						<view class="good-info">
							<view class="good-name clamp2">
								{{item_detail.name}}
							</view>
							<view class="good-price">
								{{item_detail.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mjly">
				<view class="ly-left">
					买家留言
				</view>
				<input type="text" placeholder="请输入留言内容" class="ly-right" v-model="mjly">
			</view>

		</view>
		<!-- <view class="mj-info" @click="goPage('/pagesT/customer/selCustomer')">
			<view class="mjly" style="border-bottom: 1rpx solid #f7f8fa;">
				<view class="ly-left">
					客户姓名
				</view>
				<input type="text" placeholder="请输入留言内容" class="ly-right" v-model="customerData.name" v-if="customerData.name" disabled>
				<image src="../../static/img/downright.png" mode="" v-else></image>
			</view>
			<view class="mjly" >
				<view class="ly-left">
					联系方式
				</view>
				<input type="number" placeholder="请填写联系方式" class="ly-right" v-model="customerData.mobile" @click.stop="">
			</view>
		</view> -->
		<!-- 选择门店 -->
		<view class="sc-md">
			<view class="sc-tip">
				选择门店
			</view>
			<view class="store-info" @click="openStoreChoose">
				<image :src="choose_store.logo" mode="" class="store-logo"></image>
				<view class="info">
					<view class="store-name">
						{{choose_store.name}}
					</view>
					<view class="store-address">
						{{choose_store.area.provinceName + choose_store.area.cityName + choose_store.area.districtName +  choose_store.area.address}}
					</view>
				</view>
				<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
			</view>
		</view>
		<!-- 门店列表弹出层 -->
		<u-popup v-model="store_choose_show" mode="bottom" @close="close" @open="open" border-radius="14">
			<view>
				<scroll-view scroll-y="true" class="store-list" @scrolltolower="getStoreList()">
					<view class="store-info " :class="{'choose-stroe': storeitem.id == choose_store.id}"
						v-for="(storeitem,storeindex) in store.list" @click="chooseStore(storeitem)">
						<image :src="storeitem.logo" mode="" class="store-logo"></image>
						<view class="info">
							<view class="store-name">
								{{storeitem.name}}
							</view>
							<view class="store-address">
								{{storeitem.area.provinceName + storeitem.area.cityName + storeitem.area.districtName +  storeitem.area.address}}
							</view>
						</view>
						<view class="float_right"></text></view>
					</view>
					<u-loadmore :status="store.loadingType" />
				</scroll-view>
			</view>

		</u-popup>
		<!-- 预约 -->
		<its-calendar :sta_num="start_time" :end_num="end_time" :int_num="30" @getTime="getTime"></its-calendar>
		<!-- 指派 -->
		<scroll-view scroll-x="true" class="zp-wrap" v-if="timed">
			<view class="zp-item" v-for="ygitem in yg.list" @click="choosYg(ygitem)"
				:class="{'choose': ygitem.uid == choose_yg.uid}">
				<image :src="ygitem.avatar" mode="" class="zp-logo"></image>
				<view class="zp-name">{{ygitem.staffName}}</view>
			</view>
		</scroll-view>
		<!-- 结算 -->
		<!-- 填充 -->
		<view class="" style="height: 110rpx;"></view>
		<view class="tj-dd">
			<view class="">
				<text style="font-size: 26rpx;color: #999;">实付</text>
				<text style="color: #CE372E;font-size: 44rpx;font-weight: bold;padding-left: 10rpx;"
					class="rmb">{{order_detail.pay_price || '0'}}</text>
				<!-- <text style="font-size: 22rpx;color: #333333;font-weight: bold;">(包含预约费￥3元）</text> -->
			</view>
			<view class="tj-btn" @click="canpay?selPayFun():''" :class="{'canpay': canpay}">
				提交
			</view>
			<!-- <view class="tj-btn" @click="selPayFun()" :class="{'canpay': canpay}">
				提交
			</view> -->
		</view>
		<u-popup v-model="payPop" mode="bottom" :border-radius="12">
			<view class="pay-pop-view">
				<view class="pay-sel-title clearfix">
					<text class="float_left">付款方式</text>
					<text class="float_right ibonfont ibonguanbi" @click="closePayPop"></text>
				</view>
				<view class="pay-ul">
					<view class="pay-li" @click="pay_type = 1">
						<text class="ibonfont ibonhuodaofukuan"></text>
						<view class="pay-name clearfix"
							:class="[order_detail.pay_price*1 > Number(order_detail.memberBalance) ? 'balance-pay-name' : '']">
							<view class="float_left">
								<text>余额</text>
								<text class="balace-num">（余额:¥{{ Number(order_detail.memberBalance) }}）</text>
							</view>
							<text class="float_right ibonfont  ibonxuanze1" v-if="pay_type == 1"></text>
							<text class="float_right ibonfont  ibonxuanze1" style="color: #CCCCCC;" v-else></text>
						</view>
					</view>
					<view class="pay-li" @click="pay_type = 2" v-if="order_detail.pay_price*1 > 0">
						<text class="ibonfont ibonweixinzhifu"></text>
						<view class="pay-name clearfix ">
							<view class="float_left">
								<text>微信</text>
							</view>
							<text class="float_right ibonfont ibonxuanze1" v-if="pay_type == 2"></text>
							<text class="float_right ibonfont ibonxuanze1" style="color: #CCCCCC;" v-else></text>
						</view>
					</view>
				</view>
				<view class="pay-btn primary-btn" @click="submit">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import its from '@/components/its-calendar/its-calendar.vue'
	export default {
		components: {
			its
		},
		data() {
			return {
				payPop: false,
				canpay: false,
				good_id: '',
				item_detail: {},
				mjly: '',
				customerData: {},
				store: {
					page: 1,
					page_size: 10,
					list: [],
					loadingType: 'loadmore',
					loaded: false,
				},
				yg: {
					page: 1,
					page_size: 10,
					list: [],
					loadingType: 'loadmore',
					loaded: false,
				},
				choose_yg: {

				},
				choose_store: {},
				choose_time: '',
				choose_time_detail: '',
				order_detail: {}, //计算结果
				timed: false, //是否选择完时间
				store_choose_show: false, //门店选择弹出层开关
				start_time: 0,
				end_time: 24,
				yyshow: true,
				pay_type: 1, //1余额2微信3支付宝
			}
		},
		computed: {
			// start_time() {
			// 	let start = this.store.state
			// },
			// end_time() {

			// }
		},
		watch: {
			choose_store(newval, oldval) {
				this.choose_yg = {}
				if (newval.openTime.isAllDay != 1) {
					let start = newval.openTime.start.split(':')
					let end = newval.openTime.end.split(':')
					if (start[1] > 30) {
						this.start_time = start[0] * 1 + 1
					} else {
						this.start_time = start[0] * 1
					}
					this.end_time = end[0] * 1
					console.log(this.start_time)
				} else {
					this.start_time = 0
					this.end_time = 24
					console.log(this.start_time)
				}
				if (this.choose_time != '') {
					console.log(this.choose_time, 'this.choose_time ')
					this.getYgList('reload')
				}
			},
			choose_time(newval, oldval) {
				this.getYgList('reload')
			},
			choose_yg(newval, oldval) {
				if (newval.staffName && newval.uid != 0) {
					this.getYgYyTimeArea()
				} else {
					if (newval.staffName == '随机指派' && this.choose_time) {
						this.canpay = true
					}
				}

			},
			choose_time_detail(newval, oldval) {
				if (this.choose_store && this.choose_yg.uid != 0) {
					
					this.getYgYyTimeArea()
				}
			}
		},
		onLoad(opt) {
			this.good_id = opt.id
			this.getItemDetail()
			this.calculation()
			console.log(this.$store.state.locationObj, 'this.$store.state.locationObj')
			this.getStoreList()
		},
		onShow() {
			console.log(this.customerData)
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			close() {
				this.store_choose_show = false
			},
			open() {

			},
			// 打开门店选择
			openStoreChoose() {
				console.log('打开门店选择')
				this.store_choose_show = true
			},
			//选择门店
			chooseStore(item) {
				this.choose_store = item
				this.close()
			},
			getTime(e) {
				console.log(e);
				this.timed = true
				this.choose_time = e.time.split(' ')[0]
				this.choose_time_detail = e.time.split(' ')[1]

			},
			//计算价格
			calculation() {
				let that = this
				that.$u.api.calculation({
					id: that.good_id
				}).then(({
					data
				}) => {
					console.log(data, 'price')
					this.order_detail = data
				}).catch(err => {

				})
			},
			getItemDetail() {
				this.$u.api.getItemDetail({
					id: this.good_id
				}).then(({
					data
				}) => {
					this.item_detail = data
				}).catch(err => {

				})
			},
			// 获取门店列表
			getStoreList() {
				console.log('获取门店列表')
				let item = this.store
				if (item.loadingType == 'loading' || item.loadingType == 'nomore') {
					return
				}
				item.loadingType = 'loading'
				this.$u.api.getStoreList({
					page: item.page,
					pageSize: item.page_size,
					longitude: this.$store.state.locationObj.longitude,
					latitude: this.$store.state.locationObj.latitude
				}).then(({
					data
				}) => {
					console.log(data, '门店列表')
					item.list = item.list.concat(data)
					if (item.page == 1) {
						this.choose_store = item.list[0]
					}
					item.page++
					if (item.page_size == data.length) {
						item.loadingType = 'loadmore'
					} else {
						item.loadingType = 'nomore'
					}

				})
			},
			//获取员工列表
			getYgList(type) {
				let item = this.yg
				if (type == 'reload') {
					item.list = []
					item.loadingType = 'loadmore'
				}
				if (item.loadingType == 'loading' || item.loadingType == 'nomore') {
					return
				}
				item.loadingType = 'loading'
				this.$u.api.getTimeYgList({
					time: this.choose_time,
					'SHOP-TOKEN': this.choose_store.token
				}).then(({
					data
				}) => {
					let arr = [{
						uid: 0,
						staffName: '随机指派'
					}]
					item.list = arr.concat(data)

					item.loadingType = 'nomore'
				})
			},
			cannot(title = '该员工不在工作时间') {
				uni.showToast({
					title: title,
					icon: 'none'
				})
				this.canpay = false
			},
			//判断是否能预约员工
			getYgYyTimeArea() {
				let that = this
				that.$u.api.getYgYyTimeArea({
					time: that.choose_time,
					uid: that.choose_yg.uid
				}).then(({
					data
				}) => {
					console.log()
					let choose_time = that.choose_time_detail.replace(/\:/g, '')
					let worktime = [data.time_slot[0][0].replace(/\:/g, ''), data.time_slot[0][1].replace(/\:/g,
						'')]
					// 判断员工是否在工作时间
					console.log(choose_time, worktime)
					if (choose_time * 1 >= worktime[0] * 1 && choose_time * 1 <= worktime[1] * 1) {
						this.canpay = true
					} else {
						console.log('该员工不在工作时间')
						that.cannot()
					}
					if (data.reserved.length > 0) {
						for (let i = 0; i < data.reserved.length; i++) {
							console.log(i)
							if (that.choose_time_detail == data.reserved[i]) {
								that.cannot('该员工已有预约')
								break
							}
						}
					}

				})
			},
			choosYg(item) {
				this.choose_yg = item
				// //查看员工是否有空
				// if (this.choose_yg.uid != 0) {
				// 	this.getYgYyTimeArea()
				// }
			},
			selPayFun() {
				// if (!this.is_notExpress) {
				// 	return;
				// }
				this.payPop = true;
			},
			// 创建项目订单
			createItemOrder() {
				let that = this
				that.$u.api.createItemOrder({
					"order_id": that.order_detail.order_id,
					"time": that.choose_time + ' ' + that.choose_time_detail, //预约时间
					"staff_id": that.choose_yg.uid, //0随机排员工 指定员工传入员工id
					"pay_type": 2, //1余额2微信3支付宝
					"source": 3, //微信8h5支付3小程序支付0app支付
					"remarks": that.mjly, //备注
					"SHOP-TOKEN": that.choose_store.token
				}).then(({
					data
				}) => {

				})
			},
			submit() {
				let that = this
				// 判断余额是否足够

				if (that.pay_type == 1 && (that.order_detail.pay_price * 1 > that.order_detail.memberBalance * 1)) {
					return this.$u.toast('抱歉，您的可用余额不足');
				}
				that.$u.api.createItemOrder({
					"order_id": that.order_detail.order_id,
					"time": that.choose_time + ' ' + that.choose_time_detail, //预约时间
					"staff_id": that.choose_yg.uid, //0随机排员工 指定员工传入员工id
					"pay_type": that.pay_type, //1余额2微信3支付宝
					"source": that.pay_type == 2 ? 3 : '',
					"remarks": that.mjly, //备注
					"SHOP-TOKEN": that.choose_store.token
				}).then(({
					data
				}) => {
					// 余额支付
					if (that.pay_type == 1) {
						console.log(data)
						if (data == '支付成功' || data.data == '支付成功') {
							that.payPop = false
							setTimeout(() => {
								uni.navigateTo({
									url: '/pagesT/money/paySuccess?price=' + that.order_detail
										.pay_price + '&isyy=1'
								})
							}, 200);
						}
					}
					// 微信支付
					if (that.pay_type == 2) {
						// data.data
						let payInfo = data.data
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payInfo.timeStamp, //当前时间
							nonceStr: payInfo.nonceStr, //随机字符串，长度在32一下
							package: payInfo.package, //统一单接口返回的prepay_id
							signType: payInfo.signType, //签名算法，目前支持MD5
							paySign: payInfo.paySign, //签名
							success: res => {
								// 订单审核，取消订单提醒
								that.payPop = false
								setTimeout(() => {
									uni.navigateTo({
										url: '/pagesT/money/paySuccess?price=' + that
											.order_detail.pay_price + '&isyy=1'
									})

								}, 200);
							},
							fail: async err => {
								that.payPop = false
								console.log('支付失败');
								await setTimeout(() => {
									uni.redirectTo({
										url: '/pagesT/order/orderT?state=0'
									});
								}, 100);
							}
						});
						// #endif
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.good-info-wrap {
		margin: -50rpx auto 20rpx;
		width: 712rpx;
		min-height: 285rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;

		.good-list {
			min-height: 177rpx;
			width: 100%;

			.good-wrap {
				min-height: 177rpx;

				.good {
					height: 177rpx;
					border-bottom: 1px solid #f7f8fa;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.good-info {
						height: 177rpx;
						width: 365rpx;
						padding: 25rpx 0 25rpx 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;

						.good-name {
							font-size: 26rpx;
							font-weight: 500;
							color: #333333;
						}

						.good-price {
							margin-top: 20rpx;
							font-size: 34rpx;
							font-weight: bold;
							color: #CE372E;

							&::before {
								content: '￥';
								font-size: 24rpx;
								color: #CE372E;
							}
						}
					}

					.good-img {
						width: 133rpx;
						height: 133rpx;
						border-radius: 10rpx;
						background-color: #eee;
					}
				}
			}

			.empty {
				// display: ;
				font-size: 28rpx;
				height: 177rpx;
				background-color: #ecf1f7;
				text-align: center;
				line-height: 177rpx;
				color: #4472bd;
				border-radius: 10rpx;
			}
		}

	}

	.mj-info {
		width: 712rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 20rpx auto;
		padding: 0 20rpx;
	}

	.mjly {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;

		.ly-left {
			font-weight: 500;
			color: #000;

		}

		.ly-right {
			width: 400rpx;
			text-align: right;
		}

		image {
			width: 15rpx;
			height: 28rpx;
		}
	}

	//指派
	.zp-wrap {
		margin-top: 20rpx;
		width: 750rpx;
		height: 216rpx;
		white-space: nowrap;



		.zp-item {
			display: inline-block;
			margin-right: 15rpx;
			padding-top: 34rpx;
			width: 172rpx;
			height: 216rpx;
			// background: #E02020;
			background-color: #fff;
			border-radius: 10rpx;

			.zp-logo {
				display: block;
				width: 106rpx;
				height: 106rpx;
				margin: auto;
				border-radius: 50%;
				background-color: #999999;
			}

			.zp-name {
				margin-top: 15rpx;
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.choose {
			background-color: #262261 !important;

			.zp-name {
				color: #fff !important;
			}

		}
	}

	.tj-dd {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;

		.tj-btn {
			width: 200rpx;
			height: 75rpx;
			line-height: 75rpx;
			color: #fff;
			background-color: #999;
			border-radius: 10rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;

		}

		.canpay {
			background-color: #d84840;
		}
	}

	.rmb {
		&::before {
			content: '￥';
			color: #CE372E;
			font-size: 30rpx;
		}
	}

	// 门店
	.sc-md {
		margin: 20rpx auto;
		width: 712rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.sc-tip {
			padding-left: 20rpx;
			line-height: 70rpx;
			width: 712rpx;
			height: 70rpx;
			background: #e9e8ef;
			border-radius: 10rpx 10rpx 0px 0px;
			font-size: 26rpx;
			font-weight: 500;
			color: #262261;
		}


	}

	.store-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 140rpx;
		padding: 0 30rpx 0 20rpx;

		.store-logo {
			width: 61rpx;
			height: 61rpx;
			background-color: #eee;
			border-radius: 50%;
		}

		.info {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 40rpx 0 20rpx;

			.store-name {
				font-size: 25rpx;
				font-weight: 500;
				color: #333333;
			}

			.store-address {
				margin-top: 15rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
			}
		}

	}

	.store-list {
		min-height: 280rpx;
		max-height: 450rpx;
		width: 750upx;
		padding-top: 1rpx;
		background-color: #fff;

		.store-info {
			width: 712rpx;
			margin: 20rpx auto;
			border: 1px solid #aaa;
			border-radius: 20rpx;
		}

		.choose-stroe {
			border: 1px solid #262261;
		}
	}

	.pay-pop-view {
		background-color: #ffffff;
		border-top-left-radius: 12upx;
		border-top-right-radius: 12upx;
		font-size: 28upx;

		.pay-sel-title {
			padding: 0 30upx;
			line-height: 88upx;
			font-weight: bold;
			font-size: 32upx;

			.ibonfont {
				color: #999;
				font-weight: 400;
			}
		}

		.pay-btn {
			height: 90upx;
			line-height: 90upx;
			color: #000;
			font-size: 32upx;
			text-align: center;
			background-color: #108ee9;
		}

		.pay-ul {
			.pay-li {
				line-height: 100upx;

				.ibonfont {
					padding-left: 30upx;
					font-size: 46upx;
					vertical-align: middle;
					margin-right: 24upx;
				}

				.ibonweixinzhifu {
					color: #04be02;
				}

				.ibonumidd17 {
					color: #108ee9;
				}

				.ibonhuodaofukuan {
					color: #f2b844;
				}

				.pay-name {
					width: 650upx;
					display: inline-block;
					padding-right: 30upx;
					vertical-align: middle;
					border-bottom: 1px solid #f5f5f5;

					.ibonxuanze1,
					.ibonweixuanze {
						margin-right: 0;
						padding-left: 0;
						font-size: 38upx;
					}

					.balace-num {
						font-size: 24rpx;
						color: #6c6c6c;
					}
				}

				.balance-pay-name {
					position: relative;
					padding-bottom: 20rpx;

					.balance-tip {
						position: absolute;
						font-size: 22rpx;
						line-height: 36rpx;
						bottom: 10rpx;
						left: 0;
					}
				}
			}
		}
	}
</style>