• 日期: 2027-07-11 07:59:13
  • 标签: 常规
<template>
  <div class='user clearfix'>
    <div class='user-header clearfix'>
      <div v-link=''UserProfile'' class='user-logo fl'></div>
      <div v-link=''UserProfile'' class='user-info fl'>
        <h3>{{ userName }}</h3>
        <p>ID：{{ userId }}</p>
        <p class='mt10'>{{ userGrade }}</p>
      </div>
      <router-link :to='{name: 'UserFinanceRecharge'}' class='fr'>
        <van-button plain round type='info' class='recharge'>充值</van-button>
      </router-link>
    </div>
    <!-- 余额-优惠券 -->
    <van-row class='user-money mg10 mt10'>
      <van-col v-link=''UserFinanceRecharge'' span='12' class='tc money-left'>
        <p class='fb f14 color-333'>{{ userMoney }}</p>
        <p class='color-999'>可用余额（元）</p>
      </van-col>
      <van-col v-link=''UserCouponMine'' span='12' class='tc money-right'>
        <p class='fb f14 color-333'>{{ couponCount }}</p>
        <p class='color-999'>优惠券</p>
        <a v-if='canFetchCount > 0' v-link=''UserCouponIndex'' class='has-can-fetch'>有{{ canFetchCount }}张可领</a>
      </van-col>
    </van-row>
    <!-- 产品 服务 -->
    <div class='product-service clearfix mg10 mb10'>
      <h3>产品与服务 <span v-link=''UserAllProducts'' class='fr f12 text-gray mr10 text-normal'>所有产品 <ep-icon type='jiantou' :font-size='12'></ep-icon></span></h3>
      <van-row class='list'>
<pre><code>    &lt;van-col v-if='canSale(['product_tm_ipr', 'product_tm_service', 'product_ipr_patent', 'product_ipr_copyright', 'product_ipr_inter'], true)' v-link=''UserTrademark'' span='6'&gt;
      &lt;ep-icon symbol type='shangbiaozhichan' /&gt;
      &lt;p&gt;商标知产&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_tm_trade')' v-link=''UserTrademarkTrade'' span='6'&gt;
      &lt;ep-icon symbol type='shangbiaojiaoyi1' /&gt;
      &lt;p&gt;商标交易&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_patent_trade')' v-link=''UserPatentMenus'' span='6'&gt;
      &lt;ep-icon symbol type='zhuanlijiaoyi' /&gt;
      &lt;p&gt;专利交易&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-link=''ProjectFinancing'' span='6'&gt;
      &lt;img style='width: 24px;height: 24px;margin-bottom: -3px;' src='/statics/epower/img/xiangmurongzi.png' alt=''&gt;
      &lt;p&gt;项目融资&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_gw_web')' v-link=''UserWebsite'' span='6'&gt;
      &lt;ep-icon symbol type='guanweijianzhan' /&gt;
      &lt;p&gt;官微建站&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale(['product_domain_reg', 'product_domain_trade'])' v-link=''UserDomainIndex'' span='6'&gt;
      &lt;ep-icon symbol type='yuming1' /&gt;
      &lt;p&gt;域名服务&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_custom_service')' v-link=''UserService'' span='6'&gt;
      &lt;ep-icon symbol type='qiyefuwu' /&gt;
      &lt;p&gt;企业服务&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_etp_email')' v-link=''UserCloudEmail'' span='6'&gt;
      &lt;ep-icon symbol type='youxiang1' /&gt;
      &lt;p&gt;企业邮箱&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_mini_program')' v-link=''UserXcx'' span='6'&gt;
      &lt;ep-icon symbol type='xiaochengxu' /&gt;
      &lt;p&gt;小程序&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale(['product_server', 'product_vhost'])' v-link=''UserCloudIndex'' span='6'&gt;
      &lt;ep-icon symbol type='yunjisuan' /&gt;
      &lt;p&gt;云计算&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_ssl')' v-link=''UserSsl'' span='6'&gt;
      &lt;ep-icon symbol type='SSL' /&gt;
      &lt;p&gt;SSL证书&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_sms')' v-link=''UserSms'' span='6'&gt;
      &lt;ep-icon symbol type='duanxin' /&gt;
      &lt;p&gt;短信服务&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-if='canSale('product_logo')' v-link=''UserLogo'' span='6'&gt;
      &lt;ep-icon symbol type='logo' /&gt;
      &lt;p&gt;智能LOGO&lt;/p&gt;
    &lt;/van-col&gt;
    
  &lt;/van-row&gt;
&lt;/div&gt;
&lt;!-- 通用服务 --&gt;
&lt;div class='product-service clearfix mg10 mb10'&gt;
  &lt;h3&gt;通用服务&lt;/h3&gt;
  &lt;van-row class='list'&gt;
    &lt;van-col v-link=''UserFinance'' span='6'&gt;
      &lt;ep-icon symbol type='caiwu' /&gt;
      &lt;p&gt;财务管理&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;van-col v-link=''UserAccountManage'' span='6'&gt;
      &lt;ep-icon type='geren' symbol color='#9873FE' /&gt;
      &lt;p&gt;账户管理&lt;/p&gt;
    &lt;/van-col&gt;
    &lt;template v-if='configs.member.work_order_enable'&gt;
      &lt;van-col v-link=''WorkOrderList'' span='6'&gt;
        &lt;ep-icon symbol type='gongdan' /&gt;
        &lt;p&gt;工单管理&lt;/p&gt;
      &lt;/van-col&gt;
    &lt;/template&gt;
    &lt;template v-if='configs.product.promotion_commission_enable'&gt;
      &lt;van-col v-link=''UserPromotionIndex'' span='6'&gt;
        &lt;ep-icon symbol type='tuiguang' /&gt;
        &lt;p&gt;在线推广&lt;/p&gt;
      &lt;/van-col&gt;
      &lt;van-col span='6' v-on:click='showShare = true'&gt;
        &lt;ep-icon symbol type='fenxiang' /&gt;
        &lt;p&gt;分享好友&lt;/p&gt;
      &lt;/van-col&gt;
    &lt;/template&gt;
  &lt;/van-row&gt;
&lt;/div&gt;
&lt;!-- 专属客服 --&gt;
&lt;div class='user-customer clearfix mg10'&gt;
  &lt;div class='fl customer-avtar-wrapper'&gt;
    &lt;img :src='customer_service_staff.avatar_url || '/statics/epower/img/1569570223608698.jpg'' alt srcset /&gt;
  &lt;/div&gt;
  &lt;div class='fl'&gt;
    &lt;h3&gt;专属客服 — {{ customer_service_staff.name }}&lt;/h3&gt;
    &lt;van-row :gutter='20'&gt;
      &lt;van-col span='12'&gt;
        &lt;i class='iconfont icon-dianhua f12 color-main mr5'&gt;&lt;/i&gt;
        &lt;a :href=''tel:' + customer_service_staff.fixed_number''&gt;{{ customer_service_staff.fixed_number }}&lt;/a&gt;
      &lt;/van-col&gt;
      &lt;van-col span='12'&gt;
        
        
        &lt;i class='iconfont icon-qq f12 color-main mr5'&gt;&lt;/i&gt;
        &lt;a :href='basic.qq_link' :target='basic.qq ? '_self' : '_blank''&gt;{{ basic.qq || '联系客服' }}&lt;/a&gt;
        
      &lt;/van-col&gt;
    &lt;/van-row&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=' pad-10'&gt;&lt;button class='primary hover' v-on:click='logout'&gt;退出登录&lt;/button&gt;&lt;/div&gt;
&lt;van-share-sheet
  v-model='showShare'
  title='立即分享给好友'
  :options='options'
  v-on:select='onSelect'
/&gt;
</code></pre>
  </div>
</template>
<script>

import { ImagePreview, Toast } from 'vant'
import QRCode from '../../utils/qrcode'
import { mapGetters } from 'vuex'
import { canSale, CallAff } from '@/utils'

export default {
  data() {
    return {
      domain: window.location.protocol + '//' + window.location.hostname || window.location.host,
      showShare: false,
      canFetchCount: 0,
      couponCount: 0,
      options: [
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  computed: {
    ...mapGetters(['configs', 'userInfo']),
    userGrade() {
      console.log('this.userInfo')
      return this.userInfo ? this.userInfo.group_name : '--'
    },
    userName() {
      return this.userInfo ? this.userInfo.username : '--'
    },
    userId() {
      return this.userInfo ? this.userInfo.id : '--'
    },
    userMoney() {
      return this.userInfo ? this.userInfo.money : '--'
    },
    basic() {
      if (this.configs && this.configs.basic) {
        return this.configs.basic
      }
      return {}
    },
    link() {
      return this.domain + '/register/' + (this.userInfo.id || '')
    },
    customer_service_staff() {
      if (!this.userInfo) return {}
      return this.userInfo.customer_service_staff || {}
    }
  },
  created() {
    this.getCoupon()
  },
  methods: {
    callAff() {
      CallAff()
    },
    canSale(identity, isOr) {
      return canSale(identity, isOr)
    },
    showPoster() {
      this.$api.getRaw('user/referral/link', {
        link: this.link
      }, { processMessage: '正在生成...' }).then(res => {
        this.viewImage(res.image)
      })
    },
    viewImage(url) {
      ImagePreview({
        images: [url],
        closeable: true,
        showIndex: false
      })
    },
    viewQrCode(url) {
      ImagePreview({
        images: [url],
        closeable: true,
        className: 'qrcode-image-viewer',
        showIndex: false
      })
    },
    logout() {
      this.$api.delete('authorizations/current', { Root: true }).then(res => {
        Toast.success('已退出')
        setTimeout(() => {
          this.$store.commit('layout/SET_USER_INFO', null)
          this.$router.push('/')
        }, 500)
      })
    },
    onSelect(option) {
      if (option.name === '分享海报') {
        this.showPoster()
      }
      if (option.name === '二维码') {
        const qrcode = QRCode(0, 'Q')
        const base64Data = qrcode.getBase64(this.link, 5, 5)
        this.viewQrCode('data:image/png;base64,' + base64Data)
      }
      this.showShare = false
    },
    getCoupon() {
      this.$api.getRaw('/coupons').then(res => {
        this.canFetchCount = res.length
      })
      this.$api.get('user/coupons', { type: 'usable' }).then(res => {
        this.couponCount = res.data.meta.pagination.total
      })
    }
  }
}
</script>
<style lang='less' scoped>
.customer-avtar-wrapper{
width: 50px;
height: 50px;
display: flex;align-items: center;
            margin-right: 15px;
img{
     max-width: 100%;
        max-height: 100%;
   align-items: center;
}
}
.mg10 {
  margin-left: 10px;
  margin-right: 10px;
}
.user {
  margin-top: -44px;
}
.user-header {
  padding: 35px 15px 35px 20px;
  background: linear-gradient(135deg, #6089fb 0%, #5a50ff 100%);
  border-radius: 0px 0px 40px 40px;
}
.user-logo {
  width: 50px;
  height: 50px;
  background: url('/statics/epower/mobile/images/user-avatar.png') no-repeat
    center center;
  background-size: cover;
  margin-right: 15px;
}
.user-info {
  color: #ffffff;
  h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    margin-top: 4px;
    margin-bottom: 10px;
  }
  p {
    height: 14px;
    font-size: 14px;
    line-height: 14px;
  }
}
.recharge {
  width: 70px;
  height: 25px;
  line-height: 25px;
  margin-top: 13px;
  border-color: #fff;
}
.user-money {
  height: 74px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #fff;
  margin-bottom: 10px;
  .money-left {
    border-right: solid 1px #e5e5e5;
  }
  .money-right {
    // 优惠券显示
    position: relative;
    .has-can-fetch {
      right: 10px;
      top: -10px;
      position: absolute;
      padding: 0 5px;
      height: 18px; line-height: 18px;
      background: #ffaa33;
      border-radius: 9px 9px 9px 0px;
      color: #fff;
    }
  }
}
.product-service {
  background: #fff;
  padding-bottom: 30px;
  h3 {
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    font-weight: bold;
    color: #1b1b1b;
    padding-left: 15px;
    border-bottom: 1px solid #e5e5e5;
  }
  .list {
    text-align: center;
    .van-col {
      margin-top: 30px;
      .iconfont,.icon-svg{
          font-size: 24px;
      }
      p {
        font-size: 12px;
        height: 12px;
        margin-top: 10px;
        color: #666;
      }
    }
  }
}
.user-customer {
  height: 90px;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  .customer-avtar {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .phone{
    color: #f73;
  }
  h3 {
    line-height: 24px;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }
  .van-icon {
    vertical-align: -2px;
  }
  &>div:last-child{
    width: 70%;
  }
}
</style>
<style lang='less'>
  .qrcode-image-viewer{
    .van-image__img {
      width: 50%;
      height: 50%;
      margin: auto;
    }
  }
</style>
Vue 代码问题修复 - 用户中心页面优化

原文地址: https://www.cveoy.top/t/topic/pjCE 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录