null/pages/mang/shops.vue

<template>
	<view class="page" v-if="info.id">
		<view class="header-sec"></view>
		<view class="name-sec flex-col">
			<image :src="info.shop_logo" class="img" mode="aspectFill" />
			<view class="flex-row group_5">
				<view class="flex-row group_6" @tap="tapLove">
					<text class="name clamp">{{info.shop_name}}</text>
					<image src="/static/love-full.png" class="ic" mode="aspectFill" v-if="info.is_fav_shop === 1" />
					<image src="/static/love.png" class="ic" mode="aspectFill" v-else />
				</view>
				<text class="loc-txt" v-if="info.distance">距您{{info.distance}}</text>
			</view>
			<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in info.rank" :key="idx" /></view>
			<text class="group_5 text_4 clamp2">
				{{info.shop_desc}}
			</text>
			<view class="flex-row group_5 loc-wrap">
				<view class="flex-row group_7">
					<image src="/static/mangd-loc.png" class="image_7" mode="aspectFill" />
					<view class="group_8"><text class="text_5 clamp2">{{info.full_address}}</text></view>
				</view>
				<image src="/static/shops-dire.png" class="image_8" />
			</view>
		</view>
		<view class="pro-sec flex-col">
			<text class="title">盲盒</text>
			<view class="flex-col">
				<view class="flex-row items-start list-item" :key="i" v-for="(item, i) in info.goods">
					<image :src="item.goods_img_text" class="image" mode="aspectFill" />
					<view class="flex-col group_10">
						<view class="flex-col items-start group_11 view_7">
							<text class="name clamp">{{item.goods_name}}</text>
							<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(star, idx) in item.rank" :key="idx" /></view>
							<text class="text_10">随机搭配</text>
						</view>
						<view class="flex-row group_12">
							<view class="group_13">
								<text class="text_11">￥</text>
								<text class="text_12">{{item.shop_price}}</text>
							</view>
							<text class="text_13">￥{{item.market_price}}</text>
						</view>
					</view>
					<view class="flex-col items-center btn-wrap" @tap="navTo('/pages/mang/confirm',{id:item.id,shopId:info.id},{isCheckLogin:true})">
						<text class="txt">立即下单</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tab-sec flex-col">
			<view class="flex-row tab-wrap">
				<text class="tab" :class="{active: curTabIdx === 0}" @tap="tapTab(0)">用户评价</text>
				<text class="tab" :class="{active: curTabIdx === 1}" @tap="tapTab(1)">商家故事</text>
			</view>
		</view>
		<view class="eva-sec" v-if="curTabIdx === 0">
			<view class="e-top justify-between">
				<view class="flex-row e-top-wrap">
					<view class="justify-center group_21">
						<text class="text_23">{{info.score}}分</text>
						<view class="flex-col items-start group_22">
							<text class="text_24">总评分</text>
							<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 5" :key="idx" /></view>
						</view>
						<!-- <view class="section_8"></view> -->
					</view>
					<view class="flex-col items-center group_23">
						<text class="text_25">评价</text>
						<text class="text_26">{{info.score_num}}条</text>
					</view>
					<view class="section_8"></view>
					<view class="flex-col group_24">
						<text class="text_27">好评率</text>
						<text class="text_28">{{info.score_rate}}</text>
					</view>
				</view>
			</view>
			<view class="division-wrap"></view>
			<singleList ref="listRef" url="goods.shopComments" :sendData="reqData" @reqEnd="searchEnd">
				<template v-slot:items="{list}">
					<evaItem :info="item" v-for="(item,idx) in list" :key="idx" />
					<!-- <empty v-if="sRes && sRes==='empty'"/> -->
				</template>
			</singleList>
		</view>
		<view class="story-sec" v-else>
			<view class="s-top">
				<view class="line-wrap flex-row">
					<text class="key">
						商家名称：
					</text>
					<text class="val">{{info.shop_name}}</text>
				</view>
				<view class="line-wrap flex-row">
					<text class="key">
						商家地址：
					</text>
					<text class="val">{{info.full_address}}</text>
				</view>	
			</view>
			<view class="division-wrap"></view>
			<view class="promise-wrap">
				<view class="name">{{promise.title}}</view>
				<view class="content">
					{{promise.value}}
				</view>
			</view>
		</view>
	    <safe-area />
	</view>
</template>

<script>
import evaItem from './components/eva-item.vue';
export default {
	components: {
		evaItem,
	},
	data() {
		return {
			id:'', //店铺id
			info:{},
			curTabIdx:0,
			promise:{},
			comments:[],
			reqData:{}, //请求数据
			sRes:'', //搜索结果 empty,noMore
		};
	},
	onReachBottom() {
		this.$refs.listRef.getList();
	},
	onLoad(e) {
		this.id = e.id;
		this.getInfo();
		this.getPromise();
		this.$nextTick(()=>{
			this.reqData={shop_id:this.id} //请求数据
		})
	},
	methods:{
		async getInfo(){
			let sendData={
				shop_id:this.id,
				lng: this.addrInfo.address ? this.addrInfo.address_lng : '',
				lat: this.addrInfo.address ? this.addrInfo.address_lat : '',
			}
			let res = await this.$request('goods.shop',sendData);
			this.info = res.data;
		},
		async tapLove(){
			let url = this.info.is_fav_shop === 1 ? 'favorite.cancel' : 'favorite.add';
			let sendData={
				shop_id:this.id,
			}
			let res = await this.$request(url,sendData);
			this.$tools.msg(res.msg);
			this.info.is_fav_shop = this.info.is_fav_shop === 1 ? 0 : 1;
		},
		tapTab(idx){
			if(idx === this.curTabIdx){
				return;
			}
			this.curTabIdx = idx;
		},
		async getPromise(){
			let res = await this.$request('goods.getPromise');
			this.promise = res.data;
		},
		searchEnd({loadingType,pageOneRes}){
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				this.sRes='empty';
			}else{
				this.sRes=loadingType;
			}
		},
	}
};
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.header-sec {
	background-color: $base-color;
	height: 240rpx;
}
.name-sec {
	padding: 30rpx 14rpx 31.5rpx 30rpx;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
	border-radius: 20rpx;
	position: relative;
	width: 690rpx;
	margin: -196rpx auto 0;
	.img {
		width: 154rpx;
		height: 154rpx;
		position: absolute;
		left: 24rpx;
		top: 24rpx;
	}
	.group_5 {
		position: relative;
	}
	.loc-txt {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.group_6 {
		margin-right: 93rpx;
		margin-left: 172rpx;
		.name {
			color: #333333;
			font-size: 30rpx;
			font-family: PingFang;
			max-width: 300rpx;
			font-weight: bold;
		}
		.ic {
			margin-left: 18rpx;
			flex-shrink: 0;
			width: 31rpx;
			height: 27rpx;
		}
	}
	.stars {
		margin-top: 13rpx;
		margin-left: 172rpx;
		.starImg {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
	}
	.text_4 {
		margin-left: 172rpx;
		margin-top: 12rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 32rpx;
		word-wrap: break-word;
	}
	.loc-wrap {
		margin-top: 18rpx;
	}
	.group_7 {
		flex: 1 1 auto;
	}
	.image_7 {
		margin-top: 10.5rpx;
		flex-shrink: 0;
		width: 18rpx;
		height: 22rpx;
	}
	.group_8 {
		margin-left: 16rpx;
		flex: 1 1 auto;
		line-height: 37rpx;
		height: 74rpx;
	}
	.text_5 {
		color: #666666;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 37rpx;
	}
	.image_8 {
		margin-left: 40rpx;
		margin-right: 28rpx;
		align-self: center;
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
	}
}
.pro-sec {
	padding: 29rpx 20rpx 0;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
	border-radius: 20rpx;
	width: 690rpx;
	margin: 24rpx auto 0;
	.title {
		margin-left: 6rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: bold;
	}
	.list-item {
		padding: 29rpx 4rpx 25rpx;
		border-bottom: solid 1rpx #0000000f;
		position: relative;
		&:last-child {
			border: none;
		}
	}
	.image {
		flex-shrink: 0;
		width: 200rpx;
		height: 200rpx;
	}
	.group_10 {
		margin-left: 20rpx;
		flex: 1 1 auto;
	}
	.group_11 {
		flex: 1 1 auto;
	}
	.view_7 {
		flex: initial;
	}
	.name {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 400rpx;
		font-weight: bold;
	}
	.stars {
		margin-top: 11rpx;
		.starImg {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
	}
	.text_10 {
		margin-top: 21rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.group_12 {
		margin-top: 57rpx;
	}
	.group_13 {
		line-height: 28rpx;
		height: 29rpx;
	}
	.text_11 {
		color: #ff3e3e;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 19rpx;
	}
	.text_12 {
		color: #ff3e3e;
		font-size: 36rpx;
		font-family: PingFang;
		line-height: 28rpx;
	}
	.text_13 {
		margin-left: 10rpx;
		margin-top: 9rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 20rpx;
		text-decoration: line-through;
	}
	.btn-wrap {
		padding: 18rpx 0 17rpx;
		flex-shrink: 0;
		background-color: #92b99c;
		border-radius: 32rpx;
		width: 168rpx;
		height: 64rpx;
		position: absolute;
		bottom: 26rpx;
		right: 10rpx;
		z-index: 2;
		.txt {
			color: #ffffff;
			font-size: 30rpx;
			font-family: PingFang;
			line-height: 29rpx;
		}
	}
}
.tab-sec {
	margin-top: 43rpx;
	padding: 0 54rpx;
	.tab-wrap {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;
	}
	.tab {
		margin-right: 65rpx;
		color: #999999;
		font-size: 34rpx;
		font-family: PingFang;
		position: relative;
		&.active {
			color: #333333;
			font-weight: bold;
			&::after {
				content: '';
				background-color: #92b99c;
				width: 41rpx;
				height: 4rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -18rpx;
			}
		}
	}
}
.division-wrap {
		width: 750rpx;
		height: 17rpx;
		background: #000000;
		opacity: 0.06;
	}
.eva-sec {
	.e-top {
		padding: 17rpx 3rpx 19rpx;
		.group_21 {
			margin: 5rpx 0 8rpx;
			// padding: 0 30rpx;
			flex:1;
			border-right: 2rpx solid #eee;
		}
		.text_23 {
			align-self: center;
			color: #ff3e3e;
			font-size: 36rpx;
			font-family: PingFang;
			margin-right: 10rpx;
		}
		.group_22 {
			flex-shrink: 0;
		}
		.text_24 {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.stars {
			margin-top: 6rpx;
			.starImg {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.section_8 {
			background-color: #0000000f;
			width: 2rpx;
			height: 70rpx;
		}
		.group_23 {
			margin: 4rpx 0 8rpx;
			width: 200rpx;
		}
		.text_25 {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.text_26 {
		 margin-top: 13rpx;
			color: #333333;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.group_24 {
			margin: 4rpx 0 10rpx 0;
			width: 200rpx;
		}
		.text_27 {
			align-self: center;
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.text_28 {
			margin-top: 15rpx;
			align-self: center;
			color: #333333;
			font-size: 24rpx;
			font-family: PingFang;
		}
	}
    .e-top-wrap{
		width: 100%;
	}
}
.story-sec{
	padding-top: 30rpx;
	.s-top{
		padding-bottom: 30rpx;
	}
	.line-wrap{
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.key{
			margin-right: 38rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
		}
		.val{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			max-width: 500rpx;
		}
	}
    .rich-wrap{
    	background-color: #fff;
    	.rich {
    		line-height: normal;
    	}
    }
	.promise-wrap{
		padding: 40rpx 30rpx 30rpx;
		.name{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.content{
			width: 696rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 42rpx;
			margin: 30rpx auto 0;
		}
	}
}
</style>