|
|
@@ -1,52 +1,155 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="order_item" v-for="(item,i) in 5" :key="i">
|
|
|
- <div class="order_item_header">
|
|
|
- <div class="order_item_header_l">
|
|
|
- <div class="Serial_number">#005</div>
|
|
|
- <img src="" class="logo">
|
|
|
- <span class="name">礼颂至品（娄葑店）</span>
|
|
|
- <div class="sign_time">17:30前送达</div>
|
|
|
- <div class="sign_txt">立即送达</div>
|
|
|
- <div class="sign_d">预约 09/10 17:30自动发起配送</div>
|
|
|
+ <div>
|
|
|
+ <!-- <div style="width:100%;height:10px" v-if="!list.length"></div> -->
|
|
|
+ <!-- 新订单 -->
|
|
|
+ <div v-if="tabNum==0">
|
|
|
+ <div class="order_item" v-for="(item,i) in list" :key="i">
|
|
|
+ <div class="order_item_header">
|
|
|
+ <div class="order_item_header_l">
|
|
|
+ <div class="Serial_number">#{{item.daySeq}}</div>
|
|
|
+ <img :src="item.logo" class="logo">
|
|
|
+ <span class="name">{{item.shopName}}</span>
|
|
|
+ <div class="sign_time" v-if="item.takeType==1">{{item.exceptTime}}前送达</div>
|
|
|
+ <div class="sign_txt" v-if="item.takeType==0">立即送达</div>
|
|
|
+ <!-- <div class="sign_d">预约 09/10 17:30自动发起配送</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="order_item_header_r">
|
|
|
+ <!-- <span class="header_r">已发单1分钟</span> -->
|
|
|
+ <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="order_item_cont">
|
|
|
+ <div class="itme_l">
|
|
|
+ <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
|
|
|
+ <div class="address">
|
|
|
+ {{item.receiptProvinceName}}
|
|
|
+ {{item.receiptCityName}}
|
|
|
+ {{item.receiptDistrictName}}
|
|
|
+ {{item.receiptAddress}}
|
|
|
+ <span v-if="item.orderDistance"><i class="el-icon-location"></i>{{item.orderDistance}}km</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="order_item_header_r">
|
|
|
- <span class="header_r">已发单1分钟</span>
|
|
|
- <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 预约单 -->
|
|
|
+ <div v-if="tabNum==1">
|
|
|
+ <div class="order_item" v-for="(item,i) in list" :key="i">
|
|
|
+ <div class="order_item_header">
|
|
|
+ <div class="order_item_header_l">
|
|
|
+ <div class="Serial_number">#{{item.daySeq}}</div>
|
|
|
+ <img :src="item.logo" class="logo">
|
|
|
+ <span class="name">{{item.shopName}}</span>
|
|
|
+ <div class="sign_d">预约 {{item.timeTxt}}自动发起配送</div>
|
|
|
+ </div>
|
|
|
+ <div class="order_item_header_r">
|
|
|
+ <!-- <span class="header_r">已发单1分钟</span> -->
|
|
|
+ <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="order_item_cont">
|
|
|
+ <div class="itme_l">
|
|
|
+ <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
|
|
|
+ <div class="address">
|
|
|
+ {{item.receiptProvinceName}}
|
|
|
+ {{item.receiptCityName}}
|
|
|
+ {{item.receiptDistrictName}}
|
|
|
+ {{item.receiptAddress}}
|
|
|
+ <span v-if="item.orderDistance"><i class="el-icon-location"></i>{{item.orderDistance}}km</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <div class="order_item_cont">
|
|
|
- <div class="itme_l">
|
|
|
- <div class="content">王女士<span>18015468888-1157</span></div>
|
|
|
- <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i class="el-icon-location"></i>1.3km</span></div>
|
|
|
+ <!-- 待接单 -->
|
|
|
+ <div v-if="tabNum==2">
|
|
|
+ <div class="order_item" v-for="(item,i) in list" :key="i">
|
|
|
+ <div class="order_item_header">
|
|
|
+ <div class="order_item_header_l">
|
|
|
+ <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
|
|
|
+ <img :src="item.logo" class="logo">
|
|
|
+ <span class="name">{{item.shopName}}</span>
|
|
|
+ <div class="sign_d" v-if="item.exceptTime">预约 {{item.timeTxt}}送达</div>
|
|
|
+ </div>
|
|
|
+ <div class="order_item_header_r">
|
|
|
+ <span class="header_r">已发单{{item.takeTimeTxt}}</span>
|
|
|
+ <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="order_item_cont">
|
|
|
+ <div class="itme_l">
|
|
|
+ <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
|
|
|
+ <div class="address">
|
|
|
+ {{item.receiptProvinceName}}
|
|
|
+ {{item.receiptCityName}}
|
|
|
+ {{item.receiptDistrictName}}
|
|
|
+ {{item.receiptAddress}}
|
|
|
+ <span v-if="item.orderDistance"><i class="el-icon-location"></i>{{item.orderDistance}}km</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 发起配送 -->
|
|
|
- <send-order-popup ref="sendOrderPopup"></send-order-popup>
|
|
|
+ <!-- 取货中 -->
|
|
|
+ <div v-if="tabNum==3">
|
|
|
+ <div class="order_item" v-for="(item,i) in list" :key="i">
|
|
|
+ <div class="order_item_header">
|
|
|
+ <div class="order_item_header_l">
|
|
|
+ <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
|
|
|
+ <img :src="item.logo" class="logo">
|
|
|
+ <span class="name">{{item.shopName}}</span>
|
|
|
+ <div class="sign_d" v-if="item.exceptTime">预约 {{item.timeTxt}}送达</div>
|
|
|
+ </div>
|
|
|
+ <div class="order_item_header_r">
|
|
|
+ <span class="header_r">预计{{item.takeTimeTxt}}取件</span>
|
|
|
+ <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="order_item_cont">
|
|
|
+ <div class="itme_l">
|
|
|
+ <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
|
|
|
+ <div class="address">
|
|
|
+ {{item.receiptProvinceName}}
|
|
|
+ {{item.receiptCityName}}
|
|
|
+ {{item.receiptDistrictName}}
|
|
|
+ {{item.receiptAddress}}
|
|
|
+ <span v-if="item.orderDistance"><i class="el-icon-location"></i>{{item.orderDistance}}km</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 发起配送 -->
|
|
|
+ <send-order-popup ref="sendOrderPopup"></send-order-popup>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import sendOrderPopup from './sendOrderPopup.vue';
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'OrderList',
|
|
|
- data() {
|
|
|
- return {}
|
|
|
- },
|
|
|
- props: {
|
|
|
- tabNum: Number,
|
|
|
- },
|
|
|
- components: {
|
|
|
- sendOrderPopup
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- deleteItem(index) {
|
|
|
+ import sendOrderPopup from './sendOrderPopup.vue';
|
|
|
+export default {
|
|
|
+ name: 'OrderList',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ tabNum: Number,
|
|
|
+ list:Array
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ sendOrderPopup
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deleteItem(index) {
|
|
|
this.$refs.sendOrderPopup.init();
|
|
|
},
|
|
|
},
|
|
|
@@ -55,132 +158,102 @@
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
<style lang="scss" scoped="scoped">
|
|
|
- .order_item {
|
|
|
- width: 100%;
|
|
|
- height: 140px;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
-
|
|
|
- .order_item_header {
|
|
|
- width: 100%;
|
|
|
- height: 49px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid #F0F0F0;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .order_item_header_l, .order_item_header_r {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .Serial_number {
|
|
|
- width: 60px;
|
|
|
- height: 26px;
|
|
|
- background: #FC7200;
|
|
|
- border-radius: 0 30px 30px 0;
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- width: 21px;
|
|
|
- height: 21px;
|
|
|
- border-radius: 50%;
|
|
|
- background: crimson;
|
|
|
- margin-left: 23px;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .sign_time {
|
|
|
- width: 84px;
|
|
|
- height: 20px;
|
|
|
- border: 1px solid #009CFF;
|
|
|
- background: #F2FAFF;
|
|
|
- border-radius: 2px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- color: #009CFF;
|
|
|
- margin-left: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .sign_txt {
|
|
|
- width: 64px;
|
|
|
- height: 20px;
|
|
|
- border: 1px solid #009CFF;
|
|
|
- background: #F2FAFF;
|
|
|
- border-radius: 2px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- color: #009CFF;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .sign_d {
|
|
|
- height: 20px;
|
|
|
- border: 1px solid #F74141;
|
|
|
- background: #FFF5F5;
|
|
|
- border-radius: 2px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- color: #F74141;
|
|
|
- margin-left: 10px;
|
|
|
- padding: 0 7px;
|
|
|
- }
|
|
|
-
|
|
|
- .header_r {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- margin-right: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- background: #FC7200;
|
|
|
- border-color: #FC7200;
|
|
|
- color: #FFF;
|
|
|
- // position: absolute;
|
|
|
- // right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order_item_cont {
|
|
|
- width: 100%;
|
|
|
- height: 90px;
|
|
|
- padding: 0 11px 0 19px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .itme_l {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- line-height: 26px;
|
|
|
-
|
|
|
- .content span {
|
|
|
- margin-left: 15px;
|
|
|
+.order_item{
|
|
|
+ width: 100%;
|
|
|
+ height: 140px;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .order_item_header{
|
|
|
+ width: 100%;
|
|
|
+ height: 49px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .order_item_header_l,.order_item_header_r{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .Serial_number{
|
|
|
+ width: 60px;
|
|
|
+ height: 26px;
|
|
|
+ background: #FC7200;
|
|
|
+ border-radius: 0 30px 30px 0;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ .logo{
|
|
|
+ width: 21px;
|
|
|
+ height: 21px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: 23px;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .sign_time{
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #009CFF;
|
|
|
+ background: #F2FAFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #009CFF;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ .sign_txt{
|
|
|
+ width: 64px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #009CFF;
|
|
|
+ background: #F2FAFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #009CFF;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .sign_d{
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #F74141;
|
|
|
+ background: #FFF5F5;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #F74141;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 0 7px;
|
|
|
+ }
|
|
|
+ .header_r{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 22px;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ background: #FC7200;
|
|
|
+ border-color: #FC7200;
|
|
|
+ color: #FFF;
|
|
|
+ // position: absolute;
|
|
|
+ // right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.address span {
|
|
|
@@ -195,6 +268,5 @@
|
|
|
font-weight: 400;
|
|
|
color: #B1B1B1;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
</style>
|
ZhouFeng