From 4b80c98ef5fda8d6358778f2efe8bb35cb20ccf9 Mon Sep 17 00:00:00 2001 From: queenwuli <942534046@qq.com> Date: Fri, 15 Jan 2021 16:18:21 +0800 Subject: [PATCH] gx --- hive-app/pages/member/index.vue | 81 +++++++++++++++++++++++++++++++--------- 1 files changed, 62 insertions(+), 19 deletions(-) diff --git a/hive-app/pages/member/index.vue b/hive-app/pages/member/index.vue index 760503e..c0b5f98 100644 --- a/hive-app/pages/member/index.vue +++ b/hive-app/pages/member/index.vue @@ -1,30 +1,36 @@ <template> <view class="container"> - <!-- #ifndef H5 --> - <view class="status_bar"></view> - <!-- #endif --> - <search-bar @confirm="search"></search-bar> - <view class="sort-wrap"> - <view @click="showFilterCustom(1)"> - <text>{{filterText}}</text> - <text class="iconfont iconjiantouarrow486 gray"></text> - </view> - <view @click="showFilterCustom(2)"> - <text>筛选</text> - <text class="iconfont iconshaixuan gray"></text> + + <view class="sticky-header"> + <search-bar @confirm="search" :focus="isFocus" class="mt-10"></search-bar> + <view class="sort-wrap"> + <view @click="showFilterCustom(1)"> + <text>{{filterText}}</text> + <text class="iconfont iconjiantouarrow486 gray"></text> + </view> + <view @click="showFilterCustom(2)"> + <text>筛选</text> + <text class="iconfont iconshaixuan gray"></text> + </view> </view> </view> <filter-dropdown ref="filterDropdownEl" :list="filterList" :filterKey="filterKeys" :type="filterType" @confirm="confirmFilter" @reset="resetFilter"></filter-dropdown> - <view class="flex justify-between"> + <view class="content flex justify-between"> <view class="flex-1 mr-10"> <navigator :url="'./detail?id='+item.id" hover-class="none" class="member-list" v-for="(item, index) in list"> - <text class="first-name" :style="{background: caculateBgcolor(index)}">{{item.vipName | formatName}}</text> + <template> + <image v-if="item.photo" src="item.photo" class="avatar"></image> + <text v-else class="first-name" :style="{background: caculateBgcolor(index)}">{{item.vipName | formatName}}</text> + </template> <view class="flex-1 flex align-center justify-between member-list-con"> <view class="flex flex-v"> - <text>{{item.vipName}}</text> - <text class="font-13 gray mt-5">{{$utils.encryptAccount(item.phone)}}</text> + <text class="mb-10"> + <text>{{item.vipName}}</text> + <text class="vip-level" v-if="item.vipLevel">{{item.vipLevel}}</text> + </text> + <text class="font-13 gray">{{$utils.encryptAccount(item.phone)}}</text> </view> - <view> + <view class="member-list--con-right"> <text class="blue">到店{{item.arriveCnt || 0}}次</text> <text class="iconfont iconarrow-backimg light-gray"></text> </view> @@ -54,6 +60,7 @@ }, data() { return { + isFocus: false, colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'], filterType: 1, filterList: [], @@ -159,8 +166,12 @@ this.loadMemberType() this.loadMemberList() }, + onShow() { + this.isFocus = getApp().globalData.isFocus + }, onHide(){ this.$refs.filterDropdownEl.hide(); + getApp().globalData.isFocus = false; }, methods:{ caculateBgcolor(index){ @@ -179,6 +190,7 @@ // 搜索 search(val){ + this.$refs.filterDropdownEl.hide(); this.queryKey = val; this.loadMemberList(); }, @@ -218,7 +230,7 @@ queryKey: this.queryKey, sort: this.sort }, this.filterKeys) - this.$httpUtils.request('/api/vip/findVipInfoList', parma, 'POST').then((res) => { + this.$httpUtils.request('/api/vip/findVipInfoList', parma, 'POST', {isShowLoad: true}).then((res) => { if(res.status == 200){ this.list = res.rows; } else { @@ -243,7 +255,15 @@ <style scoped> .container{ - padding: 10px 10px 0; + padding: var(--status-bar-height) 10px 0; + } + .sticky-header{ + position: fixed; + top: 0; + left: 0; + right: 0; + padding: var(--status-bar-height) 10px 0; + background: #FFFFFF; } .sort-wrap{ display: flex; @@ -255,6 +275,15 @@ .sort-wrap .iconfont{ font-size: 14px; padding-left: 4px; + } + .content{ + padding-top: 92px + } + .avatar{ + display: inline-block; + width: 38px; + height: 38px; + border-radius: 50%; } .first-name{ display: inline-block; @@ -276,6 +305,20 @@ padding: 15px 0 15px 5px; border-bottom: 1px solid #EDEAF4; } + .member-list--con-right{ + width: 90px; + flex: 0 0 90px; + text-align: right; + } + .member-list .vip-level{ + border: 1px solid #666; + margin-left: 10px; + font-size: 12px; + border-radius: 12px; + padding: 2px 12px; + color: #666666; + word-break: keep-all; + } .quick-entry{ position: fixed; bottom: 80px; -- Gitblit v1.9.1