178 lines
4.6 KiB
Vue
178 lines
4.6 KiB
Vue
<template>
|
||
<view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
|
||
<view class="nav-info flex flex-justify-between" >
|
||
<view>订单编号：{{ detail.order_no }}</view>
|
||
<view :style="{color:stateColor[detail.state] || ''}">{{ stateConfig[detail.state] }}</view>
|
||
</view>
|
||
<view class="order-info">
|
||
<view class="content flex">
|
||
<image
|
||
:src="detail.main_image"
|
||
class="pro-img"
|
||
/>
|
||
<view class="flex flex-1 flex-col">
|
||
<view class="flex flex-justify-between name info-item">
|
||
<view class="text-over">{{ detail.product_name }}</view>
|
||
<view class="amount"><text>￥</text>{{ detail.price }}<text>元</text></view>
|
||
</view>
|
||
<view class="flex flex-justify-between num">
|
||
<view>数量</view>
|
||
<view>x1</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="time">下单时间：{{ detail.create_time }}</view>
|
||
</view>
|
||
<view class="btns flex flex-justify-end">
|
||
<view class="btn del" @click="goDel">删除订单</view>
|
||
<view class="btn pay" v-if="[1].includes(detail.state)" @click="goPay">立即付款</view>
|
||
<view class="btn view" v-if="[3].includes(detail.state) && !!detail.voucher_link" @click="goPwd">查看卡券</view>
|
||
<view class="btn pay" @click="goRefund" v-if="[4].includes(detail.state)">申请退款</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { stateConfig, stateColor } from '../config';
|
||
const props = defineProps({
|
||
detail:{
|
||
type:Object,
|
||
required: true,
|
||
default:() => ({})
|
||
}
|
||
})
|
||
const emits = defineEmits(['pay-event','detail-event','pwd-event','del-event'])
|
||
|
||
function goPay(e){
|
||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||
e.stopPropagation();
|
||
}
|
||
emits('pay-event', props.detail);
|
||
}
|
||
|
||
|
||
function goDetail(e){
|
||
emits('detail-event', props.detail);
|
||
}
|
||
|
||
function goPwd(e){
|
||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||
e.stopPropagation();
|
||
}
|
||
emits('pwd-event', props.detail);
|
||
}
|
||
|
||
function goDel(e){
|
||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||
e.stopPropagation();
|
||
}
|
||
emits('del-event', props.detail);
|
||
}
|
||
|
||
function goRefund(e){
|
||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||
e.stopPropagation();
|
||
}
|
||
emits('refund-event', props.detail);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.order-item-wrapper{
|
||
width: 702rpx;
|
||
// height: 386rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding:24rpx;
|
||
margin:24rpx 0 16rpx;
|
||
}
|
||
.nav-info{
|
||
font-size:22rpx;
|
||
font-weight:400;
|
||
:first-child{
|
||
color: #333333;
|
||
}
|
||
:last-child{
|
||
color: #787878;
|
||
}
|
||
}
|
||
.order-info{
|
||
margin-top:24rpx;
|
||
.content{
|
||
margin-bottom:24rpx;
|
||
font-weight: 400;
|
||
.pro-img{
|
||
display: block;
|
||
width:90rpx;
|
||
height:90rpx;
|
||
margin-right:34rpx;
|
||
}
|
||
}
|
||
.time{
|
||
font-size: 22rpx;
|
||
color: #6C6C6C;
|
||
}
|
||
.info-item{
|
||
font-weight: bold;
|
||
margin-bottom:12rpx;
|
||
}
|
||
.text-over{
|
||
max-width:80%;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
.amount{
|
||
color: #333333;
|
||
font-weight: bold;
|
||
font-size:24rpx;
|
||
text:nth-child(1){
|
||
font-size:20rpx;
|
||
font-weight: 400;
|
||
}
|
||
text:nth-child(2){
|
||
font-size:22rpx;
|
||
}
|
||
}
|
||
.name{
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
font-weight: 700;
|
||
}
|
||
.num{
|
||
font-size: 20rpx;
|
||
color: #9E9E9E;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.btns{
|
||
border-top: 1rpx solid #F0E1E1;
|
||
padding:36rpx 0 12rpx;
|
||
margin-top:24rpx;
|
||
.btn{
|
||
width: 168rpx;
|
||
height: 64rpx;
|
||
border-radius: 68rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left:48rpx;
|
||
}
|
||
.del{
|
||
color: #545454;
|
||
border: 2rpx solid #B9C8C7;
|
||
}
|
||
.pay{
|
||
color: #FFFFFF;
|
||
background: #EA0000;
|
||
}
|
||
.view{
|
||
background: #FFFFFF;
|
||
border-radius: 68rpx;
|
||
border: 2rpx solid #EA0000;
|
||
color:#EA0000;
|
||
}
|
||
}
|
||
</style> |