book-hi/pages-mall/components/goods/goods-select.vue

<template>
	<view class="slot">
		<view class="item" @click="openSkuSelect">
			<view class="info">
				<view class="label">已选：</view>
				<view class="value">{{ selectedSku.difference || '请选择规格' }}</view>
			</view>
			<view class="operate"><u-icon name="more-dot-fill" :color="iconColor"></u-icon></view>
		</view>
		<!-- <view class="item" @click="goAddressPage">
			<view class="info">
				<view class="label">送至</view>
				<view class="value">{{ selectedAddress.detail_address || '请选择地址' }}</view>
			</view>
			<view class="operate"><u-icon name="more-dot-fill" :color="iconColor"></u-icon></view>
		</view> -->
		<view class="item" v-if="expressInfo&&expressInfo.express_type">
			<!-- {{JSON.stringify(expressInfo)}} -->
			<view class="info" :class="{'red':['1','3','4'].includes(expressInfo.express_type)}">
			
				<!-- <view class="label">优惠：</view> -->
				<!-- "express_type": "1",//运费类型:1=全场包邮,2=全场不包邮,3=全场满x包邮,4=全场满x包邮偏远地区除外 -->
				<view class="value">{{expressInfo|filterExpresToTitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'goods-select',
	props: {
		selectedSku: {
			type: Object,
			default: () => {
				return {};
			}
		},
		selectedAddress: {
			type: Object,
			default: {}
		},
		expressInfo: {
			type: Object,
			default: ()=>{
				return {express_type:null}
			}
		}
	},
	data() {
		return {
			iconColor: this.$appTheme.appThemeTextGrayColor,
			addressInfo:{},
		};
	},
	computed: {
		
	},
	onLoad() {
		
	},
	filters:{
		filterExpresToTitle(e){
			switch (Number(e.express_type)){
				case 1:
					return "全场包邮"
					break;
				case 2:
					return "基础运费"+e.base_express_fee+"元"
					break;
				case 3:
					return "全场满"+e.min_buy_amount+"元包邮"
					break;
				case 4:
					return "全场满"+e.min_buy_amount+"包邮(偏远地区除外)"
					break;
				default:
					break;
			}
		}
	},
	methods: {		
		
		// 通知打开sku选择框
		openSkuSelect() {
			this.$emit('openSku');
		},		
		// 跳转收货地址页面
		goAddressPage() {
			uni.navigateTo({
				url: '/pages-mine/pages/address/list?isSelect=true&isBack=true'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 16rpx;
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		&:last-child {
			margin-bottom: 0;
		}
		.info {
			display: flex;
			align-items: center;
			.label {
				font-size: 28rpx;
				font-weight: 400;
				color: $app-theme-card-gray-deep-color;
				margin-right: 30rpx;
			}
			.value {
				font-size: 28rpx;
				font-weight: 400;
				color: $app-theme-text-black-color;
			}
			&.red{
				.value{
					color:$app-theme-text-money-color;
					
				}
			}
		}
		.operate {
		}
	}
}
</style>