zhongshen_project/addon/cashier/source/os/components/ns-justmoney/ns-justmoney.vue

<template>
	<view class="justmoney">
		<view class="title">
			订单调价
			<text class="iconfont iconguanbi1" @click="close('orderAdjustMoney')"></text>
		</view>
		<view class="table-box" v-if="goods_list.length > 0">
			<view class="table" style="width:76%">
				<view class="table-th">
					<view class="table-td" style="width: 30%;">商品信息</view>
					<view class="table-td" style="width: 10%;">单价</view>
					<view class="table-td" style="width: 12%;">数量</view>
					<view class="table-td" style="width: 12%;">小计</view>
					<view class="table-td" style="width: 12%;">商品总额</view>
					<view class="table-td" style="width: 12%;">店内优惠</view>
					<view class="table-td" style="width: 12%;">抵扣金额</view>
				</view>
				<view class="table-tb">
					<view class="table-tb-item" v-for="(item, index) in new_list" :key="index">
						<view class="table-td" style="width: 30%;">
							<image class="goods-image" :src="$util.img(item.goods_image, { size: 'small' })" mode="widthFix"></image>
							<view class="goods-name">{{ item.goods_name }}</view>
						</view>
						<view class="table-td" style="width: 10%;">{{ item.price }}</view>
						<view class="table-td" style="width: 12%;">{{ item.num }}</view>
						<view class="table-td" style="width: 12%;">{{ item.goods_money }}</view>
						<view class="table-td" style="width: 12%;">{{ item.goods_money }}</view>
						<view class="table-td" style="width: 12%;">{{ discount_money }}</view>
						<view class="table-td" style="width: 12%;">{{ offset_money }}</view>
					</view>
				</view>
			</view>
			<view class="table-unit" style="width:14%">
				<view class="table-th">调整金额</view>
				<view class="table-td table-td-unit"><input placeholder="请输入调整金额" type="number" v-model="adjust_money" @input="adjust" /></view>
			</view>
			<view class="table-unit" style="width:10%">
				<view class="table-th">实付金额</view>
				<view class="table-tb">{{ pay_money_unit }}</view>
			</view>
		</view>

		<view class="die-but">
			<button type="primary" class="default-btn btn save" @click="close('orderAdjustMoney')">取消</button>
			<button type="primary" class="primary-btn btn" @click="save({ adjust_money: adjust_money })">保存</button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			pay_money_unit: '',
			//防止浅拷贝影响全局
			new_list: [],
			// 金额调整
			adjust_money: 0,
			//防重复操作
			judge: false
		};
	},
	props: {
		goods_list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		pay_money: {
			type: [String, Number],
			default: () => {
				return '0';
			}
		},
		discount_money: {
			type: [String, Number],
			default: () => {
				return 0;
			}
		},
		offset_money: {
			type: [String, Number],
			default: () => {
				return 0;
			}
		}
	},
	created() {
		this.pay_money_unit = JSON.parse(JSON.stringify(this.pay_money));
		//防止浅拷贝影响全局
		this.new_list = JSON.parse(JSON.stringify(this.goods_list));
		this.adjust_money = JSON.parse(JSON.stringify(this.goods_list[0].adjust_money));
	},
	methods: {
		/**
		 * 调价修改
		 */
		adjust() {
			if (!this.adjust_money) {
				this.adjust_money = 0;
			}
			let obj = JSON.parse(JSON.stringify(this.new_list[0]));
			let goods_money = parseFloat(obj.goods_money);
			let discount_money = parseFloat(this.discount_money);
			let offset_money = parseFloat(this.offset_money);
			let shipping_money = 0.0;
			var real_goods_money = parseFloat(goods_money) + parseFloat(this.adjust_money) - parseFloat(discount_money);
			var total_money = parseFloat(real_goods_money) + parseFloat(shipping_money);
			total_money = Math.round(total_money * 100) / 100;
			this.pay_money_unit = parseFloat(total_money - offset_money).toFixed(2);
			this.$forceUpdate();
		},

		/**
		 * 调价修改提交
		 */
		save(data) {
			if (this.judge) return false;
			this.judge = true;
			this.$emit('orderAdjustMoney', data, () => {
				this.judge = false;
			});
		},

		/**
		 * 弹窗关闭
		 */
		close() {
			this.$emit('close', 'orderAdjustMoney');
		}
	}
};
</script>
<style lang="scss" scoped>
.justmoney {
	width: 80vw;
	background: #ffffff;
	border-radius: 0.06rem;
	padding-bottom: 0.2rem;
	min-width: 10rem;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.15rem;
		height: 0.5rem;
		box-sizing: border-box;
		border-bottom: 0.01rem solid #e6e6e6;
		font-size: 0.16rem;

		.iconfont {
			font-size: 0.18rem;
		}
	}

	.table-box {
		display: flex;
		padding: 0 0.3rem;
		box-sizing: border-box;
		margin-top: 0.2rem;
		width: 100%;

		.table {
			.table-th {
				width: 100%;
				height: 0.4rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f8f6f9;
				border-bottom: 0.01rem solid #e6e6e6;
				box-sizing: border-box;
			}

			.table-td {
				padding: 0 0.15rem;
				box-sizing: border-box;
			}
			.table-tb {
				.table-tb-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 0.5rem;
					border-bottom: 0.01rem solid #e6e6e6;

					.table-td {
						border-left: 0.01rem solid #e6e6e6;
						height: 100%;
						display: flex;
						align-items: center;
						.goods-image {
							width: 0.4rem;
							height: 0.4rem;
							margin-right: 0.1rem;
						}
						.goods-name {
							font-size: 0.14rem;
							color: #333333;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}

					.table-td:last-child {
						border-right: 0.01rem solid #e6e6e6;
					}
				}
			}
		}

		.table-unit {
			.table-th {
				width: 100%;
				height: 0.4rem;
				background: #f8f6f9;
				border-bottom: 0.01rem solid #e6e6e6;
				padding-left: 0.15rem;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}

			.table-tb {
				height: calc(100% - 0.4rem);
				display: flex;
				align-items: center;
				padding-left: 0.15rem;
				box-sizing: border-box;
				border-right: 0.01rem solid #e6e6e6;
				border-bottom: 0.01rem solid #e6e6e6;
				white-space: nowrap;
				overflow: hidden;
			}

			.table-td-unit {
				padding: 0 0.15rem;
				box-sizing: border-box;
				height: calc(100% - 0.4rem);
				display: flex;
				align-items: center;
				padding-left: 0.15rem;
				box-sizing: border-box;
				border-right: 0.01rem solid #e6e6e6;
				border-bottom: 0.01rem solid #e6e6e6;
				input {
					width: 100%;
					height: 60%;
					font-size: 0.14rem;
					border: 0.01rem solid #e6e6e6;
					padding-left: 0.1rem;
				}
			}
		}
	}

	.die-but {
		margin-top: 0.2rem;

		.btn {
			width: auto;
			height: auto;
			padding: 0 0.2rem;
			float: right;
		}

		.save {
			margin: 0 0.15rem;
		}
	}

	.die-but:after {
		overflow: hidden;
		content: '';
		height: 0;
		clear: both;
		display: block;
	}
}
</style>