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

187 lines
5.7 KiB
Vue
Raw Normal View History

2025-02-18 18:09:05 +08:00
<!-- 页面描述 -->
<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>