|
@@ -1,125 +1,118 @@
|
|
<template>
|
|
<template>
|
|
- <div class="mine-header">
|
|
|
|
- <van-sticky v-if="$envs.inAppOrH5">
|
|
|
|
- <div class="tabbar-header-top-placeholder" v-if="$envs.inApp"></div>
|
|
|
|
- <div class="app-header-set tabbar-header">
|
|
|
|
- <span class="set-icon clickable" @click="jumpSetting">
|
|
|
|
- <AppIcon name="Setting" size="25" />
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- </van-sticky>
|
|
|
|
|
|
+ <div class="mine-header" :class="mineClass">
|
|
|
|
+ <div class="tabbar-header-top-placeholder" v-if="$envs.inApp"></div>
|
|
<div class="header-info" :class="{ pt: $envs.inWX }">
|
|
<div class="header-info" :class="{ pt: $envs.inWX }">
|
|
<div class="user-img">
|
|
<div class="user-img">
|
|
<img
|
|
<img
|
|
:src="pageUserInfo.headimageurl || pageUserInfo.avatar"
|
|
:src="pageUserInfo.headimageurl || pageUserInfo.avatar"
|
|
@error="errorImgFun"
|
|
@error="errorImgFun"
|
|
/>
|
|
/>
|
|
|
|
+ <span v-if="accountInfo.hasVip" class="j-icon vip-icon"></span>
|
|
|
|
+ <span v-if="accountInfo.hasBigmember" class="j-icon bigmember-icon"></span>
|
|
</div>
|
|
</div>
|
|
<div class="user-info-container">
|
|
<div class="user-info-container">
|
|
<div class="user-info-top">
|
|
<div class="user-info-top">
|
|
- <span
|
|
|
|
- class="ellipsis user-name"
|
|
|
|
- v-if="
|
|
|
|
- pageUserInfo.nickname || pageUserInfo.phone || pageUserInfo.jyname
|
|
|
|
- "
|
|
|
|
- >{{ getName }}</span
|
|
|
|
- >
|
|
|
|
- <span
|
|
|
|
- class="j-icon base-icon icon-super-sub"
|
|
|
|
- v-if="pageUserInfo.subscribeVip && pageUserInfo.subscribeVip > 0"
|
|
|
|
- ></span>
|
|
|
|
- <span
|
|
|
|
- class="j-icon base-icon big-vip-icon"
|
|
|
|
- v-if="pageUserInfo.bigmemberVip && pageUserInfo.bigmemberVip > 0"
|
|
|
|
- :style="'background-image:url(' + setBigVipPic + ')'"
|
|
|
|
- ></span>
|
|
|
|
|
|
+ <span class="ellipsis user-name"
|
|
|
|
+ v-if="getName">{{ getName }}</span>
|
|
</div>
|
|
</div>
|
|
- <div class="user-info-bottom">
|
|
|
|
- <span
|
|
|
|
- class="ellipsis user-phone"
|
|
|
|
- v-if="pageUserInfo.nickname && pageUserInfo.phone"
|
|
|
|
- >{{
|
|
|
|
- pageUserInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1 **** $2')
|
|
|
|
- }}</span
|
|
|
|
- >
|
|
|
|
- <span
|
|
|
|
- class="set-phone"
|
|
|
|
- @click="bindPhone({})"
|
|
|
|
- v-if="!pageUserInfo.phone"
|
|
|
|
- >绑定手机号</span
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="user-info-bottom" :class="{'single-identity-container': userIdentityList.length === 1}">
|
|
|
|
+ <span class="change-identity" @click="changeIdentityHandle">
|
|
|
|
+ <span class="identity-name ellipsis">
|
|
|
|
+ {{userCurrentIdentity ? userCurrentIdentity.name : '' }}
|
|
|
|
+ </span>
|
|
|
|
+ <AppIcon v-if="userIdentityList.length > 1" name="qiehuan" size="12" color="#171826" />
|
|
|
|
+ </span>
|
|
|
|
+ <span class="identity-keep" @click.stop="jumpIdentityKeep">
|
|
|
|
+ <span>身份信息维护</span>
|
|
|
|
+ <AppIcon name="youbian" size="10" color="#fff" />
|
|
|
|
+ </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- class="wx-header-set clickable"
|
|
|
|
- @click="jumpSetting"
|
|
|
|
- v-if="$envs.inWX"
|
|
|
|
- >
|
|
|
|
- <AppIcon name="Setting" size="25" />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- class="change-identity plr12"
|
|
|
|
- :class="
|
|
|
|
- userCurrentIdentity && userCurrentIdentity.positionType !== 1
|
|
|
|
- ? 'id-bg-one'
|
|
|
|
- : 'id-bg-two'
|
|
|
|
- "
|
|
|
|
- >
|
|
|
|
- <span class="identity-name ellipsis">{{
|
|
|
|
- userCurrentIdentity ? userCurrentIdentity.name : ''
|
|
|
|
- }}</span>
|
|
|
|
- <div class="change-right" @click="changeIdentityHandle">
|
|
|
|
- <span v-if="userIdentityList.length > 1">
|
|
|
|
- <AppIcon name="qiehuan" size="14" color="#33373B" />
|
|
|
|
- <span class="text">切换身份</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="identity-keep-inset" v-else @click.stop="jumpIdentityKeep">
|
|
|
|
- <span>身份信息维护</span>
|
|
|
|
- <AppIcon name="youbian" size="16" color="#2ABED1" />
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- v-if="userIdentityList.length > 1"
|
|
|
|
- class="identity-keep"
|
|
|
|
- @click.stop="jumpIdentityKeep"
|
|
|
|
- >
|
|
|
|
- <span>身份信息维护</span>
|
|
|
|
- <AppIcon name="youbian" size="10" color="#fff" />
|
|
|
|
|
|
+ <div class="app-header-set clickable" @click="jumpSetting">
|
|
|
|
+ <AppIcon name="Setting" size="20" color="#fff"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="order-tabs">
|
|
|
|
- <div class="order-tab-item clickable" @click="jumpOrderPage(1)">
|
|
|
|
- <AppIcon name="dingdan_daifukuan" size="36" color="33373B" />
|
|
|
|
- <div class="tab-item-text">待付款</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="order-tab-item clickable" @click="jumpOrderPage(2)">
|
|
|
|
- <AppIcon name="dingdan_yiwancheng" size="36" color="33373B" />
|
|
|
|
- <div class="tab-item-text">已完成</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="order-tab-item clickable" @click="jumpOrderPage(3)">
|
|
|
|
- <AppIcon name="dingdan_yiquxiao" size="36" color="33373B" />
|
|
|
|
- <div class="tab-item-text">已取消</div>
|
|
|
|
|
|
+ <div class="account-info" v-if="Array.isArray(accountList) && accountList.length > 0">
|
|
|
|
+ <div class="account-info-label">
|
|
|
|
+ <div class="account-info-name" :class="{'active-type': temp.selected && accountList.length > 1}" v-for="temp in accountList" @click="changeAccountType(temp)">
|
|
|
|
+ <span class="type-name">{{accountList.length === 1 ? '账号类型:' : ''}}{{ temp.name }}</span>
|
|
|
|
+ <span class="tip" v-if="activeAccountType.name === '注册用户'">您尚未开通会员</span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="order-tab-item clickable" @click="jumpOrderPage(0)">
|
|
|
|
- <AppIcon name="dingdan_quanbudingdan" size="36" color="33373B" />
|
|
|
|
- <div class="tab-item-text">全部订单</div>
|
|
|
|
|
|
+ <div class="account-info-content" v-if="activeAccountType">
|
|
|
|
+ <div class="account-handle account-handle--free bg-line-gold" v-if="activeAccountType.name === '注册用户'">
|
|
|
|
+ <p>
|
|
|
|
+ <i class="vip-icon"></i>
|
|
|
|
+ <span class="text">开通超级订阅</span>
|
|
|
|
+ <span class="activity-tip" v-if="activeAccountType.attr.subVipActMsg">
|
|
|
|
+ <i class="limit-time-icon"></i>
|
|
|
|
+ {{ activeAccountType.attr.subVipActMsg }}
|
|
|
|
+ </span>
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ <span>立享27+项专属权益</span>
|
|
|
|
+ <span class="self-handle-btn" @click="toBuyVip('buy')">立即开通</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="account-handle account-handle--vip " v-else-if="activeAccountType.name === '超级订阅' && activeAccountType.attr">
|
|
|
|
+ <div class="account-handle-item bg-line-gold">
|
|
|
|
+ <p>到期时间:{{ activeAccountType.vipEntTime }}</p>
|
|
|
|
+ <p class="self-handle-btn" v-if="activeAccountType.attr.renew" @click="toBuyVip('renew')">
|
|
|
|
+ 去续费 <AppIcon name="youbian" size="16" color="#171826" />
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="gap"></div>
|
|
|
|
+ <div class="account-handle-item bg-line-gold">
|
|
|
|
+ <p>购买区域:{{ activeAccountType.attr.buyMsg }}</p>
|
|
|
|
+ <p class="self-handle-btn" @click="updateVip(activeAccountType.attr)">
|
|
|
|
+ <span>{{activeAccountType.attr.upgrade ? '去升级' : '升级咨询'}}</span>
|
|
|
|
+ <AppIcon name="youbian" size="16" color="#171826" />
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="account-handle account-handle--vip " v-else-if="activeAccountType.name === '省份订阅包' && activeAccountType.attr">
|
|
|
|
+ <div class="account-handle-item bg-line-gold">
|
|
|
|
+ <p>到期时间:{{ activeAccountType.vipEntTime }}</p>
|
|
|
|
+ <p class="self-handle-btn" v-if="activeAccountType.attr.renew" @click="areaVip('renew')">
|
|
|
|
+ 去续费 <AppIcon name="youbian" size="16" color="#171826" />
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="gap"></div>
|
|
|
|
+ <div class="account-handle-item" :class="activeAccountType.attr.buyMsg !== '全国' ? 'bg-line-gold' : 'bg-line-blue'">
|
|
|
|
+ <p>购买区域:{{ activeAccountType.attr.buyMsg }}</p>
|
|
|
|
+ <p class="self-handle-btn" @click="areaVipUpdate(activeAccountType.attr)">
|
|
|
|
+ <span>{{activeAccountType.attr.upgrade ? '去升级' : '开通超级订阅'}} </span>
|
|
|
|
+ <AppIcon name="youbian" size="16" color="#171826" />
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!--大会员和商机管理-->
|
|
|
|
+ <div class="account-handle account-handle--big-ent bg-line-gold" v-else>
|
|
|
|
+ <p>您的会员到期时间:{{ activeAccountType.vipEntTime }}</p>
|
|
|
|
+ <p class="self-handle-btn" @click="renewConsult">
|
|
|
|
+ 续费咨询 <AppIcon name="youbian" size="16" color="#171826" />
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+<!-- 订单tab-->
|
|
|
|
+ <order-tabs/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import OrderTabs from './OrderTabs.vue'
|
|
import { Sticky } from 'vant'
|
|
import { Sticky } from 'vant'
|
|
-import { getAccountInfo } from '@/api/modules'
|
|
|
|
|
|
+import { getAccountInfo, getUserAccountInfo } from '@/api/modules'
|
|
import { AppIcon } from '@/ui'
|
|
import { AppIcon } from '@/ui'
|
|
-import { openAppOrWxPage } from '@/utils'
|
|
|
|
|
|
+import { openAppOrWxPage, dateFormatter } from '@/utils'
|
|
import { LINKS } from '@/data'
|
|
import { LINKS } from '@/data'
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
[Sticky.name]: Sticky,
|
|
[Sticky.name]: Sticky,
|
|
- [AppIcon.name]: AppIcon
|
|
|
|
|
|
+ [AppIcon.name]: AppIcon,
|
|
|
|
+ OrderTabs
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -128,61 +121,97 @@ export default {
|
|
nickname: '',
|
|
nickname: '',
|
|
phone: '',
|
|
phone: '',
|
|
bigmemberVip: ''
|
|
bigmemberVip: ''
|
|
|
|
+ },
|
|
|
|
+ accountInfo: {
|
|
|
|
+ hasVip: false,
|
|
|
|
+ hasBigmember: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
getName() {
|
|
getName() {
|
|
- let name
|
|
|
|
const { nickname, phone, jyname } = this.pageUserInfo
|
|
const { nickname, phone, jyname } = this.pageUserInfo
|
|
- if (nickname) {
|
|
|
|
- name = nickname
|
|
|
|
- } else if (phone) {
|
|
|
|
- name = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1 **** $2')
|
|
|
|
- } else if (jyname) {
|
|
|
|
- name = jyname
|
|
|
|
- }
|
|
|
|
- return name
|
|
|
|
|
|
+ const rephone = phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1 **** $2') : ''
|
|
|
|
+ return nickname || rephone || jyname
|
|
},
|
|
},
|
|
- setBigVipPic() {
|
|
|
|
- let url = new URL(
|
|
|
|
- '@/assets/image/icon/big-member/icon-shiyonghy.png',
|
|
|
|
- import.meta.url
|
|
|
|
- ).href
|
|
|
|
- const { bigmemberVip } = this.pageUserInfo
|
|
|
|
- if (bigmemberVip === 1 || bigmemberVip === 5 || bigmemberVip === 7) {
|
|
|
|
- url = new URL(
|
|
|
|
- '@/assets/image/icon/big-member/icon-gaojihy.png',
|
|
|
|
- import.meta.url
|
|
|
|
- ).href
|
|
|
|
- } else if (bigmemberVip === 2) {
|
|
|
|
- url = new URL(
|
|
|
|
- '@/assets/image/icon/big-member/icon-biaozhunhy.png',
|
|
|
|
- import.meta.url
|
|
|
|
- ).href
|
|
|
|
- } else if (bigmemberVip === 3 || bigmemberVip === 6) {
|
|
|
|
- url = new URL(
|
|
|
|
- '@/assets/image/icon/big-member/icon-putonghy.png',
|
|
|
|
- import.meta.url
|
|
|
|
- ).href
|
|
|
|
- } else if (bigmemberVip === 4) {
|
|
|
|
- url = new URL(
|
|
|
|
- '@/assets/image/icon/big-member/icon-shiyonghy.png',
|
|
|
|
- import.meta.url
|
|
|
|
- ).href
|
|
|
|
|
|
+ // setBigVipPic() {
|
|
|
|
+ // let url = new URL(
|
|
|
|
+ // '@/assets/image/icon/big-member/icon-shiyonghy.png',
|
|
|
|
+ // import.meta.url
|
|
|
|
+ // ).href
|
|
|
|
+ // const { bigmemberVip } = this.pageUserInfo
|
|
|
|
+ // if (bigmemberVip === 1 || bigmemberVip === 5 || bigmemberVip === 7) {
|
|
|
|
+ // url = new URL(
|
|
|
|
+ // '@/assets/image/icon/big-member/icon-gaojihy.png',
|
|
|
|
+ // import.meta.url
|
|
|
|
+ // ).href
|
|
|
|
+ // } else if (bigmemberVip === 2) {
|
|
|
|
+ // url = new URL(
|
|
|
|
+ // '@/assets/image/icon/big-member/icon-biaozhunhy.png',
|
|
|
|
+ // import.meta.url
|
|
|
|
+ // ).href
|
|
|
|
+ // } else if (bigmemberVip === 3 || bigmemberVip === 6) {
|
|
|
|
+ // url = new URL(
|
|
|
|
+ // '@/assets/image/icon/big-member/icon-putonghy.png',
|
|
|
|
+ // import.meta.url
|
|
|
|
+ // ).href
|
|
|
|
+ // } else if (bigmemberVip === 4) {
|
|
|
|
+ // url = new URL(
|
|
|
|
+ // '@/assets/image/icon/big-member/icon-shiyonghy.png',
|
|
|
|
+ // import.meta.url
|
|
|
|
+ // ).href
|
|
|
|
+ // }
|
|
|
|
+ // return url
|
|
|
|
+ // },
|
|
|
|
+ // 账户权益类型列表
|
|
|
|
+ accountList () {
|
|
|
|
+ return this.accountInfo.list || []
|
|
|
|
+ },
|
|
|
|
+ // 当前选中账户权益类型
|
|
|
|
+ activeAccountType() {
|
|
|
|
+ const obj = this.accountList.filter(item => {
|
|
|
|
+ return item.selected
|
|
|
|
+ })
|
|
|
|
+ return obj.length > 0 ? obj[0] : {}
|
|
|
|
+ },
|
|
|
|
+ mineClass () {
|
|
|
|
+ const type = this.accountList[0] ? this.accountList[0].name : '注册用户'
|
|
|
|
+ let cl = 'mine-header--blue'
|
|
|
|
+ if(type === '注册用户' || type === '省份订阅包') {
|
|
|
|
+ cl = 'mine-header--blue'
|
|
|
|
+ } else if(type === '超级订阅' ) {
|
|
|
|
+ cl = 'mine-header--gold'
|
|
|
|
+ } else {
|
|
|
|
+ cl = 'mine-header--black'
|
|
|
|
+ }
|
|
|
|
+ // 多个权益类型的时候默认黑棕
|
|
|
|
+ if(this.accountList.length > 1) {
|
|
|
|
+ cl = 'mine-header--black'
|
|
}
|
|
}
|
|
- return url
|
|
|
|
|
|
+ return cl
|
|
|
|
+ },
|
|
|
|
+ ...mapGetters('user', ['userCurrentIdentity', 'userIdentityList', 'isLogin'])
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ userCurrentIdentity: {
|
|
|
|
+ handler () {
|
|
|
|
+ localStorage.removeItem('mine_account_active_Type')
|
|
|
|
+ },
|
|
|
|
+ deep: true,
|
|
|
|
+ immediate: true,
|
|
},
|
|
},
|
|
- ...mapGetters('user', ['userCurrentIdentity', 'userIdentityList'])
|
|
|
|
|
|
+ isLogin () {
|
|
|
|
+ localStorage.removeItem('mine_account_active_Type')
|
|
|
|
+ }
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.init()
|
|
this.init()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
...mapActions('user', ['getUserIdentityList']),
|
|
...mapActions('user', ['getUserIdentityList']),
|
|
- async init() {
|
|
|
|
- await this.getUserInfo()
|
|
|
|
- // await this.getUserIdentityList()
|
|
|
|
|
|
+ init() {
|
|
|
|
+ this.getUserInfo()
|
|
|
|
+ this.getUserAccountInfo()
|
|
},
|
|
},
|
|
// 获取用户信息
|
|
// 获取用户信息
|
|
async getUserInfo() {
|
|
async getUserInfo() {
|
|
@@ -197,6 +226,36 @@ export default {
|
|
return {}
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ // 获取用户账号类型信息
|
|
|
|
+ async getUserAccountInfo () {
|
|
|
|
+ try {
|
|
|
|
+ const { error_code: code, data } = await getUserAccountInfo()
|
|
|
|
+ if (code === 0) {
|
|
|
|
+ if(Array.isArray(data.list) && data.list.length > 0) {
|
|
|
|
+ data.list.forEach((item, index) => {
|
|
|
|
+ if(item.name && item.name.includes('大会员')) {
|
|
|
|
+ data.hasBigmember = true
|
|
|
|
+ } else if(item.name === '超级订阅') {
|
|
|
|
+ data.hasVip = true
|
|
|
|
+ }
|
|
|
|
+ item.vipEntTime = item.endTime ? dateFormatter(item.endTime * 1000, 'yyyy-MM-dd') : ''
|
|
|
|
+ item.selected = false
|
|
|
|
+ if(index === 0) {
|
|
|
|
+ item.selected = true
|
|
|
|
+ }
|
|
|
|
+ if(!localStorage.getItem('mine_account_active_Type')) {
|
|
|
|
+ localStorage.setItem('mine_account_active_Type', item.name)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ this.accountInfo = data || {}
|
|
|
|
+ // 回显选中的账号权益类型
|
|
|
|
+ this.backActiveName()
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ return {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
checkUserHasBindPhone() {
|
|
checkUserHasBindPhone() {
|
|
const { phone } = this.pageUserInfo
|
|
const { phone } = this.pageUserInfo
|
|
if (!phone) {
|
|
if (!phone) {
|
|
@@ -221,65 +280,116 @@ export default {
|
|
bindPhone(query = {}) {
|
|
bindPhone(query = {}) {
|
|
openAppOrWxPage(LINKS.绑定手机号, { query })
|
|
openAppOrWxPage(LINKS.绑定手机号, { query })
|
|
},
|
|
},
|
|
- // 跳转到订单页
|
|
|
|
- jumpOrderPage(type) {
|
|
|
|
- openAppOrWxPage(LINKS.我的订单页面, {
|
|
|
|
- query: { active: type }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
changeIdentityHandle() {
|
|
changeIdentityHandle() {
|
|
this.$router.push('/mine/change/identity')
|
|
this.$router.push('/mine/change/identity')
|
|
},
|
|
},
|
|
// 身份信息维护
|
|
// 身份信息维护
|
|
jumpIdentityKeep() {
|
|
jumpIdentityKeep() {
|
|
this.$router.push('/identity/keep')
|
|
this.$router.push('/identity/keep')
|
|
|
|
+ },
|
|
|
|
+ // 账号权益类型切换
|
|
|
|
+ changeAccountType (temp) {
|
|
|
|
+ if(this.accountInfo.list) {
|
|
|
|
+ this.accountInfo.list.forEach(item => {
|
|
|
|
+ item.selected = false
|
|
|
|
+ })
|
|
|
|
+ temp.selected = true
|
|
|
|
+ }
|
|
|
|
+ localStorage.setItem('mine_account_active_Type', temp.name)
|
|
|
|
+ },
|
|
|
|
+ backActiveName () {
|
|
|
|
+ const active = localStorage.getItem('mine_account_active_Type')
|
|
|
|
+ if(active && this.accountInfo.list) {
|
|
|
|
+ this.accountInfo.list.forEach(item => {
|
|
|
|
+ item.selected = false
|
|
|
|
+ if(item.name === active) {
|
|
|
|
+ item.selected = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 超级订阅
|
|
|
|
+ toBuyVip(type) {
|
|
|
|
+ this.$router.push(`/common/order/create/svip?type=${type}`)
|
|
|
|
+ },
|
|
|
|
+ // 升级
|
|
|
|
+ updateVip (item) {
|
|
|
|
+ if(item.upgrade) {
|
|
|
|
+ this.toBuyVip('upgrade')
|
|
|
|
+ } else {
|
|
|
|
+ this.openCustomer()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 省份订阅包续费/升级
|
|
|
|
+ areaVip (type) {
|
|
|
|
+ this.$router.push(`/common/order/create/areapack?type=${type}`)
|
|
|
|
+ },
|
|
|
|
+ // 省份订阅包升级
|
|
|
|
+ areaVipUpdate (item) {
|
|
|
|
+ if(item.upgrade) {
|
|
|
|
+ this.areaVip('upgrade')
|
|
|
|
+ } else {
|
|
|
|
+ // 开通超级订阅
|
|
|
|
+ this.toBuyVip('buy')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 大会员or商机管理续费咨询
|
|
|
|
+ renewConsult () {
|
|
|
|
+ // 大会员续费咨询跳转落地页
|
|
|
|
+ if(this.activeAccountType.name && this.activeAccountType.name.includes('大会员')) {
|
|
|
|
+ const attr = this.activeAccountType.attr || {}
|
|
|
|
+ const link = {
|
|
|
|
+ app: attr.app,
|
|
|
|
+ h5: attr.h5,
|
|
|
|
+ wx: attr.h5
|
|
|
|
+ }
|
|
|
|
+ openAppOrWxPage(link)
|
|
|
|
+ } else {
|
|
|
|
+ // 商机管理的续费咨询,咨询客服
|
|
|
|
+ this.openCustomer()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 联系客服
|
|
|
|
+ openCustomer () {
|
|
|
|
+ if (this.$envs.inWX) {
|
|
|
|
+ window.location.href = '/big/wx/page/customer'
|
|
|
|
+ } else {
|
|
|
|
+ window.location.href = '/jyapp/free/customer'
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.tabbar-header-top-placeholder {
|
|
|
|
- background-color: $white;
|
|
|
|
-}
|
|
|
|
.mine-header {
|
|
.mine-header {
|
|
- background-color: $white;
|
|
|
|
|
|
+ position: relative;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- padding: 0 16px;
|
|
|
|
|
|
+ padding: 0 12px 79px;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
- &.app-header-padding-top {
|
|
|
|
- padding-top: ($app-header-padding-top - 8px);
|
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: center top;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ &--blue {
|
|
|
|
+ background-image: url(@/assets/image/mine/bg-blue.png);
|
|
}
|
|
}
|
|
- .set-icon {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- // width: 40px;
|
|
|
|
- // height:40px;
|
|
|
|
|
|
+ &--black {
|
|
|
|
+ background-image: url(@/assets/image/mine/bg-black.png);
|
|
}
|
|
}
|
|
- .app-header-set {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 44px;
|
|
|
|
- padding: 0;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: flex-end;
|
|
|
|
- min-width: 20px;
|
|
|
|
- background: #fff;
|
|
|
|
|
|
+ &--gold {
|
|
|
|
+ background-image: url(@/assets/image/mine/bg-gold.png);
|
|
}
|
|
}
|
|
- .van-sticky--fixed {
|
|
|
|
- .app-header-set {
|
|
|
|
- padding: 16px;
|
|
|
|
- }
|
|
|
|
|
|
+ .app-header-set {
|
|
|
|
+ padding: 4px 0 0;
|
|
|
|
+ align-self: flex-start;
|
|
}
|
|
}
|
|
.header-info {
|
|
.header-info {
|
|
display: flex;
|
|
display: flex;
|
|
flex: 1;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
- background: #fff;
|
|
|
|
- padding-bottom: 12px;
|
|
|
|
|
|
+ padding:8px 0;
|
|
.user-info-container {
|
|
.user-info-container {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -294,60 +404,39 @@ export default {
|
|
.user-name {
|
|
.user-name {
|
|
max-width: 164px;
|
|
max-width: 164px;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- font-size: 21px;
|
|
|
|
- line-height: 29px;
|
|
|
|
- color: #33373c;
|
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ color: #fff;
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
word-break: break-all;
|
|
word-break: break-all;
|
|
margin-right: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
- .user-phone {
|
|
|
|
- width: auto;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- margin-top: 2px;
|
|
|
|
- color: #686868;
|
|
|
|
- font-size: 13px;
|
|
|
|
- box-sizing: content-box;
|
|
|
|
- }
|
|
|
|
- .set-phone {
|
|
|
|
- display: inline-block;
|
|
|
|
- position: relative;
|
|
|
|
- border-radius: 13px;
|
|
|
|
- line-height: 24px;
|
|
|
|
- color: #64696f;
|
|
|
|
- padding: 0 10px;
|
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.07);
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 13px;
|
|
|
|
- }
|
|
|
|
- .wx-header-set {
|
|
|
|
- margin-left: 8px;
|
|
|
|
- padding: 10px;
|
|
|
|
- align-self: flex-start;
|
|
|
|
- }
|
|
|
|
.user-img {
|
|
.user-img {
|
|
- margin-right: 12px;
|
|
|
|
- width: 60px;
|
|
|
|
- height: 60px;
|
|
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ width: 48px;
|
|
|
|
+ height: 48px;
|
|
|
|
+ position: relative;
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
- overflow: hidden;
|
|
|
|
|
|
+ img{
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+ .j-icon {
|
|
|
|
+ position: absolute;
|
|
|
|
+ }
|
|
|
|
+ .vip-icon{
|
|
|
|
+ left:0;
|
|
|
|
+ background:rgba(255, 255, 255, 0.5) url(@/assets/image/icon/vip/vip-icon.png) no-repeat center;
|
|
|
|
+ background-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ .bigmember-icon {
|
|
|
|
+ right:0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
- .u_right {
|
|
|
|
- display: block;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- padding: 0 10px;
|
|
|
|
- height: 21px;
|
|
|
|
- line-height: 24px;
|
|
|
|
- text-align: center;
|
|
|
|
- background: linear-gradient(270deg, #f1d090 0%, #fae7ca 100%);
|
|
|
|
- color: #1b1a2a;
|
|
|
|
- font-size: 11px;
|
|
|
|
- border-radius: 12px;
|
|
|
|
- }
|
|
|
|
.j-icon {
|
|
.j-icon {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
width: 20px;
|
|
width: 20px;
|
|
@@ -360,8 +449,27 @@ export default {
|
|
background-size: contain;
|
|
background-size: contain;
|
|
margin-right: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
- .icon-super-sub {
|
|
|
|
- background-image: url(@/assets/image/icon/vip/icon-vip-gold-deep.png);
|
|
|
|
|
|
+ //.icon-super-sub {
|
|
|
|
+ // background-image: url(@/assets/image/icon/vip/icon-vip-gold-deep.png);
|
|
|
|
+ //}
|
|
|
|
+ .user-info-bottom{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .change-identity{
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ line-height: 14px;
|
|
|
|
+ color: #171826;
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ border: 1px solid #fff;
|
|
|
|
+ background: rgba(255, 255, 255, 0.65);
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ }
|
|
|
|
+ .identity-keep{
|
|
|
|
+ color: #fff;
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pt {
|
|
.pt {
|
|
@@ -371,75 +479,193 @@ export default {
|
|
padding-left: 12px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
- .change-identity {
|
|
|
|
- position: relative;
|
|
|
|
- height: 44px;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: center;
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
- background-position: center;
|
|
|
|
- background-size: 100%;
|
|
|
|
- border-radius: 6px;
|
|
|
|
- .change-right {
|
|
|
|
- min-width: 80px;
|
|
|
|
- text-align: right;
|
|
|
|
- .identity-keep-inset {
|
|
|
|
- color: #5f5e64;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 14px;
|
|
|
|
- }
|
|
|
|
|
|
+ .self-handle-btn{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ font-size:12px;
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ padding: 3px 12px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ border: 1px solid #fff;
|
|
|
|
+ background: rgba(255, 255, 255, .65);
|
|
|
|
+ color: #171826;
|
|
|
|
+ }
|
|
|
|
+ .j-icon {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.65);
|
|
|
|
+ }
|
|
|
|
+ .vip-icon{
|
|
|
|
+ background:rgba(255, 255, 255, 0.65) url(@/assets/image/icon/vip/vip-icon.png) no-repeat center;
|
|
|
|
+ background-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ .bigmember-icon {
|
|
|
|
+ background:rgba(255, 255, 255, 0.5) url(@/assets/image/icon/big-member/icon-gaojihy.png) no-repeat center;
|
|
|
|
+ background-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ .bg-line-gold{
|
|
|
|
+ background: linear-gradient(90deg,#FFECCE 0%, #FCD7B2 100%);
|
|
|
|
+ .self-handle-btn{
|
|
|
|
+ border: 1px solid rgba(255,255,255,.5);
|
|
|
|
+ box-shadow: 0px 4px 12px 0px rgba(186, 105, 31, 0.32);
|
|
}
|
|
}
|
|
- .identity-name {
|
|
|
|
- font-size: 15px;
|
|
|
|
- line-height: 22px;
|
|
|
|
- color: #171826;
|
|
|
|
|
|
+ }
|
|
|
|
+ .bg-line-blue{
|
|
|
|
+ background: linear-gradient(90deg, #DDFFF5 0%, #7CE8F6 100%);
|
|
|
|
+ .self-handle-btn{
|
|
|
|
+ border: 1px solid #fff;
|
|
|
|
+ box-shadow: 0 4px 12px 0 rgba(31, 186, 177, 0.32);
|
|
}
|
|
}
|
|
- .text {
|
|
|
|
- font-size: 14px;
|
|
|
|
- line-height: 20px;
|
|
|
|
- color: #5f5e64;
|
|
|
|
|
|
+ }
|
|
|
|
+ .limit-time-icon {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 12px;
|
|
|
|
+ height: 12px;
|
|
|
|
+ background: url(@/assets/image/icon/limit-time.png) no-repeat center;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ vertical-align: text-bottom;
|
|
|
|
+ }
|
|
|
|
+ .account-info{
|
|
|
|
+ font-size:12px;
|
|
|
|
+ color: #171826;
|
|
|
|
+ margin-top: 8px;
|
|
|
|
+ span {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+ .account-info-label {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ }
|
|
|
|
+ .account-info-name{
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ .type-name {
|
|
|
|
+ padding: 2px 12px;
|
|
|
|
+ border-radius: 11px;
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ }
|
|
|
|
+ .tip {
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-left:4px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ .account-handle{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin-top: 8px;
|
|
|
|
+ .gap{
|
|
|
|
+ width:8px;
|
|
|
|
+ }
|
|
|
|
+ &-item{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex: 1;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 8px 0;
|
|
|
|
+ border-radius: 12px 12px 0 0;
|
|
|
|
+ color: #171826;
|
|
|
|
+ box-shadow: 0px -2px 8px 0px rgba(169, 117, 39, 0.15);
|
|
|
|
+ p{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ line-height:18px;
|
|
|
|
+ }
|
|
|
|
+ p:nth-of-type(1) {
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &--free {
|
|
|
|
+ padding: 8px 12px 14px;
|
|
|
|
+ border-radius: 12px 12px 0 0;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ position: relative;
|
|
|
|
+ p:nth-of-type(1) {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
+ .text {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ margin-left: 2px;
|
|
|
|
+ }
|
|
|
|
+ .activity-tip{
|
|
|
|
+ padding: 2px 5px;
|
|
|
|
+ border-radius: 9px 0 9px 0;
|
|
|
|
+ background: linear-gradient(90deg, #FF7C32 0%, #F33838 100%);
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ line-height: 14px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .self-handle-btn{
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 10px;
|
|
|
|
+ right: 12px;
|
|
|
|
+ font-size:12px;
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ padding: 5px 12px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, .5);
|
|
|
|
+ background: rgba(255, 255, 255, .65);
|
|
|
|
+ box-shadow: 0 4px 12px 0 rgba(186, 105, 31, 0.32);
|
|
|
|
+ color: #33323A;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
- &.id-bg-one {
|
|
|
|
- background-image: url('@/assets/image/mine/idBg@2x.png');
|
|
|
|
- box-shadow: 0 0 0 0.5px #86e1ed !important;
|
|
|
|
|
|
+ &--big-ent {
|
|
|
|
+ color: #171826;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 9px 16px 9px 12px;
|
|
|
|
+ border-radius: 12px 12px 0px 0px;
|
|
|
|
+ box-shadow: 0 -2px 8px 0 rgba(169, 117, 39, 0.15);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- &.id-bg-two {
|
|
|
|
- background-image: url('@/assets/image/mine/IdBg@2x-2.png');
|
|
|
|
- box-shadow: 0 0 0 0.5px #f1d090 !important;
|
|
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .icon-youbian {
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.mine-header--blue {
|
|
|
|
+ .account-info {
|
|
|
|
+ .type-name {
|
|
|
|
+ background: #B9F1F8;
|
|
}
|
|
}
|
|
- .identity-keep {
|
|
|
|
- position: absolute;
|
|
|
|
- border-radius: 4px 4px 0 0;
|
|
|
|
- background: #2abed1;
|
|
|
|
- padding: 5px 8px;
|
|
|
|
- color: #fff;
|
|
|
|
- font-size: 10px;
|
|
|
|
- line-height: 14px;
|
|
|
|
- right: 0;
|
|
|
|
- top: -25px;
|
|
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.mine-header--gold {
|
|
|
|
+ .account-info {
|
|
|
|
+ .type-name {
|
|
|
|
+ background: #FAE7CA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .order-tabs {
|
|
|
|
- margin-top: 12px;
|
|
|
|
- margin-bottom: 4px;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-around;
|
|
|
|
- .order-tab-item {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- flex: 1;
|
|
|
|
- height: 80px;
|
|
|
|
|
|
+}
|
|
|
|
+.mine-header--black {
|
|
|
|
+ .account-info {
|
|
|
|
+ .type-name {
|
|
|
|
+ background: linear-gradient(90deg, #171826 0%, #444444 100%);
|
|
|
|
+ color: #FAE7CA;
|
|
}
|
|
}
|
|
- .tab-item-text {
|
|
|
|
- margin-top: 8px;
|
|
|
|
- font-size: 13px;
|
|
|
|
- line-height: 18px;
|
|
|
|
- color: #33373c;
|
|
|
|
|
|
+ .active-type {
|
|
|
|
+ .type-name{
|
|
|
|
+ background: #FAE7CA;
|
|
|
|
+ color: #1B1A2A;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+::v-deep {
|
|
|
|
+ .order-tabs {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width:100%;
|
|
|
|
+ left:0;
|
|
|
|
+ bottom:-1px;
|
|
|
|
+ border-top-right-radius: 16px;
|
|
|
|
+ box-shadow: 0 -8px 12px 0 rgba(92, 31, 5, 0.15);
|
|
|
|
+ background: linear-gradient(180deg, #fff 0%, #F5F6F7 100%);
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|