采购 欠款页面

ghs/src/admin/warehouse/arrears/details.vue

@@ -0,0 +1,227 @@
+<template>
+	<view class="order-page">
+		<view class="top-view">
+			<view class="top-row">
+				<text class="header-item"> 客户</text>
+				<text class="header-item">总欠款 </text>
+			</view>
+			<view class="top-row">
+				<view class="info-item">
+					<image
+						class="logo"
+						src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+						alt="商品图"
+					/>
+					<text class="name">
+						花禾家
+					</text>
+				</view>
+				<view class="price-item">
+					24,915.00
+				</view>
+			</view>
+		</view>
+		<scroll-view scroll-y class="shop-list">
+			<DetailsItem
+				v-for="(item, index) in detailsList"
+				:key="index"
+				:info="item"
+				:isEdit="isBatch"
+				:isCheck="item.checked"
+				@click="checkItemEvent"
+			></DetailsItem>
+		</scroll-view>
+		<view class="bar-view">
+			<template v-if="!isBatch">
+				<view class="info-view">
+					共 <text class="price">{{ detailsList.length }}</text> 笔
+				</view>
+			</template>
+			<template v-else>
+				<view class="info-view">
+					已选 <text class="price">{{ selectList.length }}</text> 笔，
+					<text class="unit">¥</text>
+					<text class="price">2,902.00</text>
+				</view>
+			</template>
+			<view class="btn-view" v-if="isBatch">
+				<button
+					:class="['admin-button-com', selectList.length == 0 ? 'disable' : 'blue']"
+					:disabled="selectList.length == 0"
+					@click=""
+				>
+					批量收款
+				</button>
+			</view>
+			<view class="btn-view" v-else>
+				<button class="admin-button-com blue" @click="isBatch = true">
+					批量收款
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import DetailsItem from "./detailsItem";
+
+export default {
+	components: { AppWrapperEmpty, DetailsItem },
+	data() {
+		return {
+			isBatch: false,
+
+			detailsList: [
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "01",
+					statusName: "已出库",
+					checked: true
+				},
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "01",
+					statusName: "已出库",
+					checked: false
+				},
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "01",
+					statusName: "已出库",
+					checked: false
+				}
+			]
+		};
+	},
+	computed: {
+		selectList() {
+			let list = [];
+			if (this.detailsList) {
+				for (const item of this.detailsList) {
+					if (item.checked) {
+						list.push(item);
+					}
+				}
+			}
+			return list;
+		}
+	},
+	methods: {
+		checkItemEvent(item) {
+			for (let index = 0; index < this.detailsList.length; index++) {
+				const element = this.detailsList[index];
+				if (element == item) {
+					//id相等选中
+					this.$set(this.detailsList, index, {
+						...element,
+						checked: !element.checked
+					});
+					break;
+				}
+			}
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.order-page {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #f9fbfc;
+	.top-view {
+		padding: 30upx;
+		background-color: #fff;
+		.top-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			&:not(:last-child) {
+				margin-bottom: 10upx;
+			}
+			.header-item {
+				font-size: 24upx;
+				font-weight: 400;
+				color: #999999;
+			}
+			.info-item {
+				display: flex;
+				align-items: center;
+				.logo {
+					margin-right: 10upx;
+					width: 50upx;
+					height: 50upx;
+					border-radius: 50%;
+				}
+				.name {
+					font-size: 28upx;
+					font-weight: 600;
+					color: #333333;
+				}
+			}
+			.price-item {
+				font-size: 34upx;
+				font-weight: 600;
+				color: #333333;
+			}
+		}
+	}
+	.shop-list {
+		padding: 20upx 30upx;
+		flex: 1;
+		padding-bottom: 50upx;
+	}
+	.bar-view {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 30upx;
+		width: 100%;
+		height: 100upx;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
+		.info-view {
+			display: flex;
+			align-items: center;
+			color: #333;
+			font-size: 24upx;
+			.iconfont {
+				font-size: 32upx;
+				color: #dddddd;
+			}
+			.price {
+				margin: 0 5upx;
+				color: $redColor;
+				font-size: 32upx;
+			}
+			.unit {
+				margin: 0 10upx;
+				color: $redColor;
+				font-size: 16upx;
+			}
+		}
+		.btn-view {
+			display: flex;
+			.admin-button-com {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin: 0 10upx;
+				width: 200upx;
+				height: 70upx;
+				// line-height: 70upx;
+				font-size: 32upx;
+			}
+		}
+	}
+}
+</style>

ghs/src/admin/warehouse/arrears/detailsItem.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="details-item" @click.stop="checkEvent">
+		<view class="details-select" v-if="isEdit">
+			<text class="iconfont iconxuanzhong" v-if="isCheck"> </text>
+			<text class="iconfont iconweixuanzhong" v-else> </text>
+		</view>
+		<view class="details-main">
+			<view class="item-header">
+				<text class="name">销售出库 | XSCK-2019-0029 </text>
+			</view>
+			<view class="item-row">
+				<view class="mark">2020-10-20</view>
+			</view>
+			<view class="item-row">
+				<view class="mark">成交金额：2,902.00</view>
+				<view class="price">欠款：2,902.00</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	props: {
+		info: {
+			required: true
+		},
+		isEdit: {
+			type: Boolean,
+			default: false
+		},
+		isCheck: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		checkEvent() {
+			if (this.isEdit) {
+				this.$emit("click", this.info);
+			}
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.details-item {
+	display: flex;
+	align-items: center;
+	padding: 30upx 20upx;
+	margin-bottom: 20upx;
+	background-color: #fff;
+	border-radius: 10upx;
+	.details-select {
+		margin-right: 30upx;
+		.iconfont {
+			font-size: 40upx;
+			color: #dddddd;
+		}
+		.iconxuanzhong {
+			color: $mainColor;
+		}
+	}
+	.details-main {
+		flex: 1;
+	}
+	.item-header {
+		display: flex;
+		align-items: center;
+		.logo {
+			margin-right: 20upx;
+			width: 50upx;
+			height: 50upx;
+			border-radius: 50%;
+		}
+		.name {
+			font-size: 28upx;
+			font-family: PingFang SC;
+			font-weight: 600;
+			color: #333333;
+		}
+	}
+	.item-row {
+		margin-top: 20upx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.mark {
+			font-size: 28upx;
+			font-weight: 400;
+			color: #666666;
+		}
+		.price {
+			display: flex;
+			align-items: center;
+			font-size: 28upx;
+			font-weight: 600;
+			color: #333333;
+			.iconfont {
+				font-size: 28upx;
+				color: #999999;
+			}
+		}
+	}
+}
+</style>

ghs/src/admin/warehouse/arrears/list.vue

@@ -0,0 +1,204 @@
+<template>
+	<view class="order-page">
+		<view class="input-wrap">
+			<AppSearchModule placeholder="输入客户" @search="searchFn" />
+		</view>
+		<scroll-view scroll-y class="shop-list">
+			<view class="shop-item" v-for="(item, index) in orderList" :key="index">
+				<view class="item-header">
+					<image
+						class="logo"
+						src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+						alt="商品图"
+					/>
+					<text class="name">国兰花尚-文灶店 </text>
+				</view>
+				<view class="item-main">
+					<view class="phone">15280215347 </view>
+					<view class="price"
+						>¥580.50 <text class="iconfont iconxiangyou"></text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<view class="bar-view">
+			<view class="price-view">
+				共44笔，合计
+				<text class="unit">
+					-¥
+				</text>
+				<text class="price">
+					7,867,531.95
+				</text>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+import AppSearchModule from "@/components/module/app-search";
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+
+export default {
+	components: { AppSearchModule, AppWrapperEmpty },
+	data() {
+		return {
+			tabs: [
+				{
+					name: "全部",
+					key: "25",
+					value: "25"
+				},
+				{
+					name: "待确认",
+					key: "01",
+					value: "25"
+				},
+				{
+					name: "待配送",
+					key: "02",
+					value: "25"
+				},
+				{
+					name: "配送中",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "已完成",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "未完成",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "未完成",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "未完成",
+					key: "03",
+					value: "25"
+				}
+			],
+			orderList: [
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "01",
+					statusName: "已出库"
+				},
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "02",
+					statusName: "待出库"
+				},
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "03",
+					statusName: "已取消"
+				}
+			]
+		};
+	}
+};
+</script>
+<style lang="scss" scoped>
+.order-page {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #f9fbfc;
+	.input-wrap {
+		padding: 22px 20px 22px 30px;
+		background-color: #fff;
+	}
+	.shop-list {
+		padding: 20upx 30upx;
+		flex: 1;
+		padding-bottom: 50upx;
+		.shop-item {
+			margin-bottom: 20upx;
+			background-color: #fff;
+			border-radius: 10upx;
+			.item-header {
+				display: flex;
+				align-items: center;
+				padding: 20upx;
+				.logo {
+					margin-right: 20upx;
+					width: 50upx;
+					height: 50upx;
+					border-radius: 50%;
+				}
+				.name {
+					font-size: 28upx;
+					font-family: PingFang SC;
+					font-weight: 600;
+					color: #333333;
+				}
+			}
+			.item-main {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 30upx 20upx;
+				border-top: 1px solid #f0f2f6;
+				.phone {
+					font-size: 28upx;
+					font-weight: 400;
+					color: #666666;
+				}
+				.price {
+					display: flex;
+					align-items: center;
+					font-size: 28upx;
+					font-weight: 600;
+					color: #333333;
+					.iconfont {
+						font-size: 28upx;
+						color: #999999;
+					}
+				}
+			}
+		}
+	}
+	.bar-view {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding: 0 30upx;
+		width: 100%;
+		height: 100upx;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
+
+		.price-view {
+			display: flex;
+			align-items: center;
+			color: #333;
+			font-size: 24upx;
+			.price {
+				color: $redColor;
+				font-size: 32upx;
+			}
+			.unit {
+				margin: 0 10upx;
+				color: $redColor;
+				font-size: 24upx;
+			}
+		}
+	}
+}
+</style>

ghs/src/admin/warehouse/purchase/order.vue

@@ -0,0 +1,183 @@
+<template>
+	<view class="order-page">
+		<view class="tabs">
+			<Tabs :tabs="tabs" :itemWidth="'23%'" isAdd addText="新增"></Tabs>
+		</view>
+		<scroll-view scroll-y class="order-list">
+			<OrderItem v-for="(item, index) in orderList" :key="index"> </OrderItem>
+		</scroll-view>
+		<view class="bar-view">
+			<view class="btn-view">
+				<button class="admin-button-com middle blue" @click="">
+					新增
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+import Tabs from "@/components/plugin/tabs";
+import OrderItem from "./orderItem";
+export default {
+	components: {
+		Tabs,
+		OrderItem
+	},
+	data() {
+		return {
+			tabs: [
+				{
+					name: "全部",
+					key: "25",
+					value: "25"
+				},
+				{
+					name: "待确认",
+					key: "01",
+					value: "25"
+				},
+				{
+					name: "待配送",
+					key: "02",
+					value: "25"
+				},
+				{
+					name: "配送中",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "已完成",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "未完成",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "未完成",
+					key: "03",
+					value: "25"
+				},
+				{
+					name: "未完成",
+					key: "03",
+					value: "25"
+				}
+			],
+			orderList: [
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "01",
+					statusName: "已出库"
+				},
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "02",
+					statusName: "待出库"
+				},
+				{
+					orderNo: "PD20201217212800156",
+					name: "小许",
+					dateTime: "2020-7-10 21:50",
+					count: "101",
+					status: "03",
+					statusName: "已取消"
+				}
+			]
+		};
+	}
+};
+</script>
+<style lang="scss" scoped>
+.order-page {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #f9fbfc;
+	.order-list {
+		padding-top: 20upx;
+		flex: 1;
+		// padding-bottom: 50upx;
+		.allot-item {
+			margin-bottom: 1px;
+			padding: 30upx;
+			display: flex;
+			align-items: center;
+			box-shadow: 0px 1px 0px 0px #eeeeee;
+			background-color: #fff;
+			.info {
+				flex: 1;
+				margin-right: 20px;
+				.info-order {
+					font-size: 32upx;
+					font-weight: 600;
+					color: #333333;
+				}
+				.info-name {
+					margin: 40upx 0 20upx;
+					font-size: 28upx;
+					font-weight: 400;
+					color: #666666;
+				}
+				.info-time {
+					margin-right: 30upx;
+					font-size: 28upx;
+					font-weight: 400;
+					color: #666666;
+				}
+			}
+			.status {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				flex-shrink: 0;
+				width: 100upx;
+				color: #cccccc;
+				.status-name {
+					margin-top: 10upx;
+					font-size: 24upx;
+				}
+				.iconfont {
+					font-size: 46upx;
+				}
+				&.primary {
+					color: #3385ff;
+				}
+				&.gray {
+					color: #cccccc;
+				}
+				&.warn {
+					color: #ffaf1d;
+				}
+			}
+		}
+	}
+	.bar-view {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding: 0 30upx;
+		width: 100%;
+		height: 100upx;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
+
+		.btn-view {
+			display: flex;
+			.admin-button-com {
+				margin: 0 10upx;
+				width: 140upx;
+			}
+		}
+	}
+}
+</style>

ghs/src/admin/warehouse/purchase/orderItem.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="order-item-view">
+		<view class="item-header">
+			<view class="title">
+				<image
+					class="icon"
+					src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+					alt="商品图"
+				/>
+				<text class="name">
+					花极客
+				</text>
+			</view>
+			<view class="status">已入库 </view>
+		</view>
+		<view class="item-main">
+			<view class="item-info">
+				<view class="info-row">
+					<text class="info-label"> 日期:</text>
+					<text class="info-value">2020-11-20 </text>
+				</view>
+				<view class="info-row">
+					<text class="info-label"> 单号:</text>
+					<text class="info-value">FL58443 </text>
+				</view>
+				<view class="info-row">
+					<text class="info-label"> 人员:</text>
+					<text class="info-value">小仙子 </text>
+				</view>
+			</view>
+			<view class="item-price"
+				>¥580.50 <text class="iconfont iconxiangyou"></text>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	props: {
+		info: {
+			required: true
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.order-item-view {
+	padding: 30upx;
+	margin-bottom: 20upx;
+	width: 100%;
+	background-color: #fff;
+	.item-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20upx;
+		.title {
+			display: flex;
+			align-items: center;
+			flex: 1;
+
+			.icon {
+				margin-right: 20upx;
+				width: 50upx;
+				height: 50upx;
+				border-radius: 25upx;
+				border-radius: 50%;
+			}
+			.name {
+				font-size: 32upx;
+				font-weight: 600;
+				color: #333333;
+			}
+		}
+		.status {
+			flex-shrink: 0;
+			color: $mainColor;
+		}
+	}
+	.item-main {
+		display: flex;
+
+		align-items: flex-end;
+		.item-info {
+			flex: 1;
+
+			font-size: 26upx;
+			.info-row {
+				margin-top: 12upx;
+				display: flex;
+				align-items: center;
+			}
+			.info-label {
+				font-weight: 400;
+				color: #999999;
+			}
+			.info-value {
+				font-weight: 400;
+				color: #333333;
+			}
+		}
+		.item-price {
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+
+			font-size: 30upx;
+			font-weight: 600;
+			color: #333333;
+			.iconfont {
+				font-size: 28upx;
+				color: #999999;
+			}
+		}
+	}
+}
+</style>

ghs/src/components/plugin/tabs.vue

@@ -20,8 +20,11 @@
 			<view
 				v-for="(item, index) in tabs"
 				:key="index"
-				class="tui-tabs-item"
-				:class="{ 'border-left': borderLeft }"
+				:class="[
+					'tui-tabs-item',
+					{ active: currentTab == index },
+					{ 'border-left': borderLeft }
+				]"
 				:style="{ width: itemWidth }"
 				@tap.stop="swichTabs(index)"
 			>
@@ -55,7 +58,7 @@
 			<i class="iconfont" :class="[addIcon]"></i>
 			<span>{{ addText }}</span>
 		</div>
-		<view
+		<!-- <view
 			class="tui-tabs-slider"
 			:style="{
 				transform: 'translateX(' + scrollLeft + 'px)',
@@ -65,7 +68,7 @@
 				bottom: bottom,
 				marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
 			}"
-		></view>
+		></view> -->
 	</view>
 </template>
 
@@ -309,26 +312,30 @@ export default {
 	width: 100%;
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	// justify-content: center;
 	color: $fontColor3;
+	overflow-x: scroll;
 }
 
 .tui-tabs-item {
+	padding: 12upx 0;
 	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 0;
 
-	&:not(:last-child) {
+	&.active {
 		&:after {
+			display: block;
 			position: absolute;
-			right: 0;
-			top: 50%;
-			height: 40upx;
-			width: 1px;
+			width: 60%;
+			height: 6upx;
+			bottom: 0;
+			left: 50%;
 			content: "";
-			transform: translateY(-50%);
-			background-color: #dddddd;
+			background-color: $mainColor;
+			transform: translate(-50%, 0);
 		}
 	}
 }

ghs/src/pages.json

@@ -551,6 +551,32 @@
 					"style": {
 						"navigationBarTitleText": "采购单详情"
 					}
+				},
+				{
+					"path": "order",
+					"style": {
+						"navigationBarTitleText": "采购订单",
+						"enablePullDownRefresh": true
+					}
+				}
+			]
+		},
+		{
+			"root": "admin/warehouse/arrears/",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "客户欠款",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "details",
+					"style": {
+						"navigationBarTitleText": "欠款明细",
+						"enablePullDownRefresh": true
+					}
 				}
 			]
 		}