a

src/components/pintuan/pintuanMsg.vue

+<style>
+  .weixinappmsg{
+      position: relative;
+  }
+  .weixinappmsg .mimitBody {
+    padding: 20px;
+    background-color: #fff;
+    margin: 10px 0 20px 0;
+    display: table;
+    width: 100%;
+  }
+
+  .weixinappmsg .mimitList {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .weixinappmsg .mimitBody .el-tag {
+    min-width: 120px;
+    padding-right: 50px;
+  }
+
+  .weixinappmsg .el-button--small {
+    padding: 9px 15px;
+  }
+  .wexin_Header{
+    padding: 0 20px;
+    height: 56px;
+    line-height: 56px;
+    background-color: #fff;
+    margin-bottom: 10px;
+  }
+  .weixinTopBtn{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 2;
+  }
+  .weixin_warmTips{
+    margin: 0px 20px 20px;
+    background-color: rgb(244, 244, 245);
+    padding: 10px 15px;
+    color: rgb(144, 147, 153);
+    display: inline-block;
+    font-size: 15px;
+  }
+</style>
+<template>
+  <div class="weixinappmsg">
+    <!--<el-button class="weixinTopBtn" type="primary" size="small">一键添加订阅信息</el-button>-->
+    <div class="wexin_Header">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="微信小程序" name="1"></el-tab-pane>
+        </el-tabs>
+    </div>
+    <template v-if="checkIndex==1">
+      <div class="mimitBody">
+        <div class="el-col el-col-24">
+          <div class="weixin_warmTips">温馨提示：获取前请先确认您已获得订阅消息的使用权限，并且订阅消息中没有任何数据。获取后请不要到小程序后台 删除相应的订阅消息，否则会影响订阅消息正常使用。</div>
+          <el-form label-width="300px">
+            <el-form-item label="拼团成功通知(类目: 服装/鞋/箱包 )">
+              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="wechatMsg.sucMsg">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+            <el-form-item label="拼团失败通知(类目: 服装/鞋/箱包 )">
+              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="wechatMsg.falMsg">
+              </el-input>
+              <el-button plain size="small">查看订阅消息示例</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <el-button size="small" type="primary" @click="saveMsg()">保 存</el-button>
+      <el-button size="small" type="primary">生成测试二维码</el-button>
+    </template>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        //商城订阅消息
+        activeName:'1',
+        checkIndex:1,
+        wechatMsg:{
+            sucMsg:'',
+            falMsg:''
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //切换
+      handleClick(tab){
+        this.checkIndex = tab.name;
+      },
+      //保存信息
+      saveMsg(){
+
+      }
+    },
+    mounted() {
+    }
+  };
+
+</script>