|
|
|
|
<template>
|
|
|
|
|
<view>
|
|
|
|
|
<view class="block">
|
|
|
|
|
<view class="l-title">基本信息</view>
|
|
|
|
|
<view class="form-list">
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="name">商务经理</view>
|
|
|
|
|
<view class="val"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line req">
|
|
|
|
|
<view class="name">客户名称</view>
|
|
|
|
|
<view v-if="isDetail" class="val">{{ form.customerName }}</view>
|
|
|
|
|
<view v-else :class="['ph', {val: form.customerName}]" @click="customerVisible = 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">
|
|
|
|
|
<view class="name">联系人</view>
|
|
|
|
|
<view class="val">{{ form.name }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="name">电话</view>
|
|
|
|
|
<view class="val">{{ form.phone }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="name">邮箱</view>
|
|
|
|
|
<view class="val">{{ form.email }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line req">
|
|
|
|
|
<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="orderTypes" v-model="form.orderType"></uni-data-picker>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="name">订单编号</view>
|
|
|
|
|
<view class="val">{{ form.orderNumber }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="name">订单时间</view>
|
|
|
|
|
<view class="val">{{ form.createTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="name">订单金额（元）</view>
|
|
|
|
|
<view class="val">{{ form.orderAmount }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="block pro-wrap">
|
|
|
|
|
<view class="l-title">实训课程产品</view>
|
|
|
|
|
<uni-icons class="arrow" type="top" size="30" color="#007EFF"></uni-icons>
|
|
|
|
|
<ul class="pro-list">
|
|
|
|
|
<li>
|
|
|
|
|
<view class="name">
|
|
|
|
|
<view class="left">
|
|
|
|
|
<image class="icon" src="../../static/image/person3.png" mode=""></image>
|
|
|
|
|
Python程序设计
|
|
|
|
|
</view>
|
|
|
|
|
<uni-icons class="del" type="trash" size="25" color="#ADADAD"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="label">使用期限</view>
|
|
|
|
|
<view class="val">202323-34123</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="label">市场价（元）</view>
|
|
|
|
|
<view class="val">20232元</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="label">结算价</view>
|
|
|
|
|
<view class="val">2023元</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="label">折扣率</view>
|
|
|
|
|
<view class="val">23</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line">
|
|
|
|
|
<view class="label">平台服务费</view>
|
|
|
|
|
<view class="val">2123元</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line done">
|
|
|
|
|
<view class="val">成交价格</view>
|
|
|
|
|
<view class="price">2123元</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="add-btn">
|
|
|
|
|
<uni-icons class="icon" type="plus" color="#007FFF"></uni-icons>
|
|
|
|
|
添加产品
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="product">
|
|
|
|
|
<view class="text">
|
|
|
|
|
<view class="total">
|
|
|
|
|
已选
|
|
|
|
|
<text class="num">10</text>
|
|
|
|
|
个产品 
|
|
|
|
|
总成交价合计
|
|
|
|
|
<text class="num">2125523</text>
|
|
|
|
|
元
|
|
|
|
|
</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
总采购成本:
|
|
|
|
|
<text class="num num1">341232</text>
|
|
|
|
|
总产品利润:
|
|
|
|
|
<text class="num">564123</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="btn">提交</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="popup-mask" v-show="customerVisible" @click="closeCustomer"></view>
|
|
|
|
|
<view class="popup" v-show="customerVisible">
|
|
|
|
|
<view class="top">请选择客户</view>
|
|
|
|
|
<uni-icons class="close" type="closeempty" size="20" @click="closeCustomer"></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 customerList" @click="customerChange(item)">{{ item.customerName }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { queryCustomer, queryCustomerDetails } from '@/apis/modules/client.js'
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isDetail: false,
|
|
|
|
|
orderId: '',
|
|
|
|
|
orderTypes: [{
|
|
|
|
|
text: '正式',
|
|
|
|
|
value: 0
|
|
|
|
|
}, {
|
|
|
|
|
text: '试用',
|
|
|
|
|
value: 1
|
|
|
|
|
}],
|
|
|
|
|
form: {
|
|
|
|
|
// orderNumber: '', // 编号
|
|
|
|
|
provinceId: '', // 省份id
|
|
|
|
|
orderContact: '', // 联系人
|
|
|
|
|
email: '',
|
|
|
|
|
customerId: '', // 客户id
|
|
|
|
|
customerName: '',
|
|
|
|
|
orderType: '',
|
|
|
|
|
cityId: '',
|
|
|
|
|
phone: '',
|
|
|
|
|
orderAmount: 0,
|
|
|
|
|
customerName: '',
|
|
|
|
|
businessManager: ''
|
|
|
|
|
},
|
|
|
|
|
coursePermissions: [],// 课程权限
|
|
|
|
|
dataPlatformPermissions: [],// 数据平台权限
|
|
|
|
|
|
|
|
|
|
customerVisible: false,
|
|
|
|
|
keyword: '',
|
|
|
|
|
searchTimer: null,
|
|
|
|
|
customerList: [],
|
|
|
|
|
customerListAll: [],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
this.orderId = option.orderId
|
|
|
|
|
this.isDetail = !!option.show
|
|
|
|
|
|
|
|
|
|
option.orderId && this.getInfo()
|
|
|
|
|
// 非详情才需要查询客户
|
|
|
|
|
if (!this.isDetail) {
|
|
|
|
|
this.getCustomer()
|
|
|
|
|
}
|
|
|
|
|
// 设置标题
|
|
|
|
|
uni.setNavigationBarTitle({
|
|
|
|
|
title: option.orderId ?
|
|
|
|
|
(option.show ?
|
|
|
|
|
'订单详情' :
|
|
|
|
|
'编辑订单') :
|
|
|
|
|
'新增订单'
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取详情
|
|
|
|
|
getInfo() {
|
|
|
|
|
queryCustomerDetails({
|
|
|
|
|
orderId: this.orderId
|
|
|
|
|
}).then(({ result }) => {
|
|
|
|
|
|
|
|
|
|
}).catch(e => {})
|
|
|
|
|
},
|
|
|
|
|
// 获取客户列表
|
|
|
|
|
getCustomer() {
|
|
|
|
|
queryCustomer({
|
|
|
|
|
countries: '中国',
|
|
|
|
|
provinceId: '',
|
|
|
|
|
cityId: '',
|
|
|
|
|
searchContent: this.keyword,
|
|
|
|
|
page: 1,
|
|
|
|
|
size: 10000
|
|
|
|
|
}).then(({ message }) => {
|
|
|
|
|
this.customerListAll = message.list
|
|
|
|
|
this.customerList = message.list
|
|
|
|
|
}).catch(res => {})
|
|
|
|
|
},
|
|
|
|
|
// 客户模糊匹配
|
|
|
|
|
filterCustomer() {
|
|
|
|
|
const { keyword } = this
|
|
|
|
|
this.customerList = keyword ?
|
|
|
|
|
this.customerListAll.filter(e => e.customerName.includes(keyword)) :
|
|
|
|
|
this.customerListAll
|
|
|
|
|
},
|
|
|
|
|
// 关闭客户弹框
|
|
|
|
|
closeCustomer() {
|
|
|
|
|
this.customerVisible = false
|
|
|
|
|
this.keyword = ''
|
|
|
|
|
},
|
|
|
|
|
// 客户名称选择回调
|
|
|
|
|
customerChange(item) {
|
|
|
|
|
const { form } = this
|
|
|
|
|
// 获取客户详情
|
|
|
|
|
queryCustomerDetails({
|
|
|
|
|
customerId: item.customerId
|
|
|
|
|
}).then(({ result }) => {
|
|
|
|
|
const e = result.customer
|
|
|
|
|
form.customerId = e.customerId
|
|
|
|
|
form.customerName = e.customerName
|
|
|
|
|
form.phone = e.phone
|
|
|
|
|
form.email = e.email
|
|
|
|
|
form.name = e.name
|
|
|
|
|
}).catch(e => {})
|
|
|
|
|
this.closeCustomer()
|
|
|
|
|
},
|
|
|
|
|
// 跳转
|
|
|
|
|
toPage(path) {
|
|
|
|
|
this.$util.to(path)
|
|
|
|
|
},
|
|
|
|
|
// 提交
|
|
|
|
|
submit() {
|
|
|
|
|
const refs = this.$refs
|
|
|
|
|
const { form } = this
|
|
|
|
|
// 有大量数据的情况下，input输入用v-model会有bug，所以给每个input加ref来手动取值赋值
|
|
|
|
|
form.name = refs.nameInput.val
|
|
|
|
|
form.account = refs.accountInput.val
|
|
|
|
|
form.position = refs.positionInput.val
|
|
|
|
|
form.phone = refs.phoneInput.val
|
|
|
|
|
form.email = refs.emailInput.val
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$refs.form.validate().then(res => {
|
|
|
|
|
if (this.nameRepeat) return this.$util.errMsg('客户已存在！')
|
|
|
|
|
if (this.customerId) {
|
|
|
|
|
updateCustomer(form).then(res => {
|
|
|
|
|
this.$util.sucMsg('编辑成功')
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.$util.to('../clients/clients')
|
|
|
|
|
}, 1500)
|
|
|
|
|
}).catch(res => {})
|
|
|
|
|
} else {
|
|
|
|
|
addCustomer(form).then(res => {
|
|
|
|
|
this.$util.sucMsg('添加成功')
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
uni.navigateBack()
|
|
|
|
|
}, 1500)
|
|
|
|
|
}).catch(res => {})
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.pro-wrap {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0;
|
|
|
|
|
.l-title {
|
|
|
|
|
margin: 0 24rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
right: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
.pro-list {
|
|
|
|
|
.name {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 14rpx 24rpx;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #333;
|
|
|
|
|
background: linear-gradient(90deg, #FFF5E5 0%, #FFFFFF 100%);
|
|
|
|
|
}
|
|
|
|
|
.left {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
margin-right: 12rpx;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
.info {
|
|
|
|
|
padding: 12rpx 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 12rpx 0;
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
.label {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
.val {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
.done {
|
|
|
|
|
margin-top: 12rpx;
|
|
|
|
|
padding-top: 24rpx;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #333;
|
|
|
|
|
border-top: 1px solid #E6E8ED;
|
|
|
|
|
}
|
|
|
|
|
.price {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
color: #007EFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.add-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 16rpx 24rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
line-height: 88rpx;
|
|
|
|
|
color: #007EFF;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid #007EFF;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
.icon {
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
.uni-icons {
|
|
|
|
|
font-size: 38rpx !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.product {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
padding: 24rpx;
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
.total {
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #666;
|
|
|
|
|
.num {
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #007EFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.info {
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #333;
|
|
|
|
|
.num {
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #007EFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.num1 {
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
|
|
|
|
width: 196rpx;
|
|
|
|
|
margin-left: 27rpx;
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
background-color: #007EFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
