From d066c9e41a2c97aaab213bd308cb275bfa65ae2e Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Thu, 15 May 2025 00:59:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(center.vue):=20=E6=B7=BB=E5=8A=A0=E8=81=94?=
 =?UTF-8?q?=E7=B3=BB=E5=AE=A2=E6=9C=8D=E5=92=8C=E9=9A=90=E7=A7=81=E6=94=BF?=
 =?UTF-8?q?=E7=AD=96=E5=8A=9F=E8=83=BD=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在个人中心页面新增了“联系客服”和“隐私政策”功能按钮，并调整了相关样式，提升用户体验。
---
 common.scss            |   1 +
 pages/index/center.vue | 792 ++++++++++++++++++++++++++-----------------------
 2 files changed, 415 insertions(+), 378 deletions(-)

diff --git a/common.scss b/common.scss
index afe1319..463cc5f 100644
--- a/common.scss
+++ b/common.scss
@@ -29,6 +29,7 @@
 	justify-content: center !important;
 	align-items: center !important;
 	font-size: 26rpx;
+	line-height: unset;
 }
 .share::after{
 	border: none;
diff --git a/pages/index/center.vue b/pages/index/center.vue
index d533c88..cb0ba85 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -1,76 +1,92 @@
 <template>
-    <view class="page">
-
-        <navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" />
-
-        <view class="head">
-            <view class="headImage" @click="goToEditUserInfo">
-                <image :src="userInfo.headImage || '../../static/image/default-avatar.png'" mode=""></image>
-            </view>
-            <view class="info">
-                <view class="name" @click="goToEditUserInfo">
-                    {{ userInfo.nickName || '未登录' }}
-                </view>
-                <view class="tags">
-                    <view class="tag" v-if="userInfo.intentionCode">
-                        <text class="tag-label">ID:</text>
-                        <text>{{ userInfo.intentionCode }}</text>
-                    </view>
-                    <view v-if="role"
-                        style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;">
-                        <image src="@/pages_order/static/center/agent-icon.png"></image>
-                    </view>
-                    <view v-else-if="userInfo.id" class="tag">
-                        普通会员
-                    </view>
-                    <view v-else class="tag" @click="goToLogin">
-                        点击登录
-                    </view>
-                </view>
-            </view>
-            <view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')">
-                <uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon>
-            </view>
-        </view>
-
-        <view class="tools-box">
-            <image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image>
-            <view class="flex activate">
-                <template v-if="role">
-                    <view class="activate-tips" style="padding-left: 27rpx;">
-                        <view>代理商权益</view>
-                        <view>
-                            将于<text class="activate-highlight">{{ userInfo.endTime ?
+	<view class="page">
+
+		<navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" />
+
+		<view class="head">
+			<view class="headImage" @click="goToEditUserInfo">
+				<image :src="userInfo.headImage || '../../static/image/default-avatar.png'" mode=""></image>
+			</view>
+			<view class="info">
+				<view class="name" @click="goToEditUserInfo">
+					{{ userInfo.nickName || '未登录' }}
+				</view>
+				<view class="tags">
+					<view class="tag" v-if="userInfo.intentionCode">
+						<text class="tag-label">ID:</text>
+						<text>{{ userInfo.intentionCode }}</text>
+					</view>
+					<view v-if="role"
+						style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;">
+						<image src="@/pages_order/static/center/agent-icon.png"></image>
+					</view>
+					<view v-else-if="userInfo.id" class="tag">
+						普通会员
+					</view>
+					<view v-else class="tag" @click="goToLogin">
+						点击登录
+					</view>
+				</view>
+			</view>
+			<view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')">
+				<uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon>
+			</view>
+		</view>
+
+		<view class="tools-box">
+			<image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image>
+			<view class="flex activate">
+				<template v-if="role">
+					<view class="activate-tips" style="padding-left: 27rpx;">
+						<view>代理商权益</view>
+						<view>
+							将于<text class="activate-highlight">{{ userInfo.endTime ?
                                 $dayjs(userInfo.endTime).format('YYYY年M月D日') : '-'}}</text>到期
-                        </view>
-                    </view>
-                    <view class="btn-activate" @click="onActivate">
-                        <image src="@/pages_order/static/center/btn-activate-again.png"></image>
-                    </view>
-                </template>
-                <template v-else>
-                    <view class="activate-tips">
-                        升级成为代理商享受更多权益
-                    </view>
-                    <view class="btn-activate" @click="onActivate">
-                        <image src="@/pages_order/static/center/btn-activate.png"></image>
-                    </view>
-                </template>
-            </view>
-            <view class="tools flex">
-                <view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')">
-                    <view class="tool-icon">
-                        <image src="@/pages_order/static/center/tool-share.png"></image>
-                    </view>
-                    <text>分享好友</text>
-                </view>
-                <view class="tool" @click="onActivate">
-                    <view class="tool-icon">
-                        <image src="@/pages_order/static/center/tool-activate.png"></image>
-                    </view>
-                    <text>激活码</text>
-                </view>
-                <!-- <view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')">
+						</view>
+					</view>
+					<view class="btn-activate" @click="onActivate">
+						<image src="@/pages_order/static/center/btn-activate-again.png"></image>
+					</view>
+				</template>
+				<template v-else>
+					<view class="activate-tips">
+						升级成为代理商享受更多权益
+					</view>
+					<view class="btn-activate" @click="onActivate">
+						<image src="@/pages_order/static/center/btn-activate.png"></image>
+					</view>
+				</template>
+			</view>
+			<view class="tools flex">
+				<view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')">
+					<view class="tool-icon">
+						<image src="@/pages_order/static/center/tool-share.png"></image>
+					</view>
+					<text>分享好友</text>
+				</view>
+				<view class="tool" @click="onActivate">
+					<view class="tool-icon">
+						<image src="@/pages_order/static/center/tool-activate.png"></image>
+					</view>
+					<text>激活码</text>
+				</view>
+
+				<button open-type="contact" class="share">
+					<view class="tool">
+						<view class="tool-icon tool-icon-bg">
+							<uv-icon name="server-fill" color="#05d9a2" size="60rpx" />
+						</view>
+						<text>联系客服</text>
+					</view>
+				</button>
+				<view class="tool" @click="$refs.configPopup.open('user_ys')">
+					<view class="tool-icon tool-icon-bg">
+						<uv-icon name="question-circle" color="#05d9a2" size="60rpx" />
+					</view>
+					<text>隐私政策</text>
+				</view>
+
+				<!-- <view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')">
                     <view class="tool-icon">
                         <image src="@/pages_order/static/center/tool-wallet.png"></image>
                     </view>
@@ -82,324 +98,344 @@
                     </view>
                     <text>我的团队</text>
                 </view> -->
-            </view>
-        </view>
-
-        <view class="content">
-            <view class="card notice" v-if="notice">
-                <view class="notice-icon">
-                    <image src="@/pages_order/static/center/notice.png"></image>
-                </view>
-                <uv-notice-bar :text="notice" bgColor="transparent" color="#001B3C" :icon="false" fontSize="28rpx"
-                    :customStyle="{
+			</view>
+		</view>
+
+		<view class="content">
+			<view class="card notice" v-if="notice">
+				<view class="notice-icon">
+					<image src="@/pages_order/static/center/notice.png"></image>
+				</view>
+				<uv-notice-bar :text="notice" bgColor="transparent" color="#001B3C" :icon="false" fontSize="28rpx"
+					:customStyle="{
                         padding: '6rpx 0',
                     }"></uv-notice-bar>
-            </view>
-
-            <view class="card updates">
-                <view class="updates-header">
-                    <view class="updates-header-bg">
-                        <image src="@/static/image/center/title-bg.png"></image>
-                    </view>
-                    <view class="updates-header-content">
-                        动态更新
-                    </view>
-                </view>
-                <view class="updates-content">
-                    <view class="card updates-item" v-for="item in list" :key="item.id"
-                        @click="goToNewsDetail(item.id)">
-                        <view class="updates-item-img">
-                            <image :src="item.image"></image>
-                        </view>
-                        <view class="updates-item-info">
-                            <view class="updates-item-title">{{ item.title || '' }}</view>
-                            <view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view>
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-
-        <view class="service" @click="$utils.navigateTo('/pages_order/mine/service')">
-            <image src="@/pages_order/static/center/service.png" mode=""></image>
-        </view>
-
-        <popupActivate ref="popupActivate"></popupActivate>
-        <popupSharing ref="popupSharing"></popupSharing>
-
-        <tabber select="center" />
-    </view>
+			</view>
+
+			<view class="card updates">
+				<view class="updates-header">
+					<view class="updates-header-bg">
+						<image src="@/static/image/center/title-bg.png"></image>
+					</view>
+					<view class="updates-header-content">
+						动态更新
+					</view>
+				</view>
+				<view class="updates-content">
+					<view class="card updates-item" v-for="item in list" :key="item.id"
+						@click="goToNewsDetail(item.id)">
+						<view class="updates-item-img">
+							<image :src="item.image"></image>
+						</view>
+						<view class="updates-item-info">
+							<view class="updates-item-title">{{ item.title || '' }}</view>
+							<view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="service" @click="$utils.navigateTo('/pages_order/mine/service')">
+			<image src="@/pages_order/static/center/service.png" mode=""></image>
+		</view>
+
+		<popupActivate ref="popupActivate"></popupActivate>
+		<popupSharing ref="popupSharing"></popupSharing>
+
+		<configPopup ref="configPopup" />
+
+		<tabber select="center" />
+	</view>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import mixinsList from '@/mixins/list.js'
-
-import popupActivate from '@/components/center/popupActivate.vue'
-import tabber from '@/components/base/tabbar.vue'
-
-export default {
-    mixins: [mixinsList],
-    components: {
-        tabber,
-        popupActivate,
-    },
-    data() {
-        return {
-            notice: '',
-            mixinsListApi: 'getNews',
-            authApi : false,
-            isLoggedIn : uni.getStorageSync('token'),
-        }
-    },
-    computed: {
-        ...mapState(['userInfo', 'userInfoVip']),
-        role() {
-            return this.userInfo.isPay
-        },
-    },
-    onShow() {
+	import {
+		mapState
+	} from 'vuex'
+	import mixinsList from '@/mixins/list.js'
+
+	import popupActivate from '@/components/center/popupActivate.vue'
+	import tabber from '@/components/base/tabbar.vue'
+
+	export default {
+		mixins: [mixinsList],
+		components: {
+			tabber,
+			popupActivate,
+		},
+		data() {
+			return {
+				notice: '',
+				mixinsListApi: 'getNews',
+				authApi: false,
+				isLoggedIn: uni.getStorageSync('token'),
+			}
+		},
+		computed: {
+			...mapState(['userInfo', 'userInfoVip']),
+			role() {
+				return this.userInfo.isPay
+			},
+		},
+		onShow() {
 			this.fetchNotice()
-			
+
 			this.isLoggedIn = uni.getStorageSync('token')
-			if(this.isLoggedIn){
+			if (this.isLoggedIn) {
 				this.$store.commit('getUserInfo')
 				this.$store.commit('getUserInfoVip')
 			}
-    },
-    methods: {
-        async fetchNotice() {
-            try {
-                // todo: check
-                this.notice = (await this.$fetch('getNotice'))?.[0]?.title
-            } catch (err) {
-
-            }
-        },
-        onActivate() {
-            if (!this.isLoggedIn) {
-                this.goToLogin()
-                return
-            }
-            this.$refs.popupActivate.open(this.role)
-        },
-        getDesc(str) {
-            if (!str) {
-                return ''
-            }
-
-            return str.replace(/<.*?>/g, '')
-        },
-        goToNewsDetail(id) {
-            uni.navigateTo({
-                url: `/pages_order/mine/news?id=${id}`
-            })
-        },
-        goToEditUserInfo() {
-            if (!this.isLoggedIn) {
-                this.goToLogin()
-                return
-            }
-            uni.navigateTo({
-                url: '/pages_order/auth/wxUserInfo?mode=edit'
-            })
-        },
-        goToLogin() {
-            uni.navigateTo({
-                url: '/pages_order/auth/wxLogin'
-            })
-        },
-    }
-}
+		},
+		methods: {
+			async fetchNotice() {
+				try {
+					// todo: check
+					this.notice = (await this.$fetch('getNotice'))?.[0]?.title
+				} catch (err) {
+
+				}
+			},
+			onActivate() {
+				if (!this.isLoggedIn) {
+					this.goToLogin()
+					return
+				}
+				this.$refs.popupActivate.open(this.role)
+			},
+			getDesc(str) {
+				if (!str) {
+					return ''
+				}
+
+				return str.replace(/<.*?>/g, '')
+			},
+			goToNewsDetail(id) {
+				uni.navigateTo({
+					url: `/pages_order/mine/news?id=${id}`
+				})
+			},
+			goToEditUserInfo() {
+				if (!this.isLoggedIn) {
+					this.goToLogin()
+					return
+				}
+				uni.navigateTo({
+					url: '/pages_order/auth/wxUserInfo?mode=edit'
+				})
+			},
+			goToLogin() {
+				uni.navigateTo({
+					url: '/pages_order/auth/wxLogin'
+				})
+			},
+		}
+	}
 </script>
 
 <style scoped lang="scss">
-.page {
-
-    background-color: #001B3C;
-    min-height: 100vh;
-}
-
-image {
-    width: 100%;
-    height: 100%;
-}
-
-.head {
-    display: flex;
-    padding: 20rpx 26rpx 18rpx 40rpx;
-    align-items: center;
-    position: relative;
-
-    .headImage {
-        width: 143rpx;
-        height: 143rpx;
-        overflow: hidden;
-        border-radius: 50%;
-        margin-right: 40rpx;
-    }
-
-    .info {
-        .name {
-            color: #FFFFFF;
-            font-size: 38rpx;
-            margin-bottom: 12rpx;
-        }
-
-        .tags {}
-    }
-
-    .setting {
-        position: absolute;
-        right: 26rpx;
-        top: 37rpx;
-    }
-}
-
-.tag {
-    display: inline-block;
-    padding: 6rpx 21rpx;
-    border: 1rpx solid #999999;
-    color: #FFFFFF;
-    font-size: 24rpx;
-    border-radius: 23rpx;
-    margin-right: 20rpx;
-
-    vertical-align: top;
-
-    &-label {
-        color: #999999;
-    }
-}
-
-
-.tools {
-    &-box {
-        width: 100vw;
-        height: 406rpx;
-        padding: 0 5rpx;
-        box-sizing: border-box;
-        position: relative;
-    }
-
-    position: absolute;
-    width: calc(100vw - 69rpx*2);
-    left: 69rpx;
-    bottom: 64rpx;
-
-    justify-content: space-between;
-}
-
-
-.activate {
-    position: absolute;
-    width: calc(100% - 199rpx);
-    height: 80rpx;
-    top: 31rpx;
-    right: 37rpx;
-
-    &-tips {
-        flex: 1;
-        color: #976224;
-        font-size: 28rpx;
-    }
-
-    &-highlight {
-        color: #FF6868;
-    }
-
-    .btn-activate {
-        width: 172rpx;
-        height: 80rpx;
-    }
-}
-
-.tool {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    color: #57595B;
-    font-size: 28rpx;
-
-    &-icon {
-        width: 88rpx;
-        height: 88rpx;
-        margin-bottom: 10rpx;
-    }
-}
-
-.content {
-    padding: 0 20rpx 20rpx 20rpx;
-}
-
-.notice {
-    padding: 22rpx 21rpx;
-    display: flex;
-
-    &-icon {
-        width: 49rpx;
-        height: 49rpx;
-        margin-right: 20rpx;
-    }
-}
-
-.updates {
-    margin-top: 20rpx;
-    padding: 20rpx;
-
-    &-header {
-        position: relative;
-
-        &-bg {
-            height: 51rpx;
-            width: 58rpx;
-            margin-left: 40rpx;
-        }
-
-        &-content {
-            color: #262626;
-            font-size: 38rpx;
-            font-weight: 900;
-
-            position: absolute;
-            top: 0;
-        }
-    }
-
-    &-item {
-        padding: 0;
-        border-radius: 16rpx;
-        box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16);
-        margin-top: 20rpx;
-
-        &-img {
-            width: 100%;
-            height: 252rpx;
-        }
-
-        &-info {
-            padding: 15rpx 18rpx 8rpx 18rpx;
-        }
-
-        &-title {
-            color: #474747;
-            font-size: 32rpx;
-        }
-
-        &-desc {
-            color: #CCCCCC;
-            font-size: 20rpx;
-        }
-    }
-}
-
-.service {
-    position: fixed;
-    right: 29rpx;
-    bottom: 312rpx;
-    width: 149rpx;
-    height: 158rpx;
-}
+	.page {
+
+		background-color: #001B3C;
+		min-height: 100vh;
+	}
+
+	image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.head {
+		display: flex;
+		padding: 20rpx 26rpx 18rpx 40rpx;
+		align-items: center;
+		position: relative;
+
+		.headImage {
+			width: 143rpx;
+			height: 143rpx;
+			overflow: hidden;
+			border-radius: 50%;
+			margin-right: 40rpx;
+		}
+
+		.info {
+			.name {
+				color: #FFFFFF;
+				font-size: 38rpx;
+				margin-bottom: 12rpx;
+			}
+
+			.tags {}
+		}
+
+		.setting {
+			position: absolute;
+			right: 26rpx;
+			top: 37rpx;
+		}
+	}
+
+	.tag {
+		display: inline-block;
+		padding: 6rpx 21rpx;
+		border: 1rpx solid #999999;
+		color: #FFFFFF;
+		font-size: 24rpx;
+		border-radius: 23rpx;
+		margin-right: 20rpx;
+
+		vertical-align: top;
+
+		&-label {
+			color: #999999;
+		}
+	}
+
+
+	.tools {
+		&-box {
+			width: 100vw;
+			height: 406rpx;
+			padding: 0 5rpx;
+			box-sizing: border-box;
+			position: relative;
+		}
+
+		position: absolute;
+		width: calc(100vw - 69rpx*2);
+		left: 69rpx;
+		bottom: 64rpx;
+		justify-content: space-between;
+		
+		.tool{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+		}
+
+		.tool-icon-bg {
+			width: 90rpx;
+			height: 90rpx;
+			background-color: #001B3C;
+			border-radius: 15rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+
+	.activate {
+		position: absolute;
+		width: calc(100% - 199rpx);
+		height: 80rpx;
+		top: 31rpx;
+		right: 37rpx;
+
+		&-tips {
+			flex: 1;
+			color: #976224;
+			font-size: 28rpx;
+		}
+
+		&-highlight {
+			color: #FF6868;
+		}
+
+		.btn-activate {
+			width: 172rpx;
+			height: 80rpx;
+		}
+	}
+
+	.tool {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		color: #57595B;
+		font-size: 28rpx;
+
+		&-icon {
+			width: 88rpx;
+			height: 88rpx;
+			margin-bottom: 10rpx;
+		}
+	}
+
+	.content {
+		padding: 0 20rpx 20rpx 20rpx;
+	}
+
+	.notice {
+		padding: 22rpx 21rpx;
+		display: flex;
+
+		&-icon {
+			width: 49rpx;
+			height: 49rpx;
+			margin-right: 20rpx;
+		}
+	}
+
+	.updates {
+		margin-top: 20rpx;
+		padding: 20rpx;
+
+		&-header {
+			position: relative;
+
+			&-bg {
+				height: 51rpx;
+				width: 58rpx;
+				margin-left: 40rpx;
+			}
+
+			&-content {
+				color: #262626;
+				font-size: 38rpx;
+				font-weight: 900;
+
+				position: absolute;
+				top: 0;
+			}
+		}
+
+		&-item {
+			padding: 0;
+			border-radius: 16rpx;
+			box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16);
+			margin-top: 20rpx;
+
+			&-img {
+				width: 100%;
+				height: 252rpx;
+			}
+
+			&-info {
+				padding: 15rpx 18rpx 8rpx 18rpx;
+			}
+
+			&-title {
+				color: #474747;
+				font-size: 32rpx;
+			}
+
+			&-desc {
+				color: #CCCCCC;
+				font-size: 20rpx;
+			}
+		}
+	}
+
+	.service {
+		position: fixed;
+		right: 29rpx;
+		bottom: 312rpx;
+		width: 149rpx;
+		height: 158rpx;
+	}
 </style>
\ No newline at end of file