快递单号兑换页面

src/router/index.js

@@ -173,6 +173,11 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/bookShelf/articleShareDetail.vue')
     },
+    {
+        path: '/scanRedeem',
+        component: () =>
+            import ('@/views/scanRedeem.vue')
+    },
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/', hidden: true }
 ]

src/views/scanRedeem.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="scanRedeem">
+    <div class="header">
+      <svg-icon icon-class="logos"></svg-icon>
+    </div>
+    <div class="first-step" v-if="flag">
+      <div class="content-box">
+        <p>快递单号：</p>
+        <el-input placeholder="请输入快递单号" v-model="trackingNumber">
+        </el-input>
+      </div>
+      <el-button
+        class="sure-btn"
+        type="primary"
+        size="medium"
+        @click="sureChange"
+        :loading="loading"
+        >兑 换</el-button
+      >
+    </div>
+    <div class="first-step" v-else>
+      <div class="content-box">
+        <p>绑定手机号：</p>
+        <el-input placeholder="请输入需要绑定的手机号" v-model="userPhone">
+        </el-input>
+      </div>
+      <el-button
+        class="sure-btn"
+        type="primary"
+        size="medium"
+        ref="button"
+        @click="surePhone"
+        :loading="loading"
+        >确 定</el-button
+      >
+    </div>
+
+    <p class="tips">温馨提示：</p>
+    <b class="tips-content">1. 请输入完整的快递单号，确定后绑定手机号。</b>
+    <b class="tips-content"
+      >2. 手机号绑定后自动注册为平台用户，并自动兑换商品。</b
+    >
+    <b class="tips-content"
+      >3. 请您在电脑端浏览器登录https://read.21stcentury.com.cn
+      平台至书架模块自行查看对应电子内容。</b
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: "scanRedeem",
+  components: {},
+  data() {
+    return {
+      trackingNumber: "", // 快递单号
+      keyCode: "", // 兑换码
+      userPhone: "", // 用户手机号
+      flag: true,
+      loading: false,
+    };
+  },
+  watch: {},
+  methods: {
+    // 点击兑换按钮
+    sureChange() {
+      if (this.trackingNumber && this.trackingNumber.trim()) {
+        this.flag = false;
+        this.userPhone = "13717583743";
+      } else {
+        this.$message.warning("请先输入快递单号");
+      }
+    },
+    // 点击确定按钮
+    surePhone() {
+      if (this.userPhone && this.userPhone.trim()) {
+        // this.loading = true;
+        this.$confirm(
+          "请您在电脑端浏览器登录https://read.21stcentury.com.cn平台至书架模块自行查看对应电子内容",
+          "兑换成功",
+          {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "success",
+            customClass: "scanRedeem-model",
+          }
+        ).then(({}) => {});
+      } else {
+        this.$message.warning("请输入需要绑定的手机号");
+      }
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.scanRedeem {
+  background: linear-gradient(180deg, #00adef, rgba(0, 173, 239, 0));
+  height: 100vh;
+  margin-top: -96px;
+  .header {
+    padding: 20px;
+    .svg-icon {
+      width: 286px;
+      height: 35px;
+    }
+  }
+  .first-step {
+    padding: 40px 20px 20px 20px;
+  }
+  .content-box {
+    // display: flex;
+    // align-items: center;
+
+    p {
+      font-size: 16px;
+      color: #fff;
+      word-break: keep-all;
+    }
+  }
+  .sure-btn {
+    width: 200px;
+    margin: 20px auto;
+    display: block;
+    height: 42px;
+    font-size: 16px;
+    border-radius: 4px;
+  }
+  .tips {
+    margin-top: 50px;
+    color: #ee1c24;
+    padding: 0 20px;
+  }
+  .tips-content {
+    display: block;
+    padding: 5px 20px;
+    word-break: break-all;
+    line-height: 1.3;
+  }
+  :deep .el-button--primary.is-active,
+  :deep .el-button--primary:active,
+  :deep .el-button--primary:hover {
+    background: #165dff;
+    border-color: #165dff;
+  }
+}
+</style>
+<style lang="scss">
+.scanRedeem-model {
+  max-width: 100%;
+}
+</style>