jje_uniapp/myPages/familyCard/index.vue

<template>
  <view class="page">
    <view class="scroll-y">

      <view class="title">
        <text>我收到的亲情卡</text>
      </view>

      <view class="loveCardNull" v-if="gotList.length === 0">
        <view class="flex-row justify-center">
          <image src="/static/me/zhanwu.png" class="nullIcon"></image>
        </view>
        <view class="flex-row justify-center nullMsg">
          <text>暂无收到的亲情卡</text>
        </view>
      </view>

      <view v-else>
        <view class="loveCard" v-for="(item,index) in gotList" :key="index" @click="jumpToDetail(item,2)">
          <image src="/static/familyCard/shoudaoLove.png" class="imgBack"></image>
          <view class="loveCardMsg">
            <view class="flex-row">
              <view>
                <image :src="item.url || '/static/me/ud4.png'" class="avatar"></image>
              </view>
              <view class="flex-col">
                <text class="name">{{ item.presentUserName }}({{ item.relation }})</text>
                <text class="vipNo">{{ item.presentUserNo }}</text>
              </view>
            </view>
            <view class="flex-row justify-between">
              <!--                            <view class="flex-col priceView">-->
              <!--                                <text class="priceTitle">每月上限</text>-->
              <!--                                <view>-->
              <!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
              <!--                                    <text class="price">{{item.amountCap}}</text>-->
              <!--                                </view>-->
              <!--                            </view>-->
              <!--                            <view class="flex-col priceView borderRight1">-->
              <!--                                <text class="priceTitle">剩余额度</text>-->
              <!--                                <view>-->
              <!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
              <!--                                    <text class="price">{{item.totalBalance || 0}}</text>-->
              <!--                                </view>-->
              <!--                            </view>-->
              <!--                            <view class="flex-col priceView borderRight1">-->
              <!--                                <text class="priceTitle">已用额度</text>-->
              <!--                                <view>-->
              <!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
              <!--                                    <text class="price">{{item.amount || '0'}}</text>-->
              <!--                                </view>-->
              <!--                            </view>-->
            </view>
          </view>
        </view>
      </view>

      <view class="title">
        <text>亲属列表</text>
      </view>

      <view class="loveCardNull" v-if="giveList.length === 0">
        <view class="flex-row justify-center">
          <image src="/static/me/zhanwu.png" class="nullIcon"></image>
        </view>
        <view class="flex-row justify-center nullMsg">
          <text>暂无亲属列表</text>
        </view>
      </view>

      <view v-else>
        <view class="loveCard" v-for="(item, index) in giveList" :key="index" @click="jumpToDetail(item,1)">
          <image src="/static/familyCard/zengsLove.png" class="imgBack"></image>
          <view class="loveCardMsg">
            <view class="flex-row justify-between">
              <view class="flex-row">
                <view>
                  <image :src="item.url || '/static/me/ud4.png'" class="avatar"></image>
                </view>
                <view class="flex-col">
                  <text class="name">{{ item.userName }}({{ item.relation }})</text>
                  <text class="vipNo">{{ item.userNo }}</text>
                </view>
              </view>

              <view v-if="isShow(item.id)" class="flex-col justify-center" style="margin-right: 20rpx">
                <uni-icons size="12" color="red" type="smallcircle-filled"></uni-icons>
              </view>
            </view>



            <!--                        <view class="flex-row justify-between">-->
            <!--                            <view class="flex-col priceView ">-->
            <!--                                <text class="priceTitle">每月上限</text>-->
            <!--                                <view>-->
            <!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
            <!--                                    <text class="price">{{item.amountCap}}</text>-->
            <!--                                </view>-->
            <!--                            </view>-->
            <!--                            <view class="flex-col priceView borderRight2">-->
            <!--                                <text class="priceTitle">可用额度</text>-->
            <!--                                <view>-->
            <!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
            <!--                                    <text class="price">{{item.totalBalance || 0}}</text>-->
            <!--                                </view>-->
            <!--                            </view>-->
            <!--                            <view class="flex-col priceView borderRight2">-->
            <!--                                <text class="priceTitle">已用额度</text>-->
            <!--                                <view>-->
            <!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
            <!--                                    <text class="price">{{item.amount || 0}}</text>-->
            <!--                                </view>-->
            <!--                            </view>-->
            <!--                        </view>-->
          </view>
        </view>

      </view>

    </view>
    <view class="bottom">
      <view class="flex-row justify-center agreementView">
        <u-icon name="/static/me/o1.png" size="20" v-if="choose" @click="changeChoose"></u-icon>
        <u-icon name="/static/me/o.png" size="20" v-else @click="changeChoose"></u-icon>
        <text class="read">我已阅读并同意</text>
        <text class="agreement" @click="gotoAgreement(12,'亲情卡使用说明')">使用说明</text>
      </view>
      <view class="zsBtn" @click="jumpToGive">赠送亲情卡</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      readRecordList: [],
      choose: false,
      giveList: [],
      gotList: []
    }
  },
  onShow() {
    this.getGiveList()
    this.getGotList()
    this.notReadRecordList()
  },
  onPullDownRefresh() {
    this.getGiveList()
    this.getGotList()
    uni.stopPullDownRefresh()
  },
  methods: {

    isShow(id){
      if (this.readRecordList.includes(id)){
        return true
      }else {
        return false
      }
    },

    notReadRecordList() {
      this.$api.notReadRecordList().then(res => {
        this.readRecordList = res.data.data
      })
    },

    changeChoose() {
      this.choose = !this.choose
    },
    // 去协议页面
    gotoAgreement(type, name) {
      console.log(type, name)
      uni.navigateTo({
        url: '/myPages/TermsOfService/index?name=' + name + '&type=' + type,
      })
    },
    jumpToGive() {
      if (!this.choose) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '请勾选使用说明'
        });
      } else {
        uni.navigateTo({
          url: '/myPages/familyCard/giveFamilyCard/giveFamilyCard'
        })
      }
    },
    jumpToDetail(item, number) {
      uni.navigateTo({
        url: '/myPages/familyCard/unbindFamilyCard/unbindFamilyCard?data=' + JSON.stringify(item) + '&type=' + number
      })
    },
    getImgUrlByOssId(list, number) {
      if (list) {
        for (let i = 0; i < list.length; i++) {
          let data = null
          if (number == 1) {
            data = list[i].userPhoto
          } else {
            data = list[i].presentUserPhoto
          }
          if (data) {
            this.$api.getImage(data).then(res => {
              list[i].url = res.data.data[0].url.replace(/^http:/, "https:")
              this.$set(list, i, list[i])
            });
          }
        }
      }
    },
    //获取我赠送的亲情卡列表
    getGiveList() {
      this.$api.getMyPresentList().then((res) => {
        this.giveList = res.data.data
        this.getImgUrlByOssId(this.giveList, 1)
      })

    },
    //查询我收到的情亲卡列表
    getGotList() {
      this.$api.getMyReceiveList().then((res) => {
        this.gotList = res.data.data
        this.getImgUrlByOssId(this.gotList, 2)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../familyCard/index.scss";
</style>