FarmingWx_V2_message/pages/group/data.vue

<template>
  <view class="supply-hall">
    <u-navbar :autoBack="true" bgColor="transparent"> 群资料 </u-navbar>
    <view class="supply-hall-header">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
    </view>

    <view>
      <view class="main">
        <view class="item">
          <view class="left">
            <img :src="info.faceUrl" alt="" class="img" />
          </view>
          <view class="right">
            <view class="right_contont">
              <view style="width: 80%">
                <view class="title">{{ info.name ? info.name : "" }}</view>
                <view class="value">群号: {{ info.groupId ? info.groupId : "" }}</view>
              </view>
              <view class="right_button">
                <image
                  :src="getStaticFilePath('/static/imImges/ewm.png')"
                  style="width: 40rpx; height: 40rpx"
                />
              </view>
            </view>
            <view class="remake"> {{ info.introduction ? info.introduction : "" }} </view>
          </view>
        </view>
      </view>
      <view class="contont">
        <view class="header">
          <text>成员概况</text>
          <text>共 {{ info.dealerCount + info.nowSupplierCounts }}人</text>
        </view>
        <view class="schedule">
          <view>
            <view class="header title">
              <text> 供应商人数</text>
              <text>剩{{ info.supplierCount - info.nowSupplierCounts }}人满员</text>
            </view>
            <view>
              <u-line-progress
                :percentage="info.nowSupplierCounts"
                activeColor="#00C868"
              ></u-line-progress>
            </view>
          </view>
          <view>
            <view class="header title">
              <text>司机人数</text>
              <text>剩10人满员</text>
            </view>
            <view>
              <u-line-progress :percentage="30" activeColor="#FFE000"></u-line-progress>
            </view>
          </view>
          <view>
            <view class="header title">
              <text> 采购商人数</text>
              <text>剩{{ info.purchaserCount - info.nowPurchaserCounts }}人满员</text>
            </view>
            <view>
              <u-line-progress
                :percentage="info.nowPurchaserCounts"
                activeColor="#00EBFF"
              ></u-line-progress>
            </view>
          </view>
        </view>
      </view>
      <view class="xian"> </view>
      <view class="announcement">
        <view class="header">
          <text>群公告</text>
        </view>
        <view style="padding: 20px">
          {{ info.introduction ? info.introduction : "" }}
        </view>
      </view>
    </view>
    <view class="popup">
      <u-button
        type="primary"
        :plain="true"
        :text="`${info.price}元加入群聊`"
        @click="addGroup"
      ></u-button>
    </view>
  </view>
</template>

<script>
import gjsSelectCity from "@/components/gjs-selectCity.vue";
import classification from "@/components/classification.vue";

import * as MsgApi from "@/api/message/index.js";
export default {
  components: {
    gjsSelectCity,
    classification,
  },
  data() {
    return {
      show: false,
      popupShow: false,
      statusBarHeight: 0,
      bottomStatusHeight: 0,
      groupInfo: {},
      info: {},
    };
  },
  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);
    this.groupInfo = JSON.parse(option.info);
    this.getGroupInfo();
  },
  computed: {},
  onReady() {},
  methods: {
    async getGroupInfo() {
      let params = {
        groupId: this.groupInfo.groupId,
        userId: uni.getStorageSync("userid"),
      };

      const res = await MsgApi.default.getGroupByGroupId(params);
      console.log("1231231", res);
      if (res.code == 200) {
        this.info = res.data;
      }
    },
    addGroup() {
      let userid = uni.getStorageSync("userId");
      let openid = uni.getStorageSync("openid");
      if (this.groupInfo.price == 0) {
        let params = {
          userId: userid,
          ragId: this.groupInfo.id,
          ragStatus: 0,
          userType: 1,
        };
        this.api.addRagUser(params).then((res) => {
          if (res.code === 200) {
            if (res.msg == "该用户已加入过该群组") {
            }
          }
        });
      } else {
        let params = {
          body: this.groupInfo.introduction,
          attach: 1,
          oriMon: this.groupInfo.price,
          payKinds: 0,
          payMeth: 2,
          ragId: this.groupInfo.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),
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.supply-hall {
  background: #f4f4f4;
  height: 100%;
}
.xian {
  background: #f4f4f4;
  height: 10px;
  width: 100%;
}
.main {
  border-bottom: 1px solid #f4f4f4;
  background: white;
  .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: flex-start;
        justify-content: space-between;
      }
      .value {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
      }
      .title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }
    }
  }
}
.announcement {
  padding: 10px;
  height: 350rpx;
  background: white;
  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
.contont {
  padding: 10px;
  height: 350rpx;
  background: white;
  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .schedule {
    height: 100px;
    width: 100%;
    line-height: 40px;
    .title {
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
    }
  }
}
.popup {
  position: fixed;
  width: 96%;
  bottom: 20px;
  left: 2%;
}
.popup ::v-deep .u-button--primary.data-v-2bf0e569 {
  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;
}
</style>