Skip to content

G
gxpt_wechat
Commit 7a29e875 by zhangzhen
Options

个人中心界面优化

parent 13516cb9
Showing with 243 additions and 94 deletions
pages/index/index.vue
......@@ -68,9 +68,12 @@
<view class="room-name">
<text>{{item.name}}{{item.roomType?'【'+roomTypeEnum[item.roomType]+'】':''}}</text>
</view>
<view class="price" @tap.stop="onNavToInfo(item)">
<text>查看包厢</text>
<text class="cuIcon-playfill text-gray text-lg"></text>
<view class="price">
<!-- <text>查看包厢</text>
<text class="cuIcon-playfill text-gray text-lg"></text> -->
<view class="">
<view class='cu-tag radius' :class="item.status==0?'line-green':item.status==1?'line-orange':'line-blue'" >{{roomStatusEnum[item.status]}}</view>
</view>
</view>
</view>
<view class="facilitie-box">
......@@ -99,11 +102,11 @@
<text>惠</text>
</view>
<view class="part-2">
<text>{{val.duration}}小时{{val.price}}元</text>
<text>{{val.duration}}小时套餐{{val.price}}元</text>
</view>
<view class="part-3">
<!-- <view class="part-3">
<text>{{(val.price/val.duration).toFixed(2)}}/小时</text>
</view>
</view> -->
</view>
</view>
<view class="">
......@@ -212,16 +215,21 @@
],
facilitieList: {},
roomTypeEnum:{},
roomStatusEnum:{},
show: true,
timer: null
}
},
onShow() {
this.onGetSysConfig();
uni.showLoading({
title:'加载中'
})
if (uni.getStorageSync("storeId") && this.storeList.length) {
this.storeId = uni.getStorageSync("storeId")
let obj = this.storeList.filter(item => item.id === this.storeId)[0]
console.log(obj, 909090)
new Promise((resolve)=>{
this.storeInfo = {
...obj,
distance:obj.distance? Number(obj.distance.substr(0,8)).toFixed(2):0,
......@@ -232,8 +240,11 @@
images: item.images ? item.images.split(",").map(val => this.hostUrl + val) : []
}
}) : []
}
resolve()
}).then(()=>{
uni.hideLoading()
})
} else {
this.onLoading()
}
......@@ -248,9 +259,6 @@
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
// 隐藏原生的tabbar
uni.hideTabBar();
this.onCheckUserLogin();
......@@ -280,6 +288,7 @@
uni.setStorageSync('dicts', JSON.stringify(res.data.data))
this.facilitieList = getDictItem(dicts, "indoor_facilities");
this.roomTypeEnum = getDictItem(dicts, "store_room_type");
this.roomStatusEnum = getDictItem(dicts, "store_room_status");
})
// }
},
......@@ -340,17 +349,20 @@
})
},
onGetListStore() {
let that = this;
getListStore({
...this.queryParams,
nowLatitude: this.latitude||'',
nowLongitude: this.longitude||''
}).then(res => {
if (res.data.code == 200 && res.data.data.length) {
uni.hideLoading()
this.storeList = res.data.data;
let obj = {}
obj = res.data.data[0];
this.storeInfo = {
new Promise((resolve,reject)=>{
that.storeInfo = {
...obj,
distance:obj.distance? Number(obj.distance.substr(0,8)).toFixed(2):0,
roomVoList: obj.roomVoList.map(item => {
......@@ -362,6 +374,13 @@
}
})
}
resolve()
}).then(()=>{
uni.hideLoading()
})
// this.$nextTick(()=>{
// })
}
})
},
......@@ -955,12 +974,14 @@
display: flex;
flex-direction: row;
align-items: center;
width: 48%;
height: 44rpx;
background: #FFFFFF;
border-radius: 8upx;
border: 2rpx solid #fc3f21;
margin: 8upx;
margin: 8upx 1%;
overflow: hidden;
.part-1{
display: flex;
justify-content: center;
......@@ -974,11 +995,12 @@
}
.part-2{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
height: 100%;
padding: 8upx;
border-right: 2upx solid #fc3f21;
// border-right: 2upx solid #fc3f21;
}
.part-3{
display: flex;
......
pages/my/myInfo.vue
......@@ -2,77 +2,89 @@
<view class="myInfo">
<view class="header" :style="{height: statusBarHeight+180+'px',paddingTop: statusBarHeight+'px'}">
<view class="header-content-box">
<view v-if="loginStatus" class="login-content">
<view class="flex-1 flex-row">
<view class="cu-avatar xl round margin-left">
<image class="avatar-img" :src="userInfo.avatar|| assetsPath+'/cart.png'" mode="scaleToFill"></image>
<view class="login-content">
<view v-if="loginStatus" class="flex-1 flex-row" @tap="onNavToSetUserInfo">
<view class="cu-avatar xl margin-left" >
<image class="avatar-bg" :src="assetsPath+'/avatar_bg.png'" mode="scaleToFill"></image>
<view class="avatar-box">
<image class="avatar-img" :src="userInfo.avatar|| assetsPath+'/logo_icon.png'" mode="scaleToFill" @tap.stop="onProview"></image>
</view>
</view>
<view class="flex-col margin-left">
<text class="text-title text-lg text-white text-bold text-xxl">{{userInfo.nickName||"凑角001"}}</text>
<view class="flex-row" style="margin-top: 10rpx;">
<!-- <text class="cuIcon-hotfill text-white"></text> -->
<text class="text-title text-lg text-bold text-xxl">{{userInfo.nickName||"凑角001"}}</text>
<!-- <view class="flex-row" style="margin-top: 10rpx;">
<text class="cuIcon-hotfill text-white"></text>
<text class="text-white text-lg">会员用户</text>
</view> -->
</view>
<view class="nav-right" @tap.stop="onNavToSetUserInfo">
<image class="img" :src="assetsPath+'/setting.png'" mode="scaleToFill"></image>
<text class="text-gray">修改资料</text>
</view>
<view class="nav-right" @tap="onNavToSetUserInfo">
<text class="text-white text-xl">修改资料</text>
</view>
<view v-else class="none-login margin-left">
<view class="cu-avatar xl round">
<image class="avatar-img" :src=" assetsPath+'/avatar_no.png'" mode="scaleToFill"></image>
</view>
<view class="flex-row amount-coupon">
<view class="flex-col" @tap="onNavToMyCoupon">
<text class="text-white text-xl">优惠券</text>
<text class="text-white text-xl">{{userInfo.number|| 0}} 张</text>
<text class="text-gray margin-left" @tap="onNavToLogin">未授权</text>
</view>
<view class="flex-between amount-coupon" :style="{background:'url('+assetsPath+'/my_coupon_bg.png) 0 0 / 100% 100% no-repeat'}">
<view class="part-left">
<text v-if="loginStatus" class="text-title text-xl">会员用户专享</text>
<text v-else class="text-title text-xl">点击上方授权登录，才能享受优惠哦！</text>
</view>
<view v-if="loginStatus" class="flex-row" @tap="onNavToMyCoupon">
<text class="text-name text-xl">优惠券</text>
<text class="text-white text-xl text-bold">{{userInfo.number|| 0}}</text>
</view>
<view v-else class="none-login">
<view class="cu-avatar xl round margin-bottom">
<image class="avatar-img" :src=" assetsPath+'/cart.png'" mode="scaleToFill"></image>
</view>
<button class="cu-btn round bg-white" @tap="onNavToLogin">授权登录</button>
</view>
</view>
</view>
<view class="flex-col content-box">
<view class="user-action">
<view v-for="(item,k) in userAction" :key="k" class="action-box">
<view v-if="item.show|| userInfo.roleType =='1'" class="action-item" @tap="onActionNav(item,k)">
<view v-for="(item,k) in userAction" :key="k" class="action-box" >
<view v-if="item.show|| userInfo.roleType =='1'" :style="{background:item.color}" class="action-item" @tap="onActionNav(item,k)">
<view class="flex-1">
<text class="text-title text-lg">{{item.label}}</text>
</view>
<view class="img-box">
<image :src="item.iconUrl" mode="widthFix"></image>
</view>
<text class="text-title text-lg">{{item.label}}</text>
</view>
</view>
</view>
<view class="main">
<view class="cu-list menu card-menu sm-border margin-top">
<view class="cu-list menu sm-border">
<view class="cu-item arrow" @tap="onHandle(1)">
<view class="content">
<image :src="assetsPath+'/cart.png'" class="png" mode="aspectFit"></image>
<text class="text-grey">客服咨询</text>
<image :src="assetsPath+'/my_list_1.png'" class="png" mode="aspectFit"></image>
<text class="text-title">客服咨询</text>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(2)">
<view class="content">
<image :src="assetsPath+'/cart.png'" class="png" mode="aspectFit"></image>
<text class="text-grey">WIFI连接</text>
<image :src="assetsPath+'/my_list_2.png'" class="png" mode="aspectFit"></image>
<text class="text-title">WIFI连接</text>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(3)">
<view class="content">
<image :src="assetsPath+'/cart.png'" class="png" mode="aspectFit"></image>
<text class="text-grey">全国门店</text>
<image :src="assetsPath+'/my_list_3.png'" class="png" mode="aspectFit"></image>
<text class="text-title">全国门店</text>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(4)">
<view class="content">
<image :src="assetsPath+'/cart.png'" class="png" mode="aspectFit"></image>
<text class="text-grey">联系我们</text>
<image :src="assetsPath+'/my_list_4.png'" class="png" mode="aspectFit"></image>
<text class="text-title">联系我们</text>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="login-out" v-if="loginStatus">
<button class="cu-btn block bg-pink lg round" @tap="onLoginOut">
<text class="cuIcon-exit"></text>退出登录
......@@ -122,20 +134,23 @@
loginStatus: true,
statusBarHeight: this.statusBarHeight,
assetsPath:config.assetsPath,
hostUrl: config.hostUrl,
userInfo:{},
userAction:[
{
label:"我的订单",
iconUrl:config.assetsPath+'/order_icon.png',
label:"订单",
iconUrl:config.assetsPath+'/my_list_15.png',
routePath:"/pages/orderRecord/orderRecord",
type:"",
color:"#FEF9EE",
show:true
},
{
label:"消费记录",
iconUrl:config.assetsPath+'/record_icon.png',
iconUrl:config.assetsPath+'/my_list_16.png',
routePath:"/pages/payRecord/index",
type:"",
color:"#EEF3FE",
show:true
},
// {
......@@ -147,9 +162,10 @@
// },
{
label:"保洁管理",
iconUrl:config.assetsPath+'/clean_icon.png',
iconUrl:config.assetsPath+'/my_list_17.png',
routePath:"/pages/cleanManage/cleanManage",
type:"",
color:"#F1EEFE",
show:false
}
],
......@@ -198,6 +214,7 @@
this.userInfo = res.data.data;
uni.setStorageSync('userInfo',this.userInfo)
this.loginStatus = true;
// this.loginStatus = false;
}
})
},
......@@ -273,6 +290,12 @@
}
})
},
onProview(){
uni.previewImage({
current:0,
urls: [this.userInfo.avatar]
})
},
// 退出登录，解除手机号与当前微信的绑定
onLoginOut(){
uni.showLoading({
......@@ -312,7 +335,7 @@
flex-direction: column;
width: 100%;
min-height: 360upx;
background-color: rgba(228, 5, 131, 0.99);
background: linear-gradient(90deg,rgba(228, 5, 131, 0.2) 20%,rgba(255,255,255,0.9));
.header-content-box {
display: flex;
......@@ -322,30 +345,73 @@
display: flex;
flex-direction: column;
width: 100%;
margin-top: 30upx;
>.flex-row {
position: relative;
align-items: center;
.cu-avatar{
position: relative;
background-color: transparent;
width: 80px;
height: 80px;
.avatar-bg{
width: 100%;
height: 100%;
}
.avatar-box{
position: absolute;
width: 80%;
height: 80%;
overflow: hidden;
z-index: 99;
}
}
.nav-right{
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
right: 5vw;
margin-top: 40upx;
// margin-top: 20upx;
.img{
width: 14px;
height: 16px;
margin-right: 6upx;
}
text{
font-size: 30upx;
}
}
}
.amount-coupon {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 10%;
margin-bottom: 10%;
.flex-col {
margin: 0 3% 28upx;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 106upx;
padding: 0 30upx;
.part-left{
text{
color: #512C19;
}
}
.flex-row {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
align-items: center;
width: 30%;
.text-name{
color: #936E4C;
}
.text-white{
color: #E2177C;
margin-left: 20upx;
}
}
.line {
......@@ -357,45 +423,73 @@
.none-login {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
flex-direction: row;
align-items: center;
width: 100%;
.cu-avatar{
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #ffffff;
overflow: hidden;
.avatar-img{
width: 100%;
height: 100%;
}
}
.text-gray{
font-size: 40rpx;
color: #36122D;
font-weight: bold;
}
}
}
}
.content-box{
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
width: 100%;
border-radius: 28upx 28upx 0 0;
margin-top: -28upx;
background-color: #ffffff;
box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(81,6,49,0.3);
}
.user-action {
position: relative;
display: flex;
flex-direction: row;
width: 92%;
padding: 30upx 20upx;
border-radius: 12upx;
box-shadow: 0 0 12upx rgba(0, 0, 0, 0.2);
margin: -30upx 0;
background-color: #ffffff;
width: 97%;
padding: 30upx 0;
z-index: 10;
.action-box{
width: 25%;
width: 30%;
margin: 0 1.5%;
>.action-item {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
align-items: center;
width: 100%;
.img-box{
height: 88rpx;
border-radius: 12rpx;
.flex-1{
display: flex;
justify-content: center;
align-items: center;
width: 60%;
margin-bottom: 20upx;
justify-content: center;
}
.img-box{
display: flex;
align-items: flex-end;
width: 52upx;
height: 100%;
image{
display: block;
width: 80%;
max-height: 120upx;
width: 100%;
max-height: 80upx;
}
}
}
......@@ -404,7 +498,6 @@
.main {
width: 100%;
margin-top: 30upx;
}
}
.login-out{
......
pages/order/order.vue
......@@ -56,7 +56,7 @@
<view v-for="(item,index) in packageMode" :key="index" class="flex-col item"
:class="{active: modeIndex===index,'item-3':packageMode.length<3,'item-n':packageMode.length>=3}"
@tap="onChangeMode(index)">
<text class="text-title">{{item.name}}</text>
<text class="text-title">{{item.duration}}小时套餐</text>
<view class="flex-row" style="margin-top: 12upx;">
<text style="margin-bottom: 4upx;">￥</text>
<text class="text-title text-bold text-xl">{{item.price}}</text>
......
pages/orderRecord/orderRecord.vue
......@@ -75,7 +75,7 @@
<text class="text-gray margin-right">优惠券抵扣</text>
<text class="text-title">{{item.couponName}}</text>
</view>
<view class="flex-row part-1">
<view class="flex-between part-1">
<text class="text-gray margin-right">订单编号:</text>
<text class="text-title">{{item.orderNo}}</text>
</view>
......
pages/payRecord/index.vue
......@@ -5,15 +5,16 @@
<view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)">
<view class="flex-between part-1">
<view class="">
<text class="text-title">{{item.name}}:</text>
<text class="text-title">{{item.name}}</text>
</view>
<view class="flex-row">
<text class="text-black text-bold text-lg">{{item.price}}元</text>
<text class="text-bold text-xl" :class="item.sign=='income'?'text-red':'text-black'">{{payStatus[item.sign||'expenditure']}}</text>
<text class="text-black text-bold text-lg" >{{item.price}}元</text>
</view>
</view>
<view class="flex-between part-1">
<text>创建时间:</text>
<text>{{item.createTime}}</text>
<text>{{payTypeEnum[item.payType||'1']}}</text>
</view>
</view>
</view>
......@@ -74,7 +75,16 @@ import NoLogin from "@/components/noLogin/noLogin"
pageSize: 10
},
loginStatus:true,
orderStatusEnum:{}
orderStatusEnum:{},
payTypeEnum:{
1:"微信支付",
2:"支付宝支付",
3:"余额支付"
},
payStatus:{
expenditure:'-',
income:'+'
}
};
},
onLoad() {
......@@ -163,7 +173,7 @@ import NoLogin from "@/components/noLogin/noLogin"
align-items: center;
.list-item{
width: 94%;
padding: 30upx 20upx;
padding: 20upx 20upx;
border-radius: 20upx;
background-color: #ffffff;
margin-top: 30upx;
......@@ -171,6 +181,11 @@ import NoLogin from "@/components/noLogin/noLogin"
display: flex;
align-items: center;
padding: 10upx;
.flex-row{
display: flex;
flex-direction: row;
align-items: center;
}
}
}
}
......
pages/setUserInfo/index.vue
......@@ -67,7 +67,7 @@
userInfo:{
avatar:"",
nickName:"",
phone:''
sex:''
},
assetsPath:config.assetsPath,
nickName:"",
......@@ -101,18 +101,37 @@
})
},
onSaveUserInfo(){
if(this.userInfo.phone && !checkPhone(this.userInfo.phone)){
uni.showToast({
icon:'none',
title:'手机号输入不正确'
// if(this.userInfo.phone && !checkPhone(this.userInfo.phone)){
// uni.showToast({
// icon:'none',
// title:'手机号输入不正确'
// })
// return
// }
uni.showLoading({
title:'提交中'
})
return
}
updateUserInfo(this.userInfo).then(res=>{
updateUserInfo({
id:this.userInfo.id,
avatar:this.userInfo.avatar,
nickName:this.userInfo.nickName,
sex:this.userInfo.sex
}).then(res=>{
uni.hideLoading()
if(res.data.code == 200 ){
uni.showToast({
icon:"none",
title:"保存成功"
title:"保存成功",
success: () => {
setTimeout(()=>{
uni.navigateBack()
},500)
}
})
}else{
uni.showToast({
icon:"none",
title:res.data.msg,
})
}
})
......
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