123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496 |
- <template>
- <view class="gui-sel-load-list">
- <view @tap.stop="show">
- <slot :selData="selData" :selId="selData.id">
- <text v-if="maxCounts==1">{{selData&&selData.label?selData.label:placeholder}}</text>
- <block v-else>
- <text v-for="(item, index) in selData" :key="index">{{index>0?', ':''}}{{item.label}}</text>
- <text v-if="!selData || selData.length<=0">{{placeholder}}</text>
- </block>
- </slot>
- </view>
- <tui-bottom-popup class="page-popup" :title="title" :dotColor="dotColor" :show="visible"
- backgroundColor="#ffffff" @close="pickerCancel">
- <view class="pf-picker-cnt" @touchmove.stop.prevent>
- <view class="padding-30 pt-20 pb-20" v-if="searchKey">
- <uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索" cancelButton="none"
- @confirm="search" />
- </view>
- <scroll-view style="height: 50vh;" scroll-y @scrolltolower="loadApiData">
- <tui-load-list ref="list" @change="changeData" :limit="maxCounts==1?20:1000" :postData="parPostData"
- :apiUrl="apiUrl">
- <block v-if="maxCounts==1">
- <radio-group @change="radioChange">
- <label
- class="df ai-center pt-24 pb-24 ml-30 uni-border-bottom font-26 uni-color-darkgrey"
- v-for="(item, index) in listData" :key="index">
- <view>
- <radio style="transform:scale(0.8)" :value="item.id" :color="dotColor"
- :checked="String(myvalue) === String(item.id)" />
- </view>
- <view class="ml-10">{{item.label}}</view>
- </label>
- </radio-group>
- </block>
- <block v-else>
- <checkbox-group @change="checkboxChange">
- <label
- class="df ai-center pt-24 pb-24 ml-30 uni-border-bottom font-26 uni-color-darkgrey"
- v-for="(item, index) in listData" :key="index">
- <view>
- <checkbox style="transform:scale(0.8)" :value="item.id" :color="dotColor"
- :checked="checkboxHas(item.id)" />
- </view>
- <view class="ml-10">{{item.label}}</view>
- </label>
- </checkbox-group>
- </block>
- </tui-load-list>
- </scroll-view>
- <view class="submit-frame">
- <view class="btn-frame">
- <view style="background:#f4f4f4;" v-if="!notClear" class="flex uni-tab__cart-button-right"
- @click="clearData">
- <text style="color:#333333;" class="uni-tab__cart-button-right-text">清除</text>
- </view>
- <view style="background:#f4f4f4;" v-else class="flex uni-tab__cart-button-right"
- @click="pickerCancel">
- <text style="color:#333333;" class="uni-tab__cart-button-right-text">取消</text>
- </view>
- <view style="background:#007aff;flex:3;" class="flex uni-tab__cart-button-right"
- @click="returndata">
- <text style="color:#ffffff;" class="uni-tab__cart-button-right-text">确认</text>
- </view>
- <!-- <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="clearData"
- @buttonClick="buttonClick" /> -->
- </view>
- </view>
- </view>
- </tui-bottom-popup>
- </view>
- </template>
- <script>
- let App = getApp()
- import mixinsPage from "@/common/mixins-model.js"
- export default {
- mixins: [mixinsPage],
- components: {},
- data() {
- return {
- datas: {
- years: [],
- months: [],
- hours: [],
- minutes: [],
- seconds: []
- },
- listData: [],
- _selData: {},
- selData: {},
- myvalue: '',
- parPostData: null,
- visible: false
- }
- },
- props: {
- title: {
- type: String,
- default: "选择行业"
- },
- dotColor: {
- type: String,
- default: '#2979ff'
- },
- notClear: {
- type: Boolean,
- default: false
- },
- disabled: {
- type: Boolean,
- default: false
- },
- // 占位符
- placeholder: {
- type: String,
- default: "无"
- },
- apiUrl: {
- type: String,
- default: ""
- },
- itemsKey: {
- type: String,
- default: "records"
- },
- postData: {
- type: Object,
- default: null
- },
- searchKey: {
- type: String,
- default: ""
- },
- keyLabel: {
- type: String,
- default: "name"
- },
- keyId: {
- type: String,
- default: "id"
- },
- initlist: {
- type: [Array],
- default: () => {
- return []
- }
- },
- list: {
- type: [Array],
- default: () => {
- return []
- }
- },
- maxCounts: {
- type: [Number, String],
- default: 1
- },
- value: {
- type: [Number, String, Array],
- default: ""
- }
- },
- watch: {
- value(val) {
- // console.log('=========>变化', val)
- this.myvalue = val;
- this.init()
- },
- postData: {
- handler: function() {
- if (this.apiUrl && JSON.stringify(this.parPostData) !== JSON.stringify(this.postData)) {
- this.parPostData = this.postData;
- }
- },
- deep: true
- },
- list(val) {
- this.initData()
- }
- },
- created() {
- this.appData = App.globalData ? App.globalData : getApp().globalData;
- this.parPostData = this.postData;
- this.initvalue();
- this.initData();
- },
- methods: {
- initvalue() {
- if (this.maxCounts == 1) {
- this.myvalue = this.value;
- } else {
- if (!this.value) {
- this.myvalue = []
- } else if (this.$api.isString(this.value)) {
- this.myvalue = String(this.value).split(',')
- } else {
- this.myvalue = this.value;
- }
- /* this.value.map(item => {
- this.$set(item, 'label', item[this.keyLabel])
- this.$set(item, 'id', item[this.keyId])
- return item
- }) */
- }
- },
- clearData() {
- if (this.maxCounts == 1) {
- this.selData = {
- id: '',
- label: ''
- }
- this.$emit("change", null);
- this.$emit("input", '');
- } else {
- this.selData = [];
- this.$emit("change", []);
- this.$emit("input", []);
- }
- this.pickerCancel();
- },
- buttonClick(index) {
- if (index == 1) {
- // console.log('确认', e)
- this.returndata()
- } else {
- // console.log('取消', e)
- this.pickerCancel()
- }
- },
- loadData() {
- // 默认的初始函数
- },
- initData() {
- if (this.apiUrl) {
- return false;
- } else if (this.list && this.list.length > 0) {
- this.listData = this.list.map(item => {
- this.$set(item, 'label', item[this.keyLabel])
- this.$set(item, 'id', item[this.keyId])
- return item
- })
- this.init()
- }
- },
- returndata() {
- if (!this.listData || this.listData.length <= 0) {
- this.$api.toast("没有可选择的数据项")
- return false
- }
- if (this.maxCounts == 1) {
- if (this._selData) {
- this.selData = Object.assign({}, this._selData)
- this.$emit("input", this.selData.id)
- this.$emit("change", this.selData)
- } else {
- this.$api.toast("请点击选择数据项")
- return false
- }
- } else {
- if (this.maxCounts > 1 && this._selData.length > this.maxCounts) {
- this.$api.toast("选项不能超过:" + this.maxCounts + "个!")
- return false
- }
- // console.log('当前选择数据:', this._selData)
- if (this._selData && this._selData.length > 0) {
- this.selData = [].concat(this._selData)
- this.$emit("input", this.selData.map(item => {
- return item.id
- }))
- this.$emit("change", this.selData)
- } else {
- this.selData = []
- this.$emit("input", [])
- this.$emit("change", [])
- }
- }
- this.visible = false;
- },
- checkboxChange(e) {
- const myvalue = e.detail.value;
- const id = [];
- const label = [];
- const data = this.listData.filter(item => {
- return myvalue.some(id => {
- return String(id) == String(item.id)
- })
- })
- this.myvalue = myvalue
- this._selData = [].concat(data)
- },
- radioChange(evt) {
- this.myvalue = evt.detail.value
- const data = this.listData.find(item => {
- return String(item.id) == String(this.myvalue)
- })
- this._selData = Object.assign({}, data)
- // console.log(this.selData)
- },
- loadApiData() {
- if (this.$refs.list) {
- this.$refs.list.loadData().then(res => {}).catch(res => {});
- }
- },
- search(res) {
- const keys = res.value
- this.$set(this.parPostData, this.searchKey, keys)
- },
- changeData(data) {
- var list = []
- if (data && data.list) {
- list = data.list
- }
- const listData = list.map((item, index) => {
- const items = Object.assign({}, item, {
- label: item[this.keyLabel],
- id: item[this.keyId]
- })
- return items
- });
- // console.log(listData)
- this.listData = this.initlist.concat(listData)
- this.init()
- },
- init() {
- if (!this.listData || this.listData.length <= 0) {
- // this.myvalue = '';
- this._selData = null;
- return false
- }
- if (this.maxCounts == 1) {
- this._selData = null;
- this.listData.forEach((item, index) => {
- if (String(this.myvalue) == String(item.id)) {
- this.myvalue = item.id
- this._selData = item
- // this.$emit("change", this.selData)
- }
- })
- this.selData = Object.assign({}, this._selData)
- } else {
- this._selData = this.listData.filter(item => {
- const hasvalue = this.myvalue ? this.myvalue.some(id => {
- return String(item.id) == String(id)
- }) : false
- if (hasvalue) {
- return true
- } else {
- return false
- }
- })
- // console.log(this.myvalue, '==========', this._selData)
- this.selData = [].concat(this._selData)
- }
- },
- checkboxHas(id) {
- if (!this.myvalue || this.myvalue.length <= 0) {
- return false
- }
- // console.log('======this.myvalue', this.myvalue)
- return this.myvalue ? this.myvalue.some(item => {
- return String(item) == String(id)
- }) : false
- },
- //显示
- show() {
- if (this.disabled) {
- return false
- }
- this.initvalue()
- this.visible = true;
- },
- //点击取消
- pickerCancel() {
- this.visible = false;
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .submit-frame {
- background-color: #ffffff;
- padding: 24rpx 30rpx;
- box-shadow: 0 0 12rpx 12rpx rgba(0, 0, 0, 0.04);
- .btn-frame {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex: 1;
- flex-direction: row;
- border-radius: 88rpx;
- overflow: hidden;
- }
- .flex {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- }
- .uni-tab__cart-button-right {
- height: 88rpx;
- /* #ifndef APP-NVUE */
- display: flex;
- flex-direction: column;
- /* #endif */
- flex: 2;
- justify-content: center;
- align-items: center;
- /* #ifdef H5 */
- cursor: pointer;
- /* #endif */
- }
- .uni-tab__cart-button-right-text {
- font-size: 14px;
- color: #fff;
- }
- .uni-tab__cart-button-right:active {
- opacity: 0.7;
- }
- }
- .gui-sel-load-list {
- overflow: hidden;
- .pf-picker-hd {
- display: flex;
- padding: 30rpx;
- background-color: #fff;
- position: relative;
- text-align: center;
- font-size: 34rpx;
- justify-content: space-between;
- &:after {
- content: ' ';
- position: absolute;
- left: 0;
- bottom: 0;
- right: 0;
- height: 1rpx;
- z-index: 1;
- // border-bottom: 1rpx solid #e5e5e5;
- background-color: #e5e5e5;
- transform-origin: 0 100%;
- transform: scaleY(0.5);
- }
- }
- .item {
- text-align: center;
- line-height: 80rpx;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 32rpx;
- }
- .pf-picker-view {
- width: 100%;
- height: 600rpx;
- overflow: hidden;
- background-color: rgba(255, 255, 255, 1);
- z-index: 666;
- }
- .pf-picker-btn {
- font-size: 32rpx;
- color: #888888;
- }
- .one-picker-view {
- height: 100%;
- }
- }
- .uni-border-bottom {
- position: relative;
- }
- .uni-border-bottom::after {
- content: ' ';
- position: absolute;
- left: 64rpx;
- bottom: 0;
- right: 0;
- height: 1rpx;
- z-index: 1;
- background-color: #e5e5e5;
- transform-origin: 0 100%;
- transform: scaleY(0.5);
- }
- </style>
|