QianNiaoShop/pagesS/goods/valetbuy.vue

<template>
	<view class="content">
		<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" v-else>
					<view class="good" v-for="goodsitem in xmlist">
						<image :src="goodsitem.image" mode="" class="good-img"></image>
						<view class="good-info">
							<view class="good-name clamp2">
								{{goodsitem.name}}
							</view>
							<view class="good-price">
								{{goodsitem.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 class="mjly">
				<view class="ly-left">
					优惠价格
				</view>
				<input type="digit" placeholder="请输入优惠价格" class="ly-right" v-model="yhjg">
			</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" v-if="choose_store">
				<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" v-if="choose_store.area">
						{{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>
		<!-- 门店列表弹出层 -->
		

		<!-- 预约 -->
		<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">{{(all_price*1-yhjg*1).toFixed(2)}}</text>
			</view>
			<view class="tj-btn" :class="{'canpay': canpay}" @click="canpay?submitt(): ''">
				提交
			</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" v-if="storeitem.area">
								{{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>
	</view>
</template>

<script>
	import its from '@/components/its-calendar/its-calendar.vue'
	export default {
		components: {
			its
		},
		data() {
			return {
				pay_price: '',
				yhjg: 0,
				canpay: false,
				choose_time: '',
				choose_time_detail: '',
				store: {
					page: 1,
					page_size: 10,
					list: [],
					loadingType: 'loadmore',
					loaded: false,
				},
				choose_store: {},
				yg: {
					page: 1,
					page_size: 10,
					list: [],
					loadingType: 'loadmore',
					loaded: false,
				},
				choose_yg: {
					
				},
				timed: false, //是否选择完时间
				store_choose_show: false, //门店选择弹出层开关
				xmlist: [],
				mjly: '',
				customerData: {}
			}
		},
		computed: {
			all_price() {
				let price = 0
				if(this.xmlist.length > 0) {
					this.xmlist.forEach(item => {
						price +=item.price*1
					})
					
				}
				return price.toFixed(2)	
				
			},
			project_id() {
				let dd = ''
				if(this.xmlist.length > 0) {
					this.xmlist.forEach(item => {
						dd = dd + item.id + ','
					})
					
				}
				return dd
			}
		},
		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 != '' && this.choose_time) {
					console.log(this.choose_time, 'this.choose_time ')
					this.getYgList('reload')
				}
			},
			choose_time(newval, oldval) {
				console.log('时间改变')
				this.getYgList('reload')
				
			},
			choose_yg(newval, oldval) {
				if (newval.staffName && newval.uid != 0) {
					console.log('调查choose_yg')
					this.getYgYyTimeArea()
				} else {
					if (newval.staffName == '随机指派' && this.choose_time) {
						this.canpay = true
					}
				}
		
			},
			choose_time_detail(newval, oldval) {
				console.log(this.choose_yg,'this.choose_yg+++++++++');
				if (this.choose_store && this.choose_yg.uid && this.choose_yg.uid != 0) {
					console.log('调查choose_time_detail')
					this.getYgYyTimeArea()
				}
			}
		},
		onLoad() {

		},
		onShow() {
			console.log(this.customerData)
			this.getStoreList()
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			submitt() {
				
				let data = {
					"uid": this.choose_yg.uid, //店员userCenterId
					"customer_id": this.customerData.id,
					"project": this.project_id.slice(0,this.project_id.length-1),
					"discount_price": this.yhjg,
					"time": this.choose_time + ' ' + this.choose_time_detail,
					"remarks": this.mjly,
				}
				this.canpay = false
				this.$u.api.addYyItem(data).then(({data})=> {
					this.$u.toast('创建成功!');
					setTimeout(() => {
						uni.navigateBack()
					}, 1500);
				}).catch(err => {
					this.canpay = true
				})
			},
			cannot(title = '该员工不在工作时间') {
				 // this.$u.toast(title);
				this.canpay = true
			},
			//获取员工列表
			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'
				})
			},
			chooseGoods() {
				uni.navigateTo({
					url: '/pagesS/goods/yygoods'
				})
			},
			getTime(e) {
				console.log(e);
				this.timed = true
				this.choose_time = e.time.split(' ')[0]
				this.choose_time_detail = e.time.split(' ')[1]
			
			},
			// 打开门店选择
			openStoreChoose() {
				console.log('打开门店选择')
				this.store_choose_show = true
			},
			//选择门店
			chooseStore(item) {
				this.choose_store = item
				this.close()
			},
			// 获取门店列表
			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,
				}).then(({
					data
				}) => {
					console.log(data, '门店列表')
					item.list = item.list.concat(data)
					console.log(data,'列表+++++++');
					if (item.page == 1) {
						this.choose_store = item.list[0]
						console.log(this.choose_store,'this.choose_store')
					}
					item.page++
					if (item.page_size == data.length) {
						item.loadingType = 'loadmore'
					} else {
						item.loadingType = 'nomore'
					}
			
				})
			},
			close() {
				this.store_choose_show = false
			},
			open() {
			},
			choosYg(item) {
				this.choose_yg = item
			},
			//判断是否能预约员工
			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[0], worktime[1])
					if (choose_time * 1 >= worktime[0] * 1 && choose_time * 1 <= worktime[1] * 1) {
						this.canpay = true
					} else {
						that.cannot()
					}
					if (data.reserved.length > 0) {
						for (let i = 0; i < data.reserved.length; i++) {
							if (that.choose_time_detail == data.reserved[i]) {
								console.log('该员工已有预约')
								that.cannot('该员工已有预约')
								break
							}
						}
					}
			
				})
			},
		}
	}
</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;
			
		}
	}
	.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: 2px solid #262261;
		}
	}
	.canpay {
		background-color: #d84840 !important;
	}
</style>