541 lines
11 KiB
Vue
541 lines
11 KiB
Vue
<template>
|
||
<view
|
||
class="content common_bg"
|
||
:style="{
|
||
backgroundImage: `url(${$img('/static/img/global_page_bg.png')})`
|
||
}"
|
||
>
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="发货记录"
|
||
color="#fff"
|
||
backgroundColor="transparent"
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
:border="false"
|
||
@clickLeft="back"
|
||
></uni-nav-bar>
|
||
|
||
<view class="tab-list">
|
||
<view
|
||
@click="getlist(i + 1)"
|
||
v-for="(item, i) in arr"
|
||
:key="i"
|
||
class="tab-list-item"
|
||
:class="{
|
||
active: show == i + 1
|
||
}"
|
||
>
|
||
{{ item }}
|
||
|
||
<image
|
||
v-if="show == i + 1"
|
||
class="arrow"
|
||
:src="$img('/static/img/tab_arrow.png')"
|
||
mode="scaleToFill"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="head">
|
||
<view
|
||
class="status_bar"
|
||
:style="'height:' + statusBarHeight + 'px;'"
|
||
></view>
|
||
<view class="header_title">
|
||
<view @click="back()">
|
||
<image :src="z_imgPath + 'back.png'"></image>
|
||
返回
|
||
</view>
|
||
<view class="hang1">发货记录</view>
|
||
</view>
|
||
<view class="qiehuan">
|
||
<view @click="getlist(i + 1)" v-for="(v, i) in arr" :key="i">
|
||
<view :class="show == i + 1 ? 'xzs' : 'wzs'">{{ v }}</view>
|
||
<view class="qiehuan_line" v-if="show == i + 1">
|
||
<image src="../../static/shouye/top.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 内容 -->
|
||
<mescroll-body
|
||
ref="mescrollRef"
|
||
@init="mescrollInit"
|
||
:down="downOption"
|
||
@down="downCallback"
|
||
@up="upCallback"
|
||
>
|
||
<view
|
||
@click="toorder(v.id)"
|
||
class="xuyuan common_bg"
|
||
v-for="(v, i) in listData"
|
||
:key="i"
|
||
v-if="listData.length > 0"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/send_item_border.png')})`
|
||
}"
|
||
>
|
||
<view class="xuyuan_head">
|
||
<view>申请时间：{{ v.addtime }}</view>
|
||
<view style="color: #fff" v-if="v.status == 1">待发货</view>
|
||
<view style="color: #fff" v-if="v.status == 2">待收货</view>
|
||
<view style="color: #fff" v-if="v.status == 3">已完成</view>
|
||
</view>
|
||
<view class="xuyuan_con">
|
||
<view
|
||
class="xuyuan_item common_bg"
|
||
v-for="(a, b) in v.order_list"
|
||
:key="b"
|
||
:style="{
|
||
'background-image': `url(${$img(
|
||
'/static/img/send_prize_item_border.png'
|
||
)})`
|
||
}"
|
||
>
|
||
<view class="list_img">
|
||
<image :src="a.goodslist_imgurl"></image>
|
||
<view class="shang_title">
|
||
<view class="type">
|
||
{{ a.shang_title }}
|
||
</view>
|
||
|
||
<view class="num">×{{ a.prize_num }}</view>
|
||
</view>
|
||
<!-- <view class="allNum">X{{a.prize_num}}</view> -->
|
||
</view>
|
||
<view class="xuyuan_item_2 flex_center hang1">
|
||
<view class="hang1">{{ a.goodslist_title }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="xuyuan_foot">
|
||
<!-- <view
|
||
class="qrsh"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'mine/detail_bg.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
v-if="v.status == 1"
|
||
@click="toorder(v.id)"
|
||
>
|
||
查看详情
|
||
</view> -->
|
||
|
||
<template v-if="v.status == 2">
|
||
<!-- <view
|
||
class="ckwl"
|
||
@click="toorder(v.id)"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'mine/detail_bg.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
查看详情
|
||
</view> -->
|
||
<view
|
||
class="ckwl common_bg"
|
||
@click.stop="towuliu(v.id)"
|
||
:style="{
|
||
backgroundImage: `url(${$img('/static/img/send_ckwl.png')})`
|
||
}"
|
||
>
|
||
<!-- 查看物流 -->
|
||
</view>
|
||
<view
|
||
class="qrsh common_bg"
|
||
@click.stop="quren(v.id)"
|
||
:style="{
|
||
backgroundImage: `url(${$img('/static/img/send_qrsh.png')})`
|
||
}"
|
||
>
|
||
<!-- 确认收货 -->
|
||
</view>
|
||
</template>
|
||
<!-- <view
|
||
class="detail_gray"
|
||
v-if="v.status == 3"
|
||
@click="toorder(v.id)"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'mine/shouhuo_bg.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
查看详情
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
z_imgPath: this.$z_img2,
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
arr: ['已申请', '已发货', '已完成'],
|
||
show: 1,
|
||
|
||
downOption: {
|
||
auto: false
|
||
},
|
||
|
||
listData: []
|
||
}
|
||
},
|
||
onLoad(e) {},
|
||
methods: {
|
||
back() {
|
||
uni.navigateBack()
|
||
},
|
||
quren(e) {
|
||
let that = this
|
||
that.req({
|
||
url: 'warehouse_send_confirm',
|
||
data: {
|
||
id: e
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'success',
|
||
duration: 1500,
|
||
success() {
|
||
setTimeout(() => {
|
||
that.loadData(1)
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
toorder(e) {
|
||
this.$customRouter.navigateTo('/pages/shouye/detail', {
|
||
goods_id: e,
|
||
goods_num: 1
|
||
})
|
||
},
|
||
towuliu(e) {
|
||
this.$customRouter.navigateTo('/pages/shouye/wuliu_detail', { id: e })
|
||
},
|
||
getlist(v) {
|
||
this.show = v
|
||
this.listData = []
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
|
||
downCallback() {
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
upCallback(page) {
|
||
this.loadData(page.num)
|
||
},
|
||
loadData(pageNo) {
|
||
let that = this
|
||
that.req({
|
||
url: 'warehouse_send_record',
|
||
Loading: true,
|
||
data: {
|
||
page: pageNo,
|
||
status: that.show
|
||
},
|
||
success(res) {
|
||
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||
if (pageNo == 1) {
|
||
that.listData = res.data.data
|
||
} else {
|
||
that.listData = that.listData.concat(res.data.data)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.allNum {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
right: 0rpx;
|
||
font-size: 22rpx;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
border-radius: 8rpx 0 0 8rpx;
|
||
color: #fff;
|
||
padding: 5rpx 10rpx;
|
||
}
|
||
|
||
.list_img .shang_title {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
left: 0;
|
||
/* width: 100%; */
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
/* font-family: 'zcq'; */
|
||
text-align: left;
|
||
padding: 4rpx 10rpx;
|
||
box-sizing: border-box;
|
||
/* border: 1px solid #000000; */
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.type {
|
||
font-size: 22rpx;
|
||
font-family: zihun147hao-xingyuanhei;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.list_img > image {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
// margin: 1rpx auto;
|
||
}
|
||
|
||
.list_img {
|
||
/* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
position: relative;
|
||
}
|
||
|
||
/* .detail_gray {
|
||
background: #96FFFE;
|
||
color: #222222;
|
||
}
|
||
|
||
.ckwl {
|
||
border: 1rpx solid #96FFFE;
|
||
color: #96FFFE;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.qrsh {
|
||
background: #96FFFE;
|
||
color: #222222;
|
||
} */
|
||
|
||
.xuyuan_foot > view {
|
||
width: 206rpx;
|
||
height: 84rpx;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
font-family: YouSheBiaoTiHei;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.xuyuan_foot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
// padding-top: 20rpx;
|
||
padding: 20rpx 0 0;
|
||
// width: 690rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.xuyuan_item_2 {
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
width: 100%;
|
||
margin-top: 4rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.xuyuan_item > image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
}
|
||
|
||
.xuyuan_item {
|
||
width: 229rpx !important;
|
||
height: 240rpx;
|
||
box-sizing: border-box;
|
||
padding: 18rpx 20rpx 0;
|
||
}
|
||
|
||
.xuyuan_con {
|
||
display: flex;
|
||
margin: 14rpx auto 0;
|
||
width: 630rpx;
|
||
box-sizing: border-box;
|
||
// border-bottom: 1rpx solid #5c5c5c;
|
||
padding-bottom: 20rpx;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
.xuyuan_head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
}
|
||
|
||
.xuyuan {
|
||
width: 690rpx;
|
||
// height: 422rpx;
|
||
margin: 0 auto 24rpx;
|
||
padding-top: 24rpx;
|
||
padding-bottom: 24rpx;
|
||
box-sizing: border-box;
|
||
/* background: #11141D; */
|
||
/* border: 1px solid #9E9E9E; */
|
||
/* border-radius: 10rpx; */
|
||
/* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
|
||
}
|
||
|
||
.qiehuan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
width: 400rpx;
|
||
}
|
||
|
||
.qiehuan_line {
|
||
margin: -10rpx auto;
|
||
width: 30rpx;
|
||
height: 20rpx;
|
||
border-bottom: 4rpx solid #70ede8;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.qiehuan_line > image {
|
||
width: 30rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.qiehuan > view {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.wzs {
|
||
font-size: 34rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.xzs {
|
||
font-size: 34rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
/* height: 176rpx; */
|
||
padding-bottom: 30rpx;
|
||
background: #222222;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
/* #ifdef MP */
|
||
top: 0;
|
||
/* #endif */
|
||
/* #ifndef MP */
|
||
top: 88rpx;
|
||
/* #endif */
|
||
z-index: 15;
|
||
}
|
||
|
||
.content {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
// padding-top: calc(var(--status-bar-height) + 200rpx);
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
.head {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 20;
|
||
|
||
.header_title {
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
> view:nth-of-type(1) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
> view:nth-of-type(2) {
|
||
width: 520rpx;
|
||
text-align: center;
|
||
/* margin: auto; */
|
||
}
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-list {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
|
||
.tab-list-item {
|
||
margin-right: 40rpx;
|
||
position: relative;
|
||
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
.arrow {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -28rpx;
|
||
transform: translateX(-50%);
|
||
width: 40rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
&.active {
|
||
text-shadow: 0 0 10rpx #ba39ff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|