caimei-applets-mcare/pages/user/order/components/freight.vue

<template name="freight">
	<view class="freight-template">
		<!-- 运费信息 -->
		<view class="invoice-freight">
			<view class="freight-main" v-if="infoData.designatedFlag === 2">
				<view class="freight-left">运费</view>
				<view class="freight-right">
					<view class="freight-text">{{ freightText }}</view>
				</view>
			</view>
			<template v-else>
				<view class="freight-main">
					<view class="freight-left">运费</view>
					<view class="freight-right">
						<view class="freight-text">{{ totalFreight }}</view>
					</view>
				</view>
				<view class="freight-bean">
					<view class="bean-le">冷链运输费</view>
					<view class="bean-ri">
						<text>￥{{ coldChain | NumFormat }}</text>
						<view class="checkbox-box" v-if="coldChain > 0">
							<button
								class="checkbox iconfont"
								hover-class="btn-hover"
								@click.stop="checkedBalabce"
								:class="[ischecked ? 'icon-yixuanze' : 'icon-weixuanze']"
							></button>
						</view>
					</view>
				</view>
				<view class="freight-bean" v-if="infoData.designatedFlag === 3">
					<view class="bean-le">其他运费</view>
					<view class="bean-ri">
						<view>{{ freightText }}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	name: 'freight',
	props: {
		coldChain: {
			type: Number
		},
		freightData: {
			type: Object
		}
	},
	data() {
		return {
			infoData: {},
			freightText: '',
			postageFlag: 0,
			ischecked: true,
			totalFreight: 0
		}
	},
	created() {
		this.initData(this.freightData)
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value && value > 0) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		}
	},
	methods: {
		async initData(data) {
			this.infoData = data
			/**
			 * 1.如果designatedFlag === 1 且 冷链费 大于 0 勾选冷链费 运费为 冷链费
			 * 2.如果designatedFlag === 1 且 冷链费 等于 0 运费为0
			 * 3.如果designatedFlag === 2 只有其他供应商商品 运费按采美规则
			 * 4.如果designatedFlag === 3 且 冷链费 大于 0 其他供应商商品不包邮有运费 勾选冷链费 运费为 冷链费 + 采美规则运费
			 * 5.如果designatedFlag === 3 且 冷链费 大于 0 其他供应商商品到付 勾选冷链费 运费为 冷链费
			 * 5.如果designatedFlag === 3 且 冷链费 大于 0 其他供应商商品包邮 勾选冷链费 运费为 冷链费
			 * */
			if (data.designatedFlag === 1) {
				this.freightText = '￥' + data.postage.toFixed(2)
				this.totalFreight = '￥' + this.coldChain.toFixed(2)
			} else if (data.designatedFlag === 2) {
				this.infoFreightText(data)
			} else if (data.designatedFlag === 3) {
				if (this.coldChain === 0) { this.ischecked = false }
				if (data.postageFlag === 1) {
					this.freightText = '￥' + data.postage.toFixed(2)
					this.totalFreight = '￥' + (this.coldChain+data.postage).toFixed(2)
				} else {
					this.freightText = data.postageFlag === 0 ? '包邮' : '到付'
					this.totalFreight = this.ischecked ? '￥' + this.coldChain.toFixed(2) : this.freightText
				}
			}
		},
		infoFreightText(data) {
			//仅其他供应商商品设置运费
            console.log(data.postageFlag)
			switch (data.postageFlag) {
				case 0:
					this.freightText = '包邮'
					this.freightData.freight = 0
					this.postageFlag = data.postageFlag
					break
				case 1:
					this.freightText = '￥'+ data.postage.toFixed(2)
					this.postageFlag = data.postageFlag
					break
				case 2:
					this.freightText = '到付'
					this.postageFlag = data.postageFlag
					this.freightData.freight = 0
					break
			}
            console.log('freightText', this.freightText)
		},
		checkedBalabce() {
			//勾选是否使用冷链运输费
			this.ischecked = !this.ischecked
			if (this.ischecked) {
				this.setTotalFreight(this.infoData)
			} else {
				this.totalFreight = this.freightText
			}
			this.$emit('confirmFreight', this.ischecked)
		},
		setTotalFreight(data){// 勾选冷链费
			if (data.designatedFlag === 1) {
				this.totalFreight ='￥'+ this.coldChain.toFixed(2)
			} else {
				if (data.postageFlag === 1) {
					this.totalFreight = '￥' + (this.coldChain+data.postage).toFixed(2)
				} else {
					this.freightText = data.postageFlag === 0 ? '包邮' : '到付'
					this.totalFreight =  '￥' + this.coldChain.toFixed(2)
				}
			}
		}
	}
}
</script>

<style lang="scss">
.freight-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.invoice-freight {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 24rpx;
		float: left;
		.freight-main {
			width: 100%;
			height: 78rpx;
			line-height: 78rpx;
			font-size: $font-size-28;
			color: $text-color;
			background: #ffffff;
			float: left;
			.freight-left {
				float: left;
				font-weight: bold;
			}
			.freight-right {
				float: right;
				position: relative;
				.freight-text {
					float: left;
					color:#F85050;
				}
			}
		}
		.freight-bean {
			width: 100%;
			height: 58rpx;
			line-height: 58rpx;
			float: left;
			.bean-le {
				float: left;
				color: $text-color;
				font-size: $font-size-26;
			}
			.bean-ri {
				float: right;
				display: flex;
				align-items: center;
				font-size: $font-size-28;
				.checkbox-box {
					display: flex;
					width: 60rpx;
					float: left;
					height: 100%;
					font-size: $font-size-26;
					margin-left: 20rpx;
					.checkbox {
						width: 40rpx;
						text-align: right;
						box-sizing: border-box;
						text-align: center;
						text-decoration: none;
						border-radius: 0;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
						color: $color-system;
					}
					.iconfont {
						font-size: 34rpx;
					}
				}
			}
		}
	}
}
</style>