office-tools-m/pages/trade/shoe-style/index.vue

<template>
	<view>
		<view class="top-button">
			<page-head :showQutation="showQutation" ref="pageHead" @headGetData="headGetData"></page-head>
		</view>
		<view class="bg-white" :style="{'paddingTop':$refs.pageHead&&$refs.pageHead.searchShow ? '170px' : '50px'}"
			style="padding-bottom: 40px;">
			<uni-list v-for="(item,index) in tableData" :key="index">
				<uni-list-item showArrow link @click="rowClick(item)"
					:to="isQuotation ? '' : './ShoeStyleView?' + 'styleNum=' + item.styleNum + '&' + 'version=' + item.version">
					<!-- :to="isQuotation ? '' : './ShoeStyleView?data='+ encodeURIComponent()" -->
					<template v-slot:header>
						<view class="slot-box">
							<view style="display: block;width: 135px;">
								<view v-if="isQuotation" style="float: left;margin-top: -5px;width: 23px;">
									<uni-data-checkbox multiple v-model="item.quotation" :localdata="[{text: '',value: 0}]" />
								</view>
								<image class="slot-image img" :src="item.foto" mode="widthFix"></image>
							</view>
						</view>
					</template>
					<template v-slot:body>
						<text class="slot-box slot-text">
							<text style="display: block;">{{item.styleNum}} {{item.color}} {{item.version}}</text>
							<text style="display: block;font-size: 12px;color: #909399;">
								面料：{{item.upper? item.upper: ''}}</text>
							<text style="display: block;font-size: 12px;color: #909399;">
								大底：{{item.outsole? item.outsole: ''}}</text>
						</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		listShoeStyle,
		getSign,
		SHOE_STYLE_QUERY
	} from '@/api/trade/shoe-style.js'
	export default {
		name: 'Index',
		props: {
			showQutation: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				getDataApi: listShoeStyle,
				getSign: getSign,
				tableData: [],
				// 数据总量
				total: 0,
				totalPages: null,
				loading: false,
				queryfrom: Object.assign({}, SHOE_STYLE_QUERY, {
					// 每页数据量
					pageSize: 15,
					// 当前页
					pageNum: 1
				}),
				procOption: [],
				picker: [],
				// -报价
				isQuotation: false, // 是否勾选，开始报价
				selects: [], // 选中行
			}
		},
		onLoad() {
			// this.getConfig()
			this.picker = this.$store.state.user.factoryOption
			this.procOption = this.$store.state.user.procOption
			console.log(this.procOption)
			this.selectedIndexs = []
			this.getData()
		},
		onReachBottom() {
			this.bottomload()
		},
		methods: {
			//判断还有无，下一页数据
			//判断当前的页码是否大于等于  总页数
			bottomload() {
				if (this.queryfrom.pageNum >= this.totalPages) {
					//没有下一页数据
					uni.showToast({ title: '没有下一页数据', })
				} else {
					//还有下一页
					this.queryfrom.pageNum++
					this.getData()
				}
			},
			rowClick(row, index) {
				if (this.isQuotation) {
					if (row.quotation.length == 0) {
						row.quotation = [0]
						this.selects.push(row)
					} else {
						row.quotation = []
						this.selects = this.selects.filter(it => it.id != row.id)
					}
					this.$emit('selects', this.selects)
				};
			},
			// 分页触发
			change(e) {
				// this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			headGetData(val) {
				console.log('headGetData')
				this.queryfrom = Object.assign(this.queryfrom, val)
				this.tableData = []
				this.getData(1)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent ? pageCurrent : this.queryfrom.pageNum
				this.queryfrom.pageNum = this.pageCurrent
				uni.showLoading({ title: '加载中' })
				this.getDataApi(this.queryfrom).then(res => {
					uni.hideLoading()
					this.loading = false
					if (res.code === 200 && res.rows && res.rows.length > 0) {
						res.rows = res.rows.map(item => {
							let obj = this.selects.find(it => it.id == item.id)
							if (obj) {
								item.quotation = [0]
							} else {
								item.quotation = []
							}
							item.styleId = item.id
							return item
						})
						const total = res.total
						//计算总页数----总共几页 = Math.ceil( 总条数 / 一页条数)
						this.totalPages = Math.ceil(total / this.queryfrom.pageSize)
						this.tableData = [...this.tableData, ...res.rows]
					}
				}).catch(err => {
					uni.hideLoading()
					this.loading = false
				})
			},
		}
	}
</script>

<style>
	/* 	.import-btn {
		padding: 0px;
		width: 100%;
		height: 36px;
		text-align: center;
		line-height: 36px;
		background-color: #409EFF;
		color: aliceblue;
	} */

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.img {
		width: 100px;
		height: 100%;
		margin-right: 10px;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

	}

	/* 	.down-button {
		z-index: 10;
		position: fixed;
		padding: 5px;
		bottom: 0px;
		width: 100%;
		height: 40px;
		background-color: #fff;
	} */

	.top-button {
		z-index: 10;
		position: fixed;
		/* padding: 5px; */
		top: 0px;
		width: 100%;
		height: 50px;
		background-color: #fff;
		padding: 5px;
		border-bottom: 1px #ddd solid;
	}
</style>