feat: 群发小程序封面比例校验&客户管理流失时间

project/src/components/assembly/editCon.vue

@@ -240,7 +240,7 @@
 
           <!-- <el-button type="primary" plain size="mini">裁剪</el-button> -->
         </div>
-        <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。封面图建议尺寸为520*416。</p>
+        <p class="uploadImgHint" style="margin-left:20px;">*仅支持PNG及JPG，封面显示图片宽高比为5:4，且文件大小不得超过10M。</p>
         <div class="buttons">
           <el-button type="primary" plain size="mini" @click="miniprogramVisible = false">取消</el-button>
           <el-button type="primary" size="mini" @click="miniprogramDefine">确定</el-button>
@@ -916,6 +916,11 @@ export default {
         if (this.miniprogramVisible) {//小程序
           this.miniprogram.pic_media_id = res.rst.material_id;
           this.miniprogram.pic_url = res.rst.url;
+          try {
+            this.handleCheckImgWH(file)
+          } catch (error) {
+            console.log(error)
+          }
         }
         if (this.linkExtendVisible) {//推广链接
           this.linkExtend.picurl = res.rst.url;
@@ -997,6 +1002,25 @@ export default {
       await this.handleGetMiniProOptions()
       this.$message.success('刷新成功')
     },
+    // 判断小程序封面图片比例是否为5:4 => 给出提示
+    handleCheckImgWH(file) {
+      const reader = new FileReader()
+      reader.readAsDataURL(file.raw)
+      reader.onload = () => {
+        const img = new Image()
+        img.src = reader.result
+        img.onload = () => {
+          const ratio = img.width / img.height
+          const requiredRatio = 5 / 4
+          if (Math.abs(ratio - requiredRatio) > 0.01) {
+            this.$message.warning({
+              message: '小程序封面图片宽高比为5:4，建议使用【图片裁剪】进行调整',
+              duration: 5000,
+            })
+          }
+        }
+      }
+    },
   }
 }
 </script>

project/src/components/assembly/editConWelGroup.vue

@@ -226,7 +226,7 @@
             </div>
           </div>
         </div>
-        <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。封面图建议尺寸为520*416。</p>
+        <p class="uploadImgHint" style="margin-left:20px;">*仅支持PNG及JPG，封面显示图片宽高比为5:4，且文件大小不得超过10M。</p>
         <div class="buttons">
           <el-button type="primary" plain size="mini" @click="miniprogramVisible = false">取消</el-button>
           <el-button type="primary" size="mini" @click="miniprogramDefine">确定</el-button>
@@ -895,6 +895,11 @@ export default {
         if (this.miniprogramVisible) {//小程序
           this.miniprogram.pic_media_id = res.rst.material_id;
           this.miniprogram.pic_url = res.rst.url;
+          try {
+            this.handleCheckImgWH(file)
+          } catch (error) {
+            console.log(error)
+          }
         }
         if (this.linkExtendVisible) {//推广链接
           this.linkExtend.picurl = res.rst.url;
@@ -976,6 +981,25 @@ export default {
       await this.handleGetMiniProOptions()
       this.$message.success('刷新成功')
     },
+    // 判断小程序封面图片比例是否为5:4 => 给出提示
+    handleCheckImgWH(file) {
+      const reader = new FileReader()
+      reader.readAsDataURL(file.raw)
+      reader.onload = () => {
+        const img = new Image()
+        img.src = reader.result
+        img.onload = () => {
+          const ratio = img.width / img.height
+          const requiredRatio = 5 / 4
+          if (Math.abs(ratio - requiredRatio) > 0.01) {
+            this.$message.warning({
+              message: '小程序封面图片宽高比为5:4，建议使用【图片裁剪】进行调整',
+              duration: 5000,
+            })
+          }
+        }
+      }
+    },
   }
 }
 </script>

project/src/components/assembly/multipleLinkEdit.vue

@@ -62,7 +62,7 @@
               <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
           </div>
-          <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。封面图建议尺寸为520*416。</p>
+          <p class="uploadImgHint" style="margin-left:20px;">*仅支持PNG及JPG，封面显示图片宽高比为5:4，且文件大小不得超过10M。</p>
         </div>
       </div>
       <!-- E 小程序 -->

project/src/components/customManage/manage.vue

@@ -1,27 +1,29 @@
 <template>
   <div v-loading="loading">
     <!-- 使用说明 -->
-    <instructions doc="customManage"></instructions>
+    <instructions doc="customManage" />
 
     <div class="screenBox">
       <!-- 搜索客户 -->
-      <self-input :reset='resetFlag' @inputChange='(val)=>{input_keyword = val;init(1)}'></self-input>
+      <self-input :reset='resetFlag' @inputChange='(val)=>{input_keyword = val;init(1)}' />
       <!-- 所属客服 -->
-      <self-customerservice :reset='resetFlag' @customerDefine="(val)=>{user_id_list=val;init(1)}"></self-customerservice>
+      <self-customerservice :reset='resetFlag' @customerDefine="(val)=>{user_id_list=val;init(1)}" />
       <!-- 企业标签 -->
-      <enterprise-tag :reset='resetFlag' @tagDefine="tagDefine"></enterprise-tag>
+      <enterprise-tag :reset='resetFlag' @tagDefine="tagDefine" />
       <!-- 添加时间 -->
-      <date-picker :reset='resetFlag' @changeTime="changeTime"></date-picker>
+      <date-picker :reset='resetFlag' @changeTime="changeTime" />
       <!-- 添加渠道 -->
-      <self-channel :reset='resetFlag' @channelDefine="(val)=>{add_way = val;init(1)}"></self-channel>
+      <self-channel :reset='resetFlag' @channelDefine="(val)=>{add_way = val;init(1)}" />
       <!-- 性别 暂时获取不到 -->
-      <self-gender :reset='resetFlag' @genderChange="(val)=>{gender = val;init(1)}"></self-gender>
+      <self-gender :reset='resetFlag' @genderChange="(val)=>{gender = val;init(1)}" />
       <!-- 流失状态 -->
-      <loss-body :reset='resetFlag' @lossChange="lossChange"></loss-body>
+      <loss-body :reset='resetFlag' @lossChange="lossChange" />
       <!-- 付费情况 -->
-      <screen-pay :reset='resetFlag' @payChange="payChange"></screen-pay>
+      <screen-pay :reset='resetFlag' @payChange="payChange" />
       <!-- 充值时间 -->
       <date-picker :reset='resetFlag' title="充值时间" @changeTime="onChangePayTime" />
+      <!-- 流失时间 -->
+      <date-picker :reset='resetFlag' title="流失时间" timeFlag :defaultTime="['00:00:00', '23:59:59']" @changeTime="onChangeLossTime" />
       <div class="reset" @click="resetEvent">重置</div>
     </div>
     <div class="tableInfo">
@@ -116,9 +118,12 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="客户状态" show-overflow-tooltip align="center">
+      <el-table-column label="客户状态" show-overflow-tooltip align="center" min-width="110">
         <template slot-scope="scope">
-          <span v-if="scope.row.relation_enable==0" class="c-F03F5C">已流失</span>
+          <div v-if="scope.row.relation_enable==0" class="c-F03F5C">已流失
+            <p v-if="scope.row.loss_time">{{ scope.row.loss_time.split(' ')[0] }}</p>
+            <p v-if="scope.row.loss_time">{{ scope.row.loss_time.split(' ')[1] }}</p>
+          </div>
           <span v-if="scope.row.relation_enable==1" class="c-448AFF">未流失</span>
           <span v-if="scope.row.relation_enable==2" class="c-FFB055">待分配</span>
         </template>
@@ -209,6 +214,8 @@ export default {
       add_date_end: '',//添加日期 截止
       last_pay_time_start: '',//充值时间 起始
       last_pay_time_end: '',//充值时间 截止
+      loss_time_start: '',//流失时间 起始
+      loss_time_end: '',//流失时间 截止
       loss_status: null,//客户流失状态 没有筛选时传null 0未流失 1已流失
       pay_status: null,//	付款状态 没有筛选时传null 0未付款 1已付款
       pay_num_min: '',//最小付款次数，当pay_status是1时必传
@@ -278,6 +285,8 @@ export default {
           add_date_end: this.add_date_end,
           last_pay_time_start: this.last_pay_time_start,
           last_pay_time_end: this.last_pay_time_end,
+          loss_time_start: this.loss_time_start,
+          loss_time_end: this.loss_time_end,
           add_way: this.add_way,
           pay_status: this.pay_status,
           pay_num_min: this.pay_num_min,
@@ -379,6 +388,8 @@ export default {
       this.add_date_end = '';
       this.last_pay_time_start = '';
       this.last_pay_time_end = '';
+      this.loss_time_start = '';
+      this.loss_time_end = '';
       this.loss_status = null;
       this.pay_status = null;
       this.pay_num_min = '';
@@ -436,6 +447,17 @@ export default {
       }
       this.init(1)
     },
+    // 监听“流失时间”筛选变化
+    onChangeLossTime (time) {
+      if (!time || time && time.length == 0) {
+        this.loss_time_start = '';
+        this.loss_time_end = '';
+      } else {
+        this.loss_time_start = time[0]
+        this.loss_time_end = time[1]
+      }
+      this.init(1)
+    },
     tagDefine (data) {//标签选择回调
       if (data.tag == 1 || data.tag == 2) {
         if (data.tag_id_list && data.tag_id_list.length != 0) {
@@ -472,6 +494,8 @@ export default {
           add_date_end: this.add_date_end,
           last_pay_time_start: this.last_pay_time_start,
           last_pay_time_end: this.last_pay_time_end,
+          loss_time_start: this.loss_time_start,
+          loss_time_end: this.loss_time_end,
           add_way: this.add_way,
           pay_status: this.pay_status,
           pay_num_min: this.pay_num_min,