update: 商品选择器

index.html

@@ -36,7 +36,7 @@
   <script src="//web-1251519181.file.myqcloud.com/components/export-excel.2.0.16.js"></script><!-- 数据导出 -->
   <script src="//web-1251519181.file.myqcloud.com/components/input.2.0.20.js"></script>
   <script src="//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js"></script>
-  <script src="//web-1251519181.file.myqcloud.com/components/selector.1.2.21.js"></script>
+  <script src="//web-1251519181.file.myqcloud.com/components/selector.1.2.24.js"></script>
   <script src="//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js"></script><!-- 分页器 -->
   <script src="//web-1251519181.file.myqcloud.com/components/track.1.0.4.js"></script>
   <script src="//web-1251519181.file.myqcloud.com/components/activity-select.1.0.2.1.js"></script><!-- 数据对话 -->

src/mixins/selector.js

@@ -12,6 +12,8 @@ export default {
     return {
       // ----线下适用商品开始----
       xxSysp: {
+        max: 5,
+        isExpand: false,
         visible: false, // 适用商品选择器dialog
         goodsEnable: false,
         filterAbbrInfo: [], // 选择后回显的label数据
@@ -27,6 +29,8 @@ export default {
     // ------线下适用商品开始-------
     // 清空线下适用商品 ，重置商品选择器
     handleXxSyspReset() {
+      this.$refs.selector.conditions = this.$refs.selector.conditions.slice(0, 1);
+      this.xxSysp.isExpand = false;
       this.$refs.selector.conditions[0].goodsList = [];
       this.$refs.selector.complexData = [];
       this.xxSysp.filterAbbrInfo = [];
@@ -49,20 +53,23 @@ export default {
     },
     // 商品选择器反显label
     xxSyspLabel(filterAbbrInfo) {
+      console.log(filterAbbrInfo);
       let _filterAbbrInfo = [];
       // 设置显示label
       filterAbbrInfo &&
         filterAbbrInfo.forEach(y => {
-          _filterAbbrInfo = y.map(v => {
-            return {
-              optName: v.optName,
-              text: `${v.typeName}${v.belong}${v.childNames
-                .map(v => {
-                  return `【${v}】`;
-                })
-                .join('')}`
-            };
-          });
+          _filterAbbrInfo.push(
+            y.map(v => {
+              return {
+                optName: v.optName,
+                text: `${v.typeName}${v.belong}${v.childNames
+                  .map(v => {
+                    return `【${v}】`;
+                  })
+                  .join('')}`
+              };
+            })
+          );
         });
       return _filterAbbrInfo;
     },

src/views/card/form.vue

@@ -114,10 +114,16 @@
           <span class="inline-block w100 pr10 text-right">线下适用商品</span>
           <div class="sysp__content clearfix inline-block">
             <div class="fl" v-if="xxSysp.filterAbbrInfo.length">
-              <template v-for="(item, idx) in xxSysp.filterAbbrInfo">
-                {{ item.optName }}
-                <span :key="idx" class="item">{{ item.text }}</span>
-              </template>
+              <div v-for="(item, idx) in xxSysp.filterAbbrInfo" :key="idx">
+                <div class="complex-and" v-if="idx > 0 && (idx < xxSysp.max || xxSysp.isExpand)">【或者】</div>
+                <template v-for="(el, i) in item">
+                  <span :key="i" v-show="idx < xxSysp.max || xxSysp.isExpand">
+                    {{ el.optName }}
+                    <span class="item">{{ el.text }}</span>
+                  </span>
+                </template>
+              </div>
+              <el-button v-if="xxSysp.filterAbbrInfo.length > xxSysp.max" type="text" @click="xxSysp.isExpand = !xxSysp.isExpand">{{ xxSysp.isExpand ? '收起' : '展开' }}<i class="el-icon-arrow-down" :class="{ 'is-expand': xxSysp.isExpand }"></i></el-button>
             </div>
             <template v-if="gicCouponType != 3 && gicCouponType != 4">
               <template v-if="xxSysp.goodsEnable && (((isEdit || isInfo) && xxSysp.filterAbbrInfo.length) || isAdd || isCopy)">
@@ -381,4 +387,15 @@ export default cardForm;
     line-height: 18px;
   }
 }
+.complex-and {
+  color: #535353;
+  font-weight: bold;
+  line-height: 1;
+}
+.el-icon-arrow-down {
+  transition: transform 0.2s ease;
+}
+.is-expand {
+  transform: rotate(180deg);
+}
 </style>

src/views/ecm/form.vue

@@ -115,11 +115,23 @@
             <div>
               <span class="fz14 gray" v-show="!consumeChecked.good">所有消费商品</span>
               <div class="sysp__content clearfix" v-show="consumeChecked.good">
-                <div class="fl" v-if="xxSysp.filterAbbrInfo.length">
+                <!-- <div class="fl" v-if="xxSysp.filterAbbrInfo.length">
                   <template v-for="(item, idx) in xxSysp.filterAbbrInfo">
                     {{ item.optName }}
                     <span :key="idx" class="item">{{ item.text }}</span>
                   </template>
+                </div> -->
+                <div class="fl" v-if="xxSysp.filterAbbrInfo.length">
+                  <div v-for="(item, idx) in xxSysp.filterAbbrInfo" :key="idx">
+                    <div class="complex-and" v-if="idx > 0 && (idx < xxSysp.max || xxSysp.isExpand)">【或者】</div>
+                    <template v-for="(el, i) in item">
+                      <span :key="i" v-show="idx < xxSysp.max || xxSysp.isExpand">
+                        {{ el.optName }}
+                        <span class="item">{{ el.text }}</span>
+                      </span>
+                    </template>
+                  </div>
+                  <el-button v-if="xxSysp.filterAbbrInfo.length > xxSysp.max" type="text" @click="xxSysp.isExpand = !xxSysp.isExpand">{{ xxSysp.isExpand ? '收起' : '展开' }}<i class="el-icon-arrow-down" :class="{ 'is-expand': xxSysp.isExpand }"></i></el-button>
                 </div>
                 <el-button type="primary" @click="handleXxSyspClick" class="fl mt5" size="mini">{{ !isAdd ? '查看' : '编辑' }}</el-button>
                 <el-button v-show="xxSysp.filterAbbrInfo.length && isAdd" @click="handleXxSyspReset" class="fl mt5" size="mini">清空</el-button>
@@ -512,4 +524,15 @@ export default ecmForm;
 .el-form-item__label.align-left {
   text-align: left;
 }
+.complex-and {
+  color: #535353;
+  font-weight: bold;
+  line-height: 1;
+}
+.el-icon-arrow-down {
+  transition: transform 0.2s ease;
+}
+.is-expand {
+  transform: rotate(180deg);
+}
 </style>