From 10bab6c75eb356f4ec4cf17e24257f98dcb08235 Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期三, 24 八月 2022 14:26:49 +0800 Subject: [PATCH] # --- pages/basics/notificationFile.vue | 167 ++++++++++++--- pages/basics/saless.vue | 341 ++++++++++++++++++++++++++++++++++ pages.json | 9 pages/basics/demo.vue | 8 App.vue | 41 ++++ 5 files changed, 527 insertions(+), 39 deletions(-) diff --git a/App.vue b/App.vue index 5297fa3..b604d88 100644 --- a/App.vue +++ b/App.vue @@ -401,6 +401,7 @@ height: 100rpx; } .square-1 { + position: relative; background-color: #ffffff; box-shadow: 0px 0px 5px #d9d9d9; width: 94%; @@ -465,4 +466,44 @@ line-height: 80rpx; text-align: center; } + .searchBox { + position: absolute; + width: 94%; + height: 80%; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + background-color: #F9F9F9; + border-radius: 20rpx; + } + .searchIcon { + display: inline-block; + float: left; + width: 10%; + height: 100%; + text-align: center; + line-height: 80rpx; + } + + .searchArea { + display: inline-block; + float: left; + width: 80%; + height: 100%; + } + .searchArea input { + height: 100%; + font-size: 14px; + color: #5f5f5f; + } + .closeIcon { + display: inline-block; + float: left; + width: 10%; + height: 100%; + text-align: center; + line-height: 80rpx; + } </style> diff --git a/pages.json b/pages.json index 1905c48..9ca07af 100644 --- a/pages.json +++ b/pages.json @@ -110,6 +110,15 @@ } }, { + "path" : "pages/basics/saless", + "style" : + { + "navigationBarTitleText": "涓婃灦绠$悊", + "enablePullDownRefresh": false + + } + }, + { "path" : "pages/basics/notificationFile", "style" : { diff --git a/pages/basics/demo.vue b/pages/basics/demo.vue index 1c9c48a..abaf447 100644 --- a/pages/basics/demo.vue +++ b/pages/basics/demo.vue @@ -88,6 +88,14 @@ <input type="text" placeholder="璇疯緭鍏�..."> </view> </view> + <!-- 鎼滅储妗� --> + <view class="square-1"> + <view class="searchBox"> + <view class="searchIcon"><uni-icons type="search" size="20" color="#dadada"></uni-icons></view> + <view class="searchArea"><input type="text" placeholder=" 璇疯緭鍏�"></view> + <view class="closeIcon"><uni-icons type="closeempty" size="20" color="#dadada"></uni-icons></view> + </view> + </view> </view> </template> diff --git a/pages/basics/notificationFile.vue b/pages/basics/notificationFile.vue index 813329d..4da0289 100644 --- a/pages/basics/notificationFile.vue +++ b/pages/basics/notificationFile.vue @@ -1,18 +1,43 @@ <template> <view> <!-- 鎼滅储妗� --> - <view class="square-1"> - <view class="searchBox"> - <view class="searchIcon"><uni-icons type="search" size="20" color="#dadada"></uni-icons></view> - <view class="searchArea"><input type="text" placeholder=" 璇疯緭鍏�"></view> - <view class="closeIcon"><uni-icons type="closeempty" size="20" color="#dadada"></uni-icons></view> + <view class="search-box"> + <view class="search-area"> + <view class="search-icon"><uni-icons type="search" size="25" color="#a5a5a5"></uni-icons></view> + <input type="text" v-model="zpallet" placeholder=" 鎵樼洏鏉$爜"/> + <view class="close-icon" @click="reset()"><uni-icons type="closeempty" size="25" color="#a5a5a5"></uni-icons></view> + </view> + <view class="search-btn"><button @click="search(zpallet)" class="cu-btn bg-blue">鎼滅储</button></view> + </view> + + <!-- list鍒楄〃 --> + <checkbox-group @change="checkbox"> + <label v-for="(item,index) in listData" :key="index" class="demo-list bg-false" :class="'bg-'+item.checked" > + <view class="demo-list-left"> + <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" /> + </view> + <view class="demo-list-right"> + <view>鎵樼洏鏉$爜锛歿{item.zpallet}}</view> + <view>鎵樼洏鍚嶇О锛歿{item.maktx}}</view> + <view>鍟嗗搧缂栫爜锛歿{item.matnr}}-{{item.batch}}</view> + <view>浠撳簱鍙凤細{{item.origin}}</view> + </view> + </label> + </checkbox-group> + + + <!-- 搴曢儴鍒锋柊 --> + <uni-load-more :status="status" :icon-size="16" :content-text="contentText" /> + + <!-- 搴曢儴鎸夐挳 --> + <view class="footer flex justify-around"> + <view> + <button class="cu-btn lg" @click="resst()">閲嶇疆</button> + </view> + <view> + <button class="cu-btn lg pakin-btn bg-red" @click="comb()">鍒犻櫎</button> </view> </view> - <view style="width: 100%;height: 200rpx;background-color: aqua;margin-top: 10rpx;" - v-for="(item,index) in listData" :key="index"> - <text>{{index}}</text> - </view> - <uni-load-more :status="status" :icon-size="16" :content-text="contentText" /> </view> </template> @@ -21,6 +46,7 @@ data() { return { commonUrl:null, + zpallet:'', listData: [], reload: false, status: 'more', @@ -86,44 +112,107 @@ </script> <style> - .searchBox { - position: absolute; - width: 94%; - height: 80%; - top: 0; + .search-box { + position: fixed; left: 0; - bottom: 0; - right: 0; - margin: auto; - background-color: #F9F9F9; - border-radius: 20rpx; + top: 0; + width: 100%; + height: 100rpx; + background-color: #FFF; + border-bottom: 1px solid #d8d8d8; + border-radius: 0 0 20rpx 20rpx; + z-index: 1; } - .searchIcon { + /*#ifdef H5 */ + .search-box { + position: fixed; + left: 0; + top: 89rpx; + width: 100%; + height: 100rpx; + background-color: #ffffff; + border-bottom: 1px solid #d8d8d8; + border-radius: 0 0 20rpx 20rpx; + z-index: 1; + } + /* #endif */ + .search-area { + display: inline-block; + background-color: #F1F1F1; + width: 75%; + height: 70%; + margin: 15rpx; + border-radius: 15rpx; + } + .search-area input { + display: inline-block; + height: 70rpx; + width: 70%; + line-height: 70rpx; + font-size: 25rpx; + font-weight: 400; + } + .search-btn { + display: inline-block; + float: right; + margin-right: 30rpx; + margin-top: 15rpx; + } + .search-icon { display: inline-block; float: left; - width: 10%; - height: 100%; + width: 70rpx; + height: 70rpx; text-align: center; - line-height: 80rpx; + line-height: 70rpx; + + } + .close-icon { + display: inline-block; + float: right; + width: 70rpx; + height: 70rpx; + text-align: center; + line-height: 70rpx; } - .searchArea { + + + + .bg-false { + background-color: #FFFFFF; + } + .bg-true { + background-color: #ebebeb; + } + + .demo-list { + border-bottom: 1px solid #d8d8d8; + height: 180rpx; + margin: 15rpx; + border-radius: 20rpx; + } + .demo-list:first-child { + margin-top: 120rpx; + } + .demo-list:last-child { + margin-bottom: 120rpx; + } + label { + display: block; + } + .demo-list-left { display: inline-block; float: left; - width: 80%; - height: 100%; - } - .searchArea input { - height: 100%; - font-size: 14px; - color: #5f5f5f; - } - .closeIcon { - display: inline-block; - float: left; - width: 10%; - height: 100%; text-align: center; - line-height: 80rpx; + width: 100rpx; + height: 180rpx; + line-height: 180rpx; + } + .demo-list-right { + display: inline-block; + float: left; + height: 180rpx; + color: #828282; } </style> \ No newline at end of file diff --git a/pages/basics/saless.vue b/pages/basics/saless.vue new file mode 100644 index 0000000..653efe9 --- /dev/null +++ b/pages/basics/saless.vue @@ -0,0 +1,341 @@ +<template> + <view> + <scroll-view scroll-y> + <view> + <view class="search-box"> + <view class="search-area"> + <view class="search-icon"><uni-icons type="search" size="25" color="#a5a5a5"></uni-icons></view> + <input type="text" v-model="orderNo" placeholder="鎵爜 / 杈撳叆(璁㈠崟缂栧彿)" @input="search()"/> + <view class="close-icon" @click="reset()"><uni-icons type="closeempty" size="25" color="#a5a5a5"></uni-icons></view> + </view> + </view> + <checkbox-group @change="checkbox"> + <label v-for="(item,index) in data" :key="index" class="demo-list bg-false" :class="'bg-'+item.checked" > + <view class="demo-list-left"> + <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" /> + </view> + <view class="demo-list-right"> + <!-- <view><text style="font-weight: bold;">搴忓彿锛歿{index+1}}</text></view> --> + <view class="order-ditel"><text class="index">No.{{index+1}}</text><text class="orderNo">{{item.orderNo}}</text></view> + <view><text style="width: 400rpx;">鍟嗗搧缂栫爜锛歿{item.matnr}}</text></view> + <view> + <text>搴斿叆鏁伴噺锛歿{item.anfme}}</text> + <text>鍟嗗搧鍚嶇О锛歿{item.maktx}}</text> + </view> + <view> + <text>宸插叆鏁伴噺锛歿{item.inQty}}</text> + <text style="width: auto;">璁㈠崟鐘舵�侊細</text><text :class="state$"> {{item.state$}}</text> + </view> + </view> + </label> + </checkbox-group> + </view> + </scroll-view> + <view class="footer flex justify-around"> + <label class="label-btn" style="width: 150rpx;"> + <checkbox :checked="check" @click="allChecked()">{{checkText}}</checkbox> + </label> + <label class="label-btn" style="width: 100rpx;"> + <text @click="reChecked()">鍙嶉��</text> + </label> + + <label class="label-btn" style="width: 170rpx;"> + <button class="cu-btn bg-red ">鎾ら攢涓婃灦</button> + </label> + <label class="label-btn"> + <button class="cu-btn bg-blue " @click="shangjia()">涓婃灦</button> + </label> + </view> + </view> +</template> + +<script> + export default { + data() { + return { + data: [], + orderNo:'', + needData:{}, + check:false, + checkText:'鍏ㄩ��', + checkedData:[], + state$:'', + } + }, + mounted() { + const UIP = uni.getStorageSync('UIP'); + this.baseIP = UIP; + const UPORT = uni.getStorageSync('UPORT'); + this.basePORT = UPORT; + this.render() + }, + methods: { + // 鎼滅储 + search() { + let that = this; + // that.tabData.forEach(function(e){ + // that.searchData = e.orderNo + // }) + this.render(that.orderNo) + }, + // 閲嶇疆 + reset() { + let that = this; + if (that.orderNo == '') { + uni.vibrateShort(); + } else { + uni.vibrateLong(); + } + that.orderNo = ''; + that.needData['order_no'] = ''; + that.getData(); + + + }, + // 琛ㄦ牸鍔犺浇 + render(param) { + let that = this; + if(param) { + that.needData['order_no'] = param; + that.getData(); + } else { + that.getData(); + } + }, + getData() { + let that = this + uni.request({ + url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + "/receiveDetl/list/auth", + header:{'token':uni.getStorageSync('token')}, + data: that.needData, + success(res) { + var res = res.data + if (res.code === 200) { + that.data = res.data.records + } + for (var i = 0; i < that.data.length; i++) { + if (that.data[i].state$ == "鏈叆搴�") { + that.state$ = 'color-red' + } else { + console.log(2) + } + + } + } + }) + }, + checkbox: function (e) { + var items = this.data, + values = e.detail.value; + for (var i = 0, lenI = items.length; i < lenI; ++i) { + const item = items[i] + item.id = item.id + '' + if(values.indexOf(item.id) >= 0){ + this.$set(item,'checked',true) + }else{ + this.$set(item,'checked',false) + } + } + if (values.length == items.length) { + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } else { + this.check = false + this.checkText = "鍏ㄩ��" + } + uni.vibrateShort(); + }, + reChecked() { // 鍙嶉�� + var checkArr = [] + for (var i = 0; i < this.data.length;i++) { + if (this.data[i].checked == true) { + this.$set(this.data[i],'checked',false) + }else{ + this.$set(this.data[i],'checked',true) + } + if (this.data[i].checked == true) { + checkArr.push(this.data[i].checked) + } + } + if (checkArr.length == this.data.length) { + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } else { + this.check = false + this.checkText = "鍏ㄩ��" + } + uni.vibrateShort(); + }, + allChecked(e){ // 鍏ㄩ�� + if (this.check == true) { + for (var i = 0; i < this.data.length;i++) { + this.$set(this.data[i],'checked',false) + } + this.check = false + this.checkText = "鍏ㄩ��" + } else { + for (var i = 0; i < this.data.length;i++) { + this.$set(this.data[i],'checked',true) + } + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } + uni.vibrateShort(); + }, + shangjia() { + this.checkedData = [] + for (var i = 0; i < this.data.length; i++) { + if (this.data[i].checked == true) { + this.checkedData.push(this.data[i]) + } + } + uni.vibrateShort(); + console.log(this.checkedData) + } + } + } +</script> + +<style> + .search-box { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100rpx; + background-color: #FFF; + border-bottom: 1px solid #d8d8d8; + border-radius: 0 0 20rpx 20rpx; + z-index: 1; + } + /*#ifdef H5 */ + .search-box { + position: fixed; + left: 0; + top: 60rpx; + width: 100%; + height: 100rpx; + background-color: #ffffff; + border-bottom: 1px solid #d8d8d8; + border-radius: 0 0 20rpx 20rpx; + z-index: 1; + } + /* #endif */ + .search-area { + background-color: #F1F1F1; + width: 96%; + height: 70%; + margin: 15rpx; + border-radius: 15rpx; + } + .search-area input { + display: inline-block; + height: 70rpx; + width: 70%; + line-height: 70rpx; + font-size: 25rpx; + font-weight: 400; + } + .search-icon { + display: inline-block; + float: left; + width: 70rpx; + height: 70rpx; + text-align: center; + line-height: 70rpx; + + } + .close-icon { + display: inline-block; + float: right; + width: 70rpx; + height: 70rpx; + text-align: center; + line-height: 70rpx; + } + .bg-false { + background-color: #FFFFFF; + } + .bg-true { + background-color: #ebebeb; + } + + .demo-list { + border-bottom: 1px solid #d8d8d8; + height: 180rpx; + margin: 15rpx; + border-radius: 20rpx; + } + .demo-list:first-child { + margin-top: 120rpx; + } + .demo-list:last-child { + margin-bottom: 120rpx; + } + label { + display: block; + } + .demo-list-left { + display: inline-block; + float: left; + text-align: center; + width: 100rpx; + height: 180rpx; + line-height: 180rpx; + } + .demo-list-right { + display: inline-block; + float: left; + height: 180rpx; + color: #828282; + } + .order-ditel { + height: 60rpx; + width: 600rpx; + line-height: 60rpx; + } + + .demo-list-right .index { + width: 120rpx; + height: 25rpx; + line-height: 25rpx; + font-size: 40rpx; + border-right: 4rpx solid #6f6f6f; + padding-left: 0px; + padding-right: 10rpx; + color: #3b3b3b; + /* background-color: #007AFF; */ + } + .demo-list-right .orderNo { + padding-left: 30rpx; + font-size: 35rpx; + width: 400rpx; + color: #3b3b3b; + /* background-color: #0A98D5; */ + } + .demo-list-right .vertical-bar { // 绔栨潬 + /* background-color: #6739B6; */ + width: 50rpx; + font-size: 30rpx; + text-align: center; + } + .demo-list-right text { + display: inline-block; + width: 250rpx; + font-size: 25rpx; + } + .color-red { + width: auto; + font-weight: 700; + color: #e74f4f; + } + + + .label-btn { + width: 150rpx; + } + checkbox { + /* transform:scale(0.7) */ + } + +</style> -- Gitblit v1.9.1