leromro-mini/pages/mine.vue

<template>
  <view>
    <view class="mine-container">
      <view class="mine-header">
        <up-image
          width="136rpx"
          height="136rpx"
          :show-loading="true"
          :src="userInfo.avatar"
        ></up-image>
        <view class="header-info">
          <text class="info-name" @click="onLogin">{{
            userInfo.nickName
          }}</text>
          <up-icon
            name="setting-fill"
            size="25"
            @click="handLsetTing"
            v-if="userType == 1"
          ></up-icon>
        </view>
      </view>

      <view class="status-card2" v-if="userType == 1">
        <view
          v-for="(listItem, listIndex) in userList"
          :key="listIndex"
          @click="onClick(listItem)"
        >
          <view class="status-card-item2">
            <view class="status-card2-left">
              <view class="grid-img-box">
                <up-icon :name="listItem.iconName" :size="22"></up-icon>
              </view>
              <text class="grid-text">{{ listItem.name }}</text>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
          <up-divider v-if="listIndex !== userList.length - 1"></up-divider>
        </view>
      </view>

      <view class="list-box" v-if="userType == 2">
        <view class="mine-card price-card">
          <view
            v-for="(item, index) in priceList"
            :key="item.key"
            class="price-item"
            :style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }"
            @click="onClick(item)"
          >
            <view class="price-name flex-center"> {{ item.name }} </view>
            <view class="price-data flex-center">
              {{ index === 0 ? '¥' : ''
              }}<up-count-to
                :startVal="0"
                :endVal="data[item.key]"
                :decimals="item.decimals"
              ></up-count-to>
            </view>
            <text class="grid-min-price" v-if="item.key === 'balance'"
              >待入账 ¥{{ data[item.balance] }}</text
            >
          </view>
        </view>

        <view class="mine-card status-card">
          <view
            class="status-card-item"
            v-for="(listItem, listIndex) in adminList"
            :key="listIndex + 'adminList'"
            @click="onClick(listItem)"
          >
            <view class="grid-img-box">
              <up-icon
                :name="listItem.iconName"
                color="rgba(51, 51, 51, 1)"
                size="25"
              ></up-icon>
            </view>
            <text class="grid-text">{{ listItem.name }}</text>
          </view>
        </view>

        <view class="mine-card count-card">
          <view class="count-title">订单统计</view>
          <view class="count-list">
            <view
              class="count-item"
              v-for="(item, index) in orderList"
              :key="index + 'orderList'"
              @click="onClick(item)"
            >
              <up-count-to
                :startVal="0"
                :endVal="data[item.key]"
                :color="data[item.key] > 0 ? 'rgba(221, 94, 69, 1)' : ''"
              ></up-count-to>
              <text class="count-item-text">{{ item.name }}</text>
            </view>
          </view>
        </view>

        <view class="mine-card rate-card">
          <view class="count-title">好评率</view>
          <view class="rate-list">
            <view class="rate-box">
              <label class="rate-count">{{ rateValue }}</label>
              <text class="rate-text">优秀</text>
            </view>
            <up-rate
              v-model="rateValue"
              active-color="rgba(255, 87, 4, 1)"
              inactive-color="#b2b2b2"
              gutter="20"
              readonly
            ></up-rate>
          </view>
        </view>
      </view>

      <view class="logout-box" v-if="getToken()">
        <view class="logout-btn" @click="onLogou">退出登陆</view>
      </view>
    </view>
    <CustomTabBar page="mine" />
    <up-popup :show="show" mode="center" @close="close" @open="open">
      <view>
        <QRCode
          scene="123"
          page="/pages/index/index"
          width="430"
          auto-color
          line-color="#000000"
          is-hyaline
        ></QRCode>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import store from '@/store'
import { getVolunteerAccountInfo, volunteerOrderStatistics } from '@/api/mine'
import CustomTabBar from '@/components/CustomTabBar/index.vue'
import QRCode from '@/components/QRCode/index.vue'

import { getToken } from '@/utils/auth'
import { showConfirm } from '@/utils/common'

const show = ref(false); // 是否显示二维码
const userInfo = ref({
  avatar: '/static/serverImg/mine/user.png',
  nickName: '登陆/注册',
})
const data = ref({
  balance: 0.0,
  reservationCount: 0,
  doingCount: 0,
  finishedCount: 0,
  cancelCount: 0,
  orderCount: 0,
  orderFrozenBalance: 0,
})
const rateValue = ref(5)
const priceList = [
  {
    name: '账户余额',
    key: 'balance',
    decimals: 2,
    balance: 'orderFrozenBalance',
    page: '/pages_mine/pages/wallet/index',
  },
  {
    name: '订单总数',
    key: 'orderCount',
    decimals: 0,
    switchPage: '/pages/classify',
    value: 0,
  },
]
const orderList = ref([
  {
    name: '预约单',
    key: 'reservationCount',
    switchPage: '/pages/classify',
    value: 1,
  },

  {
    name: '进行单',
    key: 'doingCount',
    switchPage: '/pages/classify',
    value: 2,
  },
  {
    name: '完成单',
    key: 'finishedCount',
    switchPage: '/pages/classify',
    value: 3,
  },
  {
    name: '取消单',
    key: 'cancelCount',
    switchPage: '/pages/classify',
    value: 4,
  },
])

const userType = uni.getStorageSync('userType') //读取本地存储

const adminList = ref([
  {
    name: '差评申述',
    iconName: 'chat',
    page: '/pages_mine/pages/bad/index',
  },
  // {
  // 	name: '资质申请',
  // 	iconName: 'chat',
  // 	page: '/pages_home/pages/qualifications/index'
  // },
  {
    name: '帮助与客服',
    iconName: 'kefu-ermai',
  },
  {
    name: '用户端',
    iconName: 'account',
    operate: () => {
      uni.setStorageSync('userType', 1)
      store.dispatch('GetInfo').then((res) => {
        userInfo.value = store.state.user
        uni.reLaunch({
          url: '/pages/index',
        })
      })
    },
  },
])
const userList = ref([
  {
    name: '钱包',
    iconName: 'rmb-circle',
    page: '/pages_mine/pages/wallet/index',
  },
  {
    name: '浏览记录',
    iconName: 'eye',
  },
  {
    name: '收藏',
    iconName: 'star',
  },
  {
    name: '评论',
    iconName: 'edit-pen',
  },
  {
    name: '地址',
    iconName: 'map',
    page: '/pages_mine/pages/selectAddress/index',
  },
  {
    name: '帮助与客服',
    iconName: 'kefu-ermai',
  },
  {
    name: '成为志愿者',
    iconName: 'account',
    operate: () => {
      uni.setStorageSync('userType', 2)
      store.dispatch('GetInfo').then((res) => {
        userInfo.value = store.state.user
        uni.reLaunch({
          url: '/pages/index',
        })
      })
    },
  },
  {
    name: '邀请二维码',
    iconName: 'share',
    operate: () => {
      show.value = true
    },
  },
   {
    name: '查看积分',
    iconName: 'eye',
   page: '/pages_mine/pages/integral/index',
  },
])

function open() {  //弹框打开逻辑
  // 打开逻辑，比如设置 show 为 true  
  show.value = true;  
}  

function close() {  
  // 关闭逻辑，设置 show 为 false  
  show.value = false;  
}  

const onLogin = () => {
  const token = getToken()
  !token &&
    showConfirm('您还未登陆系统，是否前往登陆?').then((res) => {
      if (res.confirm) {
        store.dispatch('LogOut').then((res) => {
          uni.reLaunch({ url: '/pages/login' })
        })
      }
    })
}

const onLogou = () => {
  showConfirm('确认退出登陆吗？').then((res) => {
    if (res.confirm) {
      store.dispatch('LogOut').then((res) => {
        // uni.reLaunch({ url: '/pages/login' })
        uni.reLaunch({
          url: '/pages/index',
        })
      })
    }
  })
}
const onClick = (record) => {
  console.log('record', record, record.page)
  if (record.page) {
    uni.navigateTo({
      url: record.page,
    })
  }
  if (record.operate) {
    record.operate()
  }

  if (record.switchPage && record.value) {
    const app = getApp()
    app.globalData.switchTabParams = {
      tabKey: record.value,
    }
    // JS跳转
    uni.switchTab({
      url: record.switchPage,
    })
    return
  }
}

const getDetails = async () => {
  try {
    // const res = await getVolunteerAccount();
    // console.log('res',res);
  } catch (error) {
    console.log('error', error)
  }
}

const handLsetTing = () => {
  uni.navigateTo({
    url: '/pages_mine/pages/setupUser/index',
  })
}

const geUserInfo = () => {
  console.log(store.state.user, '>>>>99')
  userInfo.value = store.state.user
  // store.dispatch('GetInfo').then((res) => {
  // 	userInfo.value = store.state.user
  // });
}

onShow(() => {
  const token = getToken()
  if (token) {
    geUserInfo()
    init()
  }
})

const init = async () => {
  try {
    // uni.hideLoading();
    uni.showLoading({
      title: '数据加载中...',
    })

    if (userType === 2) {
      const res1 = await getVolunteerAccountInfo()
      const res2 = await volunteerOrderStatistics()
      data.value = {
        ...res1.data,
        ...res2.data,
      }
      console.log(11, res1, res2, data.value)
    }
  } catch (error) {
    console.log('error', error)
    uni.showToast({
      title: error.msg,
      icon: 'error',
    })
  } finally {
    uni.hideLoading()
  }
}
</script>

<style lang="scss" scoped>
.mine-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  // bottom: 150rpx;
  bottom: 0;
  background: rgba(245, 245, 245, 1);
  overflow-y: auto;

  padding-bottom: 150rpx;

  .mine-header {
    padding: 36rpx 44rpx;
    background: #fff;
    display: flex;

    .header-info {
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-left: 36rpx;
      flex: 1;

      .info-name {
        font-size: 36rpx;
        font-weight: 400;
        line-height: 54rpx;
        color: rgba(51, 51, 51, 1);
      }

      .info-id {
        font-size: 28rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 42rpx;
        color: rgba(153, 153, 153, 1);
      }

      .info-edit {
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 36rpx;
        color: #3366ff;
      }
    }
  }

  .list-box {
    padding: 16rpx 40rpx;

    .price-card {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price-item {
        display: flex;
        align-items: center;
        flex-direction: column;

        .price-name {
          font-size: 28rpx;
          font-weight: 400;
          line-height: 42rpx;
          color: rgba(102, 102, 102, 1);
        }

        .price-data {
          font-size: 48rpx;
          font-weight: 400;
          line-height: 72rpx;
          color: rgba(51, 51, 51, 1);
        }

        .grid-min-price {
          font-size: 24rpx;
          font-weight: 400;
          line-height: 36rpx;
          color: rgba(153, 153, 153, 1);
        }
      }
    }

    .service-img {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }

    .service-list {
      padding-bottom: 12px;
    }

    .grid-text {
      font-size: 14px;
      color: #909399;
      padding: 10rpx 0 20rpx 0rpx;
      /* #ifndef APP-PLUS */
      box-sizing: border-box;
      /* #endif */
    }

    .grid-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;

      .item-badge {
        position: absolute;
      }
    }

    .price-box {
      display: flex;
      align-content: center;
      justify-content: space-between;
      // padding: 12px;

      .price-item {
        width: 50%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .price-name {
          font-size: 28rpx;
          font-weight: 400;
          line-height: 42rpx;
          color: rgba(102, 102, 102, 1);
        }

        .price-data {
          font-size: 48rpx;
          font-weight: 400;
          line-height: 72rpx;
          color: rgba(51, 51, 51, 1);
        }

        .grid-min-price {
          font-size: 24rpx;
          font-weight: 400;
          line-height: 36rpx;
          color: rgba(153, 153, 153, 1);
        }
      }
    }

    .status-card {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48rpx;

      /* 网格项之间的间距 */
      .status-card-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .grid-img-box {
          padding: 35rpx;
          border-radius: 50%;
          background: rgba(249, 250, 251, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 12rpx;
        }

        .grid-text {
          font-size: 28rpx;
          font-weight: 400;
          line-height: 42rpx;
          color: rgba(51, 51, 51, 1);
        }
      }
    }

    .count-card {
      .count-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 3 列，每列等宽 */
        gap: 32rpx;

        /* 网格项之间的间距 */
        .count-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .count-item-text {
            font-size: 28rpx;
            font-weight: 400;
            line-height: 42rpx;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }

    .rate-card {
      .rate-list {
        display: flex;
        align-items: center;

        .rate-box {
          display: flex;
          flex-direction: column;
          align-items: center;

          .rate-count {
            font-size: 64rpx;
            font-weight: 400;
            line-height: 96rpx;
            color: rgba(51, 51, 51, 1);
          }

          .rate-text {
            font-size: 28rpx;
            font-weight: 400;
            line-height: 42rpx;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
}

.mine-card {
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0),
    0rpx 4rpx 16rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 16rpx;
  padding: 40rpx;
}

.count-title {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 8rpx;
}

.status-card2 {
  margin-top: 24rpx;
  padding: 30rpx 30rpx;
  background-color: #fff;

  .status-card-item2 {
    // height: 88rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .status-card2-left {
      display: flex;
      align-items: center;

      .grid-img-box {
        margin-right: 12rpx;
      }
    }
  }
}

.logout-box {
  padding: 40rpx;

  .logout-btn {
    border-radius: 16rpx;
    background: rgba(221, 94, 69, 1);
    padding: 24rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    color: rgba(255, 255, 255, 1);
  }
}
</style>