cashier_app/pageConsumables/supplier.vue

<template>
	<view class="supplier">
		<template v-if="datas.list.length>0">
			<view v-for="item in  datas.list" :key="item.id">
				<view class="">
					<view style="display: flex;align-items: center;">
						<image src="./profile.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
						<view style="margin-left: 16rpx;">
							<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
								{{item.name}}
							</view>
							<text style="color: #999;">{{item.telephone}}</text>
						</view>

					</view>

					<text style="font-size: 28rpx;font-weight: 400;" :style="{color:item.type==0?'#FD7B49':''}">
						{{ item.type == 0 ? '待支付' : '已完结' }}
					</text>
				</view>
				<view class="">
					<view class="">
						<view :style="{color:item.waitAmount>0?' #F02C45;':''}">
							{{item.waitAmount}}
						</view>
						<view class=""> 剩余支付金额 </view>
					</view>
					<view class="">
						<view style="color: #318AFE;"> {{item.waitCount}}未付 </view>
						<view class=""> 待付款笔数 </view>
					</view>
				</view>
				<view class="df">
					<span>上次进货日期</span>
					<span v-if="item.lastTransactTime">{{dayjs(item.lastTransactTime).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" shape="circle" size="mini"
						@tap="toUrl('PAGES_EDIT_SUPPLIER',{item:JSON.stringify(item)})" :plain="true" text="编辑">
					</up-button>&nbsp;&nbsp;&nbsp;&nbsp;<up-button size="mini" shape="circle" type="primary"
						@tap="deleteEvent(item.id)" :plain="true" text="删除">
					</up-button>&nbsp;&nbsp;&nbsp;&nbsp;<up-button size="mini" shape="circle" type="primary"
						style="background-color:  #318AFE;color: #fff;"
						@tap="toUrl('PAGES_PAYMENT_SETTLEMENT',{id:item.id})" :plain="true" text="结款记录"></up-button>
				</view>
			</view>
			<view style="height: 200rpx;background-color: #f9f9f9;"> </view>
		</template>
		<view v-else style="text-align: center;background-color: #f9f9f9;">暂无数据</view>
	</view>
	<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 { reactive } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import dayjs from 'dayjs' //时间格式库
	import go from '@/commons/utils/go.js';
	import { getVendorPage,delVendor } from '@/http/api/vendor.js';
	
	let datas = reactive({
		list: []
	})
	onShow(() => {
		getList()
	})
	
	/**
	 * 获取供应商列表
	 */
	let getList = () => {
		getVendorPage({
			page: 1,
			size: 999,
		}).then(res => {
			datas.list = res.records
		})
	}
	
	/**
	 * 删除供应商
	 */
	let deleteEvent = (id) => {
		uni.showModal({
			title: '提示',
			content: '是否确认删除此供应商?',
			success: res => {
				if(res.confirm){
					delVendor(id).then(() => {
						getList()
					})
				}
			},
			fail: () => {},
			complete: () => {}
		});
	}
	
	let toUrl = (url, d) => {
		go.to(url, d)
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	// ul,
	// li {
	// 	list-style: none;
	// 	padding: 0;
	// }

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

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

	.supplier {
		padding: 28rpx;

		>view {
			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>