feat: 停车卡片

components/AddCarCrad/index.vue

@@ -1,29 +1,20 @@
 <template>
-  <view class="add-car-card" @click="handleConfirm">
-    <view class="header-image">
-      <image
-        class="header-img"
-        src="./images/add_car_crad.png"
-        mode="aspectFill"
-      />
-    </view>
-
-    <view class="content">
-      <view class="title">请输入车牌号</view>
-      <view class="description">
-        请绑定真实有效的车牌号，否则将无法正常使用车牌付费等功能
-      </view>
-    </view>
-
-    <view class="confirm-btn">
-      <text class="confirm-text">进入绑定</text>
+  <view class="add-car-card">
+    <view class="description">
+      请绑定真实有效的车牌号，否则将无法正常使用车牌付费等功能
     </view>
+    <image
+      class="code-img"
+      src="./images/qrcode.png"
+      mode="widthFix"
+      show-menu-by-longpress="true"
+    />
+    <view class="tips">长按二维码识别</view>
   </view>
 </template>
 
 <script setup>
 import { defineProps } from "vue";
-import { navigateTo } from "@/router/index";
 
 const props = defineProps({
   toolCall: {
@@ -31,11 +22,6 @@ const props = defineProps({
     default: {},
   },
 });
-
-// 确认绑定事件
-const handleConfirm = () => {
-  navigateTo(props.toolCall.url);
-};
 </script>
 
 <style lang="scss" scoped>

components/AddCarCrad/styles/index.scss

@@ -1,31 +1,7 @@
 .add-car-card {
   display: flex;
   flex-direction: column;
-
-  .header-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: -24rpx -24rpx 0 -24rpx;
-
-    .header-img {
-      width: 100%;
-      height: 150px;
-    }
-  }
-
-  .content {
-    display: flex;
-    align-items: start;
-    flex-direction: column;
-    padding: 24rpx 0;
-  }
-
-  .title {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #333;
-  }
+  align-items: center;
 
   .description {
     font-size: 28rpx;
@@ -33,19 +9,17 @@
     line-height: 1.5;
   }
 
-  .confirm-btn {
-    height: 88rpx;
-    background: linear-gradient(135deg, #1898ff 0%, #77e5f9 100%);
-    border-radius: 44rpx;
-    margin-bottom: 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .confirm-text {
-      font-size: 28rpx;
-      font-weight: 500;
-      color: #fff;
-    }
+  .code-img {
+    margin-top: 12px;
+    width: 250px;
+    height: 250px;
+    border-radius: 4px;
   }
-}
+
+  .tips {
+    padding: 12px;
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #333;
+  }
+}