QianNiaoUser/pagesT/order/createOrderT.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">
					<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)">
				<image src="" mode="" class="zp-logo"></image>
				<view class="zp-name">随机指派</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">1000</text>
				<text style="font-size: 22rpx;color: #333333;font-weight: bold;">(包含预约费￥3元）</text>
			</view>
			<view class="tj-btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import its from '@/components/its-calendar/its-calendar.vue'
	export default {
		components: {
			its
		},
		data() {
			return {
				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: {},
				count_detail: {}, //计算结果
				timed: false, //是否选择完时间
				store_choose_show: false, //门店选择弹出层开关
				start_time: 0,
				end_time: 24,
				yyshow: true
			}
		},
		computed: {
			// start_time() {
			// 	let start = this.store.state
			// },
			// end_time() {

			// }
		},
		watch: {
			choose_store(newval, oldval) {
				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)
					return;
				}else {
					this.start_time = 0
					this.end_time = 24
					console.log(this.start_time)
					return;
				}
			},
			choose_time(newval, oldval) {
				this.getYgList('reload')
			},
			choose_yg(newval, oldval) {
				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]
				
			},
			//计算价格
			calculation() {
				let that = this
				that.$u.api.calculation({
					id: that.good_id
				}).then(({
					data
				}) => {
					console.log(data, 'price')
				}).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
				}).then(({data}) => {
					if(data != '当天未找到员工') {
						item.list = data
					}
					
					item.loadingType = 'nomore'
				})
			},
			//判断是否能预约员工
			getYgYyTimeArea() {
				this.$u.api.getYgYyTimeArea({
					time: this.choose_time,
					uid: this.choose_yg.id
				}).then(({data}) => {
					
				})
			}
		}
	}
</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 {
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.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: #d84840;
			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: 1px solid #262261;
		}
	}
</style>