yanzong_qianduan/pages/news3/updatePrice.vue

<template>
	<view class="updatePrice">
		<view class="orderNum">
			订单号：{{orderInfo.order_no}}
		</view>
		<view class="dispatchContent" v-for="(item,index) in orderInfo.goods" :key="index">
			<view class="dispatchItem">
				<image :src="item.goods_image" mode="aspectFill"></image>
				<view class="right">
					<view class="title">
						{{item.goods_name}}
					</view>
					<view class="subTitle" v-for="p in item.goods_props" :key="p.group">
						{{p.group.name}}:{{p.value.name}}

					</view>
					<view class="num">
						x{{item.total_num}}
					</view>
					<view class="price">
						<text style="font-size: 26upx;">¥</text>
						<text>{{item.total_price}}</text>
					</view>
				</view>
			</view>
			<view class="selectContent" style="padding:36rpx 0 10rpx 0;margin-top: 30rpx;" @click="setPrice(item)">
				<view class="left">
					修改单个商品价格
				</view>
				<view class="right">
					<view class="price">
						<text style="font-size: 26upx;">¥</text>
						<text>{{item.total_price}}</text>
					</view>
					<u-icon name="arrow-right" color="#C3C3C3" size="28"></u-icon>
				</view>

			</view>
		</view>
		<view class="selectContent" style="margin:20upx;border:none">
			<view class="left">
				物流费用
			</view>
			<view class="right">
				<view class="price">
					<!-- <text>{{orderInfo.express_price}}</text> -->
					<u-input :border-bottom="false" v-model="expressPrice" placeholder="请输入物流费用"></u-input>
					<text style="font-size: 26upx;margin-left: 10rpx; color:#3B3B3B">元</text>
				</view>
			</view>

		</view>
		<view class="goods-fd">
			<view class="btn" @click="submitPrice">确认修改</view>
		</view>
		<u-popup v-model="modifyInfo" width="80%" border-radius="10" :closeable="true" mode="bottom">
			<view class="modifyInfo">
				<view class="filterTitle">
					修改价格
				</view>
				<view class="form">
					<view class="orginPrice">
						<view class="formTitle">
							商品价格
						</view>
						<view class="price">
							<text style="font-size: 26upx;">¥</text>
							<text>{{selectedGood.total_price}}</text>
						</view>
					</view>
					<view class="orginPrice">
						<view class="formTitle">
							修改单个商品价格
						</view>
						<view class="price">
							<text style="font-size: 26upx;margin-right:10upx;">¥</text>
							<u-input placeholder="请输入商品价格" v-model="newPrice"></u-input>
						</view>
					</view>
				</view>
				<view class="submit" :style="{'opacity': newPrice?1:0.6 }" @click="submitPrice">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				modifyInfo: false,
				newPrice: null,
				orderInfo: {},
				selectedGood: {},
				expressPrice: 0,
			}
		},
		methods: {
			setPrice(item) {
				console.log(item)
				this.selectedGood = item
				this.modifyInfo = true
			},
			async submitPrice() {
				let params = {
					"orderId": this.orderInfo.order_id,
					"form": {
						"order_price": this.newPrice, //订单价格
						"express_price": this.expressPrice //运费价格
					}
				}
				let {
					status,
					message,
					data
				} = await newFunApi.updatePrice(params);
				uni.showToast({
					title: '修改价格成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}
		},
		onLoad(option) {
			this.orderInfo = JSON.parse(option.item)
			this.expressPrice = this.orderInfo.express_price || 0

		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100%;
		background-color: #F7F8FA;
	}

	.updatePrice {
		margin-bottom: 200rpx;
	}

	.orderNum {

		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #707070;
		margin: 30upx;

	}

	.dispatchContent {
		margin: 20upx;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		padding: 28upx;
	}

	.dispatchItem {
		display: flex;
		align-items: center;

		image {
			width: 194upx;
			height: 194upx;
		}

		.right {
			flex: 1;
			margin-left: 40upx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.title {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #3B3B3B;

			}

			.subTitle {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #7C7C7C;
				margin: 14upx 0;

			}

			.num {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #1E1E1E;
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 32upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F21A1C;
				position: absolute;
				right: 20upx;
				bottom: 0upx;
				z-index: 9;

			}
		}
	}

	.selectContent {
		padding: 34upx 28upx;
		background-color: #fff;
		border-top: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;

		::v-deep .u-input {
			width: 300rpx !important;
			text-align: right !important;
		}

		.left {

			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #3B3B3B;

		}

		.right {
			display: flex;
			align-items: center;

			.price {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 32upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F21A1C;
				text-align: right;
				margin-right: 10rpx;

				::v-deep .uni-input-input {
					text-align: right !important;
				}

				::v-deep .u-input {
					width: 200rpx !important;
				}
			}
		}
	}

	.goods-fd {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0.9375rem;
		z-index: 99;
		background-color: #fafafa;
		box-sizing: border-box;

		.btn {
			width: 630rpx;
			line-height: 88rpx;
			background: #F34A40;
			border-radius: 6px;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
		}
	}

	.modifyInfo {
		padding: 34upx;

		::v-deep .u-input {
			width: 300rpx !important;
			text-align: left !important;
		}

		.filterTitle {
			font-size: 32upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #303030;
			text-align: center;
		}

		.form {
			.orginPrice {
				display: flex;
				align-items: center;
				padding: 36upx 10rpx;
				border-bottom: 1px solid #EAEAEA;

				.formTitle {

					font-size: 32upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #3B3B3B;

				}

				.price {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 32upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #F21A1C;
					margin-right: 20upx;
					margin-left: 20upx;

				}
			}
		}

		.submit {
			width: 100%;
			height: 100rpx;
			background: #F21A1C;
			border-radius: 6px 6px 6px 6px;
			opacity: 1;
			line-height: 100rpx;
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 210upx;
			text-align: center;

		}
	}

	::v-deep .u-input {
		width: 100rpx;
		text-align: right;
	}
</style>