discounts-minapp/detail/shopDetail/shopDetail.vue

<template>
	<view class="shopDetail">
		<!-- 导航栏 -->
		<!-- <zs-header title="店铺详情" :background="background"></zs-header> -->
		<view class="top-box">
			
			<image class="bg target" :src="info.logoPath" mode="aspectFill"></image>
			<view class="shop-info">
				<image class="shop-logo" :src="info.logoPath" mode=""></image>
				<view class="info-box">
					<view class="title-box">
						<view class="title">
							{{info.shopVo.shopName}}
						</view>
					</view>
					<view class="address-box">
						<view class="distance">
							距你直线距离{{(info.shopVo.distance/1000).toFixed(2)}}km
						</view>
						<view class="address">
							·{{info.district}}
						</view>
					</view>
				</view>
			</view>
			<view class="shop-desc">
				伊藤洋华堂（Ito Yokado,日文：イトーヨーカドー），又名伊藤荣堂，于1904年...
			</view>
		</view>
		
		<view class="tab-box">
			<view class="tab" :class="tab == 1?'active':''" @click="handleTab(1)">
				商品
			</view>
			<view class="tab" :class="tab == 2?'active':''" @click="handleTab(2)">
				优惠券
			</view>
		</view>
		
		<view class="content ">
			<view class="discounts" v-if="freeList.length && tab == 2">
				<view class="title">
					免费领取
				</view>
				<view class="discounts-item" v-for="(item,index) in freeList" :key="index" >
					<view class="card-content" :class="item.buySet == 2&&item.useCount==0?'card-used':''">
						<view class="info">
							<view class="title">
								{{item.goodsName}}
							</view>
							<view class="limit">
								{{item.useType | filterType(item)}}
							</view>
							
							<view class="desc" :class="[open == index?'open':'']" @click="handleOpen(index,'open')">
								展开详情 <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
							</view>
						</view>
						<view class="btn-box">
							<view class="btn" @click="handleBuy(item)">
								领取
							</view>
						</view>
						<view class="num" v-if="item.buySet == 2">
							剩余领取次数：{{item.useCount}}次
						</view>
					</view>
					<view class="card-desc" v-show="open == index">
						<view class="time">
							{{item.validType | filterType1(item)}}
						</view>
						<view class="desc" v-html="item.goodsDescribe">
							{{item.goodsDescribe}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods-list" v-else-if="buyList.length && tab == 1">
				<view class="goods-item" v-for="item in buyList" :key="item.goodsId" @click="goDetail(item)">
					<zs-img  :src="item.goodsImg" width="342rpx" height="322rpx" raduis="full"  mode="" ></zs-img>
					<view class="goods-info">
						<view class="goods-name">
							{{item.goodsName}}
						</view>
						<view class="type">
							{{goodsTypeObj[item.goodsCode]}}
						</view>
						<view class="price">
							¥{{item.buyPrice}}
						</view>
					</view>
				</view>
			</view>
			<u-empty marginTop="100" textSize="20" v-if="!freeList.length && tab == 2" mode="data"></u-empty>
			<u-empty marginTop="100" textSize="20" v-if="!buyList.length && tab == 1" mode="data"></u-empty>
		</view>
		
		<!-- <view class="hot-title">
			<image class="icon" src="../../static/hot.png" mode=""></image>
			<view class="title">
				热门推荐
			</view>
			<image class="icon" src="../../static/hot.png" mode=""></image>
		</view> -->
		
		<!-- 列表 -->
		<!-- <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
			<view class="left">
				<view class="left-frist">
					<view class="top-box">
						<view class="title">
							天天低价
						</view>
						<view class="type-box">
							<image class="hot" src="../../static/hot-white.png" mode=""></image>
							<view class="type">
								今日超低价
							</view>
						</view>
					</view>
					<view class="image-box">
						<image class="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F45f7efd9-3760-4fa0-8cf0-79ca4b44d017%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695803683&t=09678f8c997578d3e8101dd2b0a597e8" mode=""></image>
						<view class="btn-box">
							<view class="btn">
								折
							</view>
							<view class="desc">
								满200享7折
							</view>
						</view>
					</view>
				</view>
				<view class="store-item" v-for="(item,index) in list" :key="index" @click="goShopDetail(item)">
						<zs-img  :src="item.src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								
								<image class="position" src="../../static/position.png" mode=""></image>
								{{item.distance}}km
							</view>
							<image v-if="index==0" class="hot-icon" src="../../static/hot1.png" mode=""></image>
						</view>
				</view>
			</view>
			<view class="right">
				<view class="store-item frist" @click="goShopDetail(list1[0])">
						<zs-img  :src="list1[0].src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{list1[0].title}}
							</view>
							<view class="tags">
								<view class="tag-item">
									<view class="label">
										折
									</view>	
									<view class="value">
										满200享8折
									</view>
								</view>
							</view>
						</view>
				</view>
				
				<view v-if="index!=0" class="store-item" v-for="(item,index) in list1" :key="index" @click="goShopDetail(item)">
						<zs-img  :src="item.src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								<image class="position" src="../../static/position.png" mode=""></image>
								{{item.distance}}km
							</view>
						</view>
				</view>
			</view>
		
		</zs-list> -->
		<!-- 地图 -->
		<map v-show="false" id="map"></map>

	</view>
</template>

<script>
	import { allCouponByUser,creat } from '@/api/goods.js';
	import guid from '@/utils/guid.js'
	import {rpxTopx} from '@/utils/tool.js'
	export default {
		data() {
			return {
				tab:1,
				open:999,
				info: null,
				background:false,
				status: 'more',
				_mapContext: null,
				query:{
					currentPage:1,
					pageSize:99,
					setMealId:0,
					goodsType:1,
					shopId:'',
					userId:''
				},
				
				freeList:[],
				buyList:[],
				goodsTypeObj:{}
				
			};
		},
		
		filters: {
			filterType: function(val,item) {
				if(val == 1){
					return '无使用限制'
				}else if(val == 2){
					return '使用期至' + item.useEndTime
				}else if(val == 3){
					return '每周'+ item.day +'可用'
				}else if(val == 4){
					return '每月'+ item.day +'可用'
				}
			},
			filterType1: function(val,item) {
				if(val == 1){
					return '有效期：无限制'
				}else if(val == 2){
					return '有效期：' + item.validStartTime + '-' + item.validEndTime
				}
			}
		},
		methods: {
			
			// 地图中打开商家
			handleAdress(item) {
				this._mapContext.openMapApp({
					longitude: Number(item.longitude) ,
					latitude: Number(item.latitude),
					destination: item.shopVo.shopName,
					complete(r) {
						console.log(r);
					}
				})
			},
			init(){
				let userInfo
				if(uni.getStorageSync('userInfo')){
					userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				}else{
					userInfo = {setMealId:0,userId:''}
				}
				this.info = JSON.parse(uni.getStorageSync('shopInfo'))
				this.query.shopId = this.info.shopVo.id
				this.query.setMealId = userInfo.setMealId
				this.query.userId = userInfo.userId
				this.allCouponByUser(this.tab)//优惠券
			},
			handleTab(val){
				this.tab = val
				this.allCouponByUser(val)
			},
			handleOpen(val,open){
				if(val === this[open]){
					this[open] = 7
				}else{
					this[open] = val
				}
			},
			// 点击领取
			handleBuy(item) {
				if(!uni.getStorageSync('token')){
					uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							if(res.confirm){
								uni.navigateTo({
									url:'/login/login/login'
								})
							}
						}
					})
				}else{
					if(item.buySet == 2&&item.useCount == 0){
						return uni.showToast({
								title:'领取次数不足',
								icon:'none'
							})
					}
					creat({
					  "discountId": [
					  ],
					  "goodsList": [
						  item.goodsId
					  ],
					  "idempotent": guid(),
					  "shopId": this.query.shopId
					}).then(res=>{
						if(res.state == 'Success'){
							uni.showToast({
								title:'领取成功'
							})
							this.allCouponByUser(2)//优惠券
						}
					})
					// uni.navigateTo({
					// 	url: '../qrcode/index'
					// })
				}
			},
			goShopDetail(item) {
				uni.setStorageSync('shopInfo', JSON.stringify(item))
				uni.navigateTo({
					url: `../../detail/shopDetail/shopDetail`
				})
			},
			goDetail(item){
				let data = item 
				data.shopName = this.info.shopVo.shopName
				data.address = this.info.district
				uni.setStorageSync('goodsInfo', JSON.stringify(data))
				uni.navigateTo({
					url: `../goodsDetail/index`,
					// success: function(res) {
					//   // 通过eventChannel向被打开页面传送数据
					//   res.eventChannel.emit('goodsInfo', data)
					// }
				})
			},
			loadMore(){
				// this.status = 'loading'
				// setTimeout(() => {
				// 	this.status = 'more'
				// 	this.list = this.list.concat([{
				// 		src: 'https://img1.baidu.com/it/u=384382004,2638328762&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	}, {
				// 		src: 'https://img1.baidu.com/it/u=1281595595,1208289696&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	}])
				// }, 1000)
			},
			allCouponByUser(val){
				this.query.goodsType = val
				allCouponByUser(this.query).then(res=>{
					if(res.state == 'Success'){
						if(val == 1){
							this.buyList = res.content.records
						}else{
							this.freeList = res.content.records
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			
		},
		onPullDownRefresh() {
			this.init()
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
		},
		onPageScroll(e) {
				// if(e.scrollTop >= rpxTopx(658)-84-rpxTopx(80)){
				// 	this.background = true
				// }else{
				// 	this.background = false
				// }
		},
		onShow() {
				this.init()
		},
		onLoad(options) {
			this.goodsTypeObj = JSON.parse(uni.getStorageSync('goodsTypeObj')) 
		},
		
	}
</script>

<style lang="scss">
	.shopDetail {
		background: #fff;
		min-height: 100vh;
		
		.top-box{
			.bg {
				width: 100%;
				height: 240rpx;
				object-fit: cover;
				vertical-align: bottom;
			}

			.shop-info {
				padding: 16rpx 24rpx;
				margin-top: -30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 32rpx;
				position: relative;
				z-index: 2;
				display: flex;
				.shop-logo{
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-top: -28rpx;
				}
				.info-box{
					margin-left: 20rpx;
					color: #222222;
					.title-box{
						display: flex;
						justify-content: space-between;
						.title {
							font-size: 32rpx;
							font-weight: bold;
						}
					}
					.address-box{
						width: 100%;
						display: flex;
						align-items: center;
						// padding: 30rpx 0;
						margin-top: 12rpx;
						box-sizing: border-box;
						font-size: 22rpx;
						.address {
							display: flex;
							align-items: center;
						}
						.distance{
						}
					}
				}

			}
			.shop-desc{
				font-size: 20rpx;
				color: #AAAAAA;
				padding: 0 24rpx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				box-sizing: border-box;
				white-space: nowrap;
			}
		}
		
		.tab-box{
			display: flex;
			height: 80rpx;
			background: #fff;
			margin: 20rpx 24rpx;
			border-bottom: 1rpx solid #F0F0F0;
			.tab{
				flex: 1;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #222222;
			}
			.tab.active{
				font-weight: bold;
				color: #222222;
				position: relative;
				&::before{
					content: '';
					width: 40rpx;
					height: 8rpx;
					background: linear-gradient(135deg, #FFA467 0%, #FFC888 100%);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					position: absolute;
					bottom: 0%;
					left: calc(50% - 20rpx);
				}
			}
		}

		.content {
			padding: 0 30rpx 100rpx;

			.discounts {
				padding: 30rpx 0;
				border-radius: 8px;

				.title {
					font-weight: bold;
					font-size: 28rpx;
				}

				.discounts-item {
					 filter: drop-shadow(0 6rpx 2rpx rgba(0,0,0,.1));
					.card-content.card-used{
						background: url('../../static/card-used.png') no-repeat;
						background-size: 100% 144rpx;
					}
					.card-content{
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: rgb(239, 239, 239);
						background: url('../../static/card.png') no-repeat;
						background-repeat: no-repeat;
						background-size: 100% 144rpx;
						filter: drop-shadow(0rpx 0rpx 6rpx 2rpx rgba(0,0,0,0.1)); 
						border-radius: 16rpx;
						height: 144rpx;
						padding: 0 30rpx 0 48rpx;
						margin-top: 20rpx;
						position: relative;
						box-sizing: border-box;
						.info {
							.title {
								color: #FFAA6C;
								font-size: 28rpx;
								font-weight: bold;
							}
							.desc{
								display: flex;
								align-items: center;
								font-size: 20rpx;	
								color: #AAAAAA;
								.jiantou{
									width: 20rpx;
									height: 20rpx;
									transform: rotateZ(90deg);
									display: block;
									margin-left: 10rpx;
									transition: transform .3s;
								}
							}
							.open{
								.jiantou{
									transform: rotateZ(270deg)!important;
								}
							}
							.red{
								color: $uni-text-primary!important;
							}
							.limit{
								font-size: 20rpx;
								color: #AAAAAA;
								margin:10rpx 0;
							}
							.time {
								color: #9a9a9a;
								font-size: 24rpx;
								margin-top: 15rpx;
							}
						}
						.btn-box{
							.btn {
								width: 118rpx;
								height: 48rpx;
								line-height: 48rpx;
								text-align: center;
								font-size: 24rpx;
								font-weight: bold;
								background: linear-gradient(135deg, #FFA467 0%, #FFC888 100%);
								border-radius: 24rpx;
								color: #fff;
								margin-top: 15rpx;
							}
							
						}
						.num{
							position: absolute;
							white-space: nowrap;
							bottom: 10rpx;
							right: 26rpx;
							font-size: 18rpx;
							color: #222222;
						}
					}
					.card-desc{
						font-size: 20rpx;
						color: #AAAAAA;
						padding: 20rpx 10rpx;
						background: #FFFFFF;
						border-radius: 0rpx 0rpx 16rpx 16rpx;
						.time{
							
						}
						.desc{
							margin-top: 22rpx;
						}
					}
				}
			}
			
			.goods-list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.goods-item{
					background: #F9F9F9;
					// box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0,0,0,0.08);
					border-radius: 16rpx;
					width: 342rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					.goods-info{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 8rpx;
						flex:1;
						.goods-name{
							font-weight: bold;
							color: #222222;
							font-size: 24rpx;
							margin: 16rpx 0;
							overflow: hidden;
							width: 100%;
							text-overflow: ellipsis;
							display: -webkit-box;
							-moz-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
						.type{
							color: #AAAAAA;
							font-size: 20rpx;
						}
						.price{
							font-weight: bold;
							color: #FF4C3A;
							font-size: 28rpx;
							margin-top: 16rpx;
						}
					}
				}
			}
			
		}
		
		.hot-title{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0;
			.icon{
				width: 29rpx;
				height: 35rpx;
			}
			.title{
				font-size: 32rpx;
				color: #0F0F0F;
				font-weight: bold;
				padding: 0 10rpx;
			}
		}
		
		.zs-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 30rpx;
			.left{
				.left-frist{
					padding: 15rpx;
					border-radius: 16rpx;
					width: 332rpx;
					height: 284rpx;
					box-sizing: border-box;
					background: linear-gradient(180deg, #FFDEDE 0%, #FFFFFF 100%);
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
					margin-bottom: 25rpx;
					.top-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							color: #0F0F0F;
							font-size: 26rpx;
						}
						.type-box{
							display: flex;
							align-items: center;
							padding: 0 16rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
							background: linear-gradient(90deg, #FE574C 0%, #FE2A5C 100%);
							.hot{
								width: 16.7rpx;
								height: 21.7rpx;
							}
							.type{
								font-size: 20rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 6rpx;
							}
						}
					}
					.image-box{
						position: relative;
						margin-top: 20rpx;
						.image{
							width: 302rpx;
							height: 182rpx;
							border-radius: 16rpx;
						}
						.btn-box{
							position: absolute;
							left: 0;
							bottom: 10rpx;
							display: flex;
							align-items: center;
							.desc{
								font-size: 24rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 10rpx;
							}
							.btn{
								height: 36rpx;
								line-height: 36rpx;
								padding: 0 14rpx;
								background: $uni-color-primary;
								border-radius: 8rpx;
								color: #FFFFFF;
								font-size: 20rpx;
							}
						}
					}
				}
			}
			.right{
				.frist{
					border: 1px solid #FF612E;
					.info{
						background: #FF612E;
						color: #fff;
						.address{
							color: #fff;
						}
					}
				}
			}
			.store-item {
				width: 335rpx;
				margin-bottom: 25rpx;
				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx;
				background: #fff;
		
				.icon {
					width: 100%;
					height: 300rpx;
					border-radius: 16rpx 16rpx 0 0;
				}
		
				.info {
					padding: 20rpx;
					background: #fff;
					border-radius: 0 0 16rpx 16rpx;
					position: relative;
					.hot-icon{
						position: absolute;
						bottom: 20rpx;
						right: 25rpx;
						width: 44.6rpx;
						height: 48.6rpx;
					}
					.title {
						font-weight: bold;
						width: 100%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.tags{
						display: flex;
						align-items: center;
						.tag-item{
							line-height: 50rpx;
							border-radius: 8rpx;
							padding: 6rpx 0;
							font-size: 24rpx;
							margin-left: 10rpx;
							display: flex;
							.label{
								background: #FFF;
								color: #FE5B47;
								padding: 0 10rpx;
								border-radius: 8rpx 0 0 8rpx;
							}
							.value{
								color: #FFF;
								background: rgba(255, 255, 255, .2);
								padding: 0 14rpx;
								border-radius: 0 8rpx 8rpx 0;
							}
						}
					}
		
					.address {
						display: flex;
						align-items: center;
						margin-top: 15rpx;
						color: #999;
						.position{
							width: 25rpx;
							height: 29rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
		
		#map {
			position: relative;
			top: -100000px;
			left: -1000000px;
		}
		
	}
</style>