jje_uniapp/myPages/familyCard/index.vue

<template>
  <view class="box">
    <view v-if="giveList.length>0 || gotList.length > 0 ">
      <view  style="margin: 32rpx 0;">
        <text v-if="giveList.length>0" >我收到的亲情卡</text>
      </view>
      <view class="getCard Card" v-for="item in gotList" @click="jumpToDetail(item)">
        <view style="display: flex;align-items: center">
          <u-avatar :src="item.url || '/static/me/ud4.png'"></u-avatar>
          <text style="margin:0 10rpx;color:#FFFFFF ">{{ item.presentUserName }}{{ item.presentUserNo }}送的亲情卡</text>
        </view>
        <view class="Lines">
          <view style="float: contour;margin:0 10rpx;color:#FFFFFF;text-align: center">
            <text >可用额度</text>
            <view style="font-size: 48rpx;font-weight: bold">{{ item.totalBalance || 0 }}</view>
          </view>
          <view style="float: contour;margin:0 10rpx;color:#FFFFFF;text-align: center">
            <text >已用额度</text>
            <view style="font-size: 48rpx;font-weight: bold">{{ item.amount || 0 }}</view>
          </view>
        </view>
      </view>
      <view  style="margin: 32rpx 0;">
        <text v-if="giveList.length>0" >我赠送的亲情卡</text>
      </view>
      <view class="postCard Card" v-for="item in giveList" @click="jumpToDetail(item)">
        <view style="display: flex;align-items: center">
          <u-avatar :src="item.url || '/static/me/ud4.png'"></u-avatar>
          <text style="margin:0 10rpx;">{{ item.userName }}{{ item.userNo }}</text>
        </view>
        <view class="Lines">
          <view style="text-align: center">
            <text >可用额度</text>
            <view style="font-size: 48rpx;font-weight: bold;text-align: center">{{ item.totalBalance || 0 }}</view>
          </view>
          <view>
            <text >已用额度</text>
            <view style="font-size: 48rpx;font-weight: bold;text-align: center">{{ item.amount || 0 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view  v-if="giveList.length == 0 && gotList.length == 0 " style="text-align: center" >
      <image style="transform: scale(0.5)" src="../../static/logo.png" ></image>
      <h1 style="font-size: 28px;margin: 15px">亲情卡</h1>
      <p>让支付更简单</p>
      <p style="color: #b4b4b4">暂无亲情卡</p>

    </view>
    <view class="bottonStyle">
      <view class="agreement-content">
        <u-icon v-if="choose" name="/static/order/isCheck.png" color="#2979ff" size="20" @click="changeChoose"></u-icon>
        <u-icon v-else name="/static/order/notCheck.png" color="#01a520" size="20" @click="changeChoose"></u-icon>
        <view class="agreement">
          <text>我已阅读并同意</text>
          <text @click="gotoAgreement('1','会员须知')" class="text-color">使用说明</text>
        </view>
      </view>
      <button class="buttonStyle" @click="jumpToGive" >
        <text style="font-size: 18px;" >
          赠送亲情卡
        </text>
      </button>
    </view>

  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return {

      choose:false,
      giveList: [],
      gotList: []
    }
  },
  onShow() {
    this.getGiveList()
    this.getGotList()
  },
  onPullDownRefresh(){
    this.getGiveList()
    this.getGotList()
    uni.stopPullDownRefresh()
  },
  methods: {
    changeChoose(){
      this.choose =!this.choose
    },
    // 去协议页面
    gotoAgreement(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) {
      uni.navigateTo({
        url: '/myPages/familyCard/unbindFamilyCard/unbindFamilyCard?data=' + JSON.stringify(item)
      })
    },
    getImgUrlByOssId(list, number) {
      if (list) {
        list.forEach((e) => {
          let data = null
          if (number == 1) {
            data = e.presentUserPhoto

          } else {
            data = e.userPhoto
          }
          if (data) {
            this.$api.getImage(data).then(res => {
              e.url = res.data.data[0].url.replace(/^http:/, "https:")
            });
          }
        })
        this.$forceUpdate()
      }
    },
    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.giveList, 2)
      })
    }
  }
}
</script>

<style scoped >
@import "/myPages/familyCard/index.scss";
.agreement-content {
  margin: 18px;
  display: flex;
  color: #999999;
  align-items: center;
}
.text-color {
  color: #032574;
}
.agreement {
  color: rgb(96, 98, 102);
  padding: 0 20rpx;
  font-size: 30rpx;
}
</style>