初始化
This commit is contained in:
魏啾
187
pages/my/setup/index.vue
Normal file
187
pages/my/setup/index.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user