house/fount/views/pay.vue

<template>
  <div class="container">
    <!-- 显示支付提示信息 -->
    <el-alert title="确认支付前请先核对订单信息" type="success" :closable="false"></el-alert>
    <!-- 输入收款人信息（暂时注释） -->
    <!-- <div class="top-content">
      <span>收款人</span>
      <el-input style="width:300px" v-model="name" placeholder="收款人"></el-input>
      <span style="margin-left:20px">收款账号</span>
      <el-input style="width:300px" v-model="account" placeholder="收款账号"></el-input>
    </div> -->
    <!-- 显示支付金额（暂时注释） -->
    <!-- <div class="price-content">
      <span>金额</span>
      <span>￥99.0</span>
    </div> -->
    <!-- 支付方式选择区域 -->
    <div class="pay-type-content">
      <!-- 微信支付选项 -->
      <div class="pay-type-item">
        <el-radio v-model="type" label="微信支付"></el-radio>
        <img src="@/assets/img/test/weixin.png" alt>
        <!-- <span>微信支付</span> -->
      </div>
      <!-- 支付宝支付选项 -->
      <div class="pay-type-item">
        <el-radio v-model="type" label="支付宝支付"></el-radio>
        <img src="@/assets/img/test/zhifubao.png" alt>
        <!-- <span>支付宝支付</span> -->
      </div>
      <!-- 建设银行支付选项 -->
      <div class="pay-type-item">
        <el-radio v-model="type" label="建设银行"></el-radio>
        <img src="@/assets/img/test/jianshe.png" alt>
        <!-- <span>建设银行</span> -->
      </div>
      <!-- 农业银行支付选项 -->
      <div class="pay-type-item">
        <el-radio v-model="type" label="农业银行"></el-radio>
        <img src="@/assets/img/test/nongye.png" alt>
        <!-- <span>农业银行</span> -->
      </div>
      <!-- 中国银行支付选项 -->
      <div class="pay-type-item">
        <el-radio v-model="type" label="中国银行"></el-radio>
        <img src="@/assets/img/test/zhongguo.png" alt>
        <!-- <span>中国银行</span> -->
      </div>
      <!-- 交通银行支付选项 -->
      <div class="pay-type-item">
        <el-radio v-model="type" label="交通银行"></el-radio>
        <img src="@/assets/img/test/jiaotong.png" alt>
        <!-- <span>交通银行</span> -->
      </div>
    </div>
    <!-- 按钮区域 -->
    <div class="buton-content">
      <!-- 确认支付按钮 -->
      <el-button @click="submitTap" type="primary">确认支付</el-button>
      <!-- 返回按钮 -->
      <el-button @click="back()">返回</el-button>
    </div>
  </div>
</template>

<script>
// import { Message } from "element-ui";
export default {
  data() {
    return {
      // 收款人姓名
      name: "",
      // 收款账号
      account: "",
      // 支付方式
      type: "",
      // 支付表单
      table: "",
      // 支付对象
      obj: ""
    };
  },
  mounted() {
    // 页面加载时从本地存储获取支付表单
    let table = this.$storage.get("paytable");
    // 页面加载时从本地存储获取支付对象
    let obj = this.$storage.getObj("payObject");
    // 设置支付表单
    this.table = table;
    // 设置支付对象
    this.obj = obj;
  },
  methods: {
    submitTap() {
      // if (!this.name) {
      //   this.$message.error("请输入收款人姓名");
      //   return;
      // }
      // if (!this.account) {
      //   this.$message.error("请输入收款人账号");
      //   return;
      // }
      // 检查是否选择了支付方式
      if (!this.type) {
        this.$message.error("请选择支付方式");
        return;
      }
      // 显示确认支付的对话框
      this.$confirm(`确定支付?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 设置支付状态为已支付
        this.obj.ispay = "已支付";
        // 发送请求更新支付状态
        this.$http({
          url: `${this.table}/update`,
          method: "post",
          data: this.obj
        }).then(({ data }) => {
          // 如果更新成功
          if (data && data.code === 0) {
            // 显示支付成功的消息
            this.$message({
              message: "支付成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                // 返回上一页
                this.$router.go(-1);
              }
            });
          } else {
            // 如果更新失败，显示错误消息
            this.$message.error(data.msg);
          }
        });
      });
    },
    back(){
      // 返回上一页
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
/* 容器样式 */
.container {
  margin: 10px;
  font-size: 14px;
  span {
    width: 60px;
  }
  /* 顶部内容区域样式（暂时注释） */
  .top-content {
    display: flex;
    align-items: center;
    padding: 20px;
  }
  /* 价格内容区域样式（暂时注释） */
  .price-content {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 20px;
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
    font-size: 20px;
    font-weight: bold;
    color: red;
  }
  /* 支付方式内容区域样式 */
  .pay-type-content {
    display: flex;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    span {
      width: 100px;
    }
    /* 支付方式项样式 */
    .pay-type-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 300px;
      margin: 20px;
      border: 1px solid #eeeeee;
      padding: 20px;
    }
  }
  /* 按钮内容区域样式 */
  .buton-content {
    margin: 20px;
  }
}
</style>