✨ feat(我的页面): 新增实名认证页面和新增儿童页面

hookehuyr
Commit ceb208f41051cf59a84d6b3e252e1020c731eff6 ceb208f4 1 parent 4b7b4f48
Showing 7 changed files with 234 additions and 1 deletions
package-lock.json
package.json
src/route.js
src/views/me/addUser.vue
src/views/me/index.vue
src/views/me/verifyUser.vue
yarn.lock
--- a/package-lock.json
View file @ceb208f
+++ b/package-lock.json
View file @ceb208f
@@ -13,6 +13,7 @@
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
         "mui-player": "^1.6.0",
+        "uuid": "^8.3.2",
         "vant": "^4.0.0-alpha.0",
         "vue": "^3.2.31",
         "weixin-js-sdk": "^1.6.0"
@@ -1578,6 +1579,14 @@
         "base64-arraybuffer": "^1.0.2"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vant": {
       "version": "4.0.0-alpha.0",
       "resolved": "https://registry.npmjs.org/vant/-/vant-4.0.0-alpha.0.tgz",
@@ -2847,6 +2856,11 @@
         "base64-arraybuffer": "^1.0.2"
       }
     },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
     "vant": {
       "version": "4.0.0-alpha.0",
       "resolved": "https://registry.npmjs.org/vant/-/vant-4.0.0-alpha.0.tgz",
--- a/package.json
View file @ceb208f
+++ b/package.json
View file @ceb208f
@@ -14,6 +14,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "mui-player": "^1.6.0",
+    "uuid": "^8.3.2",
     "vant": "^4.0.0-alpha.0",
     "vue": "^3.2.31",
     "weixin-js-sdk": "^1.6.0"
--- a/src/route.js
View file @ceb208f
+++ b/src/route.js
View file @ceb208f
@@ -117,6 +117,14 @@ export default [{
   },
   children: []
 }, {
+  path: '/me/addUser',
+  name: '新增儿童',
+  component: () => import('./views/me/addUser.vue'),
+  meta: {
+    title: '新增儿童'
+  },
+  children: []
+}, {
   path: '/image',
   name: 'html转图片',
   component: () => import('./views/html2canvas.vue'),
--- a/src/views/me/addUser.vue 0 → 100644
View file @ceb208f
+++ b/src/views/me/addUser.vue 0 → 100644
View file @ceb208f
+<template>
+  <div class="add-user-page">
+    <p style="color: #713610; font-size: 1.25rem; padding: 1rem; text-align: center; font-weight: bold;">请录入儿童的信息</p>
+    <div style="">
+      <van-config-provider :theme-vars="themeVars">
+        <van-form @submit="onSubmit">
+          <van-cell-group inset>
+            <van-field v-model="user_info.kindergarten" name="幼儿园" label="幼儿园" placeholder="" disabled />
+            <van-field v-model="user_info.job" name="儿童姓名" label="儿童姓名" placeholder="请输入儿童姓名" />
+            <van-row style="padding: 2vh 0;">
+              <van-col span="7"><span style="font-size: 14px; color: #323233; margin-left: 2vh;">儿童头像</span></van-col>
+              <van-col span="17"><span style="font-size: 12px; color: #B0B0B0;">请上传一张清晰的儿童照片</span></van-col>
+            </van-row>
+            <van-row style="padding-bottom: 2vh;">
+              <van-col span="16" offset="8">
+                <van-uploader v-model="fileList" :after-read="afterRead" :before-delete="beforeDelete" :max-count="1" />
+              </van-col>
+            </van-row>
+          </van-cell-group>
+          <div style="margin: 2vh;">
+            <van-button v-if="lock_btn" loading type="primary" loading-text="上传中..." style="width: 100%;" round></van-button>
+            <van-button v-else @click="saveInfo" :disabled="lock_btn" type="primary" native-type="submit" style="width: 100%;" round>保存</van-button>
+          </div>
+        </van-form>
+      </van-config-provider>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { v4 as uuidv4 } from 'uuid';
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import axios from '@/utils/axios';
+import qs from 'Qs'
+import $ from 'jquery'
+import { Toast } from 'vant';
+const $route = useRoute();
+const $router = useRouter();
+
+const themeVars = {
+  buttonPrimaryBackground: '#F9D95C',
+  buttonPrimaryBorderColor: '#F9D95C',
+  buttonPrimaryColor: '#713610',
+};
+
+const onSubmit = (values) => {
+  // console.log('submit', values);
+};
+
+// const uuid = () => {
+//   let s = [];
+//   let hexDigits = '0123456789abcdef';
+//   for (var i = 0; i < 36; i++) {
+//     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+//   }
+//   s[14] = '4';  // bits 12-15 of the time_hi_and_version field to 0010
+//   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
+//   s[8] = s[13] = s[18] = s[23] = '-';
+
+//   var uuid = s.join('');
+//   return uuid;
+// }
+
+// 图片模块
+let lock_btn = ref(false); // 保存按钮锁
+let fileList = ref([]);
+let upload_image = reactive({ meta_id: '' });
+const afterRead = (res) => {
+  lock_btn.value = true; // 上传开始, 不能保存
+  let affix = uuidv4();
+  // let affix = uuid();
+  // 此时可以自行将文件上传至服务器
+  let dataURL = res.content;
+  let base64url = dataURL.slice(dataURL.indexOf(',') + 1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
+  // 获取七牛token
+  axios.post('/srv/?f=shzl_comment&a=upload',
+  qs.stringify({
+    filename: `${affix}_${res.file.name}`,
+    file: base64url
+  }))
+  .then(res => {
+    if (res.statusText === 'OK') {
+      let config = {
+        headers: {
+          'Content-Type': 'application/octet-stream',
+          'Authorization': 'UpToken ' + res.data.token,    // UpToken后必须有一个 ' '(空格)
+        }
+      }
+      // 上传七牛服务器
+      axios.post('http://upload.qiniup.com/putb64/-1/key/' + res.data.key, base64url, config)
+        .then(res => {
+          if (res.data.filekey) {
+            let info = res.data;
+            axios.post('/srv/?f=shzl_comment&a=upload&t=save_file',
+            qs.stringify({
+              format: info.image_info.format,
+              hash: info.hash,
+              height: info.image_info.height,
+              width: info.image_info.width,
+              filekey: info.filekey,
+            }))
+            .then(res => {
+              upload_image.meta_id = res.data.data.meta_id;
+              lock_btn.value = false; // 头像上传完成, 打开锁
+            })
+            .catch(err => {
+              console.error(err); 
+            })
+          } else {
+            console.warn(res);
+            Toast({
+              icon: 'close',
+              message: res.data.msg
+            });
+          }
+        })
+        .catch(err => {
+          console.error(err);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        })
+    } else {
+      console.warn(res);
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+};
+const beforeDelete = () => { // 删除图片回调
+  user_info.meta_id = '';
+  upload_image.meta_id = '';
+  return true;
+}
+
+let user_info = reactive({
+  kindergarten: '杨浦民办科技幼稚园',
+  name: '',
+  meta_id: ''
+});
+
+onMounted(() => {
+  //
+  $('.content-section').height($(document).height() - $('.title-section').height());
+})
+
+// 保存用户信息
+const saveInfo = () => {
+  axios.post('/srv/?f=shzl_comment&a=user&t=edit',
+  qs.stringify({
+    kindergarten: user_info.kindergarten,
+    name: user_info.name,
+    meta_id: upload_image.meta_id ? upload_image.meta_id : user_info.meta_id,
+  }))
+  .then(res => {
+    if (res.data.code === 1) {
+      Toast.success({
+        message: '保存成功',
+        duration: 1000,
+        onClose: () => {
+          goBack();
+        }
+      });
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+}
+</script>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.add-user-page {
+  padding: 1rem;
+}
+</style>
\ No newline at end of file
--- a/src/views/me/index.vue
View file @ceb208f
+++ b/src/views/me/index.vue
View file @ceb208f
@@ -47,7 +47,7 @@
         <my-button type="custom" :custom-style="styleObject1" @on-click="goTo('/me/verifyUser')">实名认证</my-button>
       </div>
       <div>
-        <my-button type="custom" :custom-style="styleObject2" @on-click="">新增儿童</my-button>
+        <my-button type="custom" :custom-style="styleObject2" @on-click="goTo('/me/addUser')">新增儿童</my-button>
       </div>
     </div>
--- a/src/views/me/verifyUser.vue
View file @ceb208f
+++ b/src/views/me/verifyUser.vue
View file @ceb208f
@@ -40,6 +40,7 @@
 <script setup>
 import MyButton from '@/components/MyButton/index.vue'
+
 import { wxInfo } from '@/utils/tools';
 import qs from 'Qs'
 import { ref, reactive, onMounted } from 'vue'
--- a/yarn.lock
View file @ceb208f
+++ b/yarn.lock
View file @ceb208f
@@ -939,6 +939,11 @@
   dependencies:
     "base64-arraybuffer" "^1.0.2"
+"uuid@^8.3.2":
+  "integrity" "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+  "resolved" "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
+  "version" "8.3.2"
+
 "vant@^4.0.0-alpha.0":
   "integrity" "sha512-D1J0YZBZmVx8Ft2phhJ4x88sxPGylsyMmJJvWT5GDyusC5kU1ik8qe77Dwtp3fiaZSxs8Fb5Hv4LQmjeqxtMLQ=="
   "resolved" "https://registry.npmjs.org/vant/-/vant-4.0.0-alpha.0.tgz"