null/pages/mang/detail.vue

<template>
	<view class="page">
		<view class="swiper-sec">
			<swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(item, idx) in banners" :key="idx" class="swiper-item">
					<view class="img-wrap"><image :src="item" mode="aspectFill" class="img"></image></view>
				</swiper-item>
			</swiper>
			<view class="ic-wrap align-center justify-center" @tap="tapLove">
				<image src="/static/love-full.png" mode="aspectFill" class="ic" v-if="info.is_fav_shop === 1"></image>
				<image src="/static/love.png" mode="aspectFill" class="ic" v-else></image>
			</view>
		</view>
		<view class="header-sec">
			<!-- navTo('/pages/mang/shops',{id:this.info.shop_id}) -->
			<view class="flex-col name-wrap" @tap="goShop">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_2 clamp">{{info.goods_name}}</text>
						<view class="text-wrapper text_3 clamp">仅剩{{info.num}}份</view>
					</view>
					<image
						src="/static/mangd-rarrow.png"
						class="image_8 image_9"
					/>
				</view>
				<view class="align-center group_10">
					<view class="stars align-center">
						 <image
						  src="/static/mang_star.png"
						  class="image_10"
						  v-for="(item,idx) in info.rank"
						  :key="idx"
						/>	
					</view>
					<text class="text_4">随机搭配</text>
				</view>
			</view>
			<view class="border-wrap"></view>
			<view class="flex-row time-wrap">
				<text class="text_5">自提时间</text>
				<text class="text_6">{{info.self_hours}}</text>
			</view>
			<view class="border-wrap"></view>
			<view class="flex-col loc-wrap">
				<view class="flex-row justify-between items-start">
					<view class="flex-row">
						<image
							src="/static/temp/pro.png"
							class="image_12"
							mode="aspectFill"
						/>
						<view class="flex-col items-start group_15">
							<text class="text_7 clamp">{{info.shop_name}}</text>
							<text class="text_8 clamp2">{{info.full_address}}</text>
						</view>
					</view>
					<view class="flex-row group_16">
						<view class="flex-col items-center image-wrapper" @tap='goLoc'>
							<image
								src="/static/mangd-loc.png"
								class="image_13"
								mode="aspectFill"
							/>
						</view>
						<view class="section_5"><!--*--></view>
						<view class="flex-col items-center image-wrapper view_3" @tap="makePhone">
							<image
								src="/static/mang-phone.png"
								class="image_14"
								mode="aspectFill"
							/>
						</view>
					</view>
				</view>
				<view class="group_17" v-if="info.distance">
					<text class="text_9">距离您</text>
			 	<text class="text_10">{{info.distance}}</text>
				</view>
			</view>
		</view>
		<view class="line-wrap"></view>
		<view class="flex-col items-start tips-wrap">
			<text class="title">盲盒内能得到什么</text>
			<text class="text_12">{{info.goods_description}}</text>
		</view>
		<view class="line-wrap"></view>
		<view class="review-sec">
			<view class="title-wrap align-center justify-between">
				<text class="text_14">商品评价</text>
				<view class="flex-row group_21" v-if="loaded && comments.length !==0 ">
					<text class="text_15">查看全部</text>
					<image
						src="/static/mangd-rarrow.png"
						class="image_8 image_15"
						mode="aspectFill"
			 	    />
				</view>
			</view>	
			<view class="review-wrap">
				<evaItem :info="item" v-for="(item,idx) in comments" :key="idx" />
				<empty v-if="loaded && comments.length === 0 " marginTop="40rpx"/>		
			</view>
		</view>
		<view class="line-wrap"></view>
		<view class="rich-wrap">
			<view class="title">
				{{tips.title}}
			</view>
			<view class="content">
				{{tips.value}}
			</view>
		</view>
		
		<safe-area height="94rpx">
			<template v-slot:btn>
				<view class="btn-wrap">
					<view class="flex-row group_34">
					  <view class="flex-col justify-center items-start section_7">
						<view class="group_35 align-center">
						  <text class="text_26">￥</text>
						  <text class="text_27 clamp">{{info.shop_price}}</text>
						</view>
					  </view>
					  <view class="flex-col items-center text-wrapper_1" @tap="navTo('/pages/mang/confirm',{id:info.id,shopId:info.shop_id},{isCheckLogin:true})"><text class="text_30">下单</text></view>
					</view>
				</view>
			</template>
		</safe-area>
	</view>
</template>

<script>
import evaItem from './components/eva-item.vue';
export default {
	components: {
		evaItem,
	},
	data() {
		return {
			info:{},
			banners:[],
			comments:[],
			loaded:false,
			sRes:'', //搜索结果 empty,noMore
			tips:{},
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.getInfo();
		this.getTips();
		this.getComments();
		// this.$nextTick(()=>{
		// 	this.reqData={goods_id:this.id} //请求数据
		// })
	},
	methods:{
		async getInfo(){
			let sendData={
				goods_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.info',sendData);
			this.info = res.data.goods_info;
			this.banners = this.info.rotation_img.split(',');
		},
		async getTips(){
			let res = await this.$request('goods.getInfoText');
			this.tips = res.data;
		},
		async getComments(){
			let res = await this.$request('goods.commentList',{goods_id:this.id,page:1,limit:5});
			this.loaded = true;
			this.comments = res.data.row;
		},
		async tapLove(){
			let url = this.info.is_fav_shop === 1 ? 'favorite.cancel' : 'favorite.add';
			let sendData={
				shop_id:this.info.shop_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;
		},
		// previewImg(idx){
		// 	let url = [];
		// 	this.$tools.previewImg(url)
		// },
		searchEnd({loadingType,pageOneRes}){
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				this.sRes='empty';
			}else{
				this.sRes=loadingType;
			}
		},
		makePhone(){
			uni.makePhoneCall({
				phoneNumber: this.info.shop_mobile
			})
		},
		goLoc(){
			uni.openLocation({
				latitude: Number(this.info.shop_lat),
				longitude:Number(this.info.shop_lng)
			})
		},
		goShop(){
			this.navTo('/pages/mang/shops',{id:this.info.shop_id})
		},
		
	}
};
</script>

<style lang="scss">
.swiper-sec{
	position: relative;
	.swiper{
		width: 750rpx;
		height: 750rpx;
		.img-wrap{
			position: relative;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg, rgba(0,0,0,0),rgba(0,0,0,.2));
			}
		}
		.img{
			width: 750rpx;
			height: 750rpx;
		}
	}
    .ic-wrap{
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		width: 118rpx;
		height: 94rpx;
		.ic{
			width: 54rpx;
			height: 54rpx;
		}
	}
}
.name-wrap {
	padding: 34rpx 31rpx 37rpx;
	.text_2 {
		margin: 7rpx 0 6rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: PingFang;
		letter-spacing: 1.28rpx;
		max-width: 500rpx;
	}
	.text-wrapper {
		margin-left: 10rpx;
		padding: 10rpx 10rpx 11rpx;
		background-color: #92b99c;
		border-radius: 10rpx;
		height: 44rpx;
		max-width: 160rpx;
	}
	.text_3 {
		margin-left: 10rpx;
		margin-right: 5rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang;
		// max-width: 110rpx;
		text-align: center;
	}
	.image_8 {
		width: 11rpx;
		height: 18rpx;
	}
	.image_9 {
		margin-right: 9rpx;
		flex-shrink: 0;
		align-self: flex-end;
	}
	.group_10 {
		margin-top: 6rpx;
	}
	.image_10 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}
	.text_4 {
		margin-left: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
}
.border-wrap{
	margin: 0 auto;
	width: 710rpx;
	height: 2rpx;
	background-color: #eee;
}
.time-wrap {
	padding: 40rpx 33rpx 39rpx;
	.text_5 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.text_6 {
		margin-left: 28rpx;
		margin-top: 3rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
}
.loc-wrap {
	padding: 40rpx 30rpx 41rpx;
	.image_12 {
		margin-top: 5rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 68rpx;
	}
	.group_15 {
		margin-left: 16rpx;
	}
	.text_7 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 420rpx;
	}
	.text_8 {
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		max-width: 420rpx;
		line-height: 36rpx;
	}
	.group_16 {
		margin-right: 20rpx;
		margin-top: 37rpx;
	}
	.image-wrapper {
		align-self: center;
		width: 28rpx;
	}
	.image_13 {
		width: 28rpx;
		height: 33rpx;
	}
	.section_5 {
		margin-left: 41rpx;
		background-color: #0000001a;
		width: 1rpx;
		height: 65rpx;
	}
	.view_3 {
		margin-left: 40rpx;
	}
	.image_14 {
		width: 28rpx;
		height: 28rpx;
	}
	.group_17 {
		margin-left: 3rpx;
		align-self: flex-start;
		line-height: 23rpx;
		margin-top: 10rpx;
	}
	.text_9 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_10 {
		color: #92b99c;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 19rpx;
	}
}
.line-wrap {
	background-color: #0000000f;
	height: 17rpx;
}
.tips-wrap {
	padding: 40rpx 32rpx;
	.title {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
	}
	.text_12 {
		margin-left: 4rpx;
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 36rpx;
	    word-break: break-all;
	}
}
.review-sec{
	padding-top: 35rpx;
	.review-wrap{
		min-height: 340rpx;
	}
}
.title-wrap {
	height: 37rpx;
	margin-bottom: 10rpx;
	padding: 0 30rpx;
	.text_14 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.group_21 {
		margin-right: 9rpx;
	}
	.text_15 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.image_8 {
		width: 11rpx;
		height: 18rpx;
	}
	.image_15 {
		margin-left: 11rpx;
		margin-bottom: 3rpx;
		flex-shrink: 0;
	}
}

.rich-wrap{
	background-color: #fff;
	padding: 30rpx;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.content{
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 37rpx;
	}
}
.btn-wrap{
	   // margin-top: 67rpx;
	   padding: 0 20rpx;
	   position: fixed;
	   /* #ifdef H5 */
	   bottom: calc(var(--window-bottom) / 2);
	   /* #endif */
	   /* #ifdef MP */
	   bottom: calc(var(--safe-area-inset-bottom) / 2);
	   /* #endif */
	   
	   z-index: 10;
	   left: 20rpx;
	   right: 20rpx;
	 .section_7 {
	   padding: 15rpx 30rpx 14rpx;
	   flex: 1 1 auto;
	   background-color: #333333;
	   border-radius: 47rpx 0px 0px 47rpx;
	   height: 94rpx;
	 }
	 .group_35 {
	   line-height: 26rpx;
	 }
	 .text_26 {
	   color: #ffffff;
	   font-size: 24rpx;
	   font-family: PingFang;
	 }
	 .text_27 {
	   color: #ffffff;
	   font-size: 34rpx;
	   font-family: PingFang;
	   max-width: 300rpx;
	   letter-spacing: 1.36rpx;
	 }
	
	.text-wrapper_1 {
	   padding: 31rpx 0;
	   flex-shrink: 0;
	   background-color: #92b99c;
	   border-radius: 0px 47rpx 47rpx 0px;
	   width: 165rpx;
	   height: 94rpx;
	}
	.text_30 {
	   color: #ffffff;
	   font-size: 34rpx;
	   font-family: PingFang;
	   line-height: 32rpx;
	   letter-spacing: 1.36rpx;
	}
}
</style>