chelvc-custom/src/pages/tabbar/mine/index.vue

<template>
  <view class="client-mine">
    <view class="mine-bg">
      <u--image src="/static/pages/mine/mine-bg.png" width="100%" height="550rpx"></u--image>
    </view>

    <view class="mine-main">
      <page-navbar :hasBack="false" bgColor="transparent" title="我的"></page-navbar>

      <view class="fl-flex fl-align-center fl-justify-between">
        <view class="fl-flex fl-align-center">
          <u-avatar :src="avatar" size="60" @click="handlerReviewImg" />
          <view class="f-s-36 u-font-600 u-m-l-30"> {{ nickname }} </view>
        </view>
        <u--image
          src="/static/pages/mine/mine_setting.png"
          width="48rpx"
          height="48rpx"
          @tap="$Router.push('/PageMine/setting/index')"
        ></u--image>
      </view>

      <view class="mine-collect">
        <view v-for="(item, index) in collectList" :key="index" class="fl-flex">
          <view class="collect-list" @click="handleRouter(item)">
            <u--image
              :src="`/static/pages/mine/${item.name}.png`"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="u-m-t-16 f-s-24 text-primary">{{ item.title }}</view>
          </view>
          <text class="collect-line" v-show="index === 3 ? false : true"></text>
        </view>
      </view>

      <!-- 订单 -->
      <base-card padding="30rpx 10rpx" marginBottom="24rpx">
        <view class="fl-flex fl-justify-around">
          <view
            v-for="(item, index) in oderList"
            :key="index"
            class="fl-flex fl-flex-direction fl-align-center"
            @tap="handleOrder(listItem)"
          >
            <u--image
              src="/static/pages/mine/all-order.png"
              width="48rpx"
              height="48rpx"
            ></u--image>
            <view class="u-m-t-20 f-s-34 text-primary">{{ item.title }}</view>
          </view>
        </view>
      </base-card>

      <!-- 钱包 -->
      <base-card padding="0rpx" marginBottom="24rpx">
        <view class="fl-flex fl-justify-between mine-wallet fl-align-center">
          <view class="f-s-32 u-font-600 text-primary u-m-b-16">我的钱包</view>
          <u-icon name="arrow-right" color="#616570" size="16" @click="handlerWallet"></u-icon>
        </view>
        <view class="wallet-data fl-flex fl-justify-between fl-align-center">
          <view class="fl-flex" v-for="(item, index) in incomeList" :key="index">
            <view>
              <view class="fl-flex f-s-28" style="color: #ea0000">
                <view v-show="index === 3 ? false : true">￥</view>
                <view>{{ item.num }}</view>
              </view>
              <view class="f-s-28 u-m-t-12 text-primary">{{ item.title }}</view>
            </view>
            <text class="wallet-line" v-show="index === 3 ? false : true"></text>
          </view>
        </view>
      </base-card>

      <base-card padding="0rpx" marginBottom="24rpx">
        <u-cell-group v-for="(item, index) in LinkList" :key="index" :border="false">
          <u-cell :title="item.title" @click="handleCell(item)" isLink :border="index !== 5">
            <view slot="icon" class="u-m-r-10">
              <u--image
                :src="`/static/pages/mine/${item.icon}.png`"
                width="38rpx"
                height="38rpx"
              ></u--image>
            </view>
          </u-cell>
        </u-cell-group>
      </base-card>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { collectList, LinkList, oderList } from './data';
import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
export default {
  data() {
    return {
      collectList,
      LinkList,
      oderList,
      incomeList: [
        {
          num: '12.00',
          title: '总收益',
        },
        {
          num: '10.00',
          title: '本月收益',
        },
        {
          num: '9.00',
          title: '本周收益',
        },
        {
          num: '0.00',
          title: '可提现',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['userId', 'gender', 'avatar', 'nickname']),
  },
  methods: {
    handleRouter(item) {
      if (item.title === '积分') {
        this.$u.toast('该功能暂未开发，尽情期待！');
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
    /* 订单 */
    handleOrder(item) {
      this.$store.commit('order/GET_ORDER_TYPE', item);
      uni.navigateTo({
        url: `/PageMine/orderModules/index`,
      });
    },
    /* 钱包 */
    handlerWallet() {
      uni.navigateTo({
        url: '/PageMine/myWallet/index',
      });
    },
    handleCell(item) {
      console.log(item);
      if (item.title === '我的店铺') {
        this.getMerchantAuthInfo();
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
    // 点击预览图片
    handlerReviewImg() {
      uni.previewImage({
        urls: [this.avatar],
      });
    },
    async getMerchantAuthInfo() {
      let res = await getMerchantAuthData();
      if (res.code === 'OK' && res.data) {
        this.$store.dispatch('SwitchIdentity', 'MERCHANT');
        this.merchantInfo = Object.assign(
          {},
          {
            ...res.data,
            mobileNumber: res.data.mobileNumber,
          },
        );
        this.$store.commit('SET_MERCHANTINFO', res.data);

        if (res.data.reviewStatus == 2) {
          uni.navigateTo({
            url: 'pageMerchant/mineModule/openStoreAppealDetail',
          });
        } else if (res.data.reviewStatus == 1) {
          uni.navigateTo({
            url: '/pageMerchant/index',
          });
        }
      } else {
        uni.navigateTo({
          url: '/pageMerchant/mineModule/certification/storeInformation',
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.client-mine {
  height: 100%;
  position: relative;

  .mine-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -99;
  }
  .mine-main {
    padding: 0 32rpx;
    .mine-collect {
      height: 146rpx;
      margin: 12rpx 0;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;

      .collect-list {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .collect-line {
        height: 40rpx;
        width: 1rpx;
        background-color: #d8d8d8;
        margin-left: 60rpx;
        margin-top: 20rpx;
      }
    }
    .mine-wallet {
      padding: 16rpx 16rpx 10rpx 16rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #ebebeb;
    }

    .wallet-data {
      padding: 32rpx 42rpx;
    }
    .wallet-line {
      height: 60rpx;
      width: 1rpx;
      background-color: #d8d8d8;
      margin-left: 40rpx;
      margin-top: 16rpx;
    }
  }
}
::v-deep .u-cell__title-text {
  line-height: 50rpx !important;
}
</style>