ec.uniapp-master/pages/user/openVip/openVip.vue

<template>
<view id="open_vip">
    <view class="recruit">
        <view class="banner-img">
            <image mode="widthFix" src="https://cdn.ibrand.cc/00434kkk.png"></image>
        </view>
        <view class="detail-box">
            <view class="item">
                <view class="title">
                    <span class="left-dot"></span>
                    选择商品即可开通会员
                    <span class="right-dot"></span>
                </view>
                <view class="bg-li" :data-id="item.id" @tap="jumpDetail" v-for="(item, index) in schemesList" :key="index" >
                    <view class="info">
                        <view class="left-box">
                            <image :src="item.img"></image>
                        </view>
                        <view class="right-box">
                            <view class="name">{{item.name}}</view>
                            <view class="money-buy">
                                <view class="money">￥ {{item.sell_price}}</view>
                                <view class="active-btn" v-if="activeIndex == index">
                                    已选择
                                </view>
                                <view class="buy-btn" v-else @tap.stop="select" :data-item="item" :data-index="index">
                                    选择商品
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="triangle" v-if="activeIndex == index">
                        <span class="iconfont icon-Group96"></span>
                    </view>
                </view>

            </view>
        </view>
    </view>
    <view class="vip-box" v-if="privilegeList.length">
        <view class="title">
            米尔优选会员
        </view>
        <view class="list-content">
            <view class="li-item" v-for="(item, index) in privilegeList" :key="index" >
                <image mode="widthFix" :src="item.img"></image>
            </view>
        </view>
    </view>
    <!--按钮-->
    <view class="open-btn" @tap="openVip">
        立即开通
    </view>

</view>
</template>
<script>
import {pageLogin, getUrl,config} from '@/common/js/utils.js';

export default {
  data() {
    return {
      schemesList: '',
      //vip 的礼包充值列表
      select_schemesList: '',
      //选中的礼品
      activeIndex: -1,
      info: '',
      detail: '',
      goods_id: '',
      privilegeList: ''
    };
  },

  onShow() {
    var token = this.$cookieStorage.get('user_token');
    var agent_code = this.$cookieStorage.get('agent_code');
    this.getSchemesList();
    this.getPrivilegeList();
    /*if(token){
        this.getUserInfo();
    }*/
  },

  onLoad(e) {
    if (e.goods_id) {
      this.setData({
        goods_id: e.goods_id
      });
    }
  },

  components: {},
  props: {},
  methods: {
    //获取vip的充值列表
    getSchemesList() {
      var token = this.$cookieStorage.get('user_token');
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      this.$http.get({
        api: 'api/vip/goods/list',
        header: {
          Authorization: token
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.setData({
              schemesList: 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
        });
      });
    },

    //获取vip的充值列表
    getPrivilegeList() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      this.$http.get({
        api: 'api/member/privilege/list'
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.setData({
              privilegeList: 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
        });
      });
    },

    //选择商品
    select(e) {
      let item = e.currentTarget.dataset.item;
      let index = e.currentTarget.dataset.index;
      // this.setData({
      //   isSelected: true,
      //   select_schemesList: item,
      //   activeIndex: index
      // });
	 
	    this.isSelected=true;
	    this.select_schemesList=item;
	    this.activeIndex=index;
    },

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

    //点击开通vip会员
    openVip() {
      var token = this.$cookieStorage.get('user_token');

      if (!token) {
        wx.navigateTo({
          url: '/pages/user/register/register'
        });
        return;
      }

      if (this.select_schemesList) {
        var data = {
          id: this.select_schemesList.meta.product_id,
          name: this.select_schemesList.name,
          qty: 1,
          store_count: this.select_schemesList.meta.store_count,
          price: this.select_schemesList.meta.price,
          market_price: this.select_schemesList.meta.market_price,
          product_id: this.select_schemesList.meta.product_id,
          attributes: {
            img: this.select_schemesList.meta.img || this.select_schemesList.img,
            size: this.select_schemesList.meta.size || '',
            color: this.select_schemesList.meta.color || '',
            com_id: this.select_schemesList.id,
            sku: this.select_schemesList.meta.sku || ''
          }
        };
        this.checkoutImmdeOrder(data);
      } else {
        wx.showModal({
          content: '请先选择会员商品礼包',
          showCancel: false
        });
      }
    },

    //请求立马购买接口
    checkoutImmdeOrder(data) {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      var token = this.$cookieStorage.get('user_token');
      this.$http.post({
        api: 'api/shopping/order/checkout?product_id=' + data.id,
        header: {
          Authorization: token
        },
        data: data
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.$cookieStorage.set('local_order', res.data);
            wx.hideLoading();
            wx.navigateTo({
              url: '/pages/store/order/order'
            });
          } else {
            if (res.data && res.data.server_busy) {
              this.setData({
                show_ten: true
              });
            } else if (res.message == 'User unbind mobile') {
              wx.showModal({
                content: '请先绑定手机号',
                showCancel: false,
                success: res => {
                  if (res.confirm || !res.cancel && !res.confirm) {
                    wx.navigateTo({
                      url: '/pages/user/phone/phone?url=' + getUrl()
                    });
                  }
                }
              });
            } else {
              wx.showModal({
                content: res.message || '请求失败',
                showCancel: false
              });
            }

            wx.hideLoading();
          }
        }
      });
    },

    //请求推客会员的
    getInfo(agent_code) {
      wx.showLoading({
        title: '更新中',
        mask: true
      });
      this.$http.get({
        api: 'api/user/info/' + agent_code
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

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

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

    getUserInfo() {
      this.$http.get({
        api: 'api/me',
        header: {
          Authorization: this.$cookieStorage.get('user_token')
        }
      }).then(res => {
        if (res.data.status) {
          this.setData({
            detail: res.data.data
          });
        }
      });
    },

    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 rel="stylesheet/less" lang="less">
    @import "openVip";
</style>