From 0e669aab002c3a63f62ce68d7c5acd1a7154882d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9D=E6=A2=A6=E5=9B=AD?= <zhumengyua@qq.com>
Date: Wed, 6 Mar 2024 16:49:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98-fix=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E8=B7=B3=E8=BD=AC=E4=B8=A2=E5=A4=B1=E5=92=8C?=
 =?UTF-8?q?name=E4=B8=8D=E5=AD=98=E5=9C=A8bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ImgCropper.vue                     |   5 -
 pages/admin.vue                               |  24 +-
 .../admin/{products.vue => product/index.vue} | 115 ++-
 pages/admin/product/post/_product_id.vue      | 853 +++++++++---------
 pages/user/settings/account.vue               |   3 +-
 5 files changed, 499 insertions(+), 501 deletions(-)
 rename pages/admin/{products.vue => product/index.vue} (67%)

diff --git a/components/ImgCropper.vue b/components/ImgCropper.vue
index 8b0e8b9..3c45736 100644
--- a/components/ImgCropper.vue
+++ b/components/ImgCropper.vue
@@ -75,13 +75,8 @@ export default {
   methods: {
     onSubmit() {
       this.$refs.cropper.getCropData(data => {
-        // console.log(data)
         this.$emit('onSubmit',data)
       });
-
-      /*
-            this.$emit('onSubmit',this.cropImg)
-      */
     },
     onOpen() {
       this.oldAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
diff --git a/pages/admin.vue b/pages/admin.vue
index d5bd9a0..ca02b03 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row type="flex" justify="center" :gutter="8">
     <el-col v-if="hasPermissions" :span="20">
-      <el-col :span="4">
+      <el-col :span="4" v-if="menus">
         <el-menu
           :default-active="activeMenu"
           class="el-menu-vertical-demo"
           @select="handleSelectMenu">
           <template v-for="menu in menus">
-            <el-menu-item :key="menu.name" :index="menu.name">
+            <el-menu-item v-if="!(menu.isEdit)||false" :key="menu.name" :index="menu.name">
               <i :class="menu.icon"></i>
               <span slot="title">{{ menu.title }}</span>
             </el-menu-item>
@@ -131,10 +131,18 @@ export default {
         },
         {
           title: '产品管理',
-          name: 'admin-products',
-          path: '/admin/products',
+          name: 'admin-product',
+          path: '/admin/product/index',
           icon: 'el-icon-box',
           closable: true
+        },
+        {
+          title: '产品编辑',
+          name: 'admin-product-post-product_id',
+          path: '/admin/product/post/:id?',
+          icon: 'el-icon-postcard',
+          closable: true,
+          isEdit: true
         }
       ]
     }
@@ -189,11 +197,13 @@ export default {
         _ts.$store.commit('admin/pushTags', _ts.menus[index])
         reset = '1'
       }
+      let params = _ts.$route.params
+      params.reset = reset
+      let query = _ts.$route.query
       _ts.$router.push({
         name: item,
-        params: {
-          reset: reset
-        }
+        params,
+        query
       })
     },
     handleSelectMenu(item) {
diff --git a/pages/admin/products.vue b/pages/admin/product/index.vue
similarity index 67%
rename from pages/admin/products.vue
rename to pages/admin/product/index.vue
index 9286384..1aea2f5 100644
--- a/pages/admin/products.vue
+++ b/pages/admin/product/index.vue
@@ -7,6 +7,9 @@
           <el-breadcrumb-item>产品管理</el-breadcrumb-item>
         </el-breadcrumb>
       </el-col>
+      <el-col>
+        <el-button type="primary" @click="handleAdd">新增产品</el-button>
+      </el-col>
       <el-col>
         <el-table
           :data="products.list"
@@ -74,43 +77,39 @@
         </el-pagination>
       </el-col>
     </el-row>
-    <el-dialog :title="`物流公司-${isEdit?'修改':'新增'}项目`" :visible.sync='editVisible'
-               center width='880px'>
-      <el-form ref='formStore' :model='formStore' :rules='rules' label-poionsit='right' label-width='110px'>
-        <div style="margin-bottom:20px">
-          <img @click="cropperVisible=true" :src="formStore.productImgUrl"
-               style="width: 120px;height: 120px;margin: 0 auto;display: block">
-        </div>
+    <!--    <el-dialog :title="`物流公司-${isEdit?'修改':'新增'}项目`" :visible.sync='editVisible'-->
+    <!--               center width='880px'>-->
+    <!--      <el-form ref='formStore' :model='formStore' :rules='rules' label-poionsit='right' label-width='110px'>-->
+    <!--        <div style="margin-bottom:20px">-->
+    <!--          <img @click="cropperVisible=true" :src="formStore.productImgUrl"-->
+    <!--               style="width: 120px;height: 120px;margin: 0 auto;display: block">-->
+    <!--        </div>-->
 
-        <el-form-item label='产品名称' prop='productTitle'>
-          <el-input v-model='formStore.productTitle' placeholder='请输入产品名称'/>
-        </el-form-item>
-        <el-form-item label='产品价格' prop='code'>
-          <el-input v-model='formStore.productPrice' placeholder='请输入产品价格'/>
-        </el-form-item>
-        <el-form-item label='产品描述' prop='type'>
-          <el-input v-model='formStore.productDescription' placeholder='请输入产品描述'/>
-        </el-form-item>
-        <el-form-item label='tags' prop='order'>
-          <el-input v-model='formStore.tags' placeholder='请输入tags'/>
-        </el-form-item>
-      </el-form>
-      <span slot='footer' class='dialog-footer'>
-        <el-button @click='cropperVisible = false'>取 消</el-button>
-                <el-button type='primary' @click='handelStore'>确 定</el-button>
-      </span>
-    </el-dialog>
-    <ImgCropper append-to-body @onSubmit="updateUser" :visible.sync='cropperVisible'
-                :avatarUrl="formStore.productImgUrl||''"></ImgCropper>
+    <!--        <el-form-item label='产品名称' prop='productTitle'>-->
+    <!--          <el-input v-model='formStore.productTitle' placeholder='请输入产品名称'/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label='产品价格' prop='code'>-->
+    <!--          <el-input v-model='formStore.productPrice' placeholder='请输入产品价格'/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label='产品描述' prop='type'>-->
+    <!--          <el-input v-model='formStore.productDescription' placeholder='请输入产品描述'/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label='tags' prop='order'>-->
+    <!--          <el-input v-model='formStore.tags' placeholder='请输入tags'/>-->
+    <!--        </el-form-item>-->
+    <!--      </el-form>-->
+    <!--      <span slot='footer' class='dialog-footer'>-->
+    <!--        <el-button @click='cropperVisible = false'>取 消</el-button>-->
+    <!--                <el-button type='primary' @click='handelStore'>确 定</el-button>-->
+    <!--      </span>-->
+    <!--    </el-dialog>-->
 
   </div>
 </template>
 
 <script>
-import ImgCropper from "~/components/ImgCropper.vue";
-
 import {mapState} from 'vuex';
-import VueCropper from "vue-cropper";
+// import VueCropper from "vue-cropper";
 
 const rules = {
   productTitle: [
@@ -121,7 +120,7 @@ const rules = {
 
 }
 export default {
-  name: "products",
+  name: "productsList",
   middleware: 'auth',
   fetch() {
     let {store, params, error} = this.$nuxt.context
@@ -146,15 +145,12 @@ export default {
       isEdit: false
     }
   },
-  components: {
-    ImgCropper, VueCropper
-  },
   methods: {
-    onRouter(name, data) {
-      this.$router.push({
-        path: `/${name}/${data}`
-      })
-    },
+    // onRouter(name, data) {
+    //   this.$router.push({
+    //     path: `/${name}/${data}`
+    //   })
+    // },
     toggleStatus(index, product) {
       let _ts = this;
       let title, status;
@@ -206,34 +202,37 @@ export default {
       })
     },
     handleEdit(index, row) {
-      this.formStore = row
-      this.editVisible = true
-      // this.$router.push({
-      //   path: `/admin/product/post/${row.idProduct}`
-      // })
+      // this.formStore = {...row}
+      // this.editVisible = true
+      this.$router.push({
+        path: `/admin/product/post/${row.idProduct}`,
+      })
     },
     handelStore() {
-      //这里是其他信息保存
+      let _ts = this;
+      this.formStore.idProduct = this.formStore.idProduct ? this.formStore.idProduct : 0
+      _ts.$axios[this.formStore.idProduct ? '$put' : '$post']('/api/product/post', this.formStore).then(function (res) {
+        if (res) {
+          console.log('res')
+          // _ts.$router.push({
+          //   path: `/product/${res}`
+          // })
+        }
+      })
     },
     updateUser(data) {
-      //这里是单图片保存
       let _ts = this;
-
       if (data) {
-        // let user = _ts.user;
         this.formStore.productImgUrl = data
-        // user.avatarType = 1
-        _ts.$axios[this.formStore.idProduct ? '$put' : '$post']('/api/product/post', this.formStore).then(function (res) {
-          if (res) {
-            console.log('res')
-            // _ts.$router.push({
-            //   path: `/product/${res}`
-            // })
-          }
-        })
+        this.formStore.productImgType = 1
+        // this.cropperVisible = false
       } else _ts.$message.error('失败，请重试');
-
     },
+    handleAdd() {
+      this.isEdit = false
+      this.formStore = {}
+      this.editVisible = true
+    }
   }
 }
 </script>
diff --git a/pages/admin/product/post/_product_id.vue b/pages/admin/product/post/_product_id.vue
index faaf91a..19b7030 100644
--- a/pages/admin/product/post/_product_id.vue
+++ b/pages/admin/product/post/_product_id.vue
@@ -1,440 +1,435 @@
 <template>
-  <el-row class="products">
-    <el-col v-if="hasPermissions">
-      <el-col>
-        <el-input
-          v-model="productTitle"
-          class="product-title"
-          placeholder="请输入标题"
-          @change="setLocalstorage('title',productTitle)">
-        </el-input>
-      </el-col>
-      <el-col>
-        <div id="contentEditor"></div>
-      </el-col>
-      <el-col style="margin-top: 1rem;">
-        <el-select
-          style="width: 100%;"
-          v-model="productTags"
-          multiple
-          filterable
-          allow-create
-          default-first-option
-          remote
-          :remote-method="remoteMethod"
-          placeholder="请选择文章标签"
-          :loading="loading"
-          @change="setLocalstorage('tags',productTags)">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-col>
-      <el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">
-        <el-button :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
-        <el-button type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
-      </el-col>
-      <el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">
-        <el-button type="danger" :loading="doLoading" @click="deleteArticle" plain>删除</el-button>
-        <el-button v-if="productStatus === '1'" :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
-        <el-button v-if="productStatus === '0'" :loading="doLoading" type="primary" @click="postArticle" plain>更新</el-button>
-        <el-button v-else type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
-      </el-col>
-    </el-col>
-    <el-col v-else class="text-center">
-      <el-alert
-        title="用户无权限"
-        type="warning"
-        center
-        show-icon
-        :closable="false">
-      </el-alert>
-    </el-col>
-  </el-row>
+  <div>
+    test
+    test
+  </div>
 </template>
+<!--<template>-->
+<!--  <el-row class="products">-->
+<!--    <el-col>-->
+<!--      <el-col>-->
+<!--        <el-input-->
+<!--          v-model="productTitle"-->
+<!--          class="product-title"-->
+<!--          placeholder="请输入标题"-->
+<!--          @change="setLocalstorage('title',productTitle)">-->
+<!--        </el-input>-->
+<!--      </el-col>-->
+<!--      <el-col>-->
+<!--        <div id="contentEditor"></div>-->
+<!--      </el-col>-->
+<!--      <el-col style="margin-top: 1rem;">-->
+<!--      </el-col>-->
+<!--      <el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
+<!--        <el-button :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>-->
+<!--        <el-button type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>-->
+<!--      </el-col>-->
+<!--      <el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
+<!--        <el-button type="danger" :loading="doLoading" @click="deleteArticle" plain>删除</el-button>-->
+<!--        <el-button v-if="productStatus === '1'" :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>-->
+<!--        <el-button v-if="productStatus === '0'" :loading="doLoading" type="primary" @click="postArticle" plain>更新</el-button>-->
+<!--        <el-button v-else type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>-->
+<!--      </el-col>-->
+<!--    </el-col>-->
+<!--&lt;!&ndash;    <el-col v-else class="text-center">&ndash;&gt;-->
+<!--&lt;!&ndash;      <el-alert&ndash;&gt;-->
+<!--&lt;!&ndash;        title="用户无权限"&ndash;&gt;-->
+<!--&lt;!&ndash;        type="warning"&ndash;&gt;-->
+<!--&lt;!&ndash;        center&ndash;&gt;-->
+<!--&lt;!&ndash;        show-icon&ndash;&gt;-->
+<!--&lt;!&ndash;        :closable="false">&ndash;&gt;-->
+<!--&lt;!&ndash;      </el-alert>&ndash;&gt;-->
+<!--&lt;!&ndash;    </el-col>&ndash;&gt;-->
+<!--  </el-row>-->
+<!--</template>-->
 
-<script>
-import Vue from 'vue';
-import {mapState} from 'vuex';
-import apiConfig from '~/config/api.config';
+<!--<script>-->
+<!--import Vue from 'vue';-->
+<!--import {mapState} from 'vuex';-->
+<!--import apiConfig from '~/config/api.config';-->
 
-export default {
-  name: "PostProducts",
-  middleware: 'auth',
-  validate({params, store}) {
-    if (typeof params.product_id === 'undefined') {
-      return true;
-    }
-    return params.product_id && !isNaN(Number(params.product_id))
-  },
-  asyncData({store, params, error}) {
-    return Promise.all([
-      store.dispatch('product/fetchPostDetail', params)
-        .catch(err => error({statusCode: 404}))
-    ])
-  },
-  computed: {
-    ...mapState({
-      product: state => state.product.detail.data
-    }),
-    hasPermissions() {
-      let account = this.$store.state.auth.user?.nickname;
-      if (account) {
-        if (this.$route.params.product_id) {
-          if (account === this.product.productAuthor.userNickname) {
-            return true;
-          }
-        } else {
-          return true;
-        }
-      }
-      return this.$auth.hasScope('blog_admin') || this.$auth.hasScope('admin');
-    }
-  },
-  data() {
-    return {
-      contentEditor: null,
-      tokenURL: {
-        URL: '',
-        linkToImageURL: '',
-        token: ''
-      },
-      idArticle: 0,
-      productTitle: '',
-      productContent: '',
-      productType: 0,
-      productTags: [],
-      productStatus: '0',
-      options: [],
-      list: [],
-      loading: false,
-      doLoading: false,
-      isEdit: false,
-      notificationFlag: true
-    }
-  },
-  methods: {
-    _initEditor(data) {
-      let _ts = this;
+<!--export default {-->
+<!--  name: "PostProducts",-->
+<!--  middleware: 'auth',-->
+<!--  validate({params, store}) {-->
+<!--    if (typeof params.product_id === 'undefined') {-->
+<!--      return true;-->
+<!--    }-->
+<!--    return params.product_id && !isNaN(Number(params.product_id))-->
+<!--  },-->
+<!--  asyncData({store, params, error}) {-->
+<!--    return Promise.all([-->
+<!--      store.dispatch('product/fetchPostDetail', params)-->
+<!--        .catch(err => error({statusCode: 404}))-->
+<!--    ])-->
+<!--  },-->
+<!--  computed: {-->
+<!--    ...mapState({-->
+<!--      product: state => state.product.detail.data-->
+<!--    }),-->
+<!--    // hasPermissions() {-->
+<!--    //   let account = this.$store.state.auth.user?.nickname;-->
+<!--    //   if (account) {-->
+<!--    //     if (this.$route.params.product_id) {-->
+<!--    //       if (account === this.product.productAuthor.userNickname) {-->
+<!--    //         return true;-->
+<!--    //       }-->
+<!--    //     } else {-->
+<!--    //       return true;-->
+<!--    //     }-->
+<!--    //   }-->
+<!--    //   return this.$auth.hasScope('blog_admin') || this.$auth.hasScope('admin');-->
+<!--    // }-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      contentEditor: null,-->
+<!--      tokenURL: {-->
+<!--        URL: '',-->
+<!--        linkToImageURL: '',-->
+<!--        token: ''-->
+<!--      },-->
+<!--      formStore:{-->
+<!--        idArticle: 0,-->
+<!--        productTitle: '',-->
+<!--        productContent: '',-->
+<!--        productType: 0,-->
+<!--        productTags: [],-->
+<!--        productStatus: '0',-->
+<!--      },-->
+<!--      idArticle: 0,-->
+<!--      productTitle: '',-->
+<!--      productContent: '',-->
+<!--      productType: 0,-->
+<!--      productTags: [],-->
+<!--      productStatus: '0',-->
+<!--      options: [],-->
+<!--      list: [],-->
+<!--      loading: false,-->
+<!--      doLoading: false,-->
+<!--      isEdit: false,-->
+<!--      notificationFlag: true-->
+<!--    }-->
+<!--  },-->
+<!--  methods: {-->
+<!--    _initEditor(data) {-->
+<!--      let _ts = this;-->
 
-      let toolbar = [
-        'emoji',
-        'headings',
-        'bold',
-        'italic',
-        'strike',
-        'link',
-        '|',
-        'list',
-        'ordered-list',
-        'check',
-        'outdent',
-        'indent',
-        '|',
-        'quote',
-        'line',
-        'code',
-        'inline-code',
-        'insert-before',
-        'insert-after',
-        '|',
-        'upload',
-        // 'record',
-        'table',
-        '|',
-        'undo',
-        'redo',
-        '|',
-        'edit-mode',
-        {
-          name: 'more',
-          toolbar: [
-            'fullscreen',
-            'both',
-            'preview',
-            'info'
-          ],
-        }]
-      return new Vue.Vditor(data.id, {
-        toolbar,
-        mode: 'sv',
-        tab: '\t',
-        cdn: apiConfig.VDITOR,
-        cache: {
-          enable: this.$route.params.product_id ? false : true,
-          id: this.$route.params.product_id ? this.$route.params.product_id : '',
-        },
-        after() {
-          _ts.contentEditor.setValue(data.value ? data.value : '');
-        },
-        hint: {
-          emoji: Vue.emoji
-        },
-        preview: {
-          hljs: {
-            enable: true,
-            lineNumber: true,
-            style: 'github'
-          },
-          markdown: {
-            toc: true,
-            autoSpace: true
-          },
-          math: {
-            inlineDigit: true
-          },
-          delay: 500,
-          mode: data.mode,
-          /*url: `${process.env.Server}/api/console/markdown`,*/
-          parse: (element) => {
-            if (element.style.display === 'none') {
-              return
-            }
-            // LazyLoadImage();
-            // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
-          },
-          theme: {
-            cdn: apiConfig.VDITOR_CSS
-          }
-        },
-        upload: {
-          max: 10 * 1024 * 1024,
-          url: this.tokenURL.URL,
-          linkToImgUrl: this.tokenURL.linkToImageURL,
-          token: this.tokenURL.token,
-          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
-          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-          replace('/\\s/g', '')
-        },
-        height: data.height,
-        counter: 102400,
-        resize: {
-          enable: data.resize,
-        },
-        lang: this.$store.state.locale,
-        placeholder: data.placeholder,
-      })
-    },
-    setLocalstorage(type) {
-      if (typeof arguments[0] === 'object') {
-        localStorage.setItem('productTags', arguments[1]);
-        return
-      }
-      switch (type) {
-        case 'title': {
-          localStorage.setItem('product-title', arguments[1])
-          break;
-        }
-        case 'tags': {
-          localStorage.setItem('product-tags', arguments[1]);
-          break;
-        }
-      }
-    },
-    remoteMethod(query) {
-      if (query !== '') {
-        this.loading = true;
-        setTimeout(() => {
-          this.loading = false;
-          this.options = this.list.filter(item => {
-            return item.label.toLowerCase()
-              .indexOf(query.toLowerCase()) > -1;
-          });
-        }, 200);
-      } else {
-        this.options = [];
-      }
-    },
-    deleteArticle() {
-      let _ts = this;
-      _ts.doLoading = true;
-      this.$confirm('确定删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        let id = _ts.$route.params.product_id;
-        _ts.$axios.$delete('/api/product/delete/' + id).then(function (res) {
-          if (res && res.message) {
-            _ts.$message(res.message);
-            return false;
-          }
-          localStorage.removeItem('product-title');
-          localStorage.removeItem('product-tags');
-          _ts.contentEditor.setValue('');
-          _ts.$set(_ts, 'notificationFlag', false);
-          _ts.$router.push({
-            name: 'index'
-          })
-        })
-      }).catch(() => {
-        _ts.doLoading = false;
-      });
+<!--      let toolbar = [-->
+<!--        'emoji',-->
+<!--        'headings',-->
+<!--        'bold',-->
+<!--        'italic',-->
+<!--        'strike',-->
+<!--        'link',-->
+<!--        '|',-->
+<!--        'list',-->
+<!--        'ordered-list',-->
+<!--        'check',-->
+<!--        'outdent',-->
+<!--        'indent',-->
+<!--        '|',-->
+<!--        'quote',-->
+<!--        'line',-->
+<!--        'code',-->
+<!--        'inline-code',-->
+<!--        'insert-before',-->
+<!--        'insert-after',-->
+<!--        '|',-->
+<!--        'upload',-->
+<!--        // 'record',-->
+<!--        'table',-->
+<!--        '|',-->
+<!--        'undo',-->
+<!--        'redo',-->
+<!--        '|',-->
+<!--        'edit-mode',-->
+<!--        {-->
+<!--          name: 'more',-->
+<!--          toolbar: [-->
+<!--            'fullscreen',-->
+<!--            'both',-->
+<!--            'preview',-->
+<!--            'info'-->
+<!--          ],-->
+<!--        }]-->
+<!--      return new Vue.Vditor(data.id, {-->
+<!--        toolbar,-->
+<!--        mode: 'sv',-->
+<!--        tab: '\t',-->
+<!--        cdn: apiConfig.VDITOR,-->
+<!--        cache: {-->
+<!--          enable: this.$route.params.product_id ? false : true,-->
+<!--          id: this.$route.params.product_id ? this.$route.params.product_id : '',-->
+<!--        },-->
+<!--        after() {-->
+<!--          _ts.contentEditor.setValue(data.value ? data.value : '');-->
+<!--        },-->
+<!--        hint: {-->
+<!--          emoji: Vue.emoji-->
+<!--        },-->
+<!--        preview: {-->
+<!--          hljs: {-->
+<!--            enable: true,-->
+<!--            lineNumber: true,-->
+<!--            style: 'github'-->
+<!--          },-->
+<!--          markdown: {-->
+<!--            toc: true,-->
+<!--            autoSpace: true-->
+<!--          },-->
+<!--          math: {-->
+<!--            inlineDigit: true-->
+<!--          },-->
+<!--          delay: 500,-->
+<!--          mode: data.mode,-->
+<!--          /*url: `${process.env.Server}/api/console/markdown`,*/-->
+<!--          parse: (element) => {-->
+<!--            if (element.style.display === 'none') {-->
+<!--              return-->
+<!--            }-->
+<!--            // LazyLoadImage();-->
+<!--            // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);-->
+<!--          },-->
+<!--          theme: {-->
+<!--            cdn: apiConfig.VDITOR_CSS-->
+<!--          }-->
+<!--        },-->
+<!--        upload: {-->
+<!--          max: 10 * 1024 * 1024,-->
+<!--          url: this.tokenURL.URL,-->
+<!--          linkToImgUrl: this.tokenURL.linkToImageURL,-->
+<!--          token: this.tokenURL.token,-->
+<!--          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').-->
+<!--          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').-->
+<!--          replace('/\\s/g', '')-->
+<!--        },-->
+<!--        height: data.height,-->
+<!--        counter: 102400,-->
+<!--        resize: {-->
+<!--          enable: data.resize,-->
+<!--        },-->
+<!--        lang: this.$store.state.locale,-->
+<!--        placeholder: data.placeholder,-->
+<!--      })-->
+<!--    },-->
+<!--    setLocalstorage(type) {-->
+<!--      if (typeof arguments[0] === 'object') {-->
+<!--        localStorage.setItem('productTags', arguments[1]);-->
+<!--        return-->
+<!--      }-->
+<!--      switch (type) {-->
+<!--        case 'title': {-->
+<!--          localStorage.setItem('product-title', arguments[1])-->
+<!--          break;-->
+<!--        }-->
+<!--        case 'tags': {-->
+<!--          localStorage.setItem('product-tags', arguments[1]);-->
+<!--          break;-->
+<!--        }-->
+<!--      }-->
+<!--    },-->
+<!--    remoteMethod(query) {-->
+<!--      if (query !== '') {-->
+<!--        this.loading = true;-->
+<!--        setTimeout(() => {-->
+<!--          this.loading = false;-->
+<!--          this.options = this.list.filter(item => {-->
+<!--            return item.label.toLowerCase()-->
+<!--              .indexOf(query.toLowerCase()) > -1;-->
+<!--          });-->
+<!--        }, 200);-->
+<!--      } else {-->
+<!--        this.options = [];-->
+<!--      }-->
+<!--    },-->
+<!--    deleteArticle() {-->
+<!--      let _ts = this;-->
+<!--      _ts.doLoading = true;-->
+<!--      this.$confirm('确定删除吗?', '提示', {-->
+<!--        confirmButtonText: '确定',-->
+<!--        cancelButtonText: '取消',-->
+<!--        type: 'warning'-->
+<!--      }).then(() => {-->
+<!--        let id = _ts.$route.params.product_id;-->
+<!--        _ts.$axios.$delete('/api/product/delete/' + id).then(function (res) {-->
+<!--          if (res && res.message) {-->
+<!--            _ts.$message(res.message);-->
+<!--            return false;-->
+<!--          }-->
+<!--          localStorage.removeItem('product-title');-->
+<!--          localStorage.removeItem('product-tags');-->
+<!--          _ts.contentEditor.setValue('');-->
+<!--          _ts.$set(_ts, 'notificationFlag', false);-->
+<!--          _ts.$router.push({-->
+<!--            name: 'index'-->
+<!--          })-->
+<!--        })-->
+<!--      }).catch(() => {-->
+<!--        _ts.doLoading = false;-->
+<!--      });-->
 
-    },
-    async postArticle() {
-      let _ts = this;
-      _ts.doLoading = true;
-      let id = _ts.$route.params.product_id;
-      let productContent = _ts.contentEditor.getValue();
-      let productContentHtml = await _ts.contentEditor.getHTML();
-      if (!(_ts.productTitle && productContent)) {
-        _ts.$message("标题/正文不能为空！");
-        _ts.doLoading = false;
-        return false;
-      }
-      let product = {
-        idArticle: _ts.idArticle,
-        productTitle: _ts.productTitle,
-        productContent: productContent,
-        productContentHtml: productContentHtml,
-        productTags: _ts.productTags.join(","),
-        productStatus: 0
-      };
-      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
-        if (res) {
-          if (res.message) {
-            _ts.$message(res.message);
-            _ts.doLoading = false;
-            return false;
-          }
-          localStorage.removeItem('product-title');
-          localStorage.removeItem('product-tags');
-          _ts.contentEditor.setValue('');
-          _ts.$store.commit('product/clearDetailData')
-          _ts.$set(_ts, 'notificationFlag', false);
-          _ts.$router.push({
-            path: `/product/${res}`
-          })
-        }
-      })
+<!--    },-->
+<!--    async postArticle() {-->
+<!--      let _ts = this;-->
+<!--      _ts.doLoading = true;-->
+<!--      let id = _ts.$route.params.product_id;-->
+<!--      let productContent = _ts.contentEditor.getValue();-->
+<!--      let productContentHtml = await _ts.contentEditor.getHTML();-->
+<!--      if (!(_ts.productTitle && productContent)) {-->
+<!--        _ts.$message("标题/正文不能为空！");-->
+<!--        _ts.doLoading = false;-->
+<!--        return false;-->
+<!--      }-->
+<!--      let product = {-->
+<!--        idArticle: _ts.idArticle,-->
+<!--        productTitle: _ts.productTitle,-->
+<!--        productContent: productContent,-->
+<!--        productContentHtml: productContentHtml,-->
+<!--        productTags: _ts.productTags.join(","),-->
+<!--        productStatus: 0-->
+<!--      };-->
+<!--      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {-->
+<!--        if (res) {-->
+<!--          if (res.message) {-->
+<!--            _ts.$message(res.message);-->
+<!--            _ts.doLoading = false;-->
+<!--            return false;-->
+<!--          }-->
+<!--          localStorage.removeItem('product-title');-->
+<!--          localStorage.removeItem('product-tags');-->
+<!--          _ts.contentEditor.setValue('');-->
+<!--          _ts.$store.commit('product/clearDetailData')-->
+<!--          _ts.$set(_ts, 'notificationFlag', false);-->
+<!--          _ts.$router.push({-->
+<!--            path: `/product/${res}`-->
+<!--          })-->
+<!--        }-->
+<!--      })-->
 
-    },
-    async saveArticle() {
-      let _ts = this;
-      _ts.doLoading = true;
-      let id = _ts.$route.params.product_id;
-      let productContent = _ts.contentEditor.getValue();
-      let productContentHtml = await _ts.contentEditor.getHTML();
-      if (!(_ts.productTitle && productContent)) {
-        _ts.$message("标题/正文不能为空！");
-        _ts.doLoading = false;
-        return false;
-      }
-      let product = {
-        idArticle: _ts.idArticle,
-        productTitle: _ts.productTitle,
-        productContent: productContent,
-        productContentHtml: productContentHtml,
-        productTags: _ts.productTags.join(","),
-        productStatus: 1
-      };
-      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
-        if (res) {
-          if (res.message) {
-            _ts.$message(res.message);
-            _ts.doLoading = false;
-            return false;
-          }
-          localStorage.removeItem('product-title');
-          localStorage.removeItem('product-tags');
-          _ts.contentEditor.setValue('');
-          _ts.$set(_ts, 'notificationFlag', false);
-          _ts.$router.push({
-            path: `/draft/${res}`
-          })
-        }
-      })
-    },
-    getTags() {
-      let _ts = this;
-      _ts.$axios.$get('/api/tag/tags').then(function (res) {
-        if (res) {
-          _ts.$set(_ts, 'list', res);
-        }
-      })
-    }
-  },
-  beforeRouteLeave(to, from, next) {
-    let _ts = this;
-    if (_ts.notificationFlag) {
-      _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        next();
-      }).catch(() => {
-        return false
-      });
-      _ts.$store.commit("setActiveMenu", "product-post");
-    } else {
-      next();
-    }
-  },
-  beforeDestroy() {
-    window.onbeforeunload = null;
-  },
-  async mounted() {
-    console.log('??')
-    if (!this.hasPermissions) {
-      return
-    }
-    window.addEventListener('beforeunload', e => {
-      e = e || window.event;
+<!--    },-->
+<!--    async saveArticle() {-->
+<!--      let _ts = this;-->
+<!--      _ts.doLoading = true;-->
+<!--      let id = _ts.$route.params.product_id;-->
+<!--      let productContent = _ts.contentEditor.getValue();-->
+<!--      let productContentHtml = await _ts.contentEditor.getHTML();-->
+<!--      if (!(_ts.productTitle && productContent)) {-->
+<!--        _ts.$message("标题/正文不能为空！");-->
+<!--        _ts.doLoading = false;-->
+<!--        return false;-->
+<!--      }-->
+<!--      let product = {-->
+<!--        idArticle: _ts.idArticle,-->
+<!--        productTitle: _ts.productTitle,-->
+<!--        productContent: productContent,-->
+<!--        productContentHtml: productContentHtml,-->
+<!--        productTags: _ts.productTags.join(","),-->
+<!--        productStatus: 1-->
+<!--      };-->
+<!--      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {-->
+<!--        if (res) {-->
+<!--          if (res.message) {-->
+<!--            _ts.$message(res.message);-->
+<!--            _ts.doLoading = false;-->
+<!--            return false;-->
+<!--          }-->
+<!--          localStorage.removeItem('product-title');-->
+<!--          localStorage.removeItem('product-tags');-->
+<!--          _ts.contentEditor.setValue('');-->
+<!--          _ts.$set(_ts, 'notificationFlag', false);-->
+<!--          _ts.$router.push({-->
+<!--            path: `/draft/${res}`-->
+<!--          })-->
+<!--        }-->
+<!--      })-->
+<!--    },-->
+<!--    getTags() {-->
+<!--      let _ts = this;-->
+<!--      _ts.$axios.$get('/api/tag/tags').then(function (res) {-->
+<!--        if (res) {-->
+<!--          _ts.$set(_ts, 'list', res);-->
+<!--        }-->
+<!--      })-->
+<!--    }-->
+<!--  },-->
+<!--  beforeRouteLeave(to, from, next) {-->
+<!--    let _ts = this;-->
+<!--    if (_ts.notificationFlag) {-->
+<!--      _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {-->
+<!--        confirmButtonText: '确定',-->
+<!--        cancelButtonText: '取消',-->
+<!--        type: 'warning'-->
+<!--      }).then(() => {-->
+<!--        next();-->
+<!--      }).catch(() => {-->
+<!--        return false-->
+<!--      });-->
+<!--      _ts.$store.commit("setActiveMenu", "product-post");-->
+<!--    } else {-->
+<!--      next();-->
+<!--    }-->
+<!--  },-->
+<!--  beforeDestroy() {-->
+<!--    window.onbeforeunload = null;-->
+<!--  },-->
+<!--  async mounted() {-->
+<!--    console.log('??')-->
+<!--    // if (!this.hasPermissions) {-->
+<!--    //   return-->
+<!--    // }-->
+<!--    window.addEventListener('beforeunload', e => {-->
+<!--      e = e || window.event;-->
 
-      // 兼容IE8和Firefox 4之前的版本
-      if (e) {
-        e.returnValue = '关闭提示';
-      }
+<!--      // 兼容IE8和Firefox 4之前的版本-->
+<!--      if (e) {-->
+<!--        e.returnValue = '关闭提示';-->
+<!--      }-->
 
-      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
-      return '关闭提示';
-    });
-    let _ts = this;
-    _ts.$store.commit('setActiveMenu', 'product-post');
-    const responseData = await _ts.$axios.$get('/api/upload/token');
-    if (responseData) {
-      _ts.$set(_ts, 'tokenURL', {
-        token: responseData.uploadToken || '',
-        URL: responseData.uploadURL || '',
-        linkToImageURL: responseData.linkToImageURL || ''
-      })
-    }
+<!--      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+-->
+<!--      return '关闭提示';-->
+<!--    });-->
+<!--    let _ts = this;-->
+<!--    _ts.$store.commit('setActiveMenu', 'product-post');-->
+<!--    const responseData = await _ts.$axios.$get('/api/upload/token');-->
+<!--    if (responseData) {-->
+<!--      _ts.$set(_ts, 'tokenURL', {-->
+<!--        token: responseData.uploadToken || '',-->
+<!--        URL: responseData.uploadURL || '',-->
+<!--        linkToImageURL: responseData.linkToImageURL || ''-->
+<!--      })-->
+<!--    }-->
 
-    _ts.getTags();
-    Vue.nextTick(() => {
-      let productContent = '';
-      if (_ts.$route.params.product_id) {
-        _ts.$set(_ts, 'isEdit', true);
-        let product = _ts.product;
-        _ts.$set(_ts, 'idArticle', product.idArticle);
-        _ts.$set(_ts, 'productTitle', product.productTitle);
-        _ts.$set(_ts, 'productContent', product.productContent);
-        _ts.$set(_ts, 'productStatus', product.productStatus);
-        _ts.$set(_ts, 'productTags', (product.productTags).split(','));
-        localStorage.setItem("product-title", product.productTitle);
-        localStorage.setItem("product-tags", (product.productTags).split(','));
-        productContent = product.productContent
-      } else {
-        _ts.$set(_ts, 'isEdit', false);
-      }
-      _ts.contentEditor = _ts._initEditor({
-        id: 'contentEditor',
-        mode: 'both',
-        height: 480,
-        placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
-        resize: false,
-        value: productContent
-      });
-    })
-  }
-}
-</script>
+<!--    _ts.getTags();-->
+<!--    Vue.nextTick(() => {-->
+<!--      let productContent = '';-->
+<!--      if (_ts.$route.params.product_id) {-->
+<!--        _ts.$set(_ts, 'isEdit', true);-->
+<!--        let product = _ts.product;-->
+<!--        _ts.$set(_ts, 'idArticle', product.idArticle);-->
+<!--        _ts.$set(_ts, 'productTitle', product.productTitle);-->
+<!--        _ts.$set(_ts, 'productContent', product.productContent);-->
+<!--        _ts.$set(_ts, 'productStatus', product.productStatus);-->
+<!--        _ts.$set(_ts, 'productTags', (product.productTags).split(','));-->
+<!--        localStorage.setItem("product-title", product.productTitle);-->
+<!--        localStorage.setItem("product-tags", (product.productTags).split(','));-->
+<!--        productContent = product.productContent-->
+<!--      } else {-->
+<!--        _ts.$set(_ts, 'isEdit', false);-->
+<!--      }-->
+<!--      _ts.contentEditor = _ts._initEditor({-->
+<!--        id: 'contentEditor',-->
+<!--        mode: 'both',-->
+<!--        height: 480,-->
+<!--        placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)-->
+<!--        resize: false,-->
+<!--        value: productContent-->
+<!--      });-->
+<!--    })-->
+<!--  }-->
+<!--}-->
+<!--</script>-->
 
-<style lang="less">
-@import "~vditor/src/assets/less/index.less";
-</style>
+<!--<style lang="less">-->
+<!--@import "~vditor/src/assets/less/index.less";-->
+<!--</style>-->
diff --git a/pages/user/settings/account.vue b/pages/user/settings/account.vue
index 1b3d2e8..a79755e 100644
--- a/pages/user/settings/account.vue
+++ b/pages/user/settings/account.vue
@@ -93,7 +93,6 @@
 <script>
 import {mapState} from 'vuex';
 import ImgCropper from "~/components/ImgCropper.vue";
-import VueCropper from "vue-cropper";
 import saveSvg from "save-svg-as-png";
 import Avataaars from 'vuejs-avataaars';
 
@@ -103,7 +102,7 @@ export default {
   name: "account",
   middleware: 'auth',
   components: {
-    ImgCropper, VueCropper, Avataaars
+    ImgCropper, Avataaars
   },
   computed: {
     ...mapState({