su_nan-mobile_wx/pages/subPackages/merchants/components/mymechants.vue

<template>
  <div class="mymechants">
    <div class="form">
      <van-row>
        <van-col :span="4">
          <div class="yuanqu_label">园区</div>
        </van-col>
        <van-col :span="20">
          <uni-data-checkbox
            v-model="form.groupIds"
            mode="tag"
            :localdata="yuanqu_loacldata"
            selectedTextColor="#1D18BC"
            selectedColor="rgba(29,24,188,0.05);"
            @change="getSelectedYuanqu"
          >
          </uni-data-checkbox>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="24">
          <div class="addyixiang" @click="addyixiang()">
            +&nbsp;&nbsp;新增意向
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="list">
      <van-tabs
        v-if="loudongTabsStatus"
        :active="acitvy"
        @change="onChange"
        refs="tabsloudong"
        title-active-color="#1D18BC"
      >
        <van-tab title="跟进中"></van-tab>
        <van-tab title="已确认"></van-tab>
        <van-tab title="已签约"></van-tab>
        <van-tab title="关闭"></van-tab>
      </van-tabs>

      <div
        class="list-row"
        v-if="companyList.length != 0"
        v-for="(item, index) in companyList"
        @click="junmpMyMechantsDetails(item)"
        :key="index"
      >
        <div class="cell_1">
          <div class="width100 height44rpx mb32rpx">
            <div class="first_title">{{ item.companyId }}</div>
          </div>
          <div class="width100 height40rpx">
            <div class="second_title">{{ item.projectManager }}</div>
            <div class="second_title_1" @click="fuckCall(item.managerPhone)">
              {{ item.managerPhone }}
            </div>
            <div class="call_icon" @click="fuckCall(item.managerPhone)">
              <van-icon
                name="phone"
                color="#2527AA"
                size="40rpx"
                style="line-height: 40rpx"
              />
            </div>
            <div class="second_title_2">
              <span v-if="item.projectStatus == 1" style="color: #1d18bc"
                >跟进中</span
              >
              <span v-if="item.projectStatus == 2" style="color: #18bc28"
                >已确认</span
              >
              <span v-if="item.projectStatus == 3" style="color: #bc8e18"
                >已签约</span
              >
              <span v-if="item.projectStatus == 4" style="color: #666666"
                >已签约</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="list-row" v-if="companyList.length == 0">
        <van-empty
          class="disblock marginauto"
          style="background: white"
          description="暂无数据"
        />
      </div>
    </div>
  </div>
</template>

<script>
import vanTab from "../../../../wxcomponents/weapp/dist/tab/index";
import vanTabs from "../../../../wxcomponents/weapp/dist/tabs/index";
import vanEmpty from "../../../../wxcomponents/weapp/dist/empty/index";
import {
  findLongPanList,
  findYuanQuList,
  findCompanyInfoList,
  findRoomByCondition,
} from "@/js_sdk/http";

const form = {
  pageNum: 1,
  pageSize: 10,
  total: 0,
  projectStatus: 1,
};
export default {
  components: {
    vanTab,
    vanTabs,
  },

  data() {
    return {
      yuanqu_loacldata: [],
      loudongTabsStatus: false,
      acitvy: 0,
      form: {
        ...form,
      },
      active: 0,
      formData: {},
      value: 0,
      companyList: [],
      range: [
        {
          value: 0,
          text: "全部",
        },
        {
          value: 1,
          text: "科教园",
        },
        {
          value: 2,
          text: "红沙湾",
        },
        {
          value: 3,
          text: "胡埭",
        },
      ],
      loupanList: [
        {
          value: 0,
          text: "一期",
        },
        {
          value: 1,
          text: "二期",
        },
        {
          value: 2,
          text: "三期",
        },
        {
          value: 3,
          text: "四期",
        },
        {
          value: 4,
          text: "五期",
        },
        {
          value: 5,
          text: "六期",
        },
        {
          value: 6,
          text: "七期",
        },
        {
          value: 7,
          text: "八期",
        },
        {
          value: 8,
          text: "九期",
        },
      ],
      statusList: [
        {
          value: 0,
          text: "空置",
        },
        {
          value: 1,
          text: "锁定",
        },
        {
          value: 2,
          text: "办公",
        },
        {
          value: 3,
          text: "已租",
        },
        {
          value: 4,
          text: "司法",
        },
        {
          value: 5,
          text: "维修",
        },
      ],
      fangxiangList: [
        {
          value: 0,
          text: "东",
        },
        {
          value: 1,
          text: "南",
        },
        {
          value: 2,
          text: "西",
        },
        {
          value: 3,
          text: "北",
        },
      ],
      xinzhiList: [
        {
          value: 1,
          text: "自有物业",
        },
        {
          value: 2,
          text: "社会物业",
        },
      ],
    };
  },
  onLoad() {},
  mounted() {
    this.findYuanQuList();
    this.firstfindCompanyInfoList();
  },
  methods: {
    junmpMyMechantsDetails(item) {
      uni.navigateTo({
        url:
          "/pages/subPackages/merchants/components/mymechantsdetails?id=" +
          item.id,
      });
    },
    fuckCall(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber, //仅为示例
      });
    },
    onChange(e) {
      this.form.projectStatus = e.detail.index + 1;
      this.firstfindCompanyInfoList();
    },
    getSelectedYuanqu() {
      this.firstfindCompanyInfoList();
    },
    async firstfindCompanyInfoList() {
      let data = await findCompanyInfoList({
        ...this.form,
        pageNum: 1,
        pageSize: 10,
        total: 0,
      });

      this.companyList = data.rows;
    },
    async findCompanyInfoList() {
      let data = await findCompanyInfoList(this.form);
      this.companyList = data.rows;
    },
    getasd() {},
    async getMoreList() {
      this.form.pageNum += 1;
      let data = await findCompanyInfoList(this.form);
      for (let i = 0; i < data.rows; i++) {
        this.companyList.push(data.rows[i]);
      }
    },
    async findYuanQuList() {
      findYuanQuList().then((data) => {
        let all = {
          id: "",
          groupName: "全部",
        };
        let yuanqu_list = [all, ...data];
        let yuanqu_loacldata = yuanqu_list.map((e) => {
          return {
            value: e.id,
            text: e.groupName,
          };
        });
        this.yuanqu_loacldata = yuanqu_loacldata;
      });

      // console.log(yuanqu_loacldata)
    },
    addyixiang() {
      uni.navigateTo({
        url: "/pages/subPackages/addintention/addintention",
      });
    },
    resize() {
      this.loudongTabsStatus = true;
    },

    onLoadMore() {},
    getChaoxiang() {},
    getStatus() {},
  },
  onPullDownRefresh: function () {
    // 加载数据
  },
  onReachBottom() {
    console.log("滑动到距离底部100px的时候触发,可以放 。。业务逻辑");
  }, //下拉执行的时候触发 （下拉刷新）
};
</script>

<style lang="scss">
.mymechants {
  .yuanqu_label {
    font-size: 31rpx;
    height: 71rpx;
    line-height: 71rpx;
  }
  .uni-data-checklist {
    margin-top: 0rpx !important;
  }

  .addyixiang {
    color: #3f3fb4;
    background: #eaeaf2;
    width: 170rpx;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    font-size: 26rpx;
    border: 2rpx #a6a6a9 dashed;
  }
  .list-row {
    width: calc(100% - 64rpx);
    padding: 16rpx 32rpx 18rpx 32rpx;
    background: #ffffff;
    margin-bottom: 16rpx;
    display: flex;
    //height: 278rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  .icon_phone {
  }
  .list-row {
    width: calc(100% - 64rpx);
    padding: 32rpx 32rpx 38rpx 32rpx;
    background: #ffffff;
    margin-bottom: 16rpx;
    display: flex;
    //height: 278rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  .mb32rpx {
    margin-bottom: 32rpx;
  }
  .second_title {
    float: left;
    width: 30%;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #777777;
  }
  .second_title_1 {
    float: left;
    width: 25%;
    font-size: 28rpx;

    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #777777;
  }
  .call_icon {
    height: 40rpx;
    width: 40rpx;
    margin-top: -5rpx;
    margin-left: 15rpx;
    float: left;
  }
  .second_title_2 {
    float: left;
    width: 35%;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    text-align: right;
    color: #777777;
  }
  .cell_1 {
    float: left;
    width: 100%;
  }
  .cell_2 {
    float: left;
    width: 20%;
    img {
      height: 60rpx;
      width: 60rpx;
      float: right;
      margin: 96rpx 0rpx 94rpx 0;
    }
  }
  .list {
    width: calc(100% - 64rpx);

    margin: 32rpx;
  }

  .form {
    width: calc(100% - 128rpx);
    margin: 32rpx;
    background: #ffffff;
    padding: 32rpx;
    .uni-data-checklist {
      margin: 0rpx !important;
    }

    .label {
      height: 53rpx;
      line-height: 53rpx;
    }
  }

  .checklist-box {
    margin: 0 !important;
    margin-right: 16rpx !important;
  }

  .labelcolmt26 {
    .van-cell {
      padding: 0 0 0 28rpx !important;
    }

    .van-col {
      margin-top: 26rpx !important;
    }

    label {
      color: #333333;
      font-size: 30rpx;
      margin-top: 10rpx !important;
    }

    .uni-data-checklist {
      margin-top: -10rpx !important;
      margin-top: 0rpx !important;
    }
  }

  .status {
    .uni-data-checklist {
      margin-top: 0rpx !important;
    }

    label {
      color: #333333;
      font-size: 30rpx;
      padding-right: 0rpx !important;
    }
  }
}
</style>