添加解绑弹层

components/unbind_wechat_article/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="formVisible"
+      width="268px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :center="true"
+    >
+      <div class="form-title" slot="title">
+        解绑账号
+      </div>
+
+      <div class="unbind-main">
+          <el-checkbox v-model="checked">删除所有已抓取的内容</el-checkbox>
+      </div>
+
+      <div class="submit-btn">解除绑定</div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      checked:false,
+      formVisible: false,
+    };
+  },
+  methods: {
+    show() {
+      this.formVisible = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+.form-title {
+  text-align: center;
+  height: 20px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 20px;
+}
+
+.submit-btn {
+  margin: 0 auto;
+
+  width: 188px;
+  height: 46px;
+  background: #308eff;
+  border-radius: 2px;
+
+  text-align: center;
+  line-height: 46px;
+
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+
+  cursor: pointer;
+}
+
+.unbind-main{
+  margin-bottom: 20px;
+}
+</style>

pages/frontend/personal/index.vue

@@ -144,7 +144,9 @@
 
           <Empty v-if="list.length == 0 && !pageLoading">
             <div v-if="isSelf" class="auto-bind-wechat">
-              <span @click="callBindWeChat">绑定社交账号</span>，自动抓取更新
+              <!-- <span @click="callBindWeChat">绑定社交账号</span>，自动抓取更新 -->
+
+               已绑定XXX账号<span @click="unbindWeChat">解绑</span>
             </div>
           </Empty>
 
@@ -191,6 +193,7 @@
       </div>
     </div>
     <BindWeChatArticle ref="bindWeChat"></BindWeChatArticle>
+    <UnBindWeChatArticle ref="unBindWeChat"></UnBindWeChatArticle>
   </div>
 </template>
 
@@ -208,6 +211,7 @@ import PersonalSeoData from "./personalData";
 import moment from "moment";
 import TLevelTag from "@/components/t-level-tag.vue";
 import BindWeChatArticle from "@/components/bind_wechat_article";
+import UnBindWeChatArticle from "@/components/unbind_wechat_article";
 
 export default {
   name: "PersonalIndex",
@@ -219,7 +223,8 @@ export default {
     CourseItem,
     Empty,
     TLevelTag,
-    BindWeChatArticle
+    BindWeChatArticle,
+    UnBindWeChatArticle
   },
   data() {
     return {
@@ -503,6 +508,9 @@ export default {
         uid: this.userinfo.uid,
         avatar: this.userinfo.icon_url
       });
+    },
+    unbindWeChat(){
+      this.$refs['unBindWeChat'].show()
     }
   }
 };