订单支付

src/components/Pay/WePay.vue

@@ -4,20 +4,67 @@
             <div class="text-weight-bold q-mb-lg" style="font-size: 18px;">微信支付</div>
             <div class="text-center">
                 <div class="row flex-center">
-                    <QRCode value="https://www.baidu.com" :size="200"></QRCode>
+                    <QRCode v-loading="loading" :value="orders.qr?orders.qr:'https://www.baidu.com'" :size="200"></QRCode>
                     <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713233895000_458.jpg" class="q-ml-md" style="height:200px;">
                 </div>
                 <div class="text-body2 q-mt-lg text-grey-6">请打开微信（WeChat），使用 [扫一扫]扫描上方二维码进行支付</div>
                 <div class="q-mt-xl text-right">
-                    <el-button class="q-px-md q-mr-md">取消支付</el-button>
-                    <el-button type="primary" class="q-px-md" >已完成付款</el-button>
+                    <el-button class="q-px-md q-mr-md" @click="close">取消支付</el-button>
+                    <el-button type="primary" class="q-px-md" @click="CompletePayment">已完成付款</el-button>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
 import QRCode from '../QRCode/QRCode.vue';
+import OrderService from "@/services/OrderService";
+import { ApiResult } from "@/configs/axios";
+import { ElMessage } from 'element-plus';
+const props = defineProps({
+    orderid: {
+        type: Number,
+        required: true,
+    },
+})
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const orders = ref({} as any)
+const loading = ref(false)
+const close = ()=>{
+    emit('close')
+}
+
+const CompletePayment = async () => {
+    const response = await OrderService.GetOrder(props.orderid)
+    if (response.data.resultCode == ApiResult.SUCCESS) {
+        if(response.data.data.status==1) ElMessage({
+            showClose: true,
+            message: `当前订单未支付，请继续完成支付`,
+            type: "warning",
+        });
+        else emit('success')
+    }
+
+}
+
+const QRpayment = async () =>{
+    if(!props.orderid) return
+    loading.value = true
+    const response = await OrderService.CreatePPTPayOrder(props.orderid)
+    if(response.data.resultCode == ApiResult.SUCCESS){
+        orders.value = response.data.data
+    }else ElMessage({
+            showClose: true,
+            message: `${response.data.message}`,
+            type: "warning",
+        });
+    loading.value = false
+}
+QRpayment()
 </script>
 <style>
 

src/services/OrderService.ts

@@ -3,6 +3,16 @@ import Api,{ HttpResponse, Result } from './../utils/request';
 
 class OrderService{
 
+    static async CreatePPTPayOrder(orderid:Number):Promise<HttpResponse>{
+        let msg = {orderid}
+        return Api.Post("ppt_CreatePPTPayOrder",msg)
+    }
+
+    static async CancelPPTOrder(orderid:Number):Promise<HttpResponse>{
+        let msg = {orderid}
+        return Api.Post("ppt_CancelPPTOrder",msg)
+    }
+
     static async CreateOrderAsync(parameters:any):Promise<HttpResponse>{
         let msg = parameters
         return Api.Post("ppt_SetPPTOrder",msg)

src/views/UserCenter/Order.vue

 <template>
-  <div class="">
+  <div class="" ref="orderRef">
     <el-tabs v-model="activeName" @tab-click="tabsHandlerClick" class="no-border dark sticky-header">
       <el-tab-pane label="全部订单" name="all"></el-tab-pane>
       <el-tab-pane label="待支付" name="pay"></el-tab-pane>
@@ -21,61 +21,67 @@
     </el-tabs>
 
     <template v-if="orders && orders.length>0 && !loading">
-      <div class="order-body q-mt-lg" v-for="x in orders" :key="x.orderid">
-        <div class="order-item rounded">
-
-          <div class="title">
-            <span>{{ x.create }}</span>
-            <span class="q-ml-md">{{ x.ordernum }}</span>
-          </div>
-
-          <div class="bg-white rounded row items-center">
-            <div class="item row items-center"  style="width: 280px !important; min-width: 280px; text-align: left;padding:24px;">
-              <img :src="x.cover" style="width:72px;" class="rounded" >
-              <div class="q-ml-lg">{{ x.pricetypename }}_{{ x.vipname }}</div>
-            </div>
-            <div class="item col">{{ x.productname }}</div>
-            <div class="item col">¥{{ x.price.toFixed(2) }}</div>
-            <div class="item col">{{ x.use }}席位</div>
-            <div class="item none-width">
-              <div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
-            </div>
-            <div class="item col">
-              <div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥{{ x.price.toFixed(2) }}</div>
-              <!-- <div class="row items-center flex-end">
-                <span class="text-grey-8 q-mr-md">已优惠 ¥10.00</span>
-                <IconHelp :size="16" class="cursor-pointer"></IconHelp>
-              </div> -->
-            </div>
-            <div class="item col">
-              <div class="q-mb-sm" :class="{'text-waring':x.status==1,'text-grey-8':x.status==3}">{{ x.statusname }}</div>
-              <el-button  link  @click="forwardOrderDetail(x.orderid)">订单详情</el-button>
+      <div v-loading="CancelLoading">
+        <div class="order-body q-mt-lg" v-for="x in orders" :key="x.orderid">
+          <div class="order-item rounded">
+  
+            <div class="title">
+              <span>{{ x.create }}</span>
+              <span class="q-ml-md">{{ x.ordernum }}</span>
             </div>
-            <div class="item column">
-              <el-button type="primary" v-if="x.status==2">发票</el-button>
-              <br />
-              <el-button type="default" v-if="x.status==2">售后</el-button>
-              <el-button type="warning" v-if="x.status==1">支付</el-button>
-              <br />
-              <el-button type="default" v-if="x.status==1">取消</el-button>
+  
+            <div class="bg-white rounded row items-center">
+              <div class="item row items-center"  style="width: 280px !important; min-width: 280px; text-align: left;padding:24px;">
+                <img :src="x.cover" style="width:72px;" class="rounded" >
+                <div class="q-ml-lg">{{ x.pricetypename }}_{{ x.vipname }}</div>
+              </div>
+              <div class="item col">{{ x.productname }}</div>
+              <div class="item col">¥{{ x.price.toFixed(2) }}</div>
+              <div class="item col">{{ x.use }}席位</div>
+              <div class="item none-width">
+                <div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
+              </div>
+              <div class="item col">
+                <div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥{{ x.price.toFixed(2) }}</div>
+                <!-- <div class="row items-center flex-end">
+                  <span class="text-grey-8 q-mr-md">已优惠 ¥10.00</span>
+                  <IconHelp :size="16" class="cursor-pointer"></IconHelp>
+                </div> -->
+              </div>
+              <div class="item col">
+                <div class="q-mb-sm" :class="{'text-waring':x.status==1,'text-grey-8':x.status==3}">{{ x.statusname }}</div>
+                <el-button  link  @click="forwardOrderDetail(x.orderid)">订单详情</el-button>
+              </div>
+              <div class="item column">
+                <el-button type="primary" v-if="x.status==2">发票</el-button>
+                <br />
+                <el-button type="default" v-if="x.status==2" @click="redicetTo('https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e')">售后</el-button>
+                <el-button type="warning" v-if="x.status==1" @click="goControls(1,x.orderid)">支付</el-button>
+                <br />
+                <el-button type="default" v-if="x.status==1" @click="goControls(2,x.orderid)">取消</el-button>
+              </div>
             </div>
+  
           </div>
-
         </div>
       </div>
+      
     </template>
     <div v-if="loading" style="height: 200px;margin-top: 100px;" v-loading="loading"></div>
     <div v-if="(!orders || orders.length==0) && !loading">
       <el-empty class="q-ma-xl" description="暂无数据" />
     </div>
   </div>
+  <WePay v-if="showPay" :orderid="orderid" @close="showPay=false" @success="showPay=false"></WePay> 
 </template>
 
 <script lang="ts" setup>
 import { ApiResult } from "@/configs/axios";
 import OrderService from "@/services/OrderService";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { openNewBlank } from '@/utils/common'
+import WePay from '@/components/Pay/WePay.vue'
 const activeName = ref<string>('all')
 const parameters = ref({
   pageIndex:1,
@@ -85,14 +91,58 @@ const parameters = ref({
   orderstatus:0
 })
 const orders = ref<any[]>()
+const orderid = ref<Number>(0)
 const count = ref(0)
 const loading = ref(false)
 const router = useRouter()
+const showPay = ref(false)
+const orderRef = ref<any>()
+const CancelLoading = ref(false)
 
+const goControls = (type:Number,id:any) => {
+  orderid.value = id
+  if(type==1) showPay.value = true
+  else if(type==2) {
+    ElMessageBox.confirm(
+        `此操作将取消该订单，是否确定?`,
+        "提示",
+        {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        })
+        .then(async () => {
+            try {
+              await CanceltOrders()
+            } catch (error) { }
+        })
+        .catch(() => { });
+  }
+}
+const CanceltOrders = async ()=>{
+  if(CancelLoading.value)return
+  CancelLoading.value=true
+  const response = await OrderService.CancelPPTOrder(orderid.value)
+  if(response.data.resultCode == ApiResult.SUCCESS){
+    await search()
+  }
+
+  CancelLoading.value=false
+}
+const redicetTo = (url:string)=>openNewBlank(url)
+  
 const tabsHandlerClick = (e:any)=>{
-  console.log(e)
+  console.log(e.props.name)
+  if(e.props.name=='all') parameters.value.orderstatus = 0
+  if(e.props.name=='pay') parameters.value.orderstatus = 1
+  if(e.props.name=='finish') parameters.value.orderstatus = 2
+  search()
 }
 
+const search = async () => {
+  parameters.value.pageIndex=1
+  await getOrders()
+}
 const getOrders = async ()=>{
   if(loading.value)return
   loading.value=true
@@ -107,11 +157,27 @@ const getOrders = async ()=>{
   loading.value=false
 }
 
+const scrollingHandler = () =>{
+    if(orderRef.value && !loading.value){
+        let maxHeight = orderRef.value.scrollHeight - orderRef.value.offsetHeight
+        let scrollTop = orderRef.value.scrollTop
+        if(maxHeight - scrollTop==0 && parameters.value.pageCount > parameters.value.pageIndex) {
+          parameters.value.pageIndex++
+            getOrders()
+        }
+    }
+    
+}
+
 const forwardOrderDetail = (id:string)=>{
   router.push('/u/order/'+encodeURIComponent(id))
 }
 
 getOrders()
+
+onMounted(()=>{
+    orderRef.value.addEventListener("scroll", scrollingHandler);
+})
 </script>
 
 <style scoped>

src/views/UserCenter/OrderDetail.vue

 <template>
+
     <div class="row items-center">
         <IconLeft :size="18" class="q-mr-md cursor-pointer" @click="forwardOrder"></IconLeft>
         <div class="text-weight-bold cursor-pointer" @click="forwardOrder">订单/发票</div>
     </div>
+<div v-loading="CancelLoading">
     <template v-if="order && !loading">
         <div class="q-mt-xl q-pa-xl rounded bg-info">
-            <el-steps style="max-width: 100%;margin: 0 auto;" :active="3" align-center>
+            <el-steps style="max-width: 100%;margin: 0 auto;" :active="active" align-center>
                 <el-step title="选择商品" description="" />
                 <el-step title="确认下单" description="" />
-                <el-step title="支付" description="" />
-                <el-step title="交易完成" description="" />
+                <el-step title="待支付" description="" />
+                <el-step :title="order.status==3?'交易取消':'交易完成'" description="" />
             </el-steps>
-            <div class="q-mt-xl text-center text-weight-bold" style="font-size: 18px;">订单状态：待支付</div>
-            <div class="q-mt-md row items-center flex-center" style="font-size: 13px;">
+            <div class="q-mt-xl text-center text-weight-bold" style="font-size: 18px;">订单状态：{{order.statusname}}</div>
+            <div v-if="order.status==1" class="q-mt-md row items-center flex-center" style="font-size: 13px;">
                 <span>请在 </span>
                 <el-countdown title="" format="DD [天] HH:mm:ss" :value="countValue" value-style="font-size:13px;color:#f89c53;"
                     class="q-mx-md inline" />
                 <span> 内完成转账，超时订单自动取消</span>
             </div>
-            <div class="row items-center flex-center q-mt-xl">
-                <el-button size="large">取消订单</el-button>
-                <el-button type="primary" size="large">去支付</el-button>
+            <div class="row items-center flex-center q-mt-xl" v-if="order.status==1">
+                <el-button size="large" @click="goControls(2)">取消订单</el-button>
+                <el-button type="primary" size="large" @click="goControls(1)">去支付</el-button>
             </div>
         </div>
         <div class="order-bar rounded row q-mt-xl">
@@ -70,6 +72,8 @@
     <div v-if="!order && !loading">
       <el-empty class="q-ma-xl" description="暂无数据" />
     </div>
+</div>
+    <WePay v-if="showPay" :orderid="order.orderid" @close="showPay=false" @success="showPay=false,getOrder()"></WePay> 
 </template>
 
 <script lang="ts" setup>
@@ -77,12 +81,48 @@ import { ApiResult } from "@/configs/axios"
 import OrderService from "@/services/OrderService"
 import { ref } from "vue"
 import { useRouter } from "vue-router"
+import WePay from '@/components/Pay/WePay.vue'
 
 const order = ref<any>()
 const loading = ref(false)
 const router = useRouter()
 
 const countValue = ref(Date.now() + 1000 * 60 * 60 * 7)
+const showPay = ref(false)
+const active = ref(0)
+const CancelLoading = ref(false)
+
+const goControls = (type:Number) => {
+   if(type==1) showPay.value = true
+   else if(type==2) {
+    ElMessageBox.confirm(
+        `此操作将取消该订单，是否确定?`,
+        "提示",
+        {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        })
+        .then(async () => {
+            try {
+              await CanceltOrders()
+            } catch (error) { }
+        })
+        .catch(() => { });
+  }
+}
+
+const CanceltOrders = async ()=>{
+  if(CancelLoading.value)return
+  CancelLoading.value=true
+  const response = await OrderService.CancelPPTOrder(order.value.orderid)
+  if(response.data.resultCode == ApiResult.SUCCESS){
+    await getOrder()
+  }
+
+  CancelLoading.value=false
+}
+
 const forwardOrder = (id: string) => {
     router.push('/u/order')
 }
@@ -95,7 +135,9 @@ const getOrder = async () => {
     const response = await OrderService.GetOrder(orderid)
     if (response.data.resultCode == ApiResult.SUCCESS) {
         order.value = response.data.data
-        countValue.value = new Date(order.value.create.replaceAll('-','/')).getTime() + 1000 * 60 * 60 * 720
+        if(order.value.status==1) active.value = 3
+        if(order.value.status==2) active.value = 4
+        if(order.value.expireddate) countValue.value = new Date(order.value.expireddate.replaceAll('-','/')).getTime()//order.value.expireddate//new Date(order.value.create.replaceAll('-','/')).getTime() + 1000 * 60 * 60 * 720
     }
 
     loading.value = false