Browse Source

完善功能·

old
wangqing 5 years ago
parent
commit
0e4760985f
  1. 5
      src/router/modules/root.js
  2. 1
      src/views/form/PreView.vue
  3. 16
      src/views/form/ProjectForm.vue
  4. 2
      src/views/form/index.vue
  5. 772
      src/views/form/setting.vue
  6. 2
      src/views/form/theme.vue
  7. 82
      src/views/form/write.vue

5
src/router/modules/root.js

@ -70,5 +70,10 @@ export default [
path: '/project/view',
meta: {requireLogin: false},
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/ProjectForm.vue')
`` },
{
path: '/project/write',
meta: {requireLogin: false},
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/write.vue')
}
]

1
src/views/form/PreView.vue

@ -43,7 +43,6 @@ export default {
mobilePreviewUrl: '',
projectConfig: {
projectKey: '',
preview: true,
showBtns: true
}
}

16
src/views/form/ProjectForm.vue

@ -35,6 +35,7 @@
import Parser from '@/components/parser/Parser'
import {dbDataConvertForItemJson} from '@/utils/convert'
window.onload = function() {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
@ -52,9 +53,7 @@ export default {
props: {
projectConfig: {
projectKey: '',
showBtns: true,
//
preview: false
showBtns: true
}
},
data() {
@ -93,7 +92,6 @@ export default {
document.querySelector('body').className = 'project-body'
},
created() {
if (this.projectConfig && this.projectConfig.projectKey) {
this.projectKey = this.projectConfig.projectKey
// this.formConf.formBtns = this.projectConfig.showBtns
@ -132,15 +130,7 @@ export default {
},
methods: {
submitForm(data) {
if (this.projectConfig.preview) {
return
}
this.$api.post('/user/project/result/create', {
'projectKey': this.projectKey,
'collectData': data
}).then(res => {
this.formState = true
})
this.$emit('submit',data)
}
}
}

2
src/views/form/index.vue

@ -7,7 +7,7 @@
返回
</el-button>
<el-button size="mini" round>
<router-link target="_blank" :to="{path:'/project/preview',query:{key:this.projectKey}}">发布预览
<router-link target="_blank" :to="{path:'/project/write',query:{key:this.projectKey}}">发布预览
</router-link>
</el-button>
</el-col>

772
src/views/form/setting.vue

@ -1,295 +1,468 @@
<template>
<el-row class="project-setting-container" type="flex" justify="center" align="top">
<el-col :span="5" :offset="3" class="project-setting-view">
<p class="project-setting-title">
提交设置
</p>
<p class="project-setting-label">提交后</p>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">显示提示图片</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.showPromptImg"/>
</el-col>
</el-row>
<div v-if="projectSetting.showPromptImg">
<div class="block">
<el-image
class="submit-prompt-img"
:src="projectSetting.promptImgUrl"
fit="cover ">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<el-form ref="setting" :model="userProjectSettingData">
<el-row class="project-setting-container" type="flex" justify="center" align="top">
<el-col :span="5" :offset="3" class="project-setting-view">
<p class="project-setting-title">
提交设置
</p>
<p class="project-setting-label">提交后</p>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">显示提示图片</p>
</el-col>
<el-col :span="12">
<el-switch
@change="()=>{this.userProjectSettingData.submitPromptImg=''}"
v-model="projectSetting.showPromptImg"/>
</el-col>
</el-row>
<div v-if="projectSetting.showPromptImg">
<div class="block">
<el-image
class="submit-prompt-img"
:src="userProjectSettingData.submitPromptImg"
fit="cover ">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
<el-upload
ref="logoUpload"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-success="uploadSubmitPromptHandle"
action="/user/file/upload"
:show-file-list="false">
<el-link slot="trigger" size="small" type="primary">请上传提示图片 *</el-link>
</el-upload>
</div>
<el-upload
ref="logoUpload"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-success="uploadSubmitPromptHandle"
action="/user/file/upload"
:show-file-list="false">
<el-link slot="trigger" size="small" type="primary">请上传提示图片 *</el-link>
</el-upload>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">显示提示文字</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.showPromptText"/>
</el-col>
</el-row>
<el-row v-if="projectSetting.showPromptText">
<el-col :span="20" class="setting-input">
<el-input v-model="projectSetting.promptText"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">跳转网页地址</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.showSubmitJumpUrl"/>
</el-col>
</el-row>
<el-row v-if="projectSetting.showSubmitJumpUrl">
<el-col :span="20" class="setting-input">
<el-input v-model="projectSetting.submitJumpUrl"/>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="project-setting-view" style="text-align: center">
<p class="project-setting-title">
回收设置
</p>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">只在微信中填写</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.onlyWxWrite"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">定时收集表单</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.timingCollectForm"/>
</el-col>
</el-row>
<div v-if="projectSetting.timingCollectForm">
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">收集时间</p>
<el-col :span="12">
<p class="project-setting-label">显示提示文字</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 30%" v-model="projectSetting.submitJumpUrl"/>
<span></span>
<el-input class="setting-input" style="width: 30%" v-model="projectSetting.submitJumpUrl"/>
<el-col :span="12">
<el-switch
@change="()=>{
this.userProjectSettingData.submitPromptText=''
this.saveUserProjectSetting()
}"
v-model="projectSetting.showPromptText"/>
</el-col>
</el-row>
<el-row v-if="projectSetting.showPromptText">
<el-col :span="20" class="setting-input">
<el-input v-model="userProjectSettingData.submitPromptText"
:show-word-limit="true"
:maxlength="100"
@change="saveUserProjectSetting"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">未启用提示语</p>
<el-col :span="12">
<p class="project-setting-label">跳转网页地址</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
<el-col :span="12">
<el-switch
@change="()=>{
this.userProjectSettingData.submitJumpUrl=''
this.saveUserProjectSetting()
}"
v-model="projectSetting.showSubmitJumpUrl"/>
</el-col>
</el-row>
<el-row v-if="projectSetting.showSubmitJumpUrl">
<el-col :span="20" class="setting-input">
<el-input
:show-word-limit="true"
:maxlength="100"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.submitJumpUrl"/>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="project-setting-view" style="text-align: center">
<p class="project-setting-title">
回收设置
</p>
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">停用后提示语</p>
<el-col :span="12">
<p class="project-setting-label">只在微信中填写</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
<el-col :span="12">
<el-switch
@change="saveUserProjectSetting"
v-model="userProjectSettingData.wxWrite"/>
</el-col>
</el-row>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">定时定量表单</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.timingQuantitativeForm"/>
</el-col>
</el-row>
<div v-if="projectSetting.timingQuantitativeForm">
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">定时收集表单</p>
</el-col>
<el-col :span="12">
<el-switch
@change="()=>{
this.projectSetting.timingQuantitativeForm=false
this.clearFieldHandle(['timedCollectionBeginTime','timedCollectionEndTime'
,'timedNotEnabledPromptText','timedDeactivatePromptText'])
this.saveUserProjectSetting()
}"
v-model="projectSetting.timingCollectForm"/>
</el-col>
</el-row>
<div v-if="projectSetting.timingCollectForm">
<el-row type="flex" align="middle">
<el-col :span="5">
<p class="project-setting-sub-label">收集时间</p>
</el-col>
<el-col :span="8">
<el-date-picker
type="datetime"
style="width: 100%;border: none"
align="center"
class="collection-date-picker"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.timedCollectionBeginTime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间">
</el-date-picker>
</el-col>
<el-col :span="1"><span> </span></el-col>
<el-col :span="8">
<el-date-picker
type="datetime"
align="center"
class="collection-date-picker"
style="width: 100%;border: none"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.timedCollectionEndTime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="结束日期">
</el-date-picker>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">未启用提示语</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%"
:show-word-limit="true"
:maxlength="100"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.timedNotEnabledPromptText"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">停用后提示语</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%"
:show-word-limit="true"
:maxlength="100"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.timedDeactivatePromptText"/>
</el-col>
</el-row>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">定时定量表单</p>
</el-col>
<el-col :span="12">
<el-switch
@change="()=>{
this.projectSetting.timingCollectForm=false
this.clearFieldHandle(['timedCollectionBeginTime','timedCollectionEndTime'
,'timedNotEnabledPromptText','timedDeactivatePromptText','timedQuantitativeQuantity','timedEndPromptText'])
this.saveUserProjectSetting()
}"
v-model="projectSetting.timingQuantitativeForm"/>
</el-col>
</el-row>
<div v-if="projectSetting.timingQuantitativeForm">
<el-row type="flex" align="middle">
<el-col :span="5">
<p class="project-setting-sub-label">收集时间</p>
</el-col>
<el-col :span="8">
<el-date-picker
type="datetime"
style="width: 100%;border: none"
align="center"
class="collection-date-picker"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.timedCollectionBeginTime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间">
</el-date-picker>
</el-col>
<el-col :span="1"><span> </span></el-col>
<el-col :span="8">
<el-date-picker
type="datetime"
align="center"
class="collection-date-picker"
@change="saveUserProjectSetting"
style="width: 100%;border: none"
v-model="userProjectSettingData.timedCollectionEndTime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="结束日期">
</el-date-picker>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">未启用提示语</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%"
@change="saveUserProjectSetting"
:show-word-limit="true"
:maxlength="100"
v-model="userProjectSettingData.timedNotEnabledPromptText"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">停用后提示语</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%"
@change="saveUserProjectSetting"
:show-word-limit="true"
:maxlength="100"
v-model="userProjectSettingData.timedDeactivatePromptText"/>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="projectSetting.timingQuantitativeForm">
<el-col :span="8">
<p class="project-setting-sub-label">定量表单填写数量</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%"
oninput="value=value.replace(/[^\d]/g,'')"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.timedQuantitativeQuantity"/>
</el-col>
</el-row>
</div>
<div v-if="projectSetting.timingQuantitativeForm">
<el-row type="flex" align="middle">
<el-col :span="8">
<p class="project-setting-sub-label">收集完成后提示</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%"
@change="saveUserProjectSetting"
:show-word-limit="true"
:maxlength="100"
v-model="userProjectSettingData.timedEndPromptText"/>
</el-col>
</el-row>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">每人限制填写1次</p>
</el-col>
<el-col :span="12">
<el-switch
@change="saveUserProjectSetting"
v-model="userProjectSettingData.everyoneWriteOnce"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">每人限制填写1次</p>
</el-col>
<el-col :span="12">
<el-switch
@change="saveUserProjectSetting"
v-model="userProjectSettingData.everyoneDayWriteOnce"/>
</el-col>
</el-row>
<el-row type="flex" align="middle"
v-if="userProjectSettingData.everyoneDayWriteOnce||userProjectSettingData.everyoneWriteOnce">
<el-col :span="8">
<p class="project-setting-sub-label">收集完成后提示</p>
<p class="project-setting-sub-label">重复填写后提示</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
<el-input class="setting-input" style="width: 80%"
@change="saveUserProjectSetting"
:show-word-limit="true"
:maxlength="100"
v-model="userProjectSettingData.writeOncePromptText"/>
</el-col>
</el-row>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">每人限制填写1次</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.everyoneWriteOnce"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">每人限制填写1次</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.everyoneDayWriteOnce"/>
</el-col>
</el-row>
<el-row type="flex" align="middle"
v-if="projectSetting.everyoneDayWriteOnce||projectSetting.everyoneWriteOnce">
<el-col :span="8">
<p class="project-setting-sub-label">重复填写后提示</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">新反馈提醒我</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.newFeedbackRemind"/>
</el-col>
</el-row>
<div v-if="projectSetting.newFeedbackRemind">
<el-row type="flex" align="middle">
<el-col :span="5">
<p class="project-setting-sub-label">发邮件提醒我</p>
<el-col :span="12">
<p class="project-setting-label">新反馈提醒我</p>
</el-col>
<el-col :span="3">
<el-checkbox v-model="projectSetting.newFeedbackRemindEmail"></el-checkbox>
<el-col :span="12">
<el-switch v-model="projectSetting.newFeedbackRemind"/>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="projectSetting.newFeedbackRemindEmail">
<el-col :span="5" :offset="3">
<p class="project-setting-sub-label">请填写邮箱</p>
<div v-if="projectSetting.newFeedbackRemind">
<el-row type="flex" align="middle">
<el-col :span="5">
<p class="project-setting-sub-label">发邮件提醒我</p>
</el-col>
<el-col :span="3">
<el-checkbox
@change="()=>{
this.clearFieldHandle(['newWriteNotifyEmail'])
this.saveUserProjectSetting()
}"
v-model="projectSetting.newFeedbackRemindEmail"></el-checkbox>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="projectSetting.newFeedbackRemindEmail">
<el-col :span="5" :offset="3">
<p class="project-setting-sub-label">请填写邮箱</p>
</el-col>
<el-col :span="12">
<el-input class="setting-input" style="width: 80%"
@change="saveUserProjectSetting"
v-model="userProjectSettingData.newWriteNotifyEmail"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="5">
<p class="project-setting-sub-label">发微信提醒我</p>
</el-col>
<el-col :span="3">
<el-checkbox
@change="()=>{
this.clearFieldHandle(['newWriteNotifyWx'])
this.saveUserProjectSetting()
}"
v-model="projectSetting.newFeedbackRemindWx"></el-checkbox>
</el-col>
<el-col :span="10">
<p class="project-setting-sub-label">
需要关注公众号
<el-link>TDUCK</el-link>
</p>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="userProjectSettingData.newWriteNotifyWx">
<el-col :span="5" :offset="3">
<p class="project-setting-sub-label">提醒人</p>
</el-col>
<el-col :span="12">
<img style="width: 24px;height: 24px;" src=""/>
</el-col>
</el-row>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">记录微信用户个人信息</p>
</el-col>
<el-col :span="12">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
<el-switch
@change="()=>{
this.userProjectSettingData.wxWrite=true
this.saveUserProjectSetting()
}"
v-model="userProjectSettingData.recordWxUser"/>
</el-col>
</el-row>
<el-row>
<p class="project-setting-sub-label">
* 开启后将会授权登录提供微信昵称性别城市信息
</p>
</el-row>
</el-col>
<el-col :span="6" class="project-setting-view">
<p class="project-setting-title">
分享设置
</p>
<el-row type="flex" align="middle">
<el-col :span="5">
<p class="project-setting-sub-label">发微信提醒我</p>
<el-col :span="12">
<p class="project-setting-label">自定义分享图标</p>
</el-col>
<el-col :span="3">
<el-checkbox v-model="projectSetting.newFeedbackRemindWx"></el-checkbox>
<el-col :span="12">
<el-switch
@change="clearFieldHandle(['userProjectSettingData.shareImg'])"
v-model="projectSetting.customizeShareIcon"/>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="projectSetting.customizeShareIcon">
<el-col :span="10">
<p class="project-setting-sub-label">
需要关注公众号
<el-link>TDUCK</el-link>
<p class="project-setting-label">
请上传分享图片 *
建议尺寸500px*500px
</p>
</el-col>
<el-col :span="12">
<el-upload
ref="logoUpload"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-success="uploadShareImgHandle"
action="/user/file/upload"
:show-file-list="false">
<div class="block">
<el-image
class="share-img"
:src="userProjectSettingData.shareImg"
fit="cover ">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</el-upload>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="projectSetting.newFeedbackRemindWx">
<el-col :span="5" :offset="3">
<p class="project-setting-sub-label">提醒人</p>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">自定义分享标题</p>
</el-col>
<el-col :span="12">
<img style="width: 24px;height: 24px;" src=""/>
<el-switch
@change="clearFieldHandle(['userProjectSettingData.shareTitle'])"
v-model="projectSetting.customizeShareTitle"/>
</el-col>
</el-row>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">记录微信用户个人信息</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.recordWxUser"/>
</el-col>
</el-row>
<el-row>
<p class="project-setting-sub-label">
* 开启后将会授权登录提供微信昵称性别城市信息
</p>
</el-row>
</el-col>
<el-col :span="6" class="project-setting-view">
<p class="project-setting-title">
分享设置
</p>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">自定义分享图标</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.customizeShareIcon"/>
</el-col>
</el-row>
<el-row type="flex" align="middle" v-if="projectSetting.customizeShareIcon">
<el-col :span="10">
<p class="project-setting-label">
请上传分享图片 *
建议尺寸500px*500px
</p>
</el-col>
<el-col :span="12">
<el-upload
ref="logoUpload"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-success="uploadSubmitPromptHandle"
action="/user/file/upload"
:show-file-list="false">
<div class="block">
<el-image
class="share-img"
:src="projectSetting.promptImgUrl"
fit="cover ">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</el-upload>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">自定义分享标题</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.customizeShareTitle" />
</el-col>
</el-row>
<el-row type="flex" align="middle"
v-if="projectSetting.customizeShareTitle">
<el-col :span="8">
<p class="project-setting-sub-label">请输入标题</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">自定义分享描述</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.customizeShareDesc"/>
</el-col>
</el-row>
<el-row type="flex" align="middle"
v-if="projectSetting.customizeShareDesc">
<el-col :span="8">
<p class="project-setting-sub-label">请输入描述</p>
</el-col>
<el-col :span="15">
<el-input class="setting-input" style="width: 80%" v-model="projectSetting.submitJumpUrl"/>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row type="flex" align="middle"
v-if="projectSetting.customizeShareTitle">
<el-col :span="8">
<p class="project-setting-sub-label">请输入标题</p>
</el-col>
<el-col :span="15">
<el-input
@change="saveUserProjectSetting"
:show-word-limit="true"
:maxlength="100"
class="setting-input" style="width: 80%" v-model="userProjectSettingData.shareTitle"/>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<p class="project-setting-label">自定义分享描述</p>
</el-col>
<el-col :span="12">
<el-switch v-model="projectSetting.customizeShareDesc"/>
</el-col>
</el-row>
<el-row type="flex" align="middle"
v-if="projectSetting.customizeShareDesc">
<el-col :span="8">
<p class="project-setting-sub-label">请输入描述</p>
</el-col>
<el-col :span="15">
<el-input
@change="saveUserProjectSetting"
:show-word-limit="true"
:maxlength="100"
class="setting-input" style="width: 80%" v-model="userProjectSettingData.shareDesc"/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-form>
</template>
<script>
@ -302,24 +475,37 @@ export default {
return {
projectSetting: {
showPromptImg: false,
promptImgUrl: '',
showPromptText: '',
promptText: '提交成功 | ',
showPromptText: true,
showSubmitJumpUrl: false,
submitJumpUrl: '',
onlyWxWrite: false,
timingCollectForm: false,
timingQuantitativeForm: false,
everyoneWriteOnce: false,
everyoneDayWriteOnce: false,
newFeedbackRemind: false,
newFeedbackRemindEmail: false,
newFeedbackRemindWx: false,
recordWxUser: false,
customizeShareIcon: false,
customizeShareTitle: false,
customizeShareDesc: false
},
userProjectSettingData: {
submitPromptImg: '',
submitPromptText: '提交成功 !',
submitJumpUrl: '',
wxWrite: false,
timedNotEnabledPromptText: '',
timedDeactivatePromptText: '',
timedQuantitativeQuantity: null,
timedEndPromptText: '',
everyoneWriteOnce: false,
everyoneDayWriteOnce: false,
timedCollectionBeginTime: '',
timedCollectionEndTime: '',
writeOncePromptText: '',
newWriteNotifyEmail: '',
newWriteNotifyWx: '',
recordWxUser: false,
shareImg: '',
shareTitle: '',
shareDesc: ''
}
}
},
@ -330,9 +516,54 @@ export default {
}
}
},
mounted() {
this.projectKey = this.$route.query.key
this.queryUserProjectSetting()
},
methods: {
uploadSubmitPromptHandle(response, file, fileList) {
this.projectSetting.promptImgUrl = response.data
this.userProjectSettingData.submitPromptImg = response.data
this.saveUserProjectSetting()
},
uploadShareImgHandle(response, file, fileList) {
this.userProjectSettingData.shareImg = response.data
this.saveUserProjectSetting()
},
queryUserProjectSetting() {
this.userProjectSettingData.projectKey = this.projectKey
this.$api.get(`/user/project/setting/query/${this.projectKey}`).then(res => {
this.userProjectSettingData = res.data
if (res.data) {
let {
submitPromptImg, submitPromptText, submitJumpUrl, timedCollectionBeginTime,
timedQuantitativeQuantity, newWriteNotifyEmail, newWriteNotifyWx,
shareImg, shareTitle, shareDesc
} = res.data
this.projectSetting = {
showPromptImg: !!submitPromptImg,
showPromptText: !!submitPromptText,
showSubmitJumpUrl: !!submitJumpUrl,
timingCollectForm: timedCollectionBeginTime & !timedQuantitativeQuantity,
timingCollectTimeRange: !!timedQuantitativeQuantity,
newFeedbackRemind: newWriteNotifyEmail | newWriteNotifyWx,
newFeedbackRemindEmail: !!newWriteNotifyEmail,
newFeedbackRemindWx: !!newWriteNotifyWx,
customizeShareIcon: !!shareImg,
customizeShareTitle: !!shareTitle,
customizeShareDesc: !!shareDesc
}
}
})
},
saveUserProjectSetting() {
this.userProjectSettingData.projectKey = this.projectKey
this.$api.post('/user/project/setting/save', this.userProjectSettingData).then(res => {
})
},
clearFieldHandle(fields) {
fields.forEach((field) => {
this.$set(this.userProjectSettingData, field, '')
})
}
}
}
@ -344,13 +575,13 @@ export default {
height: 100%;
min-height: 85vh;
padding: 0px;
margin:10px 0 0 0;
margin: 10px 0 0 0;
background-color: #F7F7F7;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.project-setting-view {
height:100%;
height: 100%;
line-height: 20px;
border-radius: 7px;
color: rgba(16, 16, 16, 100);
@ -387,7 +618,7 @@ export default {
}
.submit-prompt-img {
width: 340px;
width: 80%;
height: 117px;
background-color: #f7f7f7;
display: flex;
@ -403,7 +634,8 @@ export default {
line-height: 20px;
height: 20px;
}
.share-img{
.share-img {
width: 123px;
height: 117px;
background-color: #f7f7f7;
@ -412,4 +644,10 @@ export default {
justify-items: center;
justify-content: center;
}
/deep/ .collection-date-picker input {
border: none;
border-bottom: 1px solid rgba(187, 187, 187, 100);
border-radius: 0;
}
</style>

2
src/views/form/theme.vue

@ -321,7 +321,7 @@ export default {
})
},
queryUserProjectTheme() {
this.$api.post(`/user/project/theme/query/${this.projectKey}`).then(res => {
this.$api.get(`/user/project/theme/query/${this.projectKey}`).then(res => {
if(!res.data){
return
}

82
src/views/form/write.vue

@ -0,0 +1,82 @@
<template>
<div class="write-container">
<div v-if="!writeFinish">
<project-form
@submit="submitForm"
:projectConfig="projectConfig"
v-if="projectConfig.projectKey"/>
</div>
<div v-if="writeFinish">
<div style="text-align: center">
<el-image
v-if="userProjectSetting.submitPromptImg"
:src="userProjectSetting.submitPromptImg"
fit="cover"></el-image>
</div>
<p style="text-align: center" v-if="userProjectSetting.submitPromptText">
<i class="el-icon-check"/>
{{userProjectSetting.submitPromptText}}
</p>
</div>
</div>
</template>
<script>
import ProjectForm from './ProjectForm'
export default {
name: 'WriteView',
props: {},
data() {
return {
projectConfig: {
projectKey: '',
preview: false,
showBtns: true
},
writeFinish: false,
userProjectSetting: {}
}
},
mounted() {
let key = this.$route.query.key
this.projectConfig.projectKey = key
this.queryProjectSetting()
},
components: {
ProjectForm
}, methods: {
queryProjectSetting() {
this.$api.get(`/user/project/setting/query/${this.projectConfig.projectKey}`).then(res => {
this.userProjectSetting = res.data
if(res.data.wxWrite){
let ua = navigator.userAgent.toLowerCase()
let isWeixin = ua.indexOf('micromessenger') != -1
let isAndroid = ua.indexOf('android') != -1
let isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1)
if (!isWeixin) {
document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">'
document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>'
}
}
})
},
submitForm(data) {
this.$api.post('/user/project/result/create', {
'projectKey': this.projectConfig.projectKey,
'collectData': data
}).then(res => {
this.formState = true
})
}
}
}
</script>
<style scoped>
.write-container {
margin: 0;
padding: 0;
}
</style>
Loading…
Cancel
Save