Skip to content

S
self-support
Commit 5e3dae5d authored by Facius's avatar Facius
Browse files
Options

我的页面

parent c612caba
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 73 deletions
src/pages.json
View file @ 5e3dae5d
......@@ -253,6 +253,15 @@
"navigationBarTitleText": "配件押金",
"enablePullDownRefresh": false
}
},
{
"path": "setting/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/index",
......
src/pages/index/mine.vue
View file @ 5e3dae5d
......@@ -5,24 +5,32 @@
<text class="title-view">我的</text>
</u-navbar>
<view class="mine-content">
<view class="header-view">
<view class="head-image">
<image :style="headImageStyle" :src="headImageUrl"></image>
</view>
<view class="header-content">
<view class="name-view" @click="handleClickName">{{name || "点击登录"}}</view>
<view :class="['tel-view', {'active': mobile}]" @click="handleClickTel">
<text>{{telTip}}</text>
<u-icon class="tel-arrow-icon" name="arrow-up-fill"></u-icon>
<view class="header-view">
<view class="header-left-view">
<view class="head-image">
<image :style="headImageStyle" :src="headImageUrl"></image>
</view>
</view>
<view v-if="showSuperButton" class="super-button"><u-button@click="handleSuperButton">切换用户</u-button></view>
<view class="header-content">
<view class="name-view" @click="handleClickName">{{name || "点击登录"}}</view>
<view :class="['tel-view', {'active': mobile}]" @click="$u.throttle(handleClickTel, 500)">
<text>{{telTip}}</text>
<u-icon class="tel-arrow-icon" name="arrow-up-fill"></u-icon>
</view>
</view>
<view v-if="showSuperButton" class="super-button"><u-button@click="$u.throttle(handleSuperButton, 500)">切换用户</u-button></view>
</view>
<view class="header-right-view" @click="$u.throttle(handleClickSetting, 500)">
<image :src="shezhiImage" class="right-image-view"></image>
<text>设置</text>
</view>
</view>
<view class="ware-house-view">
<view class="ware-house-title">我的仓库</view>
<view class="ware-house-title">仓配功能</view>
<view class="ware-house-content">
<view v-for="(item, index) in warehouseItems" :key="index" class="ware-house-content-item" @click="handleClick(item.pathName)">
<image :src="item.icon" class="ware-house-image"></image>
<view class="ware-house-image">
<image :src="item.icon" :style="item.imageStyle"></image>
</view>
<view>{{item.title}}</view>
</view>
</view>
......@@ -133,25 +141,29 @@
pathName: 'warehouse/index',
title: '我的配件',
value: '',
icon: process.uniEnv.qn_base_url + 'cangku.png',
icon: process.uniEnv.qn_base_url + 'wodepeijian.png',
imageStyle: 'width:60rpx;height:54rpx'
},
{
pathName: 'warehouse/spare',
title: '我的备件',
value: '',
icon: process.uniEnv.qn_base_url + 'cangku.png',
icon: process.uniEnv.qn_base_url + 'wodebeijian.png',
imageStyle: 'width:60rpx;height:54rpx'
},
{
pathName: 'warehouse/return',
title: '返件信息',
value: '',
icon: process.uniEnv.qn_base_url + 'cangku.png',
icon: process.uniEnv.qn_base_url + 'fanjianxinxi.png',
imageStyle: 'width:56rpx;height:54rpx'
},
{
pathName: 'warehouse/records',
title: '出入库记录',
value: '',
icon: process.uniEnv.qn_base_url + 'cangku.png',
icon: process.uniEnv.qn_base_url + 'churuku.png',
imageStyle: 'width:50rpx;height:54rpx'
},
]
},
......@@ -162,10 +174,13 @@
return this.avatar || this.placeholderImage
},
headImageStyle() {
return this.avatar ? 'width:136rpx; height:136rpx;border-radius:68rpx' : 'width:144rpx; height:144rpx;border-radius:72rpx'
return this.avatar ? 'width:112rpx; height:112rpx;border-radius:56rpx' : 'width:120rpx; height:120rpx;border-radius:60rpx'
},
headSize() {
return this.avatar ? 136 : 144
return this.avatar ? 112 : 120
},
shezhiImage() {
return process.uniEnv.qn_base_url + 'shezhi.png'
}
},
async onLoad() {
......@@ -179,7 +194,7 @@
this.getData()
}
}
this.wodebeijingImage = this.qnFile('wodebeijing.png')
this.wodebeijingImage = this.qnFile('wodebeijing-jb.png')
this.placeholderImage = this.qnFile('touxiang.png')
},
methods: {
......@@ -198,6 +213,9 @@
} else {
this.$u.route({url: "pages/login/index"})
}
},
handleClickSetting() {
this.$u.route({url: 'pages/mine/setting/index'})
},
handleClickName() {
if(this.vuex_token && this.settled) {
......@@ -252,70 +270,89 @@
.mine-content {
position: relative;
padding: 30rpx;
padding: 26rpx 30rpx 30rpx 20rpx;
.header-view {
display: flex;
align-items: center;
margin-bottom: 60rpx;
.head-image {
width: 144rpx;
height: 144rpx;
background-color: #FFFFFF;
border-radius: 72rpx;
display: flex;
align-items: center;
justify-content: center;
}
.header-content {
color: #FFFFFF;
z-index: 1;
margin-left: 24rpx;
.name-view {
font-size: 44rpx;
font-weight: bold;
margin-bottom: 14rpx;
margin-top: 6rpx;
}
.tel-view {
background-color: #FFFFFF;
border-radius: 26rpx;
color: #2272FF;
width: 180rpx;
height: 52rpx;
font-size: 20rpx;
display: flex;
align-items: center;
justify-content: center;
&.active {
color: #FFFFFF;
border: 2rpx solid #FFFFFF;
background-color: #2272FF;
}
.tel-arrow-icon {
transform: rotate(90deg);
margin-left: 6rpx;
}
}
align-items: flex-start;
justify-content: space-between;
margin-bottom: 60rpx;
.header-left-view {
display: flex;
align-items: center;
.head-image {
width: 120rpx;
height: 120rpx;
background-color: #FFFFFF;
border-radius: 56rpx;
display: flex;
align-items: center;
justify-content: center;
}
.header-content {
color: #FFFFFF;
z-index: 1;
margin-left: 24rpx;
.name-view {
font-size: 40rpx;
font-weight: bold;
margin-bottom: 6rpx;
margin-top: -4rpx;
}
.tel-view {
background-color: #FFFFFF;
border-radius: 26rpx;
color: #2272FF;
width: 180rpx;
height: 52rpx;
font-size: 20rpx;
display: flex;
align-items: center;
justify-content: center;
&.active {
color: #FFFFFF;
border: 2rpx solid #FFFFFF;
background-color: #2272FF;
}
.tel-arrow-icon {
transform: rotate(90deg);
margin-left: 6rpx;
}
}
}
.super-button {
margin-left: 20rpx;
}
}
.super-button {
margin-left: 20rpx;
.header-right-view {
display: flex;
justify-content: flex-end;
align-items: center;
color: #FFFFFF;
margin-right: 4rpx;
font-size: 26rpx;
margin-top: -26rpx;
.right-image-view {
width: 34rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
}
.ware-house-view {
background-color: #FFFFFF;
border-radius: 12rpx;
padding: 30rpx;
padding: 30rpx 30rpx 40rpx 30rpx;
height: 240rpx;
.ware-house-title {
color: #333333;
font-weight: bold;
font-size: 32rpx;
margin-bottom: 12rpx;
margin-bottom: 30rpx;
}
.ware-house-content {
display: flex;
......@@ -324,11 +361,17 @@
.ware-house-content-item {
color: #333333;
font-size: 26rpx;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.ware-house-image {
width: 60rpx;
height: 60rpx;
margin-bottom: 12rpx;
margin-bottom: 14rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
......
src/pages/mine/setting/index.vue 0 → 100644
View file @ 5e3dae5d
<template>
<!-- 设置 -->
<view class="setting-view">
<u-navbar back-icon-color="#333333" background="#FFFFFF" title="设置" titleColor="#333333"
:border-bottom="false" title-bold></u-navbar>
<view class="list-view">
<u-cell-group :border="false">
<view v-for="(item, index) in items" :key="index">
<u-cell-item :value="item.value" :border-bottom="false" @click="handleClick(item.pathName)">
<image slot="icon" :src="item.icon" :style="item.imageStyle"></image>
<view slot="title" class="item-title">{{item.title}}</view>
<view slot="value" class="item-value">{{value}}</view>
</u-cell-item>
</view>
</u-cell-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
computed: {
items() {
return [
{
pathName: 'about',
title: '当前版本',
value: process.uniEnv.version,
icon: process.uniEnv.qn_base_url + 'version.png',
imageStyle: 'width:32rpx;height:32rpx'
}
]
}
},
onLoad() {
getApp().trackPage('设置')
},
methods: {
handleClick(path) {
if(this.vuex_token) {
if (path === 'about') {
getApp().updateApp(1)
return
}
this.$u.route({
url: 'pages/mine/' + path + '/index'
})
} else {
this.$u.route({url: "pages/login/index"})
}
},
}
};
</script>
<style lang="scss" scoped>
.setting-view {
padding-bottom: 44px;
height: 100vh;
display: flex;
flex-direction: column;
background-color: #F4F5F7;
.list-view {
height: 100%;
margin-top: 30rpx;
.item-title {
font-size: 32rpx;
color: #333333;
margin-left: 16rpx;
line-height: 32rpx;
}
.item-value {
font-size: 26rpx;
color: #999999;
}
.line-view {
height: 2rpx;
background-color: #F4F5F7;
margin: 30rpx;
}
}
}
</style>
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