|
|
@@ -1,5 +1,65 @@
|
|
|
<template>
|
|
|
<div id="goods-list-fragment">
|
|
|
+ <el-dialog
|
|
|
+ title="我要询价"
|
|
|
+ :visible.sync="hasDialog">
|
|
|
+ <div class="form_dialog">
|
|
|
+ <ul class="list-inline">
|
|
|
+ <li class="form-item">
|
|
|
+ <span>品牌：</span>
|
|
|
+ <p v-text="applyObj.brand ? spliceString(applyObj.brand, 90) : '-'">32432</p>
|
|
|
+ </li>
|
|
|
+ <li class="form-item">
|
|
|
+ <span>物料名称：</span>
|
|
|
+ <p v-text="applyObj.prodName ? spliceString(applyObj.prodName, 90) : '-'">32</p>
|
|
|
+ </li>
|
|
|
+ <li class="form-item">
|
|
|
+ <span>型号：</span>
|
|
|
+ <p v-text="applyObj.cmpCode ? spliceString(applyObj.cmpCode, 90) : '-'">32432</p>
|
|
|
+ </li>
|
|
|
+ <li class="form-item">
|
|
|
+ <span>规格：</span>
|
|
|
+ <p v-text="applyObj.spec ? spliceString(applyObj.spec, 90) : '-'">32432</p>
|
|
|
+ </li>
|
|
|
+ <li class="form-item">
|
|
|
+ <span><i>*</i>截止日期：</span>
|
|
|
+ <el-date-picker
|
|
|
+ :class="{'error': !validObj.deadline}"
|
|
|
+ v-model="applyObj.deadline"
|
|
|
+ type="date"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="setDeadLineValid"
|
|
|
+ :editable="false"
|
|
|
+ :clearable="true"
|
|
|
+ size="mini">
|
|
|
+ </el-date-picker>
|
|
|
+ </li>
|
|
|
+ <li class="form-item">
|
|
|
+ <span>封装：</span>
|
|
|
+ <input type="text" class="form-control" v-model="applyObj.encapsulation"/>
|
|
|
+ </li>
|
|
|
+ <!--<li class="form-item">-->
|
|
|
+ <!--<span>单价预算：</span>-->
|
|
|
+ <!--<select v-model="applyObj.currency" class="form-control" style="width:40px;">-->
|
|
|
+ <!--<option value="RMB">¥</option>-->
|
|
|
+ <!--<option value="USD">$</option>-->
|
|
|
+ <!--</select>-->
|
|
|
+ <!--<input type="number" v-model="applyObj.unitPrice" class="form-control" :class="{'error': !validObj.unitPrice}"/>-->
|
|
|
+ <!--</li>-->
|
|
|
+ <!--<li class="form-item">-->
|
|
|
+ <!--<span>生产日期：</span>-->
|
|
|
+ <!--<input type="text" class="form-control" v-model="applyObj.produceDate"/>-->
|
|
|
+ <!--</li>-->
|
|
|
+ <li class="form-item">
|
|
|
+ <span>采购数量(PCS)：</span>
|
|
|
+ <input type="number" class="form-control" v-model="applyObj.amount" :class="{'error': !validObj.amount}"/>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <button @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)" :disabled="isClick">询价提交</button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
<div class="container">
|
|
|
<div class="content-adv">
|
|
|
<div class="title-adv"><span>全球共享交易平台</span><span>全球共享询价平台</span></div>
|
|
|
@@ -121,7 +181,14 @@
|
|
|
<div v-if="!commodity.attach">—</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
- <buy :item="commodity"></buy>
|
|
|
+ <buy :item="commodity" v-if="commodity.attach"></buy>
|
|
|
+ <button v-if="!commodity.attach"
|
|
|
+ style="z-index: 1000;"
|
|
|
+ class="btn btn-primary btn-buy-now"
|
|
|
+ :class="{'disabled': isClick}"
|
|
|
+ @click="immediatelyClick(commodity, $event)">
|
|
|
+ <span class="watch">立即询价</span>
|
|
|
+ </button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="active-empty" v-if="!commodities.content || commodities.content.length == 0">
|
|
|
@@ -190,6 +257,31 @@
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ isClick: false,
|
|
|
+ applyObj: {
|
|
|
+ cmpCode: '',
|
|
|
+ brand: '',
|
|
|
+ unitPrice: '',
|
|
|
+ currency: 'RMB',
|
|
|
+ prodName: '',
|
|
|
+ spec: '',
|
|
|
+ encapsulation: '',
|
|
|
+ produceDate: '',
|
|
|
+ amount: '',
|
|
|
+ deadline: ''
|
|
|
+ },
|
|
|
+ validObj: {
|
|
|
+ unitPrice: true,
|
|
|
+ amount: true,
|
|
|
+ deadline: true
|
|
|
+ },
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate (time) {
|
|
|
+ // 大于等于今天 小于三个月后
|
|
|
+ return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hasDialog: false,
|
|
|
defaultProps: {
|
|
|
children: 'children',
|
|
|
label: 'nameCn'
|
|
|
@@ -392,11 +484,281 @@
|
|
|
goBrandDetail (url, event) {
|
|
|
event.stopPropagation()
|
|
|
window.open(url)
|
|
|
+ },
|
|
|
+ // 格式化字符串长度
|
|
|
+ spliceString (str, length) {
|
|
|
+ return str && str.length ? this.baseUtils.spliceStr(str, length) : '暂无信息'
|
|
|
+ },
|
|
|
+ // 弹出询价界面
|
|
|
+ immediatelyClick (type, event) {
|
|
|
+ event.stopPropagation()
|
|
|
+ if (!this.user.logged) {
|
|
|
+ this.$router.push('/auth/login?returnUrl=' + window.location.href)
|
|
|
+ } else {
|
|
|
+ this.hasDialog = true
|
|
|
+ this.applyObj.cmpCode = type.code
|
|
|
+ this.applyObj.brand = type.brandNameEn
|
|
|
+ this.applyObj.spec = type.spec
|
|
|
+ this.applyObj.prodName = type.kindNameCn
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 时间格式化
|
|
|
+ setDeadLineValid: function () {
|
|
|
+ if(this.applyObj.deadline === '') {return ''}
|
|
|
+ this.applyObj.deadline = this.baseUtils.formatDate(this.baseUtils.getFullDay(new Date(this.applyObj.deadline)), 'yyyy-MM-dd hh:mm:ss')
|
|
|
+ this.validObj.deadline = true
|
|
|
+ },
|
|
|
+ // 检查单价预算
|
|
|
+ checkUnitPrice () {
|
|
|
+ this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
|
|
|
+ if (!this.validObj.unitPrice && this.applyObj.unitPrice <= 0) {
|
|
|
+ this.$message.error('单价必须是大于0的数字')
|
|
|
+ }
|
|
|
+ return this.validObj.unitPrice
|
|
|
+ },
|
|
|
+ // 检查采购数量
|
|
|
+ checkAmount () {
|
|
|
+ this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
|
|
|
+ return this.validObj.amount
|
|
|
+ },
|
|
|
+ // 检查时间是否有输入
|
|
|
+ checkDeadline () {
|
|
|
+ this.validObj.deadline = Boolean(this.applyObj.deadline)
|
|
|
+ return this.validObj.deadline
|
|
|
+ },
|
|
|
+ // 检查各个字段输入正常数据
|
|
|
+ checkAll () {
|
|
|
+ return this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
|
|
|
+ },
|
|
|
+ emptyForm () {
|
|
|
+ for (let attr in this.applyObj) {
|
|
|
+ this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 请求询价信息
|
|
|
+ goPublish () {
|
|
|
+ let _this = this
|
|
|
+ this.isClick = true
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.isClick = false
|
|
|
+ }, 1000)
|
|
|
+ if (this.checkAll()) {
|
|
|
+ let inquiry = {}
|
|
|
+ let inquiryItem = {}
|
|
|
+ if (this.user.data.enterprise) {
|
|
|
+ inquiry.enUU = this.user.data.enterprise.uu
|
|
|
+ }
|
|
|
+ let date = new Date()
|
|
|
+ let currency = this.applyObj.unitPrice ? this.applyObj.currency : null
|
|
|
+ inquiry.recorderUU = this.user.data.userUU
|
|
|
+ inquiry.code = 'MALL' + date.getTime()
|
|
|
+ inquiry.date = date
|
|
|
+ inquiry.recorder = this.user.data.userName
|
|
|
+ inquiry.endDate = this.applyObj.deadline
|
|
|
+ inquiry.sourceapp = 'MALL'
|
|
|
+ inquiry.amount = 1
|
|
|
+ inquiryItem.userUU = this.user.data.userUU
|
|
|
+ inquiryItem.source = 'MALL'
|
|
|
+ inquiryItem.userName = this.user.data.userName
|
|
|
+ inquiryItem.userTel = this.user.data.userTel
|
|
|
+ inquiryItem.needquantity = this.applyObj.amount
|
|
|
+ inquiryItem.inbrand = this.applyObj.brand
|
|
|
+ inquiryItem.currency = currency
|
|
|
+ inquiryItem.cmpCode = this.applyObj.cmpCode.toUpperCase()
|
|
|
+ inquiryItem.unitPrice = this.applyObj.unitPrice
|
|
|
+ inquiryItem.produceDate = this.applyObj.produceDate
|
|
|
+ inquiryItem.date = date
|
|
|
+ inquiryItem.endDate = this.applyObj.deadline
|
|
|
+ inquiryItem.encapsulation = this.applyObj.encapsulation
|
|
|
+ inquiryItem.spec = this.applyObj.spec
|
|
|
+ inquiryItem.prodTitle = this.applyObj.prodName
|
|
|
+ let inquiryItems = []
|
|
|
+ inquiryItems.push(inquiryItem)
|
|
|
+ inquiry.inquiryItems = inquiryItems
|
|
|
+ inquiry.currency = this.applyObj.unitPrice ? this.applyObj.currency : null
|
|
|
+ this.$http.post('/inquiry/buyer/save', inquiry)
|
|
|
+ .then(res => {
|
|
|
+ this.$message.success('发布成功')
|
|
|
+ this.hasDialog = false
|
|
|
+ this.emptyForm()
|
|
|
+ }, error => {
|
|
|
+ console.log(error)
|
|
|
+ this.$message.error('发布失败')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ if (!this.validObj.deadline) {
|
|
|
+ this.$message.error('截止日期不能为空')
|
|
|
+ } else if (!this.validObj.amount) {
|
|
|
+ this.$message.error('请输入正确的数值')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style>
|
|
|
+<style type="text/scss" lang="scss">
|
|
|
+ #goods-list-fragment {
|
|
|
+ .btn-buy-now {
|
|
|
+ background-color: #5078CB;
|
|
|
+ color: #fff;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid #5078cb;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .btn-add-cart {
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #214797;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
+ .btn-buy-now:hover{
|
|
|
+ background: #214797;
|
|
|
+ }
|
|
|
+ .btn-buy-now.disabled,
|
|
|
+ .btn-buy-now.disabled:focus{
|
|
|
+ background-color: #d1d2d3!important;
|
|
|
+ border: none!important;
|
|
|
+ outline: none;
|
|
|
+ color: #fff!important;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .el-dialog{
|
|
|
+ width: 680px!important;
|
|
|
+ .el-dialog__header{
|
|
|
+ background: #4290f7;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 20px 0;
|
|
|
+ display:block;
|
|
|
+ .el-dialog__title{
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .el-dialog__footer{
|
|
|
+ text-align: center;
|
|
|
+ button{
|
|
|
+ display:inline-block;
|
|
|
+ background: #3c7cf5;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ height:30px;
|
|
|
+ padding:0 10px;
|
|
|
+ box-shadow: none;
|
|
|
+ border: 0;
|
|
|
+ border-radius:5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form_dialog{
|
|
|
+ .el-date-editor--date{
|
|
|
+ width: 230px;
|
|
|
+ &.error {
|
|
|
+ input {
|
|
|
+ border: 1px solid #f4645f !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ li{
|
|
|
+ width:50%;
|
|
|
+ font-size: 14px;
|
|
|
+ color:#666;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-bottom:15px;
|
|
|
+ &.form-item {
|
|
|
+ position: relative;
|
|
|
+ p{
|
|
|
+ margin:0;
|
|
|
+ margin-left:80px;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ float:left;
|
|
|
+ width: 112px;
|
|
|
+ text-align: right;
|
|
|
+ display: inline-block;
|
|
|
+ color:#3c7cf5;
|
|
|
+ i {
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ right: 5px;
|
|
|
+ color: #e41515;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ line-height: normal;
|
|
|
+ position: absolute;
|
|
|
+ top: 19px;
|
|
|
+ left: 79px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #b5b5b5;
|
|
|
+ z-index: 1;
|
|
|
+ max-height: 120px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ border-radius: 3px;
|
|
|
+ width: 114px;
|
|
|
+ font-size: 12px;
|
|
|
+ li {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 0 5px;
|
|
|
+ &:hover {
|
|
|
+ background: #ddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ select {
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ height: 20px;
|
|
|
+ background: url('/images/applyPurchase/select.png')no-repeat right;
|
|
|
+ background-position-x: 23px;
|
|
|
+ padding: 0 0 0 7px;
|
|
|
+ border-radius: 0;
|
|
|
+ & + input {
|
|
|
+ padding-left: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ width: 198px;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 198px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 0 3px;
|
|
|
+ box-shadow: none;
|
|
|
+ -webkit-box-shadow: none;
|
|
|
+ -moz-box-shadow: none;
|
|
|
+ &.error {
|
|
|
+ border-color: #f4645f!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
#goods-list-fragment{
|
|
|
width: 100%;
|
|
|
background: #ece9ec;
|
|
|
@@ -856,7 +1218,7 @@
|
|
|
url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
|
|
|
}
|
|
|
|
|
|
- <!-- 分页 -->
|
|
|
+ /*-- 分页 --*/
|
|
|
#goods-list-fragment .el-pagination .el-pager li.active {
|
|
|
border-color: #5078cb !important;
|
|
|
background-color: #5078cb !important;
|
wangcz
