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

<template>
<view id="collar">
    <view class="collar-banner">
        <view class="banner-l">
            <view class="co-item-top">
                <view class="avatar">
                    <image :src="avatar"></image>
                </view>
                <view class="my-point">我的积分：<view>{{info.point}}</view>分</view>
            </view>
            <view class="co-item-bottom">
                <progress v-if="info.sign" backgroundColor="rgba(0,0,0,.2)" activeColor="#F5A623" :percent="(info.sign.days-1)*(16.6+0.4)">
                    <!--这里的percent值要加0.4%-->
                </progress>
                <view class="info" :class="info.sign.days > 1 ? 'already' : ''" style="left:-0.4%;">1</view>
                <view class="info" :class="info.sign.days > 2 ? 'already' : ''" style="left:16.6%">2</view>
                <view class="info" :class="info.sign.days > 3 ? 'already' : ''" style="left:33.2%">3</view>
                <view class="info" :class="info.sign.days > 4 ? 'already' : ''" style="left:49.8%">4</view>
                <view class="info" :class="info.sign.days > 5 ? 'already' : ''" style="left:66.4%">5</view>
                <view class="info" :class="info.sign.days > 6 ? 'already' : ''" style="left:83%">6</view>
                <view class="info" :class="info.sign.days > 7 ? 'already' : ''" style="left:99.6%">7</view>
                <view class="current-dot" :style="'left: ' + (info.sign.days - 1) * 16.6 + '%'" v-if="info.sign.days">
                    <image src="https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/cur.png"></image>
                </view>
            </view>
        </view>
        <view class="banner-r">
            <view class="content-text" v-if="!info.is_sign" @tap="getSign">
                签到领积分
            </view>
            <view class="sign-day" v-if="info.is_sign">
                已连续签到
                <view>{{info.sign.days}}<text>天</text></view>
            </view>
        </view>
    </view>
    <view class="collar-prize" v-if="sortReward.length">
        <view class="prize-item" :class="index == 4 ? 'times-text' : ''" v-for="(item, index) in sortReward" :key="index" >
            <image class="money" src="https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/money.png" v-if="item.type == 'coupon'"></image>
            <image class="point" src="https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/point.png" v-if="item.type == 'point'"></image>
            <image class="emoji" src="https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/emoji.png" v-if="item.type == 'luck'"></image>
            <view>{{item.label}}</view>
            <view>{{item.text}}</view>
            <view class="checked" v-if="item.status">
                <image src="https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/checked.png"></image>
            </view>
                <view class="get" v-if="index != 4 && !info.sign.get_reward" @tap="changes" :data-index="index" :data-id="item.id">
                    <view class="get-small">点我领取</view>
                </view>
        </view>
    </view>
    <view class="collar-strategy">
        <image :src="item.image" mode="widthFix" v-for="(item, index) in info.banner" :key="index" v-if="info.banner.length != 0" @tap="jumpImg" :data-scr="item.link" ></image>
    </view>
    <view class="call-goods" v-if="info.sign.recommend_goods && info.sign.recommend_goods.length">
        <view class="title mx-1px-bottom">
            相关推荐
        </view>
        <view class="content">
            <view class="like_list">
                <view class="like_box" :data-type="item.redeem_point" :data-id="item.id" v-for="(item, index) in info.sign.recommend_goods" :key="index" @tap="jumpdetail">
                    <view>
                        <view class="like_image">
                            <image mode="widthFix" class="responsive" :src="item.img" alt></image>
                        </view>
                        <view class="like_name">
                            {{item.name}}
                        </view>
                        <view class="like_money">
                            ￥{{item.sell_price}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>
</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';

export default {
  data() {
    return {
      is_show: true,
      info: {
          sign: ''
      },
      sortReward: [],
      reward_id: '',
      reward: [],
      avatar: ''
    };
  },

  onLoad() {
    var toekn = this.$cookieStorage.get('user_token');
	
    if (toekn) {
      this.getInfomation();
      this.getAvatar();
    } else {
      wx.navigateTo({
        url: '/pages/user/register/register?url=' + getUrl()
      });
    }
  },

  components: {},
  props: {},
  methods: {
    jumpImg(e) {
      var src = e.currentTarget.dataset.src;
      wx.navigateTo({
        url: src
      });
    },

    //点击领取
    changes(e) {
      if (this.info.is_sign) {
        var reward_id = e.currentTarget.dataset.id;
        var index = e.currentTarget.dataset.index;
        this.getReward(reward_id, index);
      } else {
        wx.showModal({
          content: '请先签到',
          showCancel: false
        });
      } // debugger

    },

    //获取用户信息
    getInfomation() {
      var token = this.$cookieStorage.get('user_token');
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      this.$http.get({
        api: 'api/sign/getSignReward',
        header: {
          Authorization: token
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            if (!res.data.sign.get_reward) {
              res.data.sign.sortReward.forEach(item => {
                item.status = false;
              });
            }

            this.setData({
              info: res.data,
              reward: res.data.sign.sortReward
            });
            var newSortReward = this.info.sign.sortReward; //拿到后台给我的数组

            newSortReward.splice(4, 0, {
              //往数组里面添加文本
              label: '每日签到',
              text: '即可点击一次',
              type: 'text'
            });
            this.setData({
              sortReward: newSortReward
            });
          } else {
            wx.showModal({
              content: res.message || "请求失败",
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || "请求失败",
            showCancel: false
          });
        }

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

    //签到动作
    getAction() {
      wx.showLoading({
        title: '正在签到',
        mask: true
      });
      var token = this.$cookieStorage.get('user_token');
      this.$http.post({
        api: 'api/sign/doSign',
        data: {
          sign_id: this.info.sign.id
        },
        header: {
          Authorization: token
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            wx.showModal({
              content: res.data.message || "签到成功",
              showCancel: false,
              success: res => {
                if (res.confirm || !res.cancel && !res.confirm) {
                  this.getInfomation(); //签到成功重新请求数据
                }
              }
            });
          } else {
            wx.showModal({
              content: res.message || '签到失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: '签到失败',
            showCancel: false
          });
        }

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

    //点击签到领积分
    getSign() {
      this.getAction();
    },

    //领取签到奖品
    getReward(reward_id, index) {
      var token = this.$cookieStorage.get('user_token');
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      this.$http.post({
        api: 'api/sign/doDraw',
        data: {
          // sign_id: this.info.sign.id
          reward_id: reward_id,
          sign_reward: this.reward
        },
        header: {
          Authorization: token
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            // this.setData({
            //   'info.sign.get_reward': true,
            //   [`sortReward[${index}].status`]: true
            // });
			this.info={sign:{get_reward:true}};
			this.sortReward[index]={status:true};
				
            var item = this.sortReward[index];

            if (item.type == 'point') {
              this.setData({
                'info.point': Number(this.info.point) + item.type_value
              });
            }
          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || '请求失败',
            showCancel: false
          });
        }

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

    jumpdetail(e) {
      var id = e.currentTarget.dataset.id;
      var type = e.currentTarget.dataset.type;

      if (type == 0) {
        wx.navigateTo({
          url: `/pages/store/detail/detail?id=${id}`
        });
      } else {
        wx.navigateTo({
          url: `/pages/pointStore/detail/detail?id=${id}`
        });
      }
    },

    //获取头像
    getAvatar() {
      wx.showLoading({
        title: '正在获取头像',
        mask: true
      });
      var token = this.$cookieStorage.get('user_token');
      this.$http.get({
        api: 'api/me',
        header: {
          Authorization: token
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.setData({
              avatar: res.data.avatar
            });
          } else {
            wx.showModal({
              content: res.message || '获取头像失败',
              showCancel: false
            });
          }
        }

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

    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 "collar";
</style>