index.vue
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!--
* @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>