租赁协议

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@js-preview/docx": "^1.6.2",
+    "@vue-office/docx": "^1.6.2",
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.2",
     "element-plus": "^2.4.3",
@@ -28,6 +30,7 @@
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-zip-file": "^2.2.0",
     "vue": "^3.3.4",
+    "vue-demi": "^0.14.10",
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.2.5"
   },
@@ -46,4 +49,4 @@
     "vite": "^4.4.11",
     "vue-tsc": "^1.8.19"
   }
-}
+}

src/views/cart/index.vue

@@ -178,7 +178,8 @@
                     <div class="checkbox-container">
                         <el-checkbox v-model="protocolChecked">
                             我已阅读并同意签署
-                            <a href="#"> 《xxxx公司租赁服务合同》 </a>
+                            
+                            <a @click="handleViewWord"> 《xxxx公司租赁服务合同》 </a>
                         </el-checkbox>
                     </div>
                 </el-col>
@@ -214,6 +215,29 @@
     </div>
 
     <FooterInfo />
+
+    <!-- 租赁协议 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleWord"
+        :title="settleWordTitle"
+        width="50%"
+        align-center
+        destroy-on-close
+        :close-on-click-modal="false"
+    >
+        <!-- <div style="display: flex; justify-content: center"> -->
+            <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
+        <!-- </div> -->
+        <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
+                <span class="dialog-footer" >
+                    <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                        >关 闭</el-button
+                    >
+                    <el-button @click="submitBtn" type="success"> 下载 </el-button>
+                </span>
+        </div>
+        <div id ="mmm" style="height:600px;"></div>
+    </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -231,6 +255,8 @@ import { InfoFilled } from '@element-plus/icons-vue'
 import CustomDatePickerButton from './components/date-picker-button.vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '../../store/user'
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
 const userStore = useStore()
 const router = useRouter()
 const protocolChecked = ref<boolean>(false)
@@ -495,6 +521,34 @@ const onCartSubmit = async () => {
     }
     // console.log(res, '预约车提交结果')
 }
+
+const wordUrl = ref("")
+const settleWordTitle = ref('')
+const dialogFormVisibleSettleWord: any = ref(false)
+//租赁服务合同
+const handleViewWord = async() => {
+    settleWordTitle.value = '租赁服务合同'
+    // const orderId = row.orderId
+    // const res: any = await getContractDetailApi({ orderId })
+    // 打开租赁服务合同弹框
+      wordUrl.value = "http://127.0.0.1:29300/statics/2024/12/16/test_20241216154423A003.docx"
+    dialogFormVisibleSettleWord.value = true
+    setTimeout(() => {
+  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
+    //传递要预览的文件地址即可
+    myDocxPreviewer
+        .preview(
+        wordUrl.value
+        )
+        .then((res) => {
+        console.log("预览完成");
+        })
+        .catch((e) => {
+            console.log('1111', wordUrl.value)
+        console.log("预览失败", e);
+        });
+    }, 1000);
+}
 </script>
 
 <style lang="scss" scoped>

src/views/user/orderManagement/components/order-home.vue

@@ -13,6 +13,8 @@ import { useStore } from 'store/user'
 import type { FormInstance } from 'element-plus'
 const store = useStore()
 import { mainStore } from 'store/main'
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
 const store2 = mainStore()
 
 const overhaulDetails = ref<any>({})
@@ -320,12 +322,12 @@ const tableData4: any = ref([
     },
 ])
 
+const wordUrl = ref("")
 const settleWordTitle = ref('')
 const dialogFormVisibleSettleWord: any = ref(false)
 //租赁协议
-const handleViewWord = () => {
+const handleViewWord = async(index: Number, row: any) => {
     settleWordTitle.value = '租赁协议'
-    console.log(12313131)
     moneyParams1.value = {
         /* 设备状态 */
         maStatus: 15,
@@ -333,10 +335,33 @@ const handleViewWord = () => {
         insureList: [],
         picList: [],
     }
+    const orderId = row.orderId
+    // const res: any = await getContractDetailApi({ orderId })
+    // cardList.value = res.rows
+
     // 打开租赁协议弹框
+      wordUrl.value = "http://127.0.0.1:29300/statics/2024/12/16/test_20241216154423A003.docx"
     dialogFormVisibleSettleWord.value = true
+    setTimeout(() => {
+  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
+    //传递要预览的文件地址即可
+    myDocxPreviewer
+        .preview(
+        wordUrl.value
+        )
+        .then((res) => {
+        console.log("预览完成");
+        })
+        .catch((e) => {
+            console.log('1111', wordUrl.value)
+        console.log("预览失败", e);
+        });
+    }, 1000);
 }
 
+// 下载合同为 Word 文件
+const downloadContract = () => {}
+
 const confirmFail = async (index: number) => {
     ElMessageBox.confirm('是否确定取消订单？', {
         confirmButtonText: '确定',
@@ -712,7 +737,7 @@ const costSubmit = () => {
                             >
                                 订单详情
                             </el-button>
-                            <el-button @click="handleViewWord(j)" type="primary" size="small">
+                            <el-button @click="handleViewWord(j,item)" type="primary" size="small">
                                 租赁协议
                             </el-button>
 
@@ -1273,17 +1298,18 @@ const costSubmit = () => {
         destroy-on-close
         :close-on-click-modal="false"
     >
-        <div style="display: flex; justify-content: center">
+        <!-- <div style="display: flex; justify-content: center"> -->
-            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
+            <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
+        <!-- </div> -->
+        <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
+                <span class="dialog-footer" >
+                    <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                        >关 闭</el-button
+                    >
+                    <el-button @click="downloadContract" type="success"> 下载 </el-button>
+                </span>
         </div>
-        <template #footer>
+        <div id ="mmm" style="height:600px;"></div>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
-                >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
-            </span>
-        </template>
     </el-dialog>
 </template>
 

src/views/user/orderManagementCz/components/order-home.vue

@@ -13,6 +13,8 @@ import type { FormInstance } from 'element-plus'
 import { useStore } from 'store/user'
 const store = useStore()
 import { mainStore } from 'store/main'
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
 const store2 = mainStore()
 /* 查询参数 ***
  ****
@@ -620,11 +622,25 @@ const handleViewWord = async(index: Number, row: any) => {
     }
     const orderId = row.orderId
     const res: any = await getContractDetailApi({ orderId })
-    cardList.value = res.rows
+    // cardList.value = res.rows
-    total.value = res.total
-    wordUrl.value = "http://127.0.0.1:29300/statics/2024/12/13/合同模板2_20241213133604A002.doc"
     // 打开租赁协议弹框
+      wordUrl.value = res.data.url
     dialogFormVisibleSettleWord.value = true
+    setTimeout(() => {
+  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
+    //传递要预览的文件地址即可
+    myDocxPreviewer
+        .preview(
+        wordUrl.value
+        )
+        .then((res) => {
+        console.log("预览完成");
+        })
+        .catch((e) => {
+            console.log('1111', wordUrl.value)
+        console.log("预览失败", e);
+        });
+    }, 1000);
 }
 
 const contract = ref({
@@ -634,9 +650,13 @@ const contract = ref({
 })
 
 // 下载合同为 Word 文件
-const downloadContract = () => {}
+const downloadContract = () => {
+    window.location.href = wordUrl.value;
+}
+
+const wordUrl = ref("")
+
 
-const wordUrl = ref('')
 </script>
 
 <template>
@@ -1849,16 +1869,16 @@ const wordUrl = ref('')
     >
         <!-- <div style="display: flex; justify-content: center"> -->
             <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
-            <iframe :src="wordUrl" width="100%" height="501px"></iframe>
         <!-- </div> -->
-        <template #footer>
+        <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
-            <span class="dialog-footer">
+                <span class="dialog-footer" >
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                    <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
+                        >关 闭</el-button
-                >
+                    >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
+                    <el-button @click="downloadContract" type="success"> 下载 </el-button>
-            </span>
+                </span>
-        </template>
+        </div>
+        <div id ="mmm" style="height:600px;"></div>
     </el-dialog>
 </template>
 
@@ -2240,4 +2260,8 @@ const wordUrl = ref('')
         }
     }
 }
+#mmm{
+    width:100%;
+    height: 500px;
+}
 </style>