<template>
<view class="page">
<!-- 头部 start -->
<view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
<view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
<view class="action" @tap="back"><text class="cuIcon-back"></text></view>
<view class="search-form round">
<text class="cuIcon-search text-999"></text>
<input
confirm-type="search"
class="text-999"
type="text"
v-model="keywords"
:adjust-position="false"
:hold-keyboard="false"
placeholder-style="color:#999"
:placeholder="placeholder"
@confirm="searchConfirm"
/>
<text v-if="keywords.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="handleClear"></text>
</view>
<view class="right" style="margin-left: 11px;">
<!-- <text class="cuIcon-search" style="font-size: 36rpx;" @click="searchConfirm($event,1)"></text> -->
<!-- <view style="width:40rpx;height:100%;margin-right: 10px;" class="flex align-center" > -->
<view class=" lg text-gray nav_title flex align-center" @click="showCalendar" :style="{height: CustomBar + 'px'}">
<image src="@/static/calendar.png" mode="" />
</view>
<!-- </view> -->
</view>
</view>
</view>
<view class="cu-bar bg-white" style="height:50px">
<view class="search-form round">
<text class="cuIcon-search text-999"></text>
<input
confirm-type="search"
class="text-999"
type="text"
v-model="gkeywords"
:adjust-position="false"
:hold-keyboard="false"
placeholder-style="color:#999"
:placeholder="gplaceholder"
@confirm="searchConfirm"
/>
<text v-if="gkeywords.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="ghandleClear"></text>
</view>
<view class="right" style="margin-left: 11px;margin-right: 11px;">
<!-- <text class="cuIcon-search" style="font-size: 36rpx;" @click="searchConfirm($event,1)"></text> -->
<!-- <view style="width:40rpx;height:100%;margin-right: 10px;" class="flex align-center" > -->
<image :src="STATIC_URL + 'integral_sao.png'" style="width: 40rpx;height: 40rpx;" @click.stop="handleScan() "></image>
<!-- </view> -->
</view>
</view>
<!-- 头部 end -->
<!-- loading组件 -->
<fu-loading v-if="isShowLoading"></fu-loading>
<!--商品列表 start-->
<scroll-view v-else class="list" scroll-y="true">
<block v-for="item in lists">
<view class="solid-bottom fu-goods-line">
<view class="content">
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>采购单号</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.bill_code}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>交易日期</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.bill_date}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>币种编码</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.currency_code}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>币种符号</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.currency_symbol}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>状态</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.status_txt}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>仓库编码</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.storage_code}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>仓库名称</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.storage_name}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>供货商编码</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.supplier_code}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>供货商名称</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.supplier_name}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>备注</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.remark}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>创建者</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.creator}}</text>
</view>
<view class="flex box">
<view class="flex justify-between tit text-df">
<text>创建日期</text>
<text class="mao">: </text>
</view>
<text class="con text-999">{{item.create_time}}</text>
</view>
<view class="flex justify-between">
<view class="flex align-center"></view>
<button class="kc" @tap.stop="detail(item)">查看详情</button>
</view>
</view>
</view>
</block>
<!-- 空布局 -->
<fu-empty-ui v-if="lists.length == 0 && !isShowLoading"></fu-empty-ui>
<!-- 加载状态 -->
<uni-load-more v-if="lists.length > 5" :status="status"></uni-load-more>
</scroll-view>
<!--商品列表 end-->
<!-- 悬浮按钮 -->
<fu-popup ref="coupon" mode="center" width="600rpx" height="80%" border-radius="14" :mask-close-able="true" v-model="xqpop" @close="handleClose">
<view class="rule-box">
<view class="rule-box-title solid-bottom">
采购单详情
</view>
<scroll-view class="rule-box-content" scroll-y>
<view class="pop-box" v-for="(item,index) in caigouDetail">
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">行号</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.index}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">总价</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.sum}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">数量</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.size}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">单价</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.price}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">状态</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.status_txt}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">已入库数量/已出库数量</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.receive}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">税率</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.tax_rate}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">规格编码</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.spec_code}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">规格名称</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.spec_name}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">原价</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.base_price}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">商品编码</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.goods_code}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">商品名称</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.goods_name}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">预计到货日期</view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.expecte_date}}</view>
</view>
<view class="pop-view">
<view class="pop-one">
<view class="pop-t">折扣率 </view>
<view class="pop-m">: </view>
</view>
<view class="pop-n">{{item.discount_rate}}</view>
</view>
</view>
</scroll-view>
<view class="rule-box-close solid-top" @tap.stop="handleClose">
关闭
</view>
</view>
</fu-popup>
<!-- 日历弹框 start -->
<fu-popup v-model="isShow" mode="center" border-radius="16" :mask-close-able="true" @close="closePopup">
<view class="calendar-box">
<view class="calendar-wrap">
<view class="calendar-title height-100 flex justify-center align-center">
<view class="calendar-title-prev text-333" @click="prevMonth"><text class="cuIcon-playfill"></text></view>
<view class="calendar-title-data text-333">{{ currentDate[0] }}{{i18n['年']}}{{ currentDate[1] }}{{i18n['月']}}</view>
<view class="calendar-title-next text-333" @click="nextMonth"><text class="cuIcon-playfill"></text></view>
</view>
<view class="flex justify-between align-center text-center text-333 text-df height-76">
<view class="calendar-item">{{i18n['日']}}</view>
<view class="calendar-item">{{i18n['一']}}</view>
<view class="calendar-item">{{i18n['二']}}</view>
<view class="calendar-item">{{i18n['三']}}</view>
<view class="calendar-item">{{i18n['四']}}</view>
<view class="calendar-item">{{i18n['五']}}</view>
<view class="calendar-item">{{i18n['六']}}</view>
</view>
<view class="flex justify-between align-center flex-wrap text-center text-333 text-df calendar-content" >
<block >
<view class="height-76 calendar-item flex justify-center align-center" v-for="(item,index) in calendar" :key="index" @click="chooseTime(item)">
<view class="calendar-item-num round" :class="{'not':item.isNot,'active':item.active}">
{{item.day}}
</view>
</view>
</block>
</view>
</view>
</view>
</fu-popup>
<zero-back-top iconType='triangle-text' color="#ffffff" backgroundColor='#6caaff99' :scrollTop='scrollTop'></zero-back-top>
<!-- 断网检测组件 -->
<fu-notwork></fu-notwork>
</view>
</template>
<script>
import calendar from '@/common/mixin/calendar.js';
export default {
mixins: [calendar],
components: {
},
data() {
return {
right: 50,
bottom: 100,
scrollTop:0,
STATIC_URL:'/static/',
timer: null, // 定时器
type: 1, // 悬浮按钮状态 1 页码 2 返回顶部
isShow: false, //是否显示按钮
totalSize: 0, // 悬浮按钮总页码
currentPage: 1, // 当前页页码
isShowLoading: true, // 是否显示loading
keywords: '', // 搜索的文本
placeholder: '交易编号', // 默认文本
gkeywords: '', // 搜索的文本
gplaceholder: '商品关键字/商家编码/条形码', // 默认文本
model: 'block', // 布局样式
lists: [], // 结果列表
cid: '', // 分类id(点击分类跳转过来必传)
isInit: false, // 是否请求过数据
status: 'more', // 加载状态
page: 1, // 页数
size: 10, // 页条数
sorts: '1', // 条件
order: 'asc', // 排序 asc: 正序 desc: 倒序
flag:false,
advancedSearch: null, // 高级搜索对象
pop_good_name:'',
caigouDetail:[],
xqpop:false,
isShow:false,//日历弹框
startTime:'',//记录用户点击日历时的开始时间
endTime:'',//记录用户点击日历时的结束时间
};
},
onLoad(options) {
/***
* @keyWords 关键词
* @cid 分类id
**/
const { keyWords = ''} = options;
if (keyWords) {
this.keywords = keyWords;
}
this.handleSearch(); // 搜索方法
},
onPullDownRefresh() {
this.page = 1;
this.status = 'more';
this.lists = [];
this.handleSearch();
},
onReachBottom() {
this.handleSearch(); // 搜索方法
},
methods: {
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
showCalendar(){
this.isShow=true
},
handleClose() {
this.xqpop = false;
},
detail(item){
// console.log(item)
uni.showLoading()
if(!item.id){
this.$message.info('参数有误')
return false
}
var _url = '/v1/purchase/order/'+item.id;
this.$api.get(_url).then(res => {
console.log(res,'caigou detail')
if (res.statusCode == 200) {
this.caigouDetail = res.data.data.detail
uni.hideLoading()
this.xqpop = true
}
})
},
/**
* @description 切换搜索条件
* @param {Object} e input框事件源
*/
searchConfirm(e,type) {
if(type == 1){
if (this.keywords.trim() == '') {
// this.$message.info(this.i18n['请输入要搜索的内容']);
// return;
}
}else{
if (e && e.detail.value.trim() == '') {
// this.$message.info(this.i18n['请输入要搜索的内容']);
// return;
}
}
// this.cid = 0;
this.page = 1;
this.status = 'more';
this.handleSearch();
uni.hideKeyboard();
},
/**
* @func 搜索
*/
handleSearch() {
console.log(this.status)
if (this.status != 'more') return;
this.status = 'loading';
let data = {
// type: 7,
// sort: this.sorts,
// order: this.order,
page: this.page,
per_page: this.size,
// goods_cid: this.cid,
};
// 判断关键字或者placeholder内容
if (this.keywords.trim()) {
data.bill_code = this.keywords;
}
if (this.gkeywords.trim()) {
data.goods_keywords = this.gkeywords;
}
if (this.page == 1) {
this.isShowLoading = true;
}
if(this.startTime && this.endTime){
data.bill_date = this.startTime+' - '+this.endTime
}
// 获取商品列表接口
this.$api.get('/v1/purchase/order',data).then(res => {
console.log(res,'goods')
this.isShowLoading = false;
if (res.statusCode == 200) {
let totalSize = res.data.meta.total;
this.totalSize = Math.ceil(totalSize / this.size); // 悬浮按钮总页码
this.currentPage = this.page; //悬浮当前页面
let list = res.data.data;
if (this.page == 1) this.lists = [];
this.lists = this.lists.concat(list);
if (this.lists.length >= totalSize) {
this.status = 'noMore';
} else {
this.status = 'more';
this.page++;
}
this.isInit = true;
this.flag = true
} else {
this.$message.error(res.errMsg);
}
})
.catch(err => {
this.isShowLoading = false;
});
},
// 清除关键字
handleClear() {
this.keywords = '';
this.page = 1;
this.status = 'more';
this.advancedSearch = false;
this.handleSearch();
uni.hideKeyboard();
},
ghandleClear() {
this.gkeywords = '';
this.page = 1;
this.status = 'more';
this.advancedSearch = false;
this.handleSearch();
uni.hideKeyboard();
},
handleScan() {
let that = this;
uni.scanCode({
scanType: ["barCode"],
success: function(response) {
console.log(response);
that.gkeywords = response.result
that.page = 1;
that.status = 'more';
that.lists = [];
that.handleSearch();
uni.hideKeyboard();
},
fail: function(err) {
that.$message.info('未能识别')
console.log(err);
}
});
},
// 返回
back() {
uni.navigateBack();
},
/**
* @description 处理日历的钩子
* @param {Object} arr 入参 日历数组
*/
handleCalendarFn(arr){
// 日历暂开时，显示全部日历 日历收起时 显示已经选择的日期 默认当前日期
arr.forEach(val=>{
if(val.formData == this.start_time){
val.active = true;
}
if(val.formData == this.end_time){
val.active = true;
}
})
return arr;
},
/**
* @description 选中日期
* @param {Object} item 入参 日历单个对象
*/
chooseTime(item){
// 大于当前时间不能点击
if(new Date(item.formData).getTime() > new Date().getTime()){
return;
}
if(item.isNot){
return;
}
// 先记录本地上次筛选
uni.setStorageSync('start',this.start_time);
uni.setStorageSync('end',this.end_time);
this.start_time = '';
this.end_time = '';
if(!this.startTime && !this.endTime){
console.log(1)
this.startTime = item.formData;
}else if(this.startTime && !this.endTime){
console.log(2)
this.endTime = item.formData;
}
this.calendar.forEach(val=>{
val.active = false;
if((val.formData == this.startTime && !val.isNot) || val.formData == this.endTime && !val.isNot){
val.active = true;
}
})
if(this.startTime && this.endTime){
console.log(3)
this.isShow = false;
}
},
/**
* @description 关闭日期弹窗 处理日期获取数据
*/
closePopup(){
if(this.startTime && this.endTime){
if(new Date(this.startTime).getTime() < new Date(this.endTime).getTime()){
this.start_time = this.startTime;
this.end_time = this.endTime;
}else{
this.start_time = this.endTime;
this.end_time = this.startTime;
}
this.page = 1;
this.status = "more";
this.handleSearch();
}else{
if(uni.getStorageSync('start') && uni.getStorageSync('end')){
this.start_time = uni.getStorageSync('start');
this.end_time = uni.getStorageSync('end');
}
}
// 无论是否进行筛选日期 日历高亮都需要重置到start_time end_time的值
this.calendar.forEach(val=>{
val.active = false;
if((val.formData == this.start_time && !val.isNot) || val.formData == this.end_time && !val.isNot){
val.active = true;
}
})
uni.removeStorageSync('start');
uni.removeStorageSync('end');
this.startTime = '';
this.endTime = '';
},
}
};
</script>
<style lang="scss" scoped>
page {
height: 100%;
background: #ededed;
}
.page {
min-height: 100%;
background-color: #ededed;
}
.list{
border-radius: 5px;
width: calc(100% - 20px);
margin-top: 0px;
// height:calc(100vh - 100px);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
height: calc(100vh - var(--status-bar-height) - env(safe-area-inset-top) - 100px);
}
.box{
margin-bottom: 5px;
}
.tit{
width: 27%;
text-align: left;
font-weight: bold;
}
.mao{
margin-right: 5px;
}
.con{
color:#555;
width: 73%;
text-align: left;
padding-left: 10px;
}
.sort-wrap {
position: fixed;
left: 0;
right: 0;
}
.height-100 {
height: 100rpx;
}
.block-180 {
width: 180rpx;
min-width: 180rpx;
height: 180rpx;
min-height: 180rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.null {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 8rpx;
background-color: rgba(0, 0, 0, 0.45);
color: #ffffff;
font-size: 36rpx;
text-align: center;
line-height: 180rpx;
}
}
.list-item + .list-item {
border-top: 1rpx solid #eeeeee;
}
.overlay-animate {
position: fixed;
}
.float-action {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
// background-color: rgba(165, 165, 165, .85);
position: fixed;
right: 20rpx;
bottom: 280rpx;
z-index: 996;
border: 1rpx solid #cccccc;
.cuIcon-cart {
color: #cccccc;
}
}
.animate {
position: fixed;
border-radius: 50%;
z-index: 995;
transform-origin: 50% 50%;
transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important;
image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
}
// 商品卡片line
.fu-goods-line {
/* min-height: 570rpx; */
padding: 22rpx;
border-radius: 14rpx;
overflow: hidden;
background-color: #ffffff;
margin-top: 20rpx;
display: flex;
.block-246 {
width: 172rpx;
height: 172rpx;
border-radius: 6rpx;
background-color: #eeeeee;
image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
}
.content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.kc{
color: #fff;
background: #6caaff;
width: 90px;
height: 30px;
border-radius: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
// 标题栏 start
.nav_title{
font-size: 36rpx;
font-weight: 500;
color: #333333;
image{
width:33rpx;
height:32rpx;
}
}
.nav {
position:fixed;
z-index: 999;
margin-bottom: 20upx;
}
.nav .cu-item{
font-size: 32rpx;
font-weight: 400;
color: #333333;
position: relative;
.active-line{
position: absolute;
bottom: 14rpx;
left: 50%;
transform: translateX(-50%);
display: none;
width: 24rpx;
height: 4rpx;
background: linear-gradient(270deg, #F04E58 0%, #F04E58 100%);
opacity: 1;
border-radius: 6rpx;
}
}
.nav .cu-item.cur {
color: #FF6464;
font-weight: 500;
border-bottom: 0!important;
.active-line{
display: block;
}
}
.nav .cu-item.cur::after {
content: '';
display: none;
}
.order-item {
display: flex;
flex-direction: column;
padding-left: 30upx;
background: #fff;
margin: 2upx 0upx 0 0upx;
// border-radius: 16rpx;
.content_bottom{
font-size: 24rpx !important;
font-family: PingFang SC;
color: #999999;
}
.i-top {
display: flex;
align-items: center;
height: 150upx;
line-height: 150upx;
padding-right: 30upx;
font-size: 28rpx;
color: #333333;
position: relative;
.content{
view{
height: 50rpx;
line-height: 50rpx;
}
.content_left{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
padding-right:6rpx;
}
.content_right{
font-size: 32rpx;
font-family: Oswald;
font-weight: 400;
// color: #FA2033;
}
}
}
}
// 订单列表 end
// 日历弹框 start
.calendar-box{
background: #FFFFFF;
width: 640rpx;
height: 560rpx;
padding:0 24rpx;
.calendar-wrap {
.height-76 {
height: 60rpx;
}
.calendar-title-prev {
padding: 0 24rpx;
transform: rotate(-180deg);
box-sizing: border-box;
}
.calendar-title-next {
padding: 0 24rpx;
box-sizing: border-box;
}
.calendar-content{
transition: all .3s ease;
overflow: hidden;
}
.calendar-item{
width: calc(100% / 7);
.calendar-item-num{
width: 56rpx;
height: 56rpx;
line-height: 56rpx;
&.not{
color: #BFBFBF;
}
&.active{
background: #6caaff;
color: #FFFFFF;
}
}
}
.calendar-close{
height: 48rpx;
position: relative;
&::after{
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1rpx;
background: #EEEEEE;
transform: scaleY(0.5);
}
.calendar-close-btn{
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
background: #FF6464;
// transform: rotate(90deg);
position: relative;
z-index: 1;
}
}
}
}
// 日历弹框 end
</style>
这是一个小程序页面 我希望上面的商品关键字 那一个搜索框 固定在那里 然后下方内容 是一个scorll-view 现在有点样式问题 就是滑动到底部的时候 搜索框被移动上面去了 应该是高度超出了 帮我在我的代码上修改 提供完整代码
最新发布
本文介绍了一种适用于Common List-View但不支持Virtual List-View的排序方案，详细阐述了如何通过CListCtrl类和回调函数实现ListView的点击列排序，并提供了关键代码示例。
最低0.47元/天 解锁文章
扫一扫
2395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
