订单详情添加购买协议复选框

src/views/computingResource/resourceList.vue

@@ -105,7 +105,10 @@
                       </el-col>
                     </el-row>
                     <el-divider></el-divider>
-                    <div class="flex-justify-end price">￥{{ item.price ? item.price / 100 : '-' }}/{{ item.feeInfo }}</div>
+                    <div class="flex-justify-end price">￥{{ item.price ? item.price / 100 : '-' }}/{{
+                        item.feeInfo
+                      }}
+                    </div>
                     <!--<div class="flex-justify-end month-expenses">约￥15/月</div>-->
                     <el-divider></el-divider>
                     <div class="footer-action flex">
@@ -130,7 +133,7 @@
       </el-tabs>
     </div>
 
-    <el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="资源申请详情">
+    <el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="订单详情">
       <template #default>
         <div class="info-block">
           <div class="info-item flex-align-center flex-space-between">
@@ -161,17 +164,25 @@
             </div>
           </div>
         </div>
-
       </template>
       <template #footer>
+        <div class="checkbox-info">
+          <el-checkbox v-model="checkbox" :value="true" size="large">
+            <template #default>
+              我已阅读和理解上述
+            </template>
+          </el-checkbox>
+          <span class="link" @click="handleCheckProtocol">《购买协议》</span>
+        </div>
+        <el-divider style="margin: 0 !important;"/>
         <div class="drawer-footer flex-space-between flex-align-center">
           <div>应付配置费用</div>
 
           <div class="flex-align-center">
             <div class="mr20">
-              <div class="price">￥{{ orderPrice/100 }}</div>
+              <div class="price">￥{{ orderPrice / 100 }}</div>
             </div>
-            <el-button type="primary" @click="create">{{ selectedType === 1 ? '加入购物车' : '立即购买' }}
+            <el-button type="primary" @click="create" :disabled="!checkbox">{{ selectedType === 1 ? '加入购物车' : '立即购买' }}
             </el-button>
           </div>
         </div>
@@ -228,6 +239,7 @@ const pageSize = ref(10)
 const productTypes = ref([])
 const tableData = ref([])
 const interval = ref(undefined)
+const checkbox = ref(false)
 
 const qrCode = ref({
   url: '',
@@ -255,6 +267,10 @@ watch(() => route.query.type, (value, oldValue) => {
   }
 })
 
+function handleCheckProtocol() {
+  console.log('点击')
+}
+
 function tabChange() {
   pageNum.value = 1
   getList()
@@ -376,7 +392,8 @@ const createQueryInterval = (id) => {
             showCancelButton: false,
             type: 'success'
           }
-      ).then(() => {})
+      ).then(() => {
+      })
     }
     // 已取消
     if (res.data.status === PayOrderStatusEnum.CLOSED.status) {
@@ -733,4 +750,17 @@ const clearQueryInterval = () => {
     border-radius: 2px 2px 2px 2px;
   }
 }
+
+.checkbox-info {
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  padding-left: 48px;
+  padding-bottom: 10px;
+
+  .link {
+    color: #409eff;
+    cursor: pointer;
+  }
+}
 </style>