<template>
|
<div id="c2c_user" class="absolute left-0 top-0 bottom-160 w-full c2c_user">
|
<div class="w-full h-full top">
|
<order-nav style="background: var(--theme-color)"/>
|
<div class="flex pl-32 pr-32 mt-20 overflow-auto">
|
<div
|
class="avatar w-70 h-70 flex items-center font-700 font-34 justify-center"
|
@click="handleGoUserHome"
|
>
|
<img class="w-full h-full rounded-full" :src="ctc_user.headImg" alt="">
|
</div>
|
<div class="ml-25 text-white">
|
<div class="font-34">{{ ctc_user.nickName }}</div>
|
<div class="mt-17 font-24">{{ctc_user.c2cUserType ? $t('认证用户') : $t('未认证用户')}}</div>
|
<div class="flex items-center mt-28 font-26">
|
<div class="flex items-center h-30 mr-48">
|
<span class="mr-12">{{$t('邮箱')}}</span>
|
<img class="w-20 h-20 relative top-4" v-if="party.email_authority" src="~@/assets/image/c2c/gou.png" alt="">
|
<img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
|
</div>
|
<div class="flex items-center h-30 mr-48">
|
<span class="mr-12">{{$t('手机')}}</span>
|
<img class="w-20 h-20 relative top-4" v-if="party.phone_authority" src="~@/assets/image/c2c/gou.png" alt="">
|
<img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
|
</div>
|
<div class="flex items-center h-30 mr-48">
|
<span class="mr-12">{{$t('身份')}}</span>
|
<img class="w-20 h-20 relative top-4" v-if="party.kyc_authority" src="~@/assets/image/c2c/gou.png" alt="">
|
<img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
|
</div>
|
<div class="flex items-center h-30 mr-48">
|
<span class="mr-12">{{$t('高级认证')}}</span>
|
<img class="w-20 h-20 relative top-4" v-if="party.kyc_highlevel_authority" src="~@/assets/image/c2c/gou.png" alt="">
|
<img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
ref="content"
|
class="content absolute left-0 bottom-0 w-full bg-white pt-40 box-border overflow-auto"
|
>
|
<div class="pr-50 pl-50">
|
<div class="flex" style="color: #868D9A">
|
<div class="flex-1">
|
<h2 class="mb-18 font-700 font-40 text-black">{{ctc_user.thirtyDaysOrder}}</h2>
|
<div class="font-28">{{$t('30日成单数')}}</div>
|
</div>
|
<div class="flex-1">
|
<h2 class="mb-18 font-700 font-40 text-black">{{ctc_user.thirtyDaysOrderRatio}}%</h2>
|
<div class="font-28">{{$t('30日成单率')}}</div>
|
</div>
|
</div>
|
<div class="w-full mt-54">
|
<van-cell-group class="w-full font-24 box-border">
|
<van-cell class="mb-28" title="平均放行" :value="ctc_user.thirtyDaysPassAverageTime"/>
|
<van-cell title="平均付款" :value="ctc_user.thirtyDaysPayAverageTime"/>
|
</van-cell-group>
|
</div>
|
</div>
|
|
<div class="flex items-center justify-center mt-30 more pb-32 mb-48" @click="enterMore">
|
<span class="font-25 mr-12">{{$t('更多数据')}}</span>
|
<span><van-icon name="arrow" color="#868D9A"/></span>
|
</div>
|
|
<div class="font-28">
|
<van-cell-group class="w-full font-24 box-border pr-50 pl-50">
|
<user-cell
|
:left-img="require('@/assets/image/c2c/group287.png')"
|
title="收款方式"
|
:value="payMethodNum || '--'"
|
@cell-click="$router.push({
|
path: '/paymentMethod',
|
query: {
|
ctc_user: JSON.stringify(ctc_user)
|
}
|
})"
|
/>
|
<user-cell
|
class="mt-100"
|
:left-img="require('@/assets/image/c2c/Subtract.png')"
|
title="C2C帮助中心"
|
@cell-click="$router.push({
|
path: '/c2cHelpCenter'
|
})"
|
/>
|
<user-cell
|
class="mt-100"
|
:left-img="require('@/assets/image/c2c/group288.png')"
|
title="C2C通知设置"
|
@cell-click="enterSettings"
|
/>
|
<!--是接单模式的情况下-->
|
<template v-if="orderMode">
|
<user-cell
|
class="mt-100"
|
:left-img="require('@/assets/image/c2c/Subtract-2.png')"
|
title="成为认证广告方"
|
@cell-click="$router.push({
|
path: '/CertifiedAdvertiser'
|
})"
|
/>
|
<user-cell
|
class="mt-100"
|
:left-img="require('@/assets/image/c2c/Subtract-3.png')"
|
title="添加C2C到桌面"
|
/>
|
</template>
|
</van-cell-group>
|
</div>
|
<div class="mt-40 px-34 mb-74" v-if="orderMode">
|
<van-button class="w-full rounded-lg" @click="switchPlaceAnOrder" type="info" color="#1D91FF">切换到“下单模式”</van-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from "vuex";
|
import {SET_ORDER_MODE} from "@/store/const.store";
|
import {Cell, CellGroup, Icon,Button} from 'vant';
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import UserCell from "@/page/c2cUser/components/UserCell";
|
import otcApi from "@/API/otc.js";
|
|
export default {
|
name: "c2cUser",
|
data() {
|
return {
|
email: "cn*****.com",
|
ctc_user:{},
|
party:{},
|
payMethodNum: '',
|
}
|
},
|
created() {
|
this.ctcUserGetUserCenter()
|
},
|
methods: {
|
ctcUserGetUserCenter(){ // 获取页面信息
|
otcApi.ctcUserGetUserCenter({ language: this.$i18n.locale }).then(res=>{
|
const {c2c_user, party } = res.data || {}
|
this.ctc_user = c2c_user // 用户信息
|
this.party = party // 验证信息
|
otcApi.ctcPaymentMethodType({ party_id: this.ctc_user.c2cUserPartyId, language: this.$i18n.locale }).then(res => {
|
console.log(res)
|
this.payMethodNum = Object.keys(res.data).length
|
})
|
})
|
},
|
enterMore() {
|
let ctc_user = JSON.stringify(this.ctc_user)
|
this.$router.push({ path: '/c2cUser/c2cUserMore', query: { ctc_user }})
|
},
|
// 进入通知设置
|
enterSettings() {
|
let ctc_user = JSON.stringify(this.ctc_user)
|
this.$router.push({ path: '/c2cNoticeSettings', query: { ctc_user } })
|
},
|
switchPlaceAnOrder() {
|
this.$router.replace({
|
path:'/wantBuy'
|
})
|
|
this.$store.commit(`c2c/${SET_ORDER_MODE}`, {
|
state: false,
|
})
|
},
|
handleGoUserHome() {
|
console.log(this.ctc_user.id)
|
this.$router.push({
|
path: '/advertiserDetail',
|
query: {
|
uid: this.ctc_user.id
|
}
|
})
|
},
|
},
|
computed: {
|
...mapState('c2c', ['orderMode'])
|
},
|
components: {
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Icon.name]: Icon,
|
[Button.name]:Button,
|
OrderNav,
|
UserCell,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.c2c_user{
|
width: 100%;
|
box-sizing: border-box;
|
::v-deep .van-nav-bar {
|
background: #1D91FF;
|
::after {
|
content: none;
|
}
|
.van-icon {
|
color: #fff;
|
}
|
}
|
}
|
.top {
|
height: 370px;
|
background: #1D91FF;
|
|
|
.avatar {
|
border-radius: 50%;
|
background: #21262F;
|
color: #fff;
|
}
|
}
|
|
.content {
|
top: 300px;
|
border-radius: 70px 70px 0 0;
|
|
.more {
|
position: relative;
|
border-bottom: 1px solid #484756;
|
color: #868D9A;
|
|
.van-icon {
|
font-size: 20px;
|
font-weight: 600;
|
}
|
}
|
}
|
</style>
|
