yicangzongtai_app_240321/pages/convenienceService/shopDetails.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="shopCard">
			<view class="shop-info">
				<image :src="shop.logo" mode=""></image>
				<view class="shopNamebox">
					<view class="phone-btn" @click="goPhone(shop.customer_service_phone)">售后电话</view>
					<view class="shopName">{{ shop.shop_name }}</view>
					<view class="shopName_rate">
						<rate :value="shop.averageCopy"></rate> {{ shop.average }}分
					</view>
				</view>
			</view>
			<template v-if="false">
				<view class="shop_item mt30" style="alignItems: flex-start;">
					<image src="/static/convenienceService/location2.png" mode=""></image>
					<!-- <view>{{ shop.map_punctuation }}{{ shop.address }}></view> -->
					<!-- <view>{{shop.province_name+shop.city_name+shop.area_name+shop.community_name+shop.address}}</view> -->
					<view>{{shop.province_name+shop.city_name+shop.area_name+shop.address}}</view>
				</view>
				<view class="shop_item" style="alignItems: flex-start;">
					<text class="iconfont2">&#xe651;</text>
					<view>营业时间：{{ shop.business_hours }}{{ shop.time_quantum }}</view>
				</view>
			</template>
			<!-- <view class="shop_item mt30" style="alignItems: flex-start;">
        <text class="iconfont3 blueicon">&#xe609;</text>
        <view @click="goPhone(shop.customer_service_phone)">售后电话：{{ $mUtil.phoneChange(shop.customer_service_phone) }}</view>
      </view> -->

			<view class="searchBox">
				<image src="/static/convenienceService/search.png" mode=""></image>
				<input @click="searchClick" v-model="value" type="text" placeholder-style="color:#B3B3B3;fontSize:28rpx"
					placeholder="可搜索本店商品" />
			</view>
		</view>

		<view class="limitCard" v-if="currSeckill && currSeckill.length > 0">
			<view class="limitCard_top">
				<view class="limitCard_top_title">限时秒杀</view>
				<view class="limitCard_top_lab">{{currTime}}点场 剩余</view>
				<!-- <view class="limitCard_top_time">3天 17 : 26 : 35</view> -->
				<view class="limitCard_top_time">
					<uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#fff'" :splitorColor="'#fff'"
						:show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]" :minute="time2[2]" :second="time2[3]">
					</uni-countdown>
				</view>
			</view>
			<swiper class="swiper" indicator-color="#EDEDED" indicator-active-color="#3775F6" circular
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,key) in currSeckill" :key="key">
					<view class="listBox">
						<view class="listBox_item" v-for="itemSon in item"
							@click="goProductDetails('/pages/product/goods/seckillGoods?id=' + itemSon.id)"
							:key="item.id">
							<image v-if="itemSon && itemSon.cover" :src="itemSon.cover" mode=""></image>
							<!-- <view>¥<text>64.</text>20</view> -->
							<view class="">
								<rich-text :nodes="$mUtil.priceBigSmall(itemSon.min_price)"></rich-text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="groupCard" v-if="groupList && groupList.length > 0">
			<view class="group_title">
				<view class="group_title_l">拼团购</view>
				<view class="group_title_r"
					@click="goProductDetails('/pages/research/nearby/timeLimit?shopid='+shopId)">
					查看更多
					<text class="iconfont2">&#xe65f;</text>
				</view>
			</view>

			<view class="goodsListBox">
				<view class="goods_item" v-for="(item, index) in groupList" :key="index"
					@click="goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)">
					<view class="goods_item_img">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="goods_item_data">
						<view class="goods_item_data_title">{{ item.title }}</view>
						<view>
							<image class="autotrophyCls" src="/static/convenienceService/autotrophy.png" mode="">
							</image>
							<image class="originalCls" src="/static/convenienceService/original.png" mode="">
							</image>
						</view>

						<view class="goods_item_data_box">
							<view class="goods_item_data_box_l ">
								<!-- <view class="goods_item_data_box_l_price">
                  <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
                  <view>¥ {{ item.min_sale_price }}</view>
                </view> -->
								<view class="num">
									<view class="large">
										<rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
									</view>
									<view class="small">
										<text class="pintuanc6">¥ {{ item.min_sale_price }}</text>
									</view>
								</view>
								<view class="goods_item_data_box_l_person">
									{{ item.group_people_num }}人团，已拼<text>{{item.result_sale_num}}</text>件
								</view>
							</view>
							<view class="goods_item_data_box_r">去拼团</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="maxTab">
			<!-- <view :class="{active:maxTabIndex==0}" @click="switchAssembly(0)">精选服务</view> -->
			<view :class="{active:maxTabIndex==1}" @click="switchAssembly(1)">精选商品</view>
		</view>
		<!-- <view class="titleBox">精选服务</view> -->
		<view class="minTab">
			<view :class="{ active: activeIndex == i }" v-for="(v,i) in choice" :key="i"
				@click="commTypeChange(i, v.value, v.id)">{{v.name}}</view>
		</view>

		<view class="goodsListA" v-if="maxTabIndex==0">
			<view class="goodsListA_item" v-for="item in commGood" :key="item.id" v-if="commGood && commGood.length > 0"
				@click="goDetails(item.id)">
				<image :src="item.cover" mode=""></image>
				<view class="goodsListA_item_title">{{ item.title }}</view>
				<view class="goodsListA_item_pirce">
					<rich-text :nodes="$mUtil.priceBigSmall(item.sale_price||item.min_sale_price)"></rich-text>
					<view>¥ {{ item.market_price||item.min_market_price }}</view>
				</view>
				<view class="goodsListA_item_num">已售{{ item.result_sale_num }}件</view>
			</view>

			<!-- <view class="lookOther">
					查看更多113个服务
					<text class="iconfont2">&#xe65f;</text>
				</view> -->
		</view>

		<!-- <view class="titleBox">精选商品</view> -->
		<!-- <view class="minTab">
				<view class="active">推荐</view>
				<view>商超</view>
				<view>茶舍</view>
				<view>美容</view>
			</view> -->
		<!-- <view class="minTab">
				<view :class="{ active: activeIndex == i }" v-for="(v,i) in choice" :key="i"
					@click="commTypeChange(i, v.value, v.id)">{{v.name}}</view>
			</view> -->

		<view class="goodsListA pb50" v-if="maxTabIndex==1">
			<view class="goodsListA_item" v-for="item in commGood" :key="item.id" v-if="commGood && commGood.length > 0"
				@click="goDetails(item.id)">
				<image :src="item.cover" mode=""></image>
				<view class="goodsListA_item_title">{{ item.title }}</view>
				<view class="goodsListA_item_pirce">
					<rich-text :nodes="$mUtil.priceBigSmall(item.sale_price||item.min_sale_price)"></rich-text>
					<view>¥ {{ item.market_price||item.min_market_price }}</view>
				</view>
				<view class="goodsListA_item_num">已售{{ item.result_sale_num }}件</view>
			</view>

			<!-- <view class="lookOther">
					查看更多113个服务
					<text class="iconfont2">&#xe65f;</text>
				</view> -->
		</view>

		<nodata v-if="commGood.length == 0" :config="{top:5,content:'暂无数据~'}"></nodata>
	</view>
</template>

<script>
	import rate from "@/components/rate.vue"
	export default {
		components: {
			rate
		},
		data() {
			return {
				config: {
					back: true,
					title: '店铺信息',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					// statusBarFontColor: 'black',
				},
				value: "",
				duration: 500,
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				shop: {}, //店铺信息
				shopId: null,
				currSeckill: [],
				currTime: null, //秒杀当前场
				time2: "",
				groupList: [], //拼团列表
				maxTabIndex: 1,
				commCate: [], //商品分类
				choiceCopy: [{
						id: 1,
						name: "推荐",
						value: "recommend",
					},
					{
						id: 2,
						name: "热销",
						value: "hot",
					},
					{
						id: 3,
						name: "新品",
						value: "new",
					},
				],
				choice: [],
				commGood: [], //商品列表
				commParams: {
					limit: 100000,
				},
				activeIndex: 0,
			}
		},
		onLoad(options) {
			if (options.shopId) {
				this.shopId = options.shopId;
				this.getCommCate(options.shopId);
				this.getIndexList(options.shopId);
				this.seckillList(options.shopId);
				this.getgroupList(options.shopId);
				// this.getCommGood(this.shopId);
				// this.commTypeChange(0,"recommend")
			}
		},
		methods: {
			searchClick() {
				// console.log("dian");
				uni.navigateTo({
					url: "/pages/research/homepage/search",
				});
			},
			goProductDetails(url) {
				uni.navigateTo({
					url: url,
				});
			},
			/**获取店铺基本信息 */
			getIndexList(shopid) {
				this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
					uni.stopPullDownRefresh();
					this.loading = false;
					if (res.data && res.code == 200) {
						this.shop = res.data;
						this.shop.averageCopy = Math.round(res.data.average)
					}
				});
			},
			/**限时秒杀 */
			seckillList(shopId) {
				this.$http
					.get(
						`/marketing/seckillActivityGoods/flash-sale?shop_id=${shopId}`, {
							limit: 10,
							page: 1
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							this.currTime = res.data.start_hour;
							this.currSeckill = this.oneArrToTwoArr(res.data.list || [])
							if (res.data.finish_time) {
								this.time2 = this.$mUtil
									.countDown(Math.floor(res.data.finish_time / 1000))
									.split(":")
									.map((val) => Number(val));
							}
						}
					});
			},
			/**团购 */
			getgroupList(shopId) {
				this.$http
					.get(
						`/groupbuy/activitygoods/will-you-spell?shop_id=${shopId}`, {
							limit: 10,
							page: 1
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							this.groupList = res.list;
						}
					});
			},
			switchAssembly(index) {
				this.maxTabIndex = index;
				this.activeIndex = 0;
				delete this.commParams.group_id;
				this.getCommCate(this.shopId);
			},
			commTypeChange(index, type, groupId) {
				let e = {
					type: type,
					groupId: groupId
				}
				this.activeIndex = index;
				if (e.type == undefined) {
					delete this.commParams.type;
					this.commParams.group_id = e.groupId;
				} else {
					delete this.commParams.group_id;
					this.commParams.type = e.type;
				}
				this.getCommGood(this.shopId);
			},
			/**商品列表 */
			getCommGood(shopId) {
				this.$http
					.get(this.maxTabIndex == 0 ? `/service/goods/list/${shopId}` : `/goods/list/${shopId}`, this
						.commParams,
						false)
					.then((res) => {
						if (res && res.code == 200) {
							this.commGood = res.list;
						}
					});
			},
			/**商品分类 */
			getCommCate(shopId) {
				this.$http
					.get(this.maxTabIndex == 0 ? `/servicegoods/group/all/${shopId}` : `/goods_group/all/${shopId}`, {},
						false)
					.then((res) => {
						if (res && res.code == 200) {
							// this.commCate = res.list;
							this.choice = [];
							if (this.maxTabIndex == 1) {
								this.choice = JSON.parse(JSON.stringify(this.choiceCopy));
							}
							this.choice.push(...res.list);
							if (this.maxTabIndex == 0) {
								this.commParams.type = this.choice[0].id;
							} else {
								this.commParams.type = 'recommend';
							}
							this.getCommGood(this.shopId);
						}
					});
			},
			goDetails(id) {
				uni.navigateTo({
					url: this.maxTabIndex == 0 ? '/pages/product/goods/serviceGood?id=' + id :
						'/pages/product/goods/goods?id=' + id,
				});
			},
			oneArrToTwoArr(data) {
				let newData = [];
				let zyf = 4; //一维数组转二维数组长度(此处是二维数组每一个长度控制)
				for (var i = 0; i < Math.ceil(data.length / zyf); i++) {
					newData[i] = [];
					newData[i].push(data[i * zyf]);
					for (var j = 1; j < zyf; j++) {
						if (data[i * zyf + j] == undefined) {
							//超出长度控住
							return newData;
						} else {
							newData[i].push(data[i * zyf + j]);
						}
					}
				}
				return newData;
			},
			// 商家电话
			goPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			}
		}
	}
</script>

<style lang="scss">
	.city-text {
		margin-left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #1a1a1a;

		image {
			width: 20rpx;
			height: 12rpx;
			margin-left: 5rpx;
			vertical-align: middle;
		}
	}

	.menuCls {
		margin-left: 10rpx;
		font-size: 44rpx;
		color: #fff;
	}

	.searchBox {
		display: flex;
		padding: 10rpx 35rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 36rpx;
		margin: 30rpx 0 0;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		background: #fff;

		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}

		input {
			text-align: left;
		}
	}

	.shopCard {
		// margin: 100rpx auto 0;
		width: 720rpx;
		// min-height: 320rpx;
		padding: 30rpx;
		// background: url('/static/convenienceService/cardBg.png')0 0 no-repeat;
		// background-size: 720rpx 320rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.shop-info {
			display: flex;
			align-items: center;

			>image {
				// position: absolute;
				// top: -70rpx;
				// left: 30rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				background: #fff;
				flex-shrink: 0;
			}
		}

		.shopNamebox {
			flex: 1;
			margin-left: 20rpx;
			position: relative;

			.phone-btn {
				width: 150rpx;
				margin-left: auto;
				padding: 6rpx 10rpx;
				text-align: center;
				color: #666;
				border-radius: 8rpx;
				background-color: #fff;
				border: 1rpx solid #666;
				position: absolute;
				right: 0;
				bottom: 0;
			}

			.shopName {
				font-size: 32rpx;
				color: #333333;
				font-weight: 700;
				// margin-top: 30rpx;
			}

			.shopName_rate {
				font-size: 28rpx;
				color: #333333;
				display: flex;
				margin-top: 15rpx;
			}
		}

		.shop_item {
			font-size: 24rpx;
			color: #333333;
			display: flex;
			align-items: center;
			margin-top: 22rpx;
			padding: 0 10rpx;

			text {
				color: #108948;
				font-size: 34rpx;
			}

			view {
				margin-left: 20rpx;
			}

			image {
				width: 34rpx;
				height: 37rpx;
				flex-shrink: 0;
			}

			.blueicon {
				color: #FA6138;
			}
		}
	}

	.limitCard {
		margin: auto;
		width: 720rpx;
		height: 410rpx;
		padding: 0 30rpx;
		background: url('/static/convenienceService/cardBg.png') 0 0 no-repeat;
		background-size: 720rpx 410rpx;

		.limitCard_top {
			display: flex;
			padding: 35rpx 30rpx 20rpx 30rpx;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.limitCard_top_title {
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: 700;
				display: flex;
				align-items: center;
				position: relative;
				padding-right: 15rpx;

				&::after {
					display: block;
					content: "";
					width: 1rpx;
					height: 33rpx;
					background: #707070;
					position: absolute;
					right: 0;
					top: 10rpx;
				}
			}

			.limitCard_top_lab {
				font-size: 24rpx;
				color: #666666;
				margin: 0 30rpx 0 15rpx;
			}

			.limitCard_top_time {
				border-radius: 17rpx;
				background: #FF0000;
				font-size: 24rpx;
				color: #fff;
				font-weight: 700;
				padding: 0 15rpx;
			}
		}

		.swiper {
			height: 280rpx;

			.listBox {
				padding: 25rpx 20rpx;
				display: flex;

				.listBox_item {
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
					}

					>view {
						width: 140rpx;
						font-size: 20rpx;
						color: #333333;
						text-align: center;

						text {
							font-size: 28rpx;
							font-weight: 600;
							display: inline-block;
							margin-left: 10rpx;
						}
					}

					&:last-child {
						margin-right: 0 !important;
					}
				}
			}
		}
	}

	.groupCard {
		margin: auto;
		width: 720rpx;
		// height: 1500rpx;
		padding: 0 30rpx;
		// background: url('/static/convenienceService/cardBg.png')0 0 no-repeat;
		// background-size: 720rpx 1500rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
		border-radius: 16rpx;

		.group_title {
			display: flex;
			justify-content: space-between;
			padding: 35rpx 30rpx 20rpx 30rpx;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.group_title_l {
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: 700;
			}

			.group_title_r {
				font-size: 24rpx;
				color: #333333;
			}

		}

		.goodsListBox {
			.goods_item {
				&:last-child {
					border-bottom: none !important;
				}

				display: flex;
				padding: 50rpx 0 40rpx;
				border-bottom: 1rpx solid #E6E6E6;

				.goods_item_img {
					margin-right: 25rpx;

					image {
						width: 226rpx;
						height: 226rpx;
					}
				}

				.goods_item_data {
					flex: 1;

					.goods_item_data_title {
						font-size: 28rpx;
						min-height: 80rpx;
						color: #181818;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.autotrophyCls {
						width: 69rpx;
						height: 30rpx;
						margin-right: 10rpx;
						margin-top: 10rpx;
					}

					.originalCls {
						width: 116rpx;
						height: 28rpx;
						margin-top: 10rpx;
					}

					.goods_item_data_box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;

						.goods_item_data_box_l {
							.goods_item_data_box_l_price {
								display: flex;
								align-items: flex-end;
								font-size: 20rpx;
								color: #00BF5A;

								text {
									font-size: 36rpx;
									font-weight: 500;
									display: inline-block;
									position: relative;
									top: 4rpx;
								}

								>view {
									font-size: 24rpx;
									color: #CCCCCC;
									margin-left: 30rpx;
									text-decoration: line-through
								}
							}

							.goods_item_data_box_l_person {
								font-size: 24rpx;
								color: #333333;

								text {
									color: #FF0000;
								}
							}
						}

						.goods_item_data_box_r {
							width: 138rpx;
							height: 63rpx;
							background: #FA6138;
							border-radius: 32rpx;
							font-size: 28rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
						}
					}
				}
			}
		}

	}

	.maxTab {
		display: flex;
		// justify-content: space-around;
		padding: 40rpx 40rpx 20rpx;

		>view {
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: 700;
			position: relative;

			&::after {
				display: block;
				content: "";
				width: 0;
				height: 4rpx;
				border-radius: 1rpx;
				position: absolute;
				left: 70rpx;
				bottom: -36rpx;
				transform: translateX(-50%);
				transition: all 0.3s;
			}
		}

		.active {
			// color: #00321E;
			// &::after {
			// 	width: 100%;
			// 	height: 4rpx;
			// 	border-radius: 1rpx;
			// 	background: #00321E;
			// }
		}
	}

	.titleBox {
		padding: 40rpx 30rpx 30rpx;
		font-size: 36rpx;
		color: #1A1A1A;
		font-weight: 700;
	}

	.minTab {
		padding: 30rpx 30rpx 30rpx;
		display: flex;
		overflow: auto;

		>view {
			color: #666666;
			font-weight: 28rpx;
			margin-right: 50rpx;
			padding-bottom: 15rpx;
			flex-shrink: 0;
		}

		>.active {
			font-size: 30rpx;
			color: #FA6138;
			font-weight: 700;
			position: relative;

			&::after {
				display: block;
				content: "";
				width: 100%;
				height: 4rpx;
				background: #FA6138;
				border-radius: 2rpx;
				position: absolute;
				bottom: 0%;
				left: 0;
			}
		}
	}

	.goodsListA {
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;

		.goodsListA_item {
			width: 336rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
			border-radius: 18rpx;
			margin-left: 18rpx;
			margin-bottom: 30rpx;

			&:nth-child(2n-1) {
				margin-left: 0 !important;
			}

			image {
				width: 336rpx;
				height: 336rpx;
				border-radius: 18rpx 18rpx 0 0;
			}

			>view {
				padding: 0 20rpx;
			}

			.goodsListA_item_title {
				font-size: 28rpx;
				color: #181818;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.goodsListA_item_pirce {
				display: flex;
				align-items: flex-end;
				font-size: 20rpx;
				color: #FF6600;
				font-weight: 700;

				text {
					font-size: 36rpx;
					font-weight: 500;
					display: inline-block;
					position: relative;
					top: 4rpx;
				}

				>view {
					font-size: 24rpx;
					color: #CCCCCC;
					margin-left: 30rpx;
					text-decoration: line-through;
					font-weight: normal;
				}
			}

			.goodsListA_item_num {
				font-size: 22rpx;
				color: #999999;
				margin-top: 10rpx;
				padding-bottom: 20rpx;
			}
		}
	}

	.lookOther {
		font-size: 24rpx;
		color: #333333;
		width: 288rpx;
		height: 59rpx;
		border-radius: 8rpx;
		background: #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
	}

	.mt30 {
		margin-top: 30rpx !important;
	}

	.pb50 {
		padding-bottom: 50rpx;
	}


		.num {
			display: flex;
			align-items: center;
			margin-top: 46rpx;
			font-weight: Bold;
			font-size: 20rpx;
			color: red;
		}

		.small {
			color: #cccccc;
			font-size: 22rpx;
			font-weight: 500;
			text-decoration: line-through;
			margin-left: 17rpx;
		}

		.work-red {
			font-size: 36rpx;
			font-weight: Bold;
			margin-left: 5rpx;
		}
</style>