discounts-minapp/detail/shopDetail/shopDetail.vue

<template>
	<view class="shopDetail">
		<view class="top-box">
			
			<image class="bg target" :src="info.detailImg" 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">
						<image class="address-icon" src="../../static/address-icon.png" mode=""></image>	距你直线距离{{(info.shopVo.distance/1000).toFixed(2)}}km &nbsp;·&nbsp;{{info.district}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="card-box">
				<view class="card"  v-for="(item,index) in freeList" :key="index" @click="openPop">
					{{item | filterCard}}
				</view>
				
			</view>
			<view class="desc-box" :class="[showDesc?'':'hidden']" v-if="info.detailContent">
				
				<view class="shop-desc">
					{{info.detailContent|| ''}}
				</view>
				<image class="icon" @click="handleDesc" src="../../static/shop-desc.png" mode=""></image>
			</view>
		</view>
		
		<zs-list class="goods-list" mt="0" @load="loadMore" :status="status">
			<!-- <view class="goods-list"> -->
				<view class="goods-item" v-for="item in buyList" :key="item.goodsId" @click="goDetail(item)">
					<zs-img  :src="item.goodsImg" width="200rpx" height="200rpx" radius="full"  mode="" ></zs-img>
					<view class="info">
						<view class="title">
							{{item.goodsName}}
						</view>
						<view class="desc">
							{{item.goodsDescribe}}
						</view>
						<view class="price-box">
							<view class="left">
								<view class="unit">
									￥
								</view>
								<view class="price">
									{{item.realPrice}}
								</view>
								<view class="old-price">
									市场价 ￥{{item.marketPrice}}
								</view>
							</view>
							
							<view class="right">
								销量{{item.saleNum}}
							</view>
						</view>
					</view>
				</view>
			<!-- </view> -->
			</zs-list>
			<u-empty marginTop="100" textSize="20" v-if="!buyList.length" mode="data"></u-empty>
		
		<u-popup :show="show" round="32rpx" mode="bottom" @close="show = false" @open="openPop">
				<view class="discounts">
					<view class="title">
						免费领取
					</view>
					<u-empty marginTop="100" textSize="20" v-if="!freeList.length" mode="data"></u-empty>
					<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="price">
									{{item | filterCard}}
							</view>
							<view class="info">
								<view class="card-title">
									{{item.goodsName}}
								</view>
								<view class="limit">
									{{item.useType | filterType(item)}}
								</view>
								<view class="desc">
									{{item.validType | filterType1(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>
			</u-popup>

		<!-- 地图 -->
		<map v-show="false" class="map" id="map"></map>

	</view>
</template>

<script>
	import { allCouponByUser,creat,getGoods } from '@/api/goods.js';
	import {shopDetail} from '@/api/shop.js'
	import guid from '@/utils/guid.js'
	import {rpxTopx} from '@/utils/tool.js'
	export default {
		data() {
			return {
				open:999,
				info: null,
				status: 'more',
				_mapContext: null,
				query:{
					currentPage:1,
					pageSize:99,
					setMealId:0,
					goodsType:2,
					shopId:'',
					userId:''
				},
				
				freeList:[],
				buyList:[],
				goodsTypeObj:{},
				showDesc:false,
				show:false,
				currentPage:1
			};
		},
		
		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
				}
			},
			filterCard:function(val){
				if(val.goodsCode == '102'){
					return `减${val.discount}`
				}else if(val.goodsCode == '103'){
					return `${val.discount/10}折`
				}else if(val.goodsCode == '104'){
					return `满${val.condition}减${val.discount}`
				}
			}
		},
		methods: {
			openPop(){
				this.show = true
			},
			handleDesc(){
				this.showDesc = !this.showDesc
			},
			// 地图中打开商家
			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.shopDetail(this.info.shopVo.id)
				this.query.shopId = this.info.shopVo.id
				this.query.setMealId = userInfo.setMealId
				this.query.userId = userInfo.userId
				this.getGoods()
				this.allCouponByUser(2)//商品1  优惠券 2 
			},

			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'
					// })
				}
			},
			
			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?id=${item.goodsId}`,
					// success: function(res) {
					//   // 通过eventChannel向被打开页面传送数据
					//   res.eventChannel.emit('goodsInfo', data)
					// }
				})
			},
			loadMore(){
				this.getGoods()
			},
			allCouponByUser(val){
				allCouponByUser(this.query).then(res=>{
					if(res.state == 'Success'){
							this.freeList = res.content.records
						uni.stopPullDownRefresh()
					}
				})
			},
			getGoods(){
				if(this.status == 'noMore') return
				this.status = 'loading'
				getGoods({currentPage:this.currentPage,status:3,shopId:this.info.shopVo.id}).then(res=>{
					if(res.state == 'Success'){
						this.buyList = this.buyList.concat(res.content.records)
						console.log(res.content.total,this.buyList.length);
						if(res.content.total>this.buyList.length){
							this.status = 'more'
							this.currentPage++
						}else{
							this.status = 'noMore'
						}
					}
				})
			},
			shopDetail(shopId){
				shopDetail({shopId}).then(res=>{
					if(res.state == 'Success'){
						this.info.detailImg = res.content.detailImg
					}
				})
			}
			
		},
		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 {
		min-height: 100vh;
		background: #F9F9F9;
		.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-weight: 300;
						font-size: 22rpx;
						color: #222222;
						.distance{
							display: flex;
							align-items: center;
							.address-icon{
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
							}
						}
					}
				}

			}
			
			.card-box{
				display: flex;
				align-items: center;
				padding: 12rpx 24rpx;
				background: #fff;
				.card{
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 14rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #FF4C39;
					color: #FF4C39;
					font-size: 20rpx;
					margin-right: 12rpx;
				}
			}
			.desc-box.hidden{
				.shop-desc{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.icon{
					transform: rotateZ(0deg);
				}
			}
			.desc-box{
				position: relative;
				padding-right: 30rpx;
				background: #fff;
				padding-bottom: 24rpx;
				.shop-desc{
					font-size: 20rpx;
					color: #AAAAAA;
					padding: 0 24rpx;
					width: 100%;
					box-sizing: border-box;
				}
				.icon{
					position: absolute;
					right: 0;
					top: 0;
					transform-origin: center;
					transform: rotateZ(180deg);
					transition: transform .3s;
					width: 32rpx;
					height: 32rpx;
				}
			}
			
		}
		

			.goods-list{
				.goods-item{
					display: flex;
					padding: 24rpx;
					background: #fff;
					border-radius: 16rpx;
					margin: 20rpx 24rpx 0;
					.info{
						flex: 1;
						padding-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						position: relative;
						.title{
							font-size: 28rpx;
							font-weight: bold;
							width: 340rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 10rpx;
						}
						
						.desc{
							font-size: 24rpx;
							color: #AAAAAA;
							overflow: hidden;
							text-overflow: ellipsis;
							/* 弹性伸缩盒子模型显示 */
							display: -webkit-box;
							/* 限制在一个块元素显示的文本的行数 */
							-webkit-line-clamp: 2;
							/* 设置或检索伸缩盒对象的子元素的排列方式 */
							-webkit-box-orient: vertical;
						}
						
						.price-box{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.left{
								display: flex;
								align-items: flex-end;
								.unit{
									font-size: 20rpx;
									color: $uni-color-primary;
									font-weight: bold;
								}
								.price{
									font-size: 32rpx;
									color: $uni-color-primary;
									font-weight: bold;
								}
								.old-price{
									font-size: 20rpx;
									color: #AAAAAA;
									text-decoration: line-through;
									margin-left: 12rpx;
								}
							}
							.right{
								font-size: 24rpx;
								color: #AAAAAA;
							}
						}
						
					}
				}
			}
		
		.discounts {
			padding: 28rpx 24rpx;
			max-height: 1000rpx;
			min-height: 600rpx;
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
				margin-bottom: 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/new-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 24rpx;
					margin-top: 20rpx;
					position: relative;
					box-sizing: border-box;
					.price{
						width: 150rpx;
						text-align: center;
						font-weight: 400;
						font-size: 40rpx;
						color: $uni-color-primary;
					}
					.info {
						flex: 1;
						padding-left: 28rpx;
						.card-title {
							font-weight: 400;
							font-size: 28rpx;
							color: #222222;
						}
						.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: 120rpx;
							height: 48rpx;
							border-radius: 24rpx;
							background: $uni-color-primary;
							line-height: 48rpx;
							text-align: center;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
						}
						
					}
					.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;
					}
				}
			}
		}
		
		.map {
			position: relative;
			top: -100000px;
			left: -1000000px;
		}
		
	}
</style>