new-cashier/jeepay-ui-uapp-agent/pageWork/developerManagement/components/ExpandCard.vue

<template>
  <view class="e-card-wrapper" @tap="isOpen">
    <view class="e-card-left">
      <image :src="imgList[0]" mode="scaleToFill" />
      <view class="expand-info">
        {{ teamName }}
        <text>成员数量：{{ userList.length }}</text>
      </view>
    </view>
    <view class="e-card-right">
      <image src="/static/iconImg/top-arrow.svg" :class="{ rotate: flag }" mode="scaleToFill" />
    </view>
  </view>

  <view class="expand-card-list" v-if="flag">
    <view class="expand-card-main bdR20">
      <view class="expand-main-left">
        <view>
          拓展商户总数
          <text>{{ totalMchCount }}</text>
        </view>
        <view>
          商户交易总额
          <text>{{ totalOrderAmount }}</text>
        </view>
      </view>
      <view class="expand-main-right" @tap="jumpPage">
        <image src="/static/iconImg/edit-team.svg" mode="scaleToFill" />
        编辑团队
      </view>
    </view>
    <block v-for="v in userList" :key="v.sysUserId">
      <view class="expand-team bdR20" @tap="detail(v.sysUserId)">
        <view class="expand-team-top">
          <view class="e-team-t-left">
            <image :src="imgList[v.state ? 2 : 3]" mode="scaleToFill" />
            <view>
              {{ v.realname }}
              <text>{{ v.telphone }}</text>
            </view>
          </view>
          <view class="e-team-t-right" :class="{ isStateNone: !v.state }">
            {{ v.state ? "已启用" : "已禁用" }}
          </view>
        </view>
        <view class="expand-team-bottom">
          <view
            >拓展商户数 <text>{{ v.mchCount }}</text>
          </view>
          <view
            >商户交易额 <text>{{ v.orderCount }}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
const emits = defineEmits(["isOpen", "jumpPage", "detail"])
const props = defineProps({
  teamName: { type: String },
  flag: { type: Boolean },
  state: { type: Number },
  userList: { type: Array, default: [] },
  totalMchCount: { type: Number },
  totalOrderAmount: { type: Number },
  teamId: { type: Number },
  state: { type: Number },
})
const imgList = reactive([
  "/static/iconImg/expand-fill.svg",
  "/static/iconImg/expand-team-close.svg",
  "/static/iconImg/expand-member.svg",
  "/static/iconImg/expand-member-close.svg",
])
const isOpen = () => {
  emits("isOpen")
}
const jumpPage = (val) => {
  emits("jumpPage")
}
const detail = (val) => {
  uni.navigateTo({ url: "/pageWork/developerManagement/developerDetail?id=" + val })
}
</script>

<style lang="scss" scoped>
.e-card-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  .e-card-left {
    display: flex;
    image {
      width: 93rpx;
      height: 93rpx;
      margin-right: 20rpx;
    }
    .expand-info {
      display: flex;
      flex-direction: column;
      font-size: 33rpx;
      font-weight: 700;
      text {
        margin-top: 12rpx;
        font-size: 25rpx;
        font-weight: 500;
        color: #8c8c8c;
      }
    }
  }
  .e-card-right {
    display: flex;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
      transform: rotate(180deg);
      transition: 0.3s linear;
    }
    .rotate {
      transform: rotate(0deg);
      transition: 0.3s linear;
    }
  }
}
.expand-card-list {
  padding: 0 30rpx;
  padding-bottom: 30rpx;
  .expand-card-main {
    display: flex;
    overflow: hidden;
    background: rgba(81, 36, 178, 0.1);
    .expand-main-left {
      padding: 30rpx;
      flex: 1;
      view {
        display: flex;
        justify-content: space-between;
        color: rgba(81, 36, 178, 0.7);
        text {
          color: #5124b2;
        }
        &:last-child {
          margin-top: 20rpx;
        }
      }
    }
    .expand-main-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30rpx;
      font-size: 25rpx;
      color: #ffffff;
      background-color: #5124b3;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 20rpx;
      }
    }
  }
  .expand-team {
    padding: 30rpx 0 30rpx 30rpx;
    margin-top: 30rpx;
    background: #f7f7f7;
    .expand-team-top {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      .e-team-t-left {
        display: flex;
        image {
          width: 93rpx;
          height: 93rpx;
          margin-right: 30rpx;
        }
        view {
          display: flex;
          flex-direction: column;
          font-size: 33rpx;
          font-weight: 700;
          color: #000000;
          text {
            margin-top: 15rpx;
            font-size: 25rpx;
            font-weight: 500;
            color: #8c8c8c;
          }
        }
      }
      .e-team-t-right {
        margin-right: 30rpx;
        font-size: 30rpx;
        color: #666666;
        &::before {
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 10rpx;
          height: 10rpx;
          margin-right: 10rpx;
          border-radius: 50%;
          background-color: $primaryColor;
        }
      }
      .isStateNone::before {
        background-color: #999 !important;
      }
    }
    .expand-team-bottom {
      margin-top: 30rpx;
      view {
        font-size: 28rpx;
        color: #8c8c8c;
        text {
          margin-left: 30rpx;
          color: #000000;
        }
        &:last-child {
          margin-top: 25rpx;
        }
      }
    }
  }
}
</style>