book-hi/pages-mall/components/order/submit-discounts.vue

<template>
	<view class="slot">
		<view class="line">
			<view class="labe">商品金额</view>
			<view class="value">
				<text>￥</text>
				<text>{{data.countPrice}}</text>
			</view>
		</view>
		<view class="line">
			<view class="labe">运费</view>
			<view class="value" v-if="data.freight==0">
				<text>免运费</text>
			</view>
			<view class="value" v-else>
				<text>￥</text>
				<text>{{parseFloat(data.freight).toFixed(2)}}</text>
			</view>
		</view>
		<!-- <view class="line">
			<view class="labe">立减</view>
			<view class="value money">
				<text>-</text>
				<text>￥</text>
				<text>9.00</text>
			</view>
		</view> -->
		<!-- {{JSON.stringify(usingCoupon)}} -->
		<view class="line">
			<view class="labe">优惠券</view>
			<view class="value" v-if="couponList.length<1">
				<text>无可用</text>
			</view>
			<view v-else class="value money" :class="data.discount>0?'money':'gray'" @click="goDiscountsPage">
				<template v-if="data.discount>0">
					<text>-&yen;{{data.discount}}</text>
					<u-tag class="utag" :text="usingCoupon.title" type="success" mode="dark" bg-color="#fd4558" />
				</template>
				<!-- <text v-else>无可用</text> -->
				<view class="more"><u-icon size="20" name="arrow-right"></u-icon></view>
			</view>
		</view>
		<!-- <view class="total">
			<text>合计：</text>
			<text>￥</text>
			<text>{{data.countPrice - data.discount}}</text>
		</view> -->
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			default: () => {
				return {
					countPrice:0,
					discount:0,
				};
			}
		},
		usingCoupon:{
			type: Object,
			default: () => {
				return {};
			}
		},
		couponList:{
			type: Array,
			default: () => {
				return [];
			}
		},
	},
	
	methods: {
		goDiscountsPage() {
			this.$emit('selCoupon');
			return;
			uni.navigateTo({
				url: '/pages-mine/pages/discounts'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 30rpx 30rpx 0 30rpx;
	background-color: $app-theme-bg-color;
	margin-top: 24rpx;
}
.line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	.label {
		font-size: 28rpx;
		color: $app-theme-text-black-color;
	}
	.value {
		// min-width: 100rpx;
		padding-right: 24rpx;
		font-size: 28rpx;
		color: $app-theme-text-black-color;
		flex: 1;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 1.2em;
		&.money {
			color: $app-theme-text-money-color;
		}
		&.gray {
			color: $app-theme-card-gray-color;
			position: relative;
			.more {
				position: absolute;
				right: -16rpx;
				margin-left: 10rpx;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}
.total {
	border-top: 1rpx solid $app-theme-border-color;
	padding: 26rpx 0;
	text-align: right;
	text:nth-child(1) {
		font-size: 28rpx;
		color: $app-theme-text-black-color;
	}
	text:nth-child(2) {
		font-size: 20rpx;
		color: $app-theme-text-money-color;
	}
	text:nth-child(3) {
		font-size: 28rpx;
		color: $app-theme-text-money-color;
	}
}

.utag{
	margin: 0 10rpx;
}
</style>