merchantListIndex.vue

<template>
	<!-- 商户列表首页 -->
	<view class="wrap">
		<view class="banner">
			<u-swiper :list="list" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="350">
					<view slot="indicator" class="indicator-num">
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
					</view>
			</u-swiper>
		</view>

		<view class="search">
			<view class="search-wrap">
				<view class="search-left">
					重庆
					<view class="line"></view>
				</view>

				<view class="search-right">
					<input class="search-input" placeholder="景区关键词搜索" v-model="searchData" />
					<text class="search-btn" @click="initList('','',true)">搜索</text>
				</view>
			</view>
		</view>

		<view class="merchant-wrap">
			<view>
				<!-- <u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper> -->
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height:100%;width: 100%;">
						<view class="merchant-list" v-for="(item,index) in scenicList" :key='index' @click="goProduct(item.id)" >
							<view class="list-left">
								<image :src="item.imgUrl"></image>
							</view>
							
							<view class="list-right">
								<view class="right1">
									{{item.name}}
								</view>
								
								<view class="right2">
									<view class="right2-left">
										<text v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">{{items}}</text>
									</view>
									
									<view class="right2-right" v-if="showDistance">
										距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km
									</view>
								</view>
								
								<view class="right3">
									<text class="right3-text" v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">
									{{items}}
									</text>
									<text @click.stop="clikDetail(item.id)">
										详情
									</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
								
								<view class="right4">
									<view class="right4-left">
										<!-- <text>已售10W+</text> -->
										{{item.couponName||'优惠'}}
									</view>
									<view class="right4-right">
										<text class="right4-price1">¥{{parseFloat(item.originalPrice)}}</text>
										<text class="right4-price2">
											¥<text style="font-size: 40rpx;font-weight: bold;">{{parseFloat(item.sellingPrice)}}</text> 
										</text>
										<text style="color: #ccc;">起</text>
									</view>
								</view>
							</view>
						</view>
						<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
					</scroll-view>
					
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<u-empty text="空空如也..." mode="list"></u-empty>
				</swiper-item>
				
				<swiper-item class="swiper-item">
					<u-empty text="空空如也..." mode="list"></u-empty>
				</swiper-item>
			</swiper>
		</view>
		<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
		<!-- 券1（抵用券） -->
		<view class="coupon-wrap" v-if="showCoupon1" style="z-index: 101;">
			<view @click="showCoupon1=false">
				<view style="position: relative;">
					<image src="@/static/img/coupon/coupon1.png" mode="widthFix"></image>
					<view class="coupon1-content">
						<image src="@/static/img/coupon/coupon-new.png" mode="widthFix" style="width: 356rpx;">
						</image>
						<view style="display: flex;justify-content: center;margin: 30rpx 0 70rpx 0;">
							<view class="coupon1-price">
								<view>
									<text style="font-size: 52rpx;font-weight: bold;">{{couponPrice1}}</text>元
									<text style="margin-left: 20rpx;font-weight: bold;">购买自动抵</text>
								</view>		
								<view style="margin-top: 10rpx;">
									<text>使用景区：两江夜游、云端之眼</text>
								</view>
							</view>
						</view>
						<view class="coupon1-btn">
							<text class="btn">开心收下</text>
						</view>
					</view>
					
				</view>
				<view style="text-align: center;">
					<u-icon name='close-circle' size='48' color="#ffffff"></u-icon>
				</view>
			</view>
			
		</view>
		<!-- 券2(代金券) -->
		<view class="coupon-wrap" v-if="showCoupon2">
			<view @click="showCoupon2=false">
				<view style="text-align: right;">
					<u-icon name='close-circle' size='48' color="#ffffff"></u-icon>
				</view>
				<image src="@/static/img/coupon/coupon2.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
  components: {
	  merchantDetail
  },
  data() {
    return {
      showCoupon1:false,//是否显示券1
      couponPrice1:0,//券价格
      showCoupon2:false,//是否显示券2
      detailData:'',//详情数据
      scenicList:[],//景区数据
      currentNum:0,//轮播图下标
      list: [//轮播图图片
        {
          url: 'http://lx.pangdly.com/img/home1.69efcf8.jpg'
        },
        {
          url: 'http://lx.pangdly.com/img/home2.2ec1a04.jpg'
        },
        {
          url: 'http://lx.pangdly.com/img/home3.df60ec3.jpg'
        }
      ],
      tabList: [{
        name: '热门景点'
      }, {
        name: '本地必吃'
      }, {
        name: '特价酒店'
      }],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      searchData:'',//搜索框的值
      showDistance:false,//定位成功显示距离
    }
  },
  onLoad(option) {
    //获取公司Id,保存到本地，支付等逻辑需要入口companyId
    this.$commonjs.getCompanyId(option)
    let token = uni.getStorageSync('token')||''
    if(token){
      uni.getLocation({
			 type: 'wgs84',
			 success:res=> {
			   let latitude = res.latitude//纬度
			   let longitude = res.longitude //经度
				 this.showDistance=true
			    this.initList(latitude,longitude,false)
			  },
			  fail:res=>{
			    let latitude=''
			    let longitude=''
			    this.initList(latitude,longitude,false)
			  }
      })
      this.giveCoupon()
    }
  },
  methods: {
    //---tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    //---swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    //---由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    //---跳转产品页面
    goProduct(merchantId){
      uni.navigateTo({
        url:'/pages/combination/distributionCombiChoose/distributionCombiChoose?merchantId='+merchantId
      })
    },
    //---加载数据
    initList(latitude,longitude,click){
      let data = {
        userlongitude:longitude, //经度
        userlatitude:latitude, //纬度
        type: 1, //类型：1景区、2酒店、餐饮
        pageIndex:1,//第几页
        pageSize:20, //每页有多少条
      }
      if(click){
        //如果是点击进行搜索
        data.search=this.searchData
      }
      this.$request('scenic/user/merchant/findMerchantList', data).then(res => {
        uni.hideLoading()
			  if (res.code == '00') {
			    this.scenicList=res.data.list||[]
          this.scenicList.forEach((item, index) => {
            item.tag = item.tag.split(',')
          })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      }).catch(err=>{
        uni.hideLoading()
      })
    },
    //---送券
    giveCoupon(){
		  let data={
		    pageCode:'merchantListIndex',//常量，写死
		    marketingStatus:1,
		    userId:uni.getStorageSync('userId')||'',
		    openid:uni.getStorageSync('openid')||''
		  }
		  this.$request('scenic/market/findPageMarket',data).then((res)=>{
        let list=res.data||[]
		    if(list.length>0){
          list.forEach(item=>{
            if(item.couponType==1){
              //抵用券
              this.showCoupon1=true
              this.couponPrice1=item.couponPrice
            }
            if(item.couponType==3){
              //代金券
              this.showCoupon2=true	
            }
          })
		    }
		  })
    },
    //---点击详情
    clikDetail(merchantId){
      this.$refs.merchantDetail.showPop=true
		  this.initDetail(merchantId)
    },
    //---初始化详情
    initDetail(merchantId){
		  let data={
		    userId:uni.getStorageSync('userId')||'',
		    openid:uni.getStorageSync('openid')||'',
		    id:merchantId,//商户id
		    isDetail:1,//商户详情
		  }
      this.detailData=''
		  this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
		    if(res.code=='00'){
          this.detailData=res.data
		    }else{
		      uni.showToast({
		        title: res.message,
		        icon: 'none'
		      })
		    }
		  })
    },
  }
}
</script>

<style scoped lang="scss">
.wrap{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
}
.search {
	padding: 0 24rpx;
	position: relative;
	top: -40rpx;
}
.search-wrap {
	background: #fff;
	border-radius: 44rpx;
	box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	height: 80rpx;
	padding: 0 20rpx;
}
.search-left {
	display: flex;
}
.line {
	width: 2rpx;
	background: #ccc;
	margin: 0 20rpx;
}
.search-right {
	display: flex;
	flex: 1;
	align-items: center;
}
.search-input {
	flex: 1;
	padding-right: 40rpx;
}
.search-btn {
	background: $theme;
	color: #fff;
	border-radius: 32rpx;
	padding: 12rpx 24rpx;
}
.merchant-wrap{
	display: flex;
	flex: 1;
	flex-direction: column;
}
.swiper-box{
	flex: 1;
}
.merchant-list{
	padding: 0 24rpx;
	margin-top: 32rpx;
	display: flex;
	font-size: 24rpx;
}
.list-left image{
	width: 200rpx;
	height: 200rpx;
	border-radius: 16rpx;
	margin-right: 20rpx;
}
.list-right{
	flex: 1;
	width: 0;
}
.right1{
	width: 100%;
	color: #191919;
	font-weight: bold;
	font-size: 32rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.right2{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
}
.right2-left text{
	color: $theme;
	border: 1px solid $theme;
	font-size: 20rpx;
	padding: 2rpx 4rpx;
	border-radius: 2rpx;
}
.right2 text:not(:last-child){
	margin-right: 10rpx;
}
.right2-right{
	color: #999999;
}
.right3{
	margin-top: 16rpx;
	display: flex;
}
.right3-text::after{
	display: inline-block;
	content: "";
	height: 20rpx;
	width: 2rpx;
	background: #ccc;
	margin: 0 10rpx;
}
.right4{
	display: flex;
	margin-top: 10rpx;
	justify-content: space-between;
	align-items: center;
}
.right4-left{
	color: $red;
}
.right4-right{
	flex-shrink: 0;
}
.right4-price1{
	 color: #999;
	 text-decoration:line-through;
	 font-size: 28rpx;
}
.right4-price2{
	color: $red;
	margin: 0 10rpx;
}
// 券
.coupon-wrap{
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content:center;
	align-items: center;
}

.coupon1-content{
	 position: absolute;
	 top: 16vh;
	 color: #ffffff;
	 left: 80rpx;
	 width: 100%;
	 left: 0;
	 text-align: center;
}
.coupon1-price{
	width: 465rpx;
	height:155rpx;
	padding: 10rpx 20rpx;
	background: url('/static/img/coupon/redEnvelope.png') no-repeat;
	background-size: 100% 100%;
	text-align: left;
}
.coupon1-btn{
	width: 100%;
}
.btn{
	padding: 16rpx 60rpx;
	border-radius:30rpx;
	background: linear-gradient(#F19D38,#EB4926);
	font-weight: bold;
	font-size: 30rpx;
}
</style>