新增用户资料补充页面

+/*
+ * @Date: 2022-10-21 11:21:05
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-10-21 11:37:46
+ * @FilePath: /swx/src/pages/apxUserInfo/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '个人信息',
+  usingComponents: {
+  },
+}

+.bg-gradient {
+  background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
+  /*调整下划线的宽度占百分之百  高度是3px */
+  background-size: 100% 1vw;
+  /* 调整下划线的起始位置 左侧是0 上边是1.15em */
+  background-position: 0 1.25rem;
+}
+
+.join-activity-page {
+  background-color: #FFFFFF;
+  .activity-title {
+    background-color: #FFFFFF;
+    .box {
+      padding: 1rem 1rem 0.5rem 1rem;
+      text-align: center;
+    }
+  }
+}
+
+.form-item {
+  padding: 0.5rem 1rem;
+  background-color: #FFFFFF;
+  .form-item-title {
+    font-size: 1rem;
+    &.border {
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #F2F2F2;
+    }
+    &.required::before {
+      color: red;
+      content: "*";
+      font-size: 0.9rem;
+      left: 0.5rem;
+      position: absolute;
+    }
+    .sub {
+      color: #999;
+    }
+  }
+}
+
+.limit-wrapper {
+  .border {
+    overflow: auto;
+    border-bottom: 1px solid #F2F2F2;
+    .fix {
+      float: left;
+      padding-top: 0.6rem;
+    }
+  }
+}
+.limit-button-wrapper {
+  padding: 1rem 0;
+  margin: 1rem;
+  text-align: center;
+  .button {
+    padding: 0.5rem 1rem; border-radius: 1rem;
+  }
+  .cancel {
+    color: #199A74;
+    border: 1px solid #199A74;
+  }
+  .confirm {
+    color: #FFFFFF;
+    background-color: #199A74;
+  }
+}
+
+.upload-box {
+  position: relative;
+  .upload-icon {
+    position: absolute;
+    left: 40%;
+    transform: translateX(-40%);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .upload-close {
+    position: absolute;
+    right: -0.5rem;
+    top: -0.5rem;
+  }
+}

+<!--
+ * @Date: 2022-09-19 14:11:06
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-10-21 13:36:39
+ * @FilePath: /swx/src/pages/apxUserInfo/index.vue
+ * @Description: 补充资料
+-->
+<template>
+  <div class="join-activity-page">
+    <view class="activity-title">
+      <view class="box">
+        <text class="bg-gradient" style="font-size: 1.25rem;">请完善个人信息</text>
+      </view>
+    </view>
+    <view class="at-input">
+      <view class="at-input__container">
+        <label class="h5-label at-input__title at-input__title--required">头像</label>
+        <van-uploader v-if="!has_image" @after-read="afterRead">
+          <view class="">
+            <van-icon :name="icon_upload" size="5rem" color="" class="upload-icon" />
+          </view>
+        </van-uploader>
+        <view v-else class="upload-box">
+          <van-image :round="true" width="5rem" height="5rem" :src="uploader_image" />
+          <van-icon name="clear" size="1.5rem" color="#000" class="upload-close" @tap="removeUploadImage" />
+        </view>
+      </view>
+    </view>
+    <AtInput required :border="true" title="昵称" type='text' placeholder='请输入昵称' v-model:value="nickname" />
+  <bottom-button @on-submit="onSubmit">提交</bottom-button>
+  </div>
+  <van-toast id="van-toast" />
+
+</template>
+
+<script setup>
+import Taro from '@tarojs/taro'
+import { ref } from "vue";
+import { AtInput } from 'taro-ui-vue3'
+import "taro-ui-vue3/dist/style/components/input.scss";
+import bottomButton from "@/components/bottom-button";
+import icon_upload from '@/images/icon/qiandao@2x.png'
+import BASE_URL from '@/utils/config';
+import Toast from '@/components/vant-weapp/toast/toast';
+
+const nickname = ref('');
+const has_image = ref(false)
+const uploader_image = ref('')
+const afterRead = (event) => {
+  wx.showLoading({
+    title: '上传中',
+    mask: true
+  });
+  const { file } = event.detail;
+  // 获取上传URL
+  wx.uploadFile({
+    url: BASE_URL + '/admin/?m=srv&a=upload',
+    filePath: file.url,
+    name: 'file',
+    header: {
+      'content-type': 'multipart/form-data',
+    },
+    success: function (res) {
+      let upload_data = JSON.parse(res.data);
+      wx.hideLoading({
+        success: () => {
+          if (res.statusCode === 200) {
+            has_image.value = true;
+            uploader_image.value = upload_data.data.src;
+          } else {
+            wx.showToast({
+              icon: 'error',
+              title: '服务器错误,稍后重试！',
+              mask: true
+            })
+          }
+        },
+      });
+    }
+  });
+}
+const removeUploadImage = () => {
+  has_image.value = false;
+  uploader_image.value = ''
+}
+
+const onSubmit = () => {
+  if (!uploader_image.value) {
+    Toast('头像不能为空');
+    return false;
+  }
+  if (!nickname.value) {
+    Toast('昵称不能为空');
+    return false;
+  }
+}
+</script>
+
+<script>
+import "./index.less";
+
+export default {
+  name: "apxUserInfoPage",
+};
+</script>