328 lines
9.6 KiB
Vue
328 lines
9.6 KiB
Vue
<template>
|
||
<view>
|
||
<view class="order--content" :class="[pattern ? 'chunk': 'broad']">
|
||
<view class="order--group--header" @click="$emit('onBtn', {type: 'shopsDetail', order: orderInfo})">
|
||
<image class="logo" v-if="orderInfo.shop.cover != ''" :src="orderInfo.shop.cover" mode="aspectFill">
|
||
</image>
|
||
<view class="store">
|
||
{{orderInfo.shop.name}}
|
||
<uni-icons type="right" size="16" color="#666" />
|
||
</view>
|
||
<view class="stateText" :style="{color: stateColor}">
|
||
{{orderInfo.collage.status_text}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order--header">
|
||
<view class="order--no">
|
||
订单号：{{orderInfo.no}}
|
||
</view>
|
||
</view>
|
||
<view class="order--flex" @click="$emit('onBtn', {type: 'goodsDetail', order: orderInfo})">
|
||
<image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image>
|
||
<view class="order--title">
|
||
{{orderInfo.name}}
|
||
<view class="unit"> {{orderInfo.unit}} </view>
|
||
</view>
|
||
<view class="order--count">
|
||
<view class="order--price">{{orderInfo.price}}<text>DT积分</text></view>
|
||
<view class="order--sum">共{{orderInfo.sum}} 件</view>
|
||
</view>
|
||
</view>
|
||
<slot name="btns">
|
||
<view class="flexrow">
|
||
<view class="">
|
||
<u-avatar-group :random-bg-color="true" :urls="orderInfo.users" size="26" gap="0.4"
|
||
class="avatar-group" />
|
||
</view>
|
||
<view class="order--btns">
|
||
<view v-if="orderInfo.collage.status =='3'" class="item item--sign"
|
||
@click="$emit('onBtn', {type: 'share', order: orderInfo})">
|
||
分享拼团
|
||
</view>
|
||
<view class="item item--cancel" @click="$emit('onBtn', {type: 'goInfo', order: orderInfo})">
|
||
查看详情
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
props: {
|
||
// 订单样式否为块
|
||
pattern: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 店铺模式
|
||
stores: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 订单信息
|
||
orderInfo: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
cover: "",
|
||
name: "",
|
||
price: "",
|
||
sum: 1,
|
||
collage: {},
|
||
users: [],
|
||
invite: '',
|
||
order: {},
|
||
}
|
||
}
|
||
},
|
||
// 状态标签颜色
|
||
stateColor: {
|
||
type: String,
|
||
default: "#FF6160"
|
||
},
|
||
// 可操作按钮组
|
||
orderBtns: {
|
||
type: Array,
|
||
default: () => {
|
||
return [{
|
||
text: "订单详情",
|
||
type: "info"
|
||
}, {
|
||
text: "删除订单",
|
||
type: "delete",
|
||
style: {
|
||
color: "#FF6160"
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
$margin: 30rpx;
|
||
$radius: 10rpx;
|
||
|
||
.text-nowrap {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.text-ellipsis {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.order--content {
|
||
background: white;
|
||
|
||
&.chunk {
|
||
margin: $margin $margin;
|
||
border-radius: $radius;
|
||
padding: $margin;
|
||
}
|
||
|
||
&.broad {
|
||
padding: $margin;
|
||
border-bottom: solid 1rpx #ddd;
|
||
}
|
||
|
||
.order--header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: $margin;
|
||
border-top: solid 1rpx #f9f9f9;
|
||
align-items: center;
|
||
|
||
&>.order--no {
|
||
flex: 1;
|
||
margin-right: $margin;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
color: #555;
|
||
@extend .text-nowrap;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
&>.stateText {
|
||
font-size: 26rpx;
|
||
color: $text-price;
|
||
}
|
||
}
|
||
|
||
.order--flex {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.order--cover {
|
||
vertical-align: top;
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
}
|
||
|
||
.order--title {
|
||
@extend .text-ellipsis;
|
||
text-align: left;
|
||
flex: 1;
|
||
padding-left: $margin;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
|
||
.unit {
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.order--count {
|
||
text-align: right;
|
||
padding-left: $margin;
|
||
line-height: 40rpx;
|
||
|
||
// color: $text-price;
|
||
.order--price {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
|
||
&>text {
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.order--sum {
|
||
font-size: 26rpx;
|
||
color: #777;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order--group {
|
||
.order--group--header {
|
||
padding-bottom: $margin;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
&>.logo {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
vertical-align: middle;
|
||
margin-right: $margin/2;
|
||
}
|
||
|
||
&>.store {
|
||
@extend .text-nowrap;
|
||
flex: 1;
|
||
margin-right: $margin;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #555;
|
||
}
|
||
|
||
&>.stateText {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.order--group--flex {
|
||
@extend .order--flex;
|
||
margin-bottom: $margin - 10;
|
||
|
||
&:last-child {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order--group--header {
|
||
padding-bottom: $margin;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
&>.logo {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
vertical-align: middle;
|
||
margin-right: $margin/2;
|
||
}
|
||
|
||
&>.store {
|
||
@extend .text-nowrap;
|
||
flex: 1;
|
||
margin-right: $margin;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #555;
|
||
}
|
||
|
||
&>.stateText {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.order--group--flex {
|
||
@extend .order--flex;
|
||
margin-bottom: $margin - 10;
|
||
|
||
&:last-child {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.flexrow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding-top: $margin - 10;
|
||
border-top: solid 1rpx #f9f9f9;
|
||
margin-top: $margin - 10;
|
||
}
|
||
|
||
.order--btns {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
// padding-top: $margin - 10;
|
||
&>.item {
|
||
font-size: 26rpx;
|
||
margin-left: $margin/2;
|
||
color: #333;
|
||
line-height: 56rpx;
|
||
border: solid 1rpx #ddd;
|
||
padding: 0 ($margin - 10);
|
||
border-radius: 28rpx;
|
||
|
||
&--cancel,
|
||
&--delete,
|
||
&--logistic {
|
||
color: #666;
|
||
}
|
||
|
||
&--pay,
|
||
&--sign {
|
||
color: #34CE98;
|
||
border-color: #34CE98;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|