You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.1 KiB
140 lines
3.1 KiB
<template>
|
|
<view>
|
|
<view class="tui-order-item boxbg">
|
|
<block v-for="(item,index) in list" :key="index">
|
|
<view class="tui-goods-item" @tap="handleGoods(item)">
|
|
<image :src="item.picUrl" class="tui-goods-img"></image>
|
|
<view class="tui-goods-center">
|
|
<view class="tui-goods-name tui-goods">{{ item.goodsName ? item.goodsName : item.name }}</view>
|
|
<view class="tui-goods-attr tui-goods">{{ item.goodsName ? item.name : '货号' }}</view>
|
|
<view class="tui-goods-attr tui-goods" v-if="item.goodsName">￥{{ getPrice(item.price) }} x {{ item.count }}</view>
|
|
<view class="tui-goods-attr tui-goods" v-else>库存量 * 库存成本</view>
|
|
<view></view>
|
|
</view>
|
|
<view class="tui-price-right" v-if="item.totalAmount">
|
|
<view>￥{{ getPrice(item.totalAmount) }}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { handleError } from "vue";
|
|
export default {
|
|
props:{
|
|
list: {
|
|
type: [Object, Array],
|
|
default: {}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods:{
|
|
getPrice(price) {
|
|
price = price || 0;
|
|
return price.toFixed(2)
|
|
},
|
|
handleGoods(item) {
|
|
this.$emit('goodsClick',item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tui-order-item {
|
|
.tui-goods-item {
|
|
width: 100%;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.tui-goods-img {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
flex-shrink: 0;
|
|
}
|
|
.tui-goods-center {
|
|
flex: 1;
|
|
padding: 20rpx 8rpx;
|
|
box-sizing: border-box;
|
|
.tui-goods {
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-height: 32rpx;
|
|
}
|
|
.tui-goods-name {
|
|
font-weight: 700;
|
|
max-width: 310rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.tui-goods-attr {
|
|
font-size: 22rpx;
|
|
color: #888888;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
}
|
|
.tui-price-right {
|
|
text-align: right;
|
|
font-size: 26upx;
|
|
font-weight: 700;
|
|
line-height: 30rpx;
|
|
padding-top: 160rpx;
|
|
}
|
|
|
|
}
|
|
.tui-goods-info {
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
.tui-price-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.tui-size32 {
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
.tui-size-24 {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
}
|
|
.tui-price-large {
|
|
font-size: 32rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
.tui-flex-shrink {
|
|
flex-shrink: 0;
|
|
}
|
|
.tui-goods-price {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
}
|
|
.tui-primary-color {
|
|
color: #EB0909;
|
|
}
|
|
.tui-pbtm20 {
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|