|
@@ -1,78 +1,60 @@
|
|
|
<template>
|
|
|
- <!-- <uni-check-list :listData="list" types="checkbox" @ok="chooseOk" :showArrow="false">
|
|
|
- </uni-check-list> -->
|
|
|
- <view class="store-all">
|
|
|
- <view class="uni-list">
|
|
|
- <checkbox-group @change="checkboxChange" class="checkbox-group">
|
|
|
- <label v-for="item in items" :key="item.value" >
|
|
|
- <view class="checkbox-item">
|
|
|
- <view class="item-name">{{item.name}}</view>
|
|
|
- <view>
|
|
|
- <checkbox :value="item.value" :checked="item.checked" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </label>
|
|
|
- </checkbox-group>
|
|
|
- </view>
|
|
|
- <!-- 提交 -->
|
|
|
- <view class="kp-ok" @click="submit">
|
|
|
- 提交
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
+ <!-- @rightClick 只有存在右边部分的情况下才使用,
|
|
|
+ 右边默认为空,可以使用slot="right" 自定义右边内容
|
|
|
+ @ok 是单选或多选最终返回的结果
|
|
|
+ types 类型 radio或checkbox
|
|
|
+ titleKeys 标题对应的字段名称key,默认是name
|
|
|
+ listData 是数据
|
|
|
+ showArrow 是否显示右边箭头
|
|
|
+ backValue 设置返回的数据是idArr [id,id,...] 或 objArr [obj,obj,...]
|
|
|
+ defValue 设置已选择的数据,格式和backValue 一致
|
|
|
+ checkIconPositon 选择图标显示左边还是右边 left or right
|
|
|
+ -->
|
|
|
+ <uni-check-list
|
|
|
+ :listData="list"
|
|
|
+ checkIconPositon="right"
|
|
|
+ :showArrow="false"
|
|
|
+ :defValue="value"
|
|
|
+ types="checkbox"
|
|
|
+ backValue="objArr"
|
|
|
+ @ok="chooseOk">
|
|
|
+ </uni-check-list>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {findStoreList} from '@/api/store'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- items: [{
|
|
|
- value: 'USA',
|
|
|
- name: '美国'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'CHN',
|
|
|
- name: '中国',
|
|
|
- checked: 'true'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'BRA',
|
|
|
- name: '巴西'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'JPN',
|
|
|
- name: '日本'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'ENG',
|
|
|
- name: '英国'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'FRA',
|
|
|
- name: '法国'
|
|
|
- }
|
|
|
- ]
|
|
|
+ list: [],
|
|
|
+ value: [],
|
|
|
}
|
|
|
},
|
|
|
+ onLoad(opts) {
|
|
|
+ this.value = opts.storesList&&JSON.parse(opts.storesList)
|
|
|
+ // 查询门店
|
|
|
+ findStoreList({}).then(res=>{
|
|
|
+ console.log(res.data)
|
|
|
+ if(res.status == 200){
|
|
|
+ this.list = res.data || []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
methods: {
|
|
|
- // 改变checkbox的选中状态
|
|
|
- checkboxChange(e) {
|
|
|
- var items = this.items,
|
|
|
- values = e.detail.value;
|
|
|
- for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
|
- const item = items[i]
|
|
|
- if(values.includes(item.value)){
|
|
|
- this.$set(item,'checked',true)
|
|
|
- }else{
|
|
|
- this.$set(item,'checked',false)
|
|
|
- }
|
|
|
- console.log(item,'--------------')
|
|
|
+ // 选中门店,item 返回的是数组
|
|
|
+ chooseOk(item) {
|
|
|
+ console.log(item)
|
|
|
+ if(item.length==0){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title:'请选择考评门店'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ //关闭当前页面,这里处理数据逻辑
|
|
|
+ uni.$emit("selKpStores",item)
|
|
|
+ uni.navigateBack()
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
- submit(){
|
|
|
- console.log('-------tijiao')
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -81,32 +63,4 @@
|
|
|
page{
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .store-all{
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .uni-list{
|
|
|
- width: 100%;
|
|
|
- flex-grow: 1;
|
|
|
- overflow: auto;
|
|
|
- .checkbox-item{
|
|
|
- width:100%;
|
|
|
- padding: 15upx 30upx;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 15upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .kp-ok{
|
|
|
- text-align: center;
|
|
|
- padding: 26upx;
|
|
|
- background: #55aaff;
|
|
|
- color: #fff;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
</style>
|