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

<template>
	<view class="freight">
		<view class="freight-switch">
			<view class="freight-switch-title">运费</view>
			<view class="freight-switch-fee" v-if="postAgeFlag(0)"><text>包邮</text></view>
			<view class="freight-switch-fee" v-if="postAgeFlag(1)">
				<text>{{ freightText }}</text> 
				<text class="cell-more iconfont icon-xiangyou" v-if="infoData.coldChain>0" @click="showPopup"></text>
			</view>
			<view class="freight-switch-fee" v-if="postAgeFlag(2)"><text>到付</text></view>
		</view>
		<tui-bottom-popup :radius="true" :show="popupShow">
			<view class="freight-title">运费设置</view>
			<view class="freight-content">
				<!-- <radio-group @change="radioChange" v-if="designatedFlag()">
					<label v-for="(item, index) in radioItems" :key="index">
						<radio
							style="transform:scale(0.7)"
							color="#F3B574"
							:id="item.name"
							:value="item.name"
							:checked="item.checked"
						/>
						<label :for="item.name" class="label">
							<text>{{ item.value }}</text>
						</label>
					</label>
				</radio-group> -->
				<view class="freight-form">
					<view class="freight-form-item" v-if="infoData.designatedFlag !== 2 && infoData.coldChain > 0">
						<view>冷链运输费</view>
						<view style="position: relative;">
							￥{{ infoData.coldChain.toFixed(2) }}
							<radio
								class="freight-pay"
								color="#F3B574"
								@click="coldChainChange"
								:checked="isCheck"
							/>
						</view>
					</view>
					<block v-if="newPostAge() !== 0">
						<view class="freight-form-item" v-if="isCPay">
							<view>其他运费</view> <view>{{ '￥' + postAge().toFixed(2) }}</view>
						</view>
						<view class="freight-form-item" v-else> <view>其他运费</view> <view>到付</view> </view>
					</block>
					<view class="freight-form-item">
						<view>总运费</view>
						<view style="color: #F94B4B;">
							<view style="display: flex;" v-if="allPostage !== 0 || isCPay">
								￥
								<count-up
									:num="allPostage.toFixed(2)"
									:width="16"
									:height="40"
									:fontSize="28"
									color="#F94B4B"
								/>
							</view>
							<text v-else> 到付 </text>
						</view>
					</view>
				</view>
				<view class="freight-btn" @click="fetchPostAge">确定</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
import CountUp from './countUp.vue'
export default {
	props: {
		ispopupShow: {
			type: Boolean,
			default: () => false
		},
		goodsData: {
			type: Array,
			default: () => []
		},
		goodIndex: {
			type: Number
		}
	},
	components: {
		CountUp
	},
	data() {
		return {
			radioItems: [
				{
					value: '不包邮',
					name: '0',
					checked: true
				}
				//     {
				//         value: '到付',
				//         name: '1'
				//     }
			],
			isCPay: true,
			isCheck: false,
			infoData: {},
			freightText: '',
			popupShow: false
		}
	},
	watch: {
		goodsData: {
			handler(val) {
				this.initData(val[0])
			},
			deep: true,
			immediate: true
		}
	},
	computed: {
		// 总运费
		allPostage() {
			this.freightText =
				this.postAge() + (this.isCheck ? this.infoData.coldChain : 0) === 0 && !this.isCPay
					? '到付'
					: '￥' + (this.postAge() + (this.isCheck ? this.infoData.coldChain : 0)).toFixed(2)
			return this.postAge() + (this.infoData.isColdChina ? this.infoData.coldChain : 0)
		},
		// 合计
		allPrice() {
			return Number(this.infoData.originalPrice) + Number(!this.isCPay ? 0 : this.allPostage)
		}
	},
	mounted() {},
	methods: {
		// 开启弹窗
		showPopup() {
			this.popupShow = true
			this.$emit('showFreight', true)
		},
		// 是否到付
		postAgeFlag(e) {
			return JSON.parse(uni.getStorageSync('goodsData'))[this.goodIndex].postageFlag === e
		},
		// 初始运费
		postAge() {
			if (this.isCPay) return this.newPostAge()
			else return 0
		},
		// 新运费
		newPostAge() {
			return JSON.parse(uni.getStorageSync('goodsData'))[this.goodIndex].postage
		},
		// 是否运费切换
		designatedFlag(index) {
			return JSON.parse(uni.getStorageSync('goodsData'))[this.goodIndex].designatedFlag !== 1
		},
		// 按钮切换
		radioChange($event) {
			console.log('切换运费')
			this.isCPay = !this.isCPay
			this.infoData.isColdChina = this.isCheck
			this.infoData.postageFlag = this.isCPay ? 1 : 2
		},
		// 初始化运费组件
		initData(data) {
			this.infoData = JSON.parse(JSON.stringify(data))
			this.isCheck = this.infoData.isColdChina
			this.infoFreightText(data)
		},
		// 设置运费
		infoFreightText(data) {
			switch (data.postageFlag) {
				case 0:
					this.freightText = '包邮'
					this.infoData.postage = 0
					this.infoData.postageFlag = data.postageFlag
					break
				case 1:
					this.freightText = '￥' + (this.infoData.postage + this.infoData.coldChain)
					// this.infoData.postage = this.freightText
					this.infoData.postageFlag = data.postageFlag
					break
				case 2:
					this.freightText = '到付'
					this.infoData.postage = 0
					this.infoData.postageFlag = data.postageFlag
					break
			}
		},
		// 是否选择冷链费
		coldChainChange() {
			this.isCheck = !this.isCheck
			this.freightText = this.isCheck ? this.allPostage : this.infoData.postage
			this.infoData.isColdChina = this.isCheck
		},

		// 运费参数
		fetchPostAge() {
			this.$emit('changeFreight', [this.goodIndex, this.infoData, this.allPostage])
			this.popupShow = false
			this.$emit('showFreight', false)
		}
	}
}
</script>

<style lang="scss" scoped>
.freight {
	position: relative;
}
.freight-switch {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	background-color: white;
	padding: 24rpx 0;
	.freight-switch-title {
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}
	.freight-switch-fee {
		color: #333333;
		font-size: 28rpx;
	}
}
.all-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	width: 100%;
	padding-bottom: 24rpx;
	font-size: 28rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	.all-price-content {
		display: flex;
	}
	.price {
		color: #f94b4b;
	}
}
.iconfont {
	font-size: 32rpx !important;
	margin-left: 15rpx;
}
.freight-title {
	color: #333333;
	font-size: 32rpx;
	text-align: center;
	margin: 50rpx 0 80rpx 0;
}
.freight-content {
	box-sizing: border-box;
	padding: 0 50rpx;
	radio {
		margin-right: 8rpx;
	}
	.label {
		color: #666666;
		font-size: 28rpx;
		margin-right: 102rpx;
	}
	.freight-btn {
		height: 90rpx;
		background: #f3b574;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		width: 100%;
		margin: 100rpx 0 0 0;
	}
}
.freight-form {
	margin-top: 50rpx;
	width: 100%;
	.freight-form-item {
		width: 95%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		color: #666666;
		font-size: 28rpx;
	}
}
.freight-pay {
	position: absolute;
	right: -60%;
	transform: scale(0.7);
}
</style>