|  |  | 
 |  |  | <template> | 
 |  |  |    <view class="container"> | 
 |  |  |       <view class="code"> | 
 |  |  |          <uni-search-bar :focus="searchFocus" v-model="searchValue"  @input="searchInput()" ma | 
 |  |  |             maxlength="500" ancel="cancel" @clear="clear" placeholder="输入 / 扫描商品"> | 
 |  |  |          </uni-search-bar> | 
 |  |  |       </view> | 
 |  |  |       <view class="list" v-for="(item,i) in dataList"> | 
 |  |  |          <!-- 左侧 --> | 
 |  |  |          <view class="list-left"> | 
 |  |  |             <!-- 左上 --> | 
 |  |  |             <view class="list-left-top"> | 
 |  |  |                <view style="font-weight: bold;">工作号{{item.wrkNo}}</view> | 
 |  |  |                <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;"> | 
 |  |  |                   <text style="flex: 1;">工作状态</text> | 
 |  |  |                   <text>{{item.wrkSts$}}</text> | 
 |  |  |                </view> | 
 |  |  |                <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;"> | 
 |  |  |                   <text style="flex: 1;">入出库类型</text> | 
 |  |  |                   <text>{{item.ioType$}}</text> | 
 |  |  |                </view> | 
 |  |  |                <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;"> | 
 |  |  |                   <text style="flex: 1;">优先级</text> | 
 |  |  |                   <text>{{item.ioPri}}</text> | 
 |  |  |                </view> | 
 |  |  |                <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;"> | 
 |  |  |                   <text style="flex: 1;">源库位</text> | 
 |  |  |                   <text>{{item.sourceLocNo}}</text> | 
 |  |  |                </view> | 
 |  |  |                <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;"> | 
 |  |  |                   <text style="flex: 1;">目标库位</text> | 
 |  |  |                   <text>{{item.locNo}}</text> | 
 |  |  |                </view> | 
 |  |  |                <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;"> | 
 |  |  |                   <text style="flex: 1;">料箱码</text> | 
 |  |  |                   <text>{{item.barcode}}</text> | 
 |  |  |                </view> | 
 |  |  |             </view> | 
 |  |  |             <!-- 左下 --> | 
 |  |  |             <view class="list-left-bottom"> | 
 |  |  |                <button size="mini" @click="getWrkDetlList(item.wrkNo)">明细</button> | 
 |  |  |                <button size="mini">完成</button> | 
 |  |  |                <button size="mini">取消</button> | 
 |  |  |             </view> | 
 |  |  |          <!-- <uni-search-bar :focus="searchValueFocus" v-model="searchValue"  | 
 |  |  |             maxlength="500" ancel="cancel" @confirm="searchValueInput2()" @clear="clear" placeholder="输入 / 扫描 订单号"> | 
 |  |  |          </uni-search-bar> --> | 
 |  |  |          <view class="code-title"> | 
 |  |  |             <view></view> | 
 |  |  |             <view style="width: 100%;text-align: center;margin: 16rpx 0;">{{searchValue}} 总数量:- {{total}} -</view> | 
 |  |  |             <view style="width: 100rpx;margin: 16rpx 0;" @click="filter()">筛选</view> | 
 |  |  |          </view> | 
 |  |  |          <!-- 右侧 --> | 
 |  |  |          <!-- <view class="list-right"></view> --> | 
 |  |  |       </view> | 
 |  |  |       <view style="height: 200rpx;"></view> | 
 |  |  | 		 | 
 |  |  |       <view class="list list-font-color" :class="orderDetl.color" v-for="(orderDetl,index) in dataList" :key="index"> | 
 |  |  |          <view class="list-left"> | 
 |  |  |             <view class="detl-threeCode">{{orderDetl.wrkNo}}</view> | 
 |  |  |             <view>工作时间:{{orderDetl.ioTime$}}</view> | 
 |  |  |             <view>工作类型:{{orderDetl.ioType$}}</view> | 
 |  |  |             <view>工作状况:{{orderDetl.wrkSts$}}</view> | 
 |  |  |             <view>源库位:{{orderDetl.sourceLocNo}}</view> | 
 |  |  |             <view>目标库位:{{orderDetl.locNo}}</view> | 
 |  |  |             <view>货架码:{{orderDetl.barcode}}</view> | 
 |  |  |          </view> | 
 |  |  |          <view class="list-right" @click="opt(orderDetl)"> | 
 |  |  |             <uni-icons type="bars" size="25"  color="#fff"></uni-icons> | 
 |  |  |          </view> | 
 |  |  |       </view> | 
 |  |  | 		 | 
 |  |  | 		 | 
 |  |  |       <!-- 垫高 --> | 
 |  |  |       <view style="height: 340rpx;text-align: center;color: #b9b9b9;"> | 
 |  |  |          - 已经到底了 - | 
 |  |  |       </view> | 
 |  |  |       <!-- 弹窗 --> | 
 |  |  |       <view> | 
 |  |  |          <uni-popup ref="addItem" type="dialog"> | 
 |  |  |             <view class="popup"> | 
 |  |  |                <!-- 标题 --> | 
 |  |  |                <view class="title">入库数量</view> | 
 |  |  |                <view class="popup-item"> | 
 |  |  |                   <uni-number-box :value="count" :step='1' :max="9999999" color="#747474" @change="changeValue" /> | 
 |  |  |                </view> | 
 |  |  |                <view class="btn"> | 
 |  |  |                   <view class="btn-left" @click="addClose">取消</view> | 
 |  |  |                   <view class="btn-right" @click="addConfirm()">添加</view> | 
 |  |  |                </view> | 
 |  |  |             </view> | 
 |  |  |          </uni-popup> | 
 |  |  |       </view> | 
 |  |  |       <!-- 筛选弹窗 --> | 
 |  |  |       <view> | 
 |  |  |          <uni-popup ref="filter" type="dialog"> | 
 |  |  |             <view class="filter-popup"> | 
 |  |  |                <!-- 标题 --> | 
 |  |  |                <view class="title">筛选</view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>工作号:</view> | 
 |  |  |                      <input type="text" v-model="wrk_no"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>工作类型:</view> | 
 |  |  |                      <input type="text" v-model="io_type"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>工作状态:</view> | 
 |  |  |                      <input type="text" v-model="wrk_sts"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>源库位:</view> | 
 |  |  |                      <input type="text" v-model="source_loc_no"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>目标库位:</view> | 
 |  |  |                      <input type="text" v-model="loc_no"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>货架码:</view> | 
 |  |  |                      <input type="text" v-model="barcode"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="popup-item" style="background-color: #dfdfdf;"> | 
 |  |  |                   <view class="item-cl"> | 
 |  |  |                      <view>目标楼层:</view> | 
 |  |  |                      <input type="text" v-model="crn_no"> | 
 |  |  |                   </view> | 
 |  |  |                </view> | 
 |  |  |                <view class="btn filter-btn"> | 
 |  |  |                   <view class="btn-left" @click="filterClose">重置</view> | 
 |  |  |                   <view class="btn-right" @click="filterConfirm()">确认</view> | 
 |  |  |                </view> | 
 |  |  |             </view> | 
 |  |  |          </uni-popup> | 
 |  |  |       </view> | 
 |  |  |       <!-- 操作弹窗 --> | 
 |  |  |       <view> | 
 |  |  |          <uni-popup ref="option" type="dialog"> | 
 |  |  |             <view class="filter-popup" style="height: 50vh;"> | 
 |  |  |                <!-- 标题 --> | 
 |  |  |                <view class="title">操作</view> | 
 |  |  |                <view style="display: flex;flex-wrap: wrap;"> | 
 |  |  |                   <button size="mini" type="primary" @click="handControlWrkMast('1')" >完成</button> | 
 |  |  |                   <button size="mini" type="warn" @click="handControlWrkMast('2')">取消(AGV)</button> | 
 |  |  |                   <button size="mini" @click="handControlWrkMast('5')">取消</button> | 
 |  |  |                </view> | 
 |  |  | 					 | 
 |  |  |                <!-- <button size="mini">更改调拨方式</button> --> | 
 |  |  |             </view> | 
 |  |  |          </uni-popup> | 
 |  |  |       </view> | 
 |  |  |    </view> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  |    export default { | 
 |  |  |       data() { | 
 |  |  |       data(){ | 
 |  |  |          return { | 
 |  |  |             baseUrl: '', | 
 |  |  |             token: '', | 
 |  |  |             searchValueFocus: true, | 
 |  |  |             searchValue: '', | 
 |  |  |             searchFocus: true, | 
 |  |  |             dataList: [] | 
 |  |  |             wrk_no: '', | 
 |  |  |             barcode: '', | 
 |  |  |             wrk_sts: '', | 
 |  |  |             crn_no: '', | 
 |  |  |             source_loc_no: '', | 
 |  |  |             loc_no: '', | 
 |  |  |             io_type: '', | 
 |  |  |             total: '', | 
 |  |  |             dataList: [], | 
 |  |  |             orderCarList: [], | 
 |  |  |             data: { | 
 |  |  |                curr: 1, | 
 |  |  |                limit: 100, | 
 |  |  |                wrk_no: '', | 
 |  |  |                barcode: '', | 
 |  |  |                wrk_sts: '', | 
 |  |  |                crn_no: '', | 
 |  |  |                source_loc_no: '', | 
 |  |  |                loc_no: '', | 
 |  |  |                io_type: '' | 
 |  |  |             }, | 
 |  |  |             index: 0, | 
 |  |  |             count: 0, | 
 |  |  |             mask: false, | 
 |  |  |             wrkNo: '' | 
 |  |  | 				 | 
 |  |  |          } | 
 |  |  |       }, | 
 |  |  |       onShow() { | 
 |  |  |       // 下拉刷新 | 
 |  |  |       onReachBottom() { | 
 |  |  |          this.status = 'more'; | 
 |  |  |          this.getOrderDetlList(this.searchValue,10); | 
 |  |  |       }, | 
 |  |  |       onLoad() { | 
 |  |  |          this.baseUrl = uni.getStorageSync('baseUrl'); | 
 |  |  |          this.token = uni.getStorageSync('token'); | 
 |  |  |          this.oldDataList = [...this.dataList] | 
 |  |  |          this.getWrkMastList() | 
 |  |  |          this.searchValue = uni.getStorageSync('bcpThreeCode'); | 
 |  |  |          this.getOrderDetlList(this.searchValue,10) | 
 |  |  |          console.log("onLoad"); | 
 |  |  |       }, | 
 |  |  |       onShow() { | 
 |  |  |          console.log(uni.getStorageSync('pakinOrderCar')); | 
 |  |  |       }, | 
 |  |  |       onHide() { | 
 |  |  |          uni.setStorageSync('pakinOrderCar', this.orderCarList); | 
 |  |  |       }, | 
 |  |  |       methods: { | 
 |  |  |          // 搜索框输入 | 
 |  |  |          searchInput() { | 
 |  |  | 				 | 
 |  |  |          }, | 
 |  |  |          // 重置搜索框 | 
 |  |  |          clear() { | 
 |  |  | 				 | 
 |  |  |          }, | 
 |  |  |          // 获取工作列表 | 
 |  |  |          getWrkMastList() { | 
 |  |  |          getOrderDetlList(threeCode,limit) { | 
 |  |  |             uni.showLoading({}) | 
 |  |  |             let _this = this | 
 |  |  |             _this.dataList = [] | 
 |  |  |             _this.mask = true | 
 |  |  |             _this.data.wrk_no = threeCode | 
 |  |  |             _this.data.limit = limit | 
 |  |  |             uni.request({ | 
 |  |  |                url: `${_this.baseUrl}/agv/wrkMast/list/auth`, | 
 |  |  |                header: {'token': uni.getStorageSync('token')}, | 
 |  |  |                data: { | 
 |  |  |                   curr: 1, | 
 |  |  |                   limit: 1000, | 
 |  |  |                }, | 
 |  |  |                data: _this.data, | 
 |  |  |                method: 'GET', | 
 |  |  |                success(res) { | 
 |  |  |                   uni.hideLoading() | 
 |  |  |                   res = res.data | 
 |  |  |                   if (res.code === 200) { | 
 |  |  |                      _this.dataList = res.data.records | 
 |  |  |                   }  | 
 |  |  |                      for (let k of res.data.records) { | 
 |  |  |                         if ([21, 22, 201].includes(k.wrkSts)) { | 
 |  |  |                            k['color'] = 'order-sts-start' | 
 |  |  |                         } else if ([205,206].includes(k.wrkSts)) { | 
 |  |  |                            k['color'] = 'order-sts-end' | 
 |  |  |                         } else { | 
 |  |  |                            k['color'] = 'order-sts-working' | 
 |  |  |                         } | 
 |  |  |                      } | 
 |  |  |                      let list = res.data.records | 
 |  |  |                      _this.dataList =  _this.dataList.concat(list); | 
 |  |  |                      _this.data.curr = _this.data.curr + 1 | 
 |  |  |                      // _this.dataList = res.data.records | 
 |  |  |                      _this.total = res.data.total | 
 |  |  |                      _this.mask = false | 
 |  |  |                   } else if (res.code == 403) { | 
 |  |  |                      uni.showToast({ title: res.msg, icon: "error", position: 'top' }) | 
 |  |  |                      setTimeout(() => { uni.reLaunch({ url: '../../login/login' }); }, 1000); | 
 |  |  |                   } else { | 
 |  |  |                      uni.showToast({ title: res.msg, icon: "error", position: 'top' }) | 
 |  |  |                   } | 
 |  |  |                } | 
 |  |  |             }) | 
 |  |  |          }, | 
 |  |  |          // 获取工作明细 | 
 |  |  |          getWrkDetlList(e) { | 
 |  |  |          searchValueInput2() { | 
 |  |  |             this.dataList = [] | 
 |  |  |             this.data.curr = 1 | 
 |  |  |             uni.setStorageSync('bcpThreeCode', this.searchValue); | 
 |  |  |             if (this.searchValue.length == 0) { | 
 |  |  |                this.getOrderDetlList(this.searchValue,10) | 
 |  |  |             } else { | 
 |  |  |                this.getOrderDetlList(this.searchValue,10) | 
 |  |  |             } | 
 |  |  | 				 | 
 |  |  |          }, | 
 |  |  |          clear() { | 
 |  |  |             this.dataList = [] | 
 |  |  |             this.data.curr = 1 | 
 |  |  |             setTimeout(()=> { | 
 |  |  |                this.getOrderDetlList(this.searchValue,10) | 
 |  |  |             },300) | 
 |  |  |          }, | 
 |  |  |          // 添加入库商品至 待组托列表 | 
 |  |  |          opt(orderDetl) { | 
 |  |  |             this.wrkNo = orderDetl.wrkNo | 
 |  |  |             this.$refs.option.open('bottom') | 
 |  |  |          }, | 
 |  |  |          addClose() { | 
 |  |  |             this.$refs.addItem.close() | 
 |  |  |             this.count = 0 | 
 |  |  |          }, | 
 |  |  |          addConfirm() { | 
 |  |  |             // if (this.count == 0) { | 
 |  |  |             //    uni.showToast({ title: '入库数量不合法!', icon: "none", position: 'top' }) | 
 |  |  |             //    return | 
 |  |  |             // } | 
 |  |  |             this.dataList[this.index]['used'] = true | 
 |  |  |             this.dataList[this.index]['pakinQty'] = this.count | 
 |  |  |             this.orderCarList.push(this.dataList[this.index]) | 
 |  |  |             this.index = 0 | 
 |  |  |             this.count = 0 | 
 |  |  |             this.$refs.addItem.close() | 
 |  |  |          }, | 
 |  |  |          // 点击前往 待组托列表 | 
 |  |  |          orderCar() { | 
 |  |  |             let _this = this | 
 |  |  |             if (_this.orderCarList.length === 0) { | 
 |  |  |                uni.showToast({ title: '请添加入库商品!', icon: "none", position: 'top' }) | 
 |  |  |                return | 
 |  |  |             } | 
 |  |  |             uni.navigateTo({ | 
 |  |  |                url: "./wrkDetl", | 
 |  |  |                success: function(res) { | 
 |  |  |                   // 通过eventChannel向被打开页面传送数据   向另外一个页面传递值的 | 
 |  |  |                url: '../order/orderCar', | 
 |  |  |                success(res) { | 
 |  |  |                   res.eventChannel.emit('item', { | 
 |  |  |                      item: e | 
 |  |  |                      item: _this.orderCarList | 
 |  |  |                   }) | 
 |  |  |                }, | 
 |  |  |                events: { | 
 |  |  |                   // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据  另外一个页面传过来的 | 
 |  |  |                   acceptDataFromOpenedPage: function(data) { | 
 |  |  |                      // _this.matnr = data.data | 
 |  |  |                      _this.input(_this.matnr) | 
 |  |  |                   }, | 
 |  |  |                      console.log(data); | 
 |  |  |                      if (data.data == 1) { | 
 |  |  |                         _this.orderCarList = [] | 
 |  |  |                         _this.getOrderDetlList(uni.getStorageSync('bcpThreeCode'),10) | 
 |  |  |                      } | 
 |  |  |                   } | 
 |  |  |                } | 
 |  |  |             }) | 
 |  |  |          }, | 
 |  |  |          changeValue(value) { | 
 |  |  |             this.count = value | 
 |  |  |          }, | 
 |  |  |          // 筛选 | 
 |  |  |          filter() { | 
 |  |  |             this.$refs.filter.open('bottom') | 
 |  |  |          }, | 
 |  |  |          filterConfirm() { | 
 |  |  |             this.dataList = [] | 
 |  |  |             this.data.curr = 1 | 
 |  |  |             this.data.wrk_no = this.wrk_no | 
 |  |  |             this.data.barcode = this.barcode | 
 |  |  |             this.data.wrk_sts = this.wrk_sts | 
 |  |  |             this.data.crn_no = this.crn_no | 
 |  |  |             this.data.source_loc_no = this.source_loc_no | 
 |  |  |             this.data.loc_no = this.loc_no | 
 |  |  |             this.data.io_type = this.io_type | 
 |  |  |             this.getOrderDetlList(this.data.wrk_no,10) | 
 |  |  |             this.$refs.filter.close() | 
 |  |  |          }, | 
 |  |  |          filterClose() { | 
 |  |  |             this.dataList = [] | 
 |  |  |             this.data.wrk_no = '' | 
 |  |  |             this.data.barcode = '' | 
 |  |  |             this.data.wrk_sts = '' | 
 |  |  |             this.data.crn_no = '' | 
 |  |  |             this.data.source_loc_no = '' | 
 |  |  |             this.data.loc_no = '' | 
 |  |  |             this.data.io_type = '' | 
 |  |  |             this.getOrderDetlList(this.searchValue,10) | 
 |  |  |             this.$refs.filter.close() | 
 |  |  |          }, | 
 |  |  |          handControlWrkMast(type) { | 
 |  |  |             let _this = this | 
 |  |  |             let param = {workNo: _this.wrkNo,type: type} | 
 |  |  |             uni.request({ | 
 |  |  |                url: `${_this.baseUrl}/agv/hand/control/wrkMast`, | 
 |  |  |                header: { | 
 |  |  |                   'token': uni.getStorageSync('token'), | 
 |  |  |                   'content-type': 'application/x-www-form-urlencoded' | 
 |  |  |                }, | 
 |  |  | 				 | 
 |  |  | 				 | 
 |  |  |             }); | 
 |  |  |                data: param, | 
 |  |  |                method: 'POST', | 
 |  |  |                success(res) { | 
 |  |  |                   res = res.data | 
 |  |  |                   if (res.code === 200) { | 
 |  |  |                      _this.$refs.option.close() | 
 |  |  |                      setTimeout(()=>{ | 
 |  |  |                         _this.getOrderDetlList(_this.searchValue,10) | 
 |  |  |                      },100) | 
 |  |  |                   } else if (res.code == 403) { | 
 |  |  |                      uni.showToast({ title: res.msg, icon: "error", position: 'top' }) | 
 |  |  |                      setTimeout(() => { uni.reLaunch({ url: '../../login/login' }); }, 1000); | 
 |  |  |                   } else { | 
 |  |  |                      uni.showToast({ title: res.msg, icon: "error", position: 'top' }) | 
 |  |  |                   } | 
 |  |  |                } | 
 |  |  |             })  | 
 |  |  |          } | 
 |  |  | 			 | 
 |  |  |       } | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style> | 
 |  |  |    @import url('../../../static/css/common/order.css'); | 
 |  |  |    .code { | 
 |  |  |       background-color: #d9d9d9; | 
 |  |  |       z-index: 99; | 
 |  |  |       position: sticky; | 
 |  |  |       top: 0rpx; | 
 |  |  |    .list-font-color { | 
 |  |  |       color: #fff; | 
 |  |  |       /* background-color: #33bb44; */ | 
 |  |  |    } | 
 |  |  |    .order-sts-start { | 
 |  |  |       background-color: #3eb689; | 
 |  |  |    } | 
 |  |  |    .order-sts-working { | 
 |  |  |       background-color: #ff9d46; | 
 |  |  |    } | 
 |  |  |    .order-sts-end { | 
 |  |  |       background-color: #ff7356; | 
 |  |  |    } | 
 |  |  |    .detl-threeCode { | 
 |  |  |       font-size: 28px; | 
 |  |  |       font-weight: bold; | 
 |  |  |    } | 
 |  |  |    .shop-car { | 
 |  |  |       position: fixed; | 
 |  |  |       left: 22rpx; | 
 |  |  |       bottom: 150rpx; | 
 |  |  |       background-color: #2299ff; | 
 |  |  |       width: 260rpx; | 
 |  |  |       height: 90rpx; | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  |       box-shadow: 0 0 10px 5px rgba(0, 0, 0, .6); | 
 |  |  |       border-radius: 10rpx; | 
 |  |  |       color: #fff; | 
 |  |  |       font-size: 28px; | 
 |  |  |       font-weight: bold; | 
 |  |  |    } | 
 |  |  |    .car-left { | 
 |  |  |       padding: 16rpx; | 
 |  |  |       flex: 5; | 
 |  |  |    } | 
 |  |  |    .car-right { | 
 |  |  |       flex: 4; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .mask { | 
 |  |  |       position: absolute; | 
 |  |  |       width: 100%; | 
 |  |  |       height: 100vh; | 
 |  |  |       z-index: 999; | 
 |  |  |       top: 0; | 
 |  |  |       left: 0; | 
 |  |  |    } | 
 |  |  |    .list { | 
 |  |  |       margin: 20rpx; | 
 |  |  |       background-color: #fff; | 
 |  |  |       background-color: #157ec1; | 
 |  |  |       color: #FFF; | 
 |  |  |       border-radius: 20rpx; | 
 |  |  |       border: 1px solid #eeeeee; | 
 |  |  |       background-color: rgba(0, 0, 0, .4); | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  |       justify-content: center; | 
 |  |  |       font-size: 16px; | 
 |  |  |       color: #fff; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .popup { | 
 |  |  |       width: 80vw; | 
 |  |  |       min-height: 100rpx; | 
 |  |  |       background-color: #FFF; | 
 |  |  |       border-radius: 25rpx; | 
 |  |  |       position: relative; | 
 |  |  |    } | 
 |  |  |    .list-left { | 
 |  |  |       flex: 1; | 
 |  |  |       position: relative; | 
 |  |  |    .title { | 
 |  |  |       height: 100rpx; | 
 |  |  |       line-height: 100rpx; | 
 |  |  |       width: 100%; | 
 |  |  |       color: #606266; | 
 |  |  |       text-align: center; | 
 |  |  |       font-size: 16px; | 
 |  |  |    } | 
 |  |  |    .list-left-top { | 
 |  |  |       /* border-bottom: 1px solid #eeeeee; */ | 
 |  |  |       padding: 20rpx; | 
 |  |  |    } | 
 |  |  |    .list-left-bottom { | 
 |  |  |       border-bottom: 1px solid #eeeeee; | 
 |  |  |       padding: 10rpx; | 
 |  |  |       display: flex; | 
 |  |  |       justify-content: space-around; | 
 |  |  |    } | 
 |  |  |    .list-right { | 
 |  |  |       width: 100rpx; | 
 |  |  |       border-left: 1px solid #eeeeee; | 
 |  |  |    .popup-item { | 
 |  |  |       height: 80rpx; | 
 |  |  |       line-height: 80rpx; | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  |       justify-content: center; | 
 |  |  |    } | 
 |  |  | </style> | 
 |  |  |    .popup-item-left { | 
 |  |  |       width: 16vw; | 
 |  |  |       padding-right: 20rpx; | 
 |  |  |       text-align: right; | 
 |  |  |       color: #606266; | 
 |  |  |    } | 
 |  |  |    .popup-item-right { | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  |       width: 50vw; | 
 |  |  |       height: 50rpx; | 
 |  |  |       padding: 2px 5px; | 
 |  |  |       border: 1px solid #E4E7ED; | 
 |  |  |       border-radius: 5rpx; | 
 |  |  |    } | 
 |  |  |    .popup-item-right input{ | 
 |  |  |       color: #606266; | 
 |  |  |    } | 
 |  |  |    .btn { | 
 |  |  |       display: flex; | 
 |  |  |       height: 90rpx; | 
 |  |  |       margin-top: 20rpx; | 
 |  |  |       border-top: 1px solid #DCDFE6; | 
 |  |  |       justify-content: center; | 
 |  |  |       align-items: center; | 
 |  |  |    } | 
 |  |  |    .btn-left { | 
 |  |  |       display: flex; | 
 |  |  |       flex: 1; | 
 |  |  |       height: 100%; | 
 |  |  |       justify-content: center; | 
 |  |  |       align-items: center; | 
 |  |  |       color: #606266; | 
 |  |  |       border-right: 1px solid #DCDFE6; | 
 |  |  |    } | 
 |  |  |    .btn-right { | 
 |  |  |       display: flex; | 
 |  |  |       flex: 1; | 
 |  |  |       justify-content: center; | 
 |  |  |       align-items: center; | 
 |  |  |       color: #409EFF; | 
 |  |  |    } | 
 |  |  |    .filter-popup { | 
 |  |  |       width: 100%; | 
 |  |  |       height: 80vh; | 
 |  |  |       background-color: #FFF; | 
 |  |  |       position: relative; | 
 |  |  |       border-radius: 30rpx 30rpx 0rpx 0rpx; | 
 |  |  |    } | 
 |  |  |    .filter-popup button { | 
 |  |  |       flex: 1; | 
 |  |  |       margin: 16rpx; | 
 |  |  |    } | 
 |  |  |    .filter-popup-item { | 
 |  |  |       height: 100%; | 
 |  |  |       width: 100%; | 
 |  |  |       background-color: #c9cdd5; | 
 |  |  |    } | 
 |  |  |    .filter-popup-item-left { | 
 |  |  |       width: 30%; | 
 |  |  |       height: 100%; | 
 |  |  |       background-color: #DCDFE6; | 
 |  |  | 		 | 
 |  |  |    } | 
 |  |  |    .item-btn { | 
 |  |  |       width: 100%; | 
 |  |  |       height: 80rpx; | 
 |  |  |       line-height: 80rpx; | 
 |  |  |       background-color: #c9cdd5; | 
 |  |  |       text-align: center; | 
 |  |  |    } | 
 |  |  |    .item-btn:checked { | 
 |  |  |       background-color: #606266; | 
 |  |  |    } | 
 |  |  |    .filter-btn { | 
 |  |  |       position: absolute; | 
 |  |  |       left: 0; | 
 |  |  |       bottom: 0; | 
 |  |  |       width: 100%; | 
 |  |  |       background-color: #FFF; | 
 |  |  |    } | 
 |  |  |    .item-cl { | 
 |  |  |       display: flex;align-items: center; | 
 |  |  |    } | 
 |  |  |    .item-cl input { | 
 |  |  |       border-bottom: 1px solid #b9b9b9; | 
 |  |  |    } | 
 |  |  | </style> |