提示

src/api/contract.js

@@ -120,10 +120,11 @@ export function createOrder () {
   })
 }
 
-export function payOrder () {
+export function payOrder (data) {
   return request({
     url: '/hotel/payOrder',
     method:'post',
+    data
   })
 }
 

src/pages/guide/order.vue

@@ -3,7 +3,7 @@
     <!-- 顶部导航栏 -->
     <div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
       <div class="van-nav-bar__content" style="background-color: black">
-        <van-icon @click="$router.back()" name="arrow-left" color="#fff"  />
+        <van-icon @click="$router.back()" name="arrow-left" color="#fff" />
         <div
           class="van-nav-bar__title van-ellipsis"
           style="
@@ -49,17 +49,17 @@
         </div>
       </div>
       <div class="content">
-        <div class="list" v-for="(item,index) in orderData" :key="index">
+        <div class="list" v-for="(item, index) in orderData" :key="index">
           <div class="header">
             <div class="left">
-              <div class="time">Submission time:{{ item.update_time   }}</div>
+              <div class="time">Submission time:{{ item.update_time }}</div>
               <van-button
                 style="margin-top: 5px"
                 :round="true"
                 size="small"
                 plain
                 type="success"
-                >{{tabs[tabIndex].text}}</van-button
+                >{{ tabs[tabIndex].text }}</van-button
               >
             </div>
             <van-button
@@ -67,28 +67,35 @@
               :hairline="false"
               color="#2a2a2a"
               type="success"
+              loading-text="Pay"
+              :Loading="btnLoading"
+              @click="onPay(item.orderNo)"
               >Pay</van-button
             >
           </div>
           <div class="pr-detail">
             <div class="pr-left">
-              <van-image src="./img/c_bg1.jpg"></van-image>
+              <van-image :src="item.goods_pic"></van-image>
             </div>
             <div class="pr-right">
-              <div class="title">{{item.goods_name}}</div>
+              <div class="title">{{ item.goods_name }}</div>
               <div class="tag">
-                <span>{{10.0}}</span>
+                <!-- <span>10.0</span> -->
               </div>
               <div class="bb">
-                <span>{{item.orderNo}}</span>
+                <span>{{ item.orderNo }}</span>
+              </div>
+              <div class="num">
+                <span>{{ item.goods_price }} $</span>
+              </div>
+              <div class="desc">
+                <span>Includes taxes and service charges</span>
               </div>
-              <div class="num"><span>{{item.goods_price}} $</span></div>
-              <div class="desc"><span>Includes taxes and service charges</span></div>
             </div>
           </div>
           <div class="desc-list">
             <span>Total amount</span>
-            <span>1524.48</span>
+            <span>{{ item.goods_price }}</span>
           </div>
           <div class="desc-list">
             <span>Order quantity</span>
@@ -96,7 +103,7 @@
           </div>
           <div class="desc-list">
             <span>Expected return</span>
-            <span>228.82</span>
+            <span>{{ item.goods_lr }}</span>
           </div>
         </div>
       </div>
@@ -106,9 +113,11 @@
 
 <script>
 import { openChat1 } from "@/utils/chat";
-import { jiudianList, lunbo,payOrder,orderList } from "@/api/contract";
+import { jiudianList, lunbo, payOrder, orderList } from "@/api/contract";
 import { nowLocationUrl } from "@/utils/tools";
 import router from "@/router";
+import { Dialog, Loading } from "vant";
+import { Toast } from 'vant';
 
 export default {
   data() {
@@ -120,10 +129,36 @@ export default {
         { text: "Completed", value: 2 },
       ],
       tabIndex: 0,
-      orderData:[]
+      orderData: [],
+      btnLoading:false
     };
   },
   methods: {
+    onPay(orderId) {
+      Dialog.confirm({
+        title: "pay",
+        message: "The order is about to be paid",
+        confirmButtonText: "confirm",
+        cancelButtonText: "cancel",
+      })
+        .then(() => {
+          this.btnLoading=true;
+          payOrder({
+            orderNo: orderId,
+          }).then((res) => {
+            if(res.code==200){
+              Toast('Payment successful');
+            }else{
+              Toast(res.msg);
+            }
+          }).finally(()=>{
+            this.btnLoading=false;
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
     openHotelChat() {
       openChat1();
     },
@@ -139,15 +174,15 @@ export default {
       }
       console.log("酒店轮播图：", res.data);
     },
-    getOrderList(){
+    getOrderList() {
       orderList({
-        status:0,
-        page:1,
-        size:999
-      }).then(res=>{
-        this.orderData=res.data;
-      })
-    }
+        status: 0,
+        page: 1,
+        size: 999,
+      }).then((res) => {
+        this.orderData = res.data;
+      });
+    },
   },
   mounted() {
     this.getLunBoHotel();
@@ -193,44 +228,44 @@ export default {
         }
         .pr-right {
           margin-left: 20px;
-          .title{
+          .title {
             font-size: 1.1rem;
             font-weight: bold;
           }
-          .tag{
+          .tag {
             margin: 30px 0;
-            span{
+            span {
               background: #755153;
               padding: 5px 10px;
               border-radius: 5px;
               color: #fff;
-              font-size: .8rem;
+              font-size: 0.8rem;
             }
           }
-          .bb{
+          .bb {
             margin-bottom: 20px;
-            span{
+            span {
               font-size: 1.1rem;
               background: #000;
               padding: 5px 20px;
               color: #fff;
             }
           }
-          .num{
+          .num {
             margin-bottom: 20px;
             display: flex;
             font-weight: bold;
             justify-content: flex-end;
           }
-          .desc{
+          .desc {
             color: #848484;
-            font-size: .8rem;
+            font-size: 0.8rem;
             display: flex;
             justify-content: flex-end;
           }
         }
       }
-      .desc-list{
+      .desc-list {
         display: flex;
         justify-content: space-between;
         color: #787878;