GuangYuYuan-app/pages/index/details.vue

<template>
	<view class="details">
		<view class="content_top">
			
		
		<view class="detail-content">
			<view class="show_img">
				<image :src="$globalData.publicUrl+ detail.cCover" />
			</view>
			<view class="content">
				<view class="name">
					<view class="names"> <text></text> {{detail.cTitle}}</view>
					<view class="price">
						<!-- <image src="../../static/identify/time.png" />{{detail.nMinute}}分钟 -->
						￥<text>{{price}}</text> 
					</view>
				</view>
				<view class="time">{{detail.nMinute}}分钟/超{{detail.nSaleNumber}}人选择</view>
				<view class="state">
					<!-- <view class="state1">适用说明</view> -->
					<view class="state2">性别限制：不限</view>
					<view class="state2">
						适用人群：{{detail.cSyrq}}
					</view>
					<view class="state2">
						功能作用：{{detail.cLdList}}
					</view>
				</view>
				<view class="service">
					服务履约保障
				</view>
				<view class="three">
					<view>
						<image src="../../static/identify/approve.png" mode=""></image>实名认证
					</view>
					<view>
						<image src="../../static/identify/approve.png" mode="">爽约包赔
					</view>
					<view @click="goApprove(details.id)">
						<image src="../../static/identify/approve.png" mode="">商户认证
							<!-- <image src="../../static/identify/more.png" mode=""></image> -->
					</view>
				</view>
			</view>

<!-- 			<view class="bottom">
				<view class="recommend">
					<view class="option" :class="current == 0?'cleck_recommend':''" @click="current =0">
						项目介绍
					</view>
					<view class="option" :class="current == 1?'cleck_recommend':''" @click="current =1">
						推荐商户
					</view>
				</view>
				<view class="cDetail" style="width: 100%;" v-if="current == 0">
					<image :src="$globalData.publicUrl + detail.cDetail" style="" />
				</view>
				<view class="recommend_js" v-else>
					<view class="item" v-for="(item,index) in jsList" :key="index" @click.stop="godetails(item.id)">
						<view class="itemL">
							<view class="hot" v-if="item.nB3 == 1">
								<image src="https://moxiaoxiang.com/h5/static/xg.gif" mode="" />
							</view>
							<view class="img">
								<image :src="$globalData.publicUrl + item.cPortrait" />
							</view>
							<view class="new" v-if="item.nB2 == 1">
								new
							</view>
							<view class="status">{{item.nStatus ===1?'服务中' :'可服务'}}</view>
						</view>
						<view class="itemR">
							<view class="title">
								<view class="name">{{item.cName}}</view>
								<view class="address">
									<image src="../../static/identify/address.png" mode="" />{{item.distance}}km
								</view>
							</view>
							<view class="mark">
								<view class="center">
									<image src="../../static/identify/star.png" mode="" />{{item.nStar}}
								</view>
								<view class="right">
									已服务 <text>{{item.nNum}}</text> 单
								</view>
								<view class="right">
									<text>{{item.number}}</text> 收藏
								</view>
							</view>
							<view class="num">
								<view class="free_box">
								</view>

								<view class="btn" @click.stop="bookNow(item)">
									<text>立即预约</text>
								</view>
							</view>
						</view>
					</view>
					<view class="more" @click="more">
						更多
					</view>
				</view>
			</view> -->

		</view>
		</view>
		<!-- <view class="reserved">
			<view @click="choose">选择商户</view>
		</view> -->
		<view class="dialog" v-if="dialogShow">
			<view class="back" @click="dialogShow = false">

			</view>
			<!-- <view class="closebox" @click="closeDialog"></view> -->
			<view class="dialog_content">
				<view class="box">
					<view class="lists" v-for="(item,index) in projects" :index="index">
						<view class="imgs">
							<image :src="$globalData.publicUrl + item.cCover" mode="" />
						</view>
						<view class="right">
							<view class="list_title">
								<view class="title">{{item.cTitle}}</view>
								<view class="time">{{item.nMinute}}分钟</view>
							</view>
							<view class="price">
								<view class="money">￥{{item.dPrice}}</view>
								<view class="counter">
									<view @click="decrease(item,index)">-</view>
									<text>{{item.number}}</text>
									<view @click="increase(index)">＋</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="now" @click="nowYuyue"><text>立即预约</text></view>

			</view>

		</view>
		<view class="cDetail">
			
			<image :src="$globalData.publicUrl+ detail.cDetail" ></image>
		</view>
		<view class="reserved">
			<view @click="nowYuyue()">立即预约</view>
		</view>
	</view>
</template>

<script>
	import {
		projectDetails,
		engineerDetails,
		addList,
		addOrder,
		engineer
	} from '../../api/index'
	export default {
		data() {
			return {
				detail: [],
				price: 0,
				cDetail: '',
				current: 0,
				jsList: [],
				deptName: '',
				distance: '',
				projects: [],
				details: '',
				dialogShow: false,
				isAddress:false,
				longitude: '',
				latitude:'',
				cid:'',
				recommendTechnicianList:[]
			}
		},
		methods: {
			//选择商户
			bookNow(item) {
				this.distance = item.distance
				if (!uni.getStorageSync('access-token')) {
					uni.showModal({
						title: '请先登录！',
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/my/my'
								})
							} else if (res.cancel) {
								return
							}
						}
					})
					return
				} else if (item.nStatus === 1) {
					uni.showToast({
						title: '该商户不可预约！',
						icon: 'none'
					})
					return
				}
				this.projects = []
				var id = {
					id: item.id
				}
				engineerDetails(id).then(res => {
					res.data.data.projects.forEach(element => {
						element.number = 0
					});
					this.details = res.data.data,
						this.projects = res.data.data.projects,
						this.dialogShow = true
				})
			},
			// 选择项目加一
			decrease(item, index) {
				if (item.number == 0) {
					return
				}
				let list = this.projects
				this.projects[index].number--
				// this.projects = list
			},
			//选择项目减一
			increase(index) {
				this.projects[index].number++
				//   let list = this.projects
				// console.log(list[index])
				//   // list[index].number++; 
				//     this.projects=list 
			},
			// 预约
			nowYuyue() {
				uni.setStorageSync('projectId',this.cid)
				uni.switchTab({
					url: '/pages/identify/identify',
				})
				
				
				
				
			// 	const allCountsZero = this.projects.every(item => item.number === 0);
			// 	if (!uni.getStorageSync('access-token')) {
			// 		uni.showModal({
			// 			title: '请先登录！',
			// 		})
			// 		return
			// 	} else if (allCountsZero) {
			// 		uni.showToast({
			// 			title: '请先选择项目！',
			// 			duration: 1000,
			// 			icon: 'none',
			// 		})
			// 		return
			// 	} else if (!this.isAddress) {
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '你还没有添加地址哦！是否去添加？',
			// 			confirmText: '确定', // 确定按钮的文字
			// 			cancelText: '取消', // 取消按钮的文字
			// 			success(res) {
			// 				if (res.confirm) {
			// 					setTimeout(() => {
			// 						uni.navigateTo({
			// 							url: '../my/add_address'
			// 						})
			// 					}, 100)
			// 					// 用户点击确定按钮后的操作
			// 				} else if (res.cancel) {}
			// 			}
			// 		})
			// 		return
			// 	} else {
			// 		// console.log(this.data.projects,"project")
			// 		var list = []
			// 		this.projects.forEach(element => {
			// 			if (element.number > 0) {
			// 				element.sum = element.number * element.dPrice
			// 				list.push(element)
			// 			}
			// 		});
			// 		var total = 0
			// 		for (let i = 0; i < list.length; i++) {
			// 			total += list[i].sum;
			// 		}
			// 		var data = {
			// 			cJsId: this.details.id,
			// 			cGoods: list,
			// 			cOpenId: uni.getStorageSync('wx_copenid'),
			// 			dTotalMoney: total,
			// 			distance: this.distance
			// 		}
			// 		addOrder(data).then(res => {
			// 			if (res.data.code == 200) {
			// 				uni.navigateTo({
			// 					url: '/pages/identify/pay_order?orderNo=' + res.data.data.orderNo
			// 					// url:'/pages/identify/pay_order'
			// 				})
			// 				this.dialogShow = true
			// 			} else {
			// 				uni.showModal({
			// 					title: res.data.msg,
			// 				})
			// 			}
			// 		})
			// 	}
			
			},
			more(){
				uni.setStorageSync('projectId', this.cid)
				uni.switchTab({
					url:'/pages/identify/identify'
				})
			},
			//商户详情
			godetails(id) {
				if (!uni.getStorageSync('access-token')) {
					uni.showModal({
						title: '请先登录！',
						success: (res) => {
							if (res.confirm) {
								this.list = []
								uni.switchTab({
									url: '/pages/my/my'
								})
							} else if (res.cancel) {
								return
							}

						}
					})
					return
				} else {
					uni.navigateTo({
						url: '../../pages/identify/details?id=' + id
					})
				}

			},
			choose() {
				uni.switchTab({
					url: '../identify/identify',
				})
			},
			getAddress() {
				var that = this
				var data = {
					openId: uni.getStorageSync('wx_copenid'),
				}
				addList(data).then(res => {
					if (res.data.data[0]) {
						this.isAddress = true
					} else {
						this.isAddress = false
					}
				}).catch(err => {})
			},
			getDetails(cid, deptName) {
				const cId = {
					cId: cid,
					deptName: deptName,
					nStatus:0,
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude'),
				}
				projectDetails(cId).then(res => {
					if (res.data.code == 200) {
						this.detail = res.data.data,
						this.recommendTechnicianList = res.data.data.recommendTechnicianList
						
						// res.data.data.jsList.length>3? this.jsList = res.data.data.jsList.slice(0,3):this.jsList = res.data.data.jsList
						this.price = res.data.data.dPrice.toFixed(2)
						this.getJsList()
					}
				})
			},
			getJsList(){
				let data = {
					recommendTechnicianList: this.recommendTechnicianList,
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude'),
					projectId:this.cid
					
				}
				engineer(data).then(res=>{
					res.data.data.records.length>3? this.jsList = res.data.data.records.slice(0,3):this.jsList = res.data.data.records
				})
			},
			getlocaltion() {
				uni.getLocation({
					type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，可以设置为 gcj02 返回可用于 `uni.openLocation` 的坐标
					success: function(res) {
						this.latitude = res.latitude
						this.longitude = res.longitude
						// this.current = 0
						// this.city = res.address.city
					},
				});
			},
		},
		onLoad: function(options) {
			this.cid = options.cid
			this.getDetails(options.cid, options.deptName)
			// this.getDetails(09493ab2baf94e03b4c014a76b801cc4)
		},
		onShow() {
			this.getAddress()
			this.getlocaltion()
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
		.content_top{
			width: 100%;
			height: auto;
			background: #F7FFFF;
			padding: 30rpx 32rpx;
				box-sizing: border-box;
		}
	}
	.detail-content {
		width: 100%;
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #E5FDFB;
		// display: flex;
		// flex-direction: column;
		.show_img {
			width: 638rpx;
			height: 638rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			image {
				width: 638rpx;
				height: 638rpx;
			}
		}

		.recommend_js {
			flex: 1;
			background: linear-gradient(to bottom right, rgb(246, 249, 242), rgb(210, 241, 243));
			padding: 10rpx;
			box-sizing: border-box;
			.more{
				width: 100px;
				height: 30px;
				background: #35c99d;
				border-radius: 10rpx;
				text-align: center;
				line-height: 30px;
				margin: 0 auto;
				color:#fff;
			}
			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				// border: 1px solid rgb(212, 211, 211);
				margin-bottom: 20rpx;
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				box-sizing: border-box;
				.itemL {
					position: relative;
					width: 150rpx;
					height: 220rpx;
					margin-right: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					.hot {
						position: absolute;
						width: 150px;
						height: 150px;
						top: -36px;
						left: -36px;
						// display: flex;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.status {
						font-size: 24rpx;
						position: absolute;
						bottom: 0px;
						background-color: #59b7b6;
						color: #fff;
						padding: 3px 10px;
						border-radius: 20px;
						// margin: 10px 0px;
					}
					.new {
						position: absolute;
						top: -20rpx;
						left: -16rpx;
						padding: 0rpx 5rpx;
						background-color: #f9792d;
						opacity: .8;
						border-radius: 10rpx;
						color: #f3f3f3;
					}
				}
				.itemR {
					flex: 1;
					height: 220rpx;
					.title {
						display: flex;
						justify-content: space-between;
						.name {
							width: 30%;
							font-size: 30rpx;
							font-weight: bold;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.address {
							// width: 40%;
							font-size: 26rpx;
							color: #585858;
							image {
								width: 30rpx;
								height: 30rpx;
								vertical-align: text-bottom;
							}
						}
						.status {
							color: #fff;
							background-color: #0ec891;
							font-size: 18rpx;
							padding: 5rpx 15rpx;
							border-radius: 30px;
							height: 30rpx;
							line-height: 30rpx;
						}
					}
					.mark {
						display: flex;
						justify-content: space-between;
						margin: 20px 0;
						.right {
							text {
								color: #f9792d;
								margin-right: 5px;
							}
						}
						.center {
							display: flex;
							align-items: center;
							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 5px;
							}
						}
					}
					.num {
						display: flex;
						align-items: center;
						justify-content: space-between;
						// padding-left: 30rpx;
						color: #9e9e9e;
						.free_box {
							font-size: 24rpx;
							color: #59b7b6;
						}
						image {
							width: 30rpx;
							height: 30rpx;
						}
						.btn {
							background-color: #59b7b6;
							padding: 10px;
							border-radius: 3px 10px 10px 10px;
						}
					}
					.items {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 0;
						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
							vertical-align: text-top;
						}
						view {
							display: flex;
							align-items: center;
						}
					}
					.btn {
						font-size: 26rpx;
						background-color: #2cb8d4;
						border-radius: 30px;
						color: #fff;
						text-align: center;
						padding: 10rpx 0;
					}
				}
			}
		}
		.slogan {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 22rpx;
			padding: 20rpx 0;
			view {
				&:before {
					content: '';
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					background-color: #2cb8d4;
					border-radius: 10px;
					margin-right: 5px;
				}
			}
		}
		.content {
			// padding: 0 30rpx;
			.name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 8rpx;
				.names {
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					text{
						display: inline-block;
						width: 6rpx;
						height: 34rpx;
						background: #20CBC2;
						margin-right: 24rpx;
					}
				}
				.price {
					font-size: 24rpx;
					color: #F53E54;
					font-weight: bold;
					display: flex;
					align-items: center;
					text{
						font-weight: 600;
						font-size: 44rpx;
						color: #F53E54;
						line-height: 24rpx;
					}
				}
			}
			.time {
				font-size: 24rpx;
				color: #45BBB5;
				margin-top: 8rpx;
				padding-left: 30rpx;
				margin-bottom: 20rpx;
			}

			.state {
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 12rpx 0px rgba(88,209,187,0.1);
				border-radius: 16rpx ;
				padding: 20rpx;
				box-sizing: border-box;
				.state1 {
					font-size: 32rpx;
					// font-weight: bold;
				}
				.state2 {
					font-size: 28rpx;
					color: #2F3437;
					line-height: 33rpx;
				}
				.state2:nth-child(2){
					margin: 16rpx 0px;
				}
			}
			.service {
				font-size: 28rpx;
				color: #2F3437;
				line-height: 33rpx;
				margin: 20rpx 0;
			}
			
			.three {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 28rpx;
				color: #2F3437;
				padding: 20rpx 0;
				background-color: #ffffff;
				box-sizing: border-box;
				border-radius: 16rpx;
			
				view {
					display: flex;
					align-items: center;
			
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
		.bottom {
			flex: 1;
			width: 100vw;
			display: flex;
			flex-direction: column;
			margin-top: 32rpx;
			.recommend {
				width: 100%;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.option {
					font-size: 26rpx;
					color: #333;
				}
				.cleck_recommend {
					color: #2cb8d4;
				}
			}
		}
	}
	
	.cDetail {
		width: 100vw;
		margin-bottom: 130rpx;
		image {
			width: 100%;
			height: 2600rpx;
			// object-fit: cover;
		}
	}
	.reserved {
		width: 100%;
		height: 116rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx;
		text-align: center;
		box-shadow: 0 0 30rpx #ece9e9;
		background-color: #fff;
		box-sizing: border-box;
	
		view {
			background: linear-gradient( 90deg, #1AD7CE 0%, #21C9C1 100%);
			color: #fff;
			width: 100%;
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 106rpx;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
		transition: transform 0.3s ease-out;
		display: flex;
		flex-direction: column;
		.back {
			flex: 1;
		}
		.closebox {
			height: calc(50vh - 60rpx);
			width: 100%;
		}
		.dialog_content {
			background-color: #fff;
			position: absolute;
			bottom: 0;
			width: calc(100% - 60rpx);
			height: 50vh;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 30rpx;
			background-color: #f3f3f3;
			// padding-bottom: 100rpx;
			display: flex;
			flex-direction: column;
			.box {
				height: 90%;
				overflow-y: auto;
				.lists {
					// height: 90%;
					background-color: #fff;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 10rpx;
					border-radius: 10rpx;
					// overflow-y: auto;
					.imgs {
						width: 240rpx;
						height: 160rpx;
						border-radius: 20rpx;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.right {
						flex: 1;
						padding-left: 30rpx;
						.list_title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.title {
								width: 280rpx;
								font-size: 34rpx;
								font-weight: bold;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.time {
								font-size: 24rpx;
								color: #45BBB5;
							}
						}
						.price {
							padding-top: 50rpx;
							display: flex;
							justify-content: space-between;
							.money {
								font-size: 42rpx;
								color: #e61b1b;
								font-weight: bold;
							}
							.counter {
								display: flex;
								view {
									width: 60rpx;
									height: 60rpx;
									line-height: 60rpx;
									background-color: #f7f8fa;
									text-align: center;
									border-radius: 60rpx;
									font-size: 50rpx;
								}
								text {
									display: block;
									width: 100rpx;
									text-align: center;
									line-height: 60rpx;
									font-size: 30rpx
								}
							}
						}
					}
				}
			}
			.now {
				height: 10%;
				left: 0;
				width: 100%;
				text-align: center;
				height: 100rpx;
				padding-top: 10rpx;
				text {
					display: inline-block;
					height: 80rpx;
					line-height: 80rpx;
					width: 90%;
					background-color: #2cb8d4;
					color: #fff;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>