czg_business_wechat/pages/my/setup/index.vue

<template>
	<view class="index">
		<view class="onecontent">
			个人信息
		</view>
		<view class="towcontent">
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					头像
				</view>
				<view class="towcontent_item_box">
					<image class="towcontent_item_box_imge" src="@/static/logo.png" mode=""></image>
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					UID
				</view>
				<view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">ID:1001468</text>
					<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					昵称
				</view>
				<view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">卡卡</text>
					<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					性别
				</view>
				<view class="towcontent_item_box flex-start">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="towcontent_item flex-between" @click="datetimeshow = true">
				<view class="towcontent_item_text">
					生日
				</view>
				<view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">{{datetimevalue | timeFrom}}</text>
					<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
				</view>
			</view>
			<navigator :url="'/pages/my/setup/phone'" class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					手机号
				</view>
				<view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">去绑定</text>
					<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
				</view>
				<!-- <view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">{{phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
					<view class="towcontent_item_box_ghbd">
						更换绑定
					</view>
				</view> -->
			</navigator>
		</view>
		<view class="thereconse">
			保存
		</view>
		<u-datetime-picker :minDate="-946800000000" :maxDate="2240409600000" :show="datetimeshow"
			v-model="datetimevalue" @cancel='datetimeshow = false' @confirm="confirmdatetime" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				phone:'15309275801',
				datetimeshow: false,
				datetimevalue:'',
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '男',
			};
		},
		onLoad() {},
		computed: {},
		onShow() {

		},
		methods: {
			confirmdatetime(e){
				this.datetimeshow = false
				this.datetimevalue = e.value
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.index {
		padding: 28rpx;

		.onecontent {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.towcontent {
			padding: 0 32rpx;
			margin-top: 24rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;

			.towcontent_item {
				padding: 22rpx;
				border-bottom: 1rpx dotted #ccc;

				.towcontent_item_text {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.towcontent_item_box {
					.towcontent_item_box_imge {
						width: 64rpx;
						height: 64rpx;
					}

					.towcontent_item_box_text {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.towcontent_item_box_ghbd{
						padding: 4rpx 8rpx;
						margin-left: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9397C1;
						border-radius: 10rpx;
						border: 2rpx solid #9397C1;
					}
				}
			}
		}

		.thereconse {
			width: 630rpx;
			height: 80rpx;
			background: #999999;
			border-radius: 40rpx;
			font-size: 36rpx;
			text-align: center;
			margin: 84rpx auto;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>