dl-sale-platform/ruoyi-ui/src/views/system/userFront/payBefore.vue

<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <div class="user-actions">
        <el-menu mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item>
            <router-link to="/cus">首页</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/userOrder">订单查询</router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </el-header>

    <!-- 内容区域 -->
    <el-main class="content">
      <div class="product-info">
        <el-image
          :src="imageUrl"
          class="product-image"
          @error="handleImageError"
        />
        <div class="product-details">
          <h3>{{ goods.name }}</h3>
          <p class="price">￥{{ goods.price }}</p>
        </div>
      </div>

      <!-- 支付选择 -->
      <div class="payment">
        <p>请选择支付方式：</p>
        <el-button type="success" @click="pay('wechat')">微信支付</el-button>
        <el-button type="primary" @click="pay('alipay')">支付宝支付</el-button>
      </div>
      <div class="payment">
      <p class="warning">支付完成后会自动获取项目文件下载(最好使用电脑浏览器打开支付，以便于支付成功后项目的下载和安装)</p>
      </div>
    </el-main>

    <!-- 备注信息 -->
    <el-footer class="footer">
      <p class="warning">注意！如果支付成功后，因分享网链接失效导致无法跳转或下载设计，请联系客服，会为您发送设计。</p>
      <p class="tip"> (购买无需注册登录)请注意，虚拟内容商品，购买后不支持退货、转让、退换，请斟酌确认。</p>
    </el-footer>
  </div>
</template>

<script>
import {getGoods} from "@/api/system/goods";
import {addOrder, orderPay} from "@/api/system/order";
import { Loading } from 'element-ui';

export default {
  data() {
    return {

      // 商品表格数据
      goods: [],
      goodsId: null,  // 用于存储接收的商品ID
      goodsResource: null,
      orderNo: null,
      form:{},
      payUrl: null,
      loading: null,
      imageUrl: '',
      defaultImage: require('@/assets/images/moren.png'),

    };
  },
  created() {
    this.goodsId = this.$route.query.id;
    this.getGood(this.goodsId);
    console.log('goodsId',this.goodsId)

  },
  methods: {

    /** 查询商品 */
    getGood(id) {
      getGoods(id).then(response => {
        this.goods = response.data;
        this.imageUrl = `http://127.0.0.1:40506${this.goods.cover}` || this.defaultImage;
        this.goodsResource = this.goods.resource;
        this.getOrderNo();
        console.log('good',response)
      });
    },
    handleImageError() {
      // 设置为默认图片
      this.imageUrl = this.defaultImage;
    },
    getOrderNo(){
      this.form.payStatus = 2
      this.form.price = this.goods.price
      this.form.goodsName = this.goods.name
      this.form.goodsmin = this.goods.id
      addOrder(this.form).then(response => {
        console.log('form',this.form)
        console.log('res',response)
        this.orderNo = response.data;
        console.log('订单号',this.orderNo)
      });
    },

    pay(method) {
      if (method === 'wechat') {
        orderPay(this.orderNo).then(response => {
          this.payUrl = response;
          console.log('res',response)
          console.log('支付地址',this.payUrl)
          this.loading = true;
          this.$router.push({ path: '/payMent', query: { id: this.goodsId, url: this.payUrl, orderNo: this.orderNo } });
        }).catch(error => {
          console.error('支付失败', error);
        }).finally(() => {
          this.loading.close(); // 关闭加载动画
        });

      } else if (method === 'alipay') {
        // 支付宝支付逻辑
        alert('跳转到支付宝支付页面');
      }
    }
  }
};
</script>

<style scoped>
/* 页面布局样式 */
.container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px;
}
.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}
.logo {
  height: 40px;
}

.menu {
  flex-grow: 1;
}

.content {
  background-color: #f5f5f5;
  padding: 20px;
  margin-top: 20px;
}

.product-info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.product-image {
  width: 300px;
  height: auto;
  margin-right: 20px;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.price {
  font-size: 24px;
  color: red;
  margin-top: 10px;
}

.payment {
  margin-top: 30px;
  text-align: center;
}

.payment p {
  margin-bottom: 10px;
  font-size: 16px;
}

.footer {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
}

.tip {
  color: #333;
}

.warning {
  color: red;
  font-weight: bold;
}
</style>