【前端】云工厂的纸掌柜app
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.

606 lines
16 KiB

<template>
<view class="quotation-details">
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
<view class="submit-title">报价详情</view>
<view slot="left"></view>
<view slot="right" class="edit-price" v-if="upDataObj.replyStatus !== 30102" @click="editPrice()">修改报价</view>
</uni-nav-bar>
</view>
<view class="submit-main">
<view>
<text class="submit-main-title">交货要求</text>
<text class="" :class="upDataObj.replyStatus === 30102 ? 'price-tips-gq' : 'price-tips'">{{ upDataObj.replyStatus | replyFilter }}</text>
</view>
<view>
<text class="submit-main-subTitle">询价客户:</text>
<text class="submit-main-subContant">{{ upDataObj.belongEnterpriseName }}</text>
</view>
<view>
<text class="submit-main-subTitle">交货区域:</text>
<text class="submit-main-subContant">{{ upDataObj.deliveryArea }}</text>
</view>
<view>
<text class="submit-main-subTitle">交货时间:</text>
<text class="submit-main-subContant">{{ upDataObj.deliveryDay }}</text>
</view>
</view>
<uGap></uGap>
<view class="submit-contant" v-for="(items, index) in upDataObj.itemList" :key="index">
<view class="submit-contant-head">
<view class="submit-contant-title">{{ items.brandName }}|{{ items.gramWeight }}|{{ items.length }}*{{ items.width }}|{{ items.quantity }}</view>
</view>
<view class="submit-contant-body">
<view class="">
<text class="submit-contant-body-title">重量()</text>
<text class="submit-contant-body-subtitle">{{ items.wight }}</text>
</view>
<view>
<text class="submit-contant-body-title">单价(/)</text>
<text class="submit-contant-body-subtitle">{{ items.unitFee }}</text>
</view>
<view>
<text class="submit-contant-body-title">小计()</text>
<text class="submit-contant-body-subtitle">{{ items.totalPrice }}</text>
</view>
<view class="submit-contant-body-input">
<uni-easyinput :disabled="true" maxlength="100" class="submit-contant-body-inputClass" v-model="value" placeholder="请输入内容"></uni-easyinput>
</view>
</view>
</view>
<view class="submit-contant-order">
<view class="">
<text class="submit-contant-order-title">其他费用:</text>
<text class="submit-contant-order-subtitle">¥ {{ upDataObj.otherFee }}</text>
</view>
<view class="">
<text class="submit-contant-order-title">合计:</text>
<text class="submit-contant-order-money">¥ {{ upDataObj.totalAllPrice }}</text>
</view>
</view>
<uGap></uGap>
<view class="submit-contant-time">
<view class="">
<text class="submit-contant-time-title">有效时间:</text>
<text class="submit-contant-time-title">{{ upDataObj.enquiryValidTime }}</text>
</view>
</view>
<uGap></uGap>
<view class="submit-contant-remark">
<view class="submit-contant-remark-title">
<text>报价备注:</text>
<text>29号5点前能送达。</text>
</view>
</view>
<view class="tips"><text>注:禁止偷克重、抵纸换纸,否则将被平台严厉处罚!包括但不限于账号禁用。</text></view>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
import qnHeader from '@/components/qn-header/qn-header.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { enquiryReplyDetail } from '@/apis/trade.js'
export default {
components: {
qnHeader,
uGap
},
filters: {
replyFilter(value) {
var abs = ''
if (value) {
// 30128 待报价 30130 已报价 30139 转化订单 30102 已失效
switch (value) {
case 30128:
abs = '待报价'
break
case 30130:
abs = '已报价'
break
case 30139:
abs = '转化订单'
break
case 30102:
abs = '已失效'
break
default:
break
}
}
}
},
data() {
return {
value: '',
visible: true,
title: 'picker-view',
upDataObj: {
belongEnterpriseName: '东莞市隆兴纸业有限公司',
deliveryArea: '广东省/广州市/天河区',
deliveryDay: '2021/12/29 12:30',
enquiryValidTime: [12, 11, 10],
itemList: []
}
}
},
onLoad(Option) {
this.getDetail(Option.id)
},
methods: {
back,
// 获取详情
getDetail(id) {
enquiryReplyDetail(id)
.then((res) => {
if (res) {
this.upDataObj = res
var timeb = this.upDataObj.enquiryValidTime.split(' ')
var timeabs = timeb[1].split(':')
this.$set(this.upDataObj, 'enquiryValidTimeSplit', timeabs)
this.$set(this.upDataObj, 'otherFee', 0)
this.$set(this.upDataObj, 'totalAllPrice', 0)
this.priceFree()
}
})
.catch((err) => {
reject(err)
})
},
// 商品操作按钮
commodityModify(item) {
console.log(111)
this.$refs.popup.open('bottom')
},
// 单价操作按钮
priceModify() {
this.$refs.popupPrice.open('bottom')
},
// 事件设置
resetTime() {
this.$refs.popupTime.open('bottom')
},
// 事件选择change事件
bindChange(e) {
console.log(e.detail.value)
},
priceFree() {
for (let i = 0; i < this.upDataObj.itemList.length; i++) {
var totalAllPrice = parseFloat(this.upDataObj.totalAllPrice) + parseFloat(this.upDataObj.itemList[i].totalPrice)
this.upDataObj.totalAllPrice = totalAllPrice.toFixed(2)
var otherFee = parseFloat(this.upDataObj.otherFee) + parseFloat(this.upDataObj.itemList[i].otherFee)
this.upDataObj.otherFee = otherFee.toFixed(2)
}
},
close() {
this.$refs.popup.close()
this.$refs.popupPrice.close()
},
// 纸张选择下拉change事件
onchange(e) {
console.log(e)
this.pickerValue = e.detail.value
},
// 时间设置取消
pickerCancel() {
this.$refs.popupTime.close()
},
// 时间设置确认
pickerSure() {
this.$refs.popupTime.close()
},
// 修改报价按钮
editPrice() {
var params = {
title: '修改报价',
id: this.upDataObj.id
}
go2('submit-quotation', params)
}
}
}
</script>
<style lang="scss">
.picker-view {
width: 750rpx;
height: 600rpx;
margin-top: 20rpx;
}
.item {
height: 50rpx;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 30rpx;
}
.quotation-details {
.submit-title {
width: 100%;
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.submit-main {
width: 750rpx;
height: 260rpx;
padding: 24rpx 0rpx 0rpx 32rpx;
line-height: 52rpx;
background: #ffffff;
.submit-main-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.submit-main-subTitle {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.submit-main-subContant {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
}
.submit-deadline {
width: 750rpx;
height: 75rpx;
background: #f4f9fc;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12);
display: flex;
justify-content: center;
.submit-text {
font-family: PingFangSC-Medium;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0;
font-weight: 500;
margin-top: 22rpx;
width: 130rpx;
}
.submit-time {
width: 40rpx;
height: 40rpx;
background: #ee0a24;
border-radius: 8rpx;
margin-top: 20rpx;
text-align: center;
}
.submit-time-text {
font-family: PingFangSC-Semibold;
font-size: 24rpx;
color: #ffffff;
text-align: center;
line-height: 32rpx;
font-weight: 600;
}
.sbumit-colon {
width: 24rpx;
height: 32rpx;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #ee0a24;
text-align: center;
line-height: 32rpx;
font-weight: 400;
margin-top: 20rpx;
}
}
.submit-contant {
background-color: #ffffff;
// height: 368rpx;
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
padding-bottom: 20rpx;
.submit-contant-head {
line-height: 90rpx;
width: 750rpx;
height: 90rpx;
border-bottom: 2rpx dashed #d8d8d8;
display: flex;
justify-content: space-between;
}
.submit-contant-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: rgba(0, 0, 0, 0.75);
letter-spacing: 0;
text-align: left;
font-weight: 600;
padding: 0rpx 0rpx 0rpx 32rpx;
}
.submit-contant-body {
line-height: 68rpx;
padding-left: 32rpx;
.submit-contant-body-title {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
}
.submit-contant-body-subtitle {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
float: right;
margin-right: 32rpx;
}
.submit-contant-body-input {
margin-right: 32rpx;
}
.submit-contant-body-inputClass {
background-color: #f7f8fa;
}
}
}
.submit-contant-order {
width: 750rpx;
height: 90rpx;
line-height: 90rpx;
background: #ffffff;
display: flex;
padding-left: 32rpx;
padding-right: 32rpx;
justify-content: space-between;
.submit-contant-order-title {
width: 140rpx;
height: 40rpx;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
.submit-contant-order-subtitle {
width: 101rpx;
height: 40rpx;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
.submit-contant-order-money {
width: 172rpx;
height: 42rpx;
font-family: PingFangSC-Semibold;
font-size: 40rpx;
color: #f5222d;
letter-spacing: 0;
line-height: 42rpx;
font-weight: 600;
}
}
.submit-contant-time {
width: 750rpx;
height: 88rpx;
background: #ffffff;
line-height: 88rpx;
display: flex;
padding-left: 32rpx;
padding-right: 32rpx;
justify-content: space-between;
.submit-contant-time-title {
width: 230rpx;
height: 40rpx;
font-size: 28rpx;
color: #000000;
letter-spacing: 0;
font-weight: 400;
}
.submit-contant-time-subtitle {
width: 56rpx;
height: 40rpx;
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: right;
font-weight: 500;
cursor: pointer;
}
}
.submit-contant-remark {
width: 750rpx;
height: 88rpx;
background: #ffffff;
.submit-contant-remark-title {
font-family: PingFangSC-Regular;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 400;
padding: 28rpx 0rpx 0rpx 32rpx;
}
.submit-contant-remark-input {
background: #f7f8fa;
border-radius: 20rpx;
margin: 10rpx 32rpx 32rpx 32rpx;
width: 686rpx;
}
}
.submit-btnBg {
width: 750rpx;
height: 120rx;
background: #ffffff;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12);
padding: 12rpx 32rpx 12rpx 32rpx;
}
.submit-btn {
width: 686rpx;
height: 96rpx;
background: #007aff;
border-radius: 10rpx;
}
.submit-image {
width: 24.38rpx;
height: 20.38rpx;
margin-right: 32rpx;
cursor: pointer;
}
.submit-image-price {
width: 24.38rpx;
height: 20.38rpx;
margin-left: 14rpx;
cursor: pointer;
}
.submit-popup {
width: 750rpx;
height: 960rpx;
background: #ffffff;
border-top-right-radius: 2rpx;
border-top-left-radius: 2rpx;
padding: 20rpx 32rpx 0rpx 32rpx;
// line-height: 124rpx;
.submit-popup-input {
background-color: #f5f5f5;
}
.submit-popup-close {
display: flex;
justify-content: space-between;
}
.submit-popup-close-image {
width: 24.38rpx;
height: 20.38rpx;
cursor: pointer;
}
.submit-popup-title {
font-size: 30rpx;
color: rgba(0, 0, 0, 0.85);
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
.submit-popup-specifications {
width: 320rpx;
}
.submit-popup-x {
font-size: 32rpx;
color: rgba(0, 0, 0, 0.85);
font-weight: 400;
}
.submit-line {
border-bottom: 2rpx solid #d8d8d8;
padding-bottom: 32rpx;
height: 194rpx;
line-height: 72rpx;
}
.submit-number-box {
margin-top: 24rpx;
}
.submit-number-text {
font-size: 24rpx;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
.submit-number-line {
line-height: 40rpx;
}
.submit-number-btn {
position: absolute;
bottom: 20rpx;
}
.submit-price {
line-height: 72rpx;
}
.submit-price-total {
display: flex;
justify-content: flex-end;
margin-top: 20rpx;
}
.submit-price-total-text {
font-size: 40rpx;
color: #f5222d;
letter-spacing: 0;
line-height: 42rpx;
font-weight: 600;
}
.submit-price-text {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.85);
text-align: right;
font-weight: 400;
line-height: 40rpx;
}
.submit-price-subTitle {
margin-left: 20rpx;
}
}
.submit-check-time {
background-color: #ffffff;
padding: 28rpx 32rpx 0px 28rpx;
.submit-check-flex {
display: flex;
justify-content: space-between;
}
.submit-check-title {
font-size: 32rpx;
color: #323233;
text-align: center;
line-height: 44rpx;
font-weight: 500;
}
.submit-check-cancel {
font-size: 28rpx;
color: #969799;
line-height: 40rpx;
font-weight: 400;
cursor: pointer;
}
.submit-check-sure {
font-size: 28rpx;
color: #007aff;
line-height: 40rpx;
font-weight: 400;
cursor: pointer;
}
.submit-check-text {
font-size: 36rpx;
color: #323233;
line-height: 48rpx;
font-weight: 500;
}
}
.tips {
font-size: 24rpx;
color: #f5222d;
font-weight: 400;
padding: 32rpx;
line-height: 42rpx;
}
.edit-price {
font-size: 28rpx;
color: #007aff;
text-align: right;
line-height: 40prx;
font-weight: 500;
}
.price-tips {
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
font-weight: 500;
float: right;
padding-right: 32rpx;
}
.price-tips-gq {
font-size: 30rpx;
color: #888888;
letter-spacing: 0;
font-weight: 500;
float: right;
padding-right: 32rpx;
}
}
</style>