个人中心-我的上传、我的收藏

笔记列表+表单校验

components/center/collect.vue

@@ -1,9 +1,33 @@
 <template>
-    <h1>我的收藏</h1>
+    <el-col :span="10">
+      <el-table :data="tableData" border>
+        <el-table-column align="center" prop="title" :label="$t('center.collect.form.title')" />
+        <el-table-column align="center" prop="time" :label="$t('center.collect.form.time')" />
+      </el-table>
+
+      <div class="block center mt1">
+        <el-pagination
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+    </el-col>
 </template>
 
 <script lang="ts">
-  export default {
+
-    name: 'collect'
+
+  import Vue from 'vue'
+
+  export default Vue.extend( {
+    name: 'collect',
+    data(){
+      return {
+        tableData: [{
+          title: '论文标题1',
+          time: this.$moment().format("YYYY-MM-DD")
+        }]
+      }
     }
+  })
 </script>

components/center/myupload.vue

@@ -1,9 +1,32 @@
 <template>
-    <h1>我的上传</h1>
+  <el-col :span="10">
+    <el-table :data="tableData" border>
+      <el-table-column align="center" prop="title" :label="$t('center.myupload.form.title')" />
+      <el-table-column align="center" prop="time" :label="$t('center.myupload.form.time')" />
+    </el-table>
+
+    <div class="block center mt1">
+      <el-pagination
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </el-col>
+
 </template>
 
 <script lang="ts">
-  export default {
+  import Vue from 'vue'
-    name: 'myupload'
+
+  export default Vue.extend( {
+    name: 'myupload',
+    data(){
+      return {
+        tableData: [{
+          title: '论文标题1',
+          time: this.$moment().format("YYYY-MM-DD")
+        }]
+      }
     }
+  })
 </script>

components/center/security.vue

@@ -1,23 +1,26 @@
 <template>
-    <el-form ref="form" :model="form" label-width="100px">
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-      <el-form-item :label="$t('center.security.oldpwd')">
+    <el-form-item :label="$t('center.security.oldpwd')" prop="oldpwd">
       <el-col :span="4">
-          <el-input type="password" :placeholder="$t('center.security.input_oldpwd',{oldpwd:$t('center.security.oldpwd')})"/>
+        <el-input v-model="form.oldpwd" show-password type="password"
+                  :placeholder="$t('center.security.input_oldpwd',{oldpwd:$t('center.security.oldpwd')})"/>
       </el-col>
     </el-form-item>
-      <el-form-item :label="$t('center.security.newpwd')">
+    <el-form-item :label="$t('center.security.newpwd')" prop="newpwd">
       <el-col :span="4">
-          <el-input type="password" :placeholder="$t('center.security.input_newpwd',{newpwd:$t('center.security.newpwd')})"/>
+        <el-input v-model="form.newpwd" show-password type="password"
+                  :placeholder="$t('center.security.input_newpwd',{newpwd:$t('center.security.newpwd')})"/>
       </el-col>
     </el-form-item>
-      <el-form-item :label="$t('center.security.confirmpwd')">
+    <el-form-item :label="$t('center.security.confirmpwd')" prop="confirmpwd">
       <el-col :span="4">
-          <el-input type="password" :placeholder="$t('center.security.input_confirmpwd',{newpwd:$t('center.security.newpwd')})"/>
+        <el-input v-model="form.confirmpwd" show-password type="password"
+                  :placeholder="$t('center.security.input_confirmpwd',{newpwd:$t('center.security.newpwd')})"/>
       </el-col>
     </el-form-item>
 
     <el-form-item>
-        <el-button type="primary" @click="onSubmit">{{$t('submit')}}</el-button>
+      <el-button type="primary" @click="onSubmit">{{$t('button.submit')}}</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -29,11 +32,49 @@
     name: 'security',
     data() {
       return {
-        form:{}
+        form: {
+          oldpwd: '',
+          newpwd: '',
+          confirmpwd: ''
+        },
+        rules: {
+          oldpwd: [
+            {
+              required: true,
+              message: this.$t('center.security.input_oldpwd', { oldpwd: this.$t('center.security.oldpwd') }),
+              trigger: 'blur'
+            },
+            { min: 3, max: 5, message: this.$t('center.security.rules.password',{min:3,max:5}), trigger: 'blur' }
+          ],
+          newpwd: [
+            {
+              required: true,
+              message: this.$t('center.security.input_newpwd', { newpwd: this.$t('center.security.newpwd') }),
+              trigger: 'blur'
+            },
+            { min: 3, max: 5, message: this.$t('center.security.rules.password',{min:3,max:5}), trigger: 'blur' }
+          ],
+          confirmpwd: [
+            {
+              required: true,
+              message: this.$t('center.security.input_confirmpwd', { newpwd: this.$t('center.security.newpwd') }),
+              trigger: 'blur'
+            },
+            { min: 3, max: 5, message: this.$t('center.security.rules.password',{min:3,max:5}), trigger: 'blur' }
+          ]
+        }
       }
     },
     methods: {
       onSubmit() {
+        this.$refs.form.validate((valid: boolean)=>{
+          if (valid) {
+            this.$alert(this.$t('center.security.tip.ok').toString())
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        })
 
       }
     }

nuxt.config.js

@@ -32,12 +32,12 @@ export default {
   /*
    ** Global CSS
    */
-  css: ['element-ui/lib/theme-chalk/index.css'],
+  css: ['element-ui/lib/theme-chalk/index.css','postcss/docs/api/assets/styles.min.css'],
   /*
    ** Plugins to load before mounting the App
    ** https://nuxtjs.org/guide/plugins
    */
-  plugins: ['@/plugins/element-ui','@/plugins/vue-cookies','@/plugins/global'],
+  plugins: ['@/plugins/element-ui','@/plugins/vue-cookies','@/plugins/global','@/plugins/moment'],
   /*
    ** Auto import components
    ** See https://nuxtjs.org/api/configuration-components
@@ -99,12 +99,28 @@ export default {
             "login": "登录",
             "register": "注册"
           },
+          "action": "操作",
           "app_name": "云笔记",
+          "button": {
+            "cancel": "取消",
+            "del": "删除",
+            "edit": "编辑",
+            "ok": "確定",
+            "submit": "提交"
+          },
           "center": {
             "collect": {
+              "form": {
+                "time": "收藏时间",
+                "title": "论文标题"
+              },
               "name": "我的收藏"
             },
             "myupload": {
+              "form": {
+                "time": "上传时间",
+                "title": "论文标题"
+              },
               "name": "我的上传"
             },
             "security": {
@@ -114,7 +130,13 @@ export default {
               "input_oldpwd": "请输入{oldpwd}",
               "name": "帐号安全",
               "newpwd": "新密码",
-              "oldpwd": "原密码"
+              "oldpwd": "原密码",
+              "rules": {
+                "password": "长度在 {min} 到 {max} 个字符之间"
+              },
+              "tip": {
+                "ok": "密码修改成功"
+              }
             }
           },
           "choose_lang": "选择语言",
@@ -128,7 +150,16 @@ export default {
             "note": "笔记列表",
             "upload": "本地上传论文"
           },
-          "submit": "提交",
+          "note": {
+            "table": {
+              "note_name": "笔记名称",
+              "paper_name": "论文标题"
+            },
+            "tip": {
+              "confirm_del": "此操作将永久删除该笔记，是否继续？"
+            }
+          },
+          "tip": "提示",
           "unknown_error": "未知错误",
           "upload": {
             "form": {
@@ -149,6 +180,9 @@ export default {
               "upload": "点击上传",
               "upload_tip": "只能上传txt",
               "year": "学位年度"
+            },
+            "tip": {
+              "ok": "论文上传成功"
             }
           },
           "user": "帐号",
@@ -168,12 +202,28 @@ export default {
             "login": "登录",
             "register": "注册"
           },
+          "action": "",
           "app_name": "cloudnote",
+          "button": {
+            "cancel": "",
+            "del": "",
+            "edit": "",
+            "ok": "",
+            "submit": ""
+          },
           "center": {
             "collect": {
+              "form": {
+                "time": "",
+                "title": ""
+              },
               "name": "我的收藏"
             },
             "myupload": {
+              "form": {
+                "time": "",
+                "title": ""
+              },
               "name": "我的上传"
             },
             "security": {
@@ -183,7 +233,13 @@ export default {
               "input_oldpwd": "",
               "name": "帐号安全",
               "newpwd": "",
-              "oldpwd": ""
+              "oldpwd": "",
+              "rules": {
+                "password": ""
+              },
+              "tip": {
+                "ok": ""
+              }
             }
           },
           "choose_lang": "language",
@@ -197,7 +253,16 @@ export default {
             "note": "note list",
             "upload": "本地上传论文"
           },
-          "submit": "提交",
+          "note": {
+            "table": {
+              "note_name": "",
+              "paper_name": ""
+            },
+            "tip": {
+              "confirm_del": ""
+            }
+          },
+          "tip": "",
           "unknown_error": "未知错误",
           "upload": {
             "form": {
@@ -218,6 +283,9 @@ export default {
               "upload": "点击上传",
               "upload_tip": "只能上传txt",
               "year": "学位年度"
+            },
+            "tip": {
+              "ok": ""
             }
           },
           "user": "帐号",

package.json

@@ -27,6 +27,7 @@
     "@nuxtjs/axios": "^5.11.0",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "element-ui": "^2.13.2",
+    "moment": "^2.27.0",
     "nuxt": "^2.13.0",
     "nuxt-i18n": "^6.13.1",
     "vue-cookies": "^1.7.2"

pages/index/note.vue

@@ -1,11 +1,45 @@
 <template>
-    <h1>笔记列表</h1>
+  <el-col :span="10">
+     <el-table :data="tableData" border>
+       <el-table-column align="center" prop="note_name" :label="$t('note.table.note_name')" />
+       <el-table-column align="center" prop="paper_name" :label="$t('note.table.paper_name')" />
+       <el-table-column align="center" :label="$t('action')">
+         <template slot-scope="scope">
+           <el-button>{{$t('button.edit')}}</el-button>
+           <el-button type="danger" @click="del">{{$t('button.del')}}</el-button>
+         </template>
+       </el-table-column>
+     </el-table>
+
+    <div class="block center mt1">
+      <el-pagination
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </el-col>
 </template>
 
 <script lang="ts">
   import Vue from 'vue'
 
   export default Vue.extend({
-    name: 'note'
+    name: 'note',
+    data(){
+      return {
+        tableData:[{
+            note_name:'笔记',
+            paper_name: '《论文》'
+        }]
+      }
+    },
+    methods:{
+      del(){
+        this.$confirm(this.$t('note.tip.confirm_del').toString(),this.$t('tip').toString(),{
+          confirmButtonText:this.$t('button.ok').toString(),
+          cancelButtonText:this.$t('button.cancel').toString()
+        })
+      }
+    }
   })
 </script>

pages/index/upload.vue

@@ -72,7 +72,7 @@
     </el-form-item>
 
     <el-form-item>
-      <el-button type="primary" @click="onSubmit">{{$t('submit')}}</el-button>
+      <el-button type="primary" @click="onSubmit">{{$t('button.submit')}}</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -140,11 +140,11 @@
       },
       //确认移除论文
       beforeRemove(file: { name: string }, fileList: any) {
-        return this.$confirm(this.$t('upload.form.remove',{file:file.name}))
+        return this.$confirm(this.$t('upload.form.remove',{file:file.name}).toString())
       },
       //提交论文
       onSubmit(){
-
+        this.$alert(this.$t('upload.tip.ok').toString())
       }
     }
   })

plugins/moment.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import moment from 'moment'
+
+Vue.prototype.$moment = moment

yarn.lock

@@ -6720,6 +6720,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&sync_timestamp=1587535418745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
 
+moment@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.27.0.tgz?cache=0&sync_timestamp=1592517925956&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha1-i/9OPiaiNiIN/j423nVrbrqgEF0=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"