jjx-web/pages/enquiry/quote.vue

<template>
	<view>
		<top-bar></top-bar>
		<common-header></common-header>
		<category-bar></category-bar>

		<view class="page-nav">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>
					<navigator style="display: inline-block;" url="/pages/enquiry/list">询价单</navigator>
				</el-breadcrumb-item>
				<el-breadcrumb-item>填写报价信息</el-breadcrumb-item>
			</el-breadcrumb>
		</view>

		<view class="page-main">

			<!-- 产品列表 -->
			<view class="quote" v-for="(item,index) in sheet.productList" :key="index">
				<el-descriptions class="description" :title="'采购商品' + (index + 1)" :column="3"
					size="medium" border >
					<el-descriptions-item label="商品">
						{{item.name}}
					</el-descriptions-item>
					<el-descriptions-item v-for="(attr, aindex) in item.extraAttributes" :label="attr.keyName"
						:key="aindex">
						{{attr.keyValue}}
					</el-descriptions-item>
					<el-descriptions-item label="品牌厂家">
						{{item.brand}}
					</el-descriptions-item>
					
					<el-descriptions-item label="材质">
						{{item.materialQuality}}
					</el-descriptions-item>
					<el-descriptions-item label="单件长度">
						{{item.singleLength}}
					</el-descriptions-item>
					<el-descriptions-item label="产品标准">
						{{item.productStandard}}
					</el-descriptions-item>
					<el-descriptions-item label="计价形式">
						{{item.pricingForm}}
					</el-descriptions-item>
					<el-descriptions-item label="加工标准">
						{{item.processStandard}}
					</el-descriptions-item>
					<el-descriptions-item label="交货服务">
						{{item.deliveryService}}
					</el-descriptions-item>
					<el-descriptions-item label="交货时限">
						{{item.deliveryTime}}
					</el-descriptions-item>
					<el-descriptions-item label="采购数量">
						{{item.procureNumber}}{{item.procureUnit}}
					</el-descriptions-item>
					<el-descriptions-item label="交货地点">
						{{item.address.region.province.name + "-" + item.address.region.city.name + "-" + item.address.region.area.name}}
					</el-descriptions-item>
				</el-descriptions>
				<view class="quote-form">
					<el-form label-width="80px">
						 <el-form-item label="报价单价">
						    <vk-data-input-money v-model="item.unitPrice" placeholder="请输入单价" rightText="元"></vk-data-input-money>
						  </el-form-item>
						  <el-form-item label="小计金额">
						     <vk-data-input-money :readonly="true" :value="item.unitPrice * item.procureNumber" placeholder=""  rightText="元"></vk-data-input-money>
						   </el-form-item>
					</el-form>
				</view>
			</view>
			
			
			<el-form label-width="120px" :inline="true">
				 <el-form-item label="报价总价">
				    <vk-data-input-money :readonly="true" :value="totalPrice" placeholder="请输入单价" rightText="元"></vk-data-input-money>
				  </el-form-item>
				  <el-form-item label="人民币大写">
					  <el-input :readonly="true" :value="totalPriceStr" placeholder="请输入内容"></el-input>
				   </el-form-item>
			</el-form>
			
			<view class="form-footer">
				<el-button type="primary" @click="submit">提交报价单</el-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enquiryId: undefined,
				// productList: [],
				sheetTitle: '',
				sheet: {
					productList: []
				},
				// totalPriceStr: ''
			};
		},
		onLoad(options = {}) {
			const {
				enquiryId
			} = options
			if (!enquiryId) {
				vk.navigateTo('/pages/enquiry/list');
				return
			}

			this.enquiryId = enquiryId

			this.getEnquiryDetail()
		},
		computed: {
			totalPrice() {
				let price = 0
				this.sheet.productList.forEach(item => {
					price += item.unitPrice * item.procureNumber
				})
				
				return price
			},
			totalPriceStr() {
				if(this.totalPrice == 0) {
					return "零元"
				}
				return vk.myfn.convertCurrency(this.totalPrice / 100)
			}
		},
		methods: {
			// 提交报价单
			async submit() {
				
				const data = await vk.userCenter.getCurrentUserInfo();
				const {userInfo} = data
				if(userInfo.quoteTimes > 3) {
					
				}
				
				this.$confirm(`今日报价次数${userInfo.quoteTimes || 0}, 是否继续?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning',
				  center: true
				}).then(res => {
					vk.callFunction({
						url: 'client/enquiry/quote/kh/addQuote',
						title: '请求中...',
						data: {
							sheet: this.sheet,
							totalPrice: this.totalPrice
						},
						success: (data) => {
								this.$message({
									message: "报价成功",
									type: 'success'
								})
						}
					});
				})
				
				

			},
			/**
			 * 获取询价单详情
			 */
			getEnquiryDetail() {
				vk.callFunction({
					url: 'client/enquiry/sheet/pub/getDetail',
					title: '请求中...',
					data: {
						_id: this.enquiryId
					},
					success: (res) => {
						
						 res.data.productList.forEach(item => {
							item.unitPrice = 0
							const keys = Object.keys(item.extraAttributes)
							keys.forEach(citem => {
								item.extraAttributes[citem] = JSON.parse(item.extraAttributes[
									citem])
							})
						})


						this.sheet = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-main {
		width: 1200px;
		margin: 20px auto;
		background-color: #FFFFFF;
		padding: 20px;
	}

	.description {
		margin-bottom: 40px;
		width: 800px;
	}
	
	.quote{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.quote-form {
		width: 260px;
	}
	
	.form-footer {
		height: 40px;
		line-height: 40px;
		background: #fff;
		padding-top: 0;
		text-align: center;
		display: block;
	}
</style>