From eb49240e16e3c1c2b560e975b9ff8fdd68bc760d Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Tue, 15 Dec 2020 11:35:53 +0800
Subject: [PATCH] 会员详情，个人中心设置
---
hive-app/pages/mine/knowledge.vue | 48 ++++++++
hive-app/static/images/member-detail3.png | 0
hive-app/App.vue | 3
hive-app/pages.json | 43 +++++++
hive-app/static/images/member-detail1.png | 0
hive-app/static/iconfont/iconfont.ttf | 0
hive-app/static/images/member-detail5.png | 0
hive-app/pages/member/detail.vue | 123 ++++++++++++++++++++
hive-app/static/images/member-detail7.png | 0
hive-app/pages/mine/setting.vue | 26 ++++
hive-app/static/images/member-detail2.png | 0
hive-app/common/styles/index.css | 14 ++
hive-app/pages/mine/index.vue | 11 +
hive-app/pages/member/index.vue | 7 +
hive-app/static/iconfont/iconfont.css | 50 ++++++++
hive-app/static/images/member-detail4.png | 0
hive-app/static/images/member-detail6.png | 0
17 files changed, 319 insertions(+), 6 deletions(-)
diff --git a/hive-app/App.vue b/hive-app/App.vue
index 3178bb5..674a43a 100644
--- a/hive-app/App.vue
+++ b/hive-app/App.vue
@@ -15,5 +15,6 @@
<style>
/*每个页面公共css */
@import url("./common/styles/index");
-@import url("//at.alicdn.com/t/font_2263696_mnf8362pruj.css");
+@import url("//at.alicdn.com/t/font_2263696_xlpr6igc2y.css");
+@import url("./static/iconfont/iconfont.css");
</style>
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index f1cbf2f..1bb59a7 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -132,6 +132,12 @@
.justify-between{
justify-content: space-between;
}
+.justify-center{
+ justify-content: center;
+}
+.justify-start{
+ justify-content: flex-start;
+}
.justify-around{
justify-content: space-around;
}
@@ -146,4 +152,12 @@
}
.right{
text-align: end;
+}
+
+/* 默认蓝色按钮 */
+.blue-btn{
+ background: #518EFF;
+ border: 0;
+ color: #FFFFFF;
+ font-size: 16px;
}
\ No newline at end of file
diff --git a/hive-app/pages.json b/hive-app/pages.json
index 319a879..f538bd4 100644
--- a/hive-app/pages.json
+++ b/hive-app/pages.json
@@ -36,6 +36,49 @@
"scrollIndicator": "none"
}
}
+ },
+ {
+ "path": "pages/member/detail",
+ "style": {
+ "navigationBarTitleText": "",
+ "navigationBarBackgroundColor":"#518EFF",
+ "app-plus":{
+ "scrollIndicator": "none",
+ "titleNView": {
+ "buttons": [
+ {
+ "text": "\ue696",
+ "fontSrc": "/static/iconfont/iconfont.ttf",
+ "fontSize": "18px",
+ "width":"25px",
+ "float":"right"
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "path": "pages/mine/setting",
+ "style": {
+ "navigationBarTitleText": "设置",
+ "navigationBarBackgroundColor":"#FFFFFF",
+ "navigationBarTextStyle":"black",
+ "app-plus":{
+ "scrollIndicator": "none"
+ }
+ }
+ },
+ {
+ "path": "pages/mine/knowledge",
+ "style": {
+ "navigationBarTitleText": "知识库",
+ "navigationBarBackgroundColor":"#FFFFFF",
+ "navigationBarTextStyle":"black",
+ "app-plus":{
+ "scrollIndicator": "none"
+ }
+ }
}
],
"globalStyle": {
diff --git a/hive-app/pages/member/detail.vue b/hive-app/pages/member/detail.vue
new file mode 100644
index 0000000..76eeab0
--- /dev/null
+++ b/hive-app/pages/member/detail.vue
@@ -0,0 +1,123 @@
+<template>
+ <!-- 会员详情 -->
+ <view>
+ <!-- #ifndef H5 -->
+ <view class="status_bar"></view>
+ <!-- #endif -->
+ <view class="header flex flex-v align-center">
+ <image class="header-img" src="../../static/images/head-img.jpg"></image>
+ <text class="font-18 white mt-5">333</text>
+ <text class="font-14 white mt-5">会员编号: 101010</text>
+ <text class="font-12 white mt-5">湖南 长沙 22</text>
+ <view class="flex align-center mt-10">
+ <view class="icon-box flex justify-center align-center mr-20">
+ <text class="icon iconfont icondianhua blue"></text>
+ </view>
+ <view class="icon-box flex justify-center align-center">
+ <text class="icon iconfont iconxinxiduanxinsixinduihua blue"></text>
+ </view>
+ </view>
+ </view>
+ <view class="content">
+ <view class="content-row flex justify-around mt-10">
+ <view class="flex flex-v align-center">
+ <text class="font-18 red">600.00</text>
+ <text class="font-14 mt-10">余额</text>
+ </view>
+ <view class="flex flex-v align-center">
+ <text class="font-18 green">600.00</text>
+ <text class="font-14 mt-10">赠送余额</text>
+ </view>
+ <view class="flex flex-v align-center">
+ <text class="font-18 blue">600.00</text>
+ <text class="font-14 mt-10">累计消费</text>
+ </view>
+ </view>
+ <view class="content-row mt-10">
+ <view class="flex">
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image>
+ <text class="font-14 mt-5">会员信息</text>
+ </view>
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image>
+ <text class="font-14 mt-5">项目/套餐</text>
+ </view>
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail3.png"></image>
+ <text class="font-14 mt-5">卡项</text>
+ </view>
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail4.png"></image>
+ <text class="font-14 mt-5">皮肤监测</text>
+ </view>
+ </view>
+ <view class="flex justify-start mt-20">
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
+ <text class="font-14 mt-5">消费记录</text>
+ </view>
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail6.png"></image>
+ <text class="font-14 mt-5">服务记录</text>
+ </view>
+ <view class="detail-item flex flex-v align-center justify-center">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image>
+ <text class="font-14 mt-5">跟进记录</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+</script>
+
+<style>
+ .status_bar{
+ background: #518EFF;
+ color: #FFFFFF;
+ }
+ .header{
+ background: #518EFF;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ padding: 15px;
+ }
+ .header-img{
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ }
+ .icon-box{
+ width: 28px;
+ height: 28px;
+ background: #FFFFFF;
+ border-radius: 50%;
+ }
+ .icon{
+ font-size: 18px;
+ }
+ .content{
+ padding: 0 10px;
+ }
+ .content-row{
+ border: 1px solid #EDEAF4;
+ background: #FFFFFF;
+ padding: 15px 0;
+ border-radius: 4px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ }
+ .detail-item{
+ width: 25%;
+ }
+ .detail-icon-box{
+ width: 32px;
+ height: 32px;
+ }
+ .detail-icon{
+ width: 32px;
+ height: 32px;
+ }
+</style>
diff --git a/hive-app/pages/member/index.vue b/hive-app/pages/member/index.vue
index 266205d..5066033 100644
--- a/hive-app/pages/member/index.vue
+++ b/hive-app/pages/member/index.vue
@@ -21,7 +21,7 @@
<text class="sort-tab-item">潜在客户</text>
<text class="sort-tab-item">潜在客户</text>
</view>
- <view class="flex justify-between">
+ <view class="flex justify-between" @click="toDetail">
<view class="flex-1 mr-10">
<view class="member-list flex align-center" v-for="(item, index) in 15">
<text class="first-name" :style="{background: caculateBgcolor(index)}">李</text>
@@ -58,6 +58,11 @@
methods:{
caculateBgcolor(index){
return this.colors[index%8];
+ },
+ toDetail(){
+ uni.navigateTo({
+ url:'./detail'
+ })
}
}
}
diff --git a/hive-app/pages/mine/index.vue b/hive-app/pages/mine/index.vue
index 6ab569a..8e360ed 100644
--- a/hive-app/pages/mine/index.vue
+++ b/hive-app/pages/mine/index.vue
@@ -5,7 +5,7 @@
<view class="status_bar"></view>
<!-- #endif -->
<view class="header">
- <view class="icon white iconfont iconshezhi right"></view>
+ <view class="icon white iconfont iconshezhi right" @click="linkTo('./setting')"></view>
<view class="flex align-center">
<image class="header-img ml-15" src="../../static/images/head-img.jpg"></image>
<view class="flex flex-v ml-20">
@@ -77,7 +77,7 @@
</view>
</view>
</view>
- <view class="flex align-center justify-between repository mt-20">
+ <view class="flex align-center justify-between repository mt-20" @click="linkTo('./knowledge')">
<view class="flex align-center">
<image class="title-img mr-10" src="../../static/images/mine2.png"></image>
<text>知识库</text>
@@ -117,7 +117,11 @@
}
},
methods: {
-
+ linkTo(val){
+ uni.navigateTo({
+ url:val
+ })
+ }
}
}
</script>
@@ -128,7 +132,6 @@
color: #FFFFFF;
}
.header{
- height: 100px;
background: #518EFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
diff --git a/hive-app/pages/mine/knowledge.vue b/hive-app/pages/mine/knowledge.vue
new file mode 100644
index 0000000..d4bc24a
--- /dev/null
+++ b/hive-app/pages/mine/knowledge.vue
@@ -0,0 +1,48 @@
+<template>
+ <!-- 知识库 -->
+ <view>
+ <scroll-view class="list-left" scroll-y>
+ <view v-for="(item,index) in list" @click="show(item)">
+ {{item.primaryTitle}}
+ <view v-for="sub in item.subTitle" v-show="item.isShow">
+ {{sub}}
+ </view>
+ </view>
+ </scroll-view>
+ <scroll-view class="list-right"></scroll-view>
+ </view>
+</template>
+
+<script>
+ export default{
+ data(){
+ return{
+ primaryTitle:['院装产品','美容套餐','美容客装','美容试装'],
+ subTitle:['院装产品','院装产品','院装产品','院装产品'],
+ list:[
+ {
+ primaryTitle:'院装产品',
+ subTitle:['院装产品','院装产品','院装产品','院装产品'],
+ isShow:false
+ },
+ {
+ primaryTitle:'美容套餐',
+ subTitle:['美容套餐','美容套餐','美容套餐','美容套餐'],
+ isShow:false
+ }
+ ],
+ }
+ },
+ methods:{
+ show(item){
+ item.isShow=!item.isShow
+ }
+ }
+ }
+</script>
+
+<style>
+ .list-left{
+ width: 100px;
+ }
+</style>
diff --git a/hive-app/pages/mine/setting.vue b/hive-app/pages/mine/setting.vue
new file mode 100644
index 0000000..f5aff33
--- /dev/null
+++ b/hive-app/pages/mine/setting.vue
@@ -0,0 +1,26 @@
+<template>
+ <!-- 设置 -->
+ <view class="container">
+ <!-- #ifndef H5 -->
+ <view class="status_bar"></view>
+ <!-- #endif -->
+ <view class="flex justify-between content-row mb-20">
+ <text class="font-16">修改密码</text>
+ <text class="iconfont iconarrow-backimg gray"></text>
+ </view>
+ <button class="blue-btn">退出登录</button>
+ </view>
+</template>
+
+<script>
+</script>
+
+<style>
+ .container:first-child{
+ border-top: 1px solid #ABB1CC;
+ }
+ .content-row{
+ padding: 10px 15px;
+ border-bottom: 1px solid #ABB1CC;
+ }
+</style>
diff --git a/hive-app/static/iconfont/iconfont.css b/hive-app/static/iconfont/iconfont.css
new file mode 100644
index 0000000..3105434
--- /dev/null
+++ b/hive-app/static/iconfont/iconfont.css
@@ -0,0 +1,50 @@
+@font-face {
+ font-family: 'iconfont'; /* project id 2263696 */
+ src: url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.eot');
+ src: url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.eot?#iefix') format('embedded-opentype'),
+ url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.woff2') format('woff2'),
+ url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.woff') format('woff'),
+ url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.ttf') format('truetype'),
+ url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.svg#iconfont') format('svg');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.iconarrow-backimg:before {
+ content: "\e601";
+}
+
+.iconshezhi:before {
+ content: "\e696";
+}
+
+.iconxiugai:before {
+ content: "\e602";
+}
+
+.iconjiantou:before {
+ content: "\e618";
+}
+
+.iconjiantouarrow486:before {
+ content: "\e6aa";
+}
+
+.iconsaomiao:before {
+ content: "\e60f";
+}
+
+.iconjiahao:before {
+ content: "\e600";
+}
+
+.iconsousuo:before {
+ content: "\e6d2";
+}
+
diff --git a/hive-app/static/iconfont/iconfont.ttf b/hive-app/static/iconfont/iconfont.ttf
new file mode 100644
index 0000000..0b5c625
--- /dev/null
+++ b/hive-app/static/iconfont/iconfont.ttf
Binary files differ
diff --git a/hive-app/static/images/member-detail1.png b/hive-app/static/images/member-detail1.png
new file mode 100644
index 0000000..0dfc176
--- /dev/null
+++ b/hive-app/static/images/member-detail1.png
Binary files differ
diff --git a/hive-app/static/images/member-detail2.png b/hive-app/static/images/member-detail2.png
new file mode 100644
index 0000000..22fb749
--- /dev/null
+++ b/hive-app/static/images/member-detail2.png
Binary files differ
diff --git a/hive-app/static/images/member-detail3.png b/hive-app/static/images/member-detail3.png
new file mode 100644
index 0000000..7aa896e
--- /dev/null
+++ b/hive-app/static/images/member-detail3.png
Binary files differ
diff --git a/hive-app/static/images/member-detail4.png b/hive-app/static/images/member-detail4.png
new file mode 100644
index 0000000..25842b0
--- /dev/null
+++ b/hive-app/static/images/member-detail4.png
Binary files differ
diff --git a/hive-app/static/images/member-detail5.png b/hive-app/static/images/member-detail5.png
new file mode 100644
index 0000000..9df49fb
--- /dev/null
+++ b/hive-app/static/images/member-detail5.png
Binary files differ
diff --git a/hive-app/static/images/member-detail6.png b/hive-app/static/images/member-detail6.png
new file mode 100644
index 0000000..ad2fde2
--- /dev/null
+++ b/hive-app/static/images/member-detail6.png
Binary files differ
diff --git a/hive-app/static/images/member-detail7.png b/hive-app/static/images/member-detail7.png
new file mode 100644
index 0000000..7efc8a7
--- /dev/null
+++ b/hive-app/static/images/member-detail7.png
Binary files differ
--
Gitblit v1.9.1