Finished: other picbed page

src/renderer/pages/picbeds/Others.vue

@@ -3,55 +3,98 @@
     <el-row :gutter="16">
       <el-col :span="16" :offset="4">
         <div class="view-title">
-          Imgur图床设置
+          {{ picBedName }}设置
         </div>
-        <el-form 
-          ref="imgur"
-          label-position="right"
-          label-width="120px"
-          :model="form"
-          size="mini">
-          <el-form-item
-            label="设定ClientId"
-            prop="clientId"
-            :rules="{
-              required: true, message: 'ClientId不能为空', trigger: 'blur'
-            }">
-            <el-input v-model="form.clientId" placeholder="ClientId" @keyup.native.enter="confirm"></el-input>
-          </el-form-item>
-          <el-form-item
-            label="设定代理"
-            prop="proxy"
-            >
-            <el-input v-model="form.proxy" placeholder="例如：http://127.0.0.1:1080" @keyup.native.enter="confirm"></el-input>
-          </el-form-item>
+        <config-form
+          :config="config"
+          type="uploader"
+          ref="configForm"
+        >
           <el-form-item>
             <el-button-group>
-              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="primary" @click="handleConfirm" round>确定</el-button>
               <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">设为默认图床</el-button>
             </el-button-group>
           </el-form-item>
-        </el-form>
+        </config-form>
+
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+import ConfigForm from '@/components/ConfigForm'
 import mixin from '@/utils/ConfirmButtonMixin'
 export default {
   name: 'OtherPicBed',
   mixins: [mixin],
+  components: {
+    ConfigForm
+  },
   data () {
     return {
-      type: ''
+      type: '',
+      config: [],
+      picBedName: ''
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      console.log(vm)
+      vm.type = to.query.type
+      vm.$electron.ipcRenderer.send('getPicBedConfig', to.query.type)
+      vm.$electron.ipcRenderer.on('getPicBedConfig', (event, config, name) => {
+        vm.config = config
+        vm.picBedName = name
+      })
     })
+  },
+  methods: {
+    async handleConfirm () {
+      const result = await this.$refs.configForm.validate()
+      if (result !== false) {
+        this.$db.read().set(`picBed.${this.type}`, result).write()
+        const successNotification = new window.Notification('设置结果', {
+          body: '设置成功'
+        })
+        successNotification.onclick = () => {
+          return true
+        }
+      }
+    },
+    setDefaultPicBed (type) {
+      this.$db.read().set('picBed.current', type).write()
+      this.defaultPicBed = type
+      this.$electron.ipcRenderer.send('updateDefaultPicBed', type)
+      const successNotification = new window.Notification('设置默认图床', {
+        body: '设置成功'
+      })
+      successNotification.onclick = () => {
+        return true
+      }
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('getPicBedConfig')
   }
 }
 </script>
 <style lang='stylus'>
+#others-view
+  .el-form
+    label  
+      line-height 22px
+      padding-bottom 0
+      color #eee
+    .el-button-group
+      width 100%
+      .el-button
+        width 50%
+    .el-input__inner
+      border-radius 19px
+    .el-radio-group
+      margin-left 25px
+    .el-switch__label
+      color #eee
+      &.is-active
+        color #409EFF
 </style>