<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 class="wrap1_3_2" v-if="!item.shelvesNum"> <div class="wrap1_3_2_2">{{item.warehouseName}}</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> </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}] } }, components: {UImage, tabbar}, mounted() { uni.getSystemInfo({ success: (res) => { this.windowWidth = res.windowWidth } }) this.getDistanceFromTopToPageBottom('.content3') }, onShow(){ this.getData() }, computed: {}, methods: { 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 } const res = await postDataByParams('/api/warehouse/supply/paid', data) if (res.code===200){ uni.showToast({ title: '补款成功', icon: 'none' }) }else { uni.showToast({ title: res.msg, icon: 'none' }) } }, 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_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>