Skip to content

U
user
Commit 78e599c7 by songbingqi
Options

完成个人信息页面部分开发

parent bfdbac82
Showing with 485 additions and 6 deletions
App.vue
......@@ -106,4 +106,10 @@ image {
width: 100%;
height: auto;
}
.modal {
position: fixed;
width: 100%;
top: 0;
}
</style>
components/Modal/index.vue 0 → 100644
<template>
<view class="overlay">
<view class="main" :style="{'width':width+'rpx'}">
<view class="top" >
<view class="title">标题</view>
<view class="content">内容</view>
</view>
<view class="bottom">
<view class="close">取消</view>
<view class="submit">确定</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
width:{
type:Number,
default(){
return 614
}
}
},
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.overlay {
background-color: #0000003d;
height: 100vh;
width: 100%;
z-index: 999;
.top {
background: white;
padding: 60rpx 100rpx 0rpx 98rpx;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.title {
text-align: center;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
}
.bottom {
display: flex;
.close {
width: 100%;
}
.submit {
width: 100%;
}
}
}
</style>
\ No newline at end of file
components/Tabs/index.vue 0 → 100644
<template>
<view class="big">
<view class="tabItem" v-for="(item,index) in list" :key="index" @click="changeValue(index)">
<view :class="[actionIndex===index?'textAction':'textDefault']">
{{item.name}}
</view>
<view :class="[actionIndex===index?'borderLineAction':(flag?'borderLineDefault':'borderLine')]"></view>
</view>
</view>
</template>
<script>
export default {
props:{
list:{
type:Array,
default(){
return []
}
},
newIndex:{
type:Number,
default(){
return 0
}
}
},
watch:{
newIndex(val){
this.flag = true
this.actionIndex = val
}
},
data() {
return {
flag:false,
actionIndex:0
};
},
methods: {
changeValue(index){
this.flag = true
this.actionIndex = index
this.$emit('changeTab',index)
}
}
};
</script>
<style lang="scss" scoped>
.big {
height: 68rpx;
display: flex;
align-items: center;
padding-top: 3rpx;
.tabItem {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
.textAction{
width: 100%;
text-align: center;
margin-bottom: 12rpx;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.textDefault{
width: 100%;
text-align: center;
margin-bottom: 12rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.borderLineAction {
margin: 0 auto;
height: 4rpx;
background: #0050f6;
}
.borderLineAction {
animation-name: showani;
animation-duration: 0.5s;
animation-fill-mode: forwards;
@keyframes showani {
0% {
width: 0rpx;
}
100% {
width: 64rpx;
}
}
}
.borderLine {
height: 4rpx;
}
.borderLineDefault {
margin: 0 auto;
height: 4rpx;
background: #0050f6;
}
.borderLineDefault {
animation-name: hideani;
animation-duration: 0.5s;
animation-fill-mode: forwards;
@keyframes hideani {
0% {
width: 64rpx;
}
100% {
width: 0rpx;
}
}
}
}
}
</style>
\ No newline at end of file
mineSubPackage/pages/coupon/index.vue
<template>
<view class="bigBox">
<u-tabs
<!-- <u-tabs
:list="list1"
:scrollable="false"
lineColor="#0050F6"
......@@ -22,9 +22,11 @@
}"
itemStyle="height: 64rpx"
@click="changeTab"
></u-tabs>
></u-tabs> -->
<Tabs :list='list1' @changeTab="changeTab" :newIndex="current" />
<view>
<swiper :current="current" class="swiper">
<swiper :current="current" class="swiper" @change="swiperChange">
<swiper-item>
<view class="list">
<Ticket/>
......@@ -42,8 +44,9 @@
<script>
import Ticket from '@/components/Ticket/index.vue'
import Tabs from '@/components/Tabs/index.vue'
export default {
components: {Ticket},
components: {Ticket,Tabs},
data() {
return {
list1: [
......@@ -56,6 +59,7 @@ export default {
],
nouserList:[],
current: 0,
actionIndx:0
};
},
mounted(){
......@@ -82,8 +86,11 @@ export default {
},
methods: {
changeTab(current) {
this.current = current.index;
this.current = current;
},
swiperChange(val){
this.current = val.detail.current;
}
},
};
</script>
......
mineSubPackage/pages/userInfo/index.vue 0 → 100644
<template>
<view>
<view class="page">
<view class="avatarBox">
<image class="avatar" src="../../../static/touxiang.png"/>
</view>
<view class="infoBox">
<view class="infoItem name">
<view class="label">昵称</view>
<view class="input"><input type="text" v-model="userInfo.name"></view>
</view>
<view class="infoItem phone">
<view class="label">手机</view>
<view class="input">{{userInfo.phone}}</view>
</view>
<view class="infoItem sex">
<view class="label">性别</view>
<view class="input">
<view class="sexBox">
<view class="sex" v-for="(item,index) in sexList" :key="index" @click="selectedSex(item)">
<view :class="item.value===userInfo.sex?'checked':'nochecked'"></view>
<view class="checkLabel">{{item.label}}</view>
</view>
</view>
</view>
</view>
<view class="infoItem birthday">
<view class="label">生日</view>
<view class="input">
<view class="birthdayBox">
<view class="text">{{userInfo.birthday}}</view>
<view class="btn" @click="changeBirthday">修改</view>
</view>
</view>
</view>
</view>
<view class="saveBtn">
<button class="btn">保存</button>
</view>
</view>
<!-- <button @click="exit">退出</button> -->
<u-datetime-picker
:show="timerShow"
v-model="value1"
mode="date"
></u-datetime-picker>
<Modal class="modal"/>
</view>
</template>
<script>
import Modal from '@/components/Modal/index.vue'
export default {
components: { Modal },
data() {
return {
timerShow: false,
value1: Number(new Date()),
userInfo: {
name:'脸脸',
phone:'152****8932',
sex:0,
birthday:'1996.5.29'
},
sexList:[
{
'label':'男',
'value':0
},
{
'label':'女',
'value':1
},
]
}
},
mounted(){
// wx.showModal({
// title:'提示',
// content: "是否允许获取微信昵称和头像？",
// success:()=>{
// wx.getUserProfile({
// desc:'用于完善用户资料',
// success:(res)=>{
// console.log(res)
// }
// })
// }
// })
},
methods:{
changeBirthday(){
wx.getUserProfile({
desc:'用于完善用户资料',
success:(res)=>{
console.log(res)
}
})
},
selectedSex(val){
console.log(val)
this.userInfo.sex = val.value
},
exit(){
wx.exitMiniProgram({
success:()=>{
console.log(123)
}
})
}
}
}
</script>
<style scoped lang="less">
.page{
background: #F8F8F8;
height: 100vh;
}
.avatarBox {
z-index: 1;
width: 100%;
height: 320rpx;
display: flex;
align-items: center;
background: #FFFFFF;
.avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 0 auto;
}
}
.infoBox {
z-index: 1;
background: #FFFFFF;
overflow: hidden;
padding: 0rpx 38rpx 0rpx 40rpx;
margin-top: 24rpx;
.infoItem {
height: 96rpx;
border-bottom: 1rpx solid #ECECEC;
display: flex;
align-items: center;
justify-content: flex-start;
.label {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.input {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-left: 136rpx;
.sexBox {
display: flex;
align-items: center;
justify-content: flex-start;
.sex {
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 64rpx;
.checked {
width: 24rpx;
height: 24rpx;
background: url('../../../static/imgs/duigouxuanzhong.png') center center no-repeat;
background-size:100% 100%;
margin-right: 16rpx;
}
.nochecked {
width: 24rpx;
height: 24rpx;
background: url('../../../static/imgs/weixuanzhong.png') center center no-repeat;
background-size:100% 100%;
margin-right: 16rpx;
}
.checkLabel {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
.birthdayBox {
display: flex;
justify-content: flex-start;
align-items: center;
.btn {
width: 96rpx;
height: 48rpx;
border-radius: 2rpx;
border: 2rpx solid #0050F6;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
color: #0050F6;
line-height: 48rpx;
margin-left: 192rpx;
}
}
}
}
.infoItem:last-child {
border: 0rpx;
}
}
.saveBtn {
width: 670rpx;
height: 96rpx;
margin: 0 auto;
margin-top: 32rpx;
.btn {
background: #0050F6;
border-radius: 2px;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.btn::before {
background: #0050F6;
border-radius: 2px;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
</style>
\ No newline at end of file
pages.json
......@@ -105,6 +105,13 @@
"navigationBarTitleText": "我的HOOLOO券",
"enablePullDownRefresh": false
}
},
{
"path": "pages/userInfo/index",
"style": {
"navigationBarTitleText": "个人信息",
"enablePullDownRefresh": false
}
}
]
}
......
pages/mine/mine.vue
......@@ -7,7 +7,7 @@
</view>
<image :src="img"/>
<!-- <video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/e6582afb60924.mp4"></video> -->
<view class="mod11">
<view class="mod11" @click="goToPage('userInfo')">
<view class="avatar">
<image :src="'../../static/touxiang.png'"></image>
</view>
......@@ -139,6 +139,7 @@ export default {
}
page == 'order' && uni.switchTab({ url: '/pages/order/order' })
page == 'msg' && uni.navigateTo({ url: '/mineSubPackage/pages/msg/index' })
page == 'userInfo' && uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index' })
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment