yicangzongtai_app_240321/pages/user/regional-agency/lock-position.vue

<template>
  <view>
    <navbar :config="config" backColor="#999999"></navbar>
    <view class="select-top">
      <block v-for="(item , index) in selectCity" :key="index">
        <view class="reserve-item" @click.stop="selectProvince">
          <view class="reserve-lable">
            <text class="reserve-text" v-if="item.label">{{ item.label }}</text>
            <text class="reserve-hint" v-else-if="index == 0">--省--</text>
            <text class="reserve-hint" v-else-if="index == 1">--市--</text>
            <text class="reserve-hint" v-else-if="index == 2">--区/县--</text>
          </view>
          <view class="reserve-icon iconfont3">&#xe65c;</view>
        </view>
      </block>

    </view>
    <view class="card-box">
      <block v-for="item in lockList" :key="item.id">
        <view class="reserve-card">
          <text class="title">{{item.province_name}}-{{item.city_name}}-{{item.area_name}}</text>
          <text class="hint">很遗憾此城市区域已被锁定，请您选择其他城市</text>
          <text class="status">被锁定</text>
        </view>
      </block>
      <loadMore v-if="lockList.length>0" :status="status"></loadMore>
      <nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
    </view>
    <u-select v-model="areaShow" mode="mutil-column-auto" :list="provincesList" @confirm="confirmSite"></u-select>
  </view>
</template>

<script>
  import {
    applyareaagentPage
  } from "@/api/personal-center.js"
  import selectSite from "./select.vue"
  export default {
    components: {
      selectSite
    },
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '查看被锁定的区县',
          color: '#1A1A1A',
          // autoBack:true,
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A'
        },
        areaShow: false,
        provincesList: [],
        selectCity: [{}, {}, {}],
        lockList: [],
        params: {
          page: 1,
          limit: 20
        },
        status: 'loading', //more|loading|noMore
      }
    },
    created() {
      // this.getCode()
    },
    onShow() {
      this.getAddressList();
      this.initialize();
    },
    onLoad() {},
    onReachBottom() {
      if (this.activeType === 2 && this.status !== 'loading' && this.status !== 'noMore') {
        this.params.page++
        this.getApplyareaagentPage()
      }
    },
    onPullDownRefresh() {
      this.params.page = 1
      this.lockList = []
      this.getApplyareaagentPage()
    },
    methods: {
      initialize() {
        this.params.page = 1;
        this.lockList = [];
        this.getApplyareaagentPage();
      },
      getApplyareaagentPage() {
        let province_code = this.selectCity[0].value;
        let city_code = this.selectCity[1].value;
        let area_code = this.selectCity[2].value;
        let parms =
          `${province_code ? 'province_code=' + province_code + '&' :''}${city_code ? 'city_code=' + city_code + '&' :''}${area_code ? 'area_code=' + area_code + '&' :''}page=${this.params.page}&limit=${this.params.limit}&lock=1`;
        this.$http.get(`${applyareaagentPage}?${parms}`).then(res => {
          if (res && res.code == 200) {
            uni.stopPullDownRefresh()
            this.lockList = this.lockList.concat(res.page.list);
            if (res.page.totalPage <= res.page.currPage) {
              this.status = 'noMore'
            } else {
              this.status = 'more'
            }
          }

        })
      },
      // 
      // 区域代理
      lockPosition() {
        uni.navigateTo({
          url: '/pages/user/regional-agency/lock-position'
        })
      },
      confirmSite(e) {
        this.selectCity = e;
        this.initialize();
      },
      //获取地址列表
      async getAddressList() {
        let req = this.$http.get('/cnarea/tree-lbs', {});
        req.then(res => {
          console.log('getAddressList = ', res)
          this.provincesList = res.tree.children;
        })
      },
      selectProvince() {
        this.areaShow = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .select-top {
    width: 100%;
    height: 136.5rpx;
    display: flex;
    align-items: center;
    padding: 30rpx 60rpx 0;
    background-color: #fff;

    .reserve-item {
      flex: 1 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1rpx solid #d9d9d9;
    }

    .reserve-icon {
      flex-shrink: 0;
      font-size: 30rpx;
      color: #808080;
    }
  }

  .card-box {
    width: 100%;
    padding: 0 30rpx;

    .reserve-card {
      margin-top: 30rpx;
      padding: 40rpx 30rpx;
      background-color: #fff;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      position: relative;

      .title {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #1a1a1a;
      }

      .hint {
        margin-top: 15rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }

      .status {
        position: absolute;
        right: 0;
        top: 0;
        padding: 11rpx 16rpx;
        background: #e7eefc;
        border-radius: 0rpx 12rpx 0rpx 12rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #FA6138;
      }
    }
  }
</style>