<template>
|
<u-popup v-model="popupShow" border-radius="6" mode="center" width="90%" height="80%">
|
<view class="myHasOrder-wrap content">
|
<u-loading class="loading-box" size="36" v-if="loadingShow"></u-loading>
|
<view v-if="goodslist.length && !loadingShow" style="display: block;">
|
<view class="today">今日配送订单</view>
|
<scroll-view scroll-y="true" style="height: 640rpx">
|
<view class="table">
|
<view class="table-title">
|
<view class="title-name">配送卷烟名称</view>
|
<view class="title-num">条数</view>
|
</view>
|
<view class="table-main">
|
<view class="main-block" v-for="(item) in goodslist" :key="item.id">
|
<view class="main-name">{{item.product}}</view>
|
<view class="main-num">{{item.num}}</view>
|
</view>
|
<!-- <view class="main-block">
|
<view class="main-name">钻石(硬特醇)</view>
|
<view class="main-num">10</view>
|
</view>-->
|
|
</view>
|
|
</view>
|
</scroll-view>
|
<view class="peisong-total">
|
<text>配送总数:</text>
|
<text>{{totalComputed}}条</text>
|
</view>
|
<view class="tishi">如果订单有误请电话咨询您的客户经理</view>
|
<button class="custom-style" @click="confirmBtn">确认无误</button>
|
</view>
|
|
<view v-if="goodslist.length == 0 && !loadingShow">
|
<view class="empty-box">
|
<image class="emptyImage" src="../../static/image/empty.png" mode="aspectFit"></image>
|
</view>
|
<view class="riqi">今天不是您的送烟日期</view>
|
<button @click="gotoNoticeDetail" class="custom-style">使用其它功能</button>
|
</view>
|
</view>
|
</u-popup>
|
|
</template>
|
|
<script>
|
export default {
|
name:"hasOrder",
|
data() {
|
return {
|
goodslist:[],
|
total:0, //商品总数
|
popupShow: false,
|
loadingShow:true
|
};
|
},
|
computed: {
|
totalComputed() {
|
let total = 0
|
this.goodslist.forEach(item => {
|
total += item.num
|
})
|
return total
|
}
|
},
|
onshow() {
|
this.getTodayOrder()
|
},
|
methods:{
|
init() {
|
this.popupShow = true
|
this.getTodayOrder()
|
},
|
getTodayOrder() { //获取今日配送订单
|
console.log('this.$store==',this.$store)
|
let customerId = this.$store.state.customerId
|
console.log('customerId====',customerId)
|
this.$u.api.getTodayOrder({customerId:customerId}).then(res => {
|
if(res.code == 200) {
|
console.log(res,'res')
|
this.goodslist = res.result
|
this.loadingShow = false
|
}
|
})
|
},
|
gotoNoticeDetail() { //点击使用其它功能跳转通知页面
|
uni.switchTab({
|
url:'../../pages/notice/notice'
|
})
|
},
|
confirmBtn() {
|
this.popupShow = false
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
<style lang="scss" scoped>
|
.custom-style{
|
background-color: #1F9F4C;
|
width: 280rpx;
|
height: 72rpx;
|
color: #FFFFFF;
|
font-size: 28rpx;
|
font-weight: Light;
|
margin-top: 60rpx;
|
}
|
|
.myHasOrder-wrap{
|
width: 92%;
|
margin: 0 auto;
|
|
}
|
.today{
|
font-size: 32rpx;
|
color: #111111;
|
font-weight: Light;
|
text-align: center;
|
line-height: 2;
|
padding: 20rpx;
|
}
|
.table{
|
display: flex;
|
flex-direction: column;
|
border: 1px solid #CCCCCC;
|
}
|
.table-title{
|
display: flex;
|
height: 68rpx;
|
line-height: 68rpx;
|
background-color: #1F9F4C;
|
.title-name,{
|
flex: 2;
|
color: #FFFFFF;
|
font-size: 28rpx;
|
font-weight: lighter;
|
text-align: center;
|
border-right: 1px solid #CCCCCC;
|
}
|
.title-num{
|
flex: 1;
|
color: #FFFFFF;
|
font-size: 28rpx;
|
font-weight: lighter;
|
text-align: center;
|
}
|
}
|
.table-main{
|
display: flex;
|
flex-direction: column;
|
}
|
.main-block{
|
display: flex;
|
height: 68rpx;
|
line-height: 68rpx;
|
background-color: #FFFFFF;
|
border-bottom: 1px solid #CCCCCC;
|
&:last-child{
|
border-bottom: none;
|
}
|
.main-name{
|
flex: 2;
|
color: #111111;
|
font-size: 28rpx;
|
font-weight: light;
|
text-align: center;
|
border-right: 1px solid #CCCCCC;
|
}
|
.main-num{
|
flex: 1;
|
color: #111111;
|
font-size: 28rpx;
|
font-weight: light;
|
text-align: center;
|
}
|
}
|
.peisong-total{
|
display: flex;
|
margin-top: 40rpx;
|
text{
|
font-size: 28rpx;
|
color: #111111;
|
line-height: 2;
|
}
|
}
|
.tishi{
|
font-size: 28rpx;
|
color: #111111;
|
}
|
.empty-box{
|
display: flex;
|
justify-content: center;
|
}
|
.emptyImage{
|
width: 490rpx;
|
height: 490rpx;
|
margin-top: 60rpx;
|
}
|
.riqi{
|
font-size: 28rpx;
|
color: #111111;
|
text-align: center;
|
}
|
.loading-box{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 100rpx;
|
}
|
</style>
|
