From 04d87216bffd4c7d64359dfc2e4a1fab3311e798 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Thu, 17 Dec 2020 15:28:04 +0800
Subject: [PATCH] gx
---
/dev/null | 116 ------------
hive-app/App.vue | 2
hive-app/common/styles/index.css | 56 ++++++
hive-app/pages.json | 13 +
hive-app/pages/member/index.vue | 14
hive-app/pages/member/membershipCard.vue | 63 +++++++
hive-app/pages/member/detail.vue | 105 ++++++-----
hive-app/pages/member/editMember.vue | 152 ++++++++++++++++
8 files changed, 346 insertions(+), 175 deletions(-)
diff --git a/hive-app/App.vue b/hive-app/App.vue
index 426b262..0a867c4 100644
--- a/hive-app/App.vue
+++ b/hive-app/App.vue
@@ -16,5 +16,5 @@
/*每个页面公共css */
@import url("./common/styles/index");
@import url("./static/iconfont/iconfont.css");
-@import url("//at.alicdn.com/t/font_2263696_9yynz69zizb.css");
+@import url("//at.alicdn.com/t/font_2263696_x5h1n3w9z0r.css");
</style>
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index 629bb60..8beb434 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -129,6 +129,9 @@
.flex-v{
flex-direction: column;
}
+.flex-wrap{
+ flex-wrap: wrap;
+}
.align-center{
align-items: center;
}
@@ -166,6 +169,7 @@
border: 0;
color: #FFFFFF;
font-size: 16px;
+ line-height: 42px;
}
/* 蓝色边框白底按钮 */
@@ -174,4 +178,54 @@
border: 1px solid #518EFF;
color: #518EFF;
font-size: 16px;
-}
\ No newline at end of file
+ line-height: 42px;
+}
+
+/* 固定底部 */
+.sticky-footer{
+ position: fixed;
+ bottom: 15px;
+ left: 10px;
+ right: 10px;
+}
+
+/* 输入框 */
+.input-group-row{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 48px;
+ border-bottom: 1px solid #EDEAF4;
+ font-size: 14px;
+}
+.input-group-row .label{
+ padding-right: 10px;
+}
+.input-group-row .label .require{
+ color: #d20808;
+ padding-left: 4px;
+}
+.input-group-row input{
+ flex: 1;
+ font-size: 14px;
+ text-align: right;
+}
+.input-group-row .right-text{
+ flex: 1;
+ text-align: right;
+}
+.input-group-row .right-text .radio{
+ transform: scale(0.65);
+ margin-left: 10px;
+}
+.input-group-row .right-text .iconfont{
+ vertical-align: middle;
+ margin-left: 4px;
+}
+.input-group-row .right-text .tag{
+ background: #F2f2f2;
+ color: #333;
+ padding: 4px 8px;
+ margin-left: 8px;
+ border-radius: 2px;
+}
diff --git a/hive-app/pages.json b/hive-app/pages.json
index 4bcac46..dd16a64 100644
--- a/hive-app/pages.json
+++ b/hive-app/pages.json
@@ -29,7 +29,7 @@
}
},
{
- "path": "pages/member/addMember",
+ "path": "pages/member/editMember",
"style": {
"navigationBarTitleText": "新增会员",
"navigationBarBackgroundColor":"#FFFFFF",
@@ -40,6 +40,17 @@
}
},
{
+ "path": "pages/member/membershipCard",
+ "style": {
+ "navigationBarTitleText": "卡项",
+ "navigationBarBackgroundColor":"#FFFFFF",
+ "navigationBarTextStyle":"black",
+ "app-plus":{
+ "scrollIndicator": "none"
+ }
+ }
+ },
+ {
"path": "pages/mine/index",
"style": {
"transparentTitle": "always",
diff --git a/hive-app/pages/member/addMember.vue b/hive-app/pages/member/addMember.vue
deleted file mode 100644
index ac3d12f..0000000
--- a/hive-app/pages/member/addMember.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
- <view>
- <form @submit="add">
- <view class="input-group-row">
- <text class="label">会员姓名<text class="require">*</text></text>
- <input name="account" type="text" value="" placeholder="请输入会员姓名" placeholder-class='placeholder'/>
- </view>
- <view class="input-group-row">
- <text class="label">手机号码<text class="require">*</text></text>
- <input name="account" type="number" value="" placeholder="请输入手机号码" placeholder-class='placeholder'/>
- </view>
- <view class="input-group-row">
- <text class="label">性别<text class="require">*</text></text>
- <view class="radio-group">
- <radio-group @change="sexChange">
- <label><radio name="sex" value="1" color="#518EFF" class="radio" checked/>男</label>
- <label><radio name="sex" value="2" color="#518EFF" class="radio"/>女</label>
- </radio-group>
- </view>
- </view>
- <view class="input-group-row">
- <text class="label">生日</text>
- <view>
- <picker mode="date" @change="dateChange" :end="endDate">
- <view class="uni-input">{{birthday}}</view>
- </picker>
- </view>
- </view>
- <view class="input-group-row">
- <text class="label">省市区</text>
- <view @click="openAddres">
- {{regionText}}
- </view>
- </view>
- </form>
- <region ref="simpleAddress" @onConfirm="onConfirm" themeColor="#518EFF" cancelColor="#8c9fad"></region>
- </view>
-</template>
-
-<script>
- import region from '../../components/simple-address/simple-address.vue';
- export default{
- components:{
- region
- },
- data(){
- return {
- birthday: '1990-01-02',
- regionText: '321'
- }
- },
- computed: {
- endDate() {
- return this.getDate('end');
- }
- },
- methods:{
- add(){
-
- },
- sexChange(e){
- console.log(e)
- },
- dateChange(e){
- this.birthday = e.detail.value;
- console.log(e)
- },
- getDate(type) {
- const date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let day = date.getDate();
-
- if (type === 'start') {
- year = year - 70;
- }
- month = month > 9 ? month : '0' + month;;
- day = day > 9 ? day : '0' + day;
- return `${year}-${month}-${day}`;
- },
- openAddres(){
- this.$refs.simpleAddress.open();
- }
- }
- }
-</script>
-
-<style>
- .input-group-row{
- display: flex;
- justify-content: space-between;
- padding: 10px 10px;
- margin-bottom: 10px;
- border-bottom: 1px solid #EDEAF4;
- }
- .input-group-row .label{
- font-size: 15px;
- padding-right: 10px;
- }
- .input-group-row .label .require{
- color: #d20808;
- padding-left: 4px;
- }
- .input-group-row input{
- flex: 1;
- font-size: 15px;
- text-align: right;
- }
- .input-group-row .radio-group{
- text-align: right;
- }
- .input-group-row .radio-group .radio{
- transform: scale(0.8);
- margin-left: 10px;
- }
-</style>
diff --git a/hive-app/pages/member/detail.vue b/hive-app/pages/member/detail.vue
index 9c4d634..394ba15 100644
--- a/hive-app/pages/member/detail.vue
+++ b/hive-app/pages/member/detail.vue
@@ -6,72 +6,72 @@
<!-- #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-18 mt-5">333</text>
+ <text class="font-14 mt-5">会员编号: 101010</text>
<view class="flex align-center mt-5">
- <text class="font-12 white mr-10">{{this.eye==false?encryptAccount(15569216885):'15569216885'}}</text>
- <text class="icon iconfont white" :class="this.eye==false?'iconyanjing':'iconyanjing1'" @click="eyeSwitch"></text>
+ <text class="font-12 mr-10">{{this.eye==false?encryptAccount(15569216885):'15569216885'}}</text>
+ <text class="icon iconfont" :class="this.eye==false?'iconyanjing':'iconyanjing1'" @click="eyeSwitch"></text>
</view>
- <view class="flex align-center mt-10">
- <view class="icon-box flex justify-center align-center mr-20">
+ <view class="flex mt-10">
+ <view class="icon-box mr-20">
<text class="icon iconfont icondianhua blue"></text>
</view>
- <view class="icon-box flex justify-center align-center">
+ <view class="icon-box">
<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">
+ <view class="content-row flex justify-around">
+ <view class="center">
<text class="font-18 red">600.00</text>
- <text class="font-14 mt-10">余额</text>
+ <text class="font-14 mt-10 block">余额</text>
</view>
- <view class="flex flex-v align-center">
+ <view class="center">
<text class="font-18 green">600.00</text>
- <text class="font-14 mt-10">赠送余额</text>
+ <text class="font-14 mt-10 block">赠送余额</text>
</view>
- <view class="flex flex-v align-center">
+ <view class="center">
<text class="font-18 blue">600.00</text>
- <text class="font-14 mt-10">累计消费</text>
+ <text class="font-14 mt-10 block">累计消费</text>
</view>
</view>
- <view class="content-row mt-10">
- <view class="flex">
- <view class="detail-item flex flex-v align-center justify-center">
+ <view class="content-row flex flex-wrap">
+ <view class="detail-item">
+ <navigator url="./editMember" hover-class="none" >
<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">
+ </navigator>
+ </view>
+ <view class="detail-item">
+ <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">
+ <navigator url="./membershipCard" hover-class="none" >
<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>
+ </navigator>
</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 class="detail-item">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail4.png"></image>
+ <text class="font-14 mt-5">皮肤监测</text>
+ </view>
+ <view class="detail-item">
+ <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">
+ <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">
+ <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image>
+ <text class="font-14 mt-5">跟进记录</text>
</view>
</view>
</view>
- <view class="flex content-btn justify-around">
+ <view class="sticky-footer flex justify-between">
<button class="white-btn btn">开单</button>
<button class="blue-btn btn">预约</button>
</view>
@@ -107,6 +107,7 @@
}
.header{
background: #518EFF;
+ color: #FFFFFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 15px;
@@ -119,6 +120,8 @@
.icon-box{
width: 28px;
height: 28px;
+ line-height: 28px;
+ text-align: center;
background: #FFFFFF;
border-radius: 50%;
}
@@ -131,23 +134,27 @@
.content-row{
border: 1px solid #EDEAF4;
background: #FFFFFF;
+ margin-top: 10px;
padding: 15px 0;
border-radius: 4px;
box-shadow:0 6px 6px rgba(237,234,244,0.5);
}
.detail-item{
width: 25%;
+ margin: 10px 0;
+ text-align: center;
}
.detail-icon{
- width: 28px;
- height: 28px;
+ display: block;
+ width: 26px;
+ height: 26px;
+ margin: 0 auto;
}
- .content-btn{
- position: absolute;
- bottom: 15px;
- width: 100%;
+ .sticky-footer{
+ margin: 0 -8px;
}
.btn{
- width: 45%;
+ width: 100%;
+ margin: 0 8px;
}
</style>
diff --git a/hive-app/pages/member/editMember.vue b/hive-app/pages/member/editMember.vue
new file mode 100644
index 0000000..015989f
--- /dev/null
+++ b/hive-app/pages/member/editMember.vue
@@ -0,0 +1,152 @@
+<template>
+ <view class="container">
+ <form @submit="add">
+ <view class="input-group-row">
+ <text class="label">会员姓名<text class="require">*</text></text>
+ <input name="account" type="text" value="" placeholder="请填写会员姓名" placeholder-class='placeholder'/>
+ </view>
+ <view class="input-group-row">
+ <text class="label">手机号码<text class="require">*</text></text>
+ <input name="account" type="number" value="" placeholder="请填写手机号码" placeholder-class='placeholder'/>
+ </view>
+ <view class="input-group-row">
+ <text class="label">性别<text class="require">*</text></text>
+ <view class="right-text">
+ <radio-group @change="sexChange">
+ <label><radio name="sex" value="1" color="#518EFF" class="radio" checked/>男</label>
+ <label><radio name="sex" value="2" color="#518EFF" class="radio"/>女</label>
+ </radio-group>
+ </view>
+ </view>
+ <view class="input-group-row">
+ <text class="label">生日</text>
+ <view class="right-text">
+ <picker mode="date" @change="dateChange" :end="endDate">
+ <view>{{birthday}}</view>
+ </picker>
+ </view>
+ </view>
+ <view class="input-group-row">
+ <text class="label">省市区</text>
+ <view @click="openAddres" class="right-text">
+ <text v-if="regionText">{{regionText}}</text>
+ <text v-else class="gray">请选择省市区</text>
+ </view>
+ </view>
+ <view class="input-group-row">
+ <text class="label">详细地址</text>
+ <input name="account" type="text" value="" placeholder="请填写详细地址" placeholder-class='placeholder'/>
+ </view>
+ <view class="input-group-row">
+ <text class="label">到店途径</text>
+ <view class="right-text">
+ <picker mode="selector" :range="wayList" @change="wayChange">
+ <view>
+ {{way}}
+ <text class="iconfont iconjiantouarrow486 gray"></text>
+ </view>
+ </picker>
+ </view>
+ </view>
+ <view class="input-group-row">
+ <text class="label">推荐人</text>
+ <view class="right-text">
+ <picker mode="selector" :range="referrerList" @change="referrerChange">
+ <view>
+ {{referrer}}
+ <text class="iconfont iconjiantouarrow486 gray"></text>
+ </view>
+ </picker>
+ </view>
+ </view>
+ <view class="input-group-row">
+ <text class="label">备注</text>
+ <input name="account" type="text" value="" placeholder="请填写备注" placeholder-class='placeholder'/>
+ </view>
+ <view class="input-group-row">
+ <text class="label">标签</text>
+ <view class="right-text">
+ <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text>
+ <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text>
+ </view>
+ </view>
+ <button type="submit" class="blue-btn sticky-footer">保存</button>
+ </form>
+ <region ref="simpleAddress" @onConfirm="addressChange" themeColor="#518EFF" cancelColor="#8c9fad"></region>
+ </view>
+</template>
+
+<script>
+ import region from '../../components/simple-address/simple-address.vue';
+ export default{
+ components:{
+ region
+ },
+ data(){
+ return {
+ birthday: '1990-01-02',
+ regionText: '',
+ wayList: ['美团','户外广告'],
+ way: '美团',
+ referrerList: ['张三'],
+ referrer: '张三'
+ }
+ },
+ onLoad(options) {
+ if(options.id){
+ uni.setNavigationBarTitle({
+ title: '编辑会员'
+ });
+ }
+ },
+ computed: {
+ endDate() {
+ return this.getDate('end');
+ }
+ },
+ methods:{
+ add(){
+
+ },
+ sexChange(e){
+ console.log(e)
+ },
+ dateChange(e){
+ this.birthday = e.detail.value;
+ console.log(e)
+ },
+ getDate(type) {
+ const date = new Date();
+ let year = date.getFullYear();
+ let month = date.getMonth() + 1;
+ let day = date.getDate();
+
+ if (type === 'start') {
+ year = year - 70;
+ }
+ month = month > 9 ? month : '0' + month;;
+ day = day > 9 ? day : '0' + day;
+ return `${year}-${month}-${day}`;
+ },
+ openAddres(){
+ this.$refs.simpleAddress.open();
+ },
+ addressChange(e){
+ this.regionText = e.labelArr.join(' ');
+ },
+ wayChange(e){
+ this.way = this.wayList[e.detail.value];
+ },
+ referrerChange(e){
+ this.referrer = this.referrerList[e.detail.value];
+ }
+ }
+ }
+</script>
+
+<style>
+ .container{
+ padding: 10px 10px;
+ }
+
+</style>
diff --git a/hive-app/pages/member/index.vue b/hive-app/pages/member/index.vue
index 956ef98..6a4c5b1 100644
--- a/hive-app/pages/member/index.vue
+++ b/hive-app/pages/member/index.vue
@@ -30,8 +30,10 @@
</view>
<indexed-list></indexed-list>
</view>
- <view class="quick-entry" @click="addMember">
- <text class="iconfont iconjiahao"></text>
+ <view class="quick-entry">
+ <navigator url="./editMember" hover-class="navigator-hover">
+ <text class="iconfont iconjiahao"></text>
+ </navigator>
</view>
</view>
</template>
@@ -130,11 +132,6 @@
this.filterList = this.filter3;
this.filterType = 0;
}
- },
- addMember(){
- uni.navigateTo({
- url:'./addMember'
- })
}
}
}
@@ -187,4 +184,7 @@
.quick-entry .iconfont{
font-size: 24px;
}
+ .navigator-hover{
+ border-radius: 50%;
+ }
</style>
diff --git a/hive-app/pages/member/membershipCard.vue b/hive-app/pages/member/membershipCard.vue
new file mode 100644
index 0000000..6b5db92
--- /dev/null
+++ b/hive-app/pages/member/membershipCard.vue
@@ -0,0 +1,63 @@
+<template>
+ <view class="container">
+ <view class="card-item">
+ <view class="card-header">
+ <text class="name">会员卡</text>
+ <text>NO 23564</text>
+ </view>
+ <view class="card-content">
+ <text>
+ ¥ 5656789
+ </text>
+ </view>
+ <view class="card-footer">
+ <text>赠送金额 ¥ 5656</text>
+ <text>有效期：2025-10-20</text>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default{
+ components:{
+
+ },
+ data(){
+ return {
+
+ }
+ },
+ methods:{
+
+ }
+ }
+</script>
+
+<style>
+ .container{
+ padding: 10px 10px;
+ }
+ .card-item{
+ background: #F0AD4E;
+ color: #FFFFFF;
+ font-size: 14px;
+ padding: 12px 15px;
+ border-radius: 4px;
+ }
+ .card-header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .card-header .name{
+ font-size: 22px;
+ font-weight: bold;
+ }
+ .card-content{
+
+ }
+ .card-footer{
+
+ }
+</style>
--
Gitblit v1.9.1