You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
500 lines
12 KiB
Vue
500 lines
12 KiB
Vue
<template>
|
|
<div class="order-goods">
|
|
<title-block title="订单库">
|
|
<template #left>
|
|
<u-action-sheet
|
|
:show="show"
|
|
:actions="statusValue.map(x=>({name:x.label,value:x.value}))"
|
|
title="请选择状态"
|
|
@close="show = false"
|
|
@select="statusSelect"
|
|
>
|
|
</u-action-sheet>
|
|
<div @click="openStatus" class="wrap1">
|
|
<div class="wrap1_1">
|
|
<div class="wrap1_1_1">{{ statusValue.find(x => x.value === artworkStatus).label }}</div>
|
|
<image style="width: 12rpx;height: 8rpx" src="../../static/dbx2@3x.png"></image>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</title-block>
|
|
<div class="content2">
|
|
<div class="wrap1">
|
|
<div class="wrap1_1">
|
|
<image src="../../static/zu1@3x.png"></image>
|
|
</div>
|
|
<div class="wrap1_2"></div>
|
|
<input v-model="mobileKey" placeholder-style="color: #C7C7C7;font-size: 20rpx;"
|
|
placeholder="在此处搜索您的订单"/>
|
|
</div>
|
|
<div class="wrap2" @click="search">
|
|
搜索
|
|
</div>
|
|
|
|
</div>
|
|
<scroll-view style=" margin-top: 28rpx;" class="scrollbox" :scroll-y="true" @scrolltolower="loadMore">
|
|
<div class="content3">
|
|
<div
|
|
v-for="(item,index) in mainList" :key="index"
|
|
@touchstart="(e)=>{touchStart(e,index)}"
|
|
@touchmove="(e)=>{touchMove(e,index)}"
|
|
@touchend="()=>{touchEnd(index)}"
|
|
@click="goRouter(item)"
|
|
:style="{transform: `translateX(${item.distanceX}px)`}" class="wrap1">
|
|
<div class="wrap1_1">
|
|
<image :src="item.artworkImg?item.artworkImg:'../../static/jx632@3x.png'"></image>
|
|
</div>
|
|
<div class="wrap1_2">
|
|
<div class="wrap1_2_1">{{ item.artworkName }}</div>
|
|
<div class="wrap1_2_2">订单号:{{ item.artworkName }}</div>
|
|
<div class="wrap1_2_3">{{ item.artworkSquareSize }}平尺</div>
|
|
<div class="wrap1_2_4">{{ item.startAt }}-{{ item.endAt }}</div>
|
|
</div>
|
|
<div class="wrap1_3" :class="[`status${item.artworkStatus}`]">
|
|
<div class="wrap1_3_1" v-if="item.artworkStatus===4">
|
|
<div class="wrap1_3_1_1">2023.09.28</div>
|
|
<div class="wrap1_3_1_2">已延期</div>
|
|
<div class="wrap1_3_1_3">点击补款</div>
|
|
</div>
|
|
<div class="wrap1_3_3" v-if="item.artworkStatus!==4">
|
|
<div class="wrap1_3_3_1">{{ statusValue.find(x => x.value === item.artworkStatus).label }}</div>
|
|
</div>
|
|
<div class="wrap1_3_2">
|
|
<div class="wrap1_3_2_1">货架号:</div>
|
|
<div class="wrap1_3_2_2">{{ item.shelvesNum }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrap1_4" v-if="item.isRight&&item.artworkStatus===5" @click.stop="openDelete(item)">
|
|
<image style="width: 80rpx;height: 80rpx" src="../../static/zu154@3x.png"></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
<u-modal :show="show_1" title="确认删除吗" @cancel="show_1=false" @confirm="deleteClick" confirmText="确认"
|
|
cancelText="取消" showCancelButton></u-modal>
|
|
<tabbar :current="1"></tabbar>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import tabbar from "../../components/uiq-tabbar/uiq-tabbar.vue";
|
|
import UImage from "../../uview-ui/components/u--image/u--image.vue";
|
|
import {postDataByParams} from "../../http/service";
|
|
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
show_1: false,
|
|
show: false,
|
|
mobileKey: '',
|
|
startX: 0,
|
|
windowWidth: 0,
|
|
page: 1,
|
|
item: null,
|
|
artworkStatus: 0,
|
|
pageSize: 999,
|
|
mainList: [],
|
|
statusValue: [{label: '全部状态', value: 0}, {label: '待入库', value: 1}, {
|
|
label: '已入库',
|
|
value: 2
|
|
}, {label: '即将到期', value: 3}, {label: '已延期', value: 4}, {label: '已取出', value: 5}]
|
|
}
|
|
},
|
|
components: {UImage, tabbar},
|
|
mounted() {
|
|
this.getData()
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.windowWidth = res.windowWidth
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
openDelete(item) {
|
|
this.show_1 = true
|
|
this.item = item
|
|
},
|
|
async deleteClick() {
|
|
this.show_1 = false
|
|
const data = {
|
|
ID: this.item.ID
|
|
}
|
|
const res = await postDataByParams('/api/warehouse/remove', data)
|
|
if (res.code === 200) {
|
|
this.getData()
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
goRouter(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/order-goods/order-details?ID=${item.ID}`
|
|
})
|
|
},
|
|
search() {
|
|
this.getData()
|
|
},
|
|
statusSelect(data) {
|
|
this.artworkStatus = data.value
|
|
this.getData()
|
|
},
|
|
openStatus() {
|
|
this.show = true
|
|
},
|
|
loadMore() {
|
|
console.log('loadMore')
|
|
},
|
|
async getData() {
|
|
const data = {
|
|
page: this.page, //分页
|
|
pageSize: this.pageSize, //每页数据量
|
|
status: this.artworkStatus, //状态(1-待入库 2-已入库 3-即将到期 4-已延期 5-已取出)
|
|
mobileKey: this.mobileKey
|
|
}
|
|
const res = await postDataByParams('/api/warehouse/list', data)
|
|
if (res.code === 200) {
|
|
this.mainList = res.data.data
|
|
this.mainList?.forEach((x) => {
|
|
this.$set(x, 'distanceX', 0)
|
|
this.$set(x, 'isRight', false)
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
touchMove(e, index) {
|
|
this.mainList[index].distanceX = e.touches[0].clientX - this.startX;
|
|
},
|
|
touchStart(e, index) {
|
|
this.mainList[index].isRight = true
|
|
this.startX = e.touches[0].clientX;
|
|
},
|
|
touchEnd(index) {
|
|
if (this.mainList[index].distanceX < -((144 / 750) * this.windowWidth)) {
|
|
this.mainList[index].distanceX = -((144 / 750) * this.windowWidth);
|
|
} else {
|
|
this.mainList[index].isRight = false
|
|
this.mainList[index].distanceX = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
.order-goods {
|
|
overflow: hidden;
|
|
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
|
|
box-sizing: border-box;
|
|
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
background-size: cover;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.content3 {
|
|
height: 2000rpx;
|
|
|
|
margin-bottom: 166rpx;
|
|
|
|
.wrap1 {
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
padding-left: 20rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
height: 228rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.wrap1_4 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 228rpx;
|
|
width: 154rpx;
|
|
background-color: #B7C0C8;
|
|
right: -144rpx;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.wrap1_3 {
|
|
border-top-right-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
display: flex;
|
|
margin-left: auto;
|
|
|
|
position: relative;
|
|
width: 144rpx;
|
|
height: 228rpx;
|
|
|
|
&.status5 {
|
|
background: #939393;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #939393;
|
|
}
|
|
}
|
|
|
|
&.status1 {
|
|
background: #FFBA00;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #FFBA00;
|
|
}
|
|
}
|
|
|
|
&.status2 {
|
|
background: #76C458;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #76C458;
|
|
}
|
|
}
|
|
|
|
&.status3 {
|
|
background: #76C458;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #FF4848;
|
|
}
|
|
}
|
|
|
|
&.status4 {
|
|
background: #FF4848;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #FF4848;
|
|
}
|
|
}
|
|
|
|
.wrap1_3_2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
left: 20rpx;
|
|
position: absolute;
|
|
bottom: 60rpx;
|
|
|
|
.wrap1_3_2_1 {
|
|
color: #fff;
|
|
font-size: 16rpx;
|
|
}
|
|
|
|
.wrap1_3_2_2 {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.wrap1_3_3 {
|
|
padding-top: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-top-right-radius: 15rpx;
|
|
left: 4rpx;
|
|
top: 4rpx;
|
|
width: 136rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
|
|
.wrap1_3_3_1 {
|
|
text-align: center;
|
|
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.wrap1_3_1 {
|
|
|
|
padding-bottom: 6rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-top-right-radius: 15rpx;
|
|
left: 4rpx;
|
|
top: 4rpx;
|
|
width: 136rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
|
|
.wrap1_3_1_1 {
|
|
font-size: 16rpx;
|
|
color: #FF4848;
|
|
}
|
|
|
|
.wrap1_3_1_2 {
|
|
font-size: 24rpx;
|
|
color: #FF4848;
|
|
}
|
|
|
|
.wrap1_3_1_3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
font-size: 16rpx;
|
|
width: 110rpx;
|
|
height: 34rpx;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrap1_2 {
|
|
margin-left: 14rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
|
|
.wrap1_2_1 {
|
|
margin-bottom: 12rpx;
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.wrap1_2_2 {
|
|
margin-bottom: 12rpx;
|
|
color: #808080;
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
|
|
.wrap1_2_3 {
|
|
margin-bottom: 12rpx;
|
|
color: #808080;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.wrap1_2_4 {
|
|
|
|
color: #FF4848;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.wrap1_1 {
|
|
image {
|
|
width: 188rpx;
|
|
height: 188rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content2 {
|
|
margin-top: 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.wrap2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
width: 94rpx;
|
|
height: 52rpx;
|
|
background-color: #4E964D;
|
|
}
|
|
|
|
.wrap1 {
|
|
align-items: center;
|
|
display: flex;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
width: 586rpx;
|
|
height: 52rpx;
|
|
|
|
.wrap1_2 {
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
width: 1rpx;
|
|
height: 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
input {
|
|
|
|
}
|
|
|
|
.wrap1_1 {
|
|
margin-left: 26rpx;
|
|
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.wrap3 {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
width: 132rpx;
|
|
height: 52rpx;
|
|
background-color: #76C458;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.wrap2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.wrap2_1 {
|
|
color: #4E964D;
|
|
font-size: 32rpx;
|
|
|
|
}
|
|
|
|
.wrap2_2 {
|
|
color: #7C9F6F;
|
|
font-size: 16rpx;
|
|
}
|
|
}
|
|
|
|
.wrap1 {
|
|
.wrap1_1 {
|
|
justify-content: center;
|
|
border-radius: 20rpx;
|
|
width: 156rpx;
|
|
height: 52rpx;
|
|
background-color: #4E964D;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|