wechat payment for pc is ready

web/src/assets/css/member.styl

@@ -2,53 +2,6 @@
   background-color: #282c34;
   height 100%
 
-  .el-dialog {
-    .el-dialog__body {
-      .pay-container {
-        .amount {
-          text-align center
-
-          span {
-            color #f56c6c
-          }
-        }
-
-        .count-down {
-          display flex
-          justify-content center
-        }
-
-        .pay-qrcode {
-          display flex
-          justify-content center
-
-          .el-image {
-            width 360px;
-            height 360px;
-          }
-        }
-
-        .tip {
-          display flex
-          justify-content center
-
-          .el-icon {
-            font-size 24px
-          }
-
-          .text {
-            font-size: 16px
-            margin-left 10px
-          }
-        }
-
-        .tip.success {
-          color #07c160
-        }
-      }
-    }
-  }
-
   .title {
     text-align center
     background-color #25272d
@@ -223,4 +176,17 @@
     }
   }
 
+}
+
+.pay-dialog {
+  .product-info {
+    text-align center
+    color #333333
+    font-size 16px
+
+    .price {
+      color #f56c6c
+      font-weight 700
+    }
+  }
 }

web/src/views/Dalle.vue

@@ -156,14 +156,14 @@
                           <el-tooltip content="删除" placement="top" effect="light">
                             <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
                           </el-tooltip>
-                          <el-tooltip content="分享" placement="top" effect="light" v-if="slotProp.item.publish">
+                          <el-tooltip content="取消分享" placement="top" effect="light" v-if="!slotProp.item.publish">
                             <el-button type="warning"
                                        @click="publishImage(slotProp.item, false)"
                                        circle>
                               <i class="iconfont icon-cancel-share"></i>
                             </el-button>
                           </el-tooltip>
-                          <el-tooltip content="取消分享" placement="top" effect="light" v-else>
+                          <el-tooltip content="分享" placement="top" effect="light" v-else>
                             <el-button type="success" @click="publishImage(slotProp.item, true)" circle>
                               <i class="iconfont icon-share-bold"></i>
                             </el-button>

web/src/views/Member.vue

@@ -106,8 +106,12 @@
 
     </div>
 
-    <el-dialog v-model="showDialog" :show-close=false hide-footer width="auto">
-      <div style="padding-bottom: 10px">
+    <el-dialog v-model="showDialog" :show-close=false :close-on-click-modal="false" hide-footer width="auto" class="pay-dialog">
+      <div v-if="qrImg !== ''">
+        <div class="product-info">请使用微信扫码支付：<span class="price">￥{{price}}</span></div>
+        <el-image :src="qrImg" fit="cover" />
+      </div>
+      <div style="padding-bottom: 10px; text-align: center">
         <el-button type="success" @click="payCallback(true)">支付成功</el-button>
         <el-button type="danger" @click="payCallback(false)">支付失败</el-button>
       </div>
@@ -128,6 +132,7 @@ import UserOrder from "@/components/UserOrder.vue";
 import {useSharedStore} from "@/store/sharedata";
 import BindEmail from "@/components/BindEmail.vue";
 import ThirdLogin from "@/components/ThirdLogin.vue";
+import QRCode from "qrcode";
 
 const list = ref([])
 const vipImg = ref("/images/vip.png")
@@ -150,6 +155,8 @@ const vipInfoText = ref("")
 const store = useSharedStore()
 const profileKey = ref(0)
 const showDialog = ref(false)
+const qrImg = ref("")
+const price = ref(0)
 
 
 onMounted(() => {
@@ -200,9 +207,20 @@ const pay = (product, payWay) => {
     user_id: user.value.id,
     device: "jump"
   }).then(res => {
-    window.open(res.data, '_blank');
-    loading.value = false
     showDialog.value = true
+    loading.value = false
+    if (payWay.pay_way === 'wechat') {
+      price.value = Number((product.price - product.discount).toFixed(2))
+      QRCode.toDataURL(res.data, {width: 300, height: 300, margin: 2}, (error, url) => {
+        if (error) {
+          console.error(error)
+        } else {
+          qrImg.value = url;
+        }
+      })
+    } else {
+      window.open(res.data, '_blank');
+    }
   }).catch(e => {
     setTimeout(() => {
       ElMessage.error("生成支付订单失败：" + e.message)
@@ -225,6 +243,7 @@ const payCallback = (success) => {
   }
 }
 
+
 </script>
 
 <style lang="stylus">

web/src/views/admin/Order.vue

@@ -26,6 +26,7 @@
     <el-row>
       <el-table :data="items" :row-key="row => row.id" table-layout="auto">
         <el-table-column prop="order_no" label="订单号"/>
+        <el-table-column prop="trade_no" label="交易号"/>
         <el-table-column prop="username" label="下单用户"/>
         <el-table-column prop="subject" label="产品名称"/>
         <el-table-column prop="amount" label="订单金额"/>