ec.uniapp-master/pages/other/vip/vip.vue

<template>
<view id="vip-introduce">
    <view class="content-top">
        <image mode="widthFix" src="https://cdn.ibrand.cc/%E4%BC%9A%E5%91%98%E8%AF%A6%E6%83%85-rtrete_02.png"></image>
        <image mode="widthFix" src="https://cdn.ibrand.cc/%E4%BC%9A%E5%91%98%E8%AF%A6%E6%83%85-443_03.png"></image>
    </view>
    <view class="content-center">
        <image mode="widthFix" class="imgs" src="https://cdn.ibrand.cc/%E6%96%B0%E4%BA%BA%E9%A6%96%E5%8D%9555.png"></image>
        <view class="goods-list">
            <view class="item" v-for="(item, index) in goodsList" :key="index" @tap="jumpDetail" :data-id="item.id">
                <view class="left-box">
                    <image :src="item.img"></image>
                </view>
                <view class="right-box">
                    <view class="name">{{item.name}}</view>
                    <view style="height:20px;">
                        <view class="sale-box" v-if="item.is_first_order_free">
                            <view class="left">首单全返</view>
                            <view class="right">收货立返</view>
                        </view>
                    </view>
                    <view class="money-buy">
                        <view class="money">￥ {{item.sell_price}}</view>
                        <view class="buy">点击购买</view>
                    </view>
                </view>
                <view class="small-txt" v-if="item.is_first_order_free">
                    收货全额返
                </view>
            </view>
        </view>
        <image mode="widthFix" src="https://cdn.ibrand.cc/%E8%AF%B4%E6%98%8E.png"></image>
    </view>

    <!--固定的分享盒子-->
    <view class="share-fixed" @tap="changeShare">
        <view class="iconfont icon--fenxiang"></view>
        <view class="txt">分享</view>
    </view>

    <!--弹出分享部分-->
    <view class="maks share" :class="show_share ? 'cur' : ''" @tap="changeShare">

    </view>

    <view class="share-box" :class="show_share ? 'cur' : ''">
        <button class="shaer-item" open-type="share">
            分享给好友
        </button>
        <view class="shaer-item mx-1px-top" @tap="getShearImg">
            生成海报
        </view>
        <view class="shaer-item clear" @tap="changeShare">
            取消
        </view>
    </view>
</view>
</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';

export default {
  data() {
    return {
      goodsList: [],
      show_share: false
    };
  },

  onShareAppMessage(res) {
    this.changeShare();
    let agent_code = this.data.userInfo ? this.data.userInfo.agent_code || '' : '';
    return {
      title: '新人专享，不玩套路，不限金额，全额免单！',
      // path: '/' + this.router + '?id=' + this.data.id,
      path: `/pages/other/vip/vip?agent_code=${agent_code}`
    };
  },

  onLoad(e) {
    this.getSchemesList();
    this.init(e);
  },

  components: {},
  props: {},
  methods: {
    // 弹出分享
    changeShare() {
      this.setData({
        show_share: !this.data.show_share
      });
    },

    //获取商品列表
    getSchemesList() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      sandBox.get({
        api: 'api/free/goods/list'
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.setData({
              goodsList: res.data
            });
          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }

          wx.hideLoading();
        } else {
          wx.hideLoading();
          wx.showModal({
            content: '请求失败',
            showCancel: false
          });
        }
      }).catch(rej => {
        wx.hideLoading();
        wx.showModal({
          content: '请求失败',
          showCancel: false
        });
      });
    },

    //跳到详情页
    jumpDetail(e) {
      let id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/store/detail/detail?id=' + id
      });
    },

    getShearImg() {
      wx.navigateTo({
        url: '/pages/other/shareImg/shareImg'
      });
    },

    // 获取初始化数据
    init(e) {
      var token = cookieStorage.get('user_token');
      var agent_code = '';

      if (e.agent_code) {
        agent_code = e.agent_code;
      }

      if (e.scene) {
        var scene = decodeURIComponent(e.scene);
        var sceneArr = scene.split(',');

        if (sceneArr.length > 0) {
          agent_code = sceneArr[0];
        }
      }

      sandBox.get({
        api: 'api/system/init'
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            cookieStorage.set('init_info', res.data.h5_share);
            cookieStorage.set('service_info', res.data.online_service_data);
            cookieStorage.set('distribution_valid_time', res.data.distribution_valid_time);
            cookieStorage.set('init', res.data);
            var service_info = cookieStorage.get('service_info');
            this.setData({
              service_info: service_info
            });
            this.setCode(e);
          } else {
            this.setCode(e);
          }
        } else {
          this.setCode(e);
        }
      });
    },

    setCode(e) {
      const timeMap = {
        y: 31536000000,
        m: 2592000000,
        d: 86400000,
        h: 3600000,
        n: 60000,
        s: 1000
      }; // 默认有效期为7天

      var valid_time = "";
      var clerk_id = e.clerk_id || "";
      var shop_id = e.shop_id || "";
      var agent_code = e.agent_code || '';

      if (e.scene) {
        var scene = decodeURIComponent(e.scene);
        var sceneArr = scene.split(',');

        if (sceneArr.length > 0) {
          agent_code = sceneArr[0];
        }
      }

      var cook_shop_id = cookieStorage.get('shop_id');

      if (!cookieStorage.get('distribution_valid_time')) {
        valid_time = 10080;
      } else {
        valid_time = cookieStorage.get('distribution_valid_time');
      }

      console.log('这个是时间', valid_time);
      let timeStamp = new Date().getTime();
      timeStamp += timeMap.n * valid_time; // 当url上shop_id与缓存中shop_id不一致时，需要清除clerk_id。以此保证shop_id与clerk_id对应

      var cook_clerk_id = cookieStorage.get('clerk_id');

      if (cook_shop_id != shop_id && cook_clerk_id) {
        cookieStorage.clear('clerk_id');
      }

      if (agent_code) {
        cookieStorage.set('agent_code', agent_code, valid_time + 'n'); // 如果有agent_code就将这次进入的时间缓存

        cookieStorage.set('agent_code_time', timeStamp, valid_time + 'n'); // 如果有agent_code并且有coupon_agent_code就将coupon_agent_code清除，保证agent_code为第一位

        if (cookieStorage.get('coupon_agent_code')) {
          cookieStorage.clear('coupon_agent_code');
        }
      }

      if (clerk_id) {
        cookieStorage.set('clerk_id', clerk_id, valid_time + 'n');
      }

      if (shop_id) {
        cookieStorage.set('shop_id', shop_id, valid_time + 'n'); // 如果有shop_id就将这次进入的时间缓存

        cookieStorage.set('shop_id_time', timeStamp, valid_time + 'n');
      }
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  },
  computed: {},
  watch: {}
};
</script>
<style>
#vip-introduce .content-center image,#vip-introduce .content-top image{width:100%;vertical-align:middle}#vip-introduce .content-center{background-color:#DC9D72}#vip-introduce .content-center .imgs{padding:0 13px;box-sizing:border-box}#vip-introduce .content-center .goods-list{padding:5px 15px 15px}#vip-introduce .content-center .goods-list .item{display:flex;align-items:center;padding:15px;background-color:#FFF;position:relative}#vip-introduce .content-center .goods-list .item .small-txt{position:absolute;background-color:#CDA76E;color:#FFF;font-size:12px;top:0;left:0;padding:3px 15px}#vip-introduce .content-center .goods-list .item .left-box{width:90px;height:90px}#vip-introduce .content-center .goods-list .item .left-box image{width:100%;height:100%;vertical-align:middle}#vip-introduce .content-center .goods-list .item .right-box{flex:1;overflow:hidden;padding-left:15px}#vip-introduce .content-center .goods-list .item .right-box .name{color:#111;font-size:15px;line-height:22px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:15px}#vip-introduce .content-center .goods-list .item .right-box .sale-box{display:flex;align-items:center;justify-content:center;border:1px solid #CDA76E;border-radius:14px;overflow:hidden;font-size:10px;width:50%;line-height:18px}#vip-introduce .content-center .goods-list .item .right-box .sale-box .left{color:#FFF;background-color:#CDA76E;flex:1;text-align:center}#vip-introduce .content-center .goods-list .item .right-box .sale-box .right{color:#CDA76E;background-color:#FFF;flex:1;text-align:center}#vip-introduce .content-center .goods-list .item .right-box .money-buy{margin-top:10px;display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#FB5054}#vip-introduce .content-center .goods-list .item .right-box .buy{border-radius:12px;background-color:#E7031C;color:#FFF;font-size:13px;line-height:18px;padding:3px 16px}#vip-introduce .share-fixed{position:fixed;right:0;bottom:130px;width:50px;padding:6px 0 4px;background:linear-gradient(304deg,#ffcca4 0,#ecd0b8 100%);box-shadow:0 -4px 26px 0 rgba(0,0,0,.11);border-radius:4px;text-align:center;font-size:12px}#vip-introduce .share-fixed .iconfont{padding-bottom:3px}#vip-introduce .maks{position:fixed;bottom:0;width:100%;height:100%;z-index:40;background:rgba(0,0,0,.6);opacity:1;transition:opacity .3s ease;display:none}#vip-introduce .maks.share{background:0 0}#vip-introduce .maks.cur{display:block}#vip-introduce .share-box{background:#CDCDD1;position:fixed;bottom:0;width:100%;height:0;z-index:50;transition:all .3s linear}#vip-introduce .share-box .shaer-item{height:50px;line-height:50px;text-align:center;font-size:18px;color:#2E2D2D;background:#fff;border-radius:0}#vip-introduce .share-box .shaer-item:after{border:none}#vip-introduce .share-box .shaer-item.clear{margin-top:5px;color:#9B9B9B}#vip-introduce .share-box.cur{height:155px}
</style>