WechatApp/pages/result/index.vue

<template>
  <!-- 下单结果页面 -->
  <view class="content">
    <image :src="getFileUrl('img/icon/success.png')" mode="widthFix" class="result-img"></image>
    <view class="result-title">下单成功</view>
    <view class="result-desc">您的菜马上就来，坐等开吃</view>
    <view class="result-btns">
      <view class="result-btn1" hover-class="hover-active" @click="handleGoAddFood">去加餐</view>
      <view class="result-btn2" hover-class="hover-active" @click="handleGoSettle">去结算</view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { go } from "@/utils/utils.js";
import { getFileUrl } from "@/utils/file.js";

const handleGoAddFood = () => {
  go('/pages/orderFood/index');
};

const handleGoSettle = () => {
  go('/pages/placeOrder/index?payType=confirmPay');
};

onLoad((e) => {
});
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  text-align: center;
}

.result-img {
  width: 84rpx;
  height: 84rpx;
  margin-top: 64rpx;
}

.result-title {
  font-weight: bold;
  font-size: 34rpx;
  color: #151515;
  margin-top: 30rpx;
}

.result-desc {
  font-size: 30rpx;
  color: #666666;
  margin-top: 10rpx;
  margin-top: 40rpx;
}

.result-btns {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 40rpx;
  width: 100%;
  margin-top: 52rpx;
  padding: 0 60rpx;

  .result-btn1 {
    width: 252rpx;
    height: 80rpx;
    box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
    border-radius: 19rpx 19rpx 19rpx 19rpx;
    border: 2rpx solid #F47D1F;
    font-weight: bold;
    font-size: 27rpx;
    color: #F47D1F;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .result-btn2 {
    width: 252rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #FCB73F 0%, #FC743D 100%);
    box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
    border-radius: 19rpx 19rpx 19rpx 19rpx;
    font-weight: bold;
    font-size: 27rpx;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>