支付页面

ant-design-vue-jeecg/src/views/shopping/pages/pay.vue

@@ -5,23 +5,120 @@
       <Header></Header>
       <h1 class="c_fff">感谢您的订购</h1>
     </div>
+    <a-modal v-model="visible"  class="toPay">
+      <template slot="title">
+        <div class="c_1B f_20" style="text-align: center;padding: 5px;font-weight: 500">支付宝支付</div>
+      </template>
+      <div class="d-flex"
+           style="
+            width: 450px;
+            padding: 30px 10px;
+            margin: 0 auto;">
+        <div class="l"
+             style="
+                width: 120px;
+                height: 120px;
+                background-color: grey;
+                margin-right: 20px;">
+
+        </div>
+        <div class="r" style="width:290px">
+          <p class="f_16 c_4B">总计: ￥9,900</p>
+          <p class="f_14 c_4B">请使用支付宝扫描左图二维码进行支付</p>
+          <p class="f_14 c_4B">请您在15分钟内付款以免订单被取消，如有疑问，请联系客服。</p>
+          <p class="f_14 c_4B">订单发货后您将收到订单发货通知短信</p>
+        </div>
+      </div>
+      <template slot="footer">
+        <div class="d-flex" style="justify-content: center;align-items:center">
+          <a-button style="margin-right: 30px;border:none;font-size: 12px" @click="handleOk">手机不在身边？ 登录账号付款</a-button>
+          <a-button style="font-size: 12px"   size="small" @click="handleCancel">
+            返回
+          </a-button>
+        </div>
+
+      </template>
+    </a-modal>
     <div class="jz">
+      <a-button style="border: none" @click="handleBack">
+        <a-icon type="left" />返回
+      </a-button>
       <div class="success">
         <p class="c_1B f_24">您的订单已提交成功</p>
         <p class="c_999 f_14">请继续支付，15分钟内未付款，订单将自动取消</p>
         <p class="c_999 f_14">如有疑问，请联系客服</p>
-        <p class="c_1B f_16"><span>1</span><span>4</span><span>:</span><span>5</span><span>2</span></p>
+        <p class="c_1B f_16">
+<!--          letter-spacing-->
+          <span>1</span>
+          <span>4</span>
+          <span>:</span>
+          <span>5</span>
+          <span>2</span>
+        </p>
         <div class="d-flex btnDiv">
           <div class="dialogButton default c_1B f_12">修改支付方式</div>
-          <div type="primary" class="dialogButton primary   f_12">立即支付</div></div>
+          <div type="primary" class="dialogButton primary   f_12" @click="showModal">立即支付</div></div>
       </div>
       <p class="orderNum f_16"><span class="f_16">订单编号 # </span>GU202301052604844</p>
       <p class="date f_16 d-flex">
         <span class="f_16 c_31">下单日期：  <span>2023/01/05</span></span>
         <span  class="f_12 c_888">订单状态： 待付款</span>
+        <span class="r d-flex">
           <span class="f_12 c_31">数量: 1</span>
           <span  class="f_12 c_31">总计： ￥9,900</span>
+        </span>
       </p>
+      <div class="table d-flex">
+        <div class="tableImg"></div>
+        <div class="tableTitle">
+          <div class="title c_31 f_16">中国新年系列针织慢跑裤</div>
+          <div class="c_999 f_12">款式： 象牙白色和多色</div>
+          <div class="c_999 f_12">主辅料： 主料1，辅料1，叮叮叮，辅料n主辅料： 主料1，辅料1，叮叮叮，辅料n主辅料： 主料1，辅料1，叮叮叮，辅料n</div>
+          <div class="c_999 f_12">尺码： S</div>
+        </div>
+        <div class="fahuo c_31 f_12">预计发货后1-4个工作日送达</div>
+        <div class="r d-flex">
+          <div class="tableNum c_31 f_12">数量 : 1</div>
+          <div class="tablePrice c_31 f_12">￥9,900</div>
+        </div>
+
+      </div>
+      <div class="total d-flex">
+        <div class="d-flex">
+          <span>商品总计</span>
+          <span>￥9,900</span>
+        </div>
+        <div class="d-flex">
+          <span>运费</span>
+          <span>免费</span>
+        </div>
+        <div class="d-flex">
+          <span>总计</span>
+          <span>￥9,900</span>
+        </div>
+      </div>
+      <div class="addr d-flex">
+        <div class="f_16 c_31 title">配送地址</div>
+        <div class="addrDiv">
+          <p  class="f_14 c_31">是的发财树是</p>
+          <p class="f_12 c_4B">天津天津市和平区水擦拭订餐撒上天津天津市和平区水擦拭订餐撒上天津天津市和平区水擦拭订餐撒上天津天津市和平区水擦拭订餐撒上天津天津市和平区水擦拭订餐撒上天津天津市和平区水擦拭订餐撒上</p>
+          <p class="f_12 c_4B">17766667777</p>
+        </div>
+        <div class="express">
+          <p class="f_14 c_31">普通快递</p>
+          <p class="f_12 c_4B">免费</p>
+          <p class="f_12 c_4B">预计发货后1-4个工作日送达</p>
+        </div>
+      </div>
+      <div class="payDiv">
+        <span class="title f_16 c_31">支付方式</span>
+        <span class="payWay f_12 c_1B" v-if="payWay ==0">
+          <a-icon type="alipay" />支付宝</span>
+        <span class="payWay f_12 c_1B" v-if="payWay ==1">
+          <a-icon type="wechat" />微信</span>
+        <span class=" f_12 c_31" v-if="!invoice">不需要发票</span>
+        <span class=" f_12 c_31" v-if="invoice">需要发票</span>
+      </div>
     </div>
     <Footer></Footer>
   </div>
@@ -34,10 +131,24 @@
     components: { Header,Footer },
     data() {
       return {
+        visible: false,
+        payWay:'0',//支付方式
+        invoice:true,//是否需要发票
       };
     },
     methods: {
-
+      handleBack(){
+        this.$router.go(-1)
+      },
+      showModal() {
+        this.visible = true;
+      },
+      handleOk(e) {
+        console.log('--')
+      },
+      handleCancel(e) {
+        this.visible = false;
+      },
     },
   };
 </script>
@@ -54,6 +165,9 @@
   .c_31{
     color: #313131;
   }
+  .c_4B{
+    color: #4B4B4B;
+  }
   .btnDiv{
     justify-content: space-around;
     .dialogButton {
@@ -83,6 +197,7 @@
       }
     }
   }
+
 .pay{
   .bg{
     background-image: url("../assets/bg06.png");
@@ -94,6 +209,8 @@
     }
   }
   .jz{
+    padding-top: 20px;
+    padding-bottom: 100px;
     .success{
       width: 500px;
       margin: 60px auto;
@@ -124,11 +241,85 @@
     }
     .date{
       justify-content: space-between;
+      margin-bottom: 20px;
       .f_16{
         font-weight: 600;
       }
+      .r{
+        width:300px;
+        justify-content: space-between;
+      }
 
     }
+    .table{
+      justify-content: space-between;
+      padding: 30px 0 30px 20px;
+      border-bottom: 2px solid #F2F2F2;
+      .tableImg{
+        width: 80px;
+        height: 80px;
+        background-color: grey;
+      }
+      .tableTitle{
+        max-width: 500px;
+        .title{
+          font-weight: 600;
+          margin-bottom: 8px;
+        }
+        .c_999{
+          margin-bottom: 2px;
+        }
+      }
+      .r{
+        width:300px;
+        justify-content: space-between;
+      }
+    }
+    .total{
+      flex-direction: column;
+      align-items: flex-end;
+      padding-top: 48px;
+      padding-bottom: 27px;
+      border-bottom: 2px solid #F2F2F2;
+      .d-flex{
+        width: 300px;
+        justify-content: space-between;
+        margin-bottom: 12px;
+      }
+    }
+    .addr{
+      padding: 32px 10px;
+      font-weight: 600;
+      border-bottom: 2px solid #F2F2F2;
+      .title{
+      }
+      .addrDiv{
+        margin: 0 80px;
+        max-width: 500px;
+      }
+    }
+    .payDiv{
+      padding: 32px 10px;
+      .title{
+        font-weight: 600;
+      }
+      .payWay{
+        margin: 0 80px;
+        i{
+          border-radius: 2px;
+          padding:1px;
+          margin-right: 5px;
+        }
+        .anticon-alipay{
+          background:#08AAFF;
+          color:#fff;
+        }
+        .anticon-wechat{
+          background:#00B40C;
+          color:#fff;
+        }
+      }
+    }
   }
 }
 </style>