feat: 添加分组弹窗需求开发

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/ent_portrait.js

@@ -6,6 +6,7 @@ var vNode = {
     hisproComponent: hisproComponent,
     forwardshare: vmForward,
     mobilePortrayalFooter:mobilePortrayalFooter,
+    mobilePortrayalGroupingScript: mobilePortrayalGroupingScript,
     downloadpopup: downloadpopup,
 
   },

src/jfw/modules/app/src/web/templates/big-member/page_ent_portrait.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" type="text/css" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/forward-share/css/forward.css?v={{Msg "seo" "version"}}'/>
   <link rel="stylesheet" type="text/css" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/dataExport/css/popup-data-export.css?v={{Msg "seo" "version"}}'/>
   <link rel="stylesheet" type="text/css" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/mobile-portrayal-footer/css/mobile-portrayal-footer.css?v={{Msg "seo" "version"}}'/>
+  <link rel="stylesheet" type="text/css" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/mobile-portrayal-footer/css/mobile-portrayal-grouping.css?v={{Msg "seo" "version"}}'/>
   <link rel="stylesheet" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/portrait/css/downloadpopup.css?v={{Msg "seo" "version"}}' />
   <!--E-当前页面的css资源-->
 </head>
@@ -696,8 +697,10 @@
                 'othertwo':entPortraitInfo.buyer_count ? entPortraitInfo.buyer_count + '个' : '--',balance}">
                  </downloadpopup>
                 <!-- 底部按钮组件 -->
-                <mobile-portrayal-footer ref="portrayalFooter":monitorshow="entInfo.followSearchFinish && entInfo.entExist" :monitor="!!entInfo.follow" @monitorclick="changeFollowState" :custom-monitor="true"  :downshow="true" :islogin="isLogin" :params="entParams" :shareshow="true">
+                <mobile-portrayal-footer ref="portrayalFooter" :custom-monitor="false" :monitorshow="entInfo.followSearchFinish && entInfo.entExist" :monitor="!!entInfo.follow" @monitorclick="changeFollowState" :custom-monitor="true"  :downshow="true" :islogin="isLogin" :params="entParams" :shareshow="true">
                 </mobile-portrayal-footer>
+                <!-- 分组组件 -->
+                <mobile-portrayal-grouping-script ref="portrayalGrouping"></mobile-portrayal-grouping-script>
     <popup-data-export ref="popup_dataExport" @next="next_export"></popup-data-export>
   </div>
   <div id="jyKeepComponent">
@@ -726,6 +729,7 @@
 </script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/portrait/js/downloadpopup.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module//mobile-portrayal-footer/js/mobile-portrayal-footer.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module//mobile-portrayal-footer/js/mobile-portrayal-grouping.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/forward-share/js/forward.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/ent_portrait.js?v={{Msg "seo" "version"}}'>
 </script>

src/jfw/modules/app/src/web/templates/big-member/page_potential_cor_list.html

@@ -78,6 +78,14 @@
             width: .4rem;
             height: .4rem;
         }
+        .cor-item-right .cor-yjk {
+          background-size: 100% 100%;
+          background-image: url('{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/big-member/image/yjk.png?v={{Msg "seo" "version"}}');
+        }
+        .cor-item-right .cor-jk {
+          background-size: 100% 100%;
+          background-image: url('{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/big-member/image/jk.png?v={{Msg "seo" "version"}}');
+        }
         .cor-item-l-r {
             margin: 0 .16rem;
             flex: 1;
@@ -233,7 +241,7 @@
                                 <span
                                     v-if="pageConf.followShow"
                                     class="j-icon"
-                                    :class="item.follow ? 'icon-favorite' : 'icon-no-favorite'"
+                                    :class="item.follow ? 'cor-yjk' : 'cor-jk'"
                                     @click.stop.prevent="changeFollowState(item)"
                                 ></span>
                                 <span class="more-action tooltip" @click.stop.prevent="showMoreActionPanel" v-if="pageConf.moreActionShow">

src/web/staticres/common-module/mobile-portrayal-footer/css/mobile-portrayal-footer.css

@@ -25,6 +25,8 @@
   border-top: 0.01rem solid #0000001A;
 }
 .m-footer-box .footer-item{
+  display: flex;
+  flex-direction: column;
   flex: 1;
   padding-top: 0.1rem;
   justify-content: center;

src/web/staticres/common-module/mobile-portrayal-footer/css/mobile-portrayal-grouping.css

@@ -0,0 +1,51 @@
+.mobile-portrayal-grouping .van-dialog {
+  padding: 0 .32rem;
+}
+.mobile-portrayal-grouping .van-dialog .van-dialog__header {
+  padding-top: 24px;
+  font-weight: 400;
+}
+.mobile-portrayal-grouping .van-dialog.grouping-dialog .van-dialog__content {
+  padding: 0;
+  margin-bottom: .44rem;
+}
+.mobile-portrayal-grouping .van-dialog__content .add-grouping {
+  margin: .16rem 0;
+  height: .4rem;
+  line-height: .4rem;
+  text-align: right;
+}
+.mobile-portrayal-grouping .van-dialog__content .add-grouping .add-grouping-text {
+  font-size: .28rem;
+  color: #2ABED1;
+}
+.mobile-portrayal-grouping .grouping-list {
+  min-height: 2.4rem;
+  max-height: 8rem;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.mobile-portrayal-grouping .grouping-list .van-checkbox {
+  padding: .2rem 0;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
+}
+
+.mobile-portrayal-grouping .add-grouping-dialog .van-dialog__content {
+  padding: 0;
+  margin: .32rem 0 .44rem 0;
+}
+.mobile-portrayal-grouping .add-grouping-dialog .van-cell .van-cell__value {
+  display: flex;
+  justify-content: space-between;
+}
+.mobile-portrayal-grouping .add-grouping-dialog .van-field__control::placeholder {
+  color: #9B9CA3;
+}
+.mobile-portrayal-grouping .add-grouping-dialog .van-field__word-limit {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.mobile-portrayal-grouping .add-grouping-dialog .van-field__word-limit .van-field__word-num {
+  color: #2ABED1;
+}

src/web/staticres/common-module/mobile-portrayal-footer/js/mobile-portrayal-footer.js

@@ -89,10 +89,11 @@ var mobilePortrayalFooter = {
       type: Boolean,
       default: false
     },
-    allpower:{ // 权限状态
-
+    allpower:{}, // 权限状态
+    portraitOrigin: { // 页面来源
+      type: String,
+      default: 'ent'
     }
-
   },
   data: function () {
     return {

src/web/staticres/common-module/mobile-portrayal-footer/js/mobile-portrayal-grouping.js

@@ -0,0 +1,69 @@
+var mobilePortrayalGrouping = `
+  <div class="mobile-portrayal-grouping">
+    <van-dialog
+      v-model="showGroupingDialog"
+      :title="title"
+      show-cancel-button
+      class="grouping-dialog"
+      >
+      <div class="add-grouping" @click="addMonitor">
+        <van-icon color="#2ABED1" name="plus" />
+        <span class="add-grouping-text">新增分组</span>
+      </div>
+      <div class="grouping-list">
+        <van-checkbox-group v-model="groupingResult">
+          <van-checkbox checked-color="#2ABED1" name="0">默认分组 a</van-checkbox>
+          <van-checkbox checked-color="#2ABED1" :name="index" v-for="(item, index) in 15">复选框 {{item}}</van-checkbox>
+        </van-checkbox-group>
+      </div>
+    </van-dialog>
+    <van-dialog
+      class="add-grouping-dialog"
+      v-model="showAddGroupingDialog"
+      title="新增分组"
+      @confirm="addGrouping"
+      show-cancel-button>
+      <van-field 
+        v-model="groupingName" 
+        show-word-limit 
+        maxlength="15"
+        error-message="分组名称已存在"
+        placeholder="请输入分组名称"
+      ></van-field>
+    </van-dialog>
+  </div>
+`
+
+var mobilePortrayalGroupingScript = {
+  name: 'mobile-portrayal-grouping',
+  template: mobilePortrayalGrouping,
+  props: {
+    title: {
+      type: String,
+      default: '选择分组'
+    },
+    showGroupingDialog: {
+      type: Boolean,
+      default: true
+    },
+    groupingList: {
+      type: Array,
+    }
+  },
+  data () {
+    return {
+      groupingResult: [],
+      groupingName: '',
+      showAddGroupingDialog: false
+    }
+  },
+  methods: {
+    addMonitor () {
+      this.showAddGroupingDialog = true
+    },
+    addGrouping () {
+      // 添加分组确定事件
+      this.showAddGroupingDialog = false
+    }
+  }
+}