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.shopName}}
						</view>
						<image class="tel" src="../../static/phone.png" mode="" v-if="info.serviceTel" @click="handleCall"></image>
					</view>
					<view class="address-box" @click="handleAdress">
						<view class="distance">
							<image class="address-icon" src="../../static/address-icon.png" mode=""></image>
							{{info.address}}
						<!-- <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" v-if="freeList.length">
				<view class="card"  v-for="(item,index) in freeList" :key="index" @click="openPop">
					{{item.couponName}}
				</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="160rpx" height="160rpx" 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="tag" v-if="item.goodsLabel">
									{{item.goodsLabel}}
								</view>
								<view class="unit">
									￥
								</view>
								<view class="price">
									{{item.realPrice}}
								</view>
								<view class="discount-tag" v-if="item.marketPrice">
									<image class="icon" src="@/static/down.png" mode=""></image>
									<view class="discount-num">
										{{((item.realPrice/item.marketPrice)*10).toFixed(1)}}折
									</view>
								</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-title">
						免费领取
					</view>
				<view class="discounts">
					<u-empty marginTop="100" textSize="20" v-if="!freeList.length" mode="data"></u-empty>
					<zs-list mt="0" @load="loadCoupon" :status="status1">
					<view class="discounts-item" v-for="(item,index) in freeList" :key="index" >
							<view class="type-box">
								<view class="price">
									{{item | filterPrice}}
								</view>
								<view class="type">
									{{item | filterType}}
								</view>
							</view>
							<view class="info">
								<view class="card-title">
									{{item.couponName}}
								</view>
								<view class="limit">
									{{item.useStartTime}}后可用
								</view>
								
								<view class="desc">
									{{item.usrDetail || '-'}}
								</view>
							</view>
							<view class="btn" :class="[item.exist > 0?'used':'']" @click="handleBuy(item.id,item.exist)">
								{{item.exist > 0?'已领取':'领取'}}
							</view>
					</view>
					</zs-list>
				</view>
			</u-popup>

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

	</view>
</template>

<script>
	import {getCouponList,claim} from '@/api/coupon.js'
	import { creat,getGoods } from '@/api/goods.js';
	import {shopDetail} from '@/api/shop.js'
	import guid from '@/utils/guid.js'
	import {rpxTopx,transformFromBaiduToGCJ} from '@/utils/tool.js'
	export default {
		data() {
			return {
				open:999,
				info: null,
				status: 'more',
				status1: 'more',
				_mapContext: null,
				query:{
					currentPage:1,
					pageSize:10,
					setMealId:0,
					showType:2,
					shopId:'',
					userId:''
				},
				
				freeList:[],
				buyList:[],
				goodsTypeObj:{},
				showDesc:false,
				show:false,
				currentPage:1
			};
		},
		
		filters: {
			filterPrice: function(val) {
				if(val.couponType == 1){
					return `￥${val.couponDiscount}`
				}else if(val.couponType == 2){
					return `${val.couponDiscount}折`
				}else if(val.couponType == 3){
					return `￥${val.couponDiscount}`
				}
			},
			filterType: function(val) {
				if(val.couponType == 1){
					if(val.couponCondition){
						return `满${val.couponCondition}立减`
					}else{
						return '无门槛立减'
					}
				}else if(val.couponType == 2){
					if(val.couponCondition){
						return `满${val.couponCondition}`
					}else{
						return '无门槛立减'
					}
				}else if(val.couponType == 3){
					if(val.couponCondition){
						return `满${val.couponCondition}立减`
					}else{
						return '无门槛立减'
					}
				}
			},
		},
		methods: {
			handleCall() {
				if(this.info.serviceTel){
					uni.makePhoneCall({
						phoneNumber: this.info.serviceTel //仅为示例
					});
				}else{
					uni.showToast({
						title:'商家没有预留电话',
						icon:'none'
					})
				}
			},
			openPop(){
				this.show = true
			},
			handleDesc(){
				this.showDesc = !this.showDesc
			},
			// 地图中打开商家
			handleAdress() {
				let {latitude,longitude} = transformFromBaiduToGCJ(this.info.mapLat,this.info.mapLon)
				uni.openLocation({
					latitude,
					longitude,
					name:this.info.shopName,
					address:this.info.address,
					success: function () {
						console.log('success');
					}
				});
			},
			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.shopId)
				this.query.shopId = this.info.shopId
				this.query.setMealId = userInfo.setMealId
				this.query.userId = userInfo.userId
				this.getGoods()
				this.getCouponList()//商品1  优惠券 2 
			},

			handleOpen(val,open){
				if(val === this[open]){
					this[open] = 7
				}else{
					this[open] = val
				}
			},
			// 点击领取
			handleBuy(couponId,type) {
				if(!uni.getStorageSync('token')){
					uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							if(res.confirm){
								uni.navigateTo({
									url:'/login/login/login'
								})
							}
						}
					})
				}else{
					if(type == 0){
						claim({couponId}).then(res=>{
							if(res.state == 'Success'){
								uni.showToast({
									title:'领取成功',
									icon:'success'
								})
								this.getCouponList()
							}
						})
					}
				}
			},
			
			goDetail(item){
				let data = item 
				uni.navigateTo({
					url: `../goodsDetail/index?id=${item.goodsId}`,
					
				})
			},
			loadMore(){
				this.getGoods()
			},
			loadCoupon(){
				this.getCouponList()
			},
			getCouponList(val){
				getCouponList(this.query).then(res=>{
					uni.stopPullDownRefresh()
					if(res.state == 'Success'){
						this.freeList = this.freeList.concat(res.content.records)
						this.freeList.length>= res.content.total?this.status1 = 'noMore':this.status1 = 'more'
						this.query.currentPage++
					}
				})
			},
			getGoods(){
				if(this.status == 'noMore') return
				this.status = 'loading'
				getGoods({currentPage:this.currentPage,status:3,shopId:this.info.shopId}).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.shopLabel = res.content.shopLabel
						this.info.detailImg = res.content.detailImg
						this.info.address = res.content.address
						this.info.serviceTel = res.content.serviceTel
						this.info.mapLat = res.content.mapLat
						this.info.mapLon = res.content.mapLon
						this.info.detailContent = res.content.detailContent
						
						uni.setNavigationBarTitle({
							title:res.content.shopName
						})
					}
				})
			}
			
		},
		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{
					flex: 1;
					margin-left: 20rpx;
					color: #222222;
					.title-box{
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						.title {
							font-size: 32rpx;
							font-weight: bold;
						}
						.tel{
							width: 40rpx;
							height: 40rpx;
							margin-left: 20rpx;
						}
					}
					.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;
				flex-wrap: nowrap;
				align-items: center;
				padding: 12rpx 24rpx;
				background: #fff;
				overflow: auto;
				.card{
					flex-shrink: 0;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 14rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid rgba(255,76,57,0.3);
					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: 1;
							/* 设置或检索伸缩盒对象的子元素的排列方式 */
							-webkit-box-orient: vertical;
						}
						
						.price-box{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 60rpx;
							.left{
								display: flex;
								align-items: flex-end;
								.tag{
									text-align: center;
									font-size: 20rpx;
									color: #FFFFFF;
									background: $uni-color-primary;
									padding: 2rpx 10rpx;
									border-radius: 8rpx 8rpx 8rpx 8rpx;
								}
								.unit{
									font-size: 20rpx;
									color: $uni-color-primary;
									font-weight: bold;
									margin-left: 10rpx;
								}
								.price{
									font-size: 28rpx;
									color: $uni-color-primary;
									font-weight: bold;
									line-height: 30rpx;
								}
								.discount-tag{
									display: flex;
									align-items: center;
									width: 92rpx;
									height: 28rpx;
									line-height: 28rpx;
									background: #FFF6F5;
									border-radius: 8rpx 8rpx 8rpx 8rpx;
									border: 1rpx solid $uni-color-primary;
									.icon{
										width: 30.5rpx;
										height: 28rpx;
									}
									.discount-num{
										flex: 1;
										text-align: center;
										font-size: 20rpx;
										color: $uni-color-primary;
									}
								}
								.old-price{
									font-size: 20rpx;
									color: #AAAAAA;
									text-decoration: line-through;
									margin-left: 12rpx;
								}
							}
							.right{
								font-size: 24rpx;
								color: #AAAAAA;
							}
						}
						
					}
				}
			}
		
		.discounts-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
			margin-bottom: 28rpx;
			padding-top: 28rpx;
		}
		.discounts {
			padding: 0 24rpx 28rpx;
			max-height: 1000rpx;
			min-height: 600rpx;
			overflow: auto;
			.discounts-item {
				margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					background-color: rgb(239, 239, 239);
					background: url('../../static/new-card.png') no-repeat;
					background-repeat: no-repeat;
					background-size: 100% 144rpx;
					border-radius: 16rpx;
					height: 144rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					.type-box{
						text-align: center;
						.price{
							ont-size: 40rpx;
							color: #FF4D3A;
						}
						.type{
							font-size: 20rpx;
							color: #AAAAAA;
							margin-top: 12rpx;
						}
					}
					.info {
						flex: 1;
						margin-left: 40rpx;
						.card-title {
							font-size: 28rpx;
							color: #222222;
						}
						.desc{
							font-size: 20rpx;	
							color: #AAAAAA;
						}
						.limit{
							font-size: 20rpx;
							color: #AAAAAA;
							margin:10rpx 0;
						}
					}
						.btn {
							width: 118rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							font-size: 24rpx;
							background: #EE4320;
							border-radius: 24rpx;
							color: #FFF;
							box-sizing: border-box;
						}
						.btn.used{
							border: 2rpx solid #EE421F;
							color: #EE421F;
							background: none;
						}
			}
		}
		
		.map {
			position: relative;
			top: -100000px;
			left: -1000000px;
		}
		
	}
</style>