项目初始化
This commit is contained in:
jerry
183
pages/clerk/apply/components/formAvatar.vue
Normal file
183
pages/clerk/apply/components/formAvatar.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="form-item">
|
||||
<view class="label">上传头像</view>
|
||||
</view>
|
||||
<view class="upload-box">
|
||||
<!-- <button v-if="mp_is_new" class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<u-avatar size="180" :src="avatarUrl"></u-avatar>
|
||||
<view class="icon">
|
||||
<u-icon name="camera" color="#fff" size="30"></u-icon>
|
||||
</view>
|
||||
</button> -->
|
||||
|
||||
<view class="avatar-box" @click="chooseImage">
|
||||
<u-avatar size="180" :src="avatarUrl"></u-avatar>
|
||||
<view class="icon">
|
||||
<u-icon name="camera" color="#fff" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mp_is_new: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifdef MP-WEIXIN
|
||||
const version = uni.getSystemInfoSync().SDKVersion;
|
||||
if(this.compareVersion(version, '2.21.2') >= 0){
|
||||
this.mp_is_new = true;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
avatarUrl() {
|
||||
return this.modelValue;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 小程序比较版本信息
|
||||
* @param v1 当前版本
|
||||
* @param v2 进行比较的版本
|
||||
* @return boolen
|
||||
*
|
||||
*/
|
||||
compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i])
|
||||
const num2 = parseInt(v2[i])
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
},
|
||||
//选照片 or 拍照
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
success: (res) => {
|
||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
uni.getImageInfo({
|
||||
src: res.tempFilePaths[i],
|
||||
success: (image) => {
|
||||
this.uploadImage(image.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadImage(path) {
|
||||
FileApi.uploadFile(path).then((res) => {
|
||||
this.$emit('update:modelValue', res.data);
|
||||
});
|
||||
},
|
||||
// 微信头像获取
|
||||
onChooseAvatar(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
this.uploadImage(avatarUrl);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 5px;
|
||||
background-color: var(--ui-BG-Main);
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
padding: unset;
|
||||
margin: unset;
|
||||
border: unset;
|
||||
position: relative;
|
||||
line-height: unset;
|
||||
background-color: unset;
|
||||
font-size: unset;
|
||||
color: unset;
|
||||
border-radius: unset;
|
||||
text-align: unset;
|
||||
text-decoration: unset;
|
||||
display: unset;
|
||||
overflow: unset;
|
||||
}
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
pages/clerk/apply/components/formCity.vue
Normal file
69
pages/clerk/apply/components/formCity.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="form-item">
|
||||
<view class="label">所在城市</view>
|
||||
<u-input @click="citySelect" input-align="right" type="select" placeholder="请选择所在的城市" v-model="city" />
|
||||
</view>
|
||||
<!-- 省市区弹窗 -->
|
||||
<su-region-picker :show="show" @cancel="show = false" @confirm="cityOk" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
params: {
|
||||
province: true,
|
||||
city: true,
|
||||
area: false
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
city() {
|
||||
return this.modelValue;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
citySelect() {
|
||||
this.show = true;
|
||||
},
|
||||
cityOk(e) {
|
||||
this.$emit('update:modelValue', e.city_name);
|
||||
this.show = false;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
pages/clerk/apply/components/formImage.vue
Normal file
73
pages/clerk/apply/components/formImage.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="form-item">
|
||||
<view class="label">上传图片</view>
|
||||
<view>{{imgList.length}}/{{number}}</view>
|
||||
</view>
|
||||
<view class="upload-box">
|
||||
<shmily-drag-image :number="number" v-model="imgList"></shmily-drag-image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
number: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.imgList = this.modelValue;
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
imgList: {
|
||||
handler: function(newVal, oldVal) {
|
||||
this.$emit('update:modelValue', newVal);
|
||||
}
|
||||
},
|
||||
modelValue: {
|
||||
handler: function(newVal, oldVal) {
|
||||
this.imgList = newVal;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
90
pages/clerk/apply/components/formSex.vue
Normal file
90
pages/clerk/apply/components/formSex.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="form-item">
|
||||
<view class="label">性别</view>
|
||||
<view class="radio-box">
|
||||
<view @click="change(item)" class="text" :class="item.value == valueDom ? 'active' : ''" v-for="(item,index) in list">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: '男',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
value: '1',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
valueDom() {
|
||||
return this.modelValue;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.$emit('update:modelValue', e.value);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-item {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ececec;
|
||||
color: #949494;
|
||||
border-radius: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: #949494;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
255
pages/clerk/apply/components/formVoice.vue
Normal file
255
pages/clerk/apply/components/formVoice.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="form-bg">
|
||||
<view class="form-item">
|
||||
<view class="label">录音</view>
|
||||
<view class="bubble-box">
|
||||
<u-input @click="topBubble" input-align="right" type="select" :placeholder="voice.name" />
|
||||
<tui-bubble-popup :show="show" :mask="false" position="absolute" direction="right" triangleRight="-22rpx" triangleTop="30rpx" @close="topBubble" :flexEnd="false">
|
||||
<view @click="change(item)" class="tui-menu-item" v-for="(item,index) in list">{{item.name}}</view>
|
||||
</tui-bubble-popup>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="voice-box" v-if="voice.type == 'voice'">
|
||||
<view v-if="voiceUrl" @click="playAudio" class="upload-btn-box">
|
||||
<view class="icon">
|
||||
<u-icon v-if="play" name="pause" color="#fff" size="70"></u-icon>
|
||||
<u-icon v-else name="play-right-fill" color="#fff" size="70"></u-icon>
|
||||
</view>
|
||||
<view class="upload-btn" v-if="play">停止播放</view>
|
||||
<view class="upload-btn" v-else>播放录音</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<all-speech ref="speech" @okClick="voiceOk"></all-speech>
|
||||
</view>
|
||||
<view v-if="voiceUrl" @click="reloadBtn" class="reload-btn">
|
||||
<u-icon name="reload" size="30"></u-icon>
|
||||
<text class="text">重录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="voice-box" v-if="voice.type == 'upload'">
|
||||
<view v-if="voiceUrl" @click="playAudio" class="upload-btn-box">
|
||||
<view class="icon">
|
||||
<u-icon v-if="play" name="pause" color="#fff" size="70"></u-icon>
|
||||
<u-icon v-else name="play-right-fill" color="#fff" size="70"></u-icon>
|
||||
</view>
|
||||
<view class="upload-btn" v-if="play">停止播放</view>
|
||||
<view class="upload-btn" v-else>播放录音</view>
|
||||
</view>
|
||||
<view v-else @click="chooseVoice" class="upload-btn-box">
|
||||
<view class="icon">
|
||||
<u-icon name="plus" color="#fff" size="70"></u-icon>
|
||||
</view>
|
||||
<view class="upload-btn">上传录音文件</view>
|
||||
</view>
|
||||
<view v-if="voiceUrl" @click="reloadBtn" class="reload-btn">
|
||||
<u-icon name="reload" size="30"></u-icon>
|
||||
<text class="text">重录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
import tuiBubblePopup from "@/components/thorui/tui-bubble-popup/tui-bubble-popup.vue"
|
||||
const audio = uni.createInnerAudioContext();
|
||||
export default {
|
||||
components: {
|
||||
tuiBubblePopup,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
voice: {
|
||||
|
||||
},
|
||||
list: [
|
||||
{
|
||||
name: '直接录音',
|
||||
type: 'voice',
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
voicePath: '',
|
||||
show: false,
|
||||
play: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.voice = this.list[this.current];
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
var voiceType = {
|
||||
name: '上传手机音频',
|
||||
type: 'upload',
|
||||
};
|
||||
this.list.push(voiceType);
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
voiceUrl(){
|
||||
return this.modelValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
topBubble() {
|
||||
this.show = !this.show;
|
||||
},
|
||||
change(e) {
|
||||
this.reloadBtn();
|
||||
this.topBubble();
|
||||
this.voice = e;
|
||||
},
|
||||
reloadBtn() {
|
||||
this.play = false;
|
||||
this.$emit('update:modelValue', "");
|
||||
this.$emit('sec', "");
|
||||
},
|
||||
playAudio() {
|
||||
if(this.play){
|
||||
this.play = false;
|
||||
audio.stop();
|
||||
}else{
|
||||
this.play = true;
|
||||
//语音自然播放结束
|
||||
audio.onEnded((res) => {
|
||||
this.play = false;
|
||||
});
|
||||
audio.src = this.modelValue;
|
||||
audio.play();
|
||||
}
|
||||
},
|
||||
chooseVoice() {
|
||||
var that = this;
|
||||
uni.chooseFile({
|
||||
count: 1, //默认100
|
||||
extension:['.mp3','.mp4','.m4a'],
|
||||
success: function (res) {
|
||||
var fileSize = res.tempFiles[0].size;
|
||||
if (fileSize > 1024 * 1024 * 10) { // 假设设置的文件大小限制为5MB
|
||||
uni.showToast({
|
||||
title: '文件大小限制为10MB',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
that.voicePath = res.tempFilePaths[0];
|
||||
console.log(JSON.stringify(res.tempFilePaths));
|
||||
that.uploadVoice(that.voicePath);
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadVoice(path) {
|
||||
FileApi.uploadFile(path).then((res) => {
|
||||
this.$emit('update:modelValue', res.data);
|
||||
});
|
||||
},
|
||||
voiceOk(e) {
|
||||
this.voicePath = e.path;
|
||||
this.uploadVoice(this.voicePath);
|
||||
this.$emit('sec', e.sec);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-bg {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-box {
|
||||
position: relative;
|
||||
|
||||
.tui-menu-item {
|
||||
width: 100%;
|
||||
padding: 30rpx 20rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tui-menu-item:after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
top: 0%;
|
||||
right: 10%;
|
||||
bottom: 0%;
|
||||
left: 10%;
|
||||
border: 0 solid #ebedf0;
|
||||
border-color: #646566;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.tui-menu-item:last-child:after {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-box {
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
background-color: #3cc9a4;
|
||||
border-radius: 100%;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-btn-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
font-size: 34rpx;
|
||||
color: #aaa;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.reload-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
font-size: 30rpx;
|
||||
color: #3cc9a4;
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user