源文件

jeepay-ui-uapp-agent/pageWork/appManage/components/appCard.vue

@@ -0,0 +1,114 @@
+<template>
+  <view class="card-wrapper" :style="{ '--state-bg-color': state == 1 ? '#7737FE' : '#B3B3B3' }">
+    <view class="app-header">
+      <image src="/static/navImg/icon-app.svg" mode="scaleToFill" />
+      <view class="app-info">
+        <view class="app-title">
+          <view class="app-name single-text-beyond">{{ appName }}</view>
+          <view class="app-state">{{ state == 1 ? '已启用' : '已禁用' }}</view>
+        </view>
+        <view class="sub-title">{{ appId }}</view>
+      </view>
+    </view>
+    <view class="mch-info">
+      <view class="left">
+        <image src="/pageWork/static/images/icon-mch-black.svg" mode="scaleToFill" />
+        <view class="mch-title"> {{ mchName }} </view>
+      </view>
+      <view class="right"> {{ mchNo }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  appName: { type: String }, //应用名称
+  mchNo: { type: String }, // 用户号
+  state: [String, Number], //状态
+  appId: { type: String }, //应用id
+  mchName: { type: String }, // 用户名称
+})
+</script>
+
+<style lang="scss" scoped>
+.card-wrapper {
+  padding: 0.1rpx 30rpx;
+  height: 257rpx;
+  background-color: #fff;
+  border-bottom: 1rpx solid #ededed;
+  .app-header {
+    display: flex;
+    margin-top: 30rpx;
+    height: 92rpx;
+    image {
+      margin-right: 20rpx;
+      width: 92rpx;
+      height: 92rpx;
+    }
+    .app-info {
+      flex: 1;
+      .app-title {
+        display: flex;
+        justify-content: space-between;
+        font-size: 30rpx;
+        font-weight: 400;
+        text {
+          font-size: 33rpx;
+          font-weight: 500;
+        }
+      }
+      .app-name{
+        width: 440rpx;
+      }
+      .app-state {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        font-size: 30rpx;
+        color: #666;
+        &::before {
+          content: '';
+          display: block;
+          margin-right: 15rpx;
+          width: 10rpx;
+          height: 10rpx;
+          border-radius: 50%;
+          background-color: var(--state-bg-color);
+        }
+      }
+    }
+    .sub-title {
+      margin-top: 15rpx;
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #808080;
+    }
+  }
+  .mch-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20rpx;
+    margin-top: 20rpx;
+    height: 80rpx;
+    background-color: #f7f7f7;
+    border-radius: 10rpx;
+    font-size: 29rpx;
+    .left {
+      display: flex;
+      align-items: center;
+      image {
+        margin-right: 10rpx;
+        width: 40rpx;
+        height: 40rpx;
+      }
+      .mch-title {
+        width: 232rpx;
+      }
+    }
+    .right {
+      color: #8c8c8c;
+    }
+  }
+}
+</style>