319 lines
8.5 KiB
Vue
319 lines
8.5 KiB
Vue
<template>
|
|
<div class="form-setting">
|
|
<h2>表单设置</h2>
|
|
<div class="form-setting__list">
|
|
<div class="setting-item">
|
|
<div class="setting-item__left">
|
|
<span>截止时间</span>
|
|
<image :src="`${$cdn}askform/bz.png`" @click="tips = '表单截止后，用户打开表单会提示此表单已结束' , isShowModal = true"/>
|
|
</div>
|
|
<div class="setting-item__right">
|
|
<u-radio-group v-model="periodValidityType" active-color="#1088F9">
|
|
<u-radio name="0" label="永久有效">永久有效</u-radio>
|
|
<u-radio name="1" label="自定义时间">自定义时间</u-radio>
|
|
</u-radio-group>
|
|
<u-icon name="arrow-right" color="#E1E2E3"/>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item" v-if="periodValidityType === '1'" @click="isShowTime = true">
|
|
<div class="setting-item__left">
|
|
<span>截至时间</span>
|
|
</div>
|
|
<div class="setting-item__right">
|
|
<span>{{ periodValidityEndTime }}</span>
|
|
<u-icon name="arrow-right" color="#E1E2E3"/>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-item__left">
|
|
<span>匹配客户方式</span>
|
|
<image :src="`${$cdn}askform/bz.png`" @click="tips = '将参与活动的微信客户和企业微信客户匹配' , isShowModal = true"/>
|
|
</div>
|
|
<div class="setting-item__right">
|
|
<span>客户微信ID匹配</span>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-item__left">
|
|
<span>提交次数</span>
|
|
<image :src="`${$cdn}askform/bz.png`" @click="tips = '此功能发布后不可修改' , isShowModal = true"/>
|
|
</div>
|
|
<div class="setting-item__right">
|
|
<u-radio-group v-model="commitType" active-color="#1088F9">
|
|
<u-radio name="0" label="不限次数">不限次数</u-radio>
|
|
<u-radio name="1" label="限提交一次">限提交一次</u-radio>
|
|
</u-radio-group>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="setting-item">
|
|
<div class="setting-item__left">
|
|
<span>行为通知</span>
|
|
<image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，发送表单的员工将会受到消息提醒' , isShowModal = true" />
|
|
</div>
|
|
<div class="setting-item__right">
|
|
<u-switch v-model="actionNotice" active-value="1" :size="40" active-color="#1088F9"></u-switch>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-item__left">
|
|
<span>动态通知</span>
|
|
<image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，会将客户的打开行为记录在客户动态里' , isShowModal = true" />
|
|
</div>
|
|
<div class="setting-item__right">
|
|
<u-switch v-model="dynamicNotice" active-value="1" :size="40" active-color="#1088F9"></u-switch>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="add-form__footer">
|
|
<div @click="back">
|
|
<span>取消</span>
|
|
</div>
|
|
<div @click="confirm">{{ isEdit ? '发布' : '确定' }}</div>
|
|
</div>
|
|
<u-modal v-model="isShowModal" :content="tips"></u-modal>
|
|
<u-picker mode="time" v-model="isShowTime" :show-time-tag="true" @close="isShowTime = false" @confirm="onTimeChange"
|
|
:params="params"></u-picker>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
computed: {
|
|
isEdit() {
|
|
return this.$route.query.type == 'edit'
|
|
}
|
|
},
|
|
data() {
|
|
let {id} = this.$route.query
|
|
return {
|
|
id,
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
tips: '',
|
|
isShowModal: false,
|
|
actionNotice: true,
|
|
dynamicNotice: true,
|
|
commitType: '1',
|
|
wechatId: '0',
|
|
periodValidityEndTime: '',
|
|
isShowTime: false,
|
|
periodValidityType: '0',
|
|
}
|
|
},
|
|
created() {
|
|
if (this.id) {
|
|
this.getInfo(this.id)
|
|
} else this.getFormSetting()
|
|
},
|
|
onShow() {
|
|
document.title = '表单设置'
|
|
},
|
|
methods: {
|
|
getFormSetting() {
|
|
let params = localStorage.getItem("toFormSetting"), res = {}
|
|
params && (res = JSON.parse(params))
|
|
localStorage.removeItem("toFormSetting")
|
|
this.periodValidityType = res.periodValidityType || '0'
|
|
this.commitType = res.commitType || "1"
|
|
this.actionNotice = res.actionNotice === '1'
|
|
this.dynamicNotice = res.dynamicNotice === '1'
|
|
if (res.periodValidityType === '1') {
|
|
this.periodValidityEndTime = res.periodValidityEndTime
|
|
}
|
|
},
|
|
onTimeChange(e) {
|
|
this.periodValidityEndTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
|
|
},
|
|
|
|
back() {
|
|
uni.navigateBack({})
|
|
},
|
|
|
|
getInfo(id) {
|
|
this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
|
|
if (res?.data) {
|
|
this.periodValidityType = res.data.periodValidityType
|
|
this.commitType = res.data.commitType
|
|
this.actionNotice = res.data.actionNotice === '1'
|
|
this.dynamicNotice = res.data.dynamicNotice === '1'
|
|
|
|
if (res.data.periodValidityType === '1') {
|
|
this.periodValidityEndTime = res.data.periodValidityEndTime
|
|
}
|
|
}
|
|
}).catch(msg => {
|
|
this.$u.toast(msg)
|
|
})
|
|
},
|
|
|
|
publish() {
|
|
this.$http.post(`/app/appquestionnairetemplate/release`, null, {
|
|
params: {
|
|
commitType: this.commitType,
|
|
periodValidityType: this.periodValidityType,
|
|
actionNotice: this.actionNotice ? '1' : '0',
|
|
dynamicNotice: this.dynamicNotice ? '1' : '0',
|
|
shareStatus: '0',
|
|
wechatId: '0',
|
|
id: this.id,
|
|
periodValidityEndTime: this.periodValidityType === '1' ? this.periodValidityEndTime : ''
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.$u.toast('发布成功')
|
|
|
|
setTimeout(() => {
|
|
this.back()
|
|
}, 800)
|
|
}
|
|
}).catch(e => {
|
|
this.$u.toast(e)
|
|
})
|
|
},
|
|
|
|
confirm() {
|
|
if (this.isEdit) {
|
|
this.publish()
|
|
return false
|
|
}
|
|
uni.$emit('setting', {
|
|
periodValidityType: this.periodValidityType,
|
|
commitType: this.commitType,
|
|
actionNotice: this.actionNotice ? '1' : '0',
|
|
dynamicNotice: this.dynamicNotice ? '1' : '0',
|
|
periodValidityEndTime: this.periodValidityEndTime ? this.periodValidityEndTime : ''
|
|
})
|
|
this.back()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.form-setting {
|
|
padding: 0 20px;
|
|
|
|
.add-form__footer {
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 112px;
|
|
text-align: center;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
height: 100%;
|
|
text-align: center;
|
|
background: #fff;
|
|
|
|
&:first-child:active {
|
|
background: #eee;
|
|
}
|
|
|
|
&:last-child {
|
|
color: #fff;
|
|
font-size: 36px;
|
|
background: #3192F4;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
span {
|
|
flex: 1;
|
|
height: 100%;
|
|
line-height: 112px;
|
|
color: #333333;
|
|
font-size: 32px;
|
|
|
|
&:active {
|
|
background: #eee;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
& > h2 {
|
|
height: 80px;
|
|
padding-top: 24px;
|
|
font-size: 28px;
|
|
color: #999999;
|
|
}
|
|
|
|
.form-setting__list {
|
|
padding: 0 20px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 104px;
|
|
border-bottom: 1px solid #D8DDE6;
|
|
|
|
.setting-item__right {
|
|
color: #999;
|
|
font-size: 28px;
|
|
|
|
span {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
::v-deep .u-radio__label {
|
|
color: #999;
|
|
font-size: 28px;
|
|
}
|
|
|
|
::v-deep .u-radio {
|
|
&:last-child {
|
|
.u-radio__label {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.setting-item__left {
|
|
color: #666666;
|
|
font-size: 30px;
|
|
|
|
image {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|