kxmall-ui/kxmall-rider-ui/pages/user/user1.vue

<template>
  <view class="container">
    <view class="info-box">
      <image src="@/static/login/logo.png" mode="aspectFit"></image>
      <view class="info-right">
        <view class="ir-first">{{filterPhone(userInfo.phonenumber)}}</view>
        <view class="ir-second">{{userInfo.nickName}}</view>
      </view>
    </view>

    <view class="cell-title">商家信息</view>
    <view class="cells">

      <view class="cell">
        <view class="cell-l">营业时间</view>
        <view class="cell-r">{{businessStartTime}}~{{businessStopTime}}</view>
        <!-- <uni-icons class="right-icon" type="right" color="#999" size="20" /> -->
      </view>
    </view>
    <view class="cells">

      <view class="cell">
        <view class="cell-l">今日收益</view>
        <view class="cell-r">
          {{earnings}}
        </view>
      </view>
    </view>

    <view class="cells">

      <view class="cell" style="justify-content: space-between;">
        <view class="cell-l">仓库名称</view>
        <view class="cell-r" style="flex:60% 0 0">
          <uni-data-select v-model="value" :localdata="storageList" :disable="loading"></uni-data-select>
        </view>
      </view>
    </view>

    <!-- Changed Order Verification to a proper button -->
    <view class="verification-btn-container">
      <button class="verification-btn" @click="navToVerification">
        <text>订单核销</text>
      </button>
    </view>

    <tab-bar :active="1"></tab-bar>

    <view class="logout-container">
      <button class="logout-btn" @click="onLogout">
        <text>退出登录</text>
      </button>
    </view>
  </view>
</template>
<script>
  import TabBar from '../../components/tab-bar';
  import {
    mapState,
    mapMutations
  } from 'vuex';

  export default {
    components: {
      TabBar
    },
    computed: {
      ...mapState(['token'])
    },
    data() {
      return {
        userInfo: {},
        storageList: [],
        value: '',
        businessStartTime: "",
        businessStopTime: "",
        earnings: 0,
        loading: false
      };
    },
    onLoad() {
      this.userInfo = uni.getStorageSync("usemall_userInfo").user;
      this.listAllStorage()
    },
    // onShow() {
    //   this.userInfo = uni.getStorageSync("usemall_userInfo").user;
    //   this.listAllStorage()
    // },
    watch: {
      value(val) {
        this.loading = true
        this.request('get', 'storage/storage/' + val, this.token).then(({
          data
        }) => {
          this.businessStartTime = data.businessStartTime
          this.businessStopTime = data.businessStopTime
          this.earnings = data.todayEarnings
        }).finally(() => {
          this.loading = false
        })
      }
    },
    methods: {
      ...mapMutations(['saveUserInfo', 'logout']),
      navToVerification() {
        uni.navigateTo({
          url: '/pages/verification/index' // Update this to your actual verification page path
        })
      },
      listAllStorage() {
        this.request('get', 'storage/storage/list', this.token, null).then(({
          rows
        }) => {
          this.storageList = rows.map(el => {
            return {
              text: el.name,
              value: el.id,
              ...el
            }
          })
          this.value = this.storageList[0].id
        })
      },
      // 过滤隐藏手机号
      filterPhone(val) {
        return val ? val.toString().slice(0, 3) + '****' + val.toString().slice(-4) : '';
      },
      navTo(url) {
        url = '../income/income';
        uni.navigateTo({
          url
        })
      },
      onLogout() {
        let that = this;
        uni.showModal({
          title: '系统提示',
          content: '是否确认退出？',
          showCancel: true,
          confirmText: '取消',
          cancelText: '确认',
          success: function(res) {
            if (res.cancel) {
              that.logout();
              uni.navigateTo({
                url: '/pages/login/merchant'
              })
            }
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  page {
    min-height: 100vh;
    background-color: $uni-bg-color-grey;
    padding-bottom: 120rpx;
    position: relative;
  }

  .container {
    line-height: 1.2;
    position: relative;
    min-height: 100vh;
  }

  .picker-cell {
    width: 100%
  }

  .picker-cell-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
  }

  .info-box {
    display: flex;
    align-items: center;
    height: 180rpx;
    padding: $uni-spacing-row-lg $uni-spacing-row-lg 0 $uni-spacing-row-lg;
    background-color: $uni-bg-color;

    image {
      display: block;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .info-right {
      flex: 1;
      padding-left: 20rpx;
    }

    .ir-first {
      color: $font-color-black;
      font-size: $uni-font-size-lg;
    }

    .ir-second {
      color: $font-color-light;
      font-size: $uni-font-size-sm;
      margin-top: 10rpx;
    }
  }

  .cell-title {
    height: 118rpx;
    color: $font-color-black;
    font-size: $uni-font-size-base;
    font-weight: 600;
    line-height: 118rpx;
    padding: 0 40rpx;
  }

  .cells {
    padding: 0 $uni-spacing-row-lg;

    .cell {
      display: flex;
      align-items: center;
      height: 110rpx;
      font-size: $uni-font-size-base;
      padding: 0 $uni-spacing-row-lg;
      border-bottom: 1rpx solid $uni-border-color;
      background-color: $uni-bg-color;

      &:first-child {
        border-top-left-radius: 14rpx;
        border-top-right-radius: 14rpx;
      }

      &:last-child {
        border-bottom-left-radius: 14rpx;
        border-bottom-right-radius: 14rpx;
        border-bottom: 0;
      }
    }

    .cell-l {
      color: $font-color-black;
    }

    .cell-r {
      flex: 1;
      color: $font-color-light;
      text-align: right;
    }

    .right-icon {
      margin-left: 10rpx;
    }
  }

  .option-bar {
    padding: 0 $uni-spacing-row-lg;

    .option-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      color: $font-color-base;
      font-size: $uni-font-size-lg;
      border-radius: 45rpx;
      border-bottom: 1rpx solid $uni-border-color;
      background-color: $uni-bg-color;
      margin-top: 50rpx;
    }
  }

  /* Order Verification Button Styles */
  .verification-btn-container {
    padding: 30rpx $uni-spacing-row-lg;

    .verification-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      line-height: 90rpx;
      font-size: $uni-font-size-lg;
      color: #fff;
      background-color: $uni-color-primary;
      border-radius: 45rpx;
      border: none;

      .right-icon {
        margin-left: 10rpx;
      }
    }

    button::after {
      border: none;
    }
  }

  /* Logout Button Styles */
  .logout-container {
    position: fixed;
    bottom: 120rpx;
    left: 0;
    right: 0;
    padding: 0 $uni-spacing-row-lg 20rpx;
    z-index: 10;
    background-color: $uni-bg-color-grey;

    .logout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      line-height: 90rpx;
      font-size: $uni-font-size-lg;
      color: $uni-text-color;
      background-color: $uni-bg-color;
      border-radius: 45rpx;
      border: none;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }

    button::after {
      border: none;
    }
  }
</style>