724 lines
14 KiB
Vue
724 lines
14 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>
|
|
|
|
<div class="content3">
|
|
<scroll-view
|
|
:style="{ height: `${elementBottom}rpx` }"
|
|
class="scrollbox"
|
|
:scroll-y="true"
|
|
@scrolltolower="loadMore"
|
|
>
|
|
<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">
|
|
<div v-if="![1].includes(item.artworkStatus)">
|
|
{{ item.startAt.replaceAll('-', '.') || '' }}-{{
|
|
item.endAt.replaceAll('-', '.') || ''
|
|
}}
|
|
</div>
|
|
<div v-else>{{ item.cycleName }}</div>
|
|
</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">{{ item.endAt }}</div>
|
|
<div class="wrap1_3_1_2">已延期</div>
|
|
<div
|
|
class="wrap1_3_1_3"
|
|
v-if="item.isSupplementary"
|
|
@click.stop="openShow2(item)"
|
|
>
|
|
点击补款
|
|
</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 v-if="item.shelvesNum" class="wrap1_3_2">
|
|
<div class="wrap1_3_2_1">货架号:</div>
|
|
<div class="wrap1_3_2_2">{{ item.shelvesNum }}</div>
|
|
</div>
|
|
<div v-if="!item.shelvesNum" class="wrap1_3_2">
|
|
<div class="wrap1_3_2_2">
|
|
{{ item.warehouseName }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="wrap1_3_4"
|
|
v-if="![1, 5].includes(item.artworkStatus)"
|
|
@click.stop="pickUp(item)"
|
|
>
|
|
{{
|
|
item.isUserApplyPickUp ? '取消申请' : '申请取货'
|
|
}}
|
|
</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>
|
|
</scroll-view>
|
|
</div>
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<uni-popup-dialog
|
|
:type="'info'"
|
|
cancelText="关闭"
|
|
confirmText="确认"
|
|
title="提示"
|
|
:content="messageText"
|
|
@confirm="popForward"
|
|
></uni-popup-dialog>
|
|
</uni-popup>
|
|
<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 {
|
|
messageText: '',
|
|
show_1: false,
|
|
show: false,
|
|
mobileKey: '',
|
|
startX: 0,
|
|
windowWidth: 0,
|
|
page: 1,
|
|
elementBottom: '',
|
|
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: 7 },
|
|
{ label: '已取出', value: 5 }
|
|
],
|
|
status: 0
|
|
}
|
|
},
|
|
components: { UImage, tabbar },
|
|
mounted() {
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.windowWidth = res.windowWidth
|
|
}
|
|
})
|
|
this.getDistanceFromTopToPageBottom('.content3')
|
|
},
|
|
onShow() {
|
|
this.getData()
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
async pickUp(item) {
|
|
let url = ''
|
|
if (!item.isUserApplyPickUp) {
|
|
url = '/api/warehouse/apply/pickup'
|
|
} else {
|
|
url = '/api/warehouse/apply/pickup/cancel'
|
|
}
|
|
const data = {
|
|
ID: item.ID
|
|
}
|
|
const res = await postDataByParams(url, data)
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: '请求成功',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
this.getData()
|
|
},
|
|
popForward() {
|
|
if (this.messageText === '确认补款吗') {
|
|
this.supplementaryPayment()
|
|
} else if (this.messageText === '确认删除吗') {
|
|
this.deleteClick()
|
|
}
|
|
},
|
|
openShow2(item) {
|
|
this.item = item
|
|
this.messageText = `确认补款吗`
|
|
this.$refs.alertDialog.open()
|
|
},
|
|
async supplementaryPayment() {
|
|
const data = {
|
|
ID: this.item.ID
|
|
}
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: async ({ code }) => {
|
|
const res3 = await this.$api.login.getOpenId({ code })
|
|
if (res3.code === 200) {
|
|
const res = await postDataByParams(
|
|
'/api/warehouse/supply/paid',
|
|
data
|
|
)
|
|
if (res.code === 200) {
|
|
uni.requestPayment({
|
|
...res.data,
|
|
fail: (res) => {},
|
|
success: () => {
|
|
this.getData()
|
|
uni.showToast({
|
|
title: '补款成功',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} else {
|
|
this.$common.msgToast(res3.msg)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
async getDistanceFromTopToPageBottom(classValue) {
|
|
const { windowHeight, windowWidth } = await uni.getSystemInfo()
|
|
const [{ top }] = await new Promise((resolve) =>
|
|
uni
|
|
.createSelectorQuery()
|
|
.select(classValue)
|
|
.boundingClientRect()
|
|
.exec(resolve)
|
|
)
|
|
this.elementBottom =
|
|
((windowHeight - top) / windowWidth) * 750 - 175
|
|
/* if(uni.getSystemInfoSync().platform === 'ios'){
|
|
this.elementBottom = ((windowHeight - top) / windowWidth) * 750 - 175;
|
|
}else {
|
|
this.elementBottom = ((windowHeight - top) / windowWidth) * 750 - 110;
|
|
}*/
|
|
},
|
|
openDelete(item) {
|
|
this.messageText = `确认删除吗`
|
|
this.$refs.alertDialog.open()
|
|
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) {
|
|
if (this.mainList[index].artworkStatus !== 5) {
|
|
return
|
|
}
|
|
this.mainList[index].distanceX = e.touches[0].clientX - this.startX
|
|
},
|
|
touchStart(e, index) {
|
|
if (this.mainList[index].artworkStatus !== 5) {
|
|
return
|
|
}
|
|
this.mainList[index].isRight = true
|
|
this.startX = e.touches[0].clientX
|
|
},
|
|
touchEnd(index) {
|
|
if (this.mainList[index].artworkStatus !== 5) {
|
|
return
|
|
}
|
|
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;
|
|
box-sizing: border-box;
|
|
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png');
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
background-size: cover;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.content3 {
|
|
margin-top: 20rpx;
|
|
|
|
margin-bottom: 300rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
&.status7 {
|
|
background: #76c458;
|
|
|
|
.wrap1_3_3_1 {
|
|
font-size: 23rpx !important;
|
|
}
|
|
}
|
|
&.status3 {
|
|
background: #76c458;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #ff4848;
|
|
}
|
|
}
|
|
|
|
&.status4 {
|
|
background: #ff4848;
|
|
|
|
.wrap1_3_3_1 {
|
|
color: #ff4848;
|
|
}
|
|
}
|
|
.wrap1_3_4 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
width: 110rpx;
|
|
height: 35rpx;
|
|
background-color: #000;
|
|
left: 20rpx;
|
|
position: absolute;
|
|
bottom: 16rpx;
|
|
font-size: 18rpx;
|
|
}
|
|
.wrap1_3_2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
bottom: 60rpx;
|
|
min-width: fit-content;
|
|
.wrap1_3_2_1 {
|
|
white-space: nowrap;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.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>
|