From 23db8ee6063226480f964ed1de3ece9310e221a2 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 21 八月 2024 09:37:43 +0800 Subject: [PATCH] 提交 --- pages/tabBar/firstPage/firstPage.vue | 805 +++++++++++++++++++++++++++++++-------------------------- 1 files changed, 437 insertions(+), 368 deletions(-) diff --git a/pages/tabBar/firstPage/firstPage.vue b/pages/tabBar/firstPage/firstPage.vue index 12619cf..039b813 100644 --- a/pages/tabBar/firstPage/firstPage.vue +++ b/pages/tabBar/firstPage/firstPage.vue @@ -12,82 +12,102 @@ <!-- </view>--> </view> </view> - <view style="width: 100%;padding: 0 15px;box-sizing: border-box;margin: 20px 0"> - <u-swiper :list="swiperList" indicatorMode="dot" circular height="160" indicator previousMargin="30" nextMargin="30"></u-swiper> - </view> - - <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" - @scrolltolower="lower" lower-threshold="150" @scroll="scrollView" style="height:calc(100vh - 335px)"> - <view class="m-p-15"> - <view class="card" style="width:100%"> - <view class="card-t"> - <span class="card-t-l">我的线上课程</span> - <span class="card-t-r" @click="toCourses">查看全部</span> - </view> - <view class="card-c"> - <view class="card-i" v-for="(item,index) in classList" :key="index"> - <u-image radius="16px" width="200rpx" height="200rpx" :show-loading="true" :src="getImageUrl(item.course.logo)" mode="aspectFill"> - </u-image> - <!-- <view class="card-i-t">目前已学:{{item.totalProgress}}分钟</view>--> - <view class="card-i-r"> - <view class="card-i-r-t"> - <view>{{item.phaseName + '-' + item.course.name}}</view> - <span style="color: #999;font-size: 12px;display: flex;align-items: center"><u-icon name="account" color="#999" size="18" style="margin-bottom: 0;margin-right: 2px"></u-icon>{{item.createName +'('+ item.createTime +')'}}</span> - </view> - <view class="card-i-r-b"> - <u-tag icon="clock" :text="secondsToHms(item.course.period)" type="success" size="mini" shape="circle" plain plainFill></u-tag> - <u-button class="study-button" type="primary" text="开始学习" shape="circle" size="small" @click="toStudy(item)"></u-button> - </view> - </view> + <u-toast ref="uToast"></u-toast> + <view class="cardList"> + <view class="switchPanel"> + <view class="switchBtns"> + <view class="btnItem" @click="changeTab(1)"> + 危化品 + </view> + <view class="btnItem" @click="changeTab(2)"> + 成品 </view> </view> - </view> - </view> - <view class="m-p-15"> - <view class="card" style="width:100%"> - <view class="card-t"> - <span class="card-t-l">我的考试</span> - <uni-data-select - v-model="examParams.state" - placeholder="完成状态" - :localdata="examSelect" - :clear="true" - @change="changeExam" - ></uni-data-select> - </view> - <view class="card-c card-d" v-if="examList && examList.length>0"> - <view class="paper-card" v-for="(item,index) in examList" :key="index"> - <view class="paper-card-t"><span :class="item.state == 0?'blue':item.state == 1?'red':'green'">[{{item.state == 0?'待考试':item.state == 1?'待批阅':'批阅完成'}}]</span>{{item.examPaper.name}}</view> - <u-tag style="margin-right: 20rpx;display: inline-block" :text="item.examPaper.categoryName" size="mini"></u-tag> - <u-tag style="display: inline-block" :text="item.examPaper.limited == 1?'时长:' + item.examPaper.limitTime + '分钟':'不限时'" plain plainFill size="mini"></u-tag> - <view class="paper-card-b"> - <view style="font-size: 12px;margin-top: 10px;color: #999"> - <view>创建人:{{item.createName}}</view> - <view>截止日期:{{item.examPaper.deadline.substring(0,10)}}</view> - </view> - <view> - <u-button v-if="item.state == 0" @click="toExam(item,1)" class="exam-button" type="primary" text="开始考试" shape="circle" size="small"></u-button> - <u-button v-if="item.state == 2" @click="toExam(item,2)" class="exam-button" type="primary" text="查看" shape="circle" size="small"></u-button> - </view> - </view> - </view> - </view> - <view class="card-c card-d" v-else> - <u-empty text="该状态暂无记录" mode="data"></u-empty> + <view class="colBlock" :style="blockStyle"> + {{blockText}} </view> </view> </view> - - </scroll-view> + <view class="cardList" v-show="tabNum == 1"> + <view class="cardItem" v-for="(item,index) in cardList1" :key="index" @click="scanCode(item.title)"> + <u-image radius="16px" width="140rpx" height="140rpx" :show-loading="true" :src="item.icon" mode="aspectFill"> + </u-image> + <view class="cardTit"> + {{item.title}} + </view> + </view> + </view> + <view class="cardList" v-show="tabNum == 2"> + <view class="cardItem" v-for="(item,index) in cardList2" :key="index" @click="scanCode(item.title)"> + <u-image radius="16px" width="140rpx" height="140rpx" :show-loading="true" :src="item.icon" mode="aspectFill"> + </u-image> + <view class="cardTit"> + {{item.title}} + </view> + </view> + </view> + <u-modal :show="showModal" :title="modalTitle" :showConfirmButton="false" :closeOnClickOverlay="true" ref="uModal" :asyncClose="true" @close="closeModal()"> + <view v-if="tabNum == 1" style="font-size: 32rpx;font-weight: bold;margin-bottom: 10px"> + {{hazmat.hazmatBasic?hazmat.hazmatBasic.name:'--'}}({{hazmat.hazmatBasic?hazmat.hazmatBasic.productSn:'--'}}) + </view> + <view v-if="tabNum == 2" style="font-size: 32rpx;font-weight: bold;margin-bottom: 10px"> + {{product.productBasic?product.productBasic.name:'--'}}({{product.productBasic?product.productBasic.productSn:'--'}}) + </view> + <view> + 二维码识别号:{{tabNum == 1?hazmat.code:product.code}} + </view> + <view> + 入库时间:{{tabNum == 1?hazmat.createTime:product.createTime}} + </view> + <view v-if="modalTitle == '取用' || modalTitle == '扫码作废'"> + <span v-if="tabNum == 1">当前包装存量:{{hazmat.remaining}}{{hazmat.hazmatBasic?hazmat.hazmatBasic.unit:''}}</span> + <span v-else>当前包装存量:{{product.remaining}}{{product.productBasic?product.productBasic.unit:''}}</span> + </view> + <view v-if="modalTitle == '归还' || modalTitle == '用尽登记'"> + 取用时存量:{{hazmat.remaining}}{{hazmat.hazmatBasic?hazmat.hazmatBasic.unit:''}} + </view> + <br> + <view v-if="modalTitle == '归还'"> + 请输入归还剩余量: + <u--form labelPosition="left" :model="hazmatBack" :rules="rules" ref="uForm"> + <u-form-item + prop="remaining" + ref="remaining" + > + <u--input + v-model="hazmatBack.remaining" + :placeholder="'必填(单位:' + (hazmat.hazmatBasic?hazmat.hazmatBasic.unit:'') + ')'" + type="number" + ></u--input> + </u-form-item> + </u--form> + </view> + <u-button v-if="modalTitle == '取用'" type="primary" style="margin-top: 20px" text="确认取用" @click="confirmTake()"></u-button> + <u-button v-if="modalTitle == '归还'" type="primary" style="margin-top: 20px" text="确认归还" @click="confirmBack()"></u-button> + <u-button v-if="modalTitle == '用尽登记'" type="warning" style="margin-top: 20px" text="确认用尽登记" @click="confirmCheck()"></u-button> + <u-button v-if="modalTitle == '销售'" type="primary" style="margin-top: 20px" text="确认销售" @click="confirmSell()"></u-button> + <u-button v-if="modalTitle == '扫码作废'" type="error" style="margin-top: 20px" text="确认作废该二维码" @click="confirmCancle()"></u-button> + </u-modal> <tabBar :currentPagePath="page"></tabBar> </view> </template> <script> import tabBar from '../tabBarIndex.vue' - import {getClassList, getExamList, getSwiperList} from '../../../api/index.js' + import { + getHazmatByCode, + postHazmatReturn, + postHazmatUse, + postHazmatUsed, + postHazmatDiscard, + postProductDiscard, getProductByCode, postProductSold + } from '../../../api/index.js' import VUE_APP_BASE_URL from 'common/constant.js' -import { Value } from 'sass'; + import take from '../../../static/take.png' + import takeBack from '../../../static/return.png' + import check from '../../../static/check.png' + import del from '../../../static/delete.png' + import sell from '../../../static/sell.png' import {postEndExam} from "../../../api/wearhouse"; export default { components:{ @@ -95,36 +115,63 @@ }, data() { return { - swiperList: [ - '/static/home/swiperPic.png','/static/home/swiperPic.png','/static/home/swiperPic.png' - ], - titleList:[ - { - label: '默认排序', - value: 1, - } - ], - classList: [], - examList: [], - totalPage: 0, page: 'pages/tabBar/firstPage/firstPage', statusBarHeight: '', - classParams:{ - pageNum: 1, - pageSize: 3, - }, - examParams: { - pageNum: 1, - pageSize: 10, - state: 0 - }, - examSelect: [ - { value: 0, text: "待考试" }, - { value: 1, text: "待批阅" }, - { value: 2, text: "批阅完成" }, + cardList1: [ + { + icon: take, + title: '取用', + type: 1 + }, + { + icon: takeBack, + title: '归还', + type: 2 + }, + { + icon: check, + title: '用尽登记', + type: 3 + }, + { + icon: del, + title: '扫码作废', + type: 4 + } ], - role: '', - realname:'' + cardList2: [ + { + icon: sell, + title: '销售', + type: 1 + }, + { + icon: del, + title: '扫码作废', + type: 4 + } + ], + showModal: false, + modalTitle: '取用', + hazmat: {}, + product: {}, + hazmatBack: { + id: null, + remaining: '' + }, + rules: { + remaining: { + type: 'string', + required: true, + message: '归还剩余量不可为空', + trigger: ['blur', 'change'] + } + }, + tabNum: 1, + blockText: '原材料', + blockStyle: { + transform: 'translateX(0px)' + } } }, @@ -132,12 +179,6 @@ //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; // uni.hideTabBar(); - this.examList = [] - this.classParams.pageNum = 1 - this.examParams.pageNum = 1 - this.getSwiper() - this.getClass() - this.getExamList() }, onShow(){ // this.role = uni.getStorageSync('roleName'); @@ -148,63 +189,225 @@ created(){ uni.hideTabBar() }, + mounted() { + + }, methods: { - loginOut() { - uni.clearStorageSync(); - uni.clearStorage(); - uni.navigateTo({ - url: '/pages/index/index' - }) - }, - - changeExam(e) { - this.examParams.pageNum = 1 - this.getExamList() - }, - - async getSwiper(){ - const res = await getSwiperList() - if(res.code == 200){ - let list = res.data.list || [] - if(list.length>0){ - this.swiperList = list.map(i=>VUE_APP_BASE_URL + '/api/' + i.imgUrl) - } - }else{ - uni.$u.toast(res.message) - } - }, - - getClass(){ - getClassList(this.classParams).then(res => { - if(res.code == 200) { - if(res.data && res.data.list.length > 0){ - this.classList = res.data.list - }else { - this.classList = [] - } - }else{ - uni.$u.toast(res.message) - } - }) - }, - getExamList(){ - getExamList(this.examParams).then(res => { - if(res.code == 200) { - let list = res.data.list?res.data.list: []; - if (res.data.pageNum != 1) { - this.examList = this.examList.concat(list) - } else { - this.examList = res.data.list + scanCode(title){ + const t = this + t.modalTitle = title + uni.scanCode({ + autoZoom: false, + success: function (res) { + if(res && res.result){ + if(t.tabNum == 1){ + getHazmatByCode({code: res.result}).then((re)=>{ + if(re.code == 200){ + t.hazmat = re.data + t.showModal = true + }else{ + t.$refs.uToast.show({ + type: 'default', + message: re.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + }else{ + getProductByCode({code: res.result}).then((re)=>{ + if(re.code == 200){ + t.product = re.data + t.showModal = true + }else{ + t.$refs.uToast.show({ + type: 'default', + message: re.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + } + }else{ + t.$refs.uToast.show({ + type: 'default', + message: '该二维码已失效或不包含条码信息', + }) } - this.totalPage = res.data.totalPage - }else{ - uni.$u.toast(res.message) } }) }, - getImageUrl(logo) { - return logo ? VUE_APP_BASE_URL + '/api/' + logo : '/static/defaultCover.jpg'; + confirmTake(){ + const t = this + postHazmatUse(t.hazmat.id).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + t.showModal = false + }, + + confirmBack() { + const t = this + t.$refs.uForm.validate().then(res => { + t.hazmatBack.id = t.hazmat.id + t.hazmatBack.remaining = Number(t.hazmatBack.remaining) + postHazmatReturn(t.hazmatBack).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + t.showModal = false + t.hazmatBack.remaining = '' + }).catch(errors => { + uni.$u.toast('请完善必填信息') + }) + }, + + confirmCheck(){ + const t = this + postHazmatUsed(t.hazmat.id).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + t.showModal = false + }, + + confirmSell(){ + const t = this + postProductSold(t.product.id).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + t.showModal = false + }, + + confirmCancle(){ + const t = this + if(t.tabNum == 1){ + postHazmatDiscard(t.hazmat.id).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + }else{ + postProductDiscard(t.product.id).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + } + t.showModal = false + }, + + closeModal(){ + this.hazmat = {} + this.product = {} + this.hazmatBack={ + id: null, + remaining: '' + } + this.showModal = false + }, + + changeTab(num){ + this.tabNum = num + if(num == 1){ + this.blockStyle.transform = 'translateX(0px)' + this.blockText = '危化品' + }else{ + this.blockStyle.transform = 'translateX(calc(100% - 2px))' + this.blockText = '成品' + } + console.log(this.tabNum,'num') }, toStudy(item) { @@ -212,59 +415,6 @@ uni.navigateTo({ url: `/pages/tabBar/current/detail?bank=` + encodeURIComponent(JSON.stringify(item)) }) - }, - - toExam(item,type){ - if(type == 1 && !item.startTime && item.examPaper.limited == 1){ - uni.showModal({ - title: '提示', - content: '该考试限制时长为:' + item.examPaper.limitTime + '分钟,进入后开始计时,计时结束自动交卷,是否继续?', - success: function (res) { - if (res.confirm) { - uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage'); - uni.navigateTo({ - url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) + `&type=` + encodeURIComponent(JSON.stringify(type)) - }) - } else if (res.cancel) { - console.log('用户点击取消'); - } - } - }) - }else{ - uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage'); - uni.navigateTo({ - url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) + `&type=` + encodeURIComponent(JSON.stringify(type)) - }) - } - }, - - secondsToHms(seconds) { - seconds = Number(seconds); - const h = Math.floor(seconds / 3600); - const m = Math.floor(seconds % 3600 / 60); - const s = Math.floor(seconds % 3600 % 60); - - const hDisplay = h > 0 ? String(h).padStart(2, '0') : '00'; - const mDisplay = m > 0 ? String(m).padStart(2, '0') : '00'; - const sDisplay = s > 0 ? String(s).padStart(2, '0') : '00'; - return `${hDisplay}:${mDisplay}:${sDisplay}`; - }, - - upper(e) { - // console.log(e) - }, - lower(e) { - //并且让页码+1,调用获取数据的方法获取第二页数据 - this.examParams.pageNum++ - //此处调用自己获取数据列表的方法 - if (this.examParams.pageNum > this.totalPage){ - uni.$u.toast('已加载全部数据') - return - } - this.getExamList() - }, - scrollView(e) { - // console.log(e) }, toCourses(){ @@ -278,7 +428,7 @@ </script> -<style lang="scss"> +<style lang="scss" scoped> .navBarBox .navBar { background-color:#fff; height: 50px; @@ -286,8 +436,7 @@ flex-direction: row; justify-content: center; align-items: center; - box-shadow: 0 3px 12px rgba(0,0,0,0.05); - + box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .fix{ position: sticky; @@ -302,187 +451,107 @@ font-size: 16px; font-weight: 600; flex: 2; - margin-left: 45%; + text-align: center; } .statusBar{ background-color:lightgrey; } -.m-p-15{ - width: 100%; - box-sizing: border-box; - padding: 0 15px; +/deep/ .u-toast__content{ + white-space: pre-wrap !important; + word-break: break-all !important; + word-wrap: break-word !important; } -.card{ - width: 100%; - margin-bottom: 40rpx; +/deep/ .u-modal__content{ + display: flex; + flex-direction: column !important; + align-items: center; + text-align: left; - .card-t{ + &>view{ width: 100%; - padding: 0 6rpx; - box-sizing: border-box; + } +} +.switchPanel{ + width: 100%; + height: 84rpx; + position: relative; + border: 2px solid #fff; + box-sizing: border-box; + border-radius: 8px; + box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.05) inset !important; + + .switchBtns{ + width: 100%; + height: 80rpx; + position: absolute; + top: 0; + left: 0; display: flex; align-items: center; justify-content: space-between; - margin-bottom: 20rpx; + z-index: 99; - .card-t-l{ - font-size: 32rpx; - font-weight: bold; - } - .card-t-r{ - color: #999; - cursor: pointer; - } - /deep/ .uni-stat__select{ - display: flex; - flex: 0; - justify-content: right; - .uni-stat-box{ - display: flex; - - flex: 0; - justify-content: right; - .uni-select{ - width: 320rpx; - border-radius: 99px; - padding: 0 10px; - background: #fff; - - .uni-select__input-placeholder{ - color: #999; - } - } - } - + .btnItem{ + width: 50%; + height: 100%; + box-sizing: border-box; + text-align: center; + line-height: 80rpx; } } - .card-c{ - background: #fff; - border-radius: 20px; - padding: 15px; - - .card-i{ - padding-bottom: 15px; - margin-bottom: 15px; - border-bottom: 1px solid #f0f0f0; - position: relative; - display: flex; - align-items: flex-start; - box-sizing: border-box; - - &:last-of-type{ - margin-bottom: 0; - padding-bottom: 0; - border-bottom: none; - } - .card-i-t{ - position: absolute; - width: 250rpx; - height: 30px; - border-radius: 8rpx; - line-height: 30px; - color: #fff; - padding: 0 10rpx; - box-sizing: border-box; - left: 0; - bottom: 0; - background: rgba(0,0,0,.4); - } - .card-i-r{ - width: 100%; - height: 200rpx; - margin-left: 20rpx; - display: flex; - flex-direction: column; - justify-content: space-between; - .card-i-r-t{ - view{ - font-size: 32rpx; - margin-bottom: 10rpx; - font-family: "PingFang SC"; - font-weight: 800; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - } - .card-i-r-b{ - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - - .study-button{ - width: 220rpx; - margin: 0; - box-shadow: 3px 3px 12px rgba(51,133,217,.3), -2px -2px 6px #fff; - border: 1px solid rgba(255,255,255,.8); - } - } - } - } - } - .card-d{ - background: none; - padding: 0 0 15px; - .paper-card{ - background: #fff; - margin-bottom: 15px; - padding: 15px; - box-sizing: border-box; - position: relative; - border-radius: 20px; - - &:last-of-type{ - margin-bottom: 0; - } - - .paper-card-t{ - font-size: 32rpx; - margin-bottom: 10rpx; - font-family: "PingFang SC"; - font-weight: 800; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .blue{ - font-size: 28rpx; - color: #0f7ff9 - } - - .green{ - font-size: 28rpx; - color: #5ac725 - } - .red{ - font-size: 28rpx; - color: #f56c6c - } - } - - .paper-card-b{ - display: flex; - align-items: flex-end; - justify-content: space-between; - - .exam-button{ - width: 220rpx; - margin: 0; - box-shadow: 3px 3px 12px rgba(51,133,217,.3), -2px -2px 6px #fff; - border: 1px solid rgba(255,255,255,.8); - } - } - } + .colBlock{ + position: absolute; + top: 5rpx; + left: 0; + z-index: 999; + width: 50%; + height: 70rpx; + border-radius: 8px; + background: rgb(0,172,238); + background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important; + transition: .4s; + text-align: center; + line-height: 70rpx; + color: #fff; + font-weight: bold; + letter-spacing: 2px; + border: 2rpx solid #fff; } } +.cardList{ + width: 100%; + box-sizing: border-box; + padding: 0 15px; + margin-top: 20px; + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; -.badge span{ - text-align: center; - width: 100%; + .cardItem{ + width: 100%; + padding: 15px 30px; + box-sizing: border-box; + margin-bottom: 15px; + background: #fff; + border-radius: 40rpx; + display: flex; + align-items: center; + box-shadow: 0 10rpx 20rpx rgba(0,0,0,.05); + transition: box-shadow .15s ease !important; + + &:active{ + box-shadow: none; + } + + .cardTit{ + font-size: 36rpx; + font-weight: bold; + margin-left: 30px; + } + } } </style> \ No newline at end of file -- Gitblit v1.9.2