重构

components/SiteSelector/index.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="ems-site-selector">
+		<uni-data-picker placeholder="请选择" popup-title="业态选择" :step-searh="true" :value="siteId" :clear-icon="false"
+			:localdata="siteTypeOptions" :ellipsis="false" @change="handleChange">
+		</uni-data-picker>
+	</view>
+</template>
+
+<script>
+	import { mapGetters } from 'vuex'
+
+	export default {
+		computed: {
+			...mapGetters(['siteId', 'siteTypeOptions'])
+		},
+		methods: {
+			handleChange(data) {
+				const valueList = data?.detail?.value || []
+				const siteObj = valueList[1]
+				if (!siteObj || siteObj.value === undefined || siteObj.value === null || siteObj.value === this.siteId) return
+				this.$store.dispatch('SetCurrentSiteId', siteObj.value)
+				this.$emit('change', siteObj.value)
+			}
+		},
+		created() {
+			this.$store.dispatch('LoadSites')
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.ems-site-selector {
+		.uni-data-tree {
+			::v-deep {
+				.input-value {
+					border: none;
+					padding-left: 0;
+
+					.selected-area {
+						width: 90%;
+						flex: none;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+
+						.selected-list {
+							color: #fff;
+						}
+					}
+
+					.text-color {
+						color: #fff;
+						font-size: 34rpx;
+						line-height: 36rpx;
+						font-weight: bolder;
+					}
+
+					.arrow-area {
+						transform: rotate(-135deg);
+
+						.input-arrow {
+							border-color: #fff;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/SiteSwitchHeader/index.vue

@@ -0,0 +1,128 @@
+<template>
+	<view class="site-switch-header">
+		<uni-data-picker
+			placeholder="请选择"
+			popup-title="业态选择"
+			:step-searh="true"
+			:value="siteId"
+			:clear-icon="false"
+			:localdata="siteTypeOptions"
+			:ellipsis="false"
+			@change="handleChange"
+		/>
+		<view class="info">
+			<view class="list">
+				<uni-icons type="location" color="#fff" size="20"></uni-icons>
+				{{ siteAddress || '-' }}
+			</view>
+			<view class="list">
+				<uni-icons type="calendar" color="#fff" size="20"></uni-icons>
+				{{ runningTime || '-' }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			siteId: {
+				type: [String, Number],
+				default: ''
+			},
+			siteTypeOptions: {
+				type: Array,
+				default: () => []
+			},
+			siteAddress: {
+				type: String,
+				default: '-'
+			},
+			runningTime: {
+				type: String,
+				default: '-'
+			}
+		},
+		methods: {
+			handleChange(data) {
+				this.$emit('change', data)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.site-switch-header {
+		background: linear-gradient(to right, #547ef4, #679ff5);
+		padding: 30rpx 30rpx;
+		padding-bottom: 100rpx;
+		color: #fff;
+
+		.info {
+			color: #fff;
+			font-size: 26rpx;
+			line-height: 30rpx;
+			vertical-align: middle;
+			margin-top: 20rpx;
+
+			>.list {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+
+				&:not(:last-child) {
+					margin-bottom: 20rpx;
+				}
+
+				>.uni-icons {
+					margin-right: 10rpx;
+				}
+			}
+		}
+
+		.uni-data-tree {
+			::v-deep {
+				.uni-data-tree-dialog {
+					color: #333;
+
+					.selected-item,
+					.dialog-title {
+						color: #333;
+					}
+				}
+
+				.input-value {
+					border: none;
+					padding-left: 0;
+
+					.selected-area {
+						width: 90%;
+						flex: none;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+
+						.selected-list {
+							color: #fff;
+						}
+					}
+
+					.text-color {
+						color: #fff;
+						font-size: 34rpx;
+						line-height: 36rpx;
+						font-weight: bolder;
+					}
+
+					.arrow-area {
+						transform: rotate(-135deg);
+
+						.input-arrow {
+							border-color: #fff;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>