添加支付模板

wuxj · May 12, 2020 · 6ddada0 · 6ddada0
1 parent 1999eb3
commit 6ddada0
Show file tree

Hide file tree

Showing 6 changed files with 294 additions and 2 deletions.
diff --git a/src/layouts/components/SideBar/index.vue b/src/layouts/components/SideBar/index.vue
@@ -11,6 +11,7 @@
       :collapse="collapse"
       :collapse-transition="false"
       :default-openeds="defaultOpen"
+      unique-opened
       mode="vertical"
     >
       <sidebar-item

diff --git a/src/router/index.js b/src/router/index.js
@@ -43,7 +43,7 @@ export const asyncRoutes = [
       },
     ],
   },
-  {
+  /* {
     path: "/test",
     component: Layout,
     redirect: "noRedirect",
@@ -59,8 +59,27 @@ export const asyncRoutes = [
         },
       },
     ],
+  }, */
+  {
+    path: "/mall",
+    component: Layout,
+    redirect: "noRedirect",
+    name: "Mall",
+    meta: { title: "商城", icon: "shopping-cart" },
+    alwaysShow: true,
+    children: [
+      {
+        path: "pay",
+        name: "Pay",
+        component: () => import("@/views/mall/pay/index"),
+        meta: {
+          title: "支付",
+          roles: ["admin"],
+          noCache: true,
+        },
+      },
+    ],
   },
-
   {
     path: "/byui",
     component: Layout,
@@ -307,6 +326,7 @@ export const asyncRoutes = [
       },
     ],
   },
+
   {
     path: "/error",
     component: EmptyLayout,

diff --git a/src/views/mall/pay/components/Step1.vue b/src/views/mall/pay/components/Step1.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label-width="0">
+        <el-alert show-icon>
+          请务必仔细填写并核对
+        </el-alert>
+      </el-form-item>
+      <el-form-item label="付款账户" prop="payAccount">
+        <el-input v-model="form.payAccount"></el-input>
+      </el-form-item>
+      <el-form-item label="收款账户" prop="gatheringAccount">
+        <el-input v-model="form.gatheringType"></el-input>
+      </el-form-item>
+      <el-form-item label="收款人姓名" prop="gatheringName">
+        <el-input v-model="form.gatheringName"></el-input>
+      </el-form-item>
+      <el-form-item label="转账金额" prop="price">
+        <el-input v-model="form.price"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">下一步</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        payAccount: "XXXXXXXXXXXXXXXX",
+        gatheringAccount: "1204505056@qq.com",
+        gatheringType: "XXXXXXXXXXXXXXXX",
+        gatheringName: "初志鑫",
+        price: "100",
+      },
+      rules: {
+        payAccount: [
+          { required: true, message: "请选择付款账户", trigger: "blur" },
+        ],
+        gatheringAccount: [
+          { required: true, message: "请输入收款账户", trigger: "blur" },
+          { type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
+        ],
+        gatheringName: [
+          { required: true, message: "请输入收款人姓名", trigger: "blur" },
+        ],
+        price: [
+          { required: true, message: "请输入转账金额", trigger: "blur" },
+          { pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit("change-step", 2, this.form);
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/mall/pay/components/Step2.vue b/src/views/mall/pay/components/Step2.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+    <el-form-item label-width="0">
+      <el-alert show-icon>
+        确认转账后，资金将直接打入对方账户，无法退回。
+      </el-alert>
+    </el-form-item>
+    <el-form-item label="付款账户：">
+      {{ infoData.payAccount }}
+    </el-form-item>
+    <el-form-item label="收款账户：">
+      {{ infoData.gatheringAccount }}
+    </el-form-item>
+    <el-form-item label="收款人姓名：">
+      {{ infoData.gatheringName }}
+    </el-form-item>
+    <el-form-item label="转账金额：">
+      <strong>
+        {{ infoData.price }}
+      </strong>
+    </el-form-item>
+    <el-form-item label="支付密码：" prop="password">
+      <el-input v-model="form.password" type="password" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" :loading="loading" @click="handleSubmit"
+        >提交</el-button
+      >
+      <el-button @click="handlePrev">上一步</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  props: {
+    infoData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        password: "123456",
+      },
+      rules: {
+        password: [
+          { required: true, message: "请输入支付密码", trigger: "blur" },
+        ],
+      },
+      loading: false,
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          setTimeout(() => {
+            this.$emit("change-step", 3);
+            this.loading = false;
+          }, 2000);
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+    handlePrev() {
+      this.$emit("change-step", 1);
+    },
+  },
+};
+</script>
diff --git a/src/views/mall/pay/components/Step3.vue b/src/views/mall/pay/components/Step3.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+    <el-form-item label-width="0">
+      <byui-icon
+        style="font-size: 30px; color: green; text-align: center;"
+        :icon="['fas', 'check-circle']"
+      ></byui-icon>
+    </el-form-item>
+    <el-form-item label="付款账户：">
+      {{ infoData.payAccount }}
+    </el-form-item>
+    <el-form-item label="收款账户：">
+      {{ infoData.gatheringAccount }}
+    </el-form-item>
+    <el-form-item label="收款人姓名：">
+      {{ infoData.gatheringName }}
+    </el-form-item>
+    <el-form-item label="转账金额：">
+      <strong>
+        {{ infoData.price }}
+      </strong>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="handlePrev">再转一笔</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  props: {
+    infoData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        password: "123456",
+      },
+      rules: {
+        password: [
+          { required: true, message: "请输入支付密码", trigger: "blur" },
+        ],
+      },
+      loading: false,
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          setTimeout(() => {
+            this.$emit("change-step", 3);
+            this.loading = false;
+          }, 2000);
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+    handlePrev() {
+      this.$emit("change-step", 1);
+    },
+  },
+};
+</script>
diff --git a/src/views/mall/pay/index.vue b/src/views/mall/pay/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="pay-container">
+    <el-row :gutter="15">
+      <el-col
+        :xs="24"
+        :sm="{ span: 20, offset: 2 }"
+        :md="{ span: 20, offset: 2 }"
+        :lg="{ span: 14, offset: 5 }"
+        :xl="{ span: 12, offset: 6 }"
+      >
+        <el-steps :space="200" :active="active" align-center class="steps">
+          <el-step title="填写转账信息"></el-step>
+          <el-step title="确认转账信息"></el-step>
+          <el-step title="完成"></el-step>
+        </el-steps>
+        <step1 v-if="active === 1" @change-step="handleSetStep"></step1>
+        <step2
+          v-if="active === 2"
+          :info-data="form"
+          @change-step="handleSetStep"
+        ></step2>
+        <step3
+          v-if="active === 3"
+          :info-data="form"
+          @change-step="handleSetStep"
+        ></step3>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Step1 from "./components/Step1";
+import Step2 from "./components/Step2";
+import Step3 from "./components/Step3";
+export default {
+  name: "Pay",
+  components: { Step1, Step2, Step3 },
+  data() {
+    return {
+      active: 1,
+      form: {},
+    };
+  },
+  methods: {
+    handleSetStep(active, form) {
+      this.active = active;
+      if (form) this.form = Object.assign(this.form, form);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.pay-container {
+  .steps {
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+}
+</style>