crm-mobile/pages_common/selectList/product.vue

<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>
			
      <wk-search-box @search="handleSearch" />
			
      <view class="list-scroll">
        <wk-scroll-view
          :status="listStatus"
          :refresh="false"
          class="list-scroll"
          @loadmore="getList()">
          <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">
            <template v-slot:default="{ scopeData }">
              <view>{{ scopeData.name }}</view>
              <view class="desc-text">
                {{ scopeData.categoryName }}
              </view>
            </template>
          </wk-select-list>
        </wk-scroll-view>
      </view>
			
      <!-- #ifdef MP-WEIXIN -->
      <view class="footer-btn-group">
        <button class="button" @click="handleConfirm">
          确定
        </button>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  import { GetSaleList } from 'API/crm/product'
  import { deepCopy } from '@/utils/lib.js'
	
  export default {
    name: 'ProductChoose',
    data() {
      return {
        listData: [],
        selectedList: [],
        defaultVal: [],
				
        listStatus: 'more',
        params: {
          page: 0,
          limit: 15,
          search: '',
          type: 4
        },
				
        typeObj: {
          labelField: 'name',
          valueField: 'productId'
        },
				
        routerQuery: {},
        bridge: {}
      }
    },
    computed: {
      navTitle() {
        return this.bridge.title || '选择产品'
      }
    },
    onLoad(options) {
      this.routerQuery = options || {}
      this.bridge = getApp().globalData.selectedValBridge.product || {}
      this.defaultVal = this.bridge.defaultVal || []
      this.handleChange(this.defaultVal)
      this.getList()
    },
    onUnload() {
      getApp().globalData.selectedValBridge = {}
    },
    methods: {
      /**
       * 获取选项列表
       */
      getList() {
        if (!this.$isEmpty(this.bridge.list)) {
          this.listData = this.bridge.list
          return
        }

        const otherParams = this.bridge.params || {} // 附加参数

        const request = this.bridge.request || GetSaleList
        if (!request) return
        this.params.page++
        this.listStatus = 'loading'
        request({
					...this.params,
					...otherParams
        }).then(res => {
          if (this.params.page === 1) {
            this.listData = []
          }
          console.log(res.list)
          this.listData = this.listData.concat(res.list)
          this.listStatus = res.lastPage ? 'noMore' : 'more'
        }).catch(() => {
          this.listStatus = 'more'
        })
      },
			
      /**
       * 搜索
       * @param {String} keyword
       */
      handleSearch(keyword = '') {
        this.params.search = keyword || ''
        this.params.page = 0
        this.getList()
      },
			
      /**
       * 保存记录选择的项
       * @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
        }
        uni.$emit('selected-product', 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;

			.desc-text {
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
</style>