Files
dvcp_v2_wxcp_app/src/project/huizhili/AppCooperationPropaganda/addPropaganda.vue
2023-03-02 17:27:44 +08:00

915 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="addPropaganda">
<div class="task_name">
<div><span class="color_red">*</span><span class="title">任务名称</span></div>
<u-input v-model="form.taskTitle" type="text" placeholder="请输入" maxlength="15" class="inpt"/>
</div>
<div class="send_scope">
<div><span class="color_red">*</span><span class="title">发送范围</span></div>
<div @click="toSleectScoped">
<span>
<span v-if="type=='ResidentsGroup'">
<span class="color_gray" v-if="sum==0">请选择</span>
<span v-else>预计送达{{ sum }}个居民群</span>
</span>
<span v-if="type!='ResidentsGroup'">
<span class="color_gray" v-if="sum==0">请选择</span>
<span v-else>预计送达{{ sum }}名成员</span>
</span>
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
</span>
</div>
</div>
<div class="send_content">
<div class="content_title">
<div><span class="color_red">*</span><span class="title">发送内容</span></div>
<div style="color: #3399FF;" @click="preview">预览</div>
</div>
<div class="content_text">
<u-input v-model="content" type="textarea" height="372" :clearable="false" :auto-height="true" placeholder="请输入政策、活动、节日问候等内容" maxlength="1300"/>
</div>
<div class="content_fodder">
<div class="fodder_alls">
<div class="fodder_add" @click="showUpload = true"><u-icon name="plus" color="#CCD0D3" size="32"></u-icon></div>
<div class="fodder_title">添加素材</div>
<!-- <AiUploader :def.sync="files" placeholder="添加素材" type="file" :limit="9" multiple action="/app/wxcp/upload/uploadFile" :mediaId.sync="midiaIds"></AiUploader> -->
</div>
<div class="fodder_file" v-for="(item, index) in files" :key="index">
<div class="item">
<div class="images">
<img src=" https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="info">
<div class="name">{{ item.name }}</div>
<div class="size">{{ item.fileSizeStr }}</div>
</div>
<div class="remove" @click="remove" style="color: #f72c27">删除</div>
</div>
</div>
</div>
</div>
<div class="isExamine">
<div class="examineChange">
<div>宣发需要审批</div>
<u-switch v-model="enableExamine" size="40" @change="enableExamine = !!enableExamine"></u-switch>
</div>
<div class="examine_person" v-if="enableExamine == true">
<div><span class="color_red">*</span><span class="title">审批人</span></div>
<div @click="getDeptUser">
<span v-if="!form.examines.length" class="color_gray">请选择<u-icon name="arrow-right" color="#CCD0D3"></u-icon></span>
<span v-else>已选择{{ form.examines.length }}名人员</span>
</div>
</div>
<div class="examineChange">
<div>定时发送</div>
<u-switch v-model="isTimedTask" size="40" @change="isTimedTask = !!isTimedTask"></u-switch>
</div>
<div class="examine_person" v-if="isTimedTask == true">
<div><span class="color_red">*</span><span class="title">发送时间</span></div>
<div @click="showTaskTime = true">
<span class="color_gray" v-if="!form.choiceTime.length">请选择</span>
<span v-if="form.choiceTime.length">{{ form.choiceTime }}</span>
<u-icon name="arrow-right" color="#CCD0D3"/>
</div>
</div>
<div class="examineChange">
<div><span class="color_red">*</span>结束时间</div>
<div @click="showEndTime = true">
<span class="color_gray" v-if="!form.taskEndTime.length">请选择</span>
<span v-else>{{ form.taskEndTime }}</span>
<u-icon name="arrow-right" color="#CCD0D3"/>
</div>
</div>
<u-picker v-model="showEndTime" :params="endParams" mode="time" @confirm="choiceEndTime"></u-picker>
</div>
<u-picker v-model="showTaskTime" :params="params" mode="time" @confirm="choiceTime"></u-picker>
<div class="mask" v-show="showPopup" @tap="showPopup = false">
<div class="noticeModal" @tap.stop>
<div class="body">
<div class="text_content" v-if="content.length">
<img class="text_left" src="https://cdn.cunwuyun.cn/dvcp/announce/avatar.png" />
<div class="text_right">{{ content }}</div>
</div>
<div class="file_content" v-for="item in files" :key="item.id">
<img class="text_left" src="https://cdn.cunwuyun.cn/dvcp/announce/avatar.png" />
<img class="only_pic" :src="item.url" alt="" v-if="['.jpg', '.jpeg','.png'].indexOf(getExtension(item.name)) !== -1">
<video controls class="only_video" :src="item.url" v-if="getExtension(item.name) == '.mp4'"></video>
<div class="text_right file_right"
v-if="['.jpg', '.jpeg','.png','.mp4'].indexOf(getExtension(item.name)) === -1">
<div class="cont_left">
<h4>{{ item.name }}</h4>
<p>{{ item.fileSizeStr }}</p>
</div>
<div class="cont_right">
<img :src="fileIcon(item.name)" alt="">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="exit" @click="showPopup = false">退出预览</div>
</div>
</div>
</div>
<u-popup v-model="showUpload" mode="bottom" border-radius="24">
<div class="uploadPopup">
<div class="upload_card" v-for="(item,index) in uploadList" :key="index">
<div class="upload_item">{{ item.title }}</div>
<div class="upload_list">
<div class="list_item" v-for="(e, i) in item.list" :key="i" @click="uploadBtn(e.msgType)">
<img :src="e.icon" alt="">
<span>{{ e.name }}</span>
</div>
</div>
</div>
<div class="btnCancel" @click="showUpload = false">取消</div>
</div>
</u-popup>
<div class="btn">
<div class="submitBtn" @click="confirm">通知成员发送</div>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "addPropaganda",
data() {
return {
type: '',
form: {
taskTitle: '',
contents: [], // 发送内容
enableExamine: '0', // 是否需要审批 0否 1是
examines: [], // 审批人
choiceTime: '', // 定时发送时间
sendScope: '', // 0全部居民群、1按部门选择、2按网格选择
sendType: '0', // 0立即发送、1定时发送
wxGroups: [], // 送达居民群
filterCriteria: '',
taskEndTime: '', // 任务结束时间
sendChannel: 0,
},
forms: {
taskTitle: '',
taskType: '',
executorList: [], // 任务执行人集合(群发朋友圈的执行人)
groupList: [], // 添加人集合
contents: [], // 发送内容
enableExamine: '0', // 是否需要审批 0否 1是
examines: [], // 审批人
choiceTime: '', // 定时发送时间
sendScope: '', // 0全部居民群、1按部门选择、2按网格选择
sendType: '0', // 0立即发送、1定时发送
gender: '', // 性别0-女、1-男、2-全部
filterCriteria: '',
filterTags: '', //过滤标签id集合
filterTagsName: '', //过滤标签名称
excludeFilterTags: '', // 剔除标签id集合
excludeFilterTagsName: '', // 剔除标签名称
addFromTime: '',
addEndTime: '',
taskEndTime: '', // 任务结束时间
},
enableExamine: false,
isTimedTask: false,
content: '',
files: [],
showTaskTime: false,
userList: [],
showPopup: false,
showFodder: false,
showUpload: false,
showEndTime: false,
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: false,
},
endParams: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: false,
},
flag: false,
uploadList: [
{
title: '从本地上传',
list: [
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
name: '图片',
msgType: 'image'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
name: '视频',
msgType: 'video'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/folder.png',
name: '文件',
msgType: 'file'
}
]
}
],
uploadCircle: [
{
title: '从本地上传',
list: [
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
name: '图片',
msgType: 'image'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
name: '视频',
msgType: 'video'
},
]
}
],
// upload: [],
midiaIds: [],
sum: '',
// 筛选条件
girdListIds: [], // 网格id集合
deptListIds: [], // 部门id集合
ResidentTags: [], // 居民包含
ResidentTagsRemove: [], // 居民剔除
circleTags: [], // 朋友圈包含
circleTagsRemove: [], // 朋友圈剔除
startTime: '',
endTime: '',
}
},
methods: {
...mapActions(['selectEnterpriseContact']),
// 发送范围
toSleectScoped() {
uni.navigateTo({url: `./sendScoped?type=${this.type}`})
},
// 预览
preview() {
this.showPopup = true;
},
fileIcon(name) {
if (['.zip', '.rar','.mp4'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/zip.png'
}
if (['.doc', '.docx'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/world.png'
}
if (['.xls', '.xlsx'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/xls.png'
}
if (['.txt'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/txt.png'
}
if (['.pdf'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/pdf.png'
}
if (['.ppt', '.pptx'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/ppt.png'
}
},
getExtension(name) {
return name.substring(name.lastIndexOf('.'))
},
uploadBtn(type) {
let count = 9 - (this.files?.length || 0)
if(count > 0){
let params = {
count,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
let count = this.files?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0)
if (count > 9) {
return this.$u.toast(`不能超过9个`)
}
if (res.tempFiles) {
res.tempFiles?.map((item) => {
this.uploadFile(item,type)
})
} else if (res?.tempFile) {
this.uploadFile(res.tempFile,type)
}
},
}
if (type == 'image') {
uni.chooseImage(params)
} else if (type == 'video') {
uni.chooseVideo(params)
} else if(type == 'file') {
uni.chooseFile(params)
}
} else {
this.$u.toast(`不能超过9个`)
}
},
uploadFile(img,type) {
uni.showLoading({title: '上传中'})
let formData = new FormData()
formData.append('file', img)
formData.append('type', type)
let url = ''
if(this.type=='Residents' || this.type=='ResidentsGroup') {
url = `/app/wxcp/upload/uploadFile`
} else if(this.type=='CircleOfFriends') {
url = `/app/wxcp/upload/uploadAttachment?attachmentType=1&mediaType=${type}`
}
this.$http.post(url, formData,{
withCredentials: false
}).then((res) => {
uni.hideLoading()
if (res?.data) {
this.$u.toast('上传成功!')
this.showUpload = false
this.files.push({
...res.data.file,
media: res.data.media,
msgType: type,
sysFileId: res.data.file.id,
imgPicUrl: res.data.file.url,
mediaId: res.data.media.mediaId
})
}
}).catch(res => {
this.$u.toast(res)
uni.hideLoading()
})
},
remove(index) {
this.files.splice(index, 1)
},
choiceTime(e) {
this.form.choiceTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
},
choiceEndTime(e) {
this.form.taskEndTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
},
confirm() {
if(this.flag) return
this.form.contents = []
// 文本
const firstContent = [
{
content: this.content,
msgType: '0'
},
]
this.form.contents.push(...firstContent)
// 图片
const picUrl = this.files.filter(i=> ['.jpg','.jpeg','.png'].indexOf(this.getExtension(i.name)) !== -1).map(e=>{
return {
imgPicUrl: e.url,
msgType: '1',
mediaId: e.mediaId
}
})
this.form.contents.push(...picUrl)
// 视频
const video = this.files.filter(i=> ['.mp4'].indexOf(this.getExtension(i.name)) !== -1).map(e=>{
return {
imgPicUrl: e.url,
msgType: '2',
mediaId: e.mediaId
}
})
this.form.contents.push(...video)
// 文件
const files = this.files.filter(i=> ['.mp4','.jpg','.jpeg','.png'].indexOf(this.getExtension(i.name)) == -1).map(e=>{
return {
imgPicUrl: e.url,
msgType: '3',
mediaId: e.mediaId
}
})
this.form.contents.push(...files)
if(this.type=='Residents' || this.type=='CircleOfFriends') {
this.forms.contents = this.form.contents
this.forms.taskTitle = this.form.taskTitle
}
if(!this.form.taskTitle) {
return this.$u.toast('请输入任务名称')
}
if(!this.form.sendScope) {
return this.$u.toast('请选择发送范围')
}
if(!this.form.contents.length) {
return this.$u.toast("请输入发送内容")
}
if(this.enableExamine) { // 是否需要审批0否、1
if(!this.form.examines.length) {
return this.$u.toast("请选择审批人")
} else {
this.forms.examines = this.form.examines
}
this.form.enableExamine = 1
this.forms.enableExamine = 1
} else {
this.form.enableExamine = 0
this.forms.enableExamine = 0
this.form.examines = []
this.form.examines = []
}
if(this.isTimedTask) { // 发送类型0立即发送、1定时发送
this.form.sendType = 1
this.forms.sendType = 1
if(!this.form.choiceTime.length) {
return this.$u.toast("请选择发送时间")
} else if (new Date(this.form.choiceTime).getTime() < Date.now()) {
return this.$u.toast('定时发送时间不得早于当前时间')
}
this.forms.choiceTime = this.form.choiceTime
} else {
this.form.sendType = 0
this.forms.sendType = 0
this.forms.choiceTime = ''
this.form.choiceTime = ''
}
if(!this.form.taskEndTime) {
return this.$u.toast("请选择结束时间")
}
this.flag = true
let formData = {}
let url = ''
if(this.type=='CircleOfFriends' || this.type=='Residents') { //群发朋友圈、居民
url = `/app/whchatmomentstask/addOrUpdate`
this.forms.gender = this.sex
this.forms.addFromTime = this.startTime
this.forms.addEndTime = this.endTime
this.forms.taskEndTime = this.form.taskEndTime
formData = this.forms
} else if(this.type=='ResidentsGroup') { // 群发居民群
url = `/app/appmasssendingtask/addOrUpdate`
this.form.filterCriteria = this.girdListIds.toString() || this.deptListIds.toString() || ''
formData = this.form
}
this.$http.post(url, { ...formData }).then(res=>{
if(res?.code == 0) {
this.flag = false
this.$u.toast("新增成功")
setTimeout(() => {
uni.navigateBack()
}, 600)
}
}).then(()=> {
this.removeStorage()
}).catch((err)=>{
this.flag = false
this.$u.toast(err)
})
},
removeStorage() {
uni.removeStorageSync('userSelect')
uni.removeStorageSync('wxGroupsUser')
uni.removeStorageSync('girdSelect')
uni.removeStorageSync('deptList')
uni.removeStorageSync('sendScope')
uni.removeStorageSync('ResidentTags') // 居民包含
uni.removeStorageSync('ResidentTagsRemove') // 居民剔除
uni.removeStorageSync('circleTags') // 朋友圈包含
uni.removeStorageSync('circleTagsRemove') // 朋友圈剔除
uni.removeStorageSync('startTime')
uni.removeStorageSync('endTime')
},
getDeptUser() {
this.selectEnterpriseContact({
fromDepartmentId: 0,
mode: "multi",
type: ["user"],
selectedUserIds: this.form.examines?.map(e => e.id)
}).then((res)=>{
if(res?.userList) {
this.form.examines = res.userList.map(e=> {
return {
...e,
examineUserId: e.id,
examineUserName: e.name
}
})
}
}).catch((err) => {
this.$u.toast(err)
})
}
},
watch: {
type: {
handler(v) {
if(v) {
if(v=='Residents') {
this.forms.taskType = 1
this.uploadList = this.uploadList
} else if(v=='CircleOfFriends') {
this.forms.taskType = 0
this.uploadList = this.uploadCircle
} else if(v=='ResidentsGroup') {
this.uploadList = this.uploadList
}
}
}
}
},
onLoad(o) {
this.type = o.type;
document.title = this.type=='ResidentsGroup'? "群发居民群": this.type=='Residents'? "群发居民": "群发朋友圈"
},
onShow() {
this.form.wxGroups = uni.getStorageSync('wxGroupsUser') || []
this.form.sendScope = uni.getStorageSync('sendScope')
if(this.type=='Residents') {
this.forms.taskType = 1
this.forms.sendScope = this.form.sendScope
this.forms.groupList = this.form.wxGroups
this.sum = this.form.wxGroups.reduce((pre, cur) => pre + cur.customerCount, 0)
} else if(this.type=='CircleOfFriends') {
this.forms.taskType = 0
this.forms.sendScope = this.form.sendScope
this.forms.executorList = this.form.wxGroups
this.sum = this.form.wxGroups.reduce((pre, cur) => pre + cur.customerCount, 0)
} else if(this.type == 'ResidentsGroup') {
this.sum = this.form.wxGroups.reduce((pre, cur) => pre + cur.groupCount, 0)
}
this.forms.taskTitle = this.form.taskTitle
const girdArr = uni.getStorageSync('girdSelect')
if(girdArr.length) {
this.girdListIds = girdArr.map(e=>e.id)
}
const deptArr = uni.getStorageSync('deptList')
if(deptArr.length) {
this.deptListIds = deptArr.map(v=>v.id)
}
// 性别
this.sex = uni.getStorageSync('gender')
// 标签
if(this.type == 'Residents') {
this.ResidentTags = uni.getStorageSync('ResidentTags') // 居民包含
this.ResidentTagsRemove = uni.getStorageSync('ResidentTagsRemove') // 居民剔除
if(this.ResidentTags.length) {
this.forms.filterTags = this.ResidentTags.map(e=> e.id).toString()
this.forms.filterTagsName = this.ResidentTags.map(e=> e.name).toString()
} else if(this.ResidentTagsRemove) {
this.forms.excludeFilterTags = this.ResidentTagsRemove.map(e=> e.id).toString()
this.forms.excludeFilterTagsName = this.ResidentTagsRemove.map(e=> e.name).toString()
}
} else if(this.type == 'CircleOfFriends') {
this.circleTags = uni.getStorageSync('circleTags') // 朋友圈包含
this.circleTagsRemove = uni.getStorageSync('circleTagsRemove') // 朋友圈剔除
if(this.circleTags.length) {
this.forms.filterTags = this.circleTags.map(e=> e.id).toString()
this.forms.filterTagsName = this.circleTags.map(e=> e.name).toString()
} else if(this.circleTagsRemove.length) {
this.forms.excludeFilterTags = this.circleTagsRemove.map(e=> e.id).toString()
this.forms.excludeFilterTagsName = this.circleTagsRemove.map(e=> e.name).toString()
}
}
// 时间
this.startTime = uni.getStorageSync('startTime')
this.endTime = uni.getStorageSync('endTime')
}
}
</script>
<style lang="scss" scoped>
.addPropaganda {
font-size: 32px !important;
padding-bottom: 140px;
box-sizing: border-box;
.task_name,
.send_scope,
.send_content {
background: #FFF;
padding: 32px;
box-sizing: border-box;
margin-bottom: 16px;
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
.title {
font-weight: 400;
font-size: 32px;
}
}
.send_scope {
display: flex;
justify-content: space-between;
}
.send_content {
.content_title {
display: flex;
justify-content: space-between;
}
.content_text {
margin-top: 12px;
border-bottom: 1px solid #DDD;
}
.content_fodder {
margin-top: 16px;
.fodder_alls {
display: flex;
margin-top: 16px;
align-items: center;
.fodder_add {
border: 2px solid #DBDCDF;
padding: 20px 24px;
box-sizing: border-box;
border-radius: 8px;
}
.fodder_title {
color: #8E8F91;
margin-left: 20px;
}
}
.fodder_file {
margin-top: 16px;
width: 100%;
.item {
display: flex;
.images {
margin-right: 32px;
img {
width: 80px;
height: 80px;
}
}
.info {
width: calc(100% - 200px);
.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.size {
color: #9b9b9b;
}
}
.reUpload {
color: #1365DD;
margin-left: 20px;
}
.remove {
color: #f72c27;
margin-left: 20px;
}
}
}
}
}
.isExamine {
background: #FFF;
padding: 0px 32px;
box-sizing: border-box;
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
.examineChange,
.examine_person {
display: flex;
justify-content: space-between;
padding: 26px 0px;
box-sizing: border-box;
border-top: 2px solid #DDD;
}
.examine_person {
// padding: 26px 0 0 0;
}
}
.color_red {
color: #FF4466;
}
.color_gray {
color: #CCD0D3;
}
.inpt {
margin-left: 14px;
}
.mask {
position: fixed;
top: 0;
bottom: 0;
margin: 0;
left: 0;
right: 0;
background: rgba(#000, 0.6);
z-index: 202103021409;
width: 100%;
height: 100%;
}
::v-deep .noticeModal {
position: fixed;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
width: 90%;
height: 85%;
.body {
background: #EBECF0;
border-radius: 16px 16px 0 0;
padding: 32px;
box-sizing: border-box;
height: 100%;
overflow-y: auto;
font-size: 28px;
font-weight: 400;
color: #333;
line-height: 48px;
.text_content,
.file_content {
display: flex;
margin-bottom: 32px;
.text_left {
margin-right: 32px;
width: 84px;
height: 84px;
}
.only_pic {
max-width: 206px;
max-height: 200px;
}
.only_video {
max-width: 284px;
max-height: 160px;
}
.text_right {
width: calc(100% - 116px);
background: #FFF;
border-radius: 10px;
padding: 24px;
box-sizing: border-box;
position: relative;
&::before {
position: absolute;
content: "";
width: 0;
height: 0;
top: 18px;
left: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid #fff;
transform: translate(-100%, 0%);
}
}
.file_right {
display: flex;
.cont_left {
width: calc(100% - 90px);
h4 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal;
}
p {
color: #888888;
}
}
.cont_right {
width: 84px;
height: 84px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.footer {
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
background: #FFF;
border-radius: 0 0 16px 16px;
border-top: 2px solid #EEEEEE;
}
}
.uploadPopup {
background: #F7F7F7;
.upload_card {
padding: 32px 32px 0 32px;
box-sizing: border-box;
overflow-x: scroll;
.upload_item {
margin-bottom: 32px;
}
.upload_list {
overflow-x: scroll;
display: flex;
.list_item {
text-align: center;
width: 106px;
height: 140px;
margin-right: 48px;
img {
display: inline-block;
width: 84px;
height: 84px;
}
}
}
}
.btnCancel {
width: 100%;
height: 120px;
line-height: 120px;
text-align: center;
border-top: 2px solid #DDDDDD;
margin-top: 80px;
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 128px;
padding: 24px 32px;
box-sizing: border-box;
background: #FFF;
z-index: 9;
.submitBtn {
background: #1365DD;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
color: #FFF;
border-radius: 8px;
}
}
}
</style>