update: 短信打开小程序

src/components/linktools-fulls/index.vue

@@ -445,7 +445,7 @@ import { setTimeout } from 'timers';
 export default {
   name: 'links-tool',
 
-  props: ['linkVisible','showType','projectName', 'linkData', 'canSave'],
+  props: ['linkVisible','showType','projectName', 'linkData', 'canSave', 'remove'],
 
   data () {
     return {
@@ -2027,6 +2027,11 @@ export default {
         this.loading = false;
         var resData = res.data
         if (resData.errorCode == 0) {
+          if (Array.isArray(this.remove)) {
+            resData.result = resData.result.filter(item => {
+              return !this.remove.some(el => item.linkId == el);
+            });
+          }
           that.setLevelListOptions(Array.isArray(resData.result) ? resData.result : [], num, twoType)
           return;
         }

src/service/api/commonApi.js

@@ -27,3 +27,8 @@ export const listEntepriseWeimobShop = params => requests(MARKET_PREFIX + 'list-
 
 // 根据微盟店铺id查询所有店铺卡券   list-enteprise-weimob-coupon?wmPid=xxx
 export const listEntepriseWeimobCoupon = params => requests(MARKET_PREFIX + 'list-enteprise-weimob-coupon', params);
+
+// 生成短链接
+export const compressLink = params => requests(GOODS_PREFIX + 'compress-link', params);
+// 使用小程序链接生成中转页地址
+export const getTransferLink = params => requests(GOODS_PREFIX + '/get-transfer-link', params);

src/views/message/addTemp.vue

@@ -24,6 +24,11 @@
           </el-form-item>
           <el-form-item label="短信内容" prop="content" class="pb10">
             <dm-input type="textarea" placeholder="亲爱的{2}，{3}是你的生日，祝您生日快乐，心想事成~" :rows="4" v-model="form.content" :maxlength="450"></dm-input>
+            <div class="sms-temp__btns">
+              <!-- wxaLinkFlag 1：有权限 0：无权限 -->
+              <el-button type="text" v-if="userData.wxaLinkFlag == 1" @click="transferLink.show = true">插入小程序链接</el-button>
+              <el-button type="text" @click="reduceLink.show = true">压缩H5链接</el-button>
+            </div>
           </el-form-item>
           <el-form-item label="申请说明" prop="remark">
             <dm-input type="textarea" :rows="4" v-model="form.remark" :maxlength="120"></dm-input>
@@ -70,13 +75,66 @@
       <el-button type="primary" @click="submit('form')">提 交</el-button>
       <el-button @click="$router.go(-1)">返 回</el-button>
     </div>
+    <!-- 压缩链接 -->
+    <el-dialog :visible.sync="reduceLink.show" title="压缩链接" width="798px" @closed="reduceLink.link = ''">
+      <el-form label-width="100px">
+        <el-form-item label="请输入网址：">
+          <dm-input type="textarea" :rows="4" v-model="reduceLink.link" :maxlength="200"></dm-input>
+          <p class="reduce-link-tip">如果链接只能在微信环境下打开，则浏览器会提示需要在微信下打开此链接，但是无法直接跳转到微信</p>
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="reduceLink.show = false">取消</el-button>
+        <el-button type="primary" @click="onReduceLink">生成链接</el-button>
+      </template>
+    </el-dialog>
+    <!-- 插入小程序链接 -->
+    <el-dialog :visible.sync="transferLink.show" title="插入小程序链接" width="878px" @closed="onTransferLinkClose">
+      <el-form label-width="110px">
+        <el-form-item label="链接类型：">
+          <el-button @click="selectLink.show = true">{{ selectLink.linkData.name || '设置小程序链接' }}</el-button>
+        </el-form-item>
+        <el-form-item label="链接有效时长：">
+          <el-select v-model="transferLink.type" style="width: 143px;vertical-align: top">
+            <!-- 0-短期有效，1-长期有效，2-永久有效 -->
+            <el-option label="短期有效" value="0"></el-option>
+            <el-option label="长期有效" value="1"></el-option>
+            <el-option label="永久有效" value="2"></el-option>
+          </el-select>
+          <template v-if="transferLink.type != 2">
+            <el-input-number v-model="transferLink.dayNum" :min="getMin" :max="getMax" controls-position="right" style="width: 90px"></el-input-number>
+            <span class="transfer-link-uint">天</span>
+            <span class="transfer-link-tip">{{ transferLink.type == 0 ? `不能大于${getMax}天` : `大于${getMin}天` }}</span>
+          </template>
+          <p class="transfer-link-tip">长期有效链接（>31天，包含永久有效链接）每个小程序只支持十万，建议商品详情/礼品详情等非永久页面生成短期有效链接（≤31天）。</p>
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="transferLink.show = false">取消</el-button>
+        <el-button type="primary" @click="onTransferLink">生成链接</el-button>
+      </template>
+    </el-dialog>
+    <el-dialog :visible.sync="insertLink.show" title="链接生成">
+      <div class="insert-link">
+        <p class="link-text">{{ insertLink.link }}</p>
+        <el-button type="text" v-clipboard:text="insertLink.link">复制</el-button>
+      </div>
+      <template slot="footer">
+        <el-button @click="insertLink.show = false">上一步</el-button>
+        <el-button type="primary" @click="onInsert">插入链接</el-button>
+      </template>
+    </el-dialog>
+    <linktools :linkVisible.sync="selectLink.show" :linkData="selectLink.linkData" :remove="[5, 35]" :can-save="true" @linkSelect="onSaveLink" /><!-- 链接小工具 - 转赠 -->
   </div>
 </template>
 <script>
+import linktools from '@/components/linktools-fulls/index';
 import { _debounce } from '@/utils/index';
 import { saveTempService, LoadTempInfo } from '@/service/api/messageApi.js';
+import { compressLink, getTransferLink, getUserLogin } from '@/service/api/commonApi.js';
 export default {
   name: 'add-temp',
+  components: { linktools },
   data() {
     return {
       loading: false,
@@ -95,12 +153,48 @@ export default {
         content: { required: true, message: '请输入短信内容', trigger: 'blur' },
         remark: { required: true, message: '请输入申请说明', trigger: 'blur' }
       },
-      editFlag: this.$route.meta.type === 'edit'
+      editFlag: this.$route.meta.type === 'edit',
+      userData: {},
+      // 压缩链接
+      reduceLink: {
+        show: false,
+        link: ''
+      },
+      // 插入小程序链接相关
+      insertLink: {
+        show: false,
+        link: ''
+      },
+      // 转换链接
+      transferLink: {
+        show: false,
+        type: '0', // 0-短期有效，1-长期有效，2-永久有效
+        dayNum: '', // 天数
+        pageId: '' // pageId
+      },
+      // 链接小工具选择链接
+      selectLink: {
+        show: false,
+        linkData: {}
+      }
     };
   },
   computed: {
     asideShow() {
       return this.$store.state.marketing.asideShow;
+    },
+    getMin() {
+      if (this.transferLink.type == 0) {
+        // eslint-disable-next-line
+        this.transferLink.dayNum = 1;
+      } else {
+        // eslint-disable-next-line
+        this.transferLink.dayNum = 32;
+      }
+      return this.transferLink.type == 0 ? 1 : 32;
+    },
+    getMax() {
+      return this.transferLink.type == 0 ? 31 : Infinity;
     }
   },
   created() {
@@ -110,6 +204,7 @@ export default {
     } else {
       this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '短信营销', path: '' }, { name: '模板库', path: '/message/temp' }, { name: '新增模板', path: '' }]); // eslint-disable-line
     }
+    this.getUserData();
   },
   methods: {
     submit: _debounce(function(formName) {
@@ -148,11 +243,72 @@ export default {
         gicSmsTemplateId: res.result.gicSmsTemplateId
       };
       this.loading = false;
+    },
+    getUserData() {
+      getUserLogin().then(res => {
+        this.userData = res.result || {};
+      });
+    },
+    // 生成短连接
+    onReduceLink() {
+      if (!this.reduceLink.link) {
+        return this.$tips({ type: 'error', message: '请输入网址' });
+      }
+      this.loading = true;
+      compressLink({ link: this.reduceLink.link }, false, false, 'post')
+        .then(res => {
+          this.insertLink.show = true;
+          this.insertLink.link = res.result;
+        })
+        .finally(() => (this.loading = false));
+    },
+    // 保存链接小工具返回的链接数据
+    onSaveLink(linkData) {
+      this.selectLink.linkData = linkData;
+    },
+    onTransferLinkClose() {
+      this.selectLink.linkData = {};
+      this.transferLink.type = '0';
+      this.transferLink.dayNum = 1;
+    },
+    // 将小程序链接转换成中转页链接
+    onTransferLink() {
+      if (!this.selectLink.linkData.id) {
+        return this.$tips({ type: 'error', message: '请选择小程序链接' });
+      }
+      this.loading = true;
+      const { type, dayNum } = this.transferLink;
+      getTransferLink(Object.assign({ type, dayNum }, { pageId: this.selectLink.linkData.params.pageId }), false, false, 'post')
+        .then(res => {
+          this.insertLink.link = res.result;
+          this.insertLink.show = true;
+        })
+        .finally(() => (this.loading = false));
+    },
+    onInsert() {
+      this.form.content = `${this.form.content} ${this.insertLink.link}`;
+      this.insertLink.show = false;
+      this.reduceLink.show = false;
+      this.transferLink.show = false;
     }
   }
 };
 </script>
 <style lang="scss" scoped>
+.sms-temp__btns {
+  margin-top: 5px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  /deep/ .el-button {
+    color: #606266;
+    font-size: 12px;
+    & + .el-button {
+      padding-left: 10px;
+      border-left: 1px solid #c0c4cc;
+    }
+  }
+}
 .sms-temp__tips {
   padding: 8px 16px;
   line-height: 23px;
@@ -174,4 +330,39 @@ export default {
     color: #606266;
   }
 }
+.reduce-link-tip {
+  margin-top: 5px;
+  text-align: right;
+  font-size: 12px;
+  color: #606266;
+  line-height: 17px;
+}
+.transfer-link-uint {
+  margin: 0 15px 0 8px;
+  font-size: 14px;
+  color: #303133;
+  line-height: 20px;
+}
+.transfer-link-tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 17px;
+}
+.insert-link {
+  padding: 18px 12px;
+  background: #f3f6f9;
+  .link-text {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+    max-width: 80%;
+    font-size: 14px;
+    font-weight: 400;
+    color: #606266;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
 </style>