jiuyiUniapp/jiuyi2/components/shop/order/item.vue

95 lines
2.3 KiB
Vue

<script setup>
/**
* 订单列表项
* @property {String} mode 模式 mine个人订单 shop商家订单
*/
import {
defineProps,
defineEmits,
} from 'vue'
//
const props = defineProps({
item: {
type: Object,
default: {},
},
mode: {
type: String,
default: 'mine',
}
})
const emit = defineEmits(['item'])
// 点击列表项
function handleItem() {
emit('item', props.item)
}
</script>
<template>
<view class="item oh plr30 bfff br20" @click="handleItem">
<view class="header line rows ptb20 f28">
<!-- 店铺 -->
<view class="store df aic thd f1" v-if="mode == 'mine'">
<image class="wh50 br10" :src="item.merImg" mode="aspectFill" />
<view class="name ml10 c333">{{item.merName}}</view>
</view>
<!-- 购买用户 -->
<view class="store df aic thd f1" v-else-if="mode == 'shop'">
<image class="wh50 cir"
src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
mode="aspectFill" />
<view class="name ml10 c333">用户小A</view>
</view>
<!-- 订单状态 -->
<view class="c666 f28">{{item.status_text}}</view>
</view>
<!-- 商品信息 -->
<view class="product line df ptb20">
<view class="poster wh160">
<image class="wh160 br10" :src="item.productImage" mode="aspectFill" />
</view>
<!-- 产品名称 和 购买的规格 -->
<view class="info mlr20 f1">
<view class="name t2hd c333 f28">{{item.productName}}</view>
<view class="spec mt10 thd c999 f26">款式:{{item.sku}}</view>
</view>
<!-- 单价 数量 -->
<view class="tar">
<view class="price c666">
<text class="f20">¥</text>
<text class="f26">{{item.productPrice}}</text>
</view>
<view class="number f24 c999">x {{item.totalNum}}</view>
</view>
</view>
<!-- 汇总 -->
<view class="total line ptb20 tar f34">
<view class="">
<text v-if="mode == 'mine'">应付:</text>
<text v-else-if="mode == 'shop'">实收:</text>
<text class="cFF9B27 f20">¥</text>
<text class="cFF9B27">{{item.totalPrice}}</text>
</view>
</view>
<slot name="menu" :item="item">
<!-- -->
</slot>
</view>
</template>
<style lang="scss" scoped>
.item {
.line+.line {
border-top: 2rpx solid #eee;
}
}
</style>