update

src/api/user/user.js

@@ -2,7 +2,9 @@ import $axios from '../index'
 
 const userApi = {
   myInfoApi: '/api/user/info/my',
-  userInfoApi: '/api/user/info'
+  userInfoApi: '/api/user/info',
+  vipPlanApi: '/api/user/vip/plan',
+  vipPayApi: '/api/user/vip/pay'
 }
 
 export function getMyInfo() {
@@ -12,3 +14,11 @@ export function getMyInfo() {
 export function getUserInfo(userId) {
   return $axios.get(userApi.userInfoApi + '?userId=' + userId)
 }
+
+export function getVipPlan() {
+  return $axios.get(userApi.vipPlanApi)
+}
+
+export function payVip(planId) {
+  return $axios.post(userApi.vipPayApi + '/' + planId)
+}

src/components/login-form.vue

@@ -80,6 +80,7 @@ export default {
       return encryptor.encrypt(pubkeyR + password)
     },
     submitLogin() {
+      const accountType = 1
       const loginType = 1
       const username = this.username
       const password = this.$options.methods.encryptPassword(this.password, this.pubkey, this.pubkeyR)
@@ -88,6 +89,7 @@ export default {
       const r = this.r
       const rememberMe = this.rememberMe
       const user = {
+        accountType,
         loginType,
         username,
         password,

src/components/mobile-login-form.vue

@@ -53,26 +53,25 @@
 import { randomString, getCaptchaUrl } from '@/utils'
 import { getVerifyCode } from '@/api/user/account'
 import { getPubkey } from '@/api/user/auth'
-import { JSEncrypt } from 'jsencrypt'
 
 export default {
   name: 'Register',
   data() {
     return {
       captchaUrl: '',
-      captchaBase64: '',
       showMessage: false,
       userLogin: {
+        accountType: 1,
         loginType: 2,
-        username: '',
-        password: '',
-        captchaCode: '',
-        r: '',
+        username: null,
+        password: null,
+        captchaCode: null,
+        r: null,
         plat: 'web'
       },
       getVerifyCode1: {
-        notifyType: '',
-        receiver: ''
+        notifyType: null,
+        receiver: null
       }
     }
   },
@@ -81,14 +80,7 @@ export default {
     this.fetchPubkey()
   },
   methods: {
-    encryptPassword(password, pubkey, pubkeyR) {
-      var encryptor = new JSEncrypt()
-      encryptor.setPublicKey(pubkey)
-      return encryptor.encrypt(pubkeyR + password)
-    },
     submitLogin() {
-      const encryptPassword = this.$options.methods.encryptPassword(this.userLogin.password, this.pubkey, this.pubkeyR)
-      this.userLogin.password = encryptPassword
       // 将数据返回给父组件
       this.$emit('login', this.userLogin)
     },
@@ -97,17 +89,6 @@ export default {
       this.userLogin.r = randomStr
       // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
       this.captchaUrl = getCaptchaUrl(randomStr)
-      /* getBase64Captcha(this.captchaUrl)
-        .then(res => {
-          if (res.code === 0) {
-            this.captchaBase64 = 'data:image/jpg;base64,' + res.data
-          } else {
-            alert(res.data)
-          }
-        })
-        .catch(error => {
-          console.error(error.message)
-        })*/
     },
     fetchPubkey() {
       getPubkey().then(res => {

src/router/index.js

@@ -336,14 +336,6 @@ const routes = [
         component: () => import('@/views/video/video.vue'),
         meta: { title: '播放' }
       },
-      {
-        path: '/vip',
-        name: 'VIP',
-        component: () => import('@/views/vip/index.vue'),
-        meta: {
-          title: 'VIP'
-        }
-      },
       {
         path: '/vip/pay',
         name: 'VipPay',

src/store/modules/user.js

@@ -33,6 +33,10 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  SET_VIP: (state, vipInfo) => {
+    state.userInfo.vip = vipInfo.vip
+    state.userInfo.expiredAt = vipInfo.expiredAt
   }
 }
 

src/views/login.vue

@@ -27,8 +27,8 @@
               <h1>{{ this.$store.state.webInfo.name }} &nbsp; &nbsp;  {{ type }}</h1>
             </v-row>
             <v-row style="height: 48px" />
-            <!--            <MobileLoginForm v-show="showLogin" @login="userLogin" />-->
-            <LoginForm v-show="showLogin === true" @login="userLogin" />
+            <MobileLoginForm v-show="showLogin" @login="userLogin" />
+            <!--            <LoginForm v-show="showLogin === true" @login="userLogin" />-->
             <RegisterFrom v-show="showLogin === false" @register="userRegister" />
             <v-row justify="center">
               <v-col cols="5">
@@ -63,15 +63,15 @@
 </template>
 
 <script>
-// import MobileLoginForm from '@/components/mobile-login-form.vue'
-import LoginForm from '@/components/login-form.vue'
+import MobileLoginForm from '@/components/mobile-login-form.vue'
+/* import LoginForm from '@/components/login-form.vue'*/
 import RegisterFrom from '@/components/register-from.vue'
 
 export default {
   name: 'Login',
   components: {
-    // MobileLoginForm
-    LoginForm,
+    MobileLoginForm,
+    /* LoginForm,*/
     RegisterFrom
   },
   data() {

src/views/studio/upload.vue

@@ -15,7 +15,7 @@
             <uploader
               class="uploader-example"
               :options="options"
-              :autoStart="true"
+              :auto-start="true"
               @file-added="onFileAdded"
               @file-success="onFileSuccess"
               @file-progress="onFileProgress"
@@ -50,7 +50,7 @@
               label="封面"
               @change="setFile"
             />
-            <v-btn color="primary" @click="uploadFile">
+            <v-btn color="primary" @click="uploadVideoCover">
               上传
             </v-btn>
           </v-col>
@@ -103,6 +103,15 @@
             />
           </v-col>
         </v-row>
+        <v-row justify="center">
+          <v-col cols="10">
+            <v-select
+              :items="scope"
+              label="可见范围"
+              @change="setVideoScope"
+            />
+          </v-col>
+        </v-row>
         <v-row justify="center">
           <v-col cols="10">
             <v-btn large color="primary" @click="publish">立即投稿</v-btn>
@@ -139,7 +148,7 @@ export default {
   data() {
     return {
       options: {
-        target: '//localhost:8000' + '/api/file/upload/video',
+        target: '//file.reghao.cn' + '/api/file/upload/video',
         chunkSize: 1024 * 1024 * 20,
         forceChunkSize: true,
         fileParameterName: 'file',
@@ -167,13 +176,16 @@ export default {
       ],
       // 提交给后端的数据
       videoPost: {
-        videoFileId: '',
-        duration: 0,
-        horizontal: false,
-        coverUrl: '',
-        title: '',
-        description: '',
-        categoryId: -1,
+        videoUploadId: null,
+        videoFileId: null,
+        duration: null,
+        horizontal: null,
+        scope: null,
+        coverUrl: null,
+        coverUrlOriginal: null,
+        title: null,
+        description: null,
+        categoryId: null,
         tags: []
       },
       categoryMap: {
@@ -184,8 +196,14 @@ export default {
       },
       category: [],
       childCategory: [],
+      scope: [
+        '全部可见',
+        '验证码可见',
+        'VIP 可见',
+        '自己可见'
+      ],
       nowCategory: {},
-      files: [],
+      coverFile: null,
       showMessage: false,
       message: ''
     }
@@ -202,7 +220,7 @@ export default {
         formData.append('filename', file.file.name)
         formData.append('size', file.file.size)
         formData.append('sha256sum', res.sha256sum)
-        fetch(`//localhost:8000` + `/api/file/upload/video/prepare`, {
+        fetch(`//file.reghao.cn` + `/api/file/upload/video/prepare`, {
           headers: {
             Authorization: 'Bearer ' + this.$store.getters.token
           },
@@ -255,8 +273,8 @@ export default {
         this.showMessage = true
         return
       }
-      if (this.videoPost.tags.length > 6) {
-        this.message = '标签超过6个'
+      if (this.videoPost.tags.length > 10) {
+        this.message = '最多可以有 10 个标签'
         this.showMessage = true
         return
       }
@@ -264,7 +282,7 @@ export default {
       submitVideoPost(this.videoPost)
         .then(res => {
           if (res.code === 0) {
-            this.message = '投稿成功,等待审核通过后你就可以看到你的视频了'
+            this.message = '投稿成功,等待审核通过后其他人就可以看到你的视频了'
             this.showMessage = true
             this.$router.push('/studio')
           } else {
@@ -277,8 +295,7 @@ export default {
         })
     },
     setFile(value) {
-      this.files = []
-      this.files.push(value)
+      this.coverFile = value
     },
     setTitle(title) {
       if (title.length > 50) {
@@ -287,17 +304,23 @@ export default {
         this.videoPost.title = title
       }
     },
-    uploadFile() {
-      if (this.files.length === 0) {
+    uploadVideoCover() {
+      if (this.coverFile === null) {
         this.message = '请先选择视频封面，然后上传！'
         this.showMessage = true
         return
       }
-      const formData = new FormData()
-      for (let i = 0; i < this.files.length; i++) {
-        formData.append('file[]', this.files[i])
+
+      if (this.videoPost.videoFileId === null) {
+        this.message = '等待视频上传完成后再上传封面！'
+        this.showMessage = true
+        return
       }
-      fetch(`http://file.reghao.cn/api/file/upload/image`, {
+
+      const formData = new FormData()
+      formData.append('videoFileId', this.videoPost.videoFileId)
+      formData.append('file', this.coverFile)
+      fetch(`http://file.reghao.cn/api/file/upload/video/cover`, {
         headers: {
           'Authorization': 'Bearer ' + this.$store.getters.token
         },
@@ -307,7 +330,9 @@ export default {
       }).then(response => response.json())
         .then(json => {
           if (json.code === 0) {
-            this.videoPost.coverUrl = json.data[0].url
+            console.log(json)
+            this.videoPost.coverUrl = json.data.thumbnailUrl
+            this.videoPost.coverUrlOriginal = json.data.originalUrl
           } else {
             this.message = '上传失败，请重试！' + json.message
             this.showMessage = true
@@ -354,6 +379,19 @@ export default {
           this.videoPost.categoryId = c[i].id
         }
       }
+    },
+    setVideoScope(scope) {
+      if (scope === '全部可见') {
+        this.videoPost.scope = 1
+      } else if (scope === '验证码可见') {
+        this.videoPost.scope = 2
+      } else if (scope === 'VIP 可见') {
+        this.videoPost.scope = 3
+      } else if (scope === '自己可见') {
+        this.videoPost.scope = 4
+      }
+
+      console.log(this.videoPost)
     }
   }
 }

src/views/user/pay.vue

@@ -1,107 +0,0 @@
-<template>
-  <v-container fill-height>
-    <v-row no-gutters justify="center" align="center">
-      <v-col
-        v-for="item in items"
-        :key="item.id"
-        v-resize="onResize"
-        :cols="cols"
-        style="margin-top: 48px;"
-      >
-        <v-card
-          class="mx-auto"
-          max-width="344"
-        >
-          <v-card-text>
-            <div> 时长： </div>
-            <p class="display-1 text--primary">
-              {{ item.time }}
-            </p>
-
-            <div class="text--primary">
-              <strong> ￥： {{ item.money }} </strong>
-            </div>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn
-              text
-              color="deep-purple accent-4"
-              @click="dialog = true"
-            >
-              支付
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
-    <v-dialog
-      v-model="dialog"
-      max-width="290"
-    >
-      <v-card>
-        <v-card-title class="headline">支付接口尚未完成</v-card-title>
-
-        <v-card-text>
-          如有需要，请联系网站管理
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer />
-
-          <v-btn
-            color="green darken-1"
-            text
-            @click="dialog = false"
-          >
-            取消
-          </v-btn>
-
-          <v-btn
-            color="green darken-1"
-            text
-            @click="dialog = false"
-          >
-            同意
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-container>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dialog: false,
-      cols: 5,
-      items: [
-        { id: 0, money: 10, time: '一个月' },
-        { id: 1, money: 25, time: '三个月' },
-        { id: 2, money: 40, time: '半年' },
-        { id: 3, money: 60, time: '一年' }
-      ],
-      windowSize: {
-
-      }
-    }
-  },
-  created() {
-    this.windowSize = { x: window.innerWidth, y: window.innerHeight }
-  },
-  methods: {
-    onResize() {
-      this.windowSize = { x: window.innerWidth, y: window.innerHeight }
-      if (this.windowSize.x < 700) {
-        this.cols = 12
-      } else {
-        this.cols = 5
-      }
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

src/views/user/vip.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fill-height>
-    <v-row v-if="this.$store.state.user.userInfo == null || checkPower.checkVip(this.$store.state.user.userInfo) === false" justify="center" align="center">
+    <v-row v-if="userInfo == null || userInfo.vip === false" justify="center" align="center">
       <v-col>
         <v-card
           class="mx-auto"
@@ -31,12 +31,11 @@
             height="200px"
             src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
           >
-            <v-card-title>你好，尊贵的VIP:  {{ this.$store.state.user.userInfo.username }}</v-card-title>
+            <v-card-title>你好，尊贵的 VIP: {{ userInfo.username }}</v-card-title>
           </v-img>
 
           <v-card-text class="text--primary">
-            <div>VIP到期时间： <strong>{{ TimeUtil.renderTime(this.$store.state.user.userInfo.vipStopTime) }}</strong></div>
-            <div>剩余观看次数：<strong> ∞ </strong></div>
+            <div>VIP 到期时间： <strong>{{ userInfo.expiredAt }}</strong></div>
           </v-card-text>
 
           <v-card-actions>
@@ -51,7 +50,6 @@
         </v-card>
       </v-col>
     </v-row>
-
   </v-container>
 </template>
 
@@ -63,12 +61,16 @@ export default {
   data() {
     return {
       checkPower,
-      TimeUtil
+      TimeUtil,
+      userInfo: null
     }
+  },
+  created() {
+    this.userInfo = this.$store.state.user.userInfo
+    console.log(this.userInfo)
   }
 }
 </script>
 
 <style>
-
 </style>

src/views/vip/order.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-container fill-height>
+    <span><h2>订单页面</h2></span>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  created() {
+    this.windowSize = { x: window.innerWidth, y: window.innerHeight }
+  },
+  methods: {
+    onResize() {
+      this.windowSize = { x: window.innerWidth, y: window.innerHeight }
+      if (this.windowSize.x < 700) {
+        this.cols = 12
+      } else {
+        this.cols = 5
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/vip/pay.vue

@@ -1,9 +1,10 @@
 <template>
   <v-container fill-height>
+    <span><h2>支付页面</h2></span>
     <v-row no-gutters justify="center" align="center">
       <v-col
-        v-for="item in items"
-        :key="item.id"
+        v-for="item in vipPlans"
+        :key="item.planId"
         v-resize="onResize"
         :cols="cols"
         style="margin-top: 48px;"
@@ -15,20 +16,20 @@
           <v-card-text>
             <div> 时长： </div>
             <p class="display-1 text--primary">
-              {{ item.time }}
+              {{ item.duration }}
             </p>
 
             <div class="text--primary">
-              <strong> ￥： {{ item.money }} </strong>
+              <strong> ￥： {{ item.price }} </strong>
             </div>
           </v-card-text>
           <v-card-actions>
             <v-btn
               text
               color="deep-purple accent-4"
-              @click="dialog = true"
+              @click="choosePlan(item)"
             >
-              支付
+              选择
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -39,15 +40,15 @@
       max-width="290"
     >
       <v-card>
-        <v-card-title class="headline">支付接口尚未完成</v-card-title>
-
-        <v-card-text>
-          如有需要，请联系网站管理
-        </v-card-text>
+        <v-card-title class="headline">支付订单</v-card-title>
+<!--        <v-card-text>
+          <span>您选择的是 </span>
+          <h3>{{ vipPlan.duration }}</h3>
+          <span> 套餐</span>
+        </v-card-text>-->
 
         <v-card-actions>
           <v-spacer />
-
           <v-btn
             color="green darken-1"
             text
@@ -59,9 +60,9 @@
           <v-btn
             color="green darken-1"
             text
-            @click="dialog = false"
+            @click="pay"
           >
-            同意
+            支付
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -70,24 +71,35 @@
 </template>
 
 <script>
+import { getVipPlan, payVip } from '@/api/user/user'
+
 export default {
   data() {
     return {
       dialog: false,
+      vipPlans: [],
+      vipPlan: null,
+      planId: null,
       cols: 5,
-      items: [
-        { id: 0, money: 10, time: '一个月' },
-        { id: 1, money: 25, time: '三个月' },
-        { id: 2, money: 40, time: '半年' },
-        { id: 3, money: 60, time: '一年' }
-      ],
       windowSize: {
-
       }
     }
   },
   created() {
     this.windowSize = { x: window.innerWidth, y: window.innerHeight }
+    getVipPlan().then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.vipPlans = []
+        for (const item of resData) {
+          this.vipPlans.push(item)
+        }
+      } else {
+        alert(res.data)
+      }
+    }).catch(error => {
+      console.error(error.message)
+    })
   },
   methods: {
     onResize() {
@@ -97,6 +109,25 @@ export default {
       } else {
         this.cols = 5
       }
+    },
+    choosePlan(item) {
+      this.dialog = true
+      this.vipPlan = item
+    },
+    pay() {
+      this.dialog = false
+      payVip(this.vipPlan.planId).then(res => {
+        if (res.code === 0) {
+          this.vipPlan = null
+          this.$store.commit('user/SET_VIP', res.data)
+        } else {
+          console.log(res.data)
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+      console.log('支付')
     }
   }
 }