|
|
|
@ -1,58 +1,170 @@ |
|
|
|
<template> |
|
|
|
<view class="authoeity-filter"> |
|
|
|
<view class="af-title">请选择您要筛选的权限</view> |
|
|
|
<view class="af-section"> |
|
|
|
<view class="as-tip"> |
|
|
|
<text>*</text> |
|
|
|
<text>请选择门店</text> |
|
|
|
<text>(多项选择)</text> |
|
|
|
<view class="af-content"> |
|
|
|
<view class="af-title">请选择您要筛选的权限</view> |
|
|
|
<view class="af-section"> |
|
|
|
<view class="as-tip"> |
|
|
|
<text>*</text> |
|
|
|
<text>请选择门店</text> |
|
|
|
<text>(多项选择)</text> |
|
|
|
</view> |
|
|
|
<view class="as-select" @click="showModal('store')"> |
|
|
|
<view v-if="isShowStoreModal || isShowMeunModal"></view> |
|
|
|
<input v-else placeholder="全部" v-model="selectedStoreTxt" disabled /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
<view class="as-tip"> |
|
|
|
<text>*</text> |
|
|
|
<text>请小程序权限</text> |
|
|
|
<text>(多项选择)</text> |
|
|
|
</view> |
|
|
|
<view class="as-select" @click="showModal('meun')"> |
|
|
|
<view v-if="isShowStoreModal || isShowMeunModal"></view> |
|
|
|
<input v-else placeholder="全部" v-model="selectedMeunTxt" disabled /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="as-select"> |
|
|
|
<input placeholder="全部" disabled /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="as-tip"> |
|
|
|
<text>*</text> |
|
|
|
<text>请小程序权限</text> |
|
|
|
<text>(多项选择)</text> |
|
|
|
<view class="af-btn" hover-class="hover-active" @click="confirmFilter">筛选</view> |
|
|
|
</view> |
|
|
|
<!-- 店铺权限列表 --> |
|
|
|
<view class="ox-dark-mask" v-if="isShowStoreModal" @click.prevent="closeModal"> |
|
|
|
<view class="af-select-modal" @click.stop="()=>false"> |
|
|
|
<scroll-view class="asm-list" scroll-y> |
|
|
|
<view class="al-item" v-for="(e,i) in storeList" :key="i" @click="storeSelect(i)"> |
|
|
|
<view :class="[e.isSelected?'active':'']">{{e.name}}</view> |
|
|
|
<image v-if="e.isSelected" mode="aspectFit" src="/static/images/icon/selected_987.png"></image> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<view class="asm-btn" hover-class="hover-active" @click.prevent="closeModal">关闭</view> |
|
|
|
</view> |
|
|
|
<view class="as-select"> |
|
|
|
<input placeholder="全部" disabled /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 小程序权限列表 --> |
|
|
|
<view class="ox-dark-mask" v-if="isShowMeunModal" @click.prevent="closeModal"> |
|
|
|
<view class="af-select-modal" @click.stop="()=>false"> |
|
|
|
<scroll-view class="asm-list" scroll-y> |
|
|
|
<view class="al-item" v-for="(e,i) in meunList" :key="i" @click="meunSelect(i)"> |
|
|
|
<view :class="[e.isSelected?'active':'']">{{e.name}}</view> |
|
|
|
<image v-if="e.isSelected" mode="aspectFit" src="/static/images/icon/selected_987.png"></image> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<view class="asm-btn" hover-class="hover-active" @click.prevent="closeModal">关闭</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="af-btn" hover-class="hover-active">筛选</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { API } from '../../../js/api' |
|
|
|
import { servers } from '../../../js/server' |
|
|
|
import { API } from '../../../js/api'; |
|
|
|
import { servers } from '../../../js/server'; |
|
|
|
import { mapGetters, mapState } from 'vuex'; |
|
|
|
import util from '../../../utils/util'; |
|
|
|
export default { |
|
|
|
computed: { |
|
|
|
...mapGetters(['permissionArr']), |
|
|
|
...mapState(['brandInfo']), |
|
|
|
selectedStoreTxt(){ |
|
|
|
let { storeList } = this; |
|
|
|
return storeList.filter(e=>e.isSelected).map(e=>e.name).join(',') || ''; |
|
|
|
}, |
|
|
|
selectedMeunTxt(){ |
|
|
|
let { meunList } = this; |
|
|
|
return meunList.filter(e=>e.isSelected).map(e=>e.name).join(',') || ''; |
|
|
|
} |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
storeList: [], |
|
|
|
meunList: [], |
|
|
|
isShowStoreModal: false, |
|
|
|
isShowMeunModal: false, |
|
|
|
curFilterInfo: { // 筛选条件 |
|
|
|
meun: '', // 小程序权限 |
|
|
|
store: '' // 店铺筛选 |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
onLoad(options){ |
|
|
|
console.log(util.jsonPar(options.filterInfo)); |
|
|
|
this.curFilterInfo = util.jsonPar(options.filterInfo); |
|
|
|
this.meunList = util.jsonPar(util.jsonStr(this.permissionArr)); |
|
|
|
this.getStoreList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getStoreList(brand_id=37){ |
|
|
|
confirmFilter(){ |
|
|
|
let { storeList, meunList } = this; |
|
|
|
let _query = {}; |
|
|
|
|
|
|
|
_query['store'] = storeList.filter(e=>e.isSelected).map(e=>e.id).join(','); |
|
|
|
|
|
|
|
_query['meun'] = meunList.filter(e=>e.isSelected).map(e=>e.key).join(','); |
|
|
|
|
|
|
|
util.previousPageFunction({ |
|
|
|
fnName: 'changeFilter', |
|
|
|
query:_query |
|
|
|
}) |
|
|
|
util.routeTo(); |
|
|
|
}, |
|
|
|
meunSelect(index){ |
|
|
|
let _meunList = util.jsonPar(util.jsonStr(this.meunList)); |
|
|
|
_meunList[index]['isSelected'] = !_meunList[index]['isSelected']; |
|
|
|
this.meunList = _meunList; |
|
|
|
}, |
|
|
|
storeSelect(index){ |
|
|
|
let _storeList = util.jsonPar(util.jsonStr(this.storeList)); |
|
|
|
_storeList[index]['isSelected'] = !_storeList[index]['isSelected']; |
|
|
|
this.storeList = _storeList; |
|
|
|
}, |
|
|
|
closeModal(){ |
|
|
|
this.isShowStoreModal = false; |
|
|
|
this.isShowMeunModal = false; |
|
|
|
}, |
|
|
|
showModal(type){ |
|
|
|
|
|
|
|
if(type == 'store'){ |
|
|
|
this.isShowStoreModal = true; |
|
|
|
this.isShowMeunModal = false; |
|
|
|
return |
|
|
|
} |
|
|
|
if(type == 'meun'){ |
|
|
|
this.isShowStoreModal = false; |
|
|
|
this.isShowMeunModal = true; |
|
|
|
return |
|
|
|
} |
|
|
|
}, |
|
|
|
formatSelected(){ |
|
|
|
let { curFilterInfo, storeList, meunList } = this; |
|
|
|
let _storeList = util.jsonPar(util.jsonStr(storeList)); |
|
|
|
let _meunList = util.jsonPar(util.jsonStr(meunList)); |
|
|
|
let _meuns = curFilterInfo.meun.split(',') || []; |
|
|
|
let _store = curFilterInfo.store.split(',') || []; |
|
|
|
this.storeList = _storeList.map(e=>{ |
|
|
|
e.isSelected = _store.some(ele=>e.id==ele); |
|
|
|
return e; |
|
|
|
}) |
|
|
|
this.meunList = _meunList.map(e=>{ |
|
|
|
e.isSelected = _meuns.some(ele=>e.key==ele); |
|
|
|
return e; |
|
|
|
}) |
|
|
|
}, |
|
|
|
getStoreList(){ |
|
|
|
let { brandInfo } = this; |
|
|
|
util.showLoad(); |
|
|
|
servers.get({ |
|
|
|
url: API.stadiumList, |
|
|
|
data: { |
|
|
|
brand_id, |
|
|
|
brand_id: brandInfo.brand.id, |
|
|
|
}, |
|
|
|
failMsg: '加载店铺列表失败！', |
|
|
|
|
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
util.hideLoad(); |
|
|
|
let _list = res.list || []; |
|
|
|
this.storeList = _list; |
|
|
|
this.$nextTick(_=>this.formatSelected()); |
|
|
|
|
|
|
|
}) |
|
|
|
.catch(util.hideLoad) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -60,68 +172,122 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "../../../style/public.scss"; |
|
|
|
.authoeity-filter{ |
|
|
|
padding: 62upx 24upx 0; |
|
|
|
.af-title{ |
|
|
|
margin-left: 18upx; |
|
|
|
margin-bottom: 68upx; |
|
|
|
line-height: 60upx; |
|
|
|
font-size: 44upx; |
|
|
|
color: #1a1a1a; |
|
|
|
.af-content{ |
|
|
|
padding: 62upx 24upx 0; |
|
|
|
.af-title{ |
|
|
|
margin-left: 18upx; |
|
|
|
margin-bottom: 68upx; |
|
|
|
line-height: 60upx; |
|
|
|
font-size: 44upx; |
|
|
|
color: #1a1a1a; |
|
|
|
} |
|
|
|
.af-section{ |
|
|
|
margin-bottom: 40upx; |
|
|
|
padding: 40upx 30upx 0; |
|
|
|
height: 738upx; |
|
|
|
border-radius: 10upx; |
|
|
|
background-color: #fff; |
|
|
|
.as-tip{ |
|
|
|
margin-bottom: 36upx; |
|
|
|
line-height: 40upx; |
|
|
|
font-size: 28upx; |
|
|
|
color: #1A1A1A; |
|
|
|
>text{ |
|
|
|
&:first-child{ |
|
|
|
color: #EA5061; |
|
|
|
} |
|
|
|
&:nth-child(3){ |
|
|
|
color: #9C9C9F; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
>picker{ |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.as-select{ |
|
|
|
padding-left: 20upx; |
|
|
|
padding-right: 34upx; |
|
|
|
margin-bottom: 60upx; |
|
|
|
height: 96upx; |
|
|
|
border-radius: 10upx; |
|
|
|
border: 2upx solid #d8d8d8; |
|
|
|
@include centerFlex(space-between); |
|
|
|
>image{ |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 14upx; |
|
|
|
width: 28upx; |
|
|
|
height: 28upx; |
|
|
|
transform: rotateZ(90deg); |
|
|
|
} |
|
|
|
>input{ |
|
|
|
flex-grow: 1; |
|
|
|
height: 100%; |
|
|
|
font-size: 32upx; |
|
|
|
color: #1a1a1a; |
|
|
|
} |
|
|
|
>view{ |
|
|
|
flex-grow: 1; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.af-btn{ |
|
|
|
height: 112upx; |
|
|
|
line-height: 112upx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 10upx; |
|
|
|
font-size: 32upx; |
|
|
|
color: #fff; |
|
|
|
background-color: $themeColor; |
|
|
|
} |
|
|
|
} |
|
|
|
.af-section{ |
|
|
|
margin-bottom: 40upx; |
|
|
|
padding: 40upx 30upx 0; |
|
|
|
height: 738upx; |
|
|
|
border-radius: 10upx; |
|
|
|
.af-select-modal{ |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
right: 0; |
|
|
|
width: 100%; |
|
|
|
background-color: #fff; |
|
|
|
.as-tip{ |
|
|
|
margin-bottom: 36upx; |
|
|
|
line-height: 40upx; |
|
|
|
font-size: 28upx; |
|
|
|
color: #1A1A1A; |
|
|
|
>text{ |
|
|
|
&:first-child{ |
|
|
|
color: #EA5061; |
|
|
|
padding-top: 20upx; |
|
|
|
padding-bottom: 0upx; |
|
|
|
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
.asm-list{ |
|
|
|
height: 600upx; |
|
|
|
.al-item{ |
|
|
|
margin-bottom: 20upx; |
|
|
|
padding: 20upx 24upx; |
|
|
|
@include centerFlex(space-between); |
|
|
|
>view{ |
|
|
|
flex-grow: 1; |
|
|
|
font-size: 32upx; |
|
|
|
color: #1a1a1a; |
|
|
|
line-height: 44upx; |
|
|
|
@include textHide(1); |
|
|
|
} |
|
|
|
.active{ |
|
|
|
color: $themeColor; |
|
|
|
} |
|
|
|
&:nth-child(3){ |
|
|
|
color: #9C9C9F; |
|
|
|
>image{ |
|
|
|
margin-left: 20upx; |
|
|
|
flex-shrink: 0; |
|
|
|
width: 30upx; |
|
|
|
height: 30upx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
>picker{ |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.as-select{ |
|
|
|
padding-left: 20upx; |
|
|
|
padding-right: 34upx; |
|
|
|
margin-bottom: 60upx; |
|
|
|
height: 96upx; |
|
|
|
.asm-btn{ |
|
|
|
margin: 20upx auto; |
|
|
|
height: 88upx; |
|
|
|
width: 702upx; |
|
|
|
line-height: 88upx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 10upx; |
|
|
|
border: 2upx solid #d8d8d8; |
|
|
|
@include centerFlex(space-between); |
|
|
|
>image{ |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 14upx; |
|
|
|
width: 28upx; |
|
|
|
height: 28upx; |
|
|
|
transform: rotateZ(90deg); |
|
|
|
} |
|
|
|
>input{ |
|
|
|
flex-grow: 1; |
|
|
|
height: 100%; |
|
|
|
font-size: 32upx; |
|
|
|
color: #1a1a1a; |
|
|
|
} |
|
|
|
background-color: $themeColor; |
|
|
|
font-size: 32upx; |
|
|
|
color: #fff; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
} |
|
|
|
.af-btn{ |
|
|
|
height: 112upx; |
|
|
|
line-height: 112upx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 10upx; |
|
|
|
font-size: 32upx; |
|
|
|
color: #fff; |
|
|
|
background-color: $themeColor; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
