fit:uploader

www/webapp/safety/docs/003.md

@@ -0,0 +1,5 @@
+# 问题:
+
+## 护工
+### 证书
+照片大小,样式展示.照片数量

www/webapp/safety/src/App.vue

@@ -25,4 +25,7 @@ export default {
   /* color: #2c3e50; */
   /* margin-top: 60px; */
 }
+.van-radio .van-icon-checked {
+  color: #41b883 !important;
+}
 </style>

www/webapp/safety/src/views/Care/Login/index.vue

@@ -1,11 +1,28 @@
 <template>
   <div class="login-wrapper" ref="login">
     <van-cell-group>
-      <van-field required clearable v-model="user.name"
-        label="用户名" placeholder="请输入用户名" autosize />
-      <van-field v-model="user.phone" label="手机号"
+      <van-field required clearable left-icon="contact"
+        v-model="user.name" label="用户名" placeholder="请输入用户名"
+        autosize />
+      <van-field v-model="user.phone" label="手机号" left-icon="phone"
         placeholder="请输入手机号" autosize />
-      <uploader />
+      <div class="sex-wrapper">
+        <div class="title"><span class="red">*</span>性别选择</div>
+        <van-radio-group v-model="user.sex">
+          <van-cell-group>
+            <van-cell title="男" clickable @click="user.sex = '1'">
+              <van-radio name="1" />
+            </van-cell>
+            <van-cell title="女" clickable @click="user.sex = '2'">
+              <van-radio name="2" />
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </div>
+      <div class="certificate-wrapper">
+        <uploader @imgSrc='getImgSrc' title='添加证书(正面)' />
+        <uploader @imgSrc='getImgSrc' title='添加证书(反面)' />
+      </div>
     </van-cell-group>
   </div>
 </template>
@@ -27,7 +44,7 @@
  * 状态: status
  * 备注: desc
  */
-import { Cell, CellGroup, Field } from 'vant';
+import { Cell, CellGroup, Field, RadioGroup, Radio } from 'vant';
 import Bscroll from 'better-scroll';
 import uploader from './uploader';
 
@@ -38,6 +55,7 @@ export default {
         name: '',
         phone: '',
         certificate: [],
+        sex: 0,
       },
       phoneError: false,
     };
@@ -51,6 +69,8 @@ export default {
     [Cell.name]: Cell,
     [CellGroup.name]: CellGroup,
     [Field.name]: Field,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
     uploader,
   },
   mounted() {
@@ -83,6 +103,10 @@ export default {
       // eslint-disable-next-line
       this.user.certificate.push(file.content);
     },
+    getImgSrc(src) {
+      this.user.certificate.push(src);
+      console.log(this.user.certificate);
+    },
   },
 };
 </script>
@@ -90,5 +114,27 @@ export default {
 .login-wrapper {
   height: 100vh;
   background-color: #999;
+  .sex-wrapper {
+    padding: 0 15px;
+    .title {
+      color: #333;
+      font-size: 14px;
+      position: relative;
+      line-height: 40px;
+      .red {
+        color: #f44;
+        position: absolute;
+        left: -8px;
+        top: 5px;
+      }
+    }
+  }
+  .certificate-wrapper {
+    display: flex;
+    .uploader-wrapper {
+      flex: 1;
+    }
+  }
 }
+
 </style>

www/webapp/safety/src/views/Care/Login/uploader.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="uploader-wrapper">
     <van-uploader :after-read="onRead">
-      <van-icon name="add" />
-      <div class="title">
-        添加证书
+      <van-icon v-if='percent == 0 && imgSrc.length === 0'
+        name="add" />
+      <div class="title" v-if='percent == 0 && imgSrc.length === 0'>
+        {{title}}
       </div>
+      <van-circle v-model="currentRate" v-if='percent > 0 && imgSrc.length === 0'
+        :rate="percent" :speed="100" :text="text" />
+      <img v-if='imgSrc.length > 0' :src="imgSrc" alt="" />
     </van-uploader>
-    <!-- <van-circle v-model="currentRate" :rate="percent"
-      :speed="100" :text="text" /> -->
+
   </div>
 </template>
 
 <script>
 import { Uploader, Icon, Circle } from 'vant';
-// eslint-disable-next-line
 import * as qiniu from 'qiniu-js';
 import md5 from 'js-md5';
 
@@ -21,12 +23,27 @@ export default {
   name: 'uploader',
   data() {
     return {
-      token:
-        'g-1E20X3x4rowtOvi3BJL-pvzfpBHzERBoUViHsL:CLKcsrK9Wz0057PnpW0zj6l3y3A=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImNlcnRpZmljYXRlIiwiZGVhZGxpbmUiOjE1NDI3MDg1MjZ9',
+      token: {
+        test:
+          'Kn8GNMFOLKTNMUaKZ6r1wnjsgTk4ideQifK3umUr:dw6QS4w5lN23ZbCw5Z8eRizQCm0=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6InRlc3QiLCJkZWFkbGluZSI6NDAzMTYyNTQ0MH0=',
+        certificate:
+          'Kn8GNMFOLKTNMUaKZ6r1wnjsgTk4ideQifK3umUr:aNH9X92ocHs1f1D2XpeIQu9HbL0=:eyJkZWxldGVBZnRlckRheXMiOjEsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiZnNpemVcIjokKGZzaXplKSxcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJuYW1lXCI6XCIkKHg6bmFtZSlcIn0iLCJzY29wZSI6ImNlcnRpZmljYXRlIiwiZGVhZGxpbmUiOjQwMzE2MjQ1Njd9',
+      },
+      qiniu: {
+        test: 'http://test.yiguanjia.me',
+        certificate: 'http://certificate.yiguanjia.me',
+      },
       percent: 0,
       currentRate: 0,
+      imgSrc: '',
     };
   },
+  props: {
+    title: {
+      type: String,
+      default: '添加图片',
+    },
+  },
   computed: {
     text() {
       return `${this.currentRate.toFixed(0)}%`;
@@ -40,6 +57,17 @@ export default {
   methods: {
     onRead(file) {
       const self = this;
+      const MAXFILE = 1024 * 1024 * 8;
+      if (file.file.size > MAXFILE) {
+        const fail = self.$toast.fail({
+          duration: 0,
+          message: '上传图片小于8MB',
+        });
+        setTimeout(() => {
+          fail.clear();
+        }, 3000);
+        return;
+      }
       const config = {
         useCdnDomain: true,
         region: qiniu.region.z0,
@@ -48,31 +76,50 @@ export default {
       const putextra = {
         fname: file.file.name,
         params: {},
-        mimeType: [] || null,
+        mimeType: null,
       };
       const observer = {
         next(res) {
+          self.imgSrc = '';
           // 上传中
-          self.$nextTick(() => {
-            self.percent = res.total.percent;
-          });
+          self.percent = res.total.percent;
+          // console.log(res.total.percent);
+          if (res.total.percent === 100) {
+            self.percent = 0;
+            self.currentRate = 0;
+            self.$toast.success('上传成功');
+            self.imgSrc =
+              process.env.NODE_ENV === 'development'
+                ? `${self.qiniu.test}/${key}`
+                : `${self.qiniu.certificate}/${key}`;
+            self.$emit('imgSrc', self.imgSrc);
+          }
+          // self.$nextTick(() => {});
         },
         error(err) {
           // 上传失败
           console.log(err);
         },
+        // eslint-disable-next-line
         complete(res) {
           // 上传成功
-          console.log(res);
-          console.log(`http://certificate.honghaitao.net/${key}`);
-          self.percent = 0;
-          self.currentRate = 0;
+          // console.log(res);
+          // console.log(`http://certificate.honghaitao.net/${key}`);
+          // console.log(`http://certificate.yiguanjia.me/${key}`);
+          // self.$nextTick(() => {});
         },
       };
+      console.log(
+        process.env.NODE_ENV === 'development'
+          ? self.token.test
+          : self.token.certificate,
+      );
       const observable = qiniu.upload(
         file.file,
         key,
-        self.token,
+        process.env.NODE_ENV === 'development'
+          ? self.token.test
+          : self.token.certificate,
         putextra,
         config,
       );
@@ -86,6 +133,12 @@ export default {
   .van-uploader {
     position: relative;
     padding: 20px;
+    font-size: 15px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
     .van-icon {
       margin: 0 auto;
       display: block;
@@ -97,9 +150,28 @@ export default {
       color: #999;
     }
     .title {
-      font-size: 15px;
-      text-align: center;
-      // margin-top: -10px;
+      margin-top: 10px;
+    }
+    .van-circle {
+      display: block;
+      position: static;
+      width: 60px !important;
+      height: 60px !important;
+    }
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+  &:nth-child(odd) {
+    .van-uploader {
+      padding-right: 10px;
+    }
+  }
+  &:nth-child(even) {
+    .van-uploader {
+      padding-left: 10px;
     }
   }
 }