255 lines
9.2 KiB
Vue
255 lines
9.2 KiB
Vue
<template>
|
||
<div class="sysseting-container">
|
||
<el-tabs v-model="activeTab">
|
||
<el-tab-pane label="基本信息" name="base">
|
||
<el-form :model="baseForm" label-width="120px" class="tab-form">
|
||
<el-form-item label="投诉电话">
|
||
<el-input v-model="baseForm.phone" placeholder="请输入投诉电话" style="width: 300px" />
|
||
</el-form-item>
|
||
<el-form-item label="抢单开始时间">
|
||
<el-time-picker v-model="baseForm.startTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 150px" />
|
||
</el-form-item>
|
||
<el-form-item label="抢单结束时间">
|
||
<el-time-picker v-model="baseForm.endTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 150px" />
|
||
</el-form-item>
|
||
<el-form-item label="质保金扣除比例">
|
||
<el-input-number v-model="baseForm.marginRate" :min="0" :max="100" />
|
||
<span style="margin-left: 8px">%</span>
|
||
</el-form-item>
|
||
<el-form-item label="下单送积分">
|
||
<el-input v-model="baseForm.orderScore" style="width: 120px" />
|
||
<el-tooltip content="下单支付金额多少元赠送1积分，不填则不赠送" placement="right">
|
||
<i class="el-icon-question" style="margin-left: 8px; color: #999" />
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
<el-form-item label="搜索热词">
|
||
<el-select v-model="baseForm.hotwords" multiple filterable allow-create default-first-option placeholder="请输入热词" style="width: 600px">
|
||
<el-option v-for="item in baseForm.hotwords" :key="item" :label="item" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="客服二维码">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="#"
|
||
:show-file-list="false"
|
||
:on-change="handleQrChange"
|
||
:before-upload="beforeQrUpload"
|
||
>
|
||
<img v-if="baseForm.qrUrl" :src="baseForm.qrUrl" class="qr-img" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitBase">提交</el-button>
|
||
<el-button @click="resetBase">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="文本配置" name="text">
|
||
<el-form :model="textForm" label-width="120px" class="tab-form">
|
||
<el-form-item label="公司名称">
|
||
<el-input v-model="textForm.company" placeholder="请输入公司名称" />
|
||
</el-form-item>
|
||
<el-form-item label="简介">
|
||
<el-input type="textarea" v-model="textForm.intro" :rows="4" placeholder="请输入公司简介" />
|
||
</el-form-item>
|
||
<el-form-item label="质保金说明">
|
||
<quill-editor v-model="textForm.marginDesc" :options="editorOptions" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitText">提交</el-button>
|
||
<el-button @click="resetText">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="下单时间配置" name="orderTime">
|
||
<el-form label-width="120px" class="tab-form">
|
||
<el-form-item label="下单时间">
|
||
<div v-for="(item, idx) in orderTimes" :key="idx" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||
<el-input v-model="item.time" placeholder="如 8:00-10:00" style="width: 30%; margin-right: 12px;" />
|
||
<el-input-number v-model="item.count" :min="0" style="width: 25%; margin-right: 12px;" />
|
||
<el-button icon="el-icon-delete" type="danger" @click="removeOrderTime(idx)" circle />
|
||
</div>
|
||
<el-button type="primary" icon="el-icon-plus" @click="addOrderTime">新增</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitOrderTime">提交</el-button>
|
||
<el-button @click="resetOrderTime">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="时间配置" name="time">
|
||
<el-form :model="timeForm" label-width="120px" class="tab-form">
|
||
<el-form-item label="每月提现时间">
|
||
<el-select v-model="timeForm.withdrawDays" multiple placeholder="请选择日期" style="width: 300px">
|
||
<el-option v-for="d in 31" :key="d" :label="d + '号'" :value="d + '号'" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="定时接单时长">
|
||
<el-input-number v-model="timeForm.autoOrderMinutes" :min="1" style="width: 120px" />
|
||
<span style="margin-left: 8px">分钟</span>
|
||
<div class="el-form-item__tip">订单无人接单时多少分钟后，自动重新派单。单位（分钟）</div>
|
||
</el-form-item>
|
||
<el-form-item label="取消订单时长">
|
||
<el-input-number v-model="timeForm.cancelOrderDays" :min="1" style="width: 120px" />
|
||
<span style="margin-left: 8px">天</span>
|
||
<div class="el-form-item__tip">师傅到达之后，多久之后没有报工则取消订单。单位（天）</div>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitTime">提交</el-button>
|
||
<el-button @click="resetTime">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { quillEditor } from 'vue-quill-editor'
|
||
import 'quill/dist/quill.core.css'
|
||
import 'quill/dist/quill.snow.css'
|
||
import 'quill/dist/quill.bubble.css'
|
||
|
||
export default {
|
||
name: 'SysSeting',
|
||
components: {
|
||
quillEditor
|
||
},
|
||
data() {
|
||
return {
|
||
activeTab: 'base',
|
||
// 基本信息
|
||
baseForm: {
|
||
phone: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
marginRate: 10,
|
||
orderScore: 100,
|
||
hotwords: ['水电维修', '家电清洗', '灯具维修', '墙面翻新', '门窗家具', '疏通维修', '防水维修'],
|
||
qrUrl: ''
|
||
},
|
||
// 文本配置
|
||
textForm: {
|
||
company: '',
|
||
intro: '',
|
||
marginDesc: ''
|
||
},
|
||
// 下单时间配置
|
||
orderTimes: [
|
||
{ time: '8:00-10:00', count: 99 },
|
||
{ time: '10:00-12:00', count: 99 },
|
||
{ time: '12:00-14:00', count: 99 },
|
||
{ time: '14:00-16:00', count: 99 },
|
||
{ time: '16:00-18:00', count: 99 },
|
||
{ time: '18:00-20:00', count: 99 },
|
||
{ time: '20:00-22:00', count: 99 },
|
||
{ time: '22:00-24:00', count: 99 }
|
||
],
|
||
// 时间配置
|
||
timeForm: {
|
||
withdrawDays: ['8号', '18号', '28号'],
|
||
autoOrderMinutes: 10,
|
||
cancelOrderDays: 7
|
||
},
|
||
editorOptions: {
|
||
placeholder: '请输入质保金说明...'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 基本信息
|
||
submitBase() {
|
||
this.$message.success('提交成功（模拟）')
|
||
},
|
||
resetBase() {
|
||
this.$refs.baseForm && this.$refs.baseForm.resetFields && this.$refs.baseForm.resetFields()
|
||
},
|
||
handleQrChange(file) {
|
||
// 模拟上传二维码
|
||
const reader = new FileReader()
|
||
reader.onload = e => {
|
||
this.baseForm.qrUrl = e.target.result
|
||
}
|
||
reader.readAsDataURL(file.raw)
|
||
},
|
||
beforeQrUpload(file) {
|
||
const isImg = file.type.startsWith('image/')
|
||
if (!isImg) {
|
||
this.$message.error('只能上传图片格式')
|
||
}
|
||
return isImg
|
||
},
|
||
// 文本配置
|
||
submitText() {
|
||
this.$message.success('提交成功（模拟）')
|
||
},
|
||
resetText() {
|
||
this.textForm = { company: '', intro: '', marginDesc: '' }
|
||
},
|
||
// 下单时间配置
|
||
addOrderTime() {
|
||
this.orderTimes.push({ time: '', count: 99 })
|
||
},
|
||
removeOrderTime(idx) {
|
||
this.orderTimes.splice(idx, 1)
|
||
},
|
||
submitOrderTime() {
|
||
this.$message.success('提交成功（模拟）')
|
||
},
|
||
resetOrderTime() {
|
||
this.orderTimes = [
|
||
{ time: '8:00-10:00', count: 99 },
|
||
{ time: '10:00-12:00', count: 99 },
|
||
{ time: '12:00-14:00', count: 99 },
|
||
{ time: '14:00-16:00', count: 99 },
|
||
{ time: '16:00-18:00', count: 99 },
|
||
{ time: '18:00-20:00', count: 99 },
|
||
{ time: '20:00-22:00', count: 99 },
|
||
{ time: '22:00-24:00', count: 99 }
|
||
]
|
||
},
|
||
// 时间配置
|
||
submitTime() {
|
||
this.$message.success('提交成功（模拟）')
|
||
},
|
||
resetTime() {
|
||
this.timeForm = { withdrawDays: ['8号', '18号', '28号'], autoOrderMinutes: 10, cancelOrderDays: 7 }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.sysseting-container {
|
||
background: #fff;
|
||
padding: 24px;
|
||
min-height: 600px;
|
||
}
|
||
.tab-form {
|
||
max-width: 900px;
|
||
}
|
||
.qr-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
border: 1px solid #eee;
|
||
display: block;
|
||
}
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 120px;
|
||
height: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.avatar-uploader-icon {
|
||
font-size: 32px;
|
||
color: #8c939d;
|
||
}
|
||
</style>
|