shortPlay-mini/pages/my/h5/h5.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>