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

<template name="freight">
	<view class="freight-template" @click.stop="discard">
		 <!-- 运费信息 -->
		<view class="invoice-freight">
			<view class="freight-main">
				<view class="freight-left">运费<text class="tips" v-if="freightData.postageFlag == 1 && vipFlag!=1">运费可选择到付哟~</text></view>
				<view class="freight-right" >
					<view class="freight-text">{{freightText}}</view>
					<view class="select" v-if="freightData.postageFlag == 1"  @click.stop="selectFreight">
						<text class="select-text">{{orderPriceToFixed(freightMoney)}}</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
			</view>
			<view class="freight-bean" v-if="isBeansShow">
				<view class="bean-le" v-if="postageFlag == 1">可用{{ deductionBeans }}采美豆抵用{{ freightMoney }}元运费</view>
				<view class="bean-le" v-if="postageFlag == -1">可用{{ deductionBeans }}采美豆抵用{{ freightMoney }}运费</view>
				<view class="bean-ri">
					<view class="checkbox-box">
						<button class="checkbox iconfont"
								hover-class="btn-hover"
								@click.stop="checkedBalabce"
								:class="[ischecked ?'icon-yixuanze':'icon-weixuanze']"
						>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'freight',
		props:{
			freightData:{
				type:Object
			}
		},
		data() {
			return{
				infoData:{},
				freightText:'',
				freightMoney:'',
				isShowOption:false,
				optionList:['到付'],
				postageFlag:0,
				ischecked:false,
				isBeansShow:false,
				userBeans:0,
				deductionBeans:0,
				freightBeansMoney:0,
				vipFlag:0
			}
		},
		created(){
			this.initData(this.freightData)
		},
		computed: {

		},
		methods:{
			async initData(res) {
				const userInfo = await this.$api.getStorage()
				this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
				this.infoData = res
				switch(res.postageFlag){
					case 0:
						this.freightText = '包邮'
						this.freightData.freight  = 0
						this.postageFlag = res.postageFlag
						this.isBeansShow = false
						break
					case 1:
						this.freightText = ''
						this.freightMoney = this.freightBeansMoney =  res.postage
						this.userBeans = res.userBeans
						this.postageFlag = res.postageFlag
						this.optionList.unshift(this.orderPriceToFixed(this.freightMoney))
						if( res.userBeans > 0 ){
							this.isBeansShow = true
						}else{
							this.isBeansShow = false
						}
						if(res.userBeans >= this.freightBeansMoney*100){
							this.deductionBeans = this.freightBeansMoney*100
						}else{
							this.deductionBeans = res.userBeans
						}
						break
					case -1:
						this.freightText = '到付'
						this.freightMoney = '到付'
						this.userBeans = res.userBeans
						this.postageFlag = res.postageFlag
						this.freightData.freight  = 0
						this.freightBeansMoney = 30
						if( res.userBeans >0 ){
							this.isBeansShow = true
						}else{
							this.isBeansShow = false
						}
						if(res.userBeans >= this.freightBeansMoney*100){
							this.deductionBeans = this.freightBeansMoney*100
						}else{
							this.deductionBeans = res.userBeans
						}
						break
				}
			},
			selectFreight (){//切换运费
				if(this.vipFlag==1){ return }
				let self = this
				uni.showActionSheet({
				    itemList: self.optionList,
				    success: function (res) {
						switch(res.tapIndex){
							case 0:
								self.freightMoney = self.infoData.postage
								self.postageFlag = 1
								if( self.userBeans > 0 ){
									self.isBeansShow = true
									self.freightBeansMoney = self.freightMoney
									if(self.userBeans >= self.freightBeansMoney*100){
										self.deductionBeans = self.freightBeansMoney*100
									}else{
										self.deductionBeans = self.userBeans
									}
								}else{
									self.isBeansShow = false
									self.freightBeansMoney = 0
								}
								break
							case 1:
								self.postageFlag = -1
								self.freightMoney = '到付'
								if( self.userBeans > 0 ){
									self.freightBeansMoney = 30
									self.isBeansShow = true
									if(self.userBeans >= self.freightBeansMoney*100){
										self.deductionBeans = self.freightBeansMoney*100
									}else{
										self.deductionBeans = self.userBeans
									}
								}else{
									self.freightBeansMoney = 0
									self.isBeansShow = false
								}
								break
						}
						let obj = {
								postageFlag :self.postageFlag,
								freightBeansMoney: self.freightBeansMoney
							}
						self.$emit('confirmFreight',obj)
				    },
				    fail: function (res) {
				        console.log(res.errMsg)
				    }
				})
			},
			checkedBalabce(){//勾选使用采美豆抵扣
				this.ischecked = !this.ischecked
				this.$emit('confirmFreightBeans',this.ischecked)
			},
			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: 100%;
			box-sizing: border-box;
			padding: 10rpx 24rpx;
			.freight-main{
				width: 100%;
				height: 78rpx;
				line-height: 78rpx;
				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;
						}
					}
				}
			}
			.freight-bean{
				width: 100%;
				height: 58rpx;
				line-height: 58rpx;
				float: left;
				.bean-le{
					float: left;
					color: #666666;
					font-size: $font-size-26;
					font-weight: normal;
				}
				.bean-ri{
					float: right;
					display: flex;
					align-items: center;
					.checkbox-box{
						display: flex;
						width: 60rpx;
						float: left;
						height: 100%;
						font-size: $font-size-26;
						margin-top: 8rpx;
						.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;
						}
					}
				}
			}
		}
	}
</style>