提交

pages/invoiceList/components/notyet/index.js

@@ -12,13 +12,24 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    chooseList: []
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    onChange(e) {
+      const { id } = e.currentTarget.dataset;
+      let newList = this.data.chooseList;
+      if (e.detail) {
+        newList = [...new Set([...newList, id])]
+      } else {
+        newList = newList.filter(item => item !== id);
+      }
+      this.setData({
+        chooseList: newList,
+      })
+    }
   }
 })

pages/invoiceList/components/notyet/index.json

@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "van-checkbox": "@vant/weapp/checkbox/index"
+  }
 }

pages/invoiceList/components/notyet/index.wxml

@@ -1,2 +1,25 @@
-<!--pages/invoiceList/components/notyet/index.wxml-->
-<text>pages/invoiceList/components/notyet/index.wxml</text>
+
+<van-checkbox-group value="{{ chooseList }}" bind:change="onChange" max="{{ 2 }}">
+  <view class="cardWrapper">
+    <view class="content">
+      <view class="left">
+        <view class="top">
+          <van-checkbox name="{{12}}" shape="square" bind:change="onChange" data-id="12" />
+          <view class="month">1月份</view>
+          <view class="address"> 软C306 </view>
+        </view>
+        <view class="middle">
+          河北创新风华科技有限公司
+        </view>
+        <view class="bottom">
+          2024年1月1日-2024年1月31日
+        </view>
+      </view>
+      <view class="right">
+        待开票
+      </view>
+    </view>
+  </view>
+</van-checkbox-group>
+
+

pages/invoiceList/components/notyet/index.wxss

@@ -1 +1,37 @@
-/* pages/invoiceList/components/notyet/index.wxss */
+/* pages/invoiceList/components/notyet/index.wxss */
+.cardWrapper {
+  margin: 30rpx 32rpx 30rpx;
+  position: relative;
+  padding: 30rpx 40rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+}
+
+.top {
+  display: flex;
+}
+
+.top .address {
+  margin-left: 36rpx;
+}
+
+.middle {
+  margin-top: 26rpx;
+  font-size: 32rpx;
+}
+
+.bottom {
+  margin-top: 24rpx;
+  font-size: 32rpx;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 30rpx;
+  background-color: rgb(239,227,227);
+  padding: 14rpx 24rpx;
+  border-radius: 18rpx;
+  color: rgb(224, 106, 106)
+}