132 lines
3.9 KiB
Vue
132 lines
3.9 KiB
Vue
<template>
|
||
<c-tabbar :current="2">
|
||
<view class="p-30">
|
||
<view class="flex flex-row justify-center items-center" style="margin-bottom: 50upx;" @click="navigateTo('/pages/my/personal/personal')">
|
||
<view class="flex justify-center items-center">
|
||
<image class="avatar" src="../../../static/avatar.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="flex-1" style="padding-left: 20upx;">
|
||
<view class="name">{{userInfo.nickName}}</view>
|
||
<view class="c-666">{{userInfo.phone}}</view>
|
||
<view class="c-666">ID：{{userInfo.id}}</view>
|
||
</view>
|
||
<view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="c-menu">
|
||
<u-cell class="no-line" title="在线客服" :isLink="true" arrow-direction="right" @click="show = true"></u-cell>
|
||
</view>
|
||
<view class="c-menu">
|
||
<u-cell class="no-line" title="种草短剧小程序" :isLink="true" arrow-direction="right" @click="showMini = true"></u-cell>
|
||
</view>
|
||
<view class="c-menu">
|
||
<u-cell title="用户协议" :isLink="true" arrow-direction="right" url="/pages/agreement/user/user"></u-cell>
|
||
<u-cell title="隐私政策" class="no-line" :isLink="true" arrow-direction="right"
|
||
url="/pages/agreement/privacy/privacy"></u-cell>
|
||
</view>
|
||
</view>
|
||
|
||
<u-modal :show="show" title="请添加客服微信" :closeOnClickOverlay="true" :showCancelButton="true"
|
||
:showConfirmButton="false" cancelText="关闭" cancelColor="#007aff" @cancel="show = false" @close="show = false">
|
||
<view class="flex flex-col justify-center items-center" style="width: 80%;">
|
||
<u-radio-group v-model="chooseCS" placement="column" @change="groupChange">
|
||
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
|
||
:label="item.name" :name="item.name">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
<image style="width: 300upx;height: 300upx;"
|
||
src="https://ly.imgother.hlh2021.com/1680836523536_小刘客服微信.jpg" mode="aspectFit"></image>
|
||
<view class="p-20">
|
||
<view style="color: #646566;font-size: 28upx;">添加请备注自己的用户ID</view>
|
||
<view style="color: #646566;font-size: 28upx;">截图本页去微信扫码添加</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
|
||
<u-modal :show="showMini" title="种草短剧小程序" :closeOnClickOverlay="true" :showCancelButton="false"
|
||
:showConfirmButton="false" @close="showMini = false">
|
||
<view>
|
||
<view class="flex flex-col justify-center items-center" style="width: 100%;">
|
||
<image style="width: 300upx;height: 300upx;"
|
||
src="https://ly.imgother.hlh2021.com/1680836523536_小刘客服微信.jpg" mode="aspectFit"></image>
|
||
<view class="p-20">
|
||
<view style="color: #646566;font-size: 28upx;">截图本页去微信扫码进入小程序</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
</c-tabbar>
|
||
</template>
|
||
|
||
<script>
|
||
import CTabbar from '@/components/gTabbar.vue'
|
||
|
||
import {
|
||
mapState
|
||
} from 'vuex'
|
||
export default {
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
components: {
|
||
CTabbar
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
chooseCS: '张三',
|
||
// 基本案列数据
|
||
radiolist: [{
|
||
name: '张三',
|
||
},
|
||
{
|
||
name: '李四',
|
||
},
|
||
{
|
||
name: '王五',
|
||
}, {
|
||
name: '榴莲',
|
||
}
|
||
],
|
||
showMini: false
|
||
}
|
||
},
|
||
methods: {
|
||
groupChange(n) {
|
||
console.log('groupChange', n);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.avatar {
|
||
width: 140upx;
|
||
height: 140upx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.name {
|
||
font-size: 35upx;
|
||
font-weight: bold;
|
||
color: #323333;
|
||
padding: 2upx 0;
|
||
}
|
||
|
||
.c-666 {
|
||
font-size: 30upx;
|
||
color: #666 !important;
|
||
padding: 2upx 0;
|
||
}
|
||
|
||
::v-deep .u-radio-group--column {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
|
||
.u-radio {
|
||
width: 50%;
|
||
}
|
||
}
|
||
</style> |