new-greemall-wxapp/pages/mywebsit/index.vue

<template>
	<view style="width: 100%; height: 100vh; background: rgb(247, 248, 255)">
		<zj-page-container>
			<view class="toubuyangs">
				<view class="search-container">
					<u-search shape="round" :showAction="false" placeholder="输入网点名称搜索" v-model="keyword"
						@search="getList">
					</u-search>
				</view>
			</view>
			<zj-page-fill style="height: 100vh;">
				<view class="list-container" v-if="showDataList.length > 0"
					style="box-sizing: border-box;padding-bottom: 100rpx;">
					<view class="mode" v-for="(item, index) in showDataList" :key="index">
						<view class="flex_asb" style="align-items: flex-start">
							<view class="content flex1">
								<view class="flex_asb">
									<view class="title">({{ item.websitId }}){{ item.name }}</view>
								</view>
								<view class="flex">
									<view class="hui" style="min-width: 80rpx;">地址</view>
									<view class="text">{{ item.address || '无' }}</view>
								</view>
								<view class="flex_end">
									<u-button style="width: 80rpx; height: 40rpx; margin: 0" shape="circle" text="选择"
										@tap="goEnter(item)"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</zj-page-fill>
		</zj-page-container>
	</view>
</template>

<script>
	import zjPageLayout from '@/components/zj-container/zj-page-layout.vue'
	import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
	import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			zjPageLayout,
			zjPageContainer,
			zjPageFill,
		},
		data() {
			return {
				dataList: [],
				keyword: '',
			}
		},
		onShow() {
			this.getList()
		},
		computed: {
			...mapState(['userInfo', 'isLogin', 'userId', 'websitData']),
			showDataList() {
				if (this.keyword) {
					return this.dataList.filter(item => ~item.name.indexOf(this.keyword) || ~item.websitId.indexOf(this
						.keyword))
				} else {
					return this.dataList
				}
			}
		},
		methods: {
			async getList() {
				console.log(11111)
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(222222,res)
						this.$axios({
							url: '/user/websitList',
							method: 'post',
							params: {
								lat: res.latitude,
								lng: res.longitude,
							},
						}).then((resData) => {
							this.dataList = resData.data
							console.log(resData)
						});
					},
					fail: err => {

					}
				})
			},


			goEnter(item) {
				this.$axios({
					url: '/user/getWebsitId',
					method: 'post',
					params: {
						websitId: item.websitId,
					},
				}).then((res) => {
					this.$axios({
						url: '/user/user/detail',
						method: 'get',
						params: {
							userId: this.userId
						}
					}).then(resData => {
						this.$store.commit('changeUserInfo', resData?.data);
						uni.setStorageSync('userInfo', resData?.data);
						if (resData?.data?.adminWebsit?.websitId) {
							this.$store.commit('changeWebsitObj', resData?.data?.adminWebsit);
							uni.setStorageSync('websitData', resData?.data?.adminWebsit);
							uni.setStorageSync("websitIdSj", resData?.data?.adminWebsit?.websitId);
						}
						uni.reLaunch({
							url: "/pages/index/index"
						})
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-container {
		background: #ffffff;
		padding: 20rpx;

		::v-deep .u-search {
			height: 60rpx;

			input {
				background: #f7f8ff !important;
			}

			.u-search__content {
				background: #f7f8ff !important;
				height: 60rpx;
			}
		}
	}

	.quanjuanniu {
		width: 100%;
		height: auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.neirongquyu {
		width: 100%;
		height: auto;
		padding: 30rpx 30rpx 15rpx 30rpx;
		box-sizing: border-box;

		.zhegeshineirong {
			width: 100%;
			height: auto;
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.neirongbiaot {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 40rpx;

				text {
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.neironglieju {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;
				margin-bottom: 30rpx;

				text {
					font-size: 28rpx;
				}
			}

			.neironghengxin {
				width: 100%;
				border-bottom: 1rpx solid #aaa;
				margin-bottom: 30rpx;
			}

			.neironganniuqu {
				widows: 100%;
				text-align: right;
			}
		}
	}

	.toubuyangs {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 30rpx 30rpx 15rpx 30rpx;
		background: #fff;

		.toubuyangsTab {
			width: 100%;
			height: auto;
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.toubuyangsTabItem {
				box-sizing: border-box;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.hengxian {
					margin-top: 20rpx;
					width: 100rpx;
				}

				.xuanzhong {
					border-bottom: 4rpx solid #000;
				}
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex_asb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex_end {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 30rpx;
	}

	.flex1 {
		flex: 1;
	}

	.list-container {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.mode {
		@include zj-card;
		padding: 30rpx 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.order {
			margin-bottom: 20rpx;
		}

		.content {
			width: 450rpx;

			.title {
				font-weight: bold;
				font-size: 30rpx;
			}

			.text,
			.hui {
				font-size: 28rpx;
				margin-top: 16rpx;
			}

			.hui {
				color: #999999;
				margin-right: 20rpx;
			}
		}

		.status {
			font-size: 28rpx;
			color: #0379ff;
		}

		.zhihui {

			.text,
			.hui,
			.title,
			.status {
				color: #999999 !important;
			}
		}

		.img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}
	}

	.search-container {
		background: #ffffff;
		padding: 20rpx;

		::v-deep .u-search {
			height: 60rpx;

			input {
				background: #f7f8ff !important;
			}

			.u-search__content {
				background: #f7f8ff !important;
				height: 60rpx;
			}
		}
	}
</style>