项目初始化
This commit is contained in:
jerry
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