完成同步报价页面

src/pages/order/editQuotation.vue

 <template>
 	<view class="app-container">
+		<view class="details">
+			<view class="">
+				<u-button type="primary" size="mini" style="margin: 0;" @tap="reQuote">
+					重新报价
+				</u-button>
+				<u-button type="primary" size="mini" style="margin: 0 0 0 20rpx; " @tap="downXLSX">
+					下载xlsx
+				</u-button>
+			</view>
+			<text class="quotation-details" @tap="show = true">报价详情</text>
+		</view>
+		<view style="display: flex; justify-content: space-between; margin-top: 20rpx;">
+			<h4>总金额：￥{{ totlePirce }}</h4>
+			<h4>含税总金额：￥{{ taxTotlePirce }}</h4>
+		</view>
+		<view class="content">
+			<view v-for="(item, index) in quotationData?.items" class="item">
+				<h4>{{ item.goodsName }}</h4>
+				<view
+					style="display: flex; flex-direction: row; align-items: center; margin-bottom: 10rpx;"
+				>
+					<text>重新设置单价：</text>
+					<u-input
+						v-model="item.price"
+						type="number"
+						height="50"
+						placeholder="请输入单价"
+						style="width: 200rpx;"
+						@input="priceInput($event, index)"
+					/>
+				</view>
+				<view style="margin-bottom: 10rpx; display: flex; justify-content: space-between;">
+					<view class="">
+						<view style="margin-bottom: 10rpx;">
+							当前金额：￥{{ item.totalPrice.toFixed(2) }}
+						</view>
+						<view>当前含税金额：￥{{ item.totalPriceTex.toFixed(2) }}</view>
+					</view>
+					<u-number-box
+						v-model="item.number"
+						:input-width="60"
+						:input-height="30"
+						:min="1"
+						:index="index"
+						@change="valChange"
+					></u-number-box>
+				</view>
+				<view style="margin-bottom: 10rpx;">
+					商品详情：{{ item.remarks === '[]' ? '无' : item.remarks }}
+				</view>
+				<u-line color="#f0f0f0" />
+			</view>
+		</view>
+	</view>
+	<u-popup v-model="show" mode="center" closeable width="80%" height="70%">
+		<h3 style="padding: 30rpx; text-align: center;">报价详情</h3>
 		<u-cell-group>
 			<block v-for="(item, index) in quotationList" :key="index">
 				<u-cell-item
@@ -10,49 +66,163 @@
 				></u-cell-item>
 			</block>
 		</u-cell-group>
-	</view>
+	</u-popup>
+
+	<u-modal
+		v-model="showModel"
+		:content="content"
+		@confirm="modelConfirm"
+		@cancel="modelCancel"
+		showCancelButton
+	></u-modal>
 </template>
 
 <script setup lang="ts">
 import { onLoad } from '@dcloudio/uni-app';
-import { ref } from 'vue';
-import { quotationInitAgain } from '@/api/cart';
+import { ref, computed } from 'vue';
+import { quotationInitAgain, fillQuotation } from '@/api/cart';
+import { getTax } from '@/api/index';
+import config from '@/utils/config';
 
+let baseUrl = config.baseUrl;
+let orderId = ref();
+let quotationData = ref();
+let quotationList = ref();
+let tax = ref();
+let content = ref('确认重新报价？');
+let show = ref(false);
+let showModel = ref(false);
 onLoad((options: any) => {
 	orderId.value = options.orderId;
+	getTax().then((res: any) => {
+		if (res.data.code === 200) {
+			tax.value = Number(res.data.data.mall_tax_rate) * 0.01;
+		}
+	});
 	quotationInitAgain({ orderId: orderId.value }).then((res: any) => {
 		if (res.data.code === 200) {
 			quotationData.value = res.data.data;
+			let data = quotationData.value.quotation;
 			quotationList.value = [
-				{ title: '发货人', value: quotationData.value.quotation.attend },
-				{ title: '发货联系电话', value: quotationData.value.quotation.tel },
-				{ title: '发货email', value: quotationData.value.quotation.email },
-				{ title: '发货地址', value: quotationData.value.quotation.addr },
-				{ title: '收货公司名称', value: quotationData.value.quotation.toCust },
-				{ title: '收货人', value: quotationData.value.quotation.quotationAttend },
-				{ title: '收货email', value: quotationData.value.quotation.quotationEmail },
-				{ title: '收货联系电话', value: quotationData.value.quotation.quotationTel },
-				{ title: '交货日期', value: quotationData.value.quotation.deliveryDate },
-				{ title: '收货地址', value: quotationData.value.quotation.deliveryAddr },
-				{ title: '订单号', value: quotationData.value.quotation.noOrder },
-				{ title: '付款方式', value: quotationData.value.quotation.pay },
-				{ title: '保修', value: quotationData.value.quotation.guarantee },
-				{ title: '备注', value: quotationData.value.quotation.remarks },
+				{ title: '发货人', value: data.attend },
+				{ title: '发货联系电话', value: data.tel },
+				{ title: '发货email', value: data.email },
+				{ title: '发货地址', value: data.addr },
+				{ title: '收货公司名称', value: data.toCust },
+				{ title: '收货人', value: data.quotationAttend },
+				{ title: '收货email', value: data.quotationEmail },
+				{ title: '收货联系电话', value: data.quotationTel },
+				{ title: '交货日期', value: data.deliveryDate },
+				{ title: '收货地址', value: data.deliveryAddr },
+				{ title: '订单号', value: data.noOrder },
+				{ title: '付款方式', value: data.pay },
+				{ title: '保修', value: data.guarantee },
+				{ title: '备注', value: data.remarks },
 			];
-			console.log(quotationData.value);
-			console.log(quotationList.value);
 		}
 	});
 });
 
-let orderId = ref();
-let quotationData = ref();
-let quotationList = ref();
+// 总价格
+let totlePirce: any = computed(() => {
+	let totlePic = 0;
+	if (quotationData.value) {
+		quotationData.value.items.map((item: any) => {
+			totlePic += Number(item.totalPrice);
+		});
+	}
+	return totlePic.toFixed(2);
+});
+
+// 含税总价格
+let taxTotlePirce = computed(() => {
+	let taxTotlePic = Number(totlePirce.value) + Number(totlePirce.value) * tax.value;
+	return Number(taxTotlePic).toFixed(2);
+});
+
+let reQuote = () => {
+	content.value = '确认重新报价？';
+	showModel.value = true;
+};
+
+let downXLSX = () => {
+	content.value = '如要获取最新xlsx，请点击取消，重新报价后下载';
+	showModel.value = true;
+};
+
+// 重新报价
+let modelConfirm = () => {
+	if (content.value === '确认重新报价？') {
+		fillQuotation(quotationData.value).then((res: any) => {
+			if (res.data.code === 200) {
+				showModel.value = false;
+			}
+		});
+	} else {
+		uni.downloadFile({
+			url: baseUrl + '/wx/quotation/download?orderId=' + orderId.value,
+			header: {
+				Authorization: uni.getStorageSync('token'),
+				'Content-Type': 'application/octet-stream;charset=UTF-8',
+			},
+			success: (res: any) => {
+				let downloadElement = document.createElement('a');
+				downloadElement.href = res.tempFilePath;
+				downloadElement.download = orderId.value + '.xlsx'; //下载后文件名
+				document.body.appendChild(downloadElement);
+				downloadElement.click(); //点击下载
+				document.body.removeChild(downloadElement); //下载完成移除元素
+				window.URL.revokeObjectURL(res.tempFilePath); //释放掉blob对象
+			},
+		});
+	}
+};
+
+let modelCancel = () => {
+	showModel.value = false;
+};
+
+// 数量变化处理
+let valChange = (val: any) => {
+	quotationData.value.items[val.index].number = val.value;
+
+	quotationData.value.items[val.index].totalPrice =
+		quotationData.value.items[val.index].number * quotationData.value.items[val.index].price;
+
+	quotationData.value.items[val.index].totalPriceTex =
+		quotationData.value.items[val.index].totalPrice * tax.value +
+		quotationData.value.items[val.index].totalPrice;
+};
+
+// 单价变化处理
+let priceInput = (val: any, index: number) => {
+	quotationData.value.items[index].price = val;
+
+	quotationData.value.items[index].totalPrice =
+		Number(quotationData.value.items[index].number) * val;
+
+	quotationData.value.items[index].totalPriceTex =
+		quotationData.value.items[index].totalPrice * tax.value +
+		quotationData.value.items[index].totalPrice;
+};
 </script>
 
 <style lang="scss" scoped>
 .app-container {
 	background-color: #fff;
 	padding: 20rpx;
+	.details {
+		display: flex;
+		justify-content: space-between;
+	}
+	.quotation-details:hover {
+		color: #2979ff;
+	}
+	.content {
+		margin-top: 30rpx;
+		.item {
+			margin-top: 30rpx;
+		}
+	}
 }
 </style>

src/pages/order/quotation.vue

@@ -215,7 +215,7 @@ let modelConfirm = () => {
 			document.body.removeChild(downloadElement); //下载完成移除元素
 			window.URL.revokeObjectURL(res.tempFilePath); //释放掉blob对象
 			uni.redirectTo({
-				url: '../index/index'
+				url: './editQuotation?orderId=' + orderId.value
 			})
 		}
 	})
@@ -224,7 +224,7 @@ let modelConfirm = () => {
 // 点击取消按钮
 let modelCancel = () => {
 	uni.redirectTo({
-		url: '../index/index'
+		url: './editQuotation?orderId=' + orderId.value
 	})
 }