shop4.3.57/components/page-component/app-order-goods-info/app-order-goods-info.vue

<template>
    <view class="app-order-goods-info">
        <view class='dir-left-nowrap item-box' :style="{'margin-bottom': isLastOne ? '24rpx' : 0}">
            <image class='img box-grow-0' mode='aspectFill' :src='goods.pic_url'></image>
            <view class='box-grow-1'>
                <view class='goods-name'>{{goods.name}}</view>
                <view class='attr'>规格：
                    <text v-for='item in goods.attr_list' :key='item.id'>{{item.attr_name}}</text>
                </view>
                <view class='dir-left-nowrap'>
                    <view class='box-grow-1 goods-num'>x{{goods.num}}</view>
                    <view class='box-grow-0' v-if="plugin == 'composition'">
                        <view class='main-right price delete-price'>￥{{goods.total_price}}</view>
                    </view>
                    <view class='box-grow-0 dir-left-nowrap' v-else>
                        <view v-if="pluginData && pluginData.exchange_list && pluginData.exchange_list.length" class="price">{{pluginData.exchange_list[pluginIndex].value}}{{pluginData.price_name}}+</view>
                        <view class='main-right price'>￥{{pluginData.price_list ? pluginData.price_list[pluginIndex].value : goods.total_price}}</view>
                    </view>
                </view>
				<view class="screen" v-if="JSON.stringify(service_data)!='{}'&&JSON.stringify(service_data)!='[]'" style="display:flex;justify-content: space-between;margin-top:4px;">
					<view class="screen_left" style="font-size: 24rpx;color: #999999;">×1
						<text class="goods-price-unit" style="padding-left:10px;">{{service_data.name}}{{service_data.year}}年{{service_data.price}}元</text>  
					</view>
					<view class="screen_right">
						<text class="goods-price-unit">￥</text> 
						{{service_data.price}}111
					</view>
				</view>  
                <view class="composition-price" v-if="plugin == 'composition'">
                    搭配套餐价<text>￥{{goods.total_price}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'app-order-goods-info',
    data() {
        return {}
    },
    props: {
		service_data:{
			type:Object,
			default:{}
		},
        goods: {
            type: Object,
            default: {}
        },
        plugin: {
            type: String,
            default: ''
        },
        isLastOne: {
            type: Boolean,
            default: true
        },
        pluginData: {
            type: Object,
            default: {}
        },
        pluginIndex: {
            type: Number,
            default: 0,
        }
    },
}
</script>
<style scoped lang="scss">
.app-order-goods-info {
    font-size: 24#{rpx};
    width: 100%;

    .img {
        width: 160#{rpx};
        height: 160#{rpx};
        margin-right: 20#{rpx};
        flex-shrink: 0;
    }

    .item-box {
        width: 100%;
        margin-bottom: 24#{rpx};
    }

    .label {
        color: $uni-general-color-two;
    }

    .price {
        color: $uni-important-color-black;

        &.delete-price {
            text-decoration: line-through;
        }
    }

    .composition-price {
        text-align: right;
        font-size: #{22rpx};
        color: #999999;

        text {
            font-size: #{28rpx};
            color: #353535;
            margin-left: #{8rpx};
        }
    }

    .goods-num {
        font-size: $uni-font-size-weak-one;
        color: $uni-general-color-two;
    }

    .attr {
        width: 450#{rpx};
        margin: 10#{rpx} 0;
        color: $uni-general-color-two;
        font-size: $uni-font-size-weak-one;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        text {
            margin-right: 10#{rpx};
        }
    }

    .goods-name {
        color: $uni-important-color-black;
        font-size: $uni-font-size-general-two;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
</style>