chelvc-custom/src/pages/client/clientPackage/storeDetail.vue

<template>
	<view class="detail">
		<!-- 轮播图 -->
		<view class="carousel-map">
			<u-swiper :list="swiperList" previousMargin="0" nextMargin="100" circular :autoplay="false"
				bgColor="#ffffff" />
			<view class="carousel-item">
				<view class="mark">
					<view class="mark-item">{{ merchant.score }}分</view>
					<u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
				</view>
				<view class="good-item">近期有6266个购买者给了给好评</view>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="merchant-info">
			<view class="info-title">
				<view>{{ merchant.name }}</view>
				<text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
			</view>
			<view class="info-tag">商家信息</view>
			<view class="info-item">
				<view class="info-text">
					<view>营业时间：{{ merchant.opening }}</view>
					<view>电话号码：{{ merchant.mobile }}</view>
					<view>{{ merchant.address }}</view>
					<view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
				</view>
				<view class="info-icon">
					<view class="info-map">
						<u-icon name="map" size="20"></u-icon>
						<view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
					</view>
					<view class="info-map" @click="handlerMakeCall">
						<u-icon name="phone" size="20"></u-icon>
						<view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商家分类 -->
		<view class="categoryList">
			<u-tabs :list="categoryList"></u-tabs>
		</view>

		<view>
			<view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
				<!-- <image class="img" :src="
		      error || !loaded
		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
		        : goods.logo
		    " mode="scaleToFill" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"></image> -->
				<image class="img" src="@/static/logo.png"></image>
				<view class="listDetail">
					<view class="item-text">{{ item.name }}</view>
					<view class="item-flex">
						<view class="star">
							<u-rate :count="item.score" :size="14" />
							<text class="line">|</text>
							<text class="points">{{ item.score }}分</text>
						</view>
						<view>{{ item.score }}单</view>
					</view>
					<view class="list-item">
						<view class="list-price">
							<view class="item-l">
								券后价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
							</view>
							<view class="item-r">
								门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
							</view>
						</view>
						<view class="btn-box">
							<button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
							<button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
						</view>
					</view>
				</view>
			</view>

			<u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>

		<!-- 弹窗 -->
		<u-popup :show="reserve_show" @close="reserve_show = false" @open="open" round="20" mode="center">
			<view class="draw-box">
				<view class="draw-title"> 预约服务 </view>
				<view class="draw-item">
					<view class="item-text">时间</view>
					<view class="time-box" @click="handlerSelectTime" :class="template_time == '' ? 'time-text' : ''">
						{{ template_time == '' ? '请选择时间' : template_time }}
					</view>
				</view>
				<view class="draw-item">
					<view class="item-text">联系方式</view>
					<u--input placeholder="请输入联系方式" border="surround" type="number"
						v-model="addParams.mobile"></u--input>
				</view>

				<button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
			</view>
		</u-popup>

		<!-- 时间 -->
		<u-datetime-picker :show="time_show" :minDate="Number(new Date())" :formatter="formatter"
			v-model="addParams.appointTime" @change="handlerTimeChange" @confirm="time_show = false"
			@cancel="time_show = false" mode="datetime">
		</u-datetime-picker>
	</view>
</template>

<script>
	import { getSellsDetail, addReservation } from '@/api/client/business.js';
	import { getCurrentLocation,hotMerchant } from '@/api/client/home';
	export default {
		data() {
			return {
				merchant: {},
				goods: [],
				count: 5,
				value: 3,
				swiperList: [],
				categoryList: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '养车'
					},
					{
						id: 2,
						name: '维修'
					},
					{
						id: 2,
						name: '改装'
					},
					{
						id: 2,
						name: '补胎'
					},
					{
						id: 2,
						name: '其他'
					},
				],
				queryParams: {
					//请求参数
					id: null, //商家ID
					region: null, //地区编码
					longitude: null, //经度
					latitude: null, //纬度
				},
				template_value: '',
				time_show: false,
				reserve_show: false,
				value: '',
				addParams: {
					merchantId: '',
					mobile: '',
					appointTime: '',
				},
				template_time: '',
			};
		},
		onLoad(option) {
			this.queryParams.id = option.id;
			this.handlerInitLocation();
		},
		watch: {
			reserve_show(newValue) {
				if (!newValue) {
					this.addParams.mobile = '';
					this.addParams.appointTime = '';
					this.template_time = '';
				}
			},
		},
		methods: {
			// 获取当前经纬度
			handlerInitLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.queryParams.longitude = res.longitude;
						this.queryParams.latitude = res.latitude;
						let point = {
							latitude: res.latitude,
							longitude: res.longitude,
						};
						getCurrentLocation(point).then(rc => {
							this.queryParams.region = rc.data.id;
							this.handlerInitList();
						});
					},
					fail: rs => {
						uni.showToast({
							title: rs,
							icon: 'none',
						});
					},
				});
			},
			// 初始化列表
			handlerInitList() {
				getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
					this.merchant = res.data.merchant;
					this.goods = res.data.goods;
					this.swiperList = res.data.merchant.banners.map(h => h.url);
				});
				// 获取锚点
				hotMerchant(this.queryParams.id).then()
			},
			// 点击拨打电话
			handlerMakeCall() {
				uni.makePhoneCall({
					phoneNumber: this.merchant.mobile,
				});
			},

			// 点击跳转到商品详情
			handlerSkipGoodsDetail(item, index) {
				uni.navigateTo({
					url: `/pages/client/clientPackage/serviceDetail?id=${item.id}`,
				});
			},

			// 预约
			handlerService(item, index) {
				this.addParams.merchantId = item.id;
				this.reserve_show = true;
			},

			// 购买
			handlerSkipBuy(item, index) {
				this.$store.commit('order/GET_ORDER_LIST',item)
				uni.navigateTo({
					url: `/pages/client/clientPackage/uptickOrder?id=${item.id}`,
				});
			},

			// 点击选择时间
			handlerSelectTime() {
				this.time_show = true;
			},

			// 点击预约确定按钮
			handlerDrawConfirmBtn() {
				if (this.addParams.appointTime == '') {
					uni.showToast({
						title: '请选择时间',
						icon: 'none',
					});
					return;
				} else if (this.addParams.mobile == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none',
					});
					return;
				} else if (!/^1[34578]\d{9}$/.test(this.addParams.mobile)) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none',
					});
					return false;
				} else {
					addReservation(this.addParams.merchantId, this.addParams).then(res => {
						if (res.code == 200) {
							this.handlerInitList();
							this.reserve_show = false;
							uni.showToast({
								title: '预约成功',
								icon: 'success',
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
							return;
						}
					});
				}
			},

			formatter(type, value) {
				if (type === 'minute') {
					return `00`;
				}
				return value;
			},

			// 选择时间
			handlerTimeChange(e) {
				if (e) {
					this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
					this.template_time = this.addParams.appointTime;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.detail {
		min-height: 100vh;
		background-color: #efefef;
	}

	// 轮播图
	.carousel-map {
		background-color: #fff;
		padding: 0 20rpx;

		.carousel-item {
			height: 90rpx;
			display: flex;
			background-color: #fff7e0;
			border-radius: 0 0 10rpx 10rpx;

			.mark {
				background-color: #ff4b04;
				color: #fff;
				padding: 20rpx;
				border-radius: 0 0 0 10rpx;
				box-sizing: border-box;

				.mark-item {
					text-align: center;
				}
			}

			.good-item {
				font-size: 24rpx;
				color: #a39c85;
				line-height: 90rpx;
				margin-left: 40rpx;
			}
		}
	}

	// 商家信息
	.merchant-info {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.info-title {
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			margin: 20rpx 0;

			.info-mark {
				font-size: 12px;
				font-weight: normal;
				color: #999;
				margin: 20rpx 0 20rpx 30rpx;
			}
		}

		.info-tag {
			width: 140rpx;
			padding: 10rpx;
			text-align: center;
			border: 1px solid #5992bb;
			color: #5992bb;
			margin-bottom: 10rpx;
		}

		.info-item {
			display: flex;
			justify-content: space-between;

			.info-text {
				font-size: 28rpx;
				line-height: 58rpx;
				color: #212020;
				margin-left: 20rpx;

				.distance {
					font-size: 26rpx;
					color: #555252;
					font-weight: normal;
				}
			}

			.info-icon {
				display: flex;
				align-items: center;
			}

			.info-map {
				padding: 10rpx;
				font-size: 28rpx;
				margin-top: 120rpx;
			}
		}
	}

	.list {
		height: 220rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;

		.img {
			width: 140px;
			height: 100%;
			display: block;
			margin-right: 10rpx;
		}

		.listDetail {
			width: calc(100% - 160rpx);
		}

		.item-text {
			font-weight: bold;
			margin: 10rpx 0 10rpx;
			color: #333;
		}

		.item-flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin: 0 20rpx 10rpx 0;
			color: #0d0d0d66;

			.star {
				display: flex;

				.line {
					margin-left: 16rpx;
					margin-top: 5rpx;
					font-size: 22rpx;
				}

				.points {
					color: #ff4b04;
					font-size: 22rpx;
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}

		.list-item {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.list-price {
				.item-l {
					color: #e35240;
					font-weight: bold;
					font-size: 32rpx;

					span {
						font-size: 40rpx;
					}
				}

				.item-r {
					color: #a8a8a8;
					margin-top: 10rpx;

					span {
						text-decoration: line-through;
					}
				}
			}

			.btn-box {
				display: flex;
				margin-left: 30rpx;

				.btn {
					font-size: 28rpx;
					height: 70rpx;
				}

				.btn1 {
					border-radius: 40rpx 0 0 40rpx;
					border: 2rpx solid #ec5729;
					color: #ec5729;
					background-color: #fff;
				}

				.btn2 {
					color: #fff;
					background-color: #ec5729;
					border-radius: 0 40rpx 40rpx 0;
				}
			}
		}
	}

	.draw-box {
		width: 560rpx;
		padding: 20rpx;

		.draw-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 30rpx;
		}

		.draw-item {
			margin-bottom: 20rpx;

			.item-text {
				font-size: 28rpx;
				color: #000;
				padding-left: 20rpx;
			}

			.time-box {
				margin: 10rpx 20rpx;
			}
		}

		.draw-btn {
			width: 90%;
			background-color: #5992bb !important;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
		}
	}

	.time-text {
		color: #d4d6dc;
	}

	/* 分类 */

	.categoryList {
		background-color: #fff;
	}
</style>