xq-csg-weapp_uni-ts/src/pages/my/my.vue

<template>
  <view>
    <!-- <custom-nav-bar left-text="我的" /> -->

    <view class="banner">
      <image class="banner-bg" :src="recursionOneObj.icon"></image>
      <view class="flex content-top flex-center">
        <view class="top-left">
          <image class="top-left-img" data-msg="头像" :src="userInfo.avatar || '/static/images/default-avatar.png'">
          </image>
          <image class="crown-img" data-msg="皇冠" v-if="userInfo.realNameAuthFlag === 1"
            src="https://zongzhi.xuqidata.com:5009/xq-ssg/bcf303f044229aa6cc528b822fdc75f7f897d4f0fb92c27f8332f9367fafe85d.png">
          </image>
        </view>
        <view class="top-content flex1">
          <view class="name" v-if="isLogin">{{ userInfo.nickname }}</view>
          <view class="name" @tap="login" v-else>请登录</view>
          <!-- <view class="role" wx:if="{{role}}">{{role}}</view> -->
        </view>
        <image class="top-right" @click="toSetup"
          src="https://zongzhi.xuqidata.com:5009/xq-ssg/bc0a28c4073688213c2dbf320d21d24048fab2f9a36d2afec51e831591e58188.png">
        </image>
      </view>
      <view class="flex integral-content flex-v-center flex-around">
        <view class="integral-left">
          <view class="money">
            {{ myInfo.integral || 0 }}
          </view>
        </view>
        <view class="integral-right" @tap="toIntegral">我的积分</view>
      </view>
    </view>

    <view class="flex my-mune">
      <view class="flex flex-col mune-item flex-center" v-for="(itemName, idx) in recursionOneList" :key="idx">
        <navigator class="line-navigator" v-if="itemName.clickUrl" :url="updateQuery(itemName.clickUrl, itemName)"
          hover-class="none"></navigator>

        <text class="name">{{ itemName.name }}</text>

        <text class="price">
          {{
                        itemName.name === '我的点单'
                            ? myInfo.orderCount
                            : itemName.name === '我的家庭医生'
                            ? myInfo.familyDoctorCount
                            : itemName.name === '我的收藏'
                            ? myInfo.collectionCount
                            : itemName.name === '我的调解'
                            ? myInfo.caseCount
                            : 0
                    }}
        </text>
      </view>
    </view>

    <view class="my-line"></view>

    <view class="page-content">
      <view class="cell" v-for="(itemName, idx) in recursionList" :key="idx">
        <view class="cell-left">
          <view class="icon">
            <image :src="itemName.icon"></image>
          </view>
          <view class="title">
            {{ itemName.name }}
          </view>
        </view>

        <navigator :url="itemName.clickUrl + userInfo.id + '&partyMemberFlag=' + myInfo.partyMemberFlag"
          class="cell-right" hover-class="none">
          <view class="cell-right-number"
            v-if="itemName.name === '党员接单' || itemName.name =='党员认证' || itemName.name === '党组织认证'">
            <!-- {{myInfo.partyMemberFlag===0?'未认证':'已认证'}} -->
          </view>
          <view class="cell-right-number" v-else>
            {{
                            itemName.name === '我的诉求'
                                ? myInfo.appealCount
                                : itemName.name === '我的收藏'
                                ? myInfo.collectionCount
                                : itemName.name === '我的调解'
                                ? myInfo.caseCount
                                : 0
                        }}
          </view>
          <view class="arrow">
            <van-icon name="arrow" size="18px" />
          </view>
        </navigator>
      </view>
      <!-- <view class="cell">
    <view class="cell-left">
      <view class="icon">
        <image src="https://zongzhi.xuqidata.com:5009/xq-ssg/0385e8fade03e61e8ed9481964aac89edaf47101de08a4b068ff2e3718d724e4.png"></image>
      </view>
      <view class="title">
        身份认证
      </view>
    </view>
    <view class="cell-right" wx:if="{{myInfo.realNameAuthFlag !== 1}}">
      <view class="cell-right-number">
        <text wx:if="{{myInfo === ''}}" bindtap="toAppealssss">未实名</text>
        <text wx:if="{{myInfo.realNameAuthFlag === 0}}" bindtap="toAppealssss">未实名</text>
        <text wx:if="{{myInfo.realNameAuthFlag === 2}}" bindtap="toAppealssss">未通过</text>
        <text wx:if="{{myInfo.realNameAuthFlag === 3}}">审核中</text>
      </view>
      <view class="arrow">
        <van-icon name="arrow" size="18px" />
      </view>
    </view>
    <view class="cell-right" wx:else>
      <view class="cell-right-number">已实名</view>
    </view>
  </view> -->
    </view>
  </view>
</template>
<script>
  import * as publicApi from '@/api/publicApi.js'; // 公共 API
  import * as myApi from '@/api/myApi'; // 我的
  import utils from '@/utils/util.map'
  export default {
    components: {},
    data() {
      return {
        code: '',
        isLogin: uni.getStorageSync('isLogin'),
        userInfo: uni.getStorageSync('userInfoData'),
        role: uni.getStorageSync('userRoles'),
        myInfo: uni.getStorageSync('userInfoCount'),
        recursionOneList: [],
        recursionList: [],
        recursionOneObj: {
          icon: ''
        }
      };
    },
    async onLoad() {
      this.recursionApi();
    },
    onShow() {
      // 设置判断，限制不同权限渲染不同数据
      this.setMune();
      this.getInitData();
      this.getUserInfoApi();
      this.getUserInfo();
    },
    methods: {
      updateQuery(url, item) {
        return utils.updateQuery(url, item)
      },
      async getUserInfoApi() {
        const res = await myApi.getUserInfoApi();
        if (res.data) {
          this.myInfo = res.data
          uni.setStorageSync('userInfoCount', res.data);
        }
      },

      getInitData() {
        this.role = uni.getStorageSync('userRoles')
        this.isLogin = uni.getStorageSync('isLogin')
        this.userInfo = uni.getStorageSync('userInfoData')
        this.myInfo = uni.getStorageSync('userInfoCount')
      },

      // 菜单权限处理函数
      setMune() {
        // 根据不同权限，渲染不同数据
        const recursionOneList = [{
            id: 97,
            name: '我的点单',
            userId: this.userInfo.userId,
            clickUrl: '/packages/people/pages/masses/masses?userId=[userId]'
          },
          {
            id: 98,
            name: '我的家庭医生',
            userId: this.userInfo.userId,
            clickUrl: ''
          },
          {
            id: 99,
            name: '我的收藏',
            userId: this.userInfo.userId,
            clickUrl: '/packages/my/pages/collection/collection?id='
          },
          {
            id: 100,
            name: '我的调解',
            userId: this.userInfo.userId,
            clickUrl: '/packages/people/pages/mediate-my-list/mediate-my-list?id='
          }
        ];
        const recursionList = [{
            bannerType: 4,
            clickUrl: '/packages/people/pages/party-branch/create?userid=',
            cssStyle: wx.getStorageSync('userRoles') === '党组织' ? '' : 'display:none',
            icon: '/static/images/tissue.png',
            id: 125,
            name: '党组织认证',
            parentId: 96,
            remark: '党组织认证',
            sort: 1,
          },
          {
            bannerType: 4,
            clickUrl: '/packages/people/pages/party-newspaper/create?userid=',
            cssStyle: null,
            icon: '/static/images/member.png',
            id: 123,
            name: '党员认证',
            parentId: 96,
            remark: '党员认证',
            sort: 1,
          },
          {
            bannerType: 4,
            clickUrl: '/packages/my/pages/my-masses/my-masses?id=',
            cssStyle: null,
            icon: '/static/images/icon3.png',
            id: 121,
            name: '党员接单',
            parentId: 96,
            remark: '党员接单',
            sort: 0
          },
          {
            bannerType: 4,
            clickUrl: '/packages/enterprise/pages/my-appeal/my-appeal?id=',
            cssStyle: '',
            icon: '/static/images/icon1.png',
            id: 87,
            name: '我的诉求',
            parentId: 96,
            remark: '我的诉求',
            sort: 1
          },
          {
            bannerType: 4,
            clickUrl: '/packages/my/pages/collection/collection?id=',
            cssStyle: null,
            icon: '/static/images/icon5.png',
            id: 88,
            name: '我的收藏',
            parentId: 96,
            remark: '我的收藏',
            sort: 1
          },
          {
            bannerType: 4,
            clickUrl: '/packages/people/pages/mediate-my-list/mediate-my-list?id=',
            cssStyle: null,
            icon: '/static/images/icon2.png',
            id: 89,
            name: '我的调解',
            parentId: 96,
            remark: '我的调解',
            sort: 1
          },
          {
            bannerType: 4,
            clickUrl: null,
            cssStyle: null,
            icon: '/static/images/icon4.png',
            id: 90,
            name: '我的账号',
            parentId: 96,
            remark: '我的账号',
            sort: 1
          }
        ];
        this.recursionOneList = recursionOneList
        this.recursionList = recursionList
      },

      toSetup() {
        if (this.isLogin) {
          uni.navigateTo({
            url: '/packages/my/pages/setup/setup'
          });
        } else {
          this.login();
        }
      },

      // myDataRende(id) {
      //   const { appealCount, caseCount, collectionCount, userName } =
      //     this.data.myInfo;
      //   const data = {
      //     87: appealCount, // 我的诉求
      //     88: collectionCount, // 我的收藏
      //     89: caseCount, //	我的调解
      //     90: userName, // 我的账号
      //     97: 0, // 我的点单
      //     98: 0, // 我的家庭医生
      //     99: collectionCount, // 我的收藏
      //     100: caseCount, // 我的调解
      //   };
      //   return data[id];
      // },

      toIntegral() {
        // 我的积分
        uni.navigateTo({
          url: '/packages/my/pages/integral/integral'
        });
      },

      toAppealssss() {
        uni.navigateTo({
          url: '/packages/my/pages/certification/certification'
        });
      },

      /**
       * 接口
       */
      async login() {
        uni.navigateTo({
          url: '/pages/phone/index'
        });
        // 我的诉求
        // const res = await app.globalData.register({
        //     code: this.code
        // });
        // if (res) {
        //     uni.showToast({
        //         title: '登录成功',
        //         icon: 'none'
        //     });
        //     this.getInitData();
        // } else {

        // }
      },

      // 获取我的信息
      async getUserInfo() {
        const res = await myApi.getProfileUserInfoApi();
        if (res.data) {
          this.userInfo = res.data
          this.userInfo.userId = res.data.id
          uni.setStorageSync("userInfoData", this.userInfo);
        }
      },
      async recursionApi() {
        const {
          data = []
        } = await publicApi.recursionApi({
          bannerType: 4,
          parentId: 95
        });
        if (data.length) {
          this.recursionOneObj = data.slice(0, 1)[0]
        }
      }
    }
  };
</script>
<style lang="less">
  /* pages/people/people.wxss */
  page {
    --nav-bar-background-color: transparent;
    --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
  }

  .banner {
    width: 100%;
    height: 420rpx;
    position: relative;

    .banner-bg {
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 420rpx;
    }

    .content-top {
      height: 88rpx;
      width: 100%;
      position: absolute;
      top: 159rpx;
      padding-left: 50rpx;
      padding-right: 50rpx;
      line-height: 88rpx;

      .top-left {
        height: 88rpx;
        width: 88rpx;
        border-radius: 50%;
        border: 2rpx solid #ffdc00;
        position: relative;

        .top-left-img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

        .crown-img {
          position: absolute;
          height: 70rpx;
          width: 70rpx;
          z-index: 1;
          top: -41rpx;
          right: -15rpx;
        }
      }

      .top-content {
        margin-left: 40rpx;

        .name {
          height: 40rpx;
          font-size: 40rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 40rpx;
        }

        .role {
          padding-left: 10rpx;
          padding-right: 10rpx;
          height: 40rpx;
          background: #df7500;
          border-radius: 20rpx;
          border: 1px solid #e8d89c;
          margin-top: 13rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #fff600;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .top-right {
        width: 52rpx;
        height: 52rpx;
      }
    }

    .integral-outline {
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: center;
      margin-top: -50rpx;
      z-index: 999;
    }

    .integral-content {
      width: 100%;
      position: absolute;
      top: 309rpx;
      left: 0;
      z-index: 2;

      .integral-left {
        display: flex;

        .yuanbao-content {
          height: 39rpx;
          width: 52rpx;
          margin-right: 10px;
        }

        .money {
          font-size: 52rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #fe3b53;
          line-height: 52rpx;
        }
      }

      .integral-right {
        font-size: 24rpx;

        font-weight: 400;
        color: #b36104;
        line-height: 24rpx;
      }
    }
  }

  .my-mune {
    width: 100%;
    // height: 100%;
    padding: 0 75rpx;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      z-index: 2;
      width: 1px;
      height: 100%;
      background-color: #efefef;
    }

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      width: 100%;
      height: 1px;
      background-color: #efefef;
    }

    .mune-item {
      width: 50%;
      height: 122rpx;
      position: relative;
      z-index: 1;

      .line-navigator {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
      }

      .name {
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
        line-height: 28rpx;
      }

      .price {
        margin-top: 16rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #fe3b53;
        line-height: 32rpx;
      }
    }
  }

  .my-line {
    width: 100%;
    height: 20rpx;
    background: #f9f9f9;
  }

  .page-content {
    margin-top: 12rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;

    .cell {
      width: 100%;
      height: 120rpx;
      background: #ffffff;
      border-bottom: 1rpx solid #efefef;
      display: flex;
      justify-content: space-between;

      .cell-left {
        height: 100%;
        display: flex;
        align-items: center;

        .icon {
          height: 40rpx;
          width: 40rpx;
          margin-right: 32rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }

        .title {
          font-size: 32rpx;

          font-weight: 400;
          color: #333333;
          line-height: 32rpx;
        }
      }

      .cell-right {
        height: 100%;
        width: 400rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .cell-right-number {
          font-size: 32rpx;
          font-weight: 400;
          color: #999999;
          margin-right: 28rpx;
        }
      }
    }
  }
</style>