udpate: 落地页模板

src/components/preview-page.vue

 <template>
   <div class="iphone">
-    <span class="pageTitle">{{ pageTitle }}</span>
+    <span class="pageTitle">{{ card.pageTitle }}</span>
     <div class="content">
+      <img :src="card.pageBackgroudImg" class="bgImg" />
       <div class="enterpriseInfo">
-        <div class="logo"></div>
-        <div class="name">{{ merchantName }}</div>
+        <div class="logo">
+          <img :src="card.merchantLogo" />
+        </div>
+        <div class="name">{{ card.merchantName }}</div>
       </div>
       <div class="QRcode"></div>
-      <div class="leadingText">{{ guideComment }}</div>
+      <div class="leadingText">{{ card.guideComment }}</div>
       <div class="enterpriseNum">
         <i class="iconfont-hb3 iconhuawushuju"></i>
-        <p>{{ merchantPhoneNumber }}</p>
+        <p>{{ card.merchantPhoneNumber }}</p>
       </div>
     </div>
   </div>
@@ -19,37 +22,29 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      card: {
+        pageTitle: '页面标题1',
+        merchantName: '商户名称',
+        merchantPhoneNumber: '0571-1234567',
+        merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
+        pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
+        guideComment: '长按识别二维码添加您的专属导购'
+      }
+    };
   },
   props: {
-    pageTitle: {
-      type: String,
-      default: '标题'
-    },
-    merchantName: {
-      type: String,
-      default: '商户名称'
-    },
-    merchantPhoneNumber: {
-      type: String,
-      default: '0571-82345678'
-    },
-    merchantLogo: {
-      type: String,
-      default: ''
-    },
-    pageBackgroudImg: {
-      type: String,
-      default: ''
-    },
-    guideComment: {
-      type: String,
-      default: '长按保存/识别二维码，添加您的专属导购'
+    data: {
+      type: Object,
+      default: () => {}
     }
   },
   watch: {
-    mediaList(val) {
-      console.log(val);
+    data(val) {
+      if (val) {
+        const { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment } = val;
+        this.card = { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment };
+      }
     }
   }
 };
@@ -58,7 +53,6 @@ export default {
 <style type="text/scss" lang="scss" scoped>
 .iphone {
   position: relative;
-  margin-left: 117px;
   display: inline-block;
   font-size: 0;
   line-height: 0;
@@ -72,11 +66,15 @@ export default {
     position: sticky;
     color: #000000;
     font-weight: 500;
-    top: 64px;
-    width: 100%;
-    height: 20px;
-    display: flex;
-    justify-content: center;
+    top: 46px;
+    width: 125px;
+    margin-left: 78px;
+    line-height: 20px;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
   }
   .content {
     width: 228px;
@@ -91,16 +89,30 @@ export default {
     align-items: center;
     flex-direction: column;
     border-radius: 10px 10px 24px 24px;
+    .bgImg {
+      position: absolute;
+      width: 228px;
+      border-radius: 10px 10px 24px 24px;
+      top: 0;
+      z-index: 0;
+      max-height: 410px;
+    }
     .enterpriseInfo {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       width: 100%;
+      z-index: 100;
       .logo {
         width: 36px;
         height: 36px;
         background: #f6f6f6;
         border-radius: 60px;
+        img {
+          width: 36px;
+          height: 36px;
+          border-radius: 60px;
+        }
       }
       .name {
         margin-left: 10px;
@@ -112,6 +124,7 @@ export default {
       }
     }
     .QRcode {
+      z-index: 100;
       width: 176px;
       height: 176px;
       margin: 11px 0 16px 0;
@@ -120,6 +133,7 @@ export default {
       background-size: 176px auto;
     }
     .leadingText {
+      z-index: 100;
       font-size: 10px;
       color: #7f818a;
       line-height: 14px;
@@ -127,7 +141,8 @@ export default {
       text-align: center;
     }
     .enterpriseNum {
-      width: 130px;
+      z-index: 100;
+      min-width: 130px;
       margin-top: 68px;
       height: 32px;
       box-sizing: border-box;

src/components/preview-welcome.vue

@@ -20,7 +20,7 @@
           <div v-if="item.mediaType == 2" class="videoInfo" @click="blank(item.mediaUrl)">
             <video :src="item.mediaUrl" />
           </div>
-          <div v-if="item.mediaType == 3" class="docInfo">
+          <div v-if="item.mediaType == 3" class="docInfo" @click="blank(item.mediaUrl)">
             <div class="docTitle">
               <b>{{ item.mediaTitle }}</b>
               <p>{{ item.mediaSize }} KB</p>
@@ -64,6 +64,11 @@ export default {
     mediaList(val) {
       console.log(val);
     }
+  },
+  methods: {
+    blank(url) {
+      window.open(url);
+    }
   }
 };
 </script>
@@ -160,6 +165,7 @@ export default {
       .docInfo {
         display: inline-flex;
         align-items: center;
+        cursor: pointer;
       }
       .docTitle {
         padding-right: 10px;

src/router/actCodeManageRouter/attractFlowLinkRouter.js

@@ -7,6 +7,11 @@ const attractFlowLinkRouter = [
     component: _import('salesleads/actCodeManage/attractFlowLink', 'index')
   },
   {
+    path: '/ladingPageList',
+    name: '落地页列表',
+    component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'list')
+  },
+  {
     path: '/ladingPageInfo',
     name: '落地页详情',
     component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'detail')

src/views/enterprise/salutatory.vue

 <template>
   <div>
-    <!-- <div class="warp">
-      <h2>加好友配置</h2>
-      <span class="echoData" v-show="friendSettingType">{{ echoFriendData }}</span>
-      <el-button type="text" style="margin-left: 20px;" @click="openDialog">去配置</el-button>
-    </div> -->
     <div class="daily-set-wrap">
       <div class="daily-set-content border-box">
         <div class="admin-tip-body">
@@ -22,7 +17,7 @@
         </div>
         <div class="flex flex-space-between m-b-20 m-t-20">
           <el-input placeholder="请输入标题" maxlength="50" v-model="form.title" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
-          <el-button v-if="$getButtonLimit($buttonCode.addSalutatory)" :limit-code="$buttonCode.addSalutatory" type="primary" @click="changeRoute">新建欢迎语</el-button>
+          <el-button v-if="$getButtonLimit($buttonCode.addSalutatory)" :limit-code="$buttonCode.addSalutatory" type="primary" @click="addSalutatory(1)">新建欢迎语</el-button>
         </div>
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%' }" v-loading="loading">
           <el-table-column prop="title" label="标题" width="200">
@@ -135,36 +130,14 @@ export default {
     clearSearch() {
       this.getData();
     },
-    saveSetting() {
-      let data = {
-        friendSettingId: this.friendSettingId,
-        wxEnterpriseId: this.wxEnterpriseId,
-        friendSettingType: this.type
-      };
-      this.btnLoading = true;
-      postJsonRequest('/haoban-manage3-web/welcome/save/friend-setting', data)
-        .then(res => {
-          console.log(res);
-          let resData = res.data;
-          if (resData.code == 0 && resData.result) {
-            this.$message.success(resData.message);
-            // this.dialogVisible = false;
-            // this.getSetting();
-          }
-        })
-        .finally(() => {
-          this.btnLoading = false;
-        });
-    },
     /**
      * 跳转
      */
     changeRoute(row) {
-      if (row) {
-        this.$router.push({ path: '/editSalutatorySet', query: { id: row.welcomeId, type: this.friendSettingType, isDefalut: row.defaultWelcomeFlag } });
-      } else {
-        this.$router.push({ path: '/salutatorySet' });
-      }
+      this.$router.push({ path: '/editSalutatorySet', query: { id: row.welcomeId, isDefalut: row.defaultWelcomeFlag, type: row.type } });
+    },
+    addSalutatory(type) {
+      this.$router.push({ path: '/salutatorySet', query: { type } });
     },
     remove(row) {
       let str = '是否删除本条欢迎语?';

src/views/enterprise/salutatorySet.vue

@@ -54,7 +54,7 @@
               <p style="font-size:12px;color:#909399">(附件不超过9个，单个大小不超过2M)</p>
             </div>
           </el-form-item>
-          <el-form-item label="使用范围" required>
+          <el-form-item label="使用范围" required v-if="form.type == 1">
             <el-radio v-model="form.defaultWelcomeFlag" :disabled="defaultWelcomeFlag && echoDefaultWelcomeFlag == 0" :label="1">全体成员</el-radio>
             <el-radio v-model="form.defaultWelcomeFlag" :label="0">部分成员</el-radio>
             <span @click="openScopeDialog" v-if="form.defaultWelcomeFlag == 0" class="color-2f54eb cursor-pointer" style="margin-left:8px;"> {{ form.suitDepartmentAddList.length ? '修改使用范围' : '请选择使用范围' }}</span>
@@ -189,6 +189,7 @@ export default {
       },
       form: {
         title: '',
+        type: 1, //  1普通类型；2特殊类型
         welcomeContent: '你好，<微信昵称>',
         welcomeMediaList: [],
         suitDepartmentAddList: [],
@@ -281,11 +282,12 @@ export default {
     const userInfos = JSON.parse(sessionStorage.getItem('userInfos'));
     this.wxEnterpriseId = userInfos.wxEnterpriseId;
     this.enterpriseId = userInfos.enterpriseId;
-    const { id } = this.$route.query;
+    const { id, type } = this.$route.query;
     if (id) {
       this.getData();
       this.isNew = false;
     }
+    this.form.type = type;
     this.getExistDefaultWelcome();
     this.getAppleList();
   },
@@ -501,9 +503,6 @@ export default {
         this.$refs.tree.setCheckedKeys(this.form.suitDepartmentAddList.map(item => item.departmentId));
       });
     },
-    blank(url) {
-      window.open(url);
-    },
     handleUploadList(item, index) {
       if (['图片', '视频', '文件'].includes(item.title)) {
         document.getElementsByClassName('upload-input')[index].click();
@@ -633,8 +632,8 @@ export default {
         .then(res => {
           let resData = res.data;
           if (resData.code == 0 && resData.result) {
-            const { suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId, defaultWelcomeFlag } = resData.result;
-            this.form = { suitDepartmentList: suitDepartmentList || [], suitDepartmentAddList: JSON.parse(JSON.stringify(suitDepartmentList)) || [], title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId, defaultWelcomeFlag };
+            const { suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId, defaultWelcomeFlag, type } = resData.result;
+            this.form = { type, suitDepartmentList: suitDepartmentList || [], suitDepartmentAddList: JSON.parse(JSON.stringify(suitDepartmentList)) || [], title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId, defaultWelcomeFlag };
             this.form = Object.assign({}, this.form);
             this.echoDefaultWelcomeFlag = defaultWelcomeFlag;
           }
@@ -647,14 +646,14 @@ export default {
         });
     },
     submit() {
-      if (!this.form.defaultWelcomeFlag && !this.form.suitDepartmentAddList.length) {
+      if (this.form.type == 1 && !this.form.defaultWelcomeFlag && !this.form.suitDepartmentAddList.length) {
         this.$message.error('请选择使用范围');
         return;
       }
       this.$refs.form.validate(value => {
         if (value) {
-          const { suitDepartmentAddList, suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId, defaultWelcomeFlag } = this.form;
-          const para = { title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId: wxEnterpriseId || this.wxEnterpriseId, defaultWelcomeFlag };
+          const { suitDepartmentAddList, suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId, defaultWelcomeFlag, type } = this.form;
+          const para = { title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId: wxEnterpriseId || this.wxEnterpriseId, defaultWelcomeFlag, type };
           const addArr = [];
           const delArr = [];
           suitDepartmentAddList.forEach(ele => {

src/views/salesleads/actCodeManage/attractFlowLink/landingPage/cardView.vue

+<template>
+  <div class="card">
+    <div class="head">
+      <div class="operation">
+        <div class="idNum">ID：{{ card.templateCode }}</div>
+        <div class="btns">
+          <el-button type="text">关联详情</el-button>
+          <el-button type="text">删除</el-button>
+          <el-button type="text">编辑</el-button>
+        </div>
+      </div>
+      <div class="tempName">{{ card.templateName }}</div>
+      <div class="cardName">
+        <div class="createName">达摩管理员</div>
+
+        <div class="createTime">2022-05-19 12:03:12</div>
+      </div>
+    </div>
+    <div class="iphone-content">
+      <div class="iphone">
+        <img src="@/assets/iphone-head.png" />
+        <div class="content">
+          <img :src="card.pageBackgroudImg" v-show="card.pageBackgroudImg" class="bgImg" />
+          <div class="enterpriseInfo">
+            <div class="logo">
+              <img :src="card.merchantLogo" />
+            </div>
+            <div class="name">{{ card.merchantName }}</div>
+          </div>
+          <div class="QRcode"></div>
+          <div class="leadingText">{{ card.guideComment }}</div>
+          <div class="enterpriseNum">
+            <i class="iconfont-hb3 iconhuawushuju"></i>
+            <p>{{ card.merchantPhoneNumber }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      card: {
+        templateName: '',
+        templateCode: '',
+        templateId: '',
+        pageTitle: '',
+        merchantName: '',
+        merchantPhoneNumber: '',
+        merchantLogo: '',
+        pageBackgroudImg: '',
+        guideComment: ''
+      }
+    };
+  },
+
+  props: {
+    content: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    content: {
+      handler(val) {
+        if (val) {
+          const { templateName, templateCode, templateId, pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment } = val;
+          this.card = { templateName, templateCode, templateId, pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment };
+        }
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+.card {
+  width: 384px;
+  height: 687px;
+  border-radius: 8px;
+  border: 1px solid #dcdfe6;
+  background: #e5e7ed;
+  .head {
+    width: 384px;
+    height: 87px;
+
+    border-radius: 8px 8px 0px 0px;
+    box-sizing: border-box;
+    padding: 15px 16px 8px 16px;
+  }
+  .operation {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 7px;
+    .idNum {
+      font-size: 12px;
+      color: #606266;
+      line-height: 17px;
+    }
+  }
+  .tempName {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    line-height: 20px;
+  }
+  .cardName {
+    display: flex;
+    justify-content: space-between;
+    .createName,
+    .createTime {
+      font-size: 12px;
+
+      color: #606266;
+      line-height: 17px;
+    }
+  }
+  .iphone-content {
+    width: 384px;
+    height: 600px;
+    display: flex;
+    justify-content: center;
+    background: #ffffff;
+
+    border-radius: 0px 0px 8px 8px;
+  }
+  .iphone {
+    width: 320px;
+    height: 570px;
+    background: #f7f8fa;
+    box-shadow: 0px 4px 8px 0px rgba(220, 223, 230, 0.6);
+    border-radius: 8px;
+    position: relative;
+    margin-top: 11px;
+    .content {
+      width: 320px;
+      height: 475px;
+      background: #ffffff;
+      border-radius: 8px;
+      top: 95px;
+      left: 0;
+      box-sizing: border-box;
+      padding: 20px 16px;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .bgImg {
+        position: absolute;
+        width: 100%;
+        border-radius: 8px;
+        top: 0;
+        z-index: 0;
+        max-height: 100%;
+      }
+      .enterpriseInfo {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+        z-index: 100;
+        margin-bottom: 19px;
+        .logo {
+          width: 48px;
+          height: 48px;
+          background: #f6f6f6;
+          border-radius: 60px;
+          img {
+            width: 48px;
+            height: 48px;
+            border-radius: 60px;
+          }
+        }
+        .name {
+          margin-left: 10px;
+
+          font-size: 14px;
+          font-weight: 500;
+          color: #242835;
+
+          line-height: 20px;
+          width: 80%;
+        }
+      }
+      .QRcode {
+        z-index: 100;
+        width: 236px;
+        height: 236px;
+        background: #f6f6f6;
+        background-image: url('../../../../../assets/QRcode.png');
+        background-size: 236px auto;
+      }
+      .leadingText {
+        z-index: 100;
+        font-size: 12px;
+        color: #7f818a;
+        line-height: 17px;
+        width: 88%;
+        margin-top: 16px;
+        height: 50px;
+        text-align: center;
+      }
+      .enterpriseNum {
+        z-index: 100;
+        min-width: 160px;
+        margin-top: 25px;
+        height: 40px;
+        box-sizing: border-box;
+        border-radius: 40px;
+        border: 1px solid #9da0a6;
+        display: flex;
+        align-items: center;
+        padding: 9px 12px;
+        line-height: 14px;
+        color: #63666b;
+        font-size: 12px;
+        i {
+          font-size: 17px;
+        }
+        p {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/salesleads/actCodeManage/attractFlowLink/landingPage/list.vue

+<template>
+  <div class="daily-set-content boder-box">
+    <div class="table-condition flex flex-space-between m-b-23">
+      <div class="table-condition-left flex flex-align-center">
+        <el-input placeholder="请输入模板ID/名称、创建人" class="w-260"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+      </div>
+    </div>
+    <div class="tip-text">
+      二维码只是样式预览效果，请勿直接使用
+    </div>
+    <div class="card-content">
+      <card-view :content="item" v-for="item in list" :key="item.templateId" />
+    </div>
+  </div>
+</template>
+<script>
+import cardView from './cardView';
+export default {
+  data() {
+    return {
+      list: [
+        {
+          templateName: '模板名称模板名称模板名称模板名称模板',
+          templateCode: 'MB01123456789012300001',
+          templateId: '1',
+          pageTitle: '页面页面页面页面标题',
+          merchantName: '商户名称商户名称商户名称商户名称商户名称',
+          merchantPhoneNumber: '0571-1234567',
+          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
+          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
+          guideComment: '长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二'
+        },
+        {
+          templateName: '模板名称模板名称模板名称模板名称模板',
+          templateCode: 'MB01123456789012300001',
+          templateId: '2',
+          pageTitle: '页面标题2',
+          merchantName: '商户名称',
+          merchantPhoneNumber: '0571-1234567',
+          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
+          pageBackgroudImg: '',
+          guideComment: '长按识别二维码添加您的专属导购'
+        },
+        {
+          templateName: '模板名称模板名称模板名称模板名称模板',
+          templateCode: 'MB01123456789012300001',
+          templateId: '3',
+          pageTitle: '页面标题3',
+          merchantName: '商户名称',
+          merchantPhoneNumber: '0571-1234567',
+          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
+          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
+          guideComment: '长按识别二维码添加您的专属导购'
+        },
+        {
+          templateName: '模板名称模板名称模板名称模板名称模板',
+          templateCode: 'MB01123456789012300001',
+          templateId: '4',
+          pageTitle: '页面标题4',
+          merchantName: '商户名称',
+          merchantPhoneNumber: '0571-1234567',
+          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
+          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
+          guideComment: '长按识别二维码添加您的专属导购'
+        },
+        {
+          templateName: '模板名称模板名称模板名称模板名称模板',
+          templateCode: 'MB01123456789012300001',
+          templateId: '5',
+          pageTitle: '页面标题5',
+          merchantName: '商户名称',
+          merchantPhoneNumber: '0571-1234567',
+          merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
+          pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
+          guideComment: '长按识别二维码添加您的专属导购'
+        }
+      ]
+    };
+  },
+  components: {
+    cardView
+  },
+  methods: {}
+};
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+.daily-set-content {
+  padding: 20px;
+}
+.card-content {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+</style>

static/css/public.css

@@ -595,6 +595,9 @@ input:focus {
 .w-157 {
     width: 157px;
 }
+.w-260 {
+    width: 260px;
+}
 .w-264 {
     width: 264px;
 }