cashier_admin_app/pageConsumables/supplier.vue

<template>
	<ul class="supplier">
		<li v-for="item in  datas.list" :key="item.id">
			<view class="">
				<text style="font-weight: 400;font-size: 28rpx;color: #333333;">
					{{item.purveyorName}} <text style="color: #999;">({{item.purveyorTelephone}})</text>
				</text>
				<text style="font-size: 28rpx;font-weight: 400;" :style="{color:item.type==0?'#FD7B49':''}">
					{{ item.type == 0 ? '待支付' : '已完结' }}
				</text>
			</view>
			<view class="">
				<view class="">
					<view class="">
						{{item.waitAmount}}
					</view>
					<view class="">
						剩余支付金额
					</view>
				</view>
				<view class="">
					<view class="">
						{{item.waitCount}}未付
					</view>
					<view class="">
						待付款笔数
					</view>
				</view>
			</view>
			<view class="df">
				<span>上次进货日期</span>
				<span>{{dayjs(item.lastTransactAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
			</view>
			<view class="df">
				<span>地址</span>
				<span>{{item.address}}</span>
			</view>
			<view class="df">
				<span>备注</span>
				<span>{{item.remark}}</span>
			</view>
			<view class="">
				<up-button type="primary" @tap="toUrl('PAGES_EDIT_SUPPLIER',{item:JSON.stringify(item)})" :plain="true"
					text="编辑">
				</up-button><up-button type="primary" @tap="deleteEvent(item.id)" :plain="true" text="删除">
				</up-button><up-button type="primary" style="background-color:  #318AFE;color: #fff;" @tap="toUrl('PAGES_PAYMENT_SETTLEMENT',{id:item.id})"
					:plain="true" text="结款记录"></up-button>
			</view>
		</li>
	</ul>
	<view class="bottombutton">
		<up-button type="primary" style="background-color:  #318AFE;color: #fff;" @tap="toUrl('PAGES_ADD_SUPPLIER')"
			:plain="true" text="添加供应商"></up-button>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import dayjs from 'dayjs' //时间格式库
	import go from '@/commons/utils/go.js';
	import {
		tbShopPurveyorTransact,
		tbShopPurveyordelete
	} from '@/http/yskApi/requestAll.js';
	let datas = reactive({
		list: []
	})
	onMounted(() => {
		getList()
	})
	let deleteEvent = (id) => {
		tbShopPurveyordelete([id]).then(() => {
			getList()
		})
	}
	let toUrl = (url, d) => {
		go.to(url, d)
	}
	let getList = () => {
		tbShopPurveyorTransact({
			page: 0,
			size: 20,
			sort: 'id',
			shopId: uni.getStorageSync("shopId"),
		}).then(res => {
			datas.list = res.content
		})
	}
</script>

<style scoped lang="less">
	page {
		background-color: #f9f9f9;
		padding: 28rpx;
	}

	ul,
	li {
		list-style: none;
		padding: 0;
	}

	.bottombutton {
		// margin-top: 84rpx;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);

		>button {
			width: 530rpx;
			height: 80rpx;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
		}
	}

	.supplier {
		>li {
			width: 694rpx;
			height: 604rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin-top: 32rpx;

			>view:first-child {
				.df;
				justify-content: space-between;
			}

			>view:nth-child(2) {
				width: 646rpx;
				height: 142rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				align-items: center;
				display: flex;
				justify-content: space-around;
				text-align: center;
				margin-top: 24rpx;
			}

			>view:nth-child(3),
			>view:nth-child(4),
			>view:nth-child(5) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;
			}

			>view:nth-child(6) {
				border-top: 2rpx solid #E5E5E5;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				margin-top: 32rpx;
				padding-top: 32rpx;

				>button {
					width: 112rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #3189FD;
					margin: 16rpx;
				}
			}
		}
	}

	.df() {
		display: flex;
		align-items: center;
	}
</style>