ceres-uniapp-v2.0/pages/tabbar/user/index.vue

<template>
  <view class="content u-skeleton">
    <!-- 骨架屏 -->
    <Skeleton
        el-color="#efefef"
        bg-color="#fff"
        :loading="loading && isFirstComeIn"
        :animation="true"
    ></Skeleton>
    <view class="top-bg"></view>
    <view class="page-content" >
      <!-- 用户未登录 -->
      <view
          class="user-info-box"
          @click="$jump('../../../pages_category_page2/userModule/login')"
          v-if="userItem.name===undefined "
      >
        <image
            class="user-image u-skeleton-circle"
            src="https://wechat.hnthee.com/ceres-local-file/image/head_default.png"
            mode="widthFix"
        ></image>
        <view class="user-info">
          <view class="user-logoin-title u-skeleton-fillet">{{$t('common.clicktologin')}}</view>
          <view class="user-logoin-lable u-skeleton-fillet">{{$t('common.clicklogintips')}}</view>
        </view>
        <image
            class="user-info-right"
            src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_shop_forward.png"
        ></image>
        <view class="notice">
          <view
              class="messNum"
              v-if="userItem.notRead>0"
          >{{ userItem.notRead }}
          </view>
        </view>
      </view>
      <!-- 用户已登陆 -->
      <view
          class="user-info-box "
          v-else
      >
        <image
            class="user-image u-skeleton-fillet"
            @click="handleJump('../../../pages_category_page2/userModule/personalDetails')"
            v-if="userItem.headImage"
            :src="userItem.headImage"
            mode="widthFix"
            style="border-radius: 50%;"
        ></image>
        <image
            class="user-image"
            v-else
            src="https://wechat.hnthee.com/ceres-local-file/image/head_default.png"
            mode="widthFix"
        >
        </image>
        <view class="user-info">
          <view
              class="user-logoin-title"
              v-if="userItem.name"
          >{{ userItem.name }}
          </view>
          <view
              class="experience flex-items"
              @click="handleJump('../../../pages_category_page1/memberCenter/index')"
          >
            <label>{{$t('user.growthvalue')}}</label>
            <view class="experienceValue">{{ userItem.growth || 0 }} / {{ userItem.nextLevelGrowth || 0 }}</view>
          </view>
        </view>
        <view
            class="notice"
            @click="handleJump('../../../pages_category_page2/userModule/messageCenter')"
        >
          <view
              class="messNum"
              v-if="userItem.notRead>0"
          >{{ userItem.notRead > 99 ? '99+' : userItem.notRead }}
          </view>
        </view>
      </view>
      <!-- 订单卡片 -->
      <view class="order-content">
        <view class="title">{{$t('client.myorder')}}</view>
        <view class="order-box">
          <view
            class="order-item"
            v-for="orderCardItem in orderCardList"
            :key="orderCardItem.id"
            @click="handleJump(orderCardItem.jumpUrl)"
          >
            <image
              class="order-item-image  u-skeleton-circle"
              :src="orderCardItem.icon"
              mode="widthFix"
            >
            </image>
            <view class="order-item-text u-skeleton-fillet">{{ orderCardItem.labelkey ? $t(orderCardItem.labelkey) : orderCardItem.label }}</view>
            <view
              class="quan"
              v-if="userItem[orderCardItem.key]>0"
            >
              {{ userItem[orderCardItem.key] }}
            </view>
          </view>
        </view>
      </view>

      <!-- 第一个卡片 -->
      <view class="service-box">
        <view class="title">{{$t('user.myserver')}}</view>
        <view class="itemBox">
          <view
            class="item-btn"
            v-for="item in fastCardOneList"
            :key="item.id"
            @click="handleJump(item.jumpUrl)"
          >
            <image
              class="item-btn-icon u-skeleton-circle"
              :src="item.icon"
              mode="widthFix"
            >
            </image>
            <view class="item-btn-text u-skeleton-fillet">{{ item.labelkey ? $t(item.labelkey) : item.label }}</view>
          </view>
        </view>
      </view>

      <!-- 第二个卡片 -->
      <view class="service-box">
        <view class="title">{{$t('user.otherserver')}}</view>
        <view class="itemBox">
          <view
            class="item-btn"
            v-for="item in fastCardTwoList"
            :key="item.id"
            @click="handleJump(item.jumpUrl)"
          >
            <image
              class="item-btn-icon u-skeleton-circle"
              :src="item.icon"
              mode="widthFix"
            ></image>
            <view class="item-btn-text u-skeleton-fillet">{{ item.labelkey ? $t(item.labelkey) : item.label }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="copyright">
      <text >中科鑫智 版权所有</text>
      <text >粤ICP备19086489号-3</text>
    </view>
  </view>
</template>

<script>
import Skeleton from "../../../components/Skeleton";
import { fastCardOneList, fastCardTwoList, orderCardList } from "./index.data";
import { Services } from '../../../utils/services'
import { Encrypt } from '../../../utils/secret'

const NET = require('../../../utils/request')
const API = require('../../../config/api')
export default {
  data() {
    return {
      isFirstComeIn: true,
      loading: true,
      orderCardList: orderCardList,
      fastCardOneList: fastCardOneList,
      fastCardTwoList: fastCardTwoList,
      cacheUserItem: {},
      userItem: {
        headImage:'',
        name:undefined
      },
    }
  },
  components:{Skeleton},
  onShow() {
    this.isFirstComeIn=true
    if (uni.getStorageSync('storage_key')) {
      this.cacheUserItem = uni.getStorageSync('storage_key');
    }
    this.handleGetUser()
  },
  methods: {
    /**
     * 处理跳转
     * @param url
     */
    handleJump(url) {
      if (JSON.stringify(this.cacheUserItem) === '{}') {
        return this.$jump('../../../pages_category_page2/userModule/login')
      }
      if (url.startsWith('function')) {
        const [key, funcName] = url.split(':')
        this[funcName]()
      } else {
        this.$jump(url)
      }
    },
    /**
     * 获取用户信息
     */
    handleGetUser() {
      this.loading = true
      NET.request(API.GetUser, {}, 'GET').then(res => {
        this.userItem = res.data
        uni.setStorageSync('storage_userInfo', this.userItem);
        this.isFirstComeIn=false
        this.loading = true
      })
    },
    /**
     * 客服
     * @return {Promise<void>}
     */
    async flyToService() {
      (await Services()).flyToService();
    },
    /**
     * 商家入驻
     */
    handleApplySettle() {
      const res = uni.getStorageSync('storage_key');
      let token = Encrypt(res.token)
      let username = this.userItem.name
      let url = null
      // #ifdef H5
      window.location.href = API.SettledMerchantPrefix + `/#/?username=${ username }&user=${ token }`
      // #endif
      // #ifdef APP-PLUS
      plus.runtime.openURL(API.SettledMerchantPrefix + `/#/?username=${ username }&user=${ token }`, function (e) {
      })
      // #endif
      // #ifdef MP-WEIXIN
      url = API.SettledMerchantPrefix
      uni.navigateTo({
        url: `../../../pages_category_page1/linkOthers/index?url=${ url }&username=${ username }&user=${ token }`
        // 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
        // url: '../../../pages_category_page1/linkOthers/index?url=' + encodeURIComponent(url)
        // url:'../../../pages_category_page2/userModule/coupon'
      })
      // #endif
      // #ifdef MP-ALIPAY
      url = API.SettledMerchantPrefix
      uni.navigateTo({
        url: `../../../pages_category_page1/linkOthers/index?url=${ url }&username=${ username }&user=${ token }`
        // 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
        // url: '../../../pages_category_page1/linkOthers/index?url=' + encodeURIComponent(url)
        // url:'../../../pages_category_page2/userModule/coupon'
      })
      // #endif
    },
  }
}
</script>

<style lang="scss">
page {
  background: #FAFAFA;
}

.content {
  height: 100%;
  position: relative;
  padding-bottom: 30rpx;

  .service-box{
    width: 690rpx;
    //height: 196rpx !important;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 30rpx;
    margin-left: 30rpx;
    margin-top: 28rpx;

    .title{
      color: #252744;
      font-size: 32rpx;
      margin-left: 30rpx;
      margin-top: 36rpx;
    }
  }

  .itemBox {
    display: flex;
    flex-flow: wrap;
    padding-top: 30rpx;
    width: 690rpx;
    margin: 30rpx auto 0 auto;
  }

  /* background-color: #f8f8f8; */
  .top-bg {
    width: 100%;
    height: 420rpx;
    background: linear-gradient(0deg, #FAFAFA, #E5E6F6);
    margin-top: -50rpx;
  }

  .page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
    margin-top: -320upx;

    .user-info-box {
      width: 100%;
      box-sizing: border-box;
      padding: 30upx;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;

      .notice {
        width: 46rpx;
        height: 46rpx;
        position: absolute;
        top: 0;
        right: 50rpx;
        background: url("https://wechat.hnthee.com/ceres-local-file/image/notice.png") no-repeat center center;
        background-size: contain;

        .messNum {
          background: #F54639;
          border-radius: 50%;
          color: #FFFFFF;
          text-align: center;
          margin: -10rpx 0 0 30rpx;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          font-size: 14rpx;
        }
      }

      .user-image {
        width: 126upx;
        height: 126upx;
      }

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 20upx;
        box-sizing: border-box;
        z-index: 10;

        .user-logoin-title {
          font-size: 36rpx;
          font-weight: bold;
          color: #252744;
          //color: rgba(255, 255, 255, 1);
        }

        .user-logoin-lable {
          font-size: 24rpx;
          font-weight: 400;
          color: #252744;
          margin-top: 20rpx;
        }

        .experience {
          label {
            font-size: 24rpx;
            color: #252744;
          }

          .experienceValue {
            width: auto;
            padding: 0 28rpx;
            height: 40rpx;
            font-weight: 400;
            color: #FFFFFF;
            border-radius: 25rpx;
            line-height: 40rpx;
            border: 2rpx solid rgba(0, 0, 0, 0);
            background: linear-gradient(88deg, #252744 0%, #252744 100%);
            font-size: 20rpx;
            margin-left: 20rpx;
          }
        }
      }

      .user-info-right {
        width: 14rpx;
        height: 24rpx;
      }
    }

    .order-content{
      width: 690rpx;
      //height: 196rpx !important;
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      border-radius: 30rpx;
      margin-left: 30rpx;
      z-index: 10;

      .title{
        color: #252744;
        font-size: 32rpx;
        margin-left: 30rpx;
        margin-top: 36rpx;
      }
    }
    .order-box {
      width: 690rpx;
      height: 196rpx !important;
      //box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      .order-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .quan {
          position: absolute;
          right: 42rpx;
          top: -10rpx;
          border: 1px solid red;
          color: #FFFFFF;
          background-color: red;
          border-radius: 50%;
          font-size: 14rpx;
          width: 30upx;
          height: 30upx;
          line-height: 30upx;
          text-align: center;
        }

        .order-item-image {
          width: 56rpx;
          height: 56rpx;
        }

        .order-item-text {
          font-size: 24rpx;
          margin-top: 23rpx;
          font-weight: 400;
          color: #252744;
        }
      }
    }

    .item-btn {
      width: 25%;
      box-sizing: border-box;
      background-color: #FFFFFF;
      text-align: center;
      margin-bottom: 45rpx;

      .item-btn-icon {
        width: 48rpx;
        height: 48rpx !important;
      }

      .item-btn-text {
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 12rpx;
        flex: 1;
        color: #595B6B;
      }

      .messNum {
        margin-left: 10rpx;
        font-size: 16rpx;
        background-color: red;
        color: #FFFFFF;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        margin-top: -5rpx;
        line-height: 30rpx;
        text-align: center;
      }

      .item-btn-right {
        width: 24upx;
        height: 24upx;
      }

    }

    .btnNone {
      margin: 0;
      padding: 0;
      line-height: normal;

      &::after {
        display: none;
      }
    }

    .mt20 {
      margin-top: 20upx;
    }

    .mt1 {
      margin-top: 1upx;
    }
  }

  .copyright {
    text-align: center;
    padding: 30rpx 0 20rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
	display: none;

    text {
      display: block;
      font-size: 20rpx;
      line-height: 30rpx;
      color: #C5CACF;
    }
  }
}
</style>