caimei-applets-store/pages/views/order/components/order-supplier-area/order-supplier-area.vue

<template>
    <view class="order-supplier-area">
        <!-- 供应商信息 -->
        <view class="area-top">
            <image class="shop-logo" :src="shopData.logo" mode="widthFix"></image>
            <view class="shop-name" v-text="shopData.name"></view>
            <view class="order-status" v-if="isShowState">
                <text>{{ stateExpFormat(shopData.shopStatus) }}</text>
                <!-- <text>{{ stateExpFormat(shopData.shopStatus) }}</text> -->
            </view>
        </view>
        <!-- 商品列表 -->
        <view class="product" v-for="product in shopData.productList" :key="product.productId">
            <order-product :productInfo="product" :numType="numType" @countChange="onCountChange"></order-product>
        </view>
    </view>
</template>

<script>
// import OrderProduct from '../order-product/order-product.vue'
import orderList from '../../mixins/orderList.js'

export default {
    name: 'order-supplier-area',
    mixins: [orderList],
    props: {
        shopInfo: {
            type: Object,
            default: () => {}
        },
        submitType: {
            type: String,
            default: 'cart'
        },
        isShowState: { // 是否显示订单状态
            type: Boolean,
            default: false
        }
    },
    computed: {
        shopData() {
            return {
                logo: this.shopInfo.logo || this.shopInfo.shopLogo,
                name: this.shopInfo.name || this.shopInfo.shopName,
                productList: this.shopInfo.productList || this.shopInfo.orderProductList,
                shopStatus: this.shopInfo.shopStatus
            }
        },
        numType() {
            return this.submitType === 'shareBuy' ? 2 : 1
        }
    },
    methods: {
        onCountChange(value) {
            this.$emit('countChange', value)
        }
    }
}
</script>

<style lang="scss">
.order-supplier-area {
    background-color: #fff;
    .area-top {
        position: relative;
        @extend .cm-flex-between;
        justify-content: flex-start;
        margin-bottom: 24rpx;
        .shop-logo {
            width: 56rpx;
            height: 56rpx;
            border-radius: 4rpx;
        }
        .shop-name {
            margin-left: 24rpx;
            font-size: 30rpx;
            color: #333333;
            font-weight: bold;
        }
        .order-status {
            position: absolute;
            right: 0;
            color: #FF457B;
            font-size: 26rpx;
        }
    }

    .product {
        margin-bottom: 24rpx;
        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>