我的订单

This commit is contained in:
shijingjing
2022-11-24 09:41:26 +08:00
parent 788de30fd2
commit 0fcb1fdf74

View File

@@ -4,36 +4,44 @@
<div class="tab-select">
<div class="item" :class="tabIndex == index? 'active': ''" v-for="(item,index) in tabList" :key="index" @click="toCheck(index)">{{ item }}<span></span></div>
</div>
<div class="card-List" v-if="orderList.length">
<div class="item" v-for="(item,index) in orderList" :key="index">
<div @click="$linkTo(`./detail?id=${item.id}`)">
<!-- v-if="orderList.length" -->
<div class="card-List">
<!-- v-for="(item,index) in orderList" :key="index" -->
<div class="item" >
<!-- @click="$linkTo(`./detail?id=${item.id}`)" -->
<div>
<div class="title">
<div>{{ item.createTime }}</div>
<div :style="{color: item.orderStatus==0? '#FF883C':item.orderStatus==1? '#42D784': '#999999'}">{{ item.orderStatus | format }}</div>
<div>2020-12-11 10:10</div>
<!-- :style="{color: item.orderStatus==0? '#FF883C':item.orderStatus==1? '#42D784': '#999999'}" -->
<div>待收货</div>
</div>
<div class="list" v-for="(e,indexs) in item.merchandiseList" :key="indexs">
<!-- v-for="(e,indexs) in item.merchandiseList" :key="indexs" -->
<div class="list">
<div class="list-item">
<div class="picture">
<img :src="JSON.parse(e.merchandisePhoto)[0].url" alt="">
<img src="./components/imgs/check-icon.png" alt="">
</div>
<div class="info">
<div class="name">{{ e.merchandiseName }}</div>
<div class="name">天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸可湿水面巾</div>
<div class="info-num">
<div class="num">x<span>{{ e.merchandiseNumber }}</span></div>
<div class="integral"><span>{{ e.merchandiseNumber * e.costIntegral }}</span>积分</div>
<div class="num">数量2<span></span></div>
<div class="integral"><span>10</span>积分</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn" v-if="item.orderStatus == 0">
<div class="cancel" @click="cancelBtn(item.id)">取消订单</div>
<div class="confirm" @click="confirmBtn(item.id)">核销码</div>
<div class="remark">
备注明天自己上门取货
</div>
<!-- v-if="item.orderStatus == 0" -->
<div class="btn">
<div class="cancel" @click="cancelBtn(item.id)">取消订单</div>
<div class="confirm">核销码<span>293049</span></div>
</div>
</div>
</div>
</div>
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
<!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty> -->
</div>
</template>
@@ -144,6 +152,7 @@ export default {
font-size: 28px;
box-sizing: border-box;
padding: 128px 32px 32px 32px;
box-sizing: border-box;
.item {
width: 100%;
background: #FFFFFF;
@@ -156,14 +165,18 @@ export default {
height: 104px;
line-height: 104px;
padding: 0 32px;
box-sizing: border-box;
border-bottom: 1px solid #EEEEEE;
}
.list {
padding: 0 32px;
box-sizing: border-box;
height: 100%;
.list-item {
display: flex;
padding: 32px 0;
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
.picture {
width: 176px;
height: 176px;
@@ -175,7 +188,6 @@ export default {
}
.info {
width: calc(100% - 192px);
.name {}
.info-num {
margin-top: 24px;
display: flex;
@@ -194,26 +206,36 @@ export default {
}
}
}
.remark {
padding: 16px 32px;
box-sizing: border-box;
border-top: 1px solid #EEEEEE;
}
.btn {
height: 128px;
height: 100px;
display: flex;
justify-content: flex-end;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
border-top: 1px solid #EEEEEE;
div {
margin-top: 32px;
margin-top: 14px;
width: 176px;
height: 64px;
line-height: 64px;
border: 1px solid #DDDDDD;
border-radius: 52px;
text-align: center;
}
div:first-child {
margin-right: 32px;
border: 1px solid #DDDDDD;
border-radius: 52px;
}
div:last-child {
color: #FFFFFF;
background: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
color: #999999;
width: calc(100% - 200px);
text-align: right;
}
}
}