jiuyiUniapp/service/components/public/jy-commodity-information/index.vue

<!-- 页面描述 -->
<template>
    <view class="commodity-information" @click="emit('click', orderInfo)">
        <uni-section>
            <template v-slot:decoration>
                <!-- 商品图 -->
                <image class="shop-image" :src="orderInfo.productImage" mode="aspectFill"></image>
            </template>
            <template v-slot:content>
                <!-- 订单 |  聊天-->
                <template v-if="showType == 1 || showType == 4">
                    <view class="commodity-name commodity-name-1">
                        <text class="commodity-name-title t2hd">{{ orderInfo.productName }}</text>
                        <text class="commodity-name-ks thd">{{ orderInfo.status_text }}</text>
                        <text v-if="showType == 4">{{ orderInfo.status }}</text>
                    </view>
                </template>
                <!-- 历史浏览 | 收藏 -->
                <template v-if="showType == 2 || showType == 3">
                    <view class="commodity-name commodity-name-2">
                        <text class="t2hd">耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉</text>
                        <view class="df aic" v-if="showType == 2">
                            <view class="df aic price mr10">
                                <text class="f20 jg">￥</text>
                                <text class="f28">{{ orderInfo.price }}</text>
                            </view>
                            <view class="df xl">
                                <text>销量</text> <text>{{ orderInfo.sales }}</text> <text>+</text>
                            </view>
                        </view>
                        <view class="df aic" v-if="showType == 3">
                            <view class="df xl thd">
                                <text>店铺名称</text>
                            </view>
                        </view>
                    </view>
                </template>
                <!-- 店铺管理 -->
                <template v-if="showType == 5">
                    <view class="df fdc jcsb hohp">
                        <text class="t2hd c333 f28 fw600">耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉耳钉</text>
                        <text class="c333 f24">销量：156151</text>
                        <view class="df aic">
                            <text class="f24 cFF9B27">价格：￥123</text>
                            <text class="f24 ml40 c999">库存：x1</text>
                        </view>
                    </view>
                </template>
            </template>
            <template v-slot:right v-if="showType != 3 && right">
                <template v-if="showType == 1 || showType == 4">
                    <view class="df fdc jcsb aife" style="height: 100%;align-items: flex-end">
                        <!-- 价格 -->
                        <view class="price-num">
                            <view class="df aic price">
                                <text class="f20 jg">￥</text>
                                <text class="f28">{{ orderInfo.productPrice }}</text>
                            </view>
                            <!-- 数量 -->
                            <text class="c999 f24">x{{ orderInfo.totalNum }}</text>
                        </view>
                        <!-- 发送到聊天 -->
                        <view @click.stop="emit('consult', orderInfo)" class="go-buy" v-if="showType == 4">
                            <uni-tag :inverted="true" text="去咨询" type="warning" />
                        </view>
                    </view>
                </template>
                <template v-if="showType == 2">
                    <view class="go-buy" @click.stop="emit('buy', orderInfo)">
                        <uni-tag :inverted="true" text="去购买" type="warning" />
                    </view>
                </template>
            </template>
        </uni-section>
    </view>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
const emit = defineEmits(['consult', 'click', 'buy'])
const props = defineProps({
    // 订单信息
    orderInfo: {
        type: Object,
        default: () => {
            return {
                shop_logo: '',
                shop_name: '123',
                order_status_text: 6,
            }
        },
    },
    // 1是订单模式
    // 2是历史浏览
    // 3是收藏
    // 4是聊天
    showType: {
        type: Number,
        default: 1
    },
    // 在4的模式下是否显示销量
    right: {
        type: Boolean,
        default: true
    }
})
</script>
<style scoped lang="scss">
.commodity-information {
    padding: 0 20rpx;
}

$h : 164rpx;

.shop-image {
    height: $h;
    width: 164rpx;
    background-color: #D8D8D8;
    border-radius: 10rpx;
    margin-right: 10rpx;
}

::v-deep .uni-section-header {
    padding: 0 !important;

    .uni-section-header__content {
        height: $h;
    }

    .uni-section-header__slot-right {
        height: $h;
    }
}

.commodity-name {
    height: 100%;
    display: flex;
    flex-direction: column;

    &-title {
        color: #333333;
        font-size: 28rpx;
        font-weight: normal;
        margin-bottom: 8rpx;
    }

    &-ks {
        font-size: 24rpx;
        color: #999999;
    }
}

.commodity-name-2 {
    justify-content: space-between;

}

.commodity-name-1 {
    justify-content: flex-start;

}

.go-buy {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.price-num {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 20rpx;

    .price {
        color: #3D3D3D;
    }
}

.jg {
    margin-right: 4rpx;
}

.xl {
    color: #8C8C8C;
}
</style>