You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
387 lines
12 KiB
387 lines
12 KiB
2 years ago
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<uni-card v-if="customerId" :is-shadow="false" :border="false" is-full>
|
||
|
|
<view class="info">
|
||
|
|
<view class="name"><image class="school" src="@/static/image/school.png" mode="widthFix"></image>{{ form.customerName }}</view>
|
||
|
|
<view class="text">客户类型：{{ customerType }}</view>
|
||
|
|
<view class="text">产品到期时间：{{ form.expireDate || '' }}</view>
|
||
|
|
</view>
|
||
|
|
</uni-card>
|
||
|
|
|
||
|
|
<view class="block">
|
||
|
|
<view class="l-title">基本信息</view>
|
||
|
|
<view class="form-list">
|
||
|
|
<view :class="['line req', {err: err === 'customerName'}]">
|
||
|
|
<view class="name">客户名称</view>
|
||
|
2 years ago
|
<view v-if="customerId" class="val">{{ form.customerName }}</view>
|
||
|
2 years ago
|
<view v-else :class="['ph', {val: form.customerName}]" @click="schoolVisible = true">{{ form.customerName || '请选择学校' }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">省份</view>
|
||
|
|
<view class="val">{{ form.provinceName }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">城市</view>
|
||
|
|
<view class="val">{{ form.cityName }}</view>
|
||
|
|
</view>
|
||
|
|
<view :class="['line req', {err: err === 'industryClass'}]">
|
||
|
|
<view class="name">行业类型</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.industryClassName }}</view>
|
||
|
|
<uni-data-picker v-else class="picker-input" placeholder="请选择行业类型" popup-title="请选择行业类型" preload :clear-icon="false" :localdata="industryClassList" :map="{text: 'industryClassName', value: 'industryClassId'}" v-model="form.industryClassId" @change="industryClassChange"></uni-data-picker>
|
||
|
|
</view>
|
||
|
|
<view :class="['line req', {err: err === 'industry'}]">
|
||
|
|
<view class="name">行业</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.industryName }}</view>
|
||
|
|
<uni-data-picker v-else class="picker-input" placeholder="请选择行业" popup-title="请选择行业" preload :clear-icon="false" :localdata="industryList" :map="{text: 'industryName', value: 'industryId'}" v-model="form.industryId" :readonly="form.industryClassId ? false : true" @change="handleErr('industry')"></uni-data-picker>
|
||
|
|
</view>
|
||
|
|
<view :class="['line req', {err: err === 'name'}]">
|
||
|
|
<view class="name">联系人姓名</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.name }}</view>
|
||
|
2 years ago
|
<template v-else>
|
||
|
|
<input type="text" placeholder="请输入" v-model="form.name" @change="handleErr('name')">
|
||
|
|
<uni-icons class="edit" type="compose" size="20" color="#b3b3b3"></uni-icons>
|
||
|
|
</template>
|
||
|
2 years ago
|
</view>
|
||
|
2 years ago
|
<view :class="['line req', {err: err === 'phone'}]">
|
||
|
2 years ago
|
<view class="name">手机</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.phone }}</view>
|
||
|
2 years ago
|
<template v-else>
|
||
|
|
<input type="number" maxlength="11" placeholder="请输入" v-model="form.phone" @change="handleErr('phone')">
|
||
|
|
<uni-icons class="edit" type="compose" size="20" color="#b3b3b3"></uni-icons>
|
||
|
|
</template>
|
||
|
2 years ago
|
</view>
|
||
|
|
<view :class="['line req', {err: err === 'account'}]">
|
||
|
|
<view class="name">账号</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.account }}</view>
|
||
|
2 years ago
|
<template v-else>
|
||
|
|
<input type="text" placeholder="请以院校首字母+admin的格式来设置" v-model="form.account" @change="handleErr('account')">
|
||
|
|
<uni-icons class="edit" type="compose" size="20" color="#b3b3b3"></uni-icons>
|
||
|
|
</template>
|
||
|
2 years ago
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">职务</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.position }}</view>
|
||
|
2 years ago
|
<template v-else>
|
||
|
|
<input type="text" placeholder="请输入" v-model="form.position">
|
||
|
|
<uni-icons class="edit" type="compose" size="20" color="#b3b3b3"></uni-icons>
|
||
|
|
</template>
|
||
|
2 years ago
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">邮箱</view>
|
||
|
|
<view v-if="isDetail" class="val">{{ form.email }}</view>
|
||
|
2 years ago
|
<template v-else>
|
||
|
|
<input type="text" placeholder="请输入" v-model="form.email">
|
||
|
|
<uni-icons class="edit" type="compose" size="20" color="#b3b3b3"></uni-icons>
|
||
|
|
</template>
|
||
|
2 years ago
|
</view>
|
||
|
|
<view v-if="customerId" class="line">
|
||
|
|
<view class="name">产品到期时间</view>
|
||
|
|
<view class="val">{{ form.expireDate }}</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="customerId" class="line">
|
||
|
|
<view class="name">客户类型</view>
|
||
|
|
<view class="val">{{ customerType }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="isDetail" class="action">
|
||
2 years ago
|
<view class="item" v-if="auth('客户管理:编辑')" @click="toPage(`../clientDetail/clientDetail?customerId=${customerId}`)">
|
||
|
2 years ago
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-edit" size="30" color="#959595"></uni-icons>
|
||
|
|
<view class="text">编辑</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" @click="toPage(`/order/ordered/ordered?customerId=${customerId}`)">
|
||
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-product" size="30" color="#959595"></uni-icons>
|
||
|
|
<view class="text">已订阅产品</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" @click="toPage(`/order/curClient/curClient?customerId=${customerId}&name=${form.customerName}`)">
|
||
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-dingdan" size="30" color="#959595"></uni-icons>
|
||
|
|
<view class="text">订单</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else class="btn-wrap">
|
||
|
|
<view class="btn" @click="submit">确定</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="popup-mask" v-show="schoolVisible" @click="closeSchool"></view>
|
||
|
|
<view class="popup" v-show="schoolVisible">
|
||
|
|
<view class="top">请选择学校</view>
|
||
|
|
<uni-icons class="close" type="closeempty" size="20" @click="closeSchool"></uni-icons>
|
||
|
|
<uni-search-bar class="search" radius="5" placeholder="请输入学校名称" v-model="keyword" clearButton="auto" cancelButton="none" />
|
||
|
|
<view class="list">
|
||
|
|
<view class="item" v-for="item in schoolList" @click="schoolChange(item)">{{ item.schoolName }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { queryCustomerDetails, querySchool, queryIndustryClass, queryIndustry, queryCustomerIsExists, addCustomer, updateCustomer } from '@/apis/modules/client.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isDetail: false,
|
||
|
|
customerId: '',
|
||
|
|
// 客户类型
|
||
|
|
customerTypeList: [{
|
||
|
|
name: '正式',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '试用',
|
||
|
|
value: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '到期',
|
||
|
|
value: 3
|
||
|
|
}],
|
||
|
|
nameRepeat: false,
|
||
|
|
schoolVisible: false,
|
||
|
|
keyword: '',
|
||
|
|
searchTimer: null,
|
||
|
|
schoolList: [],
|
||
|
|
schoolListAll: [],
|
||
|
|
industryClassList: [],
|
||
|
|
industryList: [],
|
||
|
|
form: {
|
||
|
|
countries: '中国',
|
||
|
|
customerId: '',
|
||
|
|
customerName: '',
|
||
|
|
industryClassId: '',
|
||
|
|
industryId: '',
|
||
|
|
provinceId: '',
|
||
|
|
provinceName: '',
|
||
|
|
account: '',
|
||
|
|
name: '',
|
||
|
|
phone: '',
|
||
|
|
position: '',
|
||
|
|
cityId: '',
|
||
|
|
cityName: '',
|
||
|
|
customerType: '',
|
||
|
|
expireDate: '',
|
||
|
|
email: '',
|
||
|
|
schoolId: ''
|
||
|
|
},
|
||
|
|
customerType: '',
|
||
|
|
err: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
keyword () {
|
||
|
|
clearTimeout(this.searchTimer)
|
||
|
|
this.searchTimer = setTimeout(() => {
|
||
|
|
this.filterSchool()
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
const { options } = pages[pages.length - 1]
|
||
|
|
this.customerId = options.customerId
|
||
|
|
this.isDetail = !!options.show
|
||
|
|
|
||
|
|
options.customerId && this.getInfo()
|
||
|
|
// 非详情才需要查询学校和行业
|
||
|
|
if (!this.isDetail) {
|
||
|
|
this.getSchool()
|
||
|
|
this.getIndustryClass()
|
||
|
|
}
|
||
|
|
// 设置标题
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: options.customerId ?
|
||
|
|
(options.show ?
|
||
|
|
'客户详情' :
|
||
|
|
'编辑客户') :
|
||
|
|
'新增客户'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取详情
|
||
|
|
getInfo() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
queryCustomerDetails({
|
||
|
|
customerId: this.customerId
|
||
|
|
}).then(({ result }) => {
|
||
|
|
const { customer } = result
|
||
|
|
this.form = customer
|
||
|
|
!this.isDetail && customer.industryClassId && this.getIndustry()
|
||
|
|
this.customerType = this.customerTypeList.find(e => e.value === customer.customerType).name
|
||
|
|
uni.hideLoading()
|
||
|
|
}).catch(e => {
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取学校列表
|
||
|
|
getSchool() {
|
||
|
|
querySchool({
|
||
|
|
schoolName: '',
|
||
|
|
provinceId: '',
|
||
|
|
cityId: ''
|
||
|
|
}).then(({ list }) => {
|
||
|
|
this.schoolListAll = list
|
||
|
|
this.schoolList = list
|
||
|
|
}).catch(res => {})
|
||
|
|
},
|
||
|
|
// 学校模糊匹配
|
||
|
|
filterSchool() {
|
||
|
|
const { keyword } = this
|
||
|
|
this.schoolList = keyword ?
|
||
|
|
this.schoolListAll.filter(e => e.schoolName.includes(keyword)) :
|
||
|
|
this.schoolListAll
|
||
|
|
},
|
||
|
|
// 关闭学校弹框
|
||
|
|
closeSchool() {
|
||
|
|
this.schoolVisible = false
|
||
|
|
this.keyword = ''
|
||
|
|
},
|
||
|
|
// 客户名称选择回调
|
||
|
|
schoolChange(school) {
|
||
|
|
const { form } = this
|
||
|
|
const { schoolId } = school
|
||
|
|
form.schoolId = schoolId
|
||
|
|
form.customerName = school.schoolName
|
||
|
|
form.provinceId = school.provinceId
|
||
|
|
form.provinceName = school.provinceName
|
||
|
|
form.cityId = school.cityId
|
||
|
|
form.cityName = school.cityName
|
||
|
|
this.closeSchool()
|
||
|
|
// 客户名称判重
|
||
|
|
queryCustomerIsExists({
|
||
|
|
schoolId
|
||
|
|
}).then(res => {
|
||
|
|
this.nameRepeat = false
|
||
|
|
this.handleErr('customerName')
|
||
|
|
}).catch(res => {
|
||
|
|
this.nameRepeat = true
|
||
|
|
this.err = 'customerName'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 处理错误提示
|
||
|
|
handleErr(val) {
|
||
|
|
if (val === this.err) this.err = ''
|
||
|
|
},
|
||
|
|
// 获取行业类
|
||
|
|
getIndustryClass() {
|
||
|
|
queryIndustryClass().then(({ list }) => {
|
||
|
|
this.industryClassList = list
|
||
|
|
}).catch(res => {})
|
||
|
|
},
|
||
|
|
// 行业分类选择回调
|
||
|
|
industryClassChange() {
|
||
|
|
this.handleErr('industryClass')
|
||
|
|
this.getIndustry()
|
||
|
|
},
|
||
|
|
// 获取行业
|
||
|
|
getIndustry() {
|
||
|
|
queryIndustry({
|
||
|
|
industryClassId: this.form.industryClassId
|
||
|
|
}).then(({ list }) => {
|
||
|
|
this.industryList = list
|
||
|
|
}).catch(res => {})
|
||
|
|
},
|
||
|
|
// 跳转
|
||
|
|
toPage(path) {
|
||
|
|
this.$util.to(path)
|
||
|
|
},
|
||
|
|
// 提交
|
||
|
|
submit() {
|
||
|
|
const refs = this.$refs
|
||
|
|
const { form } = this
|
||
|
2 years ago
|
const { schoolId, industryClassId, industryId, name, phone, account } = form
|
||
|
2 years ago
|
if (!schoolId) {
|
||
|
|
this.err = 'customerName'
|
||
|
|
return this.$util.errMsg('请选择客户！')
|
||
|
|
}
if (this.nameRepeat) {
|
||
|
|
this.err = 'customerName'
|
||
|
|
return this.$util.errMsg('客户已存在！')
|
||
|
|
}
if (!industryClassId) {
|
||
|
|
this.err = 'industryClass'
|
||
|
|
return this.$util.errMsg('请选择行业类型！')
|
||
|
|
}
if (!industryId) {
|
||
|
|
this.err = 'industry'
|
||
|
|
return this.$util.errMsg('请选择行业！')
|
||
|
|
}
if (!name) {
|
||
|
|
this.err = 'name'
|
||
|
|
return this.$util.errMsg('请输入联系人姓名！')
|
||
|
2 years ago
|
}
if (!phone) {
|
||
|
|
this.err = 'phone'
|
||
|
|
return this.$util.errMsg('请输入手机！')
|
||
|
|
}
|
||
|
|
if (!/^1[3456789]\d{9}$/.test(phone)) {
|
||
|
|
this.err = 'phone'
|
||
|
|
return this.$util.errMsg('请输入正确的手机！')
|
||
|
2 years ago
|
}
if (!account) {
|
||
|
|
this.err = 'account'
|
||
|
|
return this.$util.errMsg('请输入账号！')
|
||
|
|
}
|
||
|
|
uni.showLoading({
|
||
|
|
title: '提交中'
|
||
|
|
})
|
||
|
|
if (this.customerId) {
|
||
|
|
updateCustomer(form).then(res => {
|
||
|
|
uni.hideLoading()
|
||
|
|
this.$util.sucMsg('编辑成功')
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}, 1500)
|
||
|
|
}).catch(res => {})
|
||
|
|
} else {
|
||
|
|
addCustomer(form).then(({ customerId }) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
const that = this
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '创建客户成功，是否马上为该客户创建订单？',
|
||
|
|
success: function (res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
// 选择是则直接跳转到新建订单页面，并且选中当前新加的客户
|
||
|
|
uni.redirectTo({
|
||
|
|
url: `/order/orderDetail/orderDetail?customerId=${customerId}`
|
||
|
|
})
|
||
|
|
} else if (res.cancel) {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(res => {})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.page {
|
||
|
|
padding-bottom: 170rpx;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
.name {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.school {
|
||
|
|
width: 48rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
2 years ago
|
.form-list {
|
||
|
|
.edit {
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
2 years ago
|
.editIcon {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
image{
|
||
|
|
width: 100%;height: 100%
|
||
|
|
}
|
||
|
|
}
|
||
|
2 years ago
|
</style>
|