铝交易,微信公众号
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

330 lines
7.3 KiB

<template>
<view class="page">
<navbar :title="$t('pageTitle.personalCenter')" />
<view class="frame">
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image src="1" mode=""></image>
</view>
<view class="change"
v-if="!userInfo.id"
@click="$utils.toLogin">
登录
</view>
<view class="info"
v-else
@click="toUpdateInfo">
<view class="name"
v-if="userShop">
供应商:{{shopData.companyName}}
<uv-icon
name="edit-pen"
color="#fff"
size="30"></uv-icon>
</view>
<view class="name"
v-else>
采购商:{{buy.companyName}}
<uv-icon
name="edit-pen"
color="#fff"
size="30"></uv-icon>
</view>
<view class="tips">
{{ $t('components.phoneNumber') }}: {{userInfo.phone}}
</view>
</view>
<!-- <view class="headBtn" @click="headBtn">
{{ $t('components.roleSwitching') }}
</view> -->
<!-- <view class="setting">
<uv-icon name="setting" size="40rpx"></uv-icon>
</view> -->
</view>
<view class=""
style="color: #aaa;
text-align: center;line-height: 100rpx;"
v-if="!userInfo.id">
请先完成登录,解锁更多功能
</view>
<!-- 供应商 -->
<view class="supplier" v-else-if="userShop">
<centerList :list="supplierList" @open="openCustomerServicePopup" @about="$refs.popup.open('gywm')">
</centerList>
</view>
<!-- 采购商 -->
<view class="purchaser" v-else>
<centerList :list="purchaserList" @open="openCustomerServicePopup" @about="$refs.popup.open('gywm')">
</centerList>
</view>
</view>
<!-- 联系客服弹框 -->
<customerServicePopup ref="customerServicePopup" />
<uv-action-sheet
ref="actionSheet"
:actions="actionSheetList"
@select="actionSheetSelect">
</uv-action-sheet>
<configPopup ref="popup"></configPopup>
<tabber select="3" />
</view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
import centerList from "@/components/base/centerList.vue";
import customerServicePopup from "@/components/config/customerServicePopup.vue";
import {
mapGetters,
mapState
} from 'vuex'
export default {
name: "center2",
components: {
customerServicePopup,
tabber,
topbar,
centerList
},
computed: {
...mapGetters(['userShop']),
...mapState(["userInfo", 'shopData', 'buy']),
},
data() {
return {
// 供应商
supplierList: [
{
text: `${this.$t('other.Myorder')}`,
englishText: 'Myorder',
value: ">",
imgUrl: '/static/image/center/14.svg',
toPathUrl: '/pages_order/order/myOrders'
},
{
text: `${this.$t('pageTitle.myOrders')}`,
englishText: 'myOrders',
value: ">",
imgUrl: '/static/image/center/14.svg',
toPathUrl: '/pages_order/order/pendingOrder'
},
{
text: `${this.$t('components.contactCustomerService')}`,
englishText: 'contactCustomerService',
value: ">",
imgUrl: '/static/image/center/13.svg'
},
{
text: `${this.$t('components.systemSettings')}`,
englishText: 'systemSettings',
value: ">",
imgUrl: '/static/image/center/12.svg',
toPathUrl: '/pages_order/center/systemSet'
},
{
text: `${this.$t('components.helpFeedback')}`,
englishText: 'systemSettings',
value: ">",
imgUrl: '/static/image/center/12.svg',
toPathUrl: '/pages_order/center/helpFeedback'
},
{
text: `${this.$t('components.aboutUs')}`,
englishText: 'aboutUs',
value: ">",
imgUrl: '/static/image/center/13.svg'
},
],
// 采购商
purchaserList: [
// this.$t('pages.index.index.companyProfile')
{
text: `${this.$t('other.Myorder')}`,
englishText: 'Myorder',
value: ">",
imgUrl: '/static/image/center/14.svg',
toPathUrl: '/pages_order/order/myOrders'
},
{
text: `${this.$t('components.contactCustomerService')}`,
englishText: 'contactCustomerService',
value: ">",
imgUrl: '/static/image/center/13.svg'
},
{
text: `${this.$t('components.systemSettings')}`,
englishText: 'systemSettings',
value: ">",
imgUrl: '/static/image/center/12.svg',
toPathUrl: '/pages_order/center/systemSet'
},
{
text: `${this.$t('components.helpFeedback')}`,
englishText: 'systemSettings',
value: ">",
imgUrl: '/static/image/center/12.svg',
toPathUrl: '/pages_order/center/helpFeedback'
},
{
text: `${this.$t('components.aboutUs')}`,
englishText: 'aboutUs',
value: ">",
imgUrl: '/static/image/center/13.svg'
},
],
actionSheetList: [
{
name : '修改供应商信息',
key : 'shopData',
},
{
name : '修改采购商信息',
key : 'buy',
},
],
}
},
onShow() {
if(uni.getStorageSync('token')){
this.$store.commit('getUserInfo')
}
},
methods: {
openCustomerServicePopup() {
console.log("打开客服弹框")
this.$refs.customerServicePopup.open();
},
toUpdateInfo(){
if(this.buy && this.shopData){
this.$refs.actionSheet.open()
}else if(this.buy){
uni.navigateTo({
url: '/pages_order/auth/registerShop?key=buy'
})
}else if(this.shopData){
uni.navigateTo({
url: '/pages_order/auth/registerShop?key=shopData'
})
}
},
actionSheetSelect(e){
uni.navigateTo({
url: '/pages_order/auth/registerShop?key=' + e.key
})
},
},
}
</script>
<style scoped lang="scss">
.page {
background-color: #2e2e2e;
height: calc(100vh - 120rpx);
.frame {
background-color: #2e2e2e;
.head {
display: flex;
background-color: $uni-color;
padding: 40rpx 20rpx;
align-items: center;
position: relative;
color: #fff;
box-shadow: 0 10rpx 20rpx rgba(89, 80, 80, 0.1);
.headImage {
width: 120rpx;
height: 120rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.change {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 70rpx;
border-radius: 40rpx;
color: white;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: $uni-color;
border: 1px solid #757986;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.info {
font-size: 28rpx;
.vip {
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
.name {
font-size: 26rpx;
display: flex;
align-items: center;
}
.tips {
font-size: 26rpx;
color: #ABABAB;
}
}
.headBtn {
margin-left: auto;
padding: 15rpx 20rpx;
background-color: $uni-color;
color: #fff;
border-radius: 20rpx;
margin-top: 50rpx;
}
.setting {
position: absolute;
right: 50rpx;
top: 50rpx;
}
}
.supplier {}
.purchaser {}
}
}
</style>