php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(market): 优化线索跟进页面布局和代码结构 

- 调整了表单各项的样式和间距
- 优化了选择器和日期选择框的使用
- 改进了代码的可读性和可维护性
master
liutong 1 year ago
parent
ee586b3c8c
commit
b60b93ec8e
1 changed files with 321 additions and 309 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 630
      pages/market/clue/writing_followUp.vue

630
pages/market/clue/writing_followUp.vue
View File

@ -1,319 +1,331 @@
<template> <template>
<view class="assemble"> <view class="assemble">
<view class="form-style"> <view class="form-style">
<fui-form ref="form" top="0" :model="formData" :show="false"> <fui-form ref="form" top="0" :model="formData" :show="false">
<view class="input-style"> <view class="input-style">
<fui-form-item label="跟进类型" asterisk asteriskPosition="right" labelSize='26' prop="name" background='#434544' labelColor='#fff' <fui-form-item label="跟进类型" asterisk asteriskPosition="right" labelSize='26' prop="name" background='#434544'
:bottomBorder='false'> labelColor='#fff'
<view class="input-title" style="margin-right:14rpx;" v-if="result_leixing == ''" :bottomBorder='false'>
@click="selectCon(2)">点击选择</view> <view class="input-title" style="margin-right:14rpx;" v-if="result_leixing == ''"
<view class="input-title" style="margin-right:14rpx;" v-else @click="selectCon(2)">{{ result_leixing }} @click="selectCon(2)">点击选择
</view> </view>
</fui-form-item> <view class="input-title" style="margin-right:14rpx;" v-else @click="selectCon(2)">{{ result_leixing }}
<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile" </view>
background='#434544' labelColor='#fff' :bottomBorder='false'> </fui-form-item>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" <fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
v-if="result_date == ''">点击选择</view> background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_date }} <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)"
</view> v-if="result_date == ''">点击选择
</fui-form-item> </view>
<fui-form-item label="上传录音" labelSize='26' asterisk asteriskPosition="right" prop="mobile" background='#434544' labelColor='#fff' <view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_date }}
:bottomBorder='false'> </view>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile" </fui-form-item>
backgroundColor="#434544" size="26" color="#fff"></fui-input> <fui-form-item label="上传录音" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
</fui-form-item> background='#434544' labelColor='#fff'
</view> :bottomBorder='false'>
<view> <fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
<fui-form-item label="跟进内容" labelSize='26' asterisk asteriskPosition="right" prop="mobile" backgroundColor="#434544" size="26" color="#fff"></fui-input>
background='#434544' labelColor='#fff' :bottomBorder='false'> </fui-form-item>
</fui-form-item> </view>
<view style="width: 100%;background: #434544;"> <view>
<view style="margin: auto;width: 92%;padding: 20rpx 0 50rpx;"> <fui-form-item label="跟进内容" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
<fui-textarea :padding="[0]" v-model="formData.mobile" background='#434544' labelColor='#fff' :bottomBorder='false'>
backgroundColor="#434544" size="26" color="#fff" :textareaBorder="true"></fui-textarea> </fui-form-item>
</view> <view style="width: 100%;background: #434544;">
</view> <view style="margin: auto;width: 92%;padding: 20rpx 0 50rpx;">
</view> <fui-textarea :padding="[0]" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff" :textareaBorder="true"></fui-textarea>
<view class="input-style" style="margin-top: 50rpx;"> </view>
<fui-form-item label="学员名称" labelSize='26' asterisk asteriskPosition="right" prop="mobile" </view>
background='#434544' labelColor='#fff' :bottomBorder='false'> </view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)"
v-if="result_student == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" v-else>{{ result_student }}
</view>
</fui-form-item>
<fui-form-item label="客户状态" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)"
v-if="result_status == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_status }}
</view>
</fui-form-item>
<fui-form-item label="签单意向联系人" labelWidth="230" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)"
v-if="result_intention == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)" v-else>{{ result_intention }}
</view>
</fui-form-item>
</view>
<view class="title" style="margin-top: 20rpx;">跟进任务</view>
<view class="input-style">
<fui-form-item label="创建下次跟进任务" labelWidth="250" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<fui-switch @change="switchChange" checked></fui-switch>
</fui-form-item>
<view v-if="switchChange_type == 1">
<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)"
v-if="result_dates == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)" v-else>{{ result_dates }}
</view>
</fui-form-item>
<fui-form-item label="跟进内容" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</fui-form-item>
<fui-form-item label="跟进人员" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</fui-form-item>
<fui-form-item label="任务提醒" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)"
v-if="result_renwu == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)" v-else>{{ result_renwu }}
</view>
</fui-form-item>
<fui-form-item label="提醒方式" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)"
v-if="result_fangshi == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)" v-else>{{ result_fangshi }}
</view>
</fui-form-item>
</view>
</view>
</fui-form>
</view>
<view class="fui-btn__box">
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button>
</view>
<!-- 年月日-选择时间 --> <view class="input-style" style="margin-top: 50rpx;">
<fui-date-picker :show="show_date" type="3" @change="change_date" @cancel="cancel_date"></fui-date-picker> <fui-form-item label="学员名称" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)"
v-if="result_student == ''">点击选择
</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" v-else>{{ result_student }}
</view>
</fui-form-item>
<fui-form-item label="客户状态" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)"
v-if="result_status == ''">点击选择
</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_status }}
</view>
</fui-form-item>
<fui-form-item label="签单意向联系人" labelWidth="230" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)"
v-if="result_intention == ''">点击选择
</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)" v-else>{{ result_intention }}
</view>
</fui-form-item>
</view>
<!-- 选择器 --> <view class="title" style="margin-top: 20rpx;">跟进任务</view>
<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="change" @cancel="cancel"></fui-picker> <view class="input-style">
<fui-form-item label="创建下次跟进任务" labelWidth="250" labelSize='26' asterisk asteriskPosition="right"
prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<fui-switch @change="switchChange" checked></fui-switch>
</fui-form-item>
<view v-if="switchChange_type == 1">
</view> <fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)"
v-if="result_dates == ''">点击选择
</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)" v-else>{{ result_dates }}
</view>
</fui-form-item>
<fui-form-item label="跟进内容" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</fui-form-item>
<fui-form-item label="跟进人员" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</fui-form-item>
<fui-form-item label="任务提醒" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)"
v-if="result_renwu == ''">点击选择
</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)" v-else>{{ result_renwu }}
</view>
</fui-form-item>
<fui-form-item label="提醒方式" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)"
v-if="result_fangshi == ''">点击选择
</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)" v-else>{{ result_fangshi }}
</view>
</fui-form-item>
</view>
</view>
</fui-form>
</view>
<view class="fui-btn__box">
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button>
</view>
<!-- 年月日-选择时间 -->
<fui-date-picker :show="show_date" type="3" @change="change_date" @cancel="cancel_date"></fui-date-picker>
<!-- 选择器 -->
<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="change"
@cancel="cancel"></fui-picker>
</view>
</template> </template>
<script> <script>
const rules = [{ const rules = [{
name: "mobile", name: "mobile",
rule: ["required", "isMobile"], rule: ["required", "isMobile"],
msg: ["请输入手机号", "请输入正确的手机号"] msg: ["请输入手机号", "请输入正确的手机号"]
}]; }];
export default { export default {
data() { data() {
return { return {
switchChange_type: 1, switchChange_type: 1,
rules, rules,
formData: {}, formData: {},
show_date: false, show_date: false,
result_date: '', result_date: '',
result_leixing: '', result_leixing: '',
result_student: '', result_student: '',
result_status: '', result_status: '',
result_intention: '', result_intention: '',
result_dates: '', result_dates: '',
result_renwu: '', result_renwu: '',
result_fangshi: '', result_fangshi: '',
show: false, show: false,
options: [], options: [],
linkage: true, linkage: true,
options_type : undefined, options_type: undefined,
options_leixing: [{ options_leixing: [{
'value': 1, 'value': 1,
'text': '类型1' 'text': '类型1'
}, { }, {
'value': 2, 'value': 2,
'text': '类型2' 'text': '类型2'
}, { }, {
'value': 3, 'value': 3,
'text': '类型3' 'text': '类型3'
}], }],
options_student: [{ options_student: [{
'value': 1, 'value': 1,
'text': '张三' 'text': '张三'
}, { }, {
'value': 2, 'value': 2,
'text': '李四' 'text': '李四'
}, { }, {
'value': 3, 'value': 3,
'text': '王五' 'text': '王五'
}], }],
options_status: [{ options_status: [{
'value': 1, 'value': 1,
'text': '状态1' 'text': '状态1'
}, { }, {
'value': 2, 'value': 2,
'text': '状态2' 'text': '状态2'
}, { }, {
'value': 3, 'value': 3,
'text': '状态3' 'text': '状态3'
}], }],
options_intention: [{ options_intention: [{
'value': 1, 'value': 1,
'text': '张三1' 'text': '张三1'
}, { }, {
'value': 2, 'value': 2,
'text': '李四2' 'text': '李四2'
}, { }, {
'value': 3, 'value': 3,
'text': '王五3' 'text': '王五3'
}], }],
options_kehu: [{ options_kehu: [{
'value': 1, 'value': 1,
'text': '张三' 'text': '张三'
}, { }, {
'value': 2, 'value': 2,
'text': '李四' 'text': '李四'
}, { }, {
'value': 3, 'value': 3,
'text': '王五' 'text': '王五'
}], }],
options_renwu: [{ options_renwu: [{
'value': 1, 'value': 1,
'text': '是' 'text': '是'
}, { }, {
'value': 2, 'value': 2,
'text': '否' 'text': '否'
}], }],
options_fangshi: [{ options_fangshi: [{
'value': 1, 'value': 1,
'text': '短信' 'text': '短信'
}, { }, {
'value': 2, 'value': 2,
'text': '微信' 'text': '微信'
}] }]
} }
}, },
methods: { methods: {
submit() { submit() {
console.log(this.formData) console.log(this.formData)
this.$refs.form.validator(null, null, true).then(res => { this.$refs.form.validator(null, null, true).then(res => {
console.log(res) console.log(res)
if (res.isPassed) { if (res.isPassed) {
console.log('校验通过！') console.log('校验通过！')
} else { } else {
console.log('向上滑动页面查看错误提示！') console.log('向上滑动页面查看错误提示！')
} }
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}) })
}, },
//选择弹窗 //选择弹窗
selectCon(type) { selectCon(type) {
if (type == 1) { if (type == 1) {
//选择跟进时间 //选择跟进时间
this.options_date_type = 1 this.options_date_type = 1
this.show_date = true this.show_date = true
} else if (type == 2) { } else if (type == 2) {
this.options_type = 2 this.options_type = 2
this.options = this.options_leixing this.options = this.options_leixing
this.show = true this.show = true
this.linkage = true this.linkage = true
} else if (type == 3) { } else if (type == 3) {
this.options_type = 3 this.options_type = 3
this.options = this.options_student this.options = this.options_student
this.show = true this.show = true
this.linkage = true this.linkage = true
} else if (type == 4) { } else if (type == 4) {
this.options_type = 4 this.options_type = 4
this.options = this.options_status this.options = this.options_status
this.show = true this.show = true
this.linkage = true this.linkage = true
} else if (type == 5) { } else if (type == 5) {
this.options_type = 5 this.options_type = 5
this.options = this.options_intention this.options = this.options_intention
this.show = true this.show = true
this.linkage = true this.linkage = true
}else if (type == 6) { } else if (type == 6) {
//选择跟进时间 //选择跟进时间
this.options_date_type = 6 this.options_date_type = 6
this.show_date = true this.show_date = true
} else if (type == 7) { } else if (type == 7) {
//选择任务提醒 //选择任务提醒
this.options_type = 7 this.options_type = 7
this.options = this.options_renwu this.options = this.options_renwu
this.show = true this.show = true
this.linkage = true this.linkage = true
} else if (type == 8) { } else if (type == 8) {
//选择提醒方式 //选择提醒方式
this.options_type = 8 this.options_type = 8
this.options = this.options_fangshi this.options = this.options_fangshi
this.show = true this.show = true
this.linkage = true this.linkage = true
} }
}, },
//选择跟进时间 //选择跟进时间
change_date(e) { change_date(e) {
if(this.options_date_type == 1){ if (this.options_date_type == 1) {
this.show_date = false this.show_date = false
this.result_date = e.result ?? '' this.result_date = e.result ?? ''
}else if(this.options_date_type == 6){ } else if (this.options_date_type == 6) {
this.show_date = false this.show_date = false
this.result_dates = e.result ?? '' this.result_dates = e.result ?? ''
} }
}, },
//关闭选择跟进时间 //关闭选择跟进时间
cancel_date() { cancel_date() {
this.show_date = false this.show_date = false
}, },
//选择框 //选择框
change(e) { change(e) {
this.show = false this.show = false
console.log(e) console.log(e)
if(this.options_type == 2){ if (this.options_type == 2) {
this.result_leixing = e.result this.result_leixing = e.result
} else if (this.options_type == 3) { } else if (this.options_type == 3) {
this.result_student = e.result this.result_student = e.result
} else if (this.options_type == 4) { } else if (this.options_type == 4) {
this.result_status = e.result this.result_status = e.result
} else if (this.options_type == 5) { } else if (this.options_type == 5) {
this.result_intention = e.result this.result_intention = e.result
} else if(this.options_type == 7){ } else if (this.options_type == 7) {
this.result_renwu = e.result this.result_renwu = e.result
} else if(this.options_type == 8){ } else if (this.options_type == 8) {
this.result_fangshi = e.result this.result_fangshi = e.result
} }
}, },
//关闭选择框 //关闭选择框
cancel() { cancel() {
this.show = false this.show = false
}, },
//开关选择 //开关选择
switchChange(e){ switchChange(e) {
if(e.detail.value){ if (e.detail.value) {
this.switchChange_type = 1 this.switchChange_type = 1
}else{ } else {
this.switchChange_type = 2 this.switchChange_type = 2
} }
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

Write Preview
Loading…
Cancel
Save