品牌新增查询

pages/kotra/brand/list.vue

@@ -6,6 +6,7 @@
       overflow: 'hidden',
     }"
   >
+  <view :class="[FilterCriShow?'FilterBgBox':'']">
     <view class="brandHeadBgBox"
       :style="{'background': TenantId!=18?`linear-gradient(-3deg, #eff8ff, #c6e6ff)`:''}">
         <headers :title="replace.state=='1'?'品牌列表':'企业列表'"></headers>
@@ -22,7 +23,8 @@
             bg-color="#FFF"
           ></u-search>
         </view>
-      <view v-else class="brandSearch" style="padding: 5px 10px;margin-top: 6rpx;">
+        <view v-else style="display: flex;justify-content: space-between;align-items: center;">
+          <view class="brandSearch" style="padding: 5px 10px;margin-top: 6rpx;flex: 1;">
             <template v-if="iscpswjselectall==1&&replace.state=='1'">
               <view class="brandSearch-left">
                 <uni-section title="" type="line">
@@ -42,6 +44,11 @@
               @input="ResetQuery"></input>
             </view>
           </view>
+          <view class="brandFilter" v-if="replace.state=='1'" @click="FilterCriShow=!FilterCriShow">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/filterIcon.png" />
+            <span>筛选</span>
+          </view>
+        </view>
         <template v-if="TenantId==18">
           <view style="display: flex; align-items: center">
             <view style="flex: 1; overflow: hidden">
@@ -101,7 +108,7 @@
           </view>
         </template>
         <view v-else style="display: flex; align-items: center;padding: 28rpx 0;">
-        <view style="flex: 1; overflow: hidden;padding-left: 32rpx;"
+          <view v-if="!FilterCriShow" style="flex: 1; overflow: hidden;padding-left: 32rpx;"
           class="brandTabBox">
             <u-tabs
                 bg-color="none"
@@ -123,15 +130,56 @@
           class="custom-tab-list"
               ></u-tabs>
           </view>
+          <view v-else class="FilterCriBox">
+            <view>
+              <text>面积需求</text>  
+              <view class="FilterCriInput">
+                <view class="FilterCriNumL">
+                  <view class="FilterCriNum">
+                    <input type="number" v-model="msg.MixAreaRequirement" @blur='getMixArea'/>
                   </view>
-
+                  <view></view>
+                  <view class="FilterCriNum">
+                    <input type="number" v-model="msg.MaxAreaRequirement" @blur='getMixArea'/>
+                  </view>
+                </view>
+                <span>㎡</span>
+              </view>
+            </view>
+            <view style="padding-top:40rpx">
+              <text>店铺数量</text>  
+              <view class="FilterCriInput">
+                <view class="FilterCriNumL">
+                  <view class="FilterCriNum">
+                    <input type="number" v-model="msg.MixShopNum" @blur='getMixArea'/>
+                  </view>
+                  <view></view>
+                  <view class="FilterCriNum">
+                    <input type="number" v-model="msg.MaxShopNum" @blur='getMixArea'/>
+                  </view>
+                </view>
+                <span>个</span>
+              </view>
+            </view>
+            <view class="FilterCri_b">
+              <view class="FilterCri_b_item" @click="resetQuantity">
+                <text>重置</text>
+              </view>
+              <view class="FilterCri_b_item" @click="sure">
+                <text>确 认</text>
+              </view>
+            </view>
+          </view>
+        </view>
+    </view>
+    <view v-if="FilterCriShow" class="FilterBg" @click="FilterCriShow=false"></view>
     </view>
     
     <u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>
     <view
       style=" padding: 2px 10px"
       :style="{ height: TenantId==18?'calc(100% - 127px)':'calc(100% - 192px)'}"
-      v-if="g.length > 0"
+      v-if="g.length > 0" :class="[FilterCriShow?'FilterCenter':'']"
     >
       <scroll-view
         :scroll-y="true"
@@ -191,6 +239,7 @@
         <view style="width: 100%;height: 30px;"></view>
       </scroll-view>
     </view>
+    
 	<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth" ></auth>
     <tabbars></tabbars>
   </div>
@@ -235,6 +284,10 @@ export default {
         BrandEnterpriseType:null,
         MallBaseId: 0,
         TenantId: 0,
+        MixShopNum: '',
+        MaxShopNum: '',
+        MixAreaRequirement: '',
+        MaxAreaRequirement: '',
       },
       loadText: {
         loadmore: "轻轻上拉，加载更多",
@@ -264,6 +317,7 @@ export default {
       GetYBConfig: null,
       iscpswjselectall: 0,
       ShopTypeList: [],
+      FilterCriShow: false,
     };
   },
   onShareTimeline() {
@@ -361,6 +415,33 @@ export default {
     this.contentHeight = this.$utils.calcContentHeight(c) + 40;
   },
   methods: {
+    getMixArea(type){
+      if(this.msg.MixAreaRequirement){
+        if(this.msg.MaxAreaRequirement<this.msg.MixAreaRequirement){
+					uni.showToast({
+						title: "不能小于"+this.msg.MixAreaRequirement+'面积',
+						icon:'none'
+					})
+					this.msg.MaxAreaRequirement = this.msg.MixAreaRequirement
+				}
+      }
+      if(this.msg.MixShopNum){
+        if(this.msg.MaxShopNum<this.msg.MixShopNum){
+					uni.showToast({
+						title: "不能小于"+this.msg.MixShopNum+'个',
+						icon:'none'
+					})
+					this.msg.MaxShopNum = this.msg.MixShopNum
+				}
+      }
+    },
+    sure() {
+      this.getMixArea()
+      this.g = []
+      this.FilterCriShow=false
+      this.msg.pageIndex=1
+      this.init()
+    },
 	  reloadUserinfo() {
       this.u = uni.getStorageSync("mall_UserInfo");
       this.msg.BrandName=''
@@ -422,6 +503,16 @@ export default {
       );
       this.init();
     },
+    resetQuantity() {
+      this.g = []
+      this.msg.pageIndex = 1
+      this.msg.MixShopNum = ''
+      this.msg.MaxShopNum = ''
+      this.msg.MixAreaRequirement = ''
+      this.msg.MaxAreaRequirement = ''
+      this.FilterCriShow=false
+      this.init();
+    },
     ResetQuery(){
       this.g = []
       this.msg.pageIndex=1
@@ -520,6 +611,108 @@ export default {
 </script>
 
 <style>
+.FilterCenter{
+  width: 100%;
+  position: fixed;
+  top: 323rpx;
+}
+.FilterBg{
+  width: 100%;
+  height: 100%;
+  background: rgba(23,23,23,0.5);
+  position: fixed;
+}
+.FilterBgBox .brandHeadBgBox{
+  position: relative;
+  z-index: 1;
+}
+.FilterBgBox{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 1;
+}
+.FilterCri_b_item text{
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #000000;
+  line-height: 90rpx;
+}
+.FilterCri_b_item:nth-child(2) text{
+  color: #fff;
+}
+.FilterCri_b_item+.FilterCri_b_item {
+  background: #017EDF;
+}
+.FilterCri_b_item {
+  width: 316rpx;
+  height: 90rpx;
+  background: #F7FBFF;
+  border-radius: 18rpx;
+  border: 2rpx solid #C6DEF1;
+  text-align: center;
+}
+.FilterCri_b{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 57rpx;
+  padding-bottom: 20rpx;
+}
+.FilterCriInput span{
+  jsustify-content: end;
+}
+.FilterCriNum input{
+  height: 100%;
+  line-height: 86rpx;
+}
+.FilterCriNum{
+  width: 269rpx;
+  height: 86rpx;
+  border-radius: 18rpx;
+  background: #F4FAFF;
+  border: 2rpx solid #017EDF;
+  padding: 0 33rpx;
+}
+.FilterCriNumL view:nth-child(2){
+  width: 23rpx;
+  height: 2px;
+  background: #C6DEF1;
+  margin: 0 26rpx;
+}
+.FilterCriInput,.FilterCriNumL{
+  display: flex;
+  align-items: center;
+}
+.FilterCriInput{
+  justify-content: space-between;
+}
+.FilterCriBox text{
+  font-weight: bold;
+  font-size: 28rpx;
+  margin-bottom: 30rpx;
+  display: block;
+}
+.FilterCriBox{
+  width: 100%;
+  padding: 0 42rpx;
+}
+.brandFilter{
+  flex-shrink: 0;
+  margin-right: 37rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 38rpx 0 0 0;
+}
+.brandFilter img{
+  width: 32rpx;
+  height: 32rpx;
+}
+.brandFilter span{
+  font-size: 22rpx
+}
 .brandSearch-auto{
     width: 2rpx;
     height: 40rpx;