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.
195 lines
4.2 KiB
195 lines
4.2 KiB
<template>
|
|
<view class="page">
|
|
|
|
<navbar title="个人中心"/>
|
|
|
|
<view class="frame">
|
|
|
|
<!-- 头部 -->
|
|
<view class="head">
|
|
<view class="headImage">
|
|
<image src="" mode=""></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="name">
|
|
倾心.
|
|
</view>
|
|
<!-- <view class="vip">
|
|
VIP1
|
|
</view> -->
|
|
<view class="tips">
|
|
手机号：13812345678
|
|
</view>
|
|
</view>
|
|
<view class="headBtn" @click="headBtn">
|
|
角色切换
|
|
</view>
|
|
<view class="setting">
|
|
<uv-icon name="setting" size="40rpx"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!--内容-->
|
|
<view class="content">
|
|
<view class="item" v-for="(item, index) in list" :key="index" @click="tapItem(item, index)">
|
|
<view class="key">
|
|
<view class="img">
|
|
<img :src="item.imgUrl" style="width: 100%; height: 100%;"/>
|
|
</view>
|
|
<view class="text">
|
|
{{item.text}}
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
{{item.value}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 联系客服弹框 -->
|
|
<customerServicePopup ref="customerServicePopup" />
|
|
|
|
<tabber select="3"/>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import topbar from "@/components/base/topbar.vue";
|
|
import tabber from "@/components/base/tabbar.vue";
|
|
import customerServicePopup from "@/components/config/customerServicePopup.vue";
|
|
|
|
export default {
|
|
name: "center2",
|
|
components: {customerServicePopup, tabber, topbar},
|
|
data() {
|
|
return {
|
|
list:[
|
|
// this.$t('pages.index.index.companyProfile')
|
|
{ text: '联系客服', value: ">" , imgUrl: '/static/image/center/13.svg'},
|
|
{text: '系统设置', value: ">" , imgUrl: '/static/image/center/12.svg'},
|
|
{text: '关于我们', value: ">" , imgUrl: '/static/image/center/13.svg'}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
tapItem(item, index){
|
|
console.log(item, index,"item,index==========")
|
|
if (index === 0){
|
|
this.$refs.customerServicePopup.open()
|
|
}else if (index === 1){
|
|
console.log("系统设置")
|
|
}else if (index === 2){
|
|
console.log("关于我们")
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
background-color: #2e2e2e;
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 40rpx;
|
|
|
|
.key {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFF;
|
|
font-size: 32rpx;
|
|
|
|
.img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.value {
|
|
color: #FFF;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|