Client-Teapay/src/pages/orderingfood/merchantlist.vue

<template>
  <div class="merchantlist">
    <div class="head">
      <div class="bg"></div>
      <div class="card">
        <div class="card_tit">消费积分账户</div>
        <div class="msg"><span>支持主流消费场所使用</span><span class="iconfont">&#xe631;</span></div>
        <div class="m">
          <div class="tit">账户余额</div>
          <div class="balance f_dinB">{{ local_uinfo.integral }}</div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="li_item" v-for="(i,s) in merchantList" :key="s" @click="goMerchant(i)">
        <div class="logo_img">
          <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/4820537f88796ee05a37530be80976921979f7f9png" alt="">
        </div>
        <div class="con_box">
          <div class="p1 ellipsis">{{ i.restaurant_name }}</div>
          <div class="p2">{{ i.restaurant_address }}</div>
          <div class="p3">{{ $h.Div(i.distance, 1000).toFixed(2) }} km</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import QQMapWX from '@/static/utils/qqmap-wx-jssdk.min.js'
import { post } from "@/request/api.js";
export default {
  name: "merchantlist",
  props: {},
  components: {},
  data() {
    return {
      Query: {
        lat: 113.9367,
        lng: 22.5325,
        page: 1,
        rows: 20
      },
      merchant: {},
      merchantList: [],
      local_uinfo: {},
    };
  },
  methods: {
    // 获取附近商家
    getlists(){
      post("local/getMerchant",this.Query).then(res => {
        if(res.code == 0){
          let merchantList = res.data.data
          delete res.data.data
          this.merchant = res.data
          this.merchantList = [ ...this.merchantList, ...merchantList ]
          this.Query.page++
        }
      })
    },
		// 获取当前位置
		getLocation() {
			const that = this;
			// 获取位置信息
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					// 经纬度转化地址信息
					// const qqmap = require('@/pages/qqmap-wx-jssdk.min.js');
					const showmap = new QQMapWX({
						key: 'NWSBZ-ZUME4-LLTU6-XSQGB-YBKAT-U4FCZ'
					});
					// 逆地址解析reverseGeocoder
					showmap.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success(result) {
							const adres = result.result.location;
              that.Query = { ...that.Query, ...adres };
              that.getlists();
						}
					});
				},
				fail(e) {
					let errMsgTit = '';
					if (e.errMsg === 'getLocation:fail auth deny') {
						errMsgTit = '你已拒绝授权，是否跳转至设置页面开启权限';
					} else {
						errMsgTit = '操作频繁提示，建议搭配onLocationChange()使用';
					}
					uni.showModal({
						title: '提示',
						content: `${errMsgTit}`,
						success(res) {
							if (res.confirm) {
								// 获取设置页面权限信息
								uni.getSetting({
									success(res) {
										console.log(res.authSetting);
										// 判断是否开启获取位置权限
										if (!res.authSetting['scope.userLocation']) {
											// 如果没有开启，点击确认后打开设置页面
											uni.openSetting({});
										}
									}
								});
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			});
		},
    // 去店铺
    goMerchant(da) {
      uni.setStorageSync("MerchantItem",da)
      this.goto("/pagesB/orderingfood/orderingfood",{
        brand_id:da.brand_id,
        restaurant_id:da.restaurant_id
      })
    },
    // 是否激活本地生活
    isActivation(){
      post("local/isActivation",this.Query).then(res => {
        if(res.code == -1){
          this.goto("/pagesB/orderingfood/activation")
        }else{
          this.getLocation();
          this.getLU();
        }
      })
    },
    getLU(){
      post("local/userinfo").then(res=>{
        if(res.code == 0){
          this.local_uinfo = res.data
        }
      })
    }
  },
  onShow() {
    this.isActivation();
  },
  mounted() {},
  onReachBottom() {
    if(this.Query.page < this.merchant.last_page) this.getlists();
  },
};
</script>

<style scoped lang='scss'>
.head{
  .bg{
    height: 300rpx;
    background-image: url("http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/a5500a3c12f967a83d123f774b333e2b2d9729bcpng");
    background-size: 100% 100%;
  }
  .card{
    width: calc(100% - 60rpx);
    margin: -110rpx 30rpx 0;
    background-color: #473D31;
    // background: url("~@/static/my/myBack.png") no-repeat;
    // background-size: 100% 100%;
    border-radius: 16rpx;
    padding: 28rpx 30rpx;
    height: 280rpx;
    position: relative;
    .card_tit{
      font-size: 36rpx;
      color: #C99D60;
    }
    .msg{
      color: #C99D60;
      font-size: 20rpx;
      margin-top: 8rpx;
      .iconfont{
        color: #C99D60;
        font-size: 28rpx;
        margin-left: 6rpx;
      }
      span{
        vertical-align: middle;
      }
    }
    .m{
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
    }
    .tit,.balance{
      color: #C99D60;
      text-align: right;
    }
    .balance{
      font-size: 40rpx;
      margin-top: 8rpx;
      &:before {
        content: "￥";
        font-size: 24rpx;
      }
    }
  }
}
.list{
  padding: 30rpx;
  .li_item{
    margin-bottom: 20rpx;
    padding: 28rpx 32rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);
  }
  .logo_img,.con_box{
    display: inline-block;
    vertical-align: top;
  }
  .logo_img{
    img{
      height: 180rpx;
      width: 180rpx;
      border-radius: 10rpx;
    }
  }
  .con_box{
    height: 180rpx;
    width: calc(100% - 180rpx - 28rpx);
    margin-left: 28rpx;
    position: relative;
    .p1{
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 6rpx;
    }
    .p2{
      font-size: 24rpx;
      color: #999;
    }
    .p3{
      font-size: 24rpx;
      color: #666;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>