groupon-wx/pages/message/message.vue

<template>
  <view class="message">
    <view class="top" style="background: linear-gradient(rgb(254,245,246), #FBF7F7); color: black;">
      <!-- #ifdef MP || APP-PLUS -->
      <view class="sys-head">
        <view class="sys-bar" :style="{ height: sysHeight }"></view>
        <!-- #ifdef MP -->
        <view class="sys-title" :style="member_style == 3 ? 'color:#333' : ''">消息</view>
        <!-- #endif -->
        <view class="bg" :style="member_style == 3 ? 'background:#f5f5f5' : ''"></view>
      </view>
      <!-- #endif -->
    </view>

    <view class="header-group">
      <view class="tabs">
        <u-tabs class="defalt-utabs" :is-scroll="false" :list="navigationList" @change="changeNav" lineColor="#B22338"
          :inactiveStyle="{ color: '#999999' }" :activeStyle="{ color: '#B22338', fontWeight: 'bold' }"
          keyName="title"></u-tabs>
      </view>
    </view>

    <view v-if="activeTab === 'normal-msg'">
      <view class="myclient_list">
        <view class="myclient_list_name">
          订单已提货
        </view>
        <view class="myclient_list_content">

          <view class="phone">
				<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/出厂编号-线@2x.png" />
            <text>
              订单编号:02151510202151510104649898926
            </text>
          </view>
          <view class="time">
            <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
            <text>
              绑定时间:2023/04/26&nbsp;21:45:00
            </text>
          </view>
        </view>
      </view>
      <view class="myclient_list">
        <view class="myclient_list_name">
          订单付款成功,付款方式[微信]
        </view>
        <view class="myclient_list_content">

          <view class="phone">
				<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/出厂编号-线@2x.png" />
            <text>
              订单编号:02151510202151510104649898926
            </text>
          </view>
          <view class="time">
            <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
            <text>
              绑定时间:2023/04/26&nbsp;21:45:00
            </text>
          </view>
        </view>
      </view>
      <view class="myclient_list">
        <view class="myclient_list_name">
          订单已提货
        </view>
        <view class="myclient_list_content">

          <view class="phone">
				<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/出厂编号-线@2x.png" />
            <text>
              订单编号:02151510202151510104649898926
            </text>
          </view>
          <view class="time">
            <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
            <text>
              绑定时间:2023/04/26&nbsp;21:45:00
            </text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="activeTab === 'sys-msg'">
      <view class="myclient_list2">
        <view class="myclient_list_name">
          我是系统公告标题
        </view>
        <view class="myclient_list_content">

          <view class="content">
            <text>
              瀛洲学士风流远，中叶唐惭贞观唐。灵武拾遗晚羁旅，开元供奉老佯狂。
            </text>
          </view>
          <view class="time">
            <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
            <text>
              绑定时间:2023/04/26&nbsp;21:45:00
            </text>
          </view>
        </view>
      </view>
      <view class="myclient_list2">
        <view class="myclient_list_name">
          我是系统公告标题
        </view>
        <view class="myclient_list_content">

          <view class="content">
            <text>
              瀛洲学士风流远，中叶唐惭贞观唐。灵武拾遗晚羁旅，开元供奉老佯狂。
              瀛洲学士风流远，中叶唐惭贞观唐。灵武拾遗晚羁旅，开元供奉老佯狂。
            </text>
          </view>
          <view class="time">
            <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
            <text>
              绑定时间:2023/04/26&nbsp;21:45:00
            </text>
          </view>
        </view>
      </view>
      <view class="myclient_list2">
        <view class="myclient_list_name">
          我是系统公告标题
        </view>
        <view class="myclient_list_content">

          <view class="content">
            <text>
              瀛洲学士风流远，中叶唐惭贞观唐。灵武拾遗晚羁旅，开元供奉老佯狂。
              瀛洲学士风流远，中叶唐惭贞观唐。灵武拾遗晚羁旅，开元供奉老佯狂。
              瀛洲学士风流远，中叶唐惭贞观唐。灵武拾遗晚羁旅，开元供奉老佯狂。
            </text>
          </view>
          <view class="time">
            <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
            <text>
              绑定时间:2023/04/26&nbsp;21:45:00
            </text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import {
  grabFlag,
  leaderboard,
  doGrab,
  todayStatistics
} from '@/api/home.js';
import {
  getProductHot,
  collectAll,
  getProductDetail
} from '@/api/store.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import recommend from '@/components/recommend';
import productWindow from '@/components/productWindow';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import pageFooter from '@/components/pageFooter/index.vue'
import colors from "@/mixins/color";
import {
  HTTP_REQUEST_URL
} from '@/config/app';
const hot_res = require('@/mock/json/hot_res.json')
import {
  getNavigation
} from '@/api/public.js'
import {
  colorChange
} from '../../api/api';
export default {
  components: {
    pageFooter,
    recommend,
    productWindow,
    // #ifdef MP
    authorize
    // #endif
  },
  mixins: [colors],
  data () {
    return {
      isactiveTab: 'todayRank',
      grabFlagisOpen: false,
      grabAmountFlag: false,
      show: false,
      userInfo: {},
      activeRedPer: {
        type: 0
      },
      navigationList: [{
        title: '个人消息',
        id: 'normal-msg'
      }, {
        title: '系统公告',
        id: 'sys-msg'
      }],
      imgHost: HTTP_REQUEST_URL,
      is_diy: uni.getStorageSync('is_diy'),
      canShow: false,
      cartCount: 0,
      goodsHidden: true,
      footerswitch: true,
      hostProduct: [],
      cartList: {
        valid: [],
        invalid: []
      },
      selectCountPrice: 0.00,
      isShowAuth: false, //是否隐藏授权
      hotScroll: false,
      hotPage: 1,
      hotLimit: 10,
      loading: false,
      loadend: false,
      loadTitle: this.$t(`我也是有底线的`), //提示语
      page: 1,
      limit: 20,
      loadingInvalid: false,
      loadTitleInvalid: this.$t(`加载更多`), //提示语
      pageInvalid: 1,
      limitInvalid: 20,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {}
      },
      rankList: [],
      redPaper: [],
      productValue: [], //系统属性
      storeInfo: {},
      attrValue: '', //已选属性
      attrTxt: this.$t(`请选择`), //属性页面提示
      cartId: 0,
      product_id: 0,
      sysHeight: sysHeight,
      newData: {},
      activeRouter: '',
      activeTab: 'normal-msg',
      is_diy_set: false
    };
  },
  computed: mapGetters(['isLogin']),
  onPullDownRefresh () {
    this.grabFlag()
    console.log('下拉刷新');
  },
  onLoad (options) {
    let that = this;
    if (that.isLogin == false) {
      toLogin();
    }
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curRoute = routes[routes.length - 1].route //获取当前页面路由
    this.activeRouter = '/' + curRoute
  },
  onShow () {

  },
  created () {
    this.userInfo = JSON.parse(this.$Cache.get("USER_INFO"));
    console.log(this.userInfo, this.userInfo.avatar);
    this.grabFlag('created')
    this.leaderboard()
    this.todayStatistics()
  },
  methods: {
    changeNav (index) {
      console.log(index);
      this.activeTab = index.id
    },
    goReceived () {
      uni.navigateTo({
        url: '/pages/order_addcart/wallet_received/index'
      })
    },
    goMissed () {
      uni.navigateTo({
        url: '/pages/order_addcart/wallet_missed/index'
      })
    },

    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e;
    },

    leaderboard () {
      let that = this
      uni.showLoading({
        title: this.$t(`加载中`),
        mask: true
      });
      let postData = {
        flag: this.isactiveTab === 'todayRank' ? 1 : 0
      }
      leaderboard(postData).then(res => {
        if (res.data.length > 0) {
          that.$set(that, "rankList", res.data)
        } else {
          that.$set(that, "rankList", [])
        }
        uni.hideLoading();
      })
    },
    doGrab () {
      doGrab({
        type: this.activeRedPer.type
      }).then(res => {
        // if (res.code === 200) {
        //   this.grabFlag('dograbAmountFlag')
        // }
        this.currentRedpaper = res.data
        this.grabAmountFlag = true
        this.grabFlag('dograbAmountFlag')
      })
    },
    grabFlag (params) {
      grabFlag().then(res => {
        this.redPaper = res.data
        if (!params) {
          this.grabAmountFlag = false
        }
        if (params === 'created') {
          this.activeRedPer = res.data[0]
          let flag = this.redPaper.filter((e) => {
            return e.flag === 1;
          }).length
          console.log(flag, this.activeRedPer);
          if (flag === 0) {
            this.show = false
            uni.stopPullDownRefresh();
            return
          }

        }

        this.show = true
        uni.stopPullDownRefresh();
      })
    },
    todayStatistics () {
      uni.showLoading({
        title: this.$t(`加载中`),
        mask: true
      });
      let postData = {
        flag: this.isactiveTab === 'todayRank' ? 1 : 0
      }
      todayStatistics().then(res => {
        this.moneyObj = res.data
        uni.hideLoading();
      })
    },

    /**
     * 购物车手动填写
     * 
     */
    iptCartNum: function (e) {
      this.$set(this.attr.productSelect, 'cart_num', e);
    },

    inArray: function (search, array) {
      for (let i in array) {
        if (array[i] == search) {
          return true;
        }
      }
      return false;
    },
    switchSelect: function () {
      let that = this;
      let validList = that.cartList.valid;
      let selectValue = that.selectValue;
      let selectCountPrice = 0.00;
      if (selectValue.length < 1) {
        that.selectCountPrice = selectCountPrice;
      } else {
        for (let index in validList) {
          if (that.inArray(validList[index].id, selectValue)) {
            selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(validList[index]
              .cart_num, validList[
                index].truePrice))
          }
        }
        that.selectCountPrice = selectCountPrice;
      }
    },
    getInvalidList: function () {
      let that = this;
      if (this.loadendInvalid) return false;
      if (this.loadingInvalid) return false;
      let data = {
        page: that.pageInvalid,
        limit: that.limitInvalid,
        status: 0
      }
      let resData = {
        "valid": [],
        "invalid": [],
        "deduction": {
          "seckill_id": 0,
          "bargain_id": 0,
          "combination_id": 0,
          "discount_id": 0
        }
      }
      // getCartList(data).then(res => {
      let cartList = resData,
        invalid = cartList.invalid,
        loadendInvalid = invalid.length < that.limitInvalid;
      let invalidList = that.$util.SplitArray(invalid, that.cartList.invalid);
      that.$set(that.cartList, 'invalid', invalidList);
      that.loadendInvalid = loadendInvalid;
      that.loadTitleInvalid = loadendInvalid ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
      that.pageInvalid = that.pageInvalid + 1;
      that.loadingInvalid = false;
      // }).catch(res => {
      // 	that.loadingInvalid = false;
      // 	that.loadTitleInvalid = that.$t(`加载更多`);
      // })

    },
    getHostProduct: function () {
      let that = this;
      if (that.hotScroll) return
      that.hotPage++
      that.hotScroll = hot_res.length < that.hotLimit
      that.hostProduct = that.hostProduct.concat(hot_res)
    },
  },
  onReachBottom () {
    let that = this;
    if (that.loadend) {
      that.getInvalidList();
    }
    if (that.cartList.valid.length == 0 && that.cartList.invalid.length == 0) {
      that.getHostProduct();
    }
  }
}
</script>

<style scoped lang="scss">
.message {
  display: flex;
  flex-direction: column;
  height: 100%;

  .sys-head {
    position: relative;
    width: 100%;
    // background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--view-theme);
      background-size: 100% auto;
      background-position: left bottom;
    }

    .sys-title {
      z-index: 10;
      position: relative;
      height: 43px;
      text-align: left;
      line-height: 43px;
      font-size: 36rpx;
      color: rgba(17, 17, 17, 1);
      font-weight: bolder;
      padding-left: 36rpx;
    }
  }


}



.myclient_list {
  margin-top: 30rpx;
  width: 750rpx;
  min-height: 220rpx;
  padding: 30rpx;
  background: #FFFFFF;

  .myclient_list_name {
    margin-bottom: 15rpx;
    height: 44rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #111111;
    line-height: 44rpx;
  }

  .myclient_list_content {

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 20rpx;
    }

    .phone {
      margin-bottom: 15rpx;
      height: 44rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 44rpx;
    }

    .time {
      height: 44rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 44rpx;
    }
  }
}

.myclient_list2 {
  margin-top: 30rpx;
  width: 750rpx;
  min-height: 220rpx;
  padding: 30rpx;
  background: #FFFFFF;

  .myclient_list_name {
    margin-bottom: 15rpx;
font-size: 28rpx;
font-weight: 500;
color: #111111;
line-height: 44rpx;
  }

  .myclient_list_content {

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 20rpx;
    }

    .content {
      margin-bottom: 15rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
    }

    .time {
      height: 44rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 44rpx;
    }
  }
}
</style>