daimp-front/sub-operation-service/src/views/userCenter/orderSuccess.vue

<template>
  <div class="order-success-warp">
    <userHeader :title="'订单提交成功'"></userHeader>
    <div class="order-success-content">
      <div class="content-top">
        <el-row :gutter="16">
          <el-col :span="14" align="left">
            <div class="back">
              <el-icon><ArrowLeftBold /></el-icon>
            </div>
            <div class="status">
              <div class="status-val">
                <el-icon><SuccessFilled /></el-icon>
                <span>{{ '订单提交成功' }}</span>
              </div>
              <div class="tips">请您及时付款，以便订单尽快完成！</div>
              <div class="sub-tips">请您在提交订单后 <span class="txt-main">0时29分59秒</span> 内完成支付，否则订单会自动取消。</div>
            </div>
          </el-col>
          <el-col :span="10" align="right">
            <div class="pay-amount">
              <span class="tips">实付款：</span> <span class="total">{{ totalAmout.toFixed(2) }}</span>
            </div>
            <div class="order-no">交易订单：JY20250101000001</div>
          </el-col>
        </el-row>
      </div>

      <div class="pay-style-warp">
        <div class="title">支付方式</div>
        <div class="pay-list">
          <div class="pay-list-pos">
            <div
              v-for="(s, indexs) in styleList"
              :key="s.name"
              class="pay-item"
              :class="s.name == currentPay ? 'pay-act' : 'pay-normal'"
              @click="selectPayStyle(s.name)"
            >
              <div class="is-style">
                <div class="is-style-pos">
                  <el-icon><CircleCheckFilled /></el-icon>
                </div>
              </div>
              <div class="style-icon" :style="{ background: s.color }">
                <div class="iconfont" :class="'icon-' + s.icon"></div>
              </div>
              <div class="style-txt">
                <div class="style-txt-pos">{{ s.title + '支付' || '--' }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="pay-code">
          <div class="pay-tips">
            <span class="tips">
              <div class="tips-pos">{{ currentIndex > -1 ? styleList[currentIndex].title + '扫码' : '扫码' }}，支付</div>
            </span>
            <span class="pay-amount">{{ payAmout.toFixed(2) }}</span>
          </div>
        </div>

        <div class="pay-code-img">
          <div class="code-img">
            <costomImg :url="qrImg" :preview-list="[qrImg]" :is-montage="false" :is-view="false" :fit="'cover'"></costomImg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import userHeader from './components/userHeader.vue';
import costomImg from '@/components/costomImg.vue';
import { qrImg } from '@/layouts/component/Header/base64img.js';
const route = useRoute();
const router = useRouter();
let totalAmout = ref(196);

let styleList = reactive([
  { title: '支付宝', name: 'alipay', icon: 'alipay', color: 'rgb(0, 159, 232)' },
  { title: '微信', name: 'wx', icon: 'wxpay', color: 'rgb(40, 196, 69)' },
]);

let currentPay = ref('wx');

const selectPayStyle = (name) => {
  currentPay.value = name;
};

let currentIndex = computed(() => {
  let index = -1;
  index = styleList.findIndex((m) => {
    return m.name == currentPay.value;
  });
  return index;
});

let payAmout = ref(147);
</script>
<style lang="scss" scoped>
.order-success-warp {
  width: 100%;
  .order-success-content {
    width: 100%;
    background: $color-fff;
    height: calc(100vh - 136px);
    margin-top: 16px;
    border-radius: 16px;
    overflow-y: auto;
    .content-top {
      background: $color-main-table-header;
      padding: 16px;
      .back,
      .status {
        display: inline-block;
        vertical-align: top;
        padding-left: 16px;
        .status-val {
          color: $color-main;
          .el-icon {
            font-size: 38px;
            display: inline-block;
            vertical-align: middle;
          }
          font-size: 26px;
        }
        .tips {
          font-size: 20px;
        }
        .sub-tips {
          font-size: 16px;
          color: $color-999;
        }
      }
      .back {
        .el-icon {
          font-size: 30px;
          margin-top: 8px;
        }
      }

      .pay-amount {
        padding-top: 24px;
        .tips {
          font-size: 20px;
        }
        .total {
          font-size: 32px;
          color: $color-main;
        }
        .total::before {
          content: '￥';
        }
      }
      .order-no {
        color: $color-999;
        font-size: 16px;
      }
    }

    .pay-style-warp {
      width: 100%;
      padding: 16px;
      .title {
        width: 100%;
        font-size: 20px;
      }
      .pay-list {
        display: inline-flex;
        justify-content: center;
        margin: 64px 0;

        width: 100%;
        .pay-list-pos {
          display: inline-flex;
          justify-content: center;
          gap: 64px;
        }
        .pay-item {
          border-radius: 16px;
          padding: 24px;
          display: inline-flex;
          justify-content: flex-start;
          gap: 16px;
          cursor: pointer;
          .is-style,
          .style-icon,
          .style-txt {
            display: inline-block;
            vertical-align: middle;
          }
          .is-style,
          .style-txt {
            display: inline-flex;
            justify-content: center;
            flex-direction: column;
          }
          .is-style {
            .el-icon {
              font-size: 24px;
            }
          }
          .style-txt {
            font-size: 20px;
          }
          .style-icon {
            border-radius: 16px;
            width: 56px;
            height: 56px;
            position: relative;
            .iconfont {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              color: $color-fff;
              &.icon-alipay {
                font-size: 46px !important;
              }
              &.icon-wxpay {
                font-size: 38px !important;
              }
            }
          }

          &.pay-act {
            border: 1px solid $color-main;
            .is-style {
              .el-icon {
                color: $color-main;
              }
            }
          }
          &.pay-normal {
            border: 1px solid $color-da;
            .is-style {
              .el-icon {
                color: $color-999;
              }
            }
          }
        }
      }

      .pay-code {
        text-align: center;
        width: 100%;
        .pay-tips {
          .tips,
          .pay-amount {
            display: inline-block;
            vertical-align: middle;
          }
          .tips {
            display: inline-flex;
            justify-content: center;
            flex-direction: column;
            .tips-pos {
              font-size: 20px;
              margin-top: 8px;
            }
          }
          .pay-amount {
            font-size: 32px;
            color: $color-main;
          }
          .pay-amount::before {
            content: '￥';
          }
        }
      }

      .pay-code-img {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        margin: 24px 0;
        .code-img {
          display: inline-block;
          width: 240px;
          height: 240px;
        }
      }
    }
  }
}
</style>