新增商品信息页面

src/views/myOrder/goodsInfo.vue

 <template>
   <div class="goods-info">
     <div class="order-sum">
-          <div class="sum-number"></div>
+      <div class="sum-number">总订单数:</div>
+      <div class="sum-number-detail">480件</div>
+      <div class="sum-amount">总金额:</div>
+      <div class="sum-account"><span>￥</span>2,900.00</div>
+    </div>
+    <div class="goods-info-details">
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <goods-info-detail
+            v-for="(item, index) in goodsInfos"
+            :key="index"
+            :title="item"
+          ></goods-info-detail>
+        </van-list>
+      </van-pull-refresh>
     </div>
   </div>
 </template>
 
 
 <script>
+import goodsInfoDetail from "../myOrder/goodsInfoDetail";
 export default {
   name: "goodsInfo",
+  components: {
+    goodsInfoDetail,
+  },
   data() {
     return {
+      goodsInfos: [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        25,
+        26,
+        27,
+        28,
+        29,
+        30
+      ],
+      loading: false,
+      finished: false,
+    //   error: false,
+      refreshing: false,
       icons: {
-        inDelivery: require('@/assets/img/u546.svg'),
-        copy: require('@/assets/img/u533.svg')
-      }
+        inDelivery: require("@/assets/img/u546.svg"),
+        copy: require("@/assets/img/u533.svg"),
+      },
     };
   },
+  methods: {
+    onLoad() {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+           if (this.refreshing) {
+          this.list = [];
+          this.refreshing = false;
+        }
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + 1);
+        }
+
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.list.length >= 20) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
+     onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = false;
+      this.onLoad();
+    },
+  },
   mounted() {
     // 设置标题栏关闭返回按钮
     this.$store.commit("setNavBar", {
@@ -26,8 +117,8 @@ export default {
       rightIcon: false,
       title: "",
       leftText: "商品详情",
-      leftClick: null,
-      rightClick: null,
+      leftClick: {},
+      rightClick: {},
     });
   },
 };
@@ -35,4 +126,39 @@ export default {
 
 
 <style scoped lang="scss">
+.goods-info {
+  height: 100%;
+  .order-sum {
+    font-size: 14px;
+    font-weight: 700;
+    display: flex;
+    padding: 15px 20px;
+    color: #666;
+    .sum-number-detail {
+      padding-left: 10px;
+    }
+    .sum-number-detail {
+      padding-right: 25px;
+    }
+    .sum-account {
+      padding-left: 10px;
+      font-size: 16px;
+      line-height: 18px;
+      color: #555;
+      span {
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+  .goods-info-details {
+    background-color: white;
+    width: 92%;
+    height: calc(100vh - 96px);
+    margin: 0 auto;
+    border-radius: 5px;
+    overflow: scroll;
+    padding-left: 10px;
+  }
+}
 </style>
\ No newline at end of file

src/views/myOrder/goodsInfoDetail.vue

+<template>
+  <div class="goods-info-detail">
+    <div class="company">
+      <div v-for="(item, index) in companys" :key="index" class="item-total">
+        <div class="item-header">
+          <div class="item-name">{{ item.name }}</div>
+          <div class="cold">冷</div>
+        </div>
+        <div class="item-image-title">
+          <img :src="item.icons" alt="" class="item-image" />
+          <div class="item-title">{{ item.title }}</div>
+        </div>
+        <div class="item-currency-amount">
+          <div class="item-currency">{{ item.currency }}</div>
+          <div class="item-amount">{{ item.amount }}</div>
+          <div class="item-packages">{{ item.packages }}<span>{{item.packagesNumber}}</span></div>
+        </div>
+        <div class="item-orders-deliveries">
+          <div class="item-orders">{{ item.orders }}<span>{{item.orderNumber}}</span></div>
+          <div class="item-deliveris">{{ item.deliveries }}<span>{{item.deliveriesNumber}}</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "goodsInfoDetail",
+  data() {
+    return {
+      companys: [
+        {
+          name: "上药控股新药分公司",
+          icons: require("@/assets/img/u47.svg"),
+          title: "【132521】阿西匹林/0.25g*200s/浙江.....",
+          currency: "￥",
+          amount: "10.5",
+          packages: "包装数:",
+          packagesNumber:"8件/箱",
+          orders: "订单数:",
+          orderNumber:"80件",
+          deliveries: "配送数:",
+          deliveriesNumber:"80件"
+        },
+      ],
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.goods-info-detail {
+  width: 100%;
+  // border-bottom: 1px solid #000;
+  .company {
+    border-bottom: 1px solid #eee;
+    .item-total {
+      // margin-top: 10px;
+      .item-name {
+        font-size: 14px;
+        font-weight: 700;
+        padding-top: 30px;
+      }
+    }
+  }
+}
+.item-header {
+  display: flex;
+}
+.cold {
+  // display: inline-block;
+  font-size: 14px;
+  //   font-weight: 700;
+  width: 35px;
+  height: 20px;
+  border: 2px solid #4b7902;
+  color: #4b7902;
+  text-align: center;
+  border-radius: 10px;
+  line-height: 15px;
+  margin-top: 30px;
+  margin-left: 20px;
+}
+.item-image-title {
+  display: flex;
+  padding-top: 10px;
+  .item-image {
+    width: 25px;
+    height: 25px;
+  }
+  .item-title {
+    padding-left: 10px;
+  }
+}
+.item-currency-amount {
+  display: flex;
+  padding-left: 40px;
+  .item-amount {
+    color: red;
+    padding-left: 2px;
+  }
+  .item-packages {
+    margin-left: 140px;
+    span{
+        margin-left: 10px;
+    }
+  }
+}
+.item-orders{
+    span{
+        margin-left: 10px;
+    }
+    
+}
+.item-orders-deliveries{
+    display: flex;
+    padding-left: 40px;
+    margin: 15px 0 20px 0;
+    .item-deliveris{
+    margin-left: 105px;
+    span{
+    margin-left: 10px;
+
+    }
+
+    }
+
+}
+</style>
\ No newline at end of file