hive-app/common/styles/index.css | ●●●●● patch | view | raw | blame | history | |
hive-app/pages.json | ●●●●● patch | view | raw | blame | history | |
hive-app/pages/member/addMember.vue | ●●●●● patch | view | raw | blame | history | |
hive-app/pages/member/detail.vue | ●●●●● patch | view | raw | blame | history | |
hive-app/pages/member/editMember.vue | ●●●●● patch | view | raw | blame | history | |
hive-app/pages/member/index.vue | ●●●●● patch | view | raw | blame | history | |
hive-app/pages/member/membershipCard.vue | ●●●●● patch | view | raw | blame | history |
hive-app/common/styles/index.css
@@ -135,6 +135,9 @@ .flex-v{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .align-left{ align-items: flex-start; } @@ -174,15 +177,16 @@ background: #518EFF; border: 0; color: #FFFFFF; font-size: 14px; font-size: 16px; line-height: 42px; } /* 蓝色边框白底按钮 */ .white-btn{ background: #FFFFFF; border: 1px solid #518EFF; color: #518EFF; font-size: 14px; font-size: 16px; line-height: 42px; } /* 蓝色圆形加减按钮 */ .blue-btn-circle{ @@ -195,3 +199,54 @@ background: #518EFF; color: #FFFFFF; } /* 固定底部 */ .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; font-size: 14px; } 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", hive-app/pages/member/addMember.vue
File was deleted 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> hive-app/pages/member/editMember.vue
New file @@ -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> 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> @@ -131,11 +133,6 @@ this.filterList = this.filter3; this.filterType = 0; } }, addMember(){ uni.navigateTo({ url:'./addMember' }) } } } @@ -188,4 +185,7 @@ .quick-entry .iconfont{ font-size: 24px; } .navigator-hover{ border-radius: 50%; } </style> hive-app/pages/member/membershipCard.vue
New file @@ -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>