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="" 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>
		<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>
		<!-- 指派 -->
		<scroll-view scroll-x="true" class="zp-wrap">
			<view class="zp-item" v-for="item in 10">
				<image src="" mode="" class="zp-logo"></image>
				<view class="zp-name">随机指派</view>
			</view>
		</scroll-view>
		<!-- 预约 -->
			<its-calendar :sta_num="8" :end_num="23" :int_num="30" @getTime="getTime"></its-calendar>
		<!-- 结算 -->
		<!-- 填充 -->
		<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 {
				xmlist: [],
				mjly: '',
				customerData: {}
			}
		},
		onLoad() {

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

		},
		onReady() {

		},
		methods: {
			chooseGoods() {
				uni.navigateTo({
					url: '/pagesS/goods/yygoods'
				})
				this.xmlist = [{
					name: '线雕提拉术',
					id: 1,
					price: '1100'
				},
				{
					name: '减肥大计划',
					id: 1,
					price: '1200'
				}]
			},
			getTime(e) {
				console.log(e);
			}
		}
	}
</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;
		}
	}
</style>