119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
<template>
|
||
<view class="order bg-white m-b-20">
|
||
<!-- Header -->
|
||
<view class="order-header flex row-between">
|
||
<view class="normal nr">
|
||
订单编号： {{data.order_sn}}
|
||
</view>
|
||
<view class="order-status nr m-l-20">
|
||
{{data.order_status_text}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Stction -->
|
||
<block v-for="(item, index) in data.order_goods">
|
||
<view class="order-section flex m-b-20 col-top" @click="toDetail(data.id)">
|
||
<view class="image">
|
||
<u-image :src="item.image" width="160rpx" height="160rpx"></u-image>
|
||
</view>
|
||
|
||
<view class="m-l-16 line-2">
|
||
<!-- 订单名称 -->
|
||
<view class="m-t-10">
|
||
<view class="order-name line-2">
|
||
{{item.goods_name}}
|
||
</view>
|
||
</view>
|
||
<!-- 商品规格 -->
|
||
<view class="order-str m-t-10">{{item.spec_value}}</view>
|
||
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<view class=" flex row-right">
|
||
<!-- 实付款金额 -->
|
||
<view class="muted flex sm m-t-10">
|
||
<view>共{{data.order_goods.length}}件，实付款: </view>
|
||
<price class="header-content-price" :content="data.order_amount" main-size="30rpx" minor-size="22rpx"
|
||
color="#FF4141" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Footer -->
|
||
<view class="order-footer flex row-right">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* @description 订单管理卡片
|
||
*
|
||
* @example <order-card :data="order" />
|
||
*/
|
||
|
||
export default {
|
||
name: 'GoodsCard',
|
||
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
toDetail(id) {
|
||
this.$Router.push({
|
||
path: '/pages/order_detail/order_detail',
|
||
query: {
|
||
id
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order {
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&-header {
|
||
padding-bottom: 20rpx;
|
||
.order-status {
|
||
color: $-color-primary;
|
||
}
|
||
}
|
||
|
||
&-section {
|
||
width: 100%;
|
||
|
||
.order-name {
|
||
width: 100%;
|
||
color: $-color-black;
|
||
font-size: $-font-size-nr;
|
||
}
|
||
|
||
.order-str {
|
||
color: $-color-muted;
|
||
font-size: $-font-size-xs;
|
||
}
|
||
|
||
>view {
|
||
width: 100%;
|
||
}
|
||
|
||
.image {
|
||
flex: 0;
|
||
}
|
||
}
|
||
|
||
&-footer {}
|
||
}
|
||
</style>
|