FarmingWx_V2_message/pages/group/index.vue

<template>
  <view class="supply-hall">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template slot="top">
        <u-navbar :autoBack="true" bgColor="transparent">
          <view
            slot="center"
            class="supply-hall-search"
            style="width: 530rpx; display: flex; justify-content: flex-start"
          >
            <view class="" style="width: 400rpx">
              <u-input
                class="header-search"
                placeholder="分类,地区,群名称"
                prefixIcon="search"
                prefixIconStyle="font-size: 22px;color: #909399"
              >
                <template slot="suffix">
                  <u-button text="搜索" type="primary"></u-button>
                </template>
              </u-input>
            </view>
          </view>
        </u-navbar>
        <view class="supply-hall-header">
          <view :style="{ height: statusBarHeight + 'px' }"></view>
        </view>
        <view class="supply-hall-screen">
          <view class="supply-hall-screen-item" @click="screenClick(1)">
            <view class="">
              <u--text
                :text="screenData.className"
                size="28rpx"
                :color="screenIndex == 1 ? '#00D36D' : '#666666'"
              ></u--text>
            </view>
            <view class="ml6">
              <u-icon
                :name="screenIndex == 1 ? 'arrow-up-fill' : 'arrow-down-fill'"
                :color="screenIndex == 1 ? '#00D36D' : '#b7b7b7'"
                size="20rpx"
              ></u-icon>
            </view>
          </view>
          <view class="supply-hall-screen-item" @click="screenClick(2)">
            <view class="">
              <u--text
                :text="screenData.addressName"
                size="28rpx"
                :color="screenIndex == 2 ? '#00D36D' : '#666666'"
              ></u--text>
            </view>
            <view class="ml6">
              <u-icon
                :name="screenIndex == 2 ? 'arrow-up-fill' : 'arrow-down-fill'"
                :color="screenIndex == 2 ? '#00D36D' : '#b7b7b7'"
                size="20rpx"
              ></u-icon>
            </view>
          </view>

          <view
            class=""
            v-show="screenStatus"
            style="
              background-color: #ffffff;
              position: absolute;
              top: 70rpx;
              z-index: 997;
              width: 100%;
            "
          >
            <view class="" v-show="screenIndex == 1">
              <classification @select="selectClass"></classification>
            </view>
            <view class="" v-show="screenIndex == 2">
              <gjsSelectCity @select="selectAddress"></gjsSelectCity>
            </view>
          </view>
        </view>
      </template>
      <view class="main">
        <view
          class="item"
          v-for="(item, index) in dataList"
          :key="index"
          @click="grouoDetail(item)"
        >
          <view class="left">
            <img :src="item.faceUrl" alt="" class="img" />
          </view>
          <view class="right">
            <view class="right_contont">
              <view style="width: 80%">
                <view class="title">{{ item.name }}</view>
                <view class="value">
                  <view class="gys"> 供应商:{{ item.supplierCount }}人 </view>
                  <view class="cgs"> 采购商:{{ item.purchaserCount }} 人 </view>
                </view>
              </view>
              <view @click.stop="join(item)">
                <u-button
                  type="primary"
                  text="加入"
                  color="linear-gradient( 275deg, #01CF6C 0%, #07E278 100%)"
                  shape="circle"
                ></u-button>
              </view>
            </view>
            <view class="remake"> {{ item.introduction }} </view>
          </view>
        </view>
      </view>
    </z-paging>

    <u-popup :show="show" @close="show = false" @open="open">
      <view style="padding: 15px">
        <view style="text-align: right; position: absolute; right: 20rpx">
          <image
            src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/imImges/close.png"
            style="width: 40rpx; height: 40rpx"
            @click="show = false"
          />
        </view>
        <view class="main">
          <view class="item">
            <view class="left">
              <img :src="itemData.faceUrl" alt="" class="img" />
            </view>
            <view class="right">
              <view class="right_contont">
                <view style="width: 80%">
                  <view class="title">{{ itemData.name }}</view>
                </view>
              </view>

              <view class="remake"> 群ID:{{ itemData.id }} </view>
              <view class="remake"> {{ itemData.introduction }} </view>
            </view>
          </view>
          <view class="imgs">
            <view class="item_img">
              <image
                src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/imImges/yzkh.png"
                class="icon"
              />
              <view> 优质客户 </view>
            </view>
            <view class="item_img">
              <image
                src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/imImges/xxgx.png"
                class="icon"
              />
              <view> 信息共享 </view>
            </view>
            <view class="item_img">
              <image
                src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/imImges/qsmh.png"
                class="icon"
              />
              <view> 轻松卖货 </view>
            </view>
          </view>
        </view>
        <view class="popup" style="margin-top: 40rpx">
          <u-button
            type="primary"
            :plain="true"
            :text="`${itemData.price}元加入群聊`"
            :customStyle="customStyle"
            @click="addGroup"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import gjsSelectCity from "@/components/gjs-selectCity.vue";
import classification from "@/components/classification.vue";
export default {
  components: {
    gjsSelectCity,
    classification,
  },
  data() {
    return {
      show: false,
      popupShow: false,
      statusBarHeight: 0,
      bottomStatusHeight: 0,
      pullDownStatus: "loading",
      screenData: {
        className: "分类",
        classId: "",
        addressName: "发货地",
        addressId: "",
      },

      queryParams: {
        pageNumber: 1,
        pageSize: 5,
        area: "",
        category: "",
      },
      screenIndex: 0,
      screenStatus: false,
      classList: [],
      dataList: [],
      itemData: {},
    };
  },
  mounted() {
    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    const { windowHeight, screenHeight, safeArea, statusBarHeight } = uni.$u.sys(); // 获取页面高度
    let menuButtonObject = uni.getMenuButtonBoundingClientRect();
    let navHeight =
      menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
    this.statusBarHeight = navHeight + statusBarHeight + 4;
    let tabBarHeight = windowHeight - safeArea.bottom;
    this.bottomStatusHeight = screenHeight - this.statusBarHeight - tabBarHeight;
    // #endif
  },
  onLoad(option) {
    console.log("option", option);
  },

  onReady() {},
  methods: {
    setData(aaa) {
      console.log("12312321", aaa);
    },
    addGroup() {
      let userid = uni.getStorageSync("userId");
      let openid = uni.getStorageSync("openid");
      if (this.itemData.price == 0) {
        let params = {
          userId: userid,
          ragId: this.itemData.id,
          ragStatus: 0,
          userType: 1,
        };
        this.api.addRagUser(params).then((res) => {
          if (res.code === 200) {
            if (res.msg == "该用户已加入过该群组") {
            }
          }
        });
      } else {
        let params = {
          body: this.itemData.introduction,
          attach: 1,
          oriMon: this.itemData.price,
          payKinds: 0,
          payMeth: 2,
          ragId: this.itemData.id,
          openId: openid,
        };
        this.api.addImGroupOrder(params).then((res) => {
          if (res.code === 200) {
            this.show = false;
            webUni.webView.navigateTo({
              url:
                `/subpages/message/pay/index?info=` + encodeURIComponent(res.data.result),
            });
          }
        });
      }
    },

    join(record) {
      this.itemData = record;
      if (record.isAddGroupStatus == 1) {
        //已加群
      } else {
        this.show = true;
      }
    },
    queryList(pageNumber, pageSize) {
      this.queryParams.pageNumber = pageNumber;
      this.queryParams.pageSize = pageSize;
      let dataList = [];
      this.$refs.paging.complete(dataList);
      this.api
        .getAllGroups(this.queryParams)
        .then((res) => {
          if (res.code === 200) {
            console.log("123213", res);

            this.$refs.paging.complete(res.data.content);
          }
        })
        .catch((res) => {
          this.$refs.paging.complete(false);
        });
    },
    grouoDetail(record) {
      uni.navigateTo({
        url: "/pages/group/data?info=" + JSON.stringify(record),
      });
    },
    // 筛选点击事件
    screenClick(i) {
      this.screenIndex = i;
      if (this.screenStatus) {
        this.screenIndex = "";
        this.screenStatus = false;
      } else {
        this.screenStatus = true;
      }
    },
    // 发货地返回值
    selectAddress(i) {
      this.screenData.addressName = i.name;
      this.screenData.addressId = i.cityId;
      this.screenStatus = false;
      this.ajax.page = 1;
      this.ajax.load = true;
      this.getList();
    },
    // 分类返回值
    selectClass(i) {
      this.screenData.className = i.className;
      this.screenData.classId = i.id;
      this.screenStatus = false;
      this.ajax.page = 1;
      this.ajax.load = true;
      this.getList();
    },

    // 筛选清空事件
    screenReset() {
      this.screenData.lowestPrice = "";
      this.screenData.maxPrice = "";
      this.screenData.minPurchase = "";
      this.screenData.maxPurchase = "";
    },
    // 筛选确定
    screenOk() {
      this.ajax.page = 1;
      this.ajax.load = true;
      this.getList();
      this.screenStatus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.imgs {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  .item_img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    .icon {
      width: 120rpx;
      height: 120rpx;
    }
  }
}

.popup ::v-deep .u-button {
  width: 100% !important;
  height: 38px !important;
  background: linear-gradient(87deg, #28d141 0%, #28ef8c 100%) !important;
  border: none !important;
  border-radius: 29rpx !important;
  font-size: 28rpx !important;
  font-weight: bold !important;
  margin-top: 30px;
  color: white;
}
.main {
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 20px;
    background: white;
    .left {
      width: 20%;
      margin-right: 10px;
      .img {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
      }
    }
    .right {
      width: 80%;
      line-height: 25px;
      .remake {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }
      .right_contont {
        display: flex;
        flex-direction: row;
        align-items: center;
        .gys {
          width: 168rpx;
          height: 28rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #ff8b2f;
          line-height: 28rpx;
          font-style: normal;
        }
        .cgs {
          width: 168rpx;
          height: 28rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #00d36d;
          line-height: 28rpx;
          font-style: normal;
        }
      }
      .value {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 60rpx;
      }
      .title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }
    }
  }
}
.supply-hall {
  width: 750rpx;
  height: 100vh;
  background-color: white;
  overflow: hidden;

  &-tabs {
    height: 70rpx;
    background-color: #ffffff;
    border-radius: 0rpx 0rpx 28rpx 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 24rpx;

    &-item {
      display: flex;
      align-items: center;
    }
  }

  &-screen {
    height: 70rpx;
    background-color: #ffffff;
    // border-radius: 0rpx 0rpx 28rpx 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;

    &-item {
      display: flex;
      align-items: center;
    }
  }
}

.ml6 {
  margin-left: 6rpx;
}

::v-deep .supply-hall-search .u-input.data-v-113bc24f {
  background-color: #fff !important;
  box-sizing: border-box !important;
  border-radius: 33rpx !important;
  height: 64rpx !important;
  padding-right: 2rpx !important;
}

::v-deep .popup-item .u-input.data-v-113bc24f {
  background-color: #fff !important;
  box-sizing: border-box !important;
  border-radius: 33rpx !important;
  height: 64rpx !important;
  padding-right: 2rpx !important;
  width: 200rpx !important;
}

::v-deep .u-button--primary.data-v-2bf0e569 {
  width: 110rpx !important;
  height: 56rpx !important;
  background: linear-gradient(87deg, #28d141 0%, #28ef8c 100%) !important;
  border: none !important;
  border-radius: 29rpx !important;
  font-size: 28rpx !important;
  font-weight: bold !important;
}
</style>