订单

src/main/nine-space/src/components/order/OrderInfo.vue

@@ -0,0 +1,170 @@
+<template>
+  <router-link
+    :to="{
+      path: '/orderDetail',
+      query: {
+        id: info.id,
+      },
+    }"
+    class="orderInfo"
+    @click="click"
+  >
+    <div class="order-top">
+      <span>{{ info.minter }}</span>
+      <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
+    </div>
+    <div class="order">
+      <van-image
+        :radius="6"
+        width="74"
+        height="104"
+        :src="getImg(info.pic)"
+        fit="cover"
+      />
+
+      <div class="content">
+        <div class="name van-multi-ellipsis--l2">
+          {{ info.name }}
+        </div>
+        <div class="text">编号:{{ info.collectionId }}</div>
+        <div class="flex1"></div>
+        <div class="price">¥{{ info.price }}</div>
+      </div>
+    </div>
+    <div class="total-price">
+      <span>实际支付</span>
+      <span>¥{{ info.totalPrice }}</span>
+    </div>
+
+    <div class="btns">
+      <van-button color="#939599" @click.prevent="" plain size="mini" round>
+        删除订单
+      </van-button>
+    </div>
+  </router-link>
+</template>
+
+<script>
+import order from "../../mixins/order";
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  setup() {
+    const click = function () {
+      console.log("wyt6w");
+    };
+
+    return { click };
+  },
+  mixins: [order],
+  methods: {
+    likeProduct() {
+      if (!this.info.liked) {
+        this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+          this.$emit("update:info", {
+            ...this.info,
+            liked: true,
+            likes: this.info.likes + 1,
+          });
+          this.$toast.success("收藏成功");
+        });
+      } else {
+        this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+          this.$emit("update:info", {
+            ...this.info,
+            liked: false,
+            likes: this.info.likes - 1,
+          });
+          this.$toast.success("取消收藏");
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.orderInfo {
+  background: #181818;
+  border-radius: 12px;
+  color: #fff;
+  padding: 16px 10px 0;
+  margin: 20px 16px 0;
+  display: block;
+}
+
+.order-top {
+  display: flex;
+  justify-content: space-between;
+  span {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 22px;
+  }
+
+  .status {
+    color: @prim;
+  }
+}
+
+.order {
+  display: flex;
+  padding: 16px 0;
+  .van-image {
+    flex-shrink: 0;
+  }
+  .content {
+    flex-grow: 1;
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 22px;
+    }
+    .text {
+      font-size: 14px;
+      color: #939599;
+      line-height: 24px;
+      margin-top: 4px;
+    }
+
+    .price {
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 24px;
+    }
+  }
+}
+.total-price {
+  font-size: 14px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 60px;
+  text-align: right;
+  span {
+    &:last-child {
+      color: @prim;
+      margin-left: 10px;
+      font-size: 16px;
+    }
+  }
+}
+.btns {
+  border-top: 1px solid #202122;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: row-reverse;
+  .van-button {
+    padding: 3px 17px;
+  }
+}
+</style>

src/main/nine-space/src/mixins/common.js

@@ -94,5 +94,12 @@ export default {
         return Promise.reject();
       }
     },
+    getLabelName(val = "", list = []) {
+      let info = list.find((item) => {
+        return item.value === val;
+      });
+
+      return info ? info.label : "";
+    },
   },
 };

src/main/nine-space/src/mixins/order.js

@@ -0,0 +1,16 @@
+export default {
+  data() {
+    return {
+      statusOptions: [
+        { label: "未支付", value: "NOT_PAID" },
+        { label: "交易中", value: "PROCESSING" },
+        { label: "已完成", value: "FINISH" },
+        { label: "已取消", value: "CANCELLED" },
+      ],
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "支付宝", value: "ALIPAY" },
+      ],
+    };
+  },
+};

src/main/nine-space/src/router/index.js

@@ -114,6 +114,22 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/orders",
+    name: "orders",
+    component: () => import("../views/order/Orders.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
+  {
+    path: "/orderDetail",
+    name: "orderDetail",
+    component: () => import("../views/order/Detail.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
 ];
 
 const router = createRouter({
@@ -122,6 +138,23 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
+  if (/^\/http/.test(to.path)) {
+    let url = to.path.replace("/", "");
+    let params = [];
+    if (to.query) {
+      for (let key in to.query) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (to.query.hasOwnProperty(key)) {
+          params.push(`${key}=${to.query[key]}`);
+        }
+      }
+    }
+    if (params.length > 0) {
+      url += `?${params.join("&")}`;
+    }
+    window.open(url);
+    return;
+  }
   if (!store.state.userInfo && to.meta.pageType !== Page.Login) {
     store
       .dispatch("getUserInfo")

src/main/nine-space/src/views/Mine.vue

@@ -35,11 +35,11 @@
 
         <div class="btns">
           <div class="collect">
-            <div class="text1">2111</div>
+            <div class="text1">{{ userInfo.follows }}</div>
             <div class="text2">关注</div>
           </div>
           <div class="collect">
-            <div class="text1">2111</div>
+            <div class="text1">{{ userInfo.followers }}</div>
             <div class="text2">粉丝</div>
           </div>
           <div class="flex1"></div>
@@ -85,18 +85,19 @@
       :border="false"
       is-link
       value="查看全部"
+      :to="{ path: '/orders' }"
     />
-    <van-grid :border="false" :gutter="10">
+    <van-grid column-num="3" :border="false" :gutter="10">
       <van-grid-item text="全部订单" :border="false">
         <template v-slot:icon>
           <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
         </template>
       </van-grid-item>
-      <van-grid-item text="待支付" :border="false">
+      <!-- <van-grid-item text="待支付" :border="false">
         <template v-slot:icon>
           <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
         </template>
-      </van-grid-item>
+      </van-grid-item> -->
       <van-grid-item text="交易中" :border="false">
         <template v-slot:icon>
           <img

src/main/nine-space/src/views/Submit.vue

@@ -133,7 +133,14 @@ export default {
       this.$http
         .post("/order/create?collectionId=" + this.$route.query.id + "&qty=1")
         .then((res) => {
-          this.$router.replace(this.$baseUrl + "/payOrder/alipay?id=" + res.id);
+          document.location.replace(
+            this.$baseUrl + "/payOrder/alipay?id=" + res.id
+          );
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
         });
     },
   },

src/main/nine-space/src/views/order/Detail.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="order">
+    <div class="order-top">
+      <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
+      <div class="text2">
+        {{
+          info.status === "FINISH"
+            ? "交易成功啦！交易后的藏品将在您的柜子中展"
+            : "支付成功，等待平台确认交易"
+        }}
+      </div>
+    </div>
+    <driver />
+    <div class="product">
+      <div class="product-name">{{ info.minter }}</div>
+      <div class="product-info">
+        <van-image
+          :radius="6"
+          width="74"
+          height="104"
+          :src="getImg(info.pic)"
+          fit="cover"
+        />
+        <div class="product-content">
+          <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
+          <div class="text2">编号:{{ info.collectionId }}</div>
+          <div class="flex1"></div>
+          <div class="price">¥{{ info.price }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import order from "../../mixins/order";
+export default {
+  name: "detail",
+  data() {
+    return {
+      info: {},
+    };
+  },
+  mixins: [order],
+  mounted() {
+    this.$http.get("/order/get/" + this.$route.query.id).then((res) => {
+      this.info = res;
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.order-top {
+  padding: 26px 16px 20px;
+  .text1 {
+    font-size: 24px;
+    font-weight: bold;
+    color: @prim;
+    line-height: 34px;
+  }
+  .text2 {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 24px;
+  }
+}
+</style>

src/main/nine-space/src/views/order/Orders.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="discover">
+    <van-sticky ref="top" @change="change">
+      <div class="top">
+        <div class="top-btn">
+          <div
+            class="btn"
+            :class="{ active: active === 'explore' }"
+            @click="changeActive('explore')"
+          >
+            商品订单
+          </div>
+          <div
+            class="btn"
+            :class="{ active: active === 'creator' }"
+            @click="changeActive('creator')"
+          >
+            盲盒订单
+          </div>
+        </div>
+        <div class="search">
+          <img src="../../assets/svgs/search.svg" alt="" />
+        </div>
+      </div>
+
+      <van-tabs
+        v-model:active="type"
+        line-width="16"
+        line-height="2"
+        @click="changeStatus"
+      >
+        <van-tab
+          v-for="(item, index) in tabs"
+          :key="index"
+          :title="item.name"
+          :name="item.status"
+        ></van-tab>
+      </van-tabs>
+    </van-sticky>
+
+    <div class="list">
+      <order-info v-for="item in list" :key="item.id" :info="item"></order-info>
+    </div>
+  </div>
+</template>
+
+<script>
+import OrderInfo from "../../components/order/OrderInfo.vue";
+export default {
+  name: "discover",
+  inject: ["bs"],
+  components: {
+    OrderInfo,
+  },
+  data() {
+    return {
+      active: "explore",
+      stiky: null,
+      type: "PROCESSING,FINISH",
+      list: [],
+      tabs: [
+        {
+          status: "PROCESSING,FINISH",
+          name: "全部",
+        },
+        {
+          status: "PROCESSING",
+          name: "交易中",
+        },
+        {
+          status: "FINISH",
+          name: "已完成",
+        },
+      ],
+    };
+  },
+  beforeUnmount() {
+    if (this.stiky.parentNode.nodeName == "BODY") {
+      this.$nextTick(() => {
+        document.body.removeChild(this.stiky);
+      });
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.stiky = this.$refs.top.$el.childNodes[0];
+    });
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.$http
+        .post(
+          "/order/all",
+          {
+            size: 20,
+            query: {
+              userId: this.$store.state.userInfo.id,
+              status: this.type,
+            },
+            sort: "createdAt,desc",
+          },
+          { body: "json" }
+        )
+        .then((res) => {
+          this.list = res.content;
+          console.log(this.bs);
+          setTimeout(() => {
+            this.bs.value.refresh();
+          }, 500);
+        });
+    },
+    changeStatus(name) {
+      this.getList();
+    },
+    change(isFixed) {
+      if (isFixed) {
+        this.$nextTick(() => {
+          document.body.appendChild(this.stiky);
+        });
+      } else {
+        this.$refs.top.$el.appendChild(this.stiky);
+      }
+    },
+    changeActive(active) {
+      this.active = active;
+      this.$nextTick(() => {
+        this.bs.value.scrollTo(0, 0);
+        this.bs.value.refresh();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  display: flex;
+  padding: 10px 16px;
+  background-color: @bg;
+  border-bottom: 1px solid #202122;
+  .top-btn {
+    flex-grow: 1;
+    .btn {
+      font-size: 16px;
+      line-height: 26px;
+      display: inline-block;
+      vertical-align: text-bottom;
+
+      &.active {
+        color: @prim;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 30px;
+      }
+    }
+
+    .btn + .btn {
+      margin-left: 30px;
+    }
+  }
+}
+
+.discover {
+  background-color: @bg3;
+}
+
+.grid-img {
+  display: block;
+}
+.van-grid {
+  margin-top: 12px;
+}
+/deep/ .van-grid-item__content {
+  padding: 14px 20px 16px;
+}
+/deep/ .van-grid-item__text {
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+.title {
+  padding: 16px 20px 8px;
+  color: @prim;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.box-list {
+  // display: flex;
+  // flex-wrap: wrap;
+  padding: 0 8px;
+}
+
+.discover {
+  padding-bottom: 50px;
+}
+
+/deep/.van-tab {
+  color: #fff;
+  flex: 0;
+  padding: 20px;
+  flex-shrink: 0;
+  min-width: 100px;
+
+  &.van-tab--active {
+    color: @prim;
+  }
+}
+
+/deep/ .van-tabs__line {
+  bottom: 20px;
+}
+</style>