product_wx/pages/subPackages/merchants/components/mymechants.vue

<template>
  <div class="mymechants">
    <div style="display: flex; padding-top: 20rpx; padding-bottom: 20rpx">
      <div
        style="margin-left: auto; margin-right: 40rpx"
        class="addyixiang"
        @click="addyixiang()"
      >
        +&nbsp;&nbsp;新增项目
      </div>
    </div>
    <div class="form">
      <div style="display: flex; align-items: center">
        <div class="yuanqu_label">项目/企业名称</div>
        <input
          confirm-type="search"
          @confirm="firstfindCompanyInfoList"
          type="text"
          v-model="form.projectName"
          placeholder="请输入"
          style="
            display: block;
            border: 1px solid #ccc;
            padding: 5rpx 2rpx;

            width: 420rpx;
            font-size: 24rpx;
          "
        />
      </div>
      <div style="display: flex; align-items: center; margin-top: 5rpx">
        <div class="yuanqu_label">招商负责人</div>
        <input
          confirm-type="search"
          @confirm="firstfindCompanyInfoList"
          type="text"
          v-model="form.truename"
          placeholder="请输入"
          style="
            display: block;

            border: 1px solid #ccc;
            padding: 5rpx 2rpx;

            width: 420rpx;
            font-size: 24rpx;
          "
        />
      </div>
    </div>
    <div class="list">
      <van-tabs
        v-if="loudongTabsStatus"
        :active="acitvy"
        @change="onChange"
        refs="tabsloudong"
        title-active-color="#1D18BC"
      >
        <van-tab title="全部" name="全部"></van-tab>
        <van-tab
          v-for="item in dic_SelectList.project_status"
          :title="item.label"
          :name="item.value"
        ></van-tab>
      </van-tabs>

      <div
        class="list-row"
        v-if="companyList.length != 0"
        v-for="(item, index) in companyList"
        :key="index"
      >
        <div class="cell_1">
          <div class="width100 height44rpx" style="margin-bottom: 14rpx">
            <div class="first_title" @click="junmpMyMechantsDetails(item)">
              {{ item.projectName }}
            </div>
          </div>
          <div
            class="width100 height40rpx"
            style="display: flex; align-items: center"
          >
            <div class="second_title" @click="junmpMyMechantsDetails(item)">
              企业联系人：{{ item.projectManager }}
            </div>
          </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
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            "
          >
            <div class="width100" style="display: flex; align-items: center">
              <div class="second_title" @click="junmpMyMechantsDetails(item)">
                招商负责人：{{ item.truename }}
              </div>
            </div>

            <div class="second_title_2"></div>
          </div>
          <div>
            <picker
              @change="bindPickerChange"
              :range="dic_SelectList.project_status"
              range-key="label"
            >
              <!-- {{ created_by + "," + item.created_by }} -->
              <div
                v-if="created_by == 1 || created_by == item.created_by"
                @click="changeProjecStatus(item)"
                style="
                  border: 1px solid #2527aa;
                  height: 28px;
                  width: 120rpx;
                  font-size: 24rpx;
                  text-align: center;
                  line-height: 28px;
                  background: #2527aa;
                  color: white;
                  border-radius: 0.5rem;
                "
              >
                项目状态
              </div>

              <div
                v-else
                style="
                  border: 1px solid #cccccc;
                  height: 28px;
                  width: 120rpx;
                  font-size: 24rpx;
                  text-align: center;
                  line-height: 28px;
                  background: #cccccc;
                  color: white;
                  border-radius: 0.5rem;
                "
              >
                项目状态
              </div>
            </picker>
          </div>
        </div>
        <div class="cell_2" @click="junmpMyMechantsDetails(item)">
          <img src="../../../../static/mine/youjiantou.png" alt="" />
        </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,
  changeProjectStatus,
  getByCodes,
  findRoomByCondition,
  getUserLocalStorageInfo,
} from "@/js_sdk/http";

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

  data() {
    return {
      dic_key: ["project_status"],
      dic_SelectList: {},
      rowId: "",
      created_by: getUserLocalStorageInfo().user.id,
      projectStatusList: [
        { name: "跟进中", value: 1 },
        { name: "已确认", value: 2 },
        { name: "已签约", value: 3 },
        { name: "关闭", value: 4 },
      ],
      yuanqu_loacldata: [],
      loudongTabsStatus: false,
      acitvy: 0,
      form: {
        ...form,
        truename: getUserLocalStorageInfo().user.truename,
      },
      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.form.truename = getUserLocalStorageInfo().user.truename;
    this.findYuanQuList();
    this.getByCodes();
    this.firstfindCompanyInfoList();
  },
  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      console.log(data);
      this.dic_SelectList = this.$common.handleDicList(data);
      console.log("this.dic_SelectList.project_status", this.dic_SelectList);
      this.projectStatusList = this.$common.handleDicList(data).map((e) => {
        return {
          name: e.label,
          value: e.value,
        };
      });
    },
    async bindPickerChange(e) {
      console.log(e);
      console.log(this.projectStatusList[e.detail.value].value);
      let data = await changeProjectStatus({
        id: this.rowId,
        projectStatus: this.projectStatusList[e.detail.value].value,
      });
      console.log("你改好了吗", data);
      if (data.code == 200) {
        this.$showToast("状态修改成功");
        this.firstfindCompanyInfoList();
      }
      console.log(data);
    },
    changeProjecStatus(item) {
      this.rowId = item.id;
      console.log(item);
    },
    junmpMyMechantsDetails(item) {
      uni.navigateTo({
        url:
          "/pages/subPackages/merchants/components/mymechantsdetails?id=" +
          item.id,
      });
    },
    fuckCall(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber, //仅为示例
      });
    },
    onChange(e) {
      console.log(e);
      this.form.projectStatus = e.detail.name == "全部" ? "" : e.detail.index;
      this.firstfindCompanyInfoList();
    },
    getSelectedYuanqu() {
      this.firstfindCompanyInfoList();
    },
    async firstfindCompanyInfoList() {
      this.form.pageNum = 1;
      let data = await findCompanyInfoList({
        ...this.form,
      });

      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);
      if (this.companyList.length == data.total) {
        this.$showToast("没有更多数据");
        return;
      }
      this.companyList = [...this.companyList, ...data.rows];
      this.$forceUpdate();
      console.log(this.companyList.length);
    },
    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">
.yuanqu-checkbox {
  label {
    margin-right: 20rpx !important;
    margin-top: 0 !important;
    padding: 6rpx 16rpx !important;
  }
}
.mymechants {
  .yuanqu_label {
    font-size: 28rpx;
    width: 200rpx;
  }
  .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: 100%;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    overflow: hidden;
    margin-bottom: 14rpx;
    color: #777777;
  }
  .second_title_1 {
    float: left;
    width: 66%;
    font-size: 28rpx;
    margin-bottom: 14rpx;
    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;
    margin-top: 0px;
    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>