chelvc-custom/src/pageMerchant/tabbar/mine.vue

<template>
  <view class="mine">
    <!-- 状态栏占位 -->
    <view class="mine__nav" :style="{ height: 77 + 'px' }" />
    <view class="mine__person">
      <view class="mine__person--info">
        <view @click="$Router.push('/pageMerchant/mineModule/personalInfo')">
          <image :src="merchantInfo.merchant.logo" style="width: 140rpx; height: 140rpx; border-radius: 50%"
            v-if="merchantInfo.merchant.logo" />
          <image src="@/static/QR57a.jpg" style="width: 140rpx; height: 140rpx; border-radius: 50%" v-else />
        </view>
        <view class="userName">
          <view>
            <view v-if="merchantInfo.storeName"> {{ merchantInfo.storeName }}</view>
            <view v-else> 微信用户</view>
          </view>
          <view>
            <view v-if="merchantInfo.mobileNumber" class="text">
              +86 {{ merchantInfo.mobileNumber }}
            </view>
            <view v-else class="text">
              <text style="color: #f6bf3f"> 您当前还未认证，</text>
              <text @click="$Router.push('/pageMerchant/mineModule/certification/index')">
                去认证>
              </text>
            </view>
          </view>
        </view>
        <view class="status" :style="{ 'background-color': getStatusColor(state) }" @click="show = true">
          <view style="margin-right: 6rpx">{{ stateName }}</view>
          <u-icon name="play-right-fill" color="#fff" size="12" />
        </view>
      </view>
    </view>

    <view class="mine__main">
      <view class="mine__main--purse">
        <view class="wallet">
          <view class="wallet--title">我的钱包</view>
          <view class="wallet--more">
            <text>查看钱包余额</text>
            <u-icon name="arrow-right" color="#333" size="14" />
          </view>
        </view>
        <view class="walletInfo">
          <view v-for="item,index in incomeList" :key="index">
            <view class="text-title">{{item.title}}</view>
            <view class="text-data">￥{{item.num}}</view>
            <!-- <view class="text-info">最高可用</view> -->
          </view>
        </view>
        <!--        <view class="shortcut">
          <view style="display: flex">
            <view>快捷支付</view>
            <view style="margin: 0 20rpx">|</view>
            <view>一银升级银行卡用于麦付</view>
          </view>
          <u-icon name="arrow-right" color="#fff" size="14" />
        </view> -->
      </view>

      <view class="mine__main--setting">
        <template v-for="item in list1">
          <u-cell size="large" :border="false" :key="item.name" :title="item.name" isLink :url="item.url">
            <image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
          </u-cell>
        </template>
      </view>

      <view class="mine__main--setting">
        <template v-for="item in list2">
          <u-cell size="large" :border="false" :key="item.name" :title="item.name" isLink :url="item.url">
            <image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
          </u-cell>
        </template>
      </view>
    </view>

    <!-- 营业状态选择弹框 -->
    <u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm" keyName="label"></u-picker>

    <!-- 商家认证的弹框 -->
    <u-modal :show="showAut" :title="title" :content="content" :confirmText="'开始认证'" :cancelText="'返回用户端'"
      :showCancelButton="true" @confirm="confirmSwitch" @cancel="showAut = false"></u-modal>

    <!-- <tabbar currentTab="merchantMine" /> -->
  </view>
</template>

<script>
  import {
    getMerchantAuthData
  } from '@/api/merchant/merchantAuth';
  import {
    updateBusinessStatus
  } from '@/api/merchant/mine';
  import {
    phoneEncryption
  } from '@/utils/tools';

  export default {
    data() {
      return {
        state: 0,
        stateName: '营业中',
        show: false,
        showAut: false,
        title: '商家认证',
        content: '进入商家端前，我们需要一定的认证',
        merchantInfo: {},
        incomeList: [{
            num: '0.00',
            title: '总收益',
          },
          {
            num: '0.00',
            title: '本月收益',
          },
          {
            num: '0.00',
            title: '本周收益',
          },
          {
            num: '0.00',
            title: '可提现',
          },
        ],
        columns: [
          // 营业状态 0-营业中，1-休息中
          [{
              label: '营业中',
              id: '0',
            },
            {
              label: '休息中',
              id: '1',
            },
          ],
        ],
        list1: [{
            id: '1',
            name: '门店环境',
            url: '/pageMerchant/mineModule/storeEnviron',
          },
          // {
          //   id: '2',
          //   name: '我要开店',
          //   url: '/pages/merchant/mine/openStore/index',
          // },
          {
            id: '3',
            name: '资质信息',
            url: '/pageMerchant/mineModule/openStoreAppealDetail',
          },
        ],

        list2: [{
            id: '1',
            name: '意见反馈',
            url: '',
          },
          {
            id: '2',
            name: '设置',
            url: '/pageMerchant/mineModule/setting/index',
          },
        ],
      };
    },

    created() {
      this.getMerchantAuth();
    },

    mounted() {
      if (this.merchantInfo) {
        this.showAut = false;
      } else {
        this.showAut = true;
      }

      console.log(this.merchantInfo.merchant.id, '111111111');
    },

    methods: {
      /*===========================================================*/
      // 获取商家信息
      async getMerchantAuth() {
        let res = await getMerchantAuthData();
        if (res.code === 'OK') {
          // 将数据存储到vuex中
          this.merchantInfo = Object.assign({}, {
            ...res.data,
            mobileNumber: phoneEncryption(res.data.mobileNumber),
          }, );

          this.$store.commit('SET_MERCHANTINFO', res.data);
        }
      },

      /*===========================================================*/
      // 开始认证
      confirmSwitch() {
        uni.navigateTo({
          url: '/pageMerchant/mineModule/certification/index'
        });
      },

      /*===========================================================*/

      // 修改商家状态
      confirm(val) {
        this.state = val.value[0].id;
        this.stateName = val.value[0].label;
        this.show = false;

        updateBusinessStatus(this.merchantInfo.merchant.id, {
          businessStatus: this.state
        }).then(
          res => {
            if (res.code === 'OK') {
              this.$u.toast('修改成功');
            }
          },
        );
      },

      getStatusColor(state) {
        if (state === 0) {
          return '#19be6b';
        } else if (state === 1) {
          return '#ff9900';
        }
      },

      /*===========================================================*/

    },
  };
</script>

<style lang="scss" scoped>
  .mine {
    min-height: calc(100vh - 80rpx);
    box-sizing: border-box;

    &__nav {
      background-color: $uni-bg-color-primary;
    }

    &__person {
      height: 160rpx;
      padding: $uni-bg-padding-sm;
      background-color: $uni-bg-color-primary;
      position: relative;

      &--info {
        color: #fff;
        display: flex;

        .userName {
          width: 400rpx;
          font-size: 36rpx;
          margin: 20rpx 0 0 16rpx;

          .text {
            margin-top: 15rpx;
            font-size: 28rpx;
          }
        }

        .status {
          display: flex;
          position: absolute;
          bottom: 80rpx;
          padding-left: 20rpx;
          right: 0;
          width: 150rpx;
          height: 60rpx;
          font-size: 25rpx;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          border-radius: 30rpx 0 0 30rpx;
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }

    &__main {
      padding: $uni-bg-padding-sm;

      &--purse {
        background-color: $uni-bg-color;
        padding: $uni-bg-padding-sm;
        border-radius: $uni-border-radius-base;

        .wallet {
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;

          &--title {
            color: #000;
            font-size: 36rpx;
            font-weight: 700;
          }

          &--more {
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .walletInfo {
          margin: 40rpx 0;
          color: #333;
          display: flex;
          text-align: center;
          justify-content: space-around;
        }

        // .shortcut {
        //   height: 70rpx;
        //   padding: 0 20rpx;
        //   color: #fff;
        //   font-size: 28rpx;
        //   display: flex;
        //   align-items: center;
        //   justify-content: space-between;
        //   background-color: $uni-bg-color-primary;
        //   border-radius: $uni-border-radius-sm;
        // }
      }

      &--setting {
        margin: 20rpx 0;
        background-color: $uni-bg-color;
        padding: $uni-bg-padding-sm;
        border-radius: $uni-border-radius-base;
      }
    }
  }

  .text-title {
    font-size: 34rpx;
  }

  .text-data {
    font-size: 40rpx;
    margin: 15rpx 0;
    font-weight: 700;
  }

  .text-info {
    font-size: 24rpx;
  }
</style>