同步代码

pageDevice/commons/CommonPageByDevice.vue

@@ -0,0 +1,158 @@
+<!--
+  组件功能： 设备通用页面
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/12/06 11:30
+-->
+<template>
+  <JeepayBackground>
+	  
+	  <JeepayCustomNavbar bgDefaultColor="#fff" :title="props.navTitle" backCtrl="back" />
+	
+	<!-- 搜索 -->  
+    <JSearchTitle :place="props.searchTitle" @click="go.toSearchPage(props.searchType, props.searchParams)">
+      <template #right>
+		<JeepayStateSelect v-model:state="vdata.searchData[props.searchStateField]" @change="refTable()"/>
+      </template>
+    </JSearchTitle>
+	
+	<!-- 数据列表 -->
+    <JeepayTableList ref="codeTable" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
+      <template #tableBody="{ record }">
+		<DeviceCommonsRender :type="props.searchType" :record="record" />
+      </template>
+    </JeepayTableList>
+
+	<!-- 底部固定按钮 -->
+	<view class="list-footer">
+		<view class="button-wrapper">
+			<view class="store-name flex-center" hover-class="touch-hover" @tap="selectedStore">
+			  {{ vdata.selectedStrore.storeName || '全部门店' }}
+			  <image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
+			</view>
+			<Button v-if="props.bottomBtnTitle" @tap="emit('bottomBtnClickFunc')">{{ props.bottomBtnTitle }}</Button>
+		</view>
+	</view>
+  <JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayStoreSelect" />
+  </JeepayBackground>
+  
+  <!-- 门店选择  -->
+  
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
+import go from '@/commons/utils/go.js'
+import DeviceCommonsRender from '@/pages/list/render/DeviceCommonsRender.vue'
+
+onReachBottom(() => {})
+
+
+const codeTable = ref() // 表格实例
+const jeepayStoreSelect = ref()  // 获取门店选择弹窗实例
+const bindPopup = ref() // 绑定新码的提示信息
+
+
+// emit 父组件使用： v-model="val" 进行双向绑定。
+const emit = defineEmits(['bottomBtnClickFunc'])
+
+
+// 定义组件参数 
+const props = defineProps({
+	
+	// 导航
+	navTitle:  { type: String },
+	
+	// 搜索标题 
+	searchTitle:  { type: String },
+	
+	// 搜索类型
+	searchType: { type: String },
+	
+	// 搜索条件
+	searchParams: { type: Object },
+	
+	// 搜索状态帅选字段
+	searchStateField: { type: String, default: 'state' },
+	
+	// 底部按钮显示标题
+	bottomBtnTitle: { type: String },
+	
+	// 搜索事件
+	reqTableDataFunc: { type: Function },
+	
+})
+
+const vdata = reactive({
+	
+	searchData: { }, // 搜索条件
+	
+	selectedStrore: { },  // 当前选择门店
+	
+})
+
+const reqTableDataFunc = (params) => {
+  return props.reqTableDataFunc(params)
+}
+
+// 选择门店
+function selectedStore (){
+	
+  jeepayStoreSelect.value.open(vdata.selectedStrore).then((selected) => {
+	  
+	  // 当前选择的门店
+	  vdata.selectedStrore = selected || { }
+	  
+	  vdata.searchData.storeId = vdata.selectedStrore.storeId
+      refTable()
+  })
+}
+
+function refTable(v){
+	codeTable.value.refTable(v || true )
+}
+onMounted(()=>{
+  vdata.searchData[props.searchStateField] = ""
+})
+defineExpose({refTable})
+</script>
+
+<style lang="scss" scoped>
+.list-footer{
+  height: 180rpx;
+}
+
+  .code-state {
+    display: flex;
+    align-items: center;
+    margin-left: 40rpx;
+    font-size: 30rpx;
+    color: #222425;
+    image {
+      margin-left: 10rpx;
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+
+.store-name {
+  position: absolute;
+  top: -100rpx;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  font-size: 30rpx;
+  background-color: #fff;
+  border-top: 1rpx solid #ededed;
+  border-bottom: 1rpx solid #ededed;
+  background-color: rgba(252, 252, 252, 0.85);
+  backdrop-filter: blur(20rpx);
+  image {
+    margin-left: 10rpx;
+    width: 40rpx;
+    height: 40rpx;
+    transform: rotate(180deg);
+  }
+}
+</style>