ch
3 years ago
parent
b375a78167
commit
8797381ba2
@ -0,0 +1,76 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-26 18:29:19
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-28 15:57:22
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view class="uiCell" @click="$emit('click')">
|
||||
<slot name="icon"></slot>
|
||||
<view class="uiCell--left">
|
||||
<text class="uiCell--title">{{title}}</text>
|
||||
<text class="uiCell--label">{{label}}</text>
|
||||
</view>
|
||||
<slot name="value">
|
||||
<text class="uiCell--value">{{value}}</text>
|
||||
</slot>
|
||||
<slot name="right-icon" v-if="rightIcon">
|
||||
<image class="uiCell--rightIcon" src="@/static/common/arrow.png"/>
|
||||
</slot>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props : {
|
||||
title : {
|
||||
type: String,
|
||||
default : ''
|
||||
},
|
||||
label : {
|
||||
type: String,
|
||||
default : ''
|
||||
},
|
||||
value : {
|
||||
type : String,
|
||||
default : ''
|
||||
},
|
||||
rightIcon : {
|
||||
type : Boolean,
|
||||
default : true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uiCell{
|
||||
min-height: 100rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
&--title{
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
display: block;
|
||||
}
|
||||
&--label{
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
&--value{
|
||||
flex: 1;
|
||||
padding: 0 10rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
&--rightIcon{
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +0,0 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-22 15:09:06
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-22 16:19:06
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<u-cell :isLink="true" arrow-direction="right" label="昵称">
|
||||
<u-image slot="icon" shape="circle" width="100rpx" height="100rpx" ></u-image>
|
||||
</u-cell>
|
||||
<u-cell label="我的收货地址" :isLink="true" rightIcon="arrow-right"></u-cell>
|
||||
<u-cell label="版本号" value="1.0.0"></u-cell>
|
||||
<u-button type="primary" text="退出登录"></u-button>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-22 15:09:06
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-28 17:12:14
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<UiCell class="userInfo cell" title="昵称" @click="$Router.push('/pages/account/setting/setUserInfo')">
|
||||
<image slot="icon" class="userInfo--head" src="@/static/account/tx.png" ></image>
|
||||
</UiCell>
|
||||
<UiCell class="cell" title="我的收货地址"></UiCell>
|
||||
<UiCell class="cell" title="关于我们" ></UiCell>
|
||||
<UiCell class="cell cell--last" title="版本号" value="1.0.0" valueClass="cell--value" :rightIcon="false"></UiCell>
|
||||
<view class="logout">退出登录</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import UiButton from '@/components/UiButton.vue'
|
||||
import UiCell from '@/components/UiCell.vue'
|
||||
export default {
|
||||
components: { UiCell, UiButton },
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.userInfo{
|
||||
margin: 20rpx 0;
|
||||
border: 0;
|
||||
height: 200rpx;
|
||||
&--head{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
.cell{
|
||||
padding: 0 40rpx;
|
||||
&--last{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.logout{
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
margin: 20rpx 0;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/deep/{
|
||||
.userInfo .uiCell--title{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.uiCell--value{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-28 15:38:23
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-28 17:08:34
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<UiPageHeader title="设置昵称">
|
||||
<view slot="operation" class="headerBtn">确定</view>
|
||||
</UiPageHeader>
|
||||
<u--input class="input" placeholder="请输入昵称" clearable ></u--input>
|
||||
<view class="tips">
|
||||
<text>请输入1-10个字符</text>
|
||||
<text>(1/10)</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import UiButton from '@/components/UiButton.vue'
|
||||
import UiCell from '@/components/UiCell.vue'
|
||||
import UiPageHeader from '@/components/UiPageHeader.vue'
|
||||
export default {
|
||||
components: { UiCell, UiButton, UiPageHeader },
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.headerBtn{
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FF875B;
|
||||
}
|
||||
.input{
|
||||
padding: 20rpx 40rpx !important;
|
||||
height: 60rpx;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.tips{
|
||||
padding: 20rpx 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-28 15:38:23
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-28 16:37:16
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<view class="userInfo">
|
||||
<u-upload class="userInfo--upload" name="6" :fileList="fileList6" @afterRead="headUpload" >
|
||||
<image class="userInfo--head" src="@/static/account/tx.png" ></image>
|
||||
</u-upload>
|
||||
<view>昵称</view>
|
||||
</view>
|
||||
<UiCell class="cell" title="昵称" value="马士兵" @click="$Router.push('/pages/account/setting/setName')"></UiCell>
|
||||
<UiCell class="cell cell--last" title="性别" value="男" @click="sexShow = true"></UiCell>
|
||||
<u-picker :show="sexShow" :columns="sexData" keyName="label" @cancel="sexShow = false" @confirm="sexChange"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import UiButton from '@/components/UiButton.vue'
|
||||
import UiCell from '@/components/UiCell.vue'
|
||||
export default {
|
||||
components: { UiCell, UiButton },
|
||||
data(){
|
||||
return {
|
||||
fileList: [],
|
||||
sexShow : false,
|
||||
sexData : [[{label:'女',val:0},{label:'男',val:1}]]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sexChange(){
|
||||
this.sexShow = false
|
||||
},
|
||||
headUpload(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.userInfo{
|
||||
padding: 77rpx 0 60rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
&--head,&--upload{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 13rpx;
|
||||
}
|
||||
}
|
||||
.cell{
|
||||
padding: 0 40rpx;
|
||||
&--last{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
/deep/{
|
||||
.userInfo .uiCell--title{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.uiCell--value{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue