|
|
@@ -0,0 +1,258 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="top">
|
|
|
+ <view class="search">
|
|
|
+ <uni-row class="demo-uni-row" :width="nvueWidth">
|
|
|
+ <uni-col>
|
|
|
+ <view class="demo-uni-col">
|
|
|
+ <uni-easyinput class="uni-input" prefixIcon="search" v-model="searchVal" placeholder="请输入商户名称"></uni-easyinput>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ <uni-row class="demo-uni-row" :width="nvueWidth">
|
|
|
+ <uni-col :span="11">
|
|
|
+ <view class="demo-uni-col">
|
|
|
+ <uni-data-picker :localdata="items" placeholder="商铺位置" popup-title="选择商铺位置" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="5">
|
|
|
+ <view class="demo-uni-col">
|
|
|
+ <uni-data-select class="search-data-select" placeholder="使用状态" v-model="statusValue" :localdata="statusRange" @change="changeStatus">状态</uni-data-select>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="4">
|
|
|
+ <view class="demo-uni-col">
|
|
|
+ <button class="searchBtn" type="default" size="mini" @click="handleSearch">搜索</button>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="4">
|
|
|
+ <view class="demo-uni-col">
|
|
|
+ <button class="searchBtn" type="default" size="mini" @click="handleReset">重置</button>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-list border class="list">
|
|
|
+ <uni-list-item
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ :ellipsis="2"
|
|
|
+ :title=getTitle(item)
|
|
|
+ :note="item.createTime"
|
|
|
+ showArrow
|
|
|
+ clickable
|
|
|
+ @click="listItemBtn(item)">
|
|
|
+
|
|
|
+ </uni-list-item>
|
|
|
+ </uni-list>
|
|
|
+ <uni-load-more :status="more" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import dictApi from '../../api/dict.js';
|
|
|
+ import shopApi from '../../api/shop.js';
|
|
|
+ import { BASE_URL } from '../../env.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchVal: '',
|
|
|
+ // more = 加载前， loading = 加载中， noMore = 没有更多
|
|
|
+ more: 'more',
|
|
|
+ dataList: [],
|
|
|
+ items: [{
|
|
|
+ text: "一年级",
|
|
|
+ value: "1-0",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ text: "1.1班",
|
|
|
+ value: "1-1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "1.2班",
|
|
|
+ value: "1-2"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "二年级",
|
|
|
+ value: "2-0"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "三年级",
|
|
|
+ value: "3-0"
|
|
|
+ }],
|
|
|
+ queryForm: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ district: null,
|
|
|
+ building: null,
|
|
|
+ floor: null,
|
|
|
+ status: null,
|
|
|
+ name: null,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow: function() {
|
|
|
+ // this.init();
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ this.getShopList();
|
|
|
+ await this.getDicts();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTitle(shop){
|
|
|
+ const title = shop.district
|
|
|
+ + " 楼栋:" + shop.building
|
|
|
+ + " 楼层:" + shop.floor
|
|
|
+ + " 铺位号:" + shop.number;
|
|
|
+ + "商户:" + shop.name;
|
|
|
+ + "状态:" + shop.status;
|
|
|
+ return title;
|
|
|
+ },
|
|
|
+ async getDicts() {
|
|
|
+ const resp_district = await dictApi.getDict('che_district');
|
|
|
+ if (resp_district.code == 200)
|
|
|
+ this.districtRange = resp_district.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
|
|
|
+
|
|
|
+ const resp_vacant = await dictApi.getDict('vacant_status');
|
|
|
+ if (resp_vacant.code == 200)
|
|
|
+ this.statusRange = resp_vacant.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
|
|
|
+ },
|
|
|
+ // 列表点击函数
|
|
|
+ listItemBtn(e) {
|
|
|
+ uni.navigateTo({ url: `/pages/shop/info?id=${e.shopId}` })
|
|
|
+ },
|
|
|
+ // 搜索函数
|
|
|
+ async getShopList() {
|
|
|
+ this.reset();
|
|
|
+ this.more = 'loading';
|
|
|
+
|
|
|
+ const queryParams = {};
|
|
|
+ for (const key in this.queryForm) {
|
|
|
+ if (this.queryForm[key] !== null && this.queryForm[key] !== undefined) {
|
|
|
+ queryParams[key] = this.queryForm[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const resp = await shopApi.getShopList({...queryParams});
|
|
|
+ this.dataList.push(...resp.data.map(e => {return {...e}}))
|
|
|
+ // 根据总数 算页数 如果当前页 = 总页数就是没有数据 否则就是上拉加载
|
|
|
+ this.more = this.page >= Math.ceil(resp.total / this.size) ? 'noMore' : 'more';
|
|
|
+ },
|
|
|
+ // 搜索函数
|
|
|
+ async handleSearch() {
|
|
|
+ await this.getShopList();
|
|
|
+ },
|
|
|
+ async changeDistrict(e) {
|
|
|
+ this.buildingValue = null;
|
|
|
+ this.buildingRange.length = 0;
|
|
|
+ this.districtValue = e;
|
|
|
+ const resp_building = await shopApi.listBuildingByDistrict({district: e});
|
|
|
+ if (resp_building.code == 200)
|
|
|
+ this.buildingRange = resp_building.data.map(l => ({ ...l, value: l, text: l}));
|
|
|
+ },
|
|
|
+ changeBuidling(e) {
|
|
|
+ this.buildingValue = e;
|
|
|
+ console.log("e:", e);
|
|
|
+ },
|
|
|
+ changeStatus(e) {
|
|
|
+ console.log("e:", e);
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.dataList.length = 0;
|
|
|
+
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize= 12;
|
|
|
+ this.queryForm.district = this.districtValue;
|
|
|
+ this.queryForm.status = this.statusValue;
|
|
|
+ this.queryForm.building = this.buildingValue;
|
|
|
+ this.queryForm.floor = this.floor;
|
|
|
+ this.queryForm.name = this.searchVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 页面生命周期中onReachBottom（页面滚动到底部的事件）
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.more != 'noMore') {
|
|
|
+ this.more = 'more';
|
|
|
+ this.getShopList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #fff;
|
|
|
+ /* overflow: hidden; */
|
|
|
+ }
|
|
|
+ .tabsBox {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #d3d3d3;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ display: block;
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .current {
|
|
|
+ color: #ff9302;
|
|
|
+ border-bottom: 1px solid #ff9302;
|
|
|
+ }
|
|
|
+.search {
|
|
|
+ width: 98%;
|
|
|
+ border: 1px solid #f3f3f3;
|
|
|
+ background-color: #fff !important;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 2px;
|
|
|
+ padding: 2rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .demo-uni-row {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ /deep/ .uni-row {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .demo-uni-col {
|
|
|
+ height: 24px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .uni-easyinput {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .uni-easyinput .uni-easyinput__content {
|
|
|
+ border: 1px solid #f3f3f3;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .search-data-select{
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .searchBtn {
|
|
|
+ width: 98%;
|
|
|
+ background-color: #ff9302 !important;
|
|
|
+ border: none;
|
|
|
+ color: #fff !important;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+</style>
|
skym1024