|
| 1 | +<template> |
| 2 | + <div class="appsync-wrapper"> |
| 3 | + <!-- <el-button type="text" @click="dialogVisible = true">Sync</el-button> --> |
| 4 | + <el-dialog |
| 5 | + title="同步文章" |
| 6 | + class="dialogClass" |
| 7 | + :visible.sync="dialogVisible" |
| 8 | + width="500" |
| 9 | + > |
| 10 | + <el-container class="syncpost-block"> |
| 11 | + <el-aside |
| 12 | + width="150px" |
| 13 | + style="display: flex; justify-content: center; align-items: center" |
| 14 | + > |
| 15 | + <img |
| 16 | + class="align-self-center mr-3" |
| 17 | + :src="currentArtitle.thumb" |
| 18 | + width="150" |
| 19 | + referrerPolicy="no-referrer" |
| 20 | + alt="Generic placeholder image" |
| 21 | + /> |
| 22 | + </el-aside> |
| 23 | + <el-main> |
| 24 | + <h5 |
| 25 | + style=" |
| 26 | + font-weight: bold; |
| 27 | + font-weight: bold; |
| 28 | + font-size: 16px; |
| 29 | + margin: 0; |
| 30 | + " |
| 31 | + > |
| 32 | + {{ currentArtitle.title }} |
| 33 | + </h5> |
| 34 | + <p> |
| 35 | + {{ currentArtitle.desc }} |
| 36 | + </p> |
| 37 | + </el-main> |
| 38 | + </el-container> |
| 39 | + |
| 40 | + <div |
| 41 | + class="" |
| 42 | + v-if="!extensionInstalled" |
| 43 | + style="padding-top: 30px; padding-bottom: 30px; padding-left: 10px" |
| 44 | + > |
| 45 | + <div v-if="checkCount > 2"> |
| 46 | + 未检测到插件<br /> |
| 47 | + 请安装文章同步助手Chrome插件 <br /> |
| 48 | + <a |
| 49 | + href="https://www.wechatsync.com/?utm_source=syncicon#install" |
| 50 | + target="_blank" |
| 51 | + >点击安装</a |
| 52 | + > |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + |
| 56 | + <div v-if="extensionInstalled"> |
| 57 | + <h6>账号</h6> |
| 58 | + <div class="all-pubaccounts" v-if="!submitting"> |
| 59 | + <div class="account-item" v-for="account in allAccounts"> |
| 60 | + <el-checkbox v-model="account.checked"> |
| 61 | + <img |
| 62 | + :src="account.icon ? account.icon : ''" |
| 63 | + class="icon" |
| 64 | + height="20" |
| 65 | + style="vertical-align: -6px; height: 20px !important" |
| 66 | + /> |
| 67 | + {{ account.title }} |
| 68 | + </el-checkbox> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + <div class="all-pubaccounts" v-if="submitting && taskStatus"> |
| 72 | + <p v-if="!taskStatus.accounts">等待发布..</p> |
| 73 | + <div |
| 74 | + class="account-item taskStatus" |
| 75 | + v-for="account in taskStatus.accounts" |
| 76 | + > |
| 77 | + <img |
| 78 | + :src="account.icon ? account.icon : ''" |
| 79 | + class="icon" |
| 80 | + height="20" |
| 81 | + style="vertical-align: -6px; height: 20px !important" |
| 82 | + /> |
| 83 | + <span class="name-block">{{ account.title }}</span> |
| 84 | + <span |
| 85 | + style="margin-left: 15px" |
| 86 | + :class="account.status + ' message'" |
| 87 | + > |
| 88 | + <template v-if="account.status == 'uploading'"> |
| 89 | + <div class="lds-dual-ring"></div> |
| 90 | + {{ account.msg || '发布中' }} |
| 91 | + </template> |
| 92 | + |
| 93 | + <template v-if="account.status == 'failed'"> |
| 94 | + 同步失败, 错误内容：{{ account.error }} |
| 95 | + </template> |
| 96 | + |
| 97 | + <template v-if="account.status == 'done' && account.editResp"> |
| 98 | + 同步成功 |
| 99 | + <a |
| 100 | + :href="account.editResp.draftLink" |
| 101 | + v-if="account.type != 'wordpress' && account.editResp" |
| 102 | + style="margin-left: 5px" |
| 103 | + referrerPolicy="no-referrer" |
| 104 | + target="_blank" |
| 105 | + >查看草稿</a |
| 106 | + > |
| 107 | + </template> |
| 108 | + </span> |
| 109 | + </div> |
| 110 | + </div> |
| 111 | + </div> |
| 112 | + <span slot="footer" class="dialog-footer"> |
| 113 | + <el-button |
| 114 | + size="small" |
| 115 | + v-if="!submitting" |
| 116 | + type="primary" |
| 117 | + @click="doSubmit" |
| 118 | + >同步</el-button |
| 119 | + > |
| 120 | + <el-button |
| 121 | + size="small" |
| 122 | + v-if="submitting" |
| 123 | + type="primary" |
| 124 | + @click=" |
| 125 | + submitting = false |
| 126 | + dialogVisible = false |
| 127 | + " |
| 128 | + >关闭</el-button |
| 129 | + > |
| 130 | + </span> |
| 131 | + </el-dialog> |
| 132 | + </div> |
| 133 | +</template> |
| 134 | +<script> |
| 135 | +const toBase64 = (file) => |
| 136 | + new Promise((resolve, reject) => { |
| 137 | + const reader = new FileReader() |
| 138 | + reader.readAsDataURL(file) |
| 139 | + reader.onload = () => resolve(reader.result) |
| 140 | + reader.onerror = (error) => reject(error) |
| 141 | + }) |
| 142 | +
|
| 143 | +import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue' |
| 144 | +export default { |
| 145 | + name: '', |
| 146 | + components: { ScaleLoader }, |
| 147 | + data() { |
| 148 | + return { |
| 149 | + visible: false, |
| 150 | + submitting: false, |
| 151 | + list: [], |
| 152 | + value: '', |
| 153 | + dialogVisible: false, |
| 154 | + extensionInstalled: false, |
| 155 | + checkCount: 0, |
| 156 | + allAccounts: [], |
| 157 | + currentArtitle: { |
| 158 | + content: '', |
| 159 | + }, |
| 160 | + taskStatus: {}, |
| 161 | + markdownOption: {}, |
| 162 | + } |
| 163 | + }, |
| 164 | + mounted() { |
| 165 | + var self = this |
| 166 | + ;(function check() { |
| 167 | + self.extensionInstalled = typeof window.$syncer != 'undefined' |
| 168 | + self.checkCount++ |
| 169 | + if (self.extensionInstalled) { |
| 170 | + self.loadAccounts() |
| 171 | + return |
| 172 | + } |
| 173 | + setTimeout(check, 800) |
| 174 | + })() |
| 175 | +
|
| 176 | + function checkPost(post) { |
| 177 | + if (!post.title) throw new Error('title不能为空') |
| 178 | + if (!post.content) throw new Error('content不能为空') |
| 179 | + } |
| 180 | +
|
| 181 | + window.setupPost = function (post) { |
| 182 | + checkPost(post) |
| 183 | + self.currentArtitle = post |
| 184 | + } |
| 185 | + window.syncPost = function (post) { |
| 186 | + checkPost(post) |
| 187 | + self.currentArtitle = post |
| 188 | + self.dialogVisible = true |
| 189 | + } |
| 190 | + }, |
| 191 | + methods: { |
| 192 | + loadAccounts() { |
| 193 | + var allAccounts = [] |
| 194 | + var accounts = [] |
| 195 | + var self = this |
| 196 | + function getAccounts() { |
| 197 | + window.$syncer.getAccounts(function (resp) { |
| 198 | + console.log('allAccounts', resp) |
| 199 | + self.allAccounts = resp |
| 200 | + }) |
| 201 | + } |
| 202 | + getAccounts() |
| 203 | + }, |
| 204 | + async doSubmit() { |
| 205 | + var self = this |
| 206 | +
|
| 207 | + function getPost() { |
| 208 | + var post = {} |
| 209 | + var article = self.currentArtitle |
| 210 | + post.title = article.title |
| 211 | + if (article.content) { |
| 212 | + post.content = article.content |
| 213 | + } else if (article.markdown) { |
| 214 | + post.markdown = article.content |
| 215 | + } |
| 216 | + if (article.thumb) { |
| 217 | + post.thumb = article.thumb |
| 218 | + } |
| 219 | +
|
| 220 | + post.desc = article.desc |
| 221 | + ? article.desc |
| 222 | + : article.content.substring(0, 20) |
| 223 | + // post.desc = document.body.getAttribute('data-msg_desc'); |
| 224 | + console.log(post) |
| 225 | + return post |
| 226 | + } |
| 227 | +
|
| 228 | + var selectedAc = this.allAccounts.filter((a) => { |
| 229 | + return a.checked |
| 230 | + }) |
| 231 | + // console.log(selectedAc, this.$refs.editor.d_render); |
| 232 | + // return; |
| 233 | + this.$message('准备同步') |
| 234 | + window.$syncer.addTask( |
| 235 | + { |
| 236 | + post: getPost(), |
| 237 | + accounts: selectedAc, |
| 238 | + }, |
| 239 | + function (status) { |
| 240 | + self.taskStatus = status |
| 241 | + console.log('status', status) |
| 242 | + }, |
| 243 | + function () { |
| 244 | + console.log('send') |
| 245 | + } |
| 246 | + ) |
| 247 | +
|
| 248 | + // chrome.extension.sendMessage( |
| 249 | + // { |
| 250 | + // action: 'addTask', |
| 251 | + // task: { |
| 252 | + // post: getPost(), |
| 253 | + // accounts: selectedAc, |
| 254 | + // }, |
| 255 | + // }, |
| 256 | + // function (resp) {} |
| 257 | + // ) |
| 258 | +
|
| 259 | + this.submitting = true |
| 260 | + this.taskStatus = {} |
| 261 | + }, |
| 262 | +
|
| 263 | + async imgAdd(pos, $file) { |
| 264 | + var sortOrderTypes = [ |
| 265 | + 'toutiao', |
| 266 | + 'jianshu', |
| 267 | + 'zhihu', |
| 268 | + 'weibo', |
| 269 | + 'douban', |
| 270 | + 'segmentfault', |
| 271 | + 'weixin', |
| 272 | + ] |
| 273 | + .map((_) => this.allAccounts.filter((a) => a.type === _)[0]) |
| 274 | + .filter((_) => _) |
| 275 | +
|
| 276 | + if (sortOrderTypes.length === 0) { |
| 277 | + this.$message('当前未登陆任何自媒体平台，无法自动上传图片') |
| 278 | + return |
| 279 | + } |
| 280 | +
|
| 281 | + var base64Url = await toBase64($file) |
| 282 | + var accountCurrent = sortOrderTypes[0] |
| 283 | + var actionData = { |
| 284 | + src: base64Url, |
| 285 | + account: accountCurrent, |
| 286 | + } |
| 287 | + console.log('actionData', actionData) |
| 288 | + window.$syncer.uploadImage(actionData, (res) => { |
| 289 | + console.log('res', res) |
| 290 | + if (accountCurrent.type === 'zhihu') { |
| 291 | + res.result.url = [res.result.url, '_r.jpg'].join('') |
| 292 | + } |
| 293 | + this.$refs.editor.$img2Url(pos, res.result.url) |
| 294 | + }) |
| 295 | + console.log('imgAdd', pos, $file, sortOrderTypes, this.allAccounts) |
| 296 | + }, |
| 297 | + }, |
| 298 | +} |
| 299 | +</script> |
| 300 | +<style> |
| 301 | +.all-pubaccounts { |
| 302 | +} |
| 303 | +
|
| 304 | +.account-item img { |
| 305 | + margin-right: 5px; |
| 306 | +} |
| 307 | +
|
| 308 | +.account-item { |
| 309 | + /* height: 30px; */ |
| 310 | + line-height: 30px; |
| 311 | + padding: 0 0px; |
| 312 | + font-size: 14px; |
| 313 | +} |
| 314 | +
|
| 315 | +.syncpost-block { |
| 316 | + border-bottom: 1px solid rgb(233, 236, 239); |
| 317 | +} |
| 318 | +
|
| 319 | +.dialogClass .el-dialog__header { |
| 320 | + border-bottom: 1px solid rgb(233, 236, 239); |
| 321 | + padding-bottom: 20px; |
| 322 | +} |
| 323 | +
|
| 324 | +.dialogClass .el-dialog__footer { |
| 325 | + border-top: 1px solid rgb(233, 236, 239); |
| 326 | +} |
| 327 | +
|
| 328 | +.dialogClass .el-dialog__body { |
| 329 | + padding-top: 10px; |
| 330 | + padding-bottom: 10px; |
| 331 | +} |
| 332 | +</style> |
0 commit comments