123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <template>
- <view class="uni-app">
- <view class="status-bar" />
- <view class="main-container">
- <wk-nav-bar :title="navTitle">
- <!-- #ifndef MP-WEIXIN -->
- <button class="button white-btn" @click="handleConfirm">
- 确定
- </button>
- <!-- #endif -->
- </wk-nav-bar>
- <view class="list-scroll">
- <wk-select-list
- v-if="listData.length > 0"
- v-model="defaultVal"
- :list="listData"
- :label-field="typeObj.labelField"
- :value-field="typeObj.valueField"
- :max="bridge.maxlength"
- @change="handleChange" />
- </view>
- <!-- #ifdef MP-WEIXIN -->
- <view class="footer-btn-group">
- <button class="button" @click="handleConfirm">
- 确定
- </button>
- </view>
- <!-- #endif -->
- </view>
- </view>
- </template>
- <script>
- import { deepCopy } from '@/utils/lib.js'
- export default {
- name: 'OptionsChoose',
- data() {
- return {
- listData: [],
- selectedList: [],
- defaultVal: [],
- typeObj: {
- labelField: 'label',
- valueField: 'value'
- },
- routerQuery: {},
- bridge: {},
- clickConfirm: false
- }
- },
- computed: {
- navTitle() {
- return this.bridge.title || '选择'
- },
- // hidenSearch() { // 是否隐藏搜索框
- // return this.bridge.hidenSearch || false
- // }
- },
- onLoad(options) {
- this.routerQuery = options || {}
- this.bridge = getApp().globalData.selectedValBridge.options || {}
- this.defaultVal = this.bridge.defaultVal || []
- this.handleChange(this.defaultVal)
- this.getList()
- },
- onUnload() {
- getApp().globalData.selectedValBridge = {}
- },
- methods: {
- /**
- * 获取选项列表
- */
- getList() {
- if (this.bridge.config) {
- this.typeObj = {
- labelField: this.bridge.config.labelField || 'label',
- valueField: this.bridge.config.valueField || 'value'
- }
- }
- if (!this.$isEmpty(this.bridge.list)) {
- this.listData = this.bridge.list
- return
- }
- const otherParams = this.bridge.params || {} // 附加参数
- const params = {
- // search: '',
- ...otherParams
- }
- const request = this.bridge.request || null
- if (!request) return
- request(params).then(res => {
- this.listData = res.hasOwnProperty('list') ? res.list : res
- }).catch()
- },
- /**
- * 保存记录选择的项
- * @param {Object} data
- */
- handleChange(data) {
- this.selectedList = data
- },
- /**
- * 确认选择,通知上一级页面,已经选择
- */
- handleConfirm() {
- const data = {
- guid: this.bridge.guid,
- bridge: this.bridge,
- data: this.selectedList
- }
- if (this.bridge.config && this.bridge.config.checkFn) {
- const res = this.bridge.config.checkFn(data)
- if (!res) return
- }
- this.clickConfirm = true
- uni.$emit('selected-options', data)
- this.$Router.navigateBack()
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .main-container {
- display: flex;
- flex-direction: column;
- overflow: hidden;
- .list-scroll {
- flex: 1;
- overflow: auto;
- padding-bottom: 20rpx;
- margin-top: 20rpx;
- }
- }
- </style>
|