物流信息

src/views/bookStore/index.vue

@@ -148,6 +148,86 @@
         >
       </div>
     </div>
+    <div class="kefu-box logistics" @click="handleClickLogist">
+      <img
+        class="kefu-img"
+        src="../../assets/logistics.png"
+        style="width: 60px"
+      />
+      <span style="color: #333; font-weight: bold; font-size: 16px"
+        >点击查询物流</span
+      >
+    </div>
+    <el-dialog
+      :visible.sync="logisticsFlag"
+      :close-on-click-modal="false"
+      width="60%"
+      v-if="logisticsFlag"
+      title="物流信息查询"
+    >
+      <div class="logistics-dialog">
+        <div class="logistics-info-box">
+          <el-input
+            v-model="logisticsOrder"
+            placeholder="请输入订单号"
+            style="width: 350px"
+          ></el-input>
+          <el-input
+            v-model="logisticsCode"
+            placeholder="验证码"
+            style="width: 90px"
+          ></el-input>
+          <div class="verificationCode-img">
+            <img
+              v-if="verificationCodeimg && verificationCodeLoading"
+              :src="verificationCodeimg"
+              alt="图形验证码"
+              @click="getVerificationCodeimg"
+              title="点击刷新验证码"
+            />
+          </div>
+          <div>
+            <!-- <el-button @click="getVerificationCodeimg" size="small"
+            >刷新</el-button
+          > -->
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleLogistInfo"
+              :loading="logistLoading"
+              >查看物流信息</el-button
+            >
+          </div>
+        </div>
+        <div class="info-list" v-if="logisticsInfoList">
+          <p>
+            <label>订单号：</label><span>{{ logisticsOrder.trim() }}</span>
+          </p>
+          <ul v-for="(item, index) in logisticsInfoList" :key="index">
+            <li>
+              <label>商品名称：</label><span>{{ item.goods_name_desc }}</span>
+            </li>
+            <li>
+              <label>快递公司：</label><span>{{ item.logistics_company }}</span>
+            </li>
+            <li>
+              <label>快递单号：</label
+              ><span>{{ item.logistics_tracking_number }}</span>
+            </li>
+            <li>
+              <label>发货时间：</label><span>{{ item.send_time }}</span>
+            </li>
+          </ul>
+        </div>
+        <p
+          v-if="logisticsInfoList && logisticsInfoList.length === 0"
+          class="tips"
+          style="color: #ee1c24; font-weight: bold"
+        >
+          没有查询到物流信息!
+        </p>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -262,6 +342,14 @@ export default {
       officeFlag: window.localStorage.getItem("officialNotice") ? false : true,
       kefuShow: true, // 是否显示客服
       kefuCode: false, // 显示客服二维码
+      logisticsFlag: false, // 显示物流查询页面
+      verificationCodeimg: "", // 图形验证码
+      verificationCodeimgID: "", // 图形验证码ID
+      verificationCodeLoading: true, // 图形验证码的flag
+      logisticsOrder: "", // 物流订单号
+      logisticsCode: "", // 物流验证码
+      logistLoading: false,
+      logisticsInfoList: null,
     };
   },
   //计算属性 类似于data概念
@@ -362,6 +450,64 @@ export default {
       window.localStorage.setItem("officialNotice", true);
       this.officeFlag = false;
     },
+    // 点击查询物流按钮
+    handleClickLogist() {
+      this.logisticsFlag = true;
+      this.getVerificationCodeimg();
+    },
+    // 图形验证码
+    getVerificationCodeimg() {
+      if (!this.verificationCodeLoading) return;
+      this.verificationCodeLoading = false;
+      let MethodName = "/OrgServer/LoginControl/GetVerificationCodeImage";
+      let data = {};
+      getLogin(MethodName, data)
+        .then((res) => {
+          if (res) {
+            this.verificationCodeLoading = true;
+            this.verificationCodeimgID = res.image_id;
+            this.verificationCodeimg =
+              "data:image/jpeg;base64," + res.image_content_base64;
+          } else {
+            this.verificationCodeLoading = true;
+          }
+        })
+        .catch(() => {
+          this.verificationCodeLoading = true;
+        });
+    },
+    // 查询物流
+    handleLogistInfo() {
+      if (!this.logisticsOrder.trim()) {
+        this.$message.warning("请输入订单号");
+        return;
+      } else if (!this.logisticsCode.trim()) {
+        this.$message.warning("请输入验证码");
+        return;
+      }
+      this.logistLoading = true;
+      let MethodName =
+        "/ShopServer/Client/ShopHomeQuery/QueryJushuitanOrderLogisticsInfo";
+      let data = {
+        order_sn: this.logisticsOrder.trim(),
+        verification_code_image_text: this.logisticsCode.trim(),
+        verification_code_image_id: this.verificationCodeimgID,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          this.logistLoading = false;
+          this.logisticsInfoList = [];
+          if (res.status === 1) {
+            this.logisticsInfoList = res.logistics_info_list;
+          }
+          this.logisticsCode = "";
+          this.getVerificationCodeimg();
+        })
+        .catch(() => {
+          this.logistLoading = false;
+          this.getVerificationCodeimg();
+        });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -521,6 +667,56 @@ export default {
     line-height: 1.4;
   }
 }
+.logistics {
+  top: 450px;
+}
+:deep .logistics-dialog {
+  min-height: 400px;
+  .info-list {
+    > p {
+      color: #333333;
+    }
+    > ul {
+      padding: 5px 0 0 22px;
+      line-height: 1.5;
+      background: url("../../assets/kuaidi-icon.png") left 13px no-repeat;
+      background-size: 16px;
+      li {
+        margin: 5px 0;
+      }
+    }
+    label {
+      color: #898989;
+      font-weight: 500;
+    }
+    span {
+      color: #333333;
+      font-weight: 500;
+    }
+  }
+}
+:deep .logistics-info-box {
+  display: flex;
+  gap: 5px;
+  padding-bottom: 15px;
+
+  .verificationCode-img {
+    min-width: 85px;
+    height: 32px;
+    flex: initial;
+    background: #c5c5c5;
+    border-radius: 4px;
+    overflow: hidden;
+    > img {
+      height: 32px;
+      cursor: pointer;
+    }
+  }
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+}
 </style>
 <style lang="scss">
 .el-carousel__item--card {