99 lines
2.4 KiB
Vue
99 lines
2.4 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="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
|||
|
|
mode="aspectFill" />
|
|||
|
|
<view class="name ml10 c333">家纺专营店</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="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
|||
|
|
mode="aspectFill" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 产品名称 和 购买的规格 -->
|
|||
|
|
<view class="info mlr20 f1">
|
|||
|
|
<view class="name c333 f28">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
|
|||
|
|
<view class="spec mt10 c999 f26">款式：普通款 小熊</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 单价 数量 -->
|
|||
|
|
<view class="tar">
|
|||
|
|
<view class="price c666">
|
|||
|
|
<text class="f20">￥</text>
|
|||
|
|
<text class="f26">89</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="number f24 c999">x 1</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">89</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<slot name="menu" :item="item">
|
|||
|
|
<!-- -->
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.item {
|
|||
|
|
.line+.line {
|
|||
|
|
border-top: 2rpx solid #eee;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|