同步代码

pageDevice/storePage/storeList.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="page-wrapper">
+		<!-- 搜索栏头部 -->
+		<view class="search-title">
+			<view class="search-input">
+				<!-- <view class="search-input" @tap="go.toSearchPage('mchApplyment')"> -->
+				<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" class="search-img" />
+				<input placeholder="搜索门店名称、编号" v-model="searchValue" placeholder-class="input-placeholder" @confirm="searchHandle" />
+				<view class="close" v-if="searchValue" @click="clearHandle">
+					<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" class="del-img" />
+				</view>
+			</view>
+			<view class="search-state" @click="searchHandle">
+				<div class="btn-wrap">
+					<view class="s-wrap flex-center">搜索</view>
+				</div>
+			</view>
+		</view>
+		<!-- <JSearchTitle place="搜索门店名称、编号" @tap="ak.go.toSearchPage('mchStore')" /> -->
+		<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
+			<template #tableBody="{ record }">
+				<!-- <MchStoreRender :record="record" /> -->
+				<MchStoreListRender :record="record" />
+			</template>
+		</JeepayTableList>
+		<view v-if="ak.ent.has('ENT_MCH_STORE_ADD')" class="list-footer">
+			<view class="button-wrapper">
+				<Button @tap="createStore">创建门店</Button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { nextTick, reactive, ref } from 'vue';
+import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app';
+import ak from '@/commons/utils/ak.js';
+import { reqLoad, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js';
+import MchStoreRender from '@/pages/list/render/MchStoreRender.vue';
+import MchStoreListRender from '@/pages/list/render/MchStoreListRender.vue';
+
+const jeepayTableListRef = ref();
+const searchValue = ref('');
+const vdata = reactive({
+	searchData: {
+		mchApplyName: ''
+	}
+});
+
+// 清空搜索
+function clearHandle() {
+	searchValue.value = '';
+	vdata.searchData.mchApplyName = searchValue.value;
+	jeepayTableListRef.value.refTable(true);
+}
+
+// 搜索
+function searchHandle() {
+	// reqTableDataFunc({ mchApplyName: searchValue });
+	vdata.searchData.mchApplyName = searchValue.value;
+	jeepayTableListRef.value.refTable(true);
+}
+
+onReachBottom(() => {});
+
+// 监听 更新事件
+onUnload(() => uni.$off(ak.emit.ENAME_REF_STORE_LIST));
+uni.$on(ak.emit.ENAME_REF_STORE_LIST, function (data) {
+	jeepayTableListRef.value.refTable(true);
+});
+
+// 请求
+function reqTableDataFunc(params) {
+	return reqLoad.list(API_URL_MCH_STORE_LIST, params);
+}
+
+const createStore = () => ak.go.to('PAGES_APP_STORE_EDIT');
+</script>
+<style lang="scss" scoped>
+.page-wrapper {
+	min-height: calc(100vh - 80rpx);
+	//   搜索栏样式
+	.search-title {
+		display: flex;
+		align-items: center;
+		padding: 0 30rpx;
+		background-color: #fff;
+
+		height: 110rpx;
+		.search-input {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			height: 70rpx;
+			background-color: #efefef;
+			border-radius: 12rpx;
+			position: relative;
+			padding-right: 70upx;
+			.search-img {
+				padding: 22rpx;
+				width: 26rpx;
+				height: 26rpx;
+			}
+			.close {
+				$closeSize: 70upx;
+				width: $closeSize;
+				height: $closeSize;
+				position: absolute;
+				top: 50;
+				right: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				.del-img {
+					$size: 34upx;
+					width: $size;
+					height: $size;
+				}
+			}
+		}
+		.search-state {
+			$height: 40upx;
+			width: 80upx;
+			height: $height;
+			margin-left: 30rpx;
+			font-size: 30rpx;
+			color: #222425;
+			position: relative;
+			overflow: hidden;
+			transition: all 0.1s ease-in-out;
+			&.active {
+				width: 80upx;
+			}
+			.arrow {
+				margin-left: 10rpx;
+				width: 40rpx;
+				height: 40rpx;
+				transform: rotate(180deg);
+			}
+			.btn-wrap {
+				width: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				transition: all 0.1s ease-in-out;
+				.s-wrap {
+					height: $height;
+				}
+			}
+		}
+	}
+}
+</style>