超市积分订单补齐

src/apps/AppCreditPoints/AppIntegralOrder.vue

@@ -0,0 +1,205 @@
+<template>
+  <section class="AppIntegralOrder">
+    <AiTopFixed>
+      <u-search v-model="search" @change="current=1,getList()" clearable :show-action="false" placeholder="搜索订单编号"/>
+    </AiTopFixed>
+    <div class="card" v-for="row in list" :key="row.id">
+      <div class="header bottomBorder" flex>
+        <u-icon name="bag-fill"/>
+        <div class="fill">订单编号：{{ row.orderCode }}</div>
+        <AiDict dict="integralOrderStatus" :value="row.orderStatus"/>
+      </div>
+      <div class="merchandise bottomBorder" v-for="item in row.merchandiseList" :key="item.id" flex>
+        <img :src="item.photo"/>
+        <div class="fill info">
+          <b class="merchandiseName" v-text="item.merchandiseName"/>
+          <div class="baseline" flex>
+            <div class="color-999 fill">x{{ item.merchandiseNumber }}</div>
+            <div class="integral baseline" flex>
+              <b v-text="item.costIntegral"/>
+              积分
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="createUserName" flex>
+        <u-icon name="red-packet-fill"/>
+        <div class="fill">兑换人：{{ row.createUserName }}</div>
+        <div v-text="row.createTime"/>
+      </div>
+      <div v-if="row.orderStatus==0" flex class="flexEnd">
+        <div class="btn" @click="handleCancel(row.id)">取消订单</div>
+        <div class="btn confirm" @click="handleConfirm(row.id)">确认兑换</div>
+      </div>
+      <u-gap height="1"/>
+    </div>
+    <AiEmpty v-if="!list.length"/>
+  </section>
+</template>
+
+<script>
+import AiTopFixed from "../../components/AiTopFixed";
+import AiEmpty from "../../components/AiEmpty";
+import AiDict from "../../components/AiDict";
+
+export default {
+  name: "AppIntegralOrder",
+  components: {AiDict, AiEmpty, AiTopFixed},
+  appName: "积分超市订单",
+  data() {
+    return {search: "", current: 1, list: [], pages: 0}
+  },
+  methods: {
+    getList() {
+      let {current, search, pages} = this
+      if ((!pages && current == 1) || current <= pages) {
+        this.$http.post("/app/appvillagerintegralshoporder/list", null, {
+          params: {current, name: search}
+        }).then(res => {
+          if (res?.data) {
+            res.data.records?.map(e => {
+              e.merchandiseList?.map(m => {
+                m.photo = JSON.parse(m.merchandisePhoto)?.[0]?.url || "https://cdn.cunwuyun.cn/dvcp/h5/AppIntegralOrder/merchandise.png"
+              })
+            })
+            this.list = [current == 1 ? [] : this.list, res.data.records].flat()
+            this.pages = res.data.pages
+          }
+        })
+      }
+    },
+    handleConfirm(orderId) {
+      this.$confirm("是否要确认兑换?").then(() => {
+        this.$http.post("/app/appvillagerintegralshoporder/confirmExchange", null, {
+          params: {orderId}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("提交成功!")
+            this.current = 1
+            this.getList()
+          }
+        })
+      }).catch(() => 0)
+    },
+    handleCancel(orderId) {
+      this.$confirm("是否要取消订单?").then(() => {
+        this.$http.post("/app/appvillagerintegralshoporder/overOrder", null, {
+          params: {orderId}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("提交成功!")
+            this.current = 1
+            this.getList()
+          }
+        })
+      }).catch(() => 0)
+    }
+  },
+  created() {
+    this.$dict.load('integralOrderStatus')
+    this.getList()
+  },
+  onReachBottom() {
+    this.current++
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppIntegralOrder {
+  min-height: 100vh;
+  padding-bottom: 80px;
+  box-sizing: border-box;
+
+  .bottomBorder {
+    border-bottom: 2px solid #ddd;
+  }
+
+  ::v-deep.card {
+    background: #fff;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    margin: 32px 32px 0;
+    font-family: PingFangSC-Medium, PingFang SC;
+
+    .header {
+      line-height: 104px;
+      padding: 0 32px;
+
+      & > .fill {
+        margin: 0 8px;
+      }
+    }
+
+    .baseline {
+      align-items: baseline;
+    }
+
+    .flexEnd {
+      justify-content: flex-end;
+      padding: 18px 20px 46px;
+    }
+
+    .merchandise {
+      margin: 0 32px;
+      padding: 32px 0;
+
+      & > img {
+        height: 176px;
+        width: 176px;
+        margin-right: 16px;
+      }
+
+      .info {
+        align-self: stretch;
+      }
+
+      .merchandiseName {
+        font-size: 28px;
+        display: block;
+        height: calc(100% - 60px);
+      }
+
+      .integral {
+        color: #FF6900;
+
+        & > b {
+          font-size: 44px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .createUserName {
+      background: #F9FAFB;
+      border-radius: 6px;
+      padding: 0 16px;
+      margin: 32px 16px;
+      height: 70px;
+
+      & > .fill {
+        margin: 0 8px;
+      }
+    }
+
+    .btn {
+      border-radius: 52px;
+      border: 2px solid #DDDDDD;
+      padding: 0 32px;
+      line-height: 64px;
+      font-size: 28px;
+
+      &.confirm {
+        background: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
+        color: #FFFFFF;
+        border-color: transparent;
+      }
+
+      & + .btn {
+        margin-left: 32px;
+      }
+    }
+  }
+}
+</style>

src/components/AiDict.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="AiDict" :style="{color:$dict.getColor(dict,value)}" v-text="$dict.getLabel(dict,value)"/>
+</template>
+
+<script>
+export default {
+  name: "AiDict",
+  props: {
+    value: {default: ""},
+    dict: {default: ""}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDict {
+}
+</style>

src/components/AiTopFixed.vue

@@ -55,6 +55,10 @@ export default {
     min-height: 100px;
     padding: 20px 32px;
     box-sizing: border-box;
+
+    *:last-child {
+      margin-bottom: 0 !important;
+    }
   }
 
   ::v-deep .u-search {