caimei-applets-hehe/components/cm-module/createOrder/freight.vue

<template name="freight">
	<view class="freight-template" @click.stop="discard">
		 <!-- 运费信息 -->
		<view class="invoice-freight">
			<view class="freight-left">运费<text class="tips" v-if="freightData.freePostFlag == 1">运费可选择到付哟~</text></view>
			<view class="freight-right" >
				<view class="freight-text">{{freightText}}</view>
				<view class="select" v-if="freightData.freePostFlag == 1"  @click.stop="selectFreight">
					<text class="select-text">{{orderPriceToFixed(freightMoney)}}</text>
					<text class="iconfont icon-chakangengduo"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"freight",
		props:{
			freightData:{
				type:Object
			}
		},
		data() {
			return{
				infoData:'',
				freightText:'',
				freightMoney:'',
				isShowOption:false,
				optionList:['到付'],
				freePostFlag:'',
				
			}
		},
		created(){
			this.initData(this.freightData)
		},
		computed: {

		},
		methods:{
			initData(res) {
				this.infoData = res;
				switch(res.freePostFlag){
					case 0:
						this.freightText = '包邮'
						this.freightData.freight  = 0
						break
					case 1:
						this.freightText = ''
						this.freightMoney = res.freight
						this.optionList.unshift(this.orderPriceToFixed(this.freightMoney))
						break
					case -1:
						this.freightText = '到付'
						this.freightData.freight  = 0
						break
				}
			},
			selectFreight (){
				let self = this,value;
				uni.showActionSheet({
				    itemList: self.optionList,
				    success: function (res) {
						switch(res.tapIndex){
							case 0:
								self.freightMoney = self.infoData.freight
								self.freePostFlag = 1
								break
							case 1:
								self.freePostFlag = -1
								self.freightMoney ='到付'
								break
						}
						self.$emit('confirmFreight',self.freePostFlag);
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			orderPriceToFixed (value){
				let price ='';
				if(value == '到付'){
					price = value
				}else{
					price ='￥'+parseInt(value).toFixed(2)
				}
				return price
			},
			discard(){
				this.isShowOption = false
				this.selectClass = ''
			},
			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;
				.tips{
					font-size: $font-size-24;
					color: $color-system;
					font-weight: normal;
					margin-left: 20rpx;
				}
				.icon-yunfeishuoming{
					height: 100%;
					padding:15rpx;
					color: $color-system;
					font-weight: normal;
				}
			}
			.freight-right{
				float: right;
				color: #2A81FF;
				position: relative;
				.freight-text{
					float: left;
				}
				.select{
					float: right;
					height: 60rpx;
					padding: 0 20rpx;
					margin-top: 14rpx;
					line-height: 60rpx;
					color: #2A81FF;
					font-weight: normal;
					position: relative;
					.select-text{
						display: inline-block;
						float: left;
						margin-right: 30rpx;
					}
					.iconfont{
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: right;
						position: absolute;
						right: 0;
						top: 0;
						font-size: $font-size-28;
						color: #2A81FF;
					}
				}
			}
		}
	}
</style>