WXML:
<view class="form-item left-class" @click="hanleOpenWeek">
<view class="label">周時間</view>
<view class="mid-block">{{ info.weekTime | filterWeekTime }}</view>
<uni-icons class="icon" type="arrowright" color="#999999" size="20" />
</view>
// 模態框modal
<uni-popup ref="weekModal" type="bottom">
<view class="modal-content">
<view class="modal-head">選擇時間</view>
<view class="modal-body">
<block v-for="(item, index) in weekOptions" :key="item.id">
<view class="text-block">
<view class="title">
<view class="label" :class="{ 'label-active': preCheckList.includes(item.id) }">{{ item.label }}</view>
</view>
<uni-icons
class="icon"
size="32"
:type="preCheckList.includes(item.id) ? 'checkbox-filled' : 'circle'"
:color="preCheckList.includes(item.id) ? '#3B79FF' : '#BFBFBF'"
@click="handleWeekClick(item)"
/>
</view>
</block>
</view>
<view class="modal-foot">
<button class="uni-default-button btn" @click.stop="handleWeekConfirm">確定</button>
</view>
</view>
</uni-popup>
JS:
const weekOptions = [
{
id: '1',
label: '周一'
},
{
id: '2',
label: '周二'
},
{
id: '3',
label: '周三'
},
{
id: '4',
label: '周四'
},
{
id: '5',
label: '周五'
},
{
id: '6',
label: '周六'
},
{
id: '7',
label: '周日'
}
]
data () {
return {
info: {
weekOptions,
preCheckList: [],
weekTime: ['1', '2', '3', '4']
}
}
},
// 時間的過濾器---拿到的是['1','3','5','6']數組，需將其轉化成中文顯示
filters: {
filterWeekTime (arr) {
let result = []
weekOptions.forEach(item => {
if (arr.includes(item.id)) {
result.push(item.label)
}
})
return result.join('，') || '選擇周時間'
}
},
methods: {
// 打開modal
hanleOpenWeek () {
let { info } = this
//打開的時候選中狀態---此處必須為深拷貝
this.preCheckList = _.cloneDeep(info.weekTime)
this.$refs['weekModal'].open()
},
// modal的選中
handleWeekClick (item) {
let { preCheckList } = this
// 選擇中的時候如果有這個id，就刪除這一條，木有就添加
let idx = preCheckList.indexOf(item.id)
if (idx > -1) {
this.preCheckList.splice(idx, 1)
} else {
this.preCheckList.push(item.id)
}
},
// modal的確認
handleWeekConfirm () {
// 確認的時候需要進行排序
this.info.weekTime = this.preCheckList.sort()
this.$refs['weekModal'].close()
}
}