项目初始化
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>
|
||||
213
pages/clerk/apply/edit.vue
Normal file
213
pages/clerk/apply/edit.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view class="page-app theme-light main-green font-1">
|
||||
<su-navbar title="编辑资料" statusBar></su-navbar>
|
||||
|
||||
<view class="form-box">
|
||||
<form-avatar v-model="form.avatar"></form-avatar>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<view class="form-item">
|
||||
<view class="label">昵称</view>
|
||||
<u-input input-align="right" placeholder="请输入昵称" v-model="form.nickname" />
|
||||
</view>
|
||||
<form-sex v-model="form.sex"></form-sex>
|
||||
<view class="form-item">
|
||||
<view class="label">年龄</view>
|
||||
<u-input input-align="right" placeholder="请输入年龄" type="number" v-model="form.age" />
|
||||
</view>
|
||||
<view class="form-item" v-if="isPass">
|
||||
<view class="label">微信</view>
|
||||
<u-input input-align="right" placeholder="请输入您的微信" v-model="form.weixin" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">手机号</view>
|
||||
<u-input input-align="right" placeholder="请输入手机号" type="number" v-model="form.mobile" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">相关经验</view>
|
||||
<u-input input-align="right" placeholder="是否有其它店铺的经验" v-model="form.experience" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">自我介绍</view>
|
||||
<u-input input-align="right" placeholder="请输入自我介绍" v-model="form.intro" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">所在城市</view>
|
||||
<u-input input-align="right" placeholder="请输入所在城市" v-model="form.city" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<form-image :number="6" v-model="imgList"></form-image>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<form-voice @sec="toSec" v-model="form.sound"></form-voice>
|
||||
</view>
|
||||
|
||||
<view class="submit-box">
|
||||
<view class="sub-btn" @click="saveApply">提交申请</view>
|
||||
</view>
|
||||
|
||||
<s-menu-tools />
|
||||
<s-auth-modal />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormAvatar from '@/pages/clerk/apply/components/formAvatar.vue';
|
||||
import FormSex from '@/pages/clerk/apply/components/formSex.vue';
|
||||
import FormVoice from '@/pages/clerk/apply/components/formVoice.vue';
|
||||
import FormImage from '@/pages/clerk/apply/components/formImage.vue';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
FormAvatar,
|
||||
FormSex,
|
||||
FormVoice,
|
||||
FormImage,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: 0,
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
sex: '',
|
||||
age: '',
|
||||
weixin: '',
|
||||
mobile: '',
|
||||
experience: '',
|
||||
intro: '',
|
||||
city: '',
|
||||
albums: '',
|
||||
sound: '',
|
||||
soundTime: '',
|
||||
},
|
||||
imgList: [],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.form.id = options.id;
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
isPass() {
|
||||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
ClerkApi.getClerkApply(this.form.id).then((res) => {
|
||||
this.form = res.data;
|
||||
if(this.form.albums){
|
||||
this.imgList = this.form.albums.split(',');
|
||||
}
|
||||
});
|
||||
},
|
||||
saveApply() {
|
||||
if(!this.form.avatar){
|
||||
sheep.$helper.toast('请上传头像');
|
||||
return;
|
||||
}
|
||||
if(!this.form.nickname){
|
||||
sheep.$helper.toast('请输入昵称');
|
||||
return;
|
||||
}
|
||||
if(!this.form.sex){
|
||||
sheep.$helper.toast('请选择性别');
|
||||
return;
|
||||
}
|
||||
if(!this.form.age){
|
||||
sheep.$helper.toast('请输入年龄');
|
||||
return;
|
||||
}
|
||||
if(this.isPass && !this.form.weixin){
|
||||
sheep.$helper.toast('请输入正确的微信号');
|
||||
return;
|
||||
}
|
||||
if(!this.form.mobile){
|
||||
sheep.$helper.toast('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
if(!this.form.experience){
|
||||
sheep.$helper.toast('请输入相关经验');
|
||||
return;
|
||||
}
|
||||
if(!this.form.intro){
|
||||
sheep.$helper.toast('请输入自我介绍');
|
||||
return;
|
||||
}
|
||||
if(!this.form.city){
|
||||
sheep.$helper.toast('请输入所在城市');
|
||||
return;
|
||||
}
|
||||
if(this.imgList.length < 1){
|
||||
sheep.$helper.toast('请上传图片');
|
||||
return;
|
||||
}
|
||||
this.form.albums = this.imgList.join(',');
|
||||
ClerkApi.updateClerkApply(this.form).then((res) => {
|
||||
|
||||
});
|
||||
},
|
||||
toSec(e) {
|
||||
this.form.soundTime = e;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-app {
|
||||
background-color: #fafafa;
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
.form-box {
|
||||
background-color: #fff;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 140rpx;
|
||||
padding: 0 15px;
|
||||
z-index: 99;
|
||||
|
||||
.sub-btn {
|
||||
background-color: var(--ui-BG-Main);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
border-radius: 40px;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
307
pages/clerk/apply/index.vue
Normal file
307
pages/clerk/apply/index.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="page-app theme-light main-green font-1">
|
||||
<su-navbar title="达人申请" statusBar></su-navbar>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="showSubscribeBtn" class="subscribe-box">
|
||||
<u-icon name="bell-fill" color="var(--ui-BG-Main)" size="44"></u-icon>
|
||||
<view class="info">获取实时审核结果</view>
|
||||
<view class="sub-btn" @tap="subscribeMessage">立即订阅</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="form-box">
|
||||
<form-avatar v-model="form.avatar"></form-avatar>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<view class="form-item">
|
||||
<view class="label">昵称</view>
|
||||
<u-input input-align="right" placeholder="请输入昵称" v-model="form.nickname" />
|
||||
</view>
|
||||
<form-sex v-model="form.sex"></form-sex>
|
||||
<view class="form-item">
|
||||
<view class="label">年龄</view>
|
||||
<u-input input-align="right" placeholder="请输入年龄" type="number" v-model="form.age" />
|
||||
</view>
|
||||
<view class="form-item" v-if="isPass">
|
||||
<view class="label">微信</view>
|
||||
<u-input input-align="right" placeholder="请输入您的微信" v-model="form.weixin" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">手机号</view>
|
||||
<u-input input-align="right" placeholder="请输入手机号" type="number" v-model="form.mobile" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">自我介绍</view>
|
||||
<u-input input-align="right" placeholder="请输入自我介绍" v-model="form.intro" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">所在城市</view>
|
||||
<u-input input-align="right" placeholder="请输入所在城市" v-model="form.city" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<form-image :number="6" v-model="imgList"></form-image>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<form-voice @sec="toSec" v-model="form.sound"></form-voice>
|
||||
</view>
|
||||
|
||||
<view class="check-box" @click="changeCheck">
|
||||
<u-icon size="44" v-if="check" name="checkmark-circle-fill" color="var(--ui-BG-Main)"></u-icon>
|
||||
<u-icon size="44" v-else name="checkmark-circle" color="var(--ui-BG-Main)"></u-icon>
|
||||
<text class="info">我已阅读并接受</text>
|
||||
<text @tap.stop="toAggre()" class="sub-btn">《达人申请协议》</text>
|
||||
</view>
|
||||
|
||||
<view class="submit-box">
|
||||
<view class="sub-btn" @click="saveApply">提交申请</view>
|
||||
</view>
|
||||
|
||||
<s-menu-tools />
|
||||
<s-auth-modal />
|
||||
<qrcode-modal />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormAvatar from '@/pages/clerk/apply/components/formAvatar.vue';
|
||||
import FormSex from '@/pages/clerk/apply/components/formSex.vue';
|
||||
import FormVoice from '@/pages/clerk/apply/components/formVoice.vue';
|
||||
import FormImage from '@/pages/clerk/apply/components/formImage.vue';
|
||||
import qrcodeModal from '@/components/qrcode-modal/qrcode-modal.vue';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import test from '@/sheep/helper/test.js';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
FormAvatar,
|
||||
FormSex,
|
||||
FormVoice,
|
||||
FormImage,
|
||||
qrcodeModal,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
sex: '',
|
||||
age: '',
|
||||
weixin: '',
|
||||
mobile: '',
|
||||
experience: '',
|
||||
intro: '',
|
||||
city: '',
|
||||
albums: '',
|
||||
sound: '',
|
||||
soundTime: '',
|
||||
},
|
||||
imgList: [],
|
||||
|
||||
showSubscribeBtn: false,
|
||||
|
||||
check: true,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef MP
|
||||
// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
|
||||
this.autoSubscribeMessage();
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
isPass() {
|
||||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
saveApply() {
|
||||
// #ifdef MP
|
||||
// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
|
||||
this.autoSubscribeMessage();
|
||||
// #endif
|
||||
|
||||
if(!this.form.avatar){
|
||||
sheep.$helper.toast('请上传头像');
|
||||
return;
|
||||
}
|
||||
if(!this.form.nickname){
|
||||
sheep.$helper.toast('请输入昵称');
|
||||
return;
|
||||
}
|
||||
if(!this.form.sex){
|
||||
sheep.$helper.toast('请选择性别');
|
||||
return;
|
||||
}
|
||||
if(!this.form.age){
|
||||
sheep.$helper.toast('请输入年龄');
|
||||
return;
|
||||
}
|
||||
if(this.form.age < 18){
|
||||
sheep.$helper.toast('未成年禁止申请');
|
||||
return;
|
||||
}
|
||||
if(this.isPass && !this.form.weixin){
|
||||
sheep.$helper.toast('请输入正确的微信号');
|
||||
return;
|
||||
}
|
||||
if(!this.form.mobile || !test.mobile(this.form.mobile)){
|
||||
sheep.$helper.toast('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
if(!this.form.intro){
|
||||
sheep.$helper.toast('请输入自我介绍');
|
||||
return;
|
||||
}
|
||||
if(!this.form.city){
|
||||
sheep.$helper.toast('请输入所在城市');
|
||||
return;
|
||||
}
|
||||
if(this.imgList.length < 1){
|
||||
sheep.$helper.toast('请上传图片');
|
||||
return;
|
||||
}
|
||||
if(this.imgList.length < 1){
|
||||
sheep.$helper.toast('请上传图片');
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.check){
|
||||
sheep.$helper.toast('未同意协议');
|
||||
return;
|
||||
}
|
||||
|
||||
this.form.albums = this.imgList.join(',');
|
||||
ClerkApi.createClerkApply(this.form).then((res) => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/worker/levelList/index', {id: res.data});
|
||||
}
|
||||
});
|
||||
},
|
||||
toSec(e) {
|
||||
this.form.soundTime = e;
|
||||
},
|
||||
subscribeMessage() {
|
||||
const event = [WxaSubscribeTemplate.CLERK_APPLY_SUCCESS];
|
||||
event.push(WxaSubscribeTemplate.CLERK_BLIND);
|
||||
event.push(WxaSubscribeTemplate.CLERK_ORDER);
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(WxaSubscribeTemplate.CLERK_APPLY_SUCCESS);
|
||||
uni.setStorageSync(WxaSubscribeTemplate.CLERK_APPLY_SUCCESS, '已订阅');
|
||||
// 隐藏订阅按钮
|
||||
this.showSubscribeBtn = false;
|
||||
});
|
||||
},
|
||||
async autoSubscribeMessage() {
|
||||
// 1. 校验是否手动订阅过
|
||||
const subscribeBtnStatus = uni.getStorageSync(WxaSubscribeTemplate.CLERK_APPLY_SUCCESS);
|
||||
if (!subscribeBtnStatus) {
|
||||
this.showSubscribeBtn = true;
|
||||
}
|
||||
|
||||
// 2. 订阅消息
|
||||
this.subscribeMessage();
|
||||
},
|
||||
changeCheck() {
|
||||
if(this.check){
|
||||
this.check = false;
|
||||
}else{
|
||||
this.check = true;
|
||||
}
|
||||
},
|
||||
toAggre() {
|
||||
sheep.$router.go('/pages/public/richtext', {title: '店员申请协议'})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-app {
|
||||
background-color: #fafafa;
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
.form-box {
|
||||
background-color: #fff;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 140rpx;
|
||||
padding: 0 15px;
|
||||
z-index: 99;
|
||||
|
||||
.sub-btn {
|
||||
background-color: var(--ui-BG-Main);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
border-radius: 40px;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
|
||||
.info {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
|
||||
.info{
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user