front-end/hdApp/src/admin/changePrice/changeList.vue

<template>
<view class="app-content">
	<view class="ex-page">
		<scroll-view scroll-y scroll-with-animation class="main-view">
			<view class="space-view ex-table">
				<block v-if="!$util.isEmpty(list.data)">
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<t-tr header>
							<t-th><view style="width:200upx;color:#333333;font-size:30upx;font-weight:bold;">时间</view></t-th>
							<t-th><view style="color:#333333;font-size:30upx;font-weight:bold;">操作</view></t-th>
							<t-th><view style="color:#333333;font-size:30upx;font-weight:bold;">事项</view></t-th>
							<t-th><view style="color:#333333;font-size:30upx;font-weight:bold;">价格</view></t-th>
						</t-tr>
						<t-tr v-for="(item, index) in list.data" :key="index">
							<t-td align="center" color="info">
								<view style="width:200upx;color:#333333;font-size:30upx;">
									<view>{{ item.addTime.substr(5,11) }}</view>
									<view>{{item.ptStyle==1?'零售':'批发'}}</view>
								</view>
							</t-td>
							<t-td><view style="color:#333333;font-size:30upx;">{{item.staffName}}</view></t-td>
							<t-td><view style="color:#333333;font-size:30upx;">{{item.event}}</view></t-td>
							<t-td>
								<view style="color:#333333;font-size:30upx;">
									<view>¥{{item.skPrice?parseFloat(item.skPrice):0}}</view>
								</view>
							</t-td>
						</t-tr>
					</t-table>
				</block>
				<block v-else>
					<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</view>
		</scroll-view>
	</view>
</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { getPriceChangeList } from "@/api/item";
import { list } from "@/mixins";
export default {
	components: {  AppWrapperEmpty},
	mixins: [list],
	data() {
		return {
		};
	},
	onPullDownRefresh() {
		this.resetList();
		this.getChangeList(this.option.id).then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (!this.list.finished) {
			this.getChangeList(this.option.id).then((res) => {
				uni.stopPullDownRefresh();
			});
		} else {
			uni.stopPullDownRefresh();
		}
	},
	methods: {
		async init() {
			this.getChangeList(this.option.id);
		},
		getChangeList(id) {
			return getPriceChangeList({id:id,page: this.list.page}).then(res => {
				this.completes(res);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-bar {
		position: absolute;
		left: 0;
		display: flex;
		width: 100%;
		// box-shadow: 0 5upx 5upx 5upx rgba($color: #000000, $alpha: 0.2);
		z-index: 20;
		.bar{
			width: 50%;
			height: 100%;
			text-align: center;
			&:nth-child(1){
				border-right: 1upx solid #eeeeec;
			}
		}
	}
	.main-view {
		/*margin-top: 80upx;*/
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
		}
		.ex-info {
			padding: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.ex-table {
			::v-deep.icon-info {
				color: #333333;
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>