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="info">
					<view class="name">
						{{userInfo.nickName}}
					</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="supplier" v-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" />

		<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
	} from 'vuex'

	export default {
		name: "center2",
		components: {
			customerServicePopup,
			tabber,
			topbar,
			centerList
		},
		computed: {
			...mapGetters(['userShop', "userInfo"]),
		},
		data() {
			return {
				// 供应商
				supplierList: [{
						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'
					},
				]
			}
		},
		methods: {
			openCustomerServicePopup() {
				console.log("打开客服弹框")
				this.$refs.customerServicePopup.open();
			}

		},
	}
</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;
				}

				.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: 32rpx;
					}

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