yoe-shop-web/src/views/payc/index.vue

<template>
  <div class="pay-pages">
    <div class="pay-bos">
      <div class="create-title flex-row-start">
        <el-icon color="#101828" size="16"><Document /></el-icon>
        <div style="margin-left: 6px">支付订单</div>
      </div>
      <div class="pay-bos flex-column-between">
        <div class="pay-box flex-column-center">
          <img src="@/assets/images/pay/pay1.png" alt="" />
          <div class="pay-text1">订单提交成功！请尽快完成支付。</div>
          <div class="pay-text2">请在2小时0分内完成支付，超时后将取消订单</div>
        </div>
        <div class="pay-bnt flex-row-center">
          <span class="bnt1">应付总额：</span>
          <span class="bnt2">¥{{ totalAmount }}</span>
        </div>
      </div>
      <div class="pay-head1">选择支付方式</div>
      <div class="pay-for">
        <div v-for="(item, index) in payList" :key="index" class="pay-list flex-row-center" :class="index == 0 ? 'hig' : ''">
          <img v-if="index == 0" src="@/assets/images/pay/pay2.png" alt="" />
          <img v-if="index == 1" src="@/assets/images/pay/pay3.png" alt="" />
          <img v-if="index == 2" src="@/assets/images/pay/pay4.png" alt="" />
          <img v-if="index == 3" src="@/assets/images/pay/pay5.png" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
      <div class="pay-head2">选择“暂存订单”，订单将在我的订单中査看，您可以在我的订单中进行完成支付。</div>
      <div class="pay-for">
        <div class="pay-list flex-row-center">
          <img src="@/assets/images/pay/pay6.png" alt="" />
          <div>暂存订单</div>
        </div>
      </div>
    </div>
    <div class="pay-foot">
      <div class="foot-bos">
        <el-button class="bnt1" @click="handleCancelOrder">取消订单</el-button>
        <el-button class="bnt2" type="primary" @click="onSubmit">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { getOrderInfo, orderPay } from '@/api/pc/enterprise/order';
const payList = ref<any>([{ title: '信用支付' }, { title: '支付宝支付' }, { title: '微信支付' }, { title: '货到付款' }]);
const route = useRoute();
const orderId = ref<any>(null);
const totalAmount = ref<any>(0);
onMounted(() => {
  orderId.value = route.query.id;
  getInfo();
});

const getInfo = () => {
  getOrderInfo(orderId.value).then((res) => {
    if (res.code == 200) {
      totalAmount.value = res.data.totalAmount;
    }
    console.log(res);
  });
};

const onSubmit = () => {
  orderPay({
    orderId: orderId.value,
    payType: 0
  }).then((res) => {
    if (res.code == 200) {
      onPath('/order/orderManage');
    }
  });
};

import { cancelOrder } from '@/api/pc/enterprise/order';
const handleCancelOrder = () => {
  cancelOrder({ id: orderId.value, orderStatus: '7' }).then((res) => {
    if (res.code == 200) {
      onPath('/cart');
    }
  });
};
</script>

<style lang="scss" scoped>
.pay-pages {
  width: 100%;
  background-color: #ffffff;
  .pay-bos {
    width: 1200px;
    margin: 0 auto;
    .create-title {
      font-size: 16px;
      color: #101828;
      padding-top: 20px;
    }
    .pay-bos {
      width: 1200px;
      height: 230px;
      border: 1px solid #e5e7eb;
      margin-top: 30px;
      padding: 30px 0 20px 0;
      .pay-box {
        width: 1180px;
        border-bottom: 1px solid #dfe9f1;
        margin: 0 10px;
        padding-bottom: 20px;
        img {
          width: 27px;
          height: 27px;
        }
        .pay-text1 {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
          margin: 8px 0;
        }
        .pay-text2 {
          font-weight: 400;
          font-size: 14px;
          color: #364153;
        }
      }
      .pay-bnt {
        width: 428px;
        height: 68px;
        background: #f2f3f5;
        border-radius: 10px 10px 10px 10px;
        margin: 0 auto;
        cursor: pointer;
        .bnt1 {
          font-weight: 400;
          font-size: 14px;
          color: #000000;
        }
        .bnt2 {
          font-weight: 600;
          font-size: 20px;
          color: #e7000b;
        }
      }
    }
    .pay-head1 {
      font-weight: 600;
      font-size: 16px;
      color: #101828;
      margin: 30px 0 20px 0;
    }
    .pay-for {
      display: flex;
      gap: 0 18px;
      .pay-list {
        width: 180px;
        height: 60px;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        font-size: 14px;
        color: #000000;
        cursor: pointer;
        &.hig {
          background: #ffe5e5;
          border: 1px solid #e7000b;
        }
        img {
          height: 18px;
          width: 18px;
          margin-right: 12px;
        }
      }
    }
    .pay-head2 {
      font-size: 13px;
      color: #364153;
      padding: 20px 0 12px 0;
    }
  }
  .pay-foot {
    width: 100%;
    height: 82px;
    background: #ffffff;
    box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.05);
    margin-top: 47px;
    .foot-bos {
      width: 1200px;
      margin: 0 auto;
      padding-top: 16px;
      .bnt1 {
        width: 198px;
        height: 50px;
        background: #f7f8fa;
      }
      .bnt2 {
        width: 156px;
        height: 50px;
      }
    }
  }
}
</style>