caimei-applets-caimei/components/module/creatOrder/freight.vue

<template name="freight">
	<view class="freight-template">
		 <!-- 运费信息 -->
		<view class="invoice-freight">
			<view class="freight-left">
				运费<text class="iconfont icon-yunfeishuoming" @click="showTip"></text>
			</view>
			<view class="freight-right">
				<text>{{freightText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"freight",
		props:{
			freightData:{
				type:Object
			}
		},
		data() {
			return{
				freightText:'',
			}
		},
		created(){
			this.initData(this.freightData)
		},
		computed: {

		},
		methods:{
			initData(res) {
				switch(res.freePostFlag){
					case '0':
						this.freightText = '包邮';break
					case '1':
						this.freightText = '需要运费';break
					case '-1':
						this.freightText = '到付';break
					case '-2':
						this.freightText = '仪器到付-产品包邮';break
				}
			},
			showTip(){
				this.$emit('showFreightAlert');
			},
		}
	}
</script>

<style lang="scss">
	.freight-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.invoice-freight{
			width: 702rpx;
			padding: 0 24rpx;
			height: 86rpx;
			line-height: 86rpx;
			font-size: $font-size-28;
			color: $text-color;
			background: #FFFFFF;
			float: left;
			font-weight: bold;
			.freight-left{
				float: left;
				.icon-yunfeishuoming{
					height: 100%;
					padding:15rpx;
					color: $color-system;
					font-weight: normal;
				}
			}
			.freight-right{
				float: right;
				color: #2A81FF;
			}
		}
	}
</style>