aluminium-trading-uniapp-240925/pages/index/center2.vue

<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>