Files
jjx-wap/pages/price/publish.vue
T
2026-10-08 18:34:09 +08:00

1296 lines
49 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="wrap">
<!-- 吸顶 -->
<u-sticky offset-top="0" customNavHeight="0">
<uititle title="发布询价单"></uititle>
</u-sticky>
<view class="layout layout-header flex align-center">
<view :class="['ptb', {'active': formData.fillType === 0}]" @click="formData.fillType = 0">手动填写</view>
<view :class="['ptb', {'active': formData.fillType === 1}]" @click="formData.fillType = 1">批量上传</view>
</view>
<view class="text-25 text-main p-20" v-if="formData.fillType === 0">温馨提示:
手动填写仅支持主流钢材产品数据,如无您采购产品数据请点击"批量上传"下单。
</view>
<view class="layout layout-publish m-top-10">
<view class="text-25">询价单编号:{{ formData.enquiryNo }}</view>
<view class="goods-item flex align-center flex-wrap">
<view class="lb">金久信业务员编号</view>
<view class="vl flex-1 p-right-20">
<u--input
placeholder="请输入金久信业务员编号"
border="surround"
v-model="formData.salesCode"
fontSize="24rpx"
disabledColor="#fff"
></u--input>
</view>
</view>
<template v-if="formData.fillType === 0">
<view class="card-title">规格信息</view>
<!-- 手动填写-规格信息&所属分类 -->
<view class="goods-box w-100p" v-for="(item, index) in productList" :key="index">
<view class="goods m-top-20 clear w-100p">
<view class="goods-item flex align-center flex-wrap">
<view class="lb">商品名称:</view>
<view class="vl flex-1 p-right-20" @click="doShowGoodsPicker(index)">
<u--input
style="pointer-events:none"
placeholder="请选择"
v-model="productList[index].name"
fontSize="24rpx"
suffixIcon="arrow-down-fill"
suffixIconStyle="font-size: 10px;color: #d5d5d5"
:disabled="true"
disabledColor="#fff"
></u--input>
</view>
</view>
<view class="goods-item flex align-center flex-wrap w-100p"
v-for="(model, modelIndex) in item.model" :key="modelIndex">
<view class="lb">{{ model.label }}:</view>
<view class="flex justify-start items-start flex-wrap">
<text class="text-25 mr-15 mb-15 border p-10 "
v-for="(value, valueIndex) in model.values"
:class="[model.value === value ? 'bg-main text-white': '']"
:key="valueIndex" @click="productList[index].model[modelIndex].value = value">
{{ value }}
</text>
</view>
</view>
<!-- <view class="goods-item flex align-center flex-wrap">-->
<!-- <view class="lb">单件长度:</view>-->
<!-- <view class="vl flex-1 p-right-20">-->
<!-- <u&#45;&#45;input-->
<!-- placeholder="长度(米)"-->
<!-- border="surround"-->
<!-- v-model="productList[index].singleLength"-->
<!-- fontSize="24rpx"-->
<!-- disabledColor="#fff"-->
<!-- ></u&#45;&#45;input>-->
<!-- </view>-->
<!-- </view>-->
<view class="goods-item flex align-center flex-wrap">
<view class="lb">交货服务:</view>
<view class="vl flex-1 p-right-20" @click="doShowDeliverService(index)">
<u--input
style="pointer-events:none"
placeholder="请选择"
border="surround"
v-model="productList[index].deliverService"
fontSize="24rpx"
disabled
disabledColor="#fff"
suffixIcon="arrow-down-fill"
suffixIconStyle="font-size: 10px;color: #d5d5d5"
/>
</view>
</view>
<view class="flex justify-center items-center">
<view class="goods-item half flex align-center flex-wrap">
<view class="lb">预估采购数量:</view>
<view class="vl flex-1 p-right-20">
<u--input
placeholder="请输入内容"
border="surround"
v-model="productList[index].procureNumber"
fontSize="24rpx"
></u--input>
</view>
</view>
<view class="goods-item half flex align-center flex-wrap">
<view class="lb">采购单位:</view>
<view class="vl flex-1 p-right-20" @click="doShowGoodsUnitPicker(index)">
<u--input
style="pointer-events:none"
placeholder="请选择"
border="surround"
v-model="productList[index].procureUnit"
fontSize="24rpx"
disabled
disabledColor="#fff"
suffixIcon="arrow-down-fill"
suffixIconStyle="font-size: 10px;color: #d5d5d5"
/>
</view>
</view>
</view>
<view class="goods-item flex align-center flex-wrap">
<view class="lb">计价形式:</view>
<view class="vl flex-1 p-right-20" @click="doShowPricingForm(index)">
<u--input
style="pointer-events:none"
placeholder="请选择"
border="surround"
v-model="productList[index].pricingForm"
fontSize="24rpx"
disabled
disabledColor="#fff"
suffixIcon="arrow-down-fill"
suffixIconStyle="font-size: 10px;color: #d5d5d5"
/>
</view>
</view>
<view class="goods-item flex align-center flex-wrap">
<view class="lb">装货、卸货费用承担:</view>
<view class="vl flex-1 p-right-20" @click="doShowPricingPayBy(index)">
<u--input
style="pointer-events:none"
placeholder="请选择"
border="surround"
v-model="productList[index].loadPaidBy"
fontSize="24rpx"
disabled
disabledColor="#fff"
suffixIcon="arrow-down-fill"
suffixIconStyle="font-size: 10px;color: #d5d5d5"
/>
</view>
</view>
</view>
<view class="m-top-30 flex justify-end items-center">
<u-button class="add-btn" icon="plus" iconColor="#A92924" size="small" text="添加商品"
@click="addProduct"></u-button>
<view v-if="productList.length > 1 && index === productList.length - 1">
<u-button icon="minus-circle" type="primary" size="small" text="删除商品"
@click="removeProduct"></u-button>
</view>
</view>
</view>
</template>
<!-- 批量上传-规格信息 -->
<template v-if="formData.fillType === 1">
<view class="card-title">采购单或附件上传</view>
<view class="m-top-30">
<u-upload
accept="file"
:fileList="files"
@afterRead="afterRead($event, 'files')"
@delete="deletePic($event, 'files')"
name="1"
multiple
:maxCount="10"
></u-upload>
</view>
<view class="card-title m-top-30">所属分类</view>
<view class="tag-title m-top-30">
点击选分类
<text class="limit">(至少选择1个分类,最多可选择5个分类)</text>
</view>
<view class="tag-box flex justify-start flex-wrap">
<view :class="['item', {active: productIdList.includes(item._id)}]"
v-for="(item,index) in goodsList"
:key="index"
@click="changeMultiGoods(item)">{{ item.name }}
</view>
</view>
<view class="goods-item flex align-center flex-wrap">
<view class="lb">其他分类:</view>
<view class="vl flex-1 p-right-20">
<u--input
placeholder="以上不包含产品再次输入"
border="surround"
v-model="formData.otherCate"
fontSize="24rpx"
></u--input>
</view>
</view>
<view class="card-title">采购数量</view>
<view class="m-top-30">
<view class="flex justify-center items-center">
<view class="goods-item half flex align-center flex-wrap">
<view class="lb">采购数量:</view>
<view class="vl flex-1 p-right-20">
<u--input
placeholder="请输入采购数量"
border="surround"
v-model="formData.procureNumber"
fontSize="24rpx"
></u--input>
</view>
</view>
<view class="goods-item half flex align-center flex-wrap">
<view class="lb">采购单位:</view>
<view class="vl flex-1 p-right-20">
<u--input
placeholder="请输入采购单位"
border="surround"
v-model="formData.procureUnit"
fontSize="24rpx"
/>
</view>
</view>
</view>
</view>
</template>
<view class="goods-item half flex align-center flex-wrap w-100p">
<view class="lb">交货时限:</view>
<view class="vl flex-1 p-right-20 w-100p" @click="handPriceDate">
<u--input
style="pointer-events:none"
placeholder="请选择"
border="surround"
v-model="formData.deliveryTime"
fontSize="24rpx"
suffixIcon="calendar"
suffixIconStyle="font-size: 18px;color: #d5d5d5"
:disabled="true"
disabledColor="#fff"
></u--input>
</view>
</view>
<view class="goods-item hundred flex align-center flex-wrap">
<view class="lb">交货地点:</view>
<view class="vl flex-1 p-right-20" @click="showAddress">
<u--input
style="pointer-events:none"
placeholder="请选择"
border="surround"
v-model="region"
fontSize="24rpx"
suffixIcon="arrow-down-fill"
suffixIconStyle="font-size: 10px;color: #d5d5d5"
:disabled="true"
disabledColor="#fff"
></u--input>
</view>
</view>
<view class="goods-item hundred flex align-center flex-wrap">
<view class="lb">详细地址:</view>
<view class="vl flex-1 p-right-20">
<u--input
placeholder="请输入内容"
border="surround"
v-model="formData.addressDetail"
></u--input>
</view>
</view>
<!-- 采购商其他要求 -->
<view class="card-title m-top-30">采购商其他要求</view>
<view class="flex justify-start align-center m-top-30">
<u-radio-group v-model="hasRequire" placement="row">
<u-radio activeColor="red" :name='true' label="有" :customStyle="{marginRight: '30px'}"></u-radio>
<u-radio activeColor="red" :name='false' label="无"></u-radio>
</u-radio-group>
<view class="m-top-30">
<u-upload
:fileList="multiFiles"
@afterRead="afterRead($event, 'multiFiles')"
@delete="deletePic($event, 'multiFiles')"
name="1"
multiple
:maxCount="10"
></u-upload>
</view>
</view>
<view class="m-top-30">
<u--textarea v-model="formData.remark" :disabled="!hasRequire"
placeholder="生产厂家、品牌要求、复杂加工提供图纸、简单加工详细说明加工内容,如:镀锌、刷漆、防腐、折弯、裁剪等"></u--textarea>
</view>
<!-- 发票要求 -->
<view class="card-title m-top-30">发票要求</view>
<view class="flex justify-start align-center m-top-30">
<u-radio-group v-model="formData.invoice" placement="row">
<u-radio activeColor="red" :name='true' label="含税" :customStyle="{marginRight: '30px'}"></u-radio>
<u-radio activeColor="red" :name='false' label="不含税"></u-radio>
</u-radio-group>
</view>
<template v-if="formData.invoice">
<view class="group flex m-top-30">
<view class="lb m-right-20">开票时间:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.writeInvoiceTime" placement="column">
<u-radio activeColor="red" :name='0' label="付款当月(限20号之后付款次月开票)"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" :name='1' label="付款后次月"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" :name='2' label="付款前"></u-radio>
</u-radio-group>
</view>
</view>
<view class="group flex m-top-30">
<view class="lb m-right-20">纳税人身份:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.taxType" placement="column">
<u-radio activeColor="red" name='一般纳税人' label="一般纳税人"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" name='小规模公司' label="小规模公司"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" name='个体工商户' label="个体工商户"></u-radio>
</u-radio-group>
</view>
</view>
<view class="group flex m-top-30">
<view class="lb m-right-20">发票种类:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.invoiceType" placement="column">
<u-radio activeColor="red" name='专用发票' label="专用发票"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" name='普通发票' label="普通发票"
:customStyle="{marginBottom: '10px'}"></u-radio>
</u-radio-group>
</view>
</view>
<view class="group flex m-top-30">
<view class="lb m-right-20">税率:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.taxRate" placement="column">
<u-radio activeColor="red" v-for="(item, index) in ['13%', '9%', '6%', '4%', '3%', '1%']"
:key="index" :name='item' :label="item"
:customStyle="{marginBottom: '10px'}"/>
</u-radio-group>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">手动填写税票要求:</view>
<view class="vl flex-1">
<u--input
placeholder="如:一般纳税人 专用发票 税率13%"
border="surround"
v-model="formData.invoiceOther"
></u--input>
</view>
</view>
</template>
<!-- 运输要求 -->
<view class="card-title m-top-30">运输要求</view>
<view class="group flex m-top-30">
<view class="lb m-right-20">随货资料:</view>
<view class="vl flex-1">
<u-checkbox-group v-model="formData.transportDocuments" @change="onChangeSelectDocument">
<view class="flex flex-col justify-start items-start">
<view class="flex justify-start items-center">
<view style="width: 250rpx">
<u-checkbox activeColor="red" name='合格证' label="合格证"
:customStyle="{marginLeft: '10px'}"></u-checkbox>
</view>
<view style="width: 250rpx">
<u-checkbox activeColor="red" name='检测报告' label="检测报告"
:customStyle="{marginLeft: '10px'}"></u-checkbox>
</view>
</view>
<view class="flex justify-start items-center mt-20">
<view style="width: 250rpx">
<u-checkbox activeColor="red" name='销售清单' label="销售清单"
:customStyle="{marginLeft: '10px'}"></u-checkbox>
</view>
<view style="width: 250rpx">
<u-checkbox activeColor="red" name='磅重' label="磅重"
:customStyle="{marginLeft: '10px'}"></u-checkbox>
</view>
</view>
</view>
</u-checkbox-group>
<u-checkbox :checked="selectAll" activeColor="red" name='全选' label="全选"
:customStyle="{marginTop: '10px', marginLeft: '10px'}"
@change="changeSelectAll"></u-checkbox>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">其他要求:</view>
<view class="vl flex-1">
<u--input
placeholder="请输入内容"
border="surround"
v-model="formData.otherTransportDocuments"
></u--input>
</view>
</view>
<view class="flex justify-start align-center m-top-30">
<view class="lb m-right-20">运输限制:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.transportLimit" placement="row">
<u-radio activeColor="red" :name='false' label="无"
:customStyle="{marginRight: '30px'}"></u-radio>
<u-radio activeColor="red" :name='true' label="有"></u-radio>
</u-radio-group>
</view>
</view>
<view class="group flex align-center m-top-30" v-if="formData.transportLimit">
<view class="lb m-right-20">其他要求:</view>
<view class="vl flex-1">
<u--input
placeholder="请输入运输限制说明"
border="surround"
v-model="formData.otherTransportRequest"
></u--input>
</view>
</view>
<!-- 交易模式 -->
<view class="card-title m-top-30">交易模式</view>
<view class="flex justify-start align-center m-top-30">
<u-radio-group v-model="formData.tradeMethod" placement="row">
<u-radio activeColor="red" :name='1' label="金久信公证"
:customStyle="{marginRight: '30px'}"></u-radio>
<u-radio activeColor="red" :name='0' label="自主交易"></u-radio>
</u-radio-group>
</view>
<!-- 交易说明 -->
<view class="card-title m-top-30">交易说明</view>
<view class="group flex m-top-30">
<view class="lb m-right-20">付款方式:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.payMethod" placement="column">
<!-- <u-radio activeColor="red" :name='0' label="预付N%,货到付全款"-->
<!-- :customStyle="{marginBottom: '10px'}"></u-radio>-->
<view class="flex justify-start items-center">
<u-radio activeColor="red" :name='0'
:customStyle="{marginBottom: '10px'}"></u-radio>
<view class="text-25 flex justify-start items-center">
<text>预付</text>
<u-input v-model="formData.advancePayRate" :disabled="formData.payMethod !== 0"
:custom-style="{width: '100rpx'}"></u-input>
<text>%,货到付全款</text>
</view>
</view>
<u-radio activeColor="red" :name='1' label="货到验收后付款"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" :name='2' label="提货付全款"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" :name='3' label="信誉采购,货到签单后账期N天"
:customStyle="{marginBottom: '10px'}"></u-radio>
<u-radio activeColor="red" :name='4' label="其他付款方式描述"></u-radio>
</u-radio-group>
</view>
</view>
<!-- <view class="group flex align-center m-top-30" v-if="formData.payMethod === 0">-->
<!-- <view class="lb m-right-20">预付(%):</view>-->
<!-- <view class="vl flex-1">-->
<!-- <u&#45;&#45;input-->
<!-- placeholder="请输入内容"-->
<!-- v-model="formData.advancePayRate"-->
<!-- ></u&#45;&#45;input>-->
<!-- </view>-->
<!-- </view>-->
<view class="group flex align-center m-top-30" v-if="formData.payMethod === 3">
<view class="lb m-right-20">账期(天):</view>
<view class="vl flex-1">
<u--input
placeholder="请输入内容"
v-model="formData.reputationPayDay"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30" v-if="formData.payMethod === 4">
<view class="lb m-right-20">其他付款方式描述:</view>
<view class="vl flex-1">
<u--textarea v-model="formData.otherPayMethod" placeholder="请输入内容"></u--textarea>
</view>
</view>
<view class="flex justify-start align-center m-top-30">
<view class="lb m-right-20">报价形式:</view>
<view class="vl flex-1">
<u-radio-group v-model="formData.offerType" placement="row">
<u-radio activeColor="red" :name='0' label="整单报价"
:customStyle="{marginRight: '30px'}"></u-radio>
<u-radio activeColor="red" :name='1' label="可分项报价"></u-radio>
</u-radio-group>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">报价时限:</view>
<view class="vl flex-1" @click.native="show = true">
<u--input
style="pointer-events:none"
readonly
placeholder="点击选取时限"
suffixIcon="calendar"
v-model="answerRange"
></u--input>
</view>
</view>
<!-- 交易保证金要求 -->
<view class="card-title m-top-30">交易保证金要求</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">人民币金额≥:</view>
<view class="vl flex-1">
<u--input
type="number"
placeholder="平台交易保证金要求(如无要求则留空)"
border="surround"
v-model="formData.earnestMoney"
@blur="formatter"
></u--input>
</view>
</view>
<!-- 合同条款 -->
<view class="card-title m-top-30">合同条款</view>
<view class="flex justify-start align-center m-top-30">
<u-radio-group v-model="formData.signMethod" placement="column">
<u-radio activeColor="red" :name='0' label="线上签约-标准合同"
:customStyle="{marginBottom: '30rpx'}"></u-radio>
<u-radio activeColor="red" :name='2' label="线上签约-双方协商合同"
:customStyle="{marginBottom: '30rpx'}"></u-radio>
<u-radio activeColor="red" :name='1' label="线下签约"
:customStyle="{marginBottom: '30rpx'}"></u-radio>
</u-radio-group>
</view>
<template v-if="formData.signMethod === 2">
<view class="card-title m-top-30">合同附件</view>
<u-upload
accept="file"
:fileList="contractAttachment"
@afterRead="afterRead($event, 'contractAttachment')"
@delete="deletePic($event, 'contractAttachment')"
name="contractAttachment"
multiple
:maxCount="10"
></u-upload>
</template>
<view v-if="formData.signMethod === 0" class="text-25" style="line-height: 32rpx">
<!-- <view @click="openDownload" class="pointer my-25 text-main">-->
<!-- 点击查看标准合同-->
<!-- </view>-->
<view class="flex justify-start items-start flex-col">
<view class="m-10">违约责任:</view>
<view class="pl-20 flex-1 py-20">
1.
乙方所交产品品种、型号、规格、质量不符合规定的,如果甲方同意利用,应当按质论价;如果甲方不能利用的,应根据产品的具体情况,由乙方负责包换或包修,并承担修理、调换或退货而支付的实际费用;
2.乙方不予供货违约责任为甲方的实际损失+违约金,如乙方材料符合订货标准,甲方不能退货和不收货,甲方无条件应按实际本合同订货数量支付100%货款,并支付乙方因此产生的实际费用。带有甲乙双方单位相关收货人和发货人签字的本合同的发货清单事项和内容均视为本合同的补充合同,与本合同有相同的法律效力,双方应共同遵照执行。
</view>
</view>
<view class="flex justify-start items-start flex-col">
<view class="m-10">解决纠纷的方法:</view>
<view class=" pl-20 flex-1 py-20">
1、凡因本合同引起的或与本合同有关的任何争议,均可友好协商或仲裁解决,协商或仲裁不成的,双方协商同意在合同签订地人民法院管辖地起诉,违约一方或对合同争议承担主要责任的一方,应承担对方因仲裁和起诉而产生的全部律师代理费、鉴定(检验)费、诉讼保全费、诉讼保险费、公告费、差旅费、执行费、误工费和获取证据产生费用等其他相关费用。
2、双方本合同相关权利放弃均应有双方书面作出并加盖公章或授权委托人签字后生效。
</view>
</view>
<view class="flex justify-start items-start flex-col">
<view class="m-10">不可抗力:</view>
<view class=" pl-20 flex-1 py-20">
甲乙双方的任何一方由于不可抗力或突发公共事件的原因不能履行合同时,应及时向对方通报不能履行或不能完全履行的理由,以减轻可能给对方造成的损失,在取得有关机构证明以后,允许延期履行、部分履行或者不履行合同,并根据情况可部分或全部免予承担违约责任。
</view>
</view>
<view class="flex justify-start items-start flex-col">
<view class="m-10">其他:</view>
<view class=" pl-20 flex-1 py-20">
本合同的全部内容由双方平等共同协商一致,共同起草制定,非一方事先拟定,不属于格式条款。本合同自双方签字盖章后生效(包括电子签字、盖章),按本合同内容地址、联系方式寄送的一切文书、函件送达与否,均为视为送达有法律效力,通知途径和本合同内联系方式或地址送达文件双方均予以验证。
</view>
</view>
<view class="flex justify-start items-start flex-col">
<view class="lb m-right-20">采购方补充条款:</view>
<view class="vl w-100p">
<u--textarea v-if="formData.signMethod === 0"
placeholder="请输入内容"
v-model="formData.supplementary"
></u--textarea>
</view>
</view>
</view>
<view class="card-title m-top-30">采购商信息</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">项目名称:</view>
<view class="vl flex-1">
<u--input
placeholder="请输入内容"
v-model="formData.projectName"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">项目地区:</view>
<view class="vl flex-1" @click="showProjectAddress">
<u--input
style="pointer-events:none"
readonly
suffixIcon="arrow-right"
placeholder="请输入内容"
v-model="projectRegion"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">项目地址:</view>
<view class="vl flex-1">
<u--input
placeholder="请输入内容"
v-model="formData.projectAddressDetail"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">{{ userInfo.accountType === 2 ? '公司信息' : '个人信息' }}:</view>
<view class="vl flex-1">
<u--input
placeholder="请输入内容"
v-model="formData.companyName"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">{{ userInfo.accountType === 2 ? '公司联系方式' : '个人联系方式' }}:</view>
<view class="vl flex-1">
<u--input
placeholder="请输入内容"
v-model="formData.companyMobile"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">联系人:</view>
<view class="vl flex-1" @click="openPicker">
<u--input
style="pointer-events:none"
readonly
placeholder="点击选择联系人"
v-model="formData.businessName"
suffixIcon="arrow-right"
></u--input>
</view>
</view>
<view class="group flex align-center m-top-30">
<view class="lb m-right-20">公司联系方式:</view>
<view class="vl flex-1">
<u--input
disabled
placeholder="请输入内容"
v-model="formData.businessMobile"
></u--input>
</view>
</view>
<!-- 提交按钮 -->
<u-button class="public-btn" text="提交" @click="submitAll" :disabled="disabled"/>
</view>
<u-calendar :show="show" mode="range" @confirm="confirmRange" color="#A92924" @close="show = false"></u-calendar>
<u-picker :show="showPicker" :columns="[contactList]" keyName="name"
@cancel="showPicker = false" @close="showPicker = false" closeOnClickOverlay
@confirm="confirmContact"></u-picker>
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
<AddressSelect ref="ProjectAddressSelect" @confirm="regionProjectConfirm"/>
<u-datetime-picker :show="isPickDate" v-model="deliveryTime" mode="date"
:minDate="minDate" @cancel="isPickDate = false"
@confirm="handConfirmDate"></u-datetime-picker>
<u-picker v-if="showGoodsPicker" :show="showGoodsPicker" :columns="[goodsList]" keyName="name"
@cancel="showGoodsPicker = false" @close="showGoodsPicker = false" closeOnClickOverlay
@confirm="selectGoods"/>
<u-picker v-if="showGoodsUnitPicker" :show="showGoodsUnitPicker"
:columns="[attributes.find(item => item.label === '单位').options]"
keyName="label"
@cancel="showGoodsUnitPicker = false" @close="showGoodsUnitPicker = false" closeOnClickOverlay
@confirm="selectAttr"/>
<u-picker v-if="showDeliverService" :show="showDeliverService"
:columns="[attributes.find(item => item.label === '交货服务').options]"
keyName="label"
@cancel="showDeliverService = false" @close="showDeliverService = false" closeOnClickOverlay
@confirm="selectDeliverService"/>
<u-picker v-if="showPricingForm" :show="showPricingForm"
:columns="[attributes.find(item => item.label === '计价形式').options]"
keyName="label"
@cancel="showPricingForm = false" @close="showPricingForm = false" closeOnClickOverlay
@confirm="selectPricingForm"/>
<u-picker v-if="showPricingPayBy" :show="showPricingPayBy"
:columns="[attributes.find(item => item.label === '装货、卸货费用承担').options]"
keyName="label"
@cancel="showPricingPayBy = false" @close="showPricingPayBy = false" closeOnClickOverlay
@confirm="selectPricingPayBy"/>
</view>
</template>
<script>
import uititle from '@/components/common/title'
import dayjs from 'dayjs'
import AddressSelect from "@/components/AddressSelect.vue";
import md5 from "js-md5";
export default {
components: {
AddressSelect,
uititle,
},
data() {
return {
formData: {
fillType: 0,
enquiryNo: dayjs().format('YYYYMMDD') + (Math.ceil(Math.random() * 10000)).toString(),
salesCode: '',
// extraAttributes: {},
// attributes: {},
multiFiles: [],
stealFactory: null,
invoice: true,
invoiceType: null,
taxRate: null,
invoiceOther: '',
writeInvoiceTime: 0,
taxType: null,
transportDocuments: [],
files: [],
otherTransportDocuments: '',
transportLimit: false,
otherTransportRequest: '',
tradeMethod: 1,
payMethod: 0,
advancePayRate: null,
reputationPayDay: null,
otherPayMethod: '',
offerType: 0,
answerStartTime: '',
answerEndTime: '',
earnestMoney: '',
signMethod: 0,
projectName: '',
province: '',
city: '',
area: '',
projectAddress: '',
businessName: '',
businessMobile: '',
companyName: '',
companyMobile: '',
contractAttachment: [],
supplementary: '',
addressRegion: {},
addressDetail: null,
projectAddressRegion: {},
projectAddressDetail: null,
procureNumber: null,
procureUnit: null,
otherCate: null,
},
hasRequire: false,
contactList: [],
productList: [],
goodsAttributes: [],
goodsList: [],
region: '',
projectRegion: '',
answerRange: '',
show: false,
showPicker: false,
isPickDate: false,
showGoodsPicker: false,
showGoodsUnitPicker: false,
productIdList: [],
files: [],
contractAttachment: [],
multiFiles: [],
clickedIndex: null,
deliveryTime: null,
minDate: Number(new Date()),
attributes: [],
showDeliverService: false,
showPricingForm: false,
showPricingPayBy: false,
disabled: false,
userInfo: null,
selectAll: false,
};
},
methods: {
handPriceDate() {
this.isPickDate = true
},
handConfirmDate({value}) {
this.formData.deliveryTime = dayjs(value).format('YYYY-MM-DD')
this.isPickDate = false
},
handTag(val) {
val.checked = !val.checked
},
handPtb(index) {
this.ptbIndex = index
},
handTtb(index) {
this.ttbIndex = index
},
doShowGoodsPicker(index) {
this.clickedIndex = index
this.showGoodsPicker = true
},
doShowGoodsUnitPicker(index) {
this.clickedIndex = index
this.showGoodsUnitPicker = true
},
doShowPricingForm(index) {
this.clickedIndex = index
this.showPricingForm = true
},
doShowPricingPayBy(index) {
this.clickedIndex = index
this.showPricingPayBy = true
},
doShowDeliverService(index) {
this.clickedIndex = index
this.showDeliverService = true
},
showAddress() {
this.$refs.AddressSelect.open(this.formData.addressRegion);
},
showProjectAddress() {
this.$refs.ProjectAddressSelect.open(this.formData.projectAddressRegion);
},
regionConfirm({province, city, area}) {
this.formData.addressRegion = {province, city, area}
this.region = `${province.name}${city.name}${area.name}`
},
regionProjectConfirm({province, city, area}) {
this.formData.projectAddressRegion = {province, city, area}
this.projectRegion = `${province.name}${city.name}${area.name}`
},
changeMultiGoods(item) {
const index = this.productIdList.indexOf(item._id)
if (index === -1 && this.productIdList.length === 5) return this.$message.error('最多只能选择5个产品')
if (index === -1) this.productIdList.push(item._id)
else this.productIdList.splice(index, 1)
},
async getGoodsList() {
const {rows} = await vk.callFunction({
url: 'client/enquiry/template/pub/getList',
pageSize: 500,
title: '请求中',
})
this.goodsList = rows
},
selectGoods({value}) {
this.productList[this.clickedIndex].model = []
this.productList[this.clickedIndex].name = value[0].name
this.productList[this.clickedIndex].goodsName = value[0].name
this.goodsAttributes = value[0].extraAttributes
this.goodsAttributes.forEach(attr => {
if (attr.label) this.productList[this.clickedIndex].model.push({
label: attr.label,
value: null,
values: attr.values,
})
})
this.showGoodsPicker = false
},
selectAttr({value}) {
this.productList[this.clickedIndex].procureUnit = value[0].value
this.showGoodsUnitPicker = false
},
selectDeliverService({value}) {
this.productList[this.clickedIndex].deliverService = value[0].value
this.showDeliverService = false
},
selectPricingForm({value}) {
this.productList[this.clickedIndex].pricingForm = value[0].value
this.showPricingForm = false
},
selectPricingPayBy({value}) {
this.productList[this.clickedIndex].loadPaidBy = value[0].value
this.showPricingPayBy = false
},
async getAttr() {
vk.callFunction({
url: 'client/enquiry/attributes/pub/getList',
title: '请求中...',
data: {},
success: (data) => {
this.attributes = data.rows
}
});
},
addProduct() {
this.productList.push({
goodsId: null,
name: null,
model: [],
otherData: null,
materialQuality: null,
singleLength: null,
singleLengthUnit: null,
deliverService: null,
standard: null,
pricingForm: null,
deliveryTime: null,
len: null,
extraAttributes: {},
attributes: {},
// addressRegion: [],
// addressDetail: null
})
},
removeProduct() {
if (this.productList.length > 1) {
this.productList.splice(this.productList.length - 1, 1)
}
},
afterRead({file}, field) {
for (let i = 0; i < file.length; i++) {
const item = file[i]
const suffix = item.name.split('.').pop()
// if (field === 'files' || field === 'contractAttachment') {
// if (item.type !== 'application/pdf') {
// uni.showToast({
// title: '请上传PDF文件',
// icon: 'none'
// })
// return
// }
// }
uniCloud.uploadFile({
filePath: item.url,
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
success: ({fileID}) => {
uniCloud.getTempFileURL({
fileList: [fileID]
}).then(res => {
this[field].push({url: res.fileList[0].tempFileURL})
this.formData[field].push(res.fileList[0].tempFileURL)
})
}
})
}
},
deletePic({index}, field) {
this[field].splice(index, 1)
this.formData[field].splice(index, 1)
},
confirmRange(val) {
this.formData.answerStartTime = val[0]
this.formData.answerEndTime = val[val.length - 1]
this.answerRange = `${this.formData.answerStartTime}~${this.formData.answerEndTime}`
this.show = false
},
confirmContact({value}) {
this.formData.businessName = value[0].name
this.formData.businessMobile = value[0].phone
this.showPicker = false
},
async getContactList() {
const {rows} = await vk.callFunction({
url: 'client/businessContact/kh/getList',
})
this.contactList = rows
if (!this.contactList.length) {
return uni.showModal({
title: '提示',
content: '您还未添加联系人,请先添加联系人',
showCancel: false,
success: res => {
if (res.confirm) {
uni.setStorageSync('user_tab', 8)
uni.switchTab({url: '/pages/user/user'})
}
}
})
}
},
formatter(val) {
this.formData.earnestMoney = parseFloat(val).toFixed(2)
},
async submitAll() {
const stealFactory = [], materialQuality = []
if (this.formData.fillType === 1) {
if (this.productIdList.length === 0 && !this.formData.otherCate) return this.$message({
message: '请选择商品或输入其他分类',
type: 'error'
})
if (this.formData.files.length === 0) return this.$message({
message: '请上传附件',
type: 'error'
})
this.productList = []
this.goodsList.forEach(goods => {
if (this.productIdList.includes(goods._id)) {
goods.goodsName = goods.name
goods.procureNumber = this.formData.procureNumber
goods.procureUnit = this.formData.procureUnit
this.productList.push(goods)
}
})
if (this.formData.otherCate) this.productList.push({
goodsName: this.formData.otherCate,
procureNumber: this.formData.procureNumber,
procureUnit: this.formData.procureUnit,
})
// this.goodsList.forEach(goods => {
// if (this.productIdList.includes(goods._id)) {
// goods.goodsName = goods.name
// this.productList.push(goods)
// }
// })
} else {
for (let i = 0; i < this.productList.length; i++) {
if (!this.productList[i].goodsName) return this.$message({message: '请选择商品', type: 'error'})
this.productList[i].model.forEach(model => {
if (['钢厂', '品牌厂家'].includes(model.label)) {
stealFactory.push(model.value)
}
if (['材质'].includes(model.label)) materialQuality.push(model.value)
})
}
}
// if (!this.formData.stealFactory) return this.$message({message: '请选择钢厂', type: 'error'})
if (!this.formData.projectName) return this.$message({message: '请输入项目名称', type: 'error'})
if (JSON.stringify(this.formData.projectAddressRegion) === '{}') return this.$message({
message: '请选择项目地址',
type: 'error'
})
if (JSON.stringify(this.formData.addressRegion) === '{}') return this.$message({
message: '请选择交货地点',
type: 'error'
})
if (!this.formData.addressDetail) return this.$message({
message: '请完善交货地点',
type: 'error'
})
if (!this.formData.answerEndTime || !this.formData.answerStartTime) return this.$message({
message: '请选择报价时限',
type: 'error'
})
if (dayjs(this.formData.answerEndTime).isBefore(this.formData.answerStartTime)) return this.$message({
message: '报价结束时限不能早于开始时间',
type: 'error'
})
if (this.formData.payMethod === 0 && !this.formData.advancePayRate) return this.$message({
message: '请填写预付比例',
type: 'error'
})
if (this.formData.payMethod === 3 && !this.formData.reputationPayDay) return this.$message({
message: '请填写回款日期',
type: 'error'
})
if (this.formData.signMethod === 2 && (!this.formData.contractAttachment || this.formData.contractAttachment.length === 0)) {
return this.$message({
message: '请上传合同附件',
type: 'error'
})
}
if (!this.formData.businessName) {
return this.$message({
message: '请选择业务联系人',
type: 'error'
})
}
if (this.formData.invoiceOther) {
this.formData.taxType = ''
this.formData.invoiceType = ''
this.formData.taxRate = ''
}
this.formData.productList = this.productList
this.disabled = true
let title = this.formData.productList.map(item => `${item.goodsName}`).join("/")
title += ` -${this.formData.projectName}`
vk.callFunction({
url: 'client/enquiry/sheet/kh/add',
data: {
...this.formData, ...{
title,
nameList: this.formData.productList.map(item => item.goodsName),
material: materialQuality,
stealFactory
}
},
title: '请求中...',
success: (data) => {
this.disabled = false
this.$message({
message: "您的信息已经提交,等待管理员审核,请您耐心等待!",
type: 'success'
})
uni.navigateBack()
}
})
},
changeSelectAll() {
this.selectAll = !this.selectAll
if (this.selectAll) this.formData.transportDocuments = ['合格证', '检测报告', '销售清单', '磅重']
else this.formData.transportDocuments = []
},
onChangeSelectDocument(e) {
this.selectAll = e.length === 4
},
openPicker() {
if (!this.contactList.length) {
return uni.showModal({
title: '提示',
content: '您还未添加联系人,是否跳转添加联系人',
success: res => {
if (res.confirm) {
uni.setStorageSync('user_tab', 8)
uni.switchTab({url: '/pages/user/user'})
}
}
})
}
this.showPicker = true
}
},
async onLoad() {
await this.getGoodsList()
this.userInfo = vk.getStorageSync('uni_id_user_info')
if (this.userInfo.accountType === 2) {
this.formData.companyName = this.userInfo.company.companyName
} else {
this.formData.companyName = this.userInfo.person.personName
}
this.formData.companyMobile = this.userInfo.businessCard.companyMobile
// this.formData.companyName = this.userInfo.accountType === 2 ? this.userInfo.company?.companyName : this.userInfo.person?.personName
// this.formData.companyMobile = this.userInfo.accountType === 2 ? this.userInfo.company?.mobile : this.userInfo.person?.mobile
this.addProduct()
await this.getAttr()
await this.getContactList()
}
}
</script>
<style lang="scss">
page {
background: #ffffff;
}
.layout-header {
margin: 0 30rpx;
padding: 30rpx 0;
border-bottom: 1px solid rgba(169, 41, 36, 0.34);
.big {
font-size: 32rpx;
line-height: 48rpx;
color: #000000;
text-align: center;
}
.small {
font-size: 24rpx;
line-height: 40rpx;
color: #9a9a9a;
text-align: center;
}
.ptb {
margin-right: 20rpx;
padding: 6rpx 14rpx;
font-size: 24rpx;
line-height: 40rpx;
color: #333333;
border: 1px solid #f2f2f2;
&:last-child {
margin-right: 0;
}
}
.active {
color: #ffffff;
border-color: #A92924;
background: #A92924;
}
}
.public-btn {
width: 95%;
margin-top: 60rpx;
color: #ffffff;
background: #A92924;
}
.layout-publish {
padding: 20rpx 30rpx;
}
.tag-title {
font-size: 26rpx;
line-height: 40rpx;
color: #000000;
.limit {
font-size: 24rpx;
color: #999999;
}
}
.tag-box {
padding: 20rpx 0;
.item {
padding: 6rpx 10rpx;
font-size: 24rpx;
line-height: 32rpx;
color: #555555;
}
.active {
color: #A92924;
}
}
.lb, .fix {
position: relative;
font-size: 26rpx;
line-height: 40rpx;
color: #666666;
}
.lbx {
font-size: 24rpx;
color: #999999;
}
.download {
padding: 8rpx 20rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #A92924;
border: 1px solid #A92924;
}
.need::before {
position: absolute;
left: -16rpx;
top: 50%;
z-index: 9;
margin-top: -12rpx;
content: '*';
color: #A92924;
font-size: 32rpx;
line-height: 1;
}
.card-title {
position: relative;
padding-left: 20rpx;
font-size: 28rpx;
font-weight: 600;
line-height: 48rpx;
color: #A92924;
&:before {
position: absolute;
left: 0;
top: 50%;
z-index: 9;
margin-top: -14rpx;
content: '';
width: 6rpx;
height: 28rpx;
background: #A92924;
}
}
.template-tab {
.ttb {
margin-right: 30rpx;
padding: 6rpx 20rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #333333;
border: 1px solid #f2f2f2;
}
.active {
color: #A92924;
border-color: #A92924;
}
}
.template-content {
padding: 30rpx 0;
}
.goods-item {
padding: 18rpx 0;
}
.add-btn {
margin-left: 0;
width: 180rpx;
height: 60rpx;
color: #A92924;
border-color: #A92924;
}
</style>