增加商城页面

components/ProductList.vue

@@ -0,0 +1,183 @@
+<template>
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+    <van-list
+      v-model="loading"
+      :finished="true"
+      finished-text="没有更多了~"
+      @load="onLoad"
+    >
+      <div class="shoplist">
+        <div class="list-item" v-for="item in list" :key="item.src">
+          <div class="list-item-left">
+            <img :src="item.waresPic" alt="" srcset="" />
+          </div>
+          <div class="list-item-right">
+            <div class="item-right-top">
+              <span class="info">
+                {{ item.waresName }}
+              </span>
+              {{ item.waresDetail }}
+            </div>
+            <div class="item-right-bottom">
+              <span class="price"><span class="icon"></span>40</span>
+              <span class="sold">已售 233</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+</template>
+
+<script>
+import Vue from "vue";
+import { PullRefresh, List } from "vant";
+
+Vue.use(PullRefresh);
+Vue.use(List);
+
+export default {
+  head() {
+    return {
+      title: "订单页",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, //加载状态
+      finished: false, //是否完成加载
+      refreshing: false, //是否正在上拉刷新
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    this.onLoad();
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    onLoad() {
+      var that = this;
+      that.$axios
+        .get("/getIntegralWaresInfoList", {
+          params: {
+            stationId: "1",
+          },
+        })
+        .then((res) => {
+          console.log(res);
+          if (res.data.retCode == 0) {
+            that.list = res.data.data; //追加数据
+            // 加载状态结束
+            that.loading = false;
+            that.finished = true;
+            console.log(that.list);
+          }
+        });
+    },
+    onRefresh() {
+      // 清空列表数据
+      that.finished = true;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      that.loading = true;
+      that.onLoad();
+    },
+  },
+};
+</script>
+
+<style scope>
+.shoplist {
+  width: 92vw;
+}
+
+.shoplist .list-item {
+  display: flex;
+  margin-top: 30px;
+  width: 92vw;
+  height: 28.5vw;
+}
+.shoplist .list-item .list-item-left {
+  width: 28.5vw;
+  height: 28.5vw;
+  border: 0.26vw solid #eeeeee;
+  flex-shrink: 0;
+}
+.shoplist .list-item .list-item-left img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  border-radius: 3vw;
+}
+.shoplist .list-item .list-item-right {
+  margin-left: 3vw;
+  width: 60.5vw;
+  color: red;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  font-size: 4.266vw;
+  font-weight: 400;
+  color: #111111;
+  line-height: 6vw;
+  height: 28.5vw;
+}
+.shoplist .list-item .list-item-right .item-right-top {
+  flex-shrink: 0;
+  word-break: break-all;
+  width: 4.53rem;
+  height: 1.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.45rem;
+}
+
+.shoplist .list-item .list-item-right .item-right-top .info {
+  font-weight: 500;
+}
+
+.shoplist .list-item .list-item-right .item-right-bottom {
+  width: 4.53rem;
+  height: 0.9rem;
+  position: relative;
+}
+.shoplist .list-item .list-item-right .item-right-bottom .price {
+  font-size: 0.4rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #fe9700;
+  line-height: 0.56rem;
+  position: absolute;
+  left: 0.1rem;
+  bottom: 0rem;
+}
+.shoplist .list-item .list-item-right .item-right-bottom .price .icon {
+  display: inline-block;
+  width: 0.3rem;
+  height: 0.3rem;
+  background: url("../static/common/a01_jifen@2x.png") no-repeat;
+  background-size: cover;
+  margin-right: 0.1rem;
+}
+.shoplist .list-item .list-item-right .item-right-bottom .sold {
+  width: 1.16rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #bcbcbc;
+  line-height: 0.4rem;
+  position: absolute;
+  right: 0.1rem;
+  bottom: 0.03rem;
+}
+</style>

pages/common/ProductList.vue

@@ -1,144 +0,0 @@
-<template>
-  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <van-list
-        v-model="loading"
-        :finished="true"
-        finished-text="没有更多了~"
-        @load="onLoad"
-      >
-        <div class="list">
-          <div class="list-item" v-for="item in list" :key="item.src">
-            <div class="list-item-left">
-              <img :src="item.waresPic" alt="" srcset="" />
-            </div>
-            <div class="list-item-right">
-              <div class="item-right-top">
-               {{ item.waresDetail }} 
-              </div>
-              <div class="item-right-bottom">
-                {{ item.waresName }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </van-list>
-    </van-pull-refresh>
-</template>
-
-<script>
-import Vue from "vue";
-import {
-  PullRefresh,
-  List,
-} from "vant";
-
-Vue.use(PullRefresh);
-Vue.use(List)
-
-export default {
-  head() {
-    return {
-      title: "订单页",
-    };
-  },
-  data() {
-    return {
-      images: [],
-      list: [],
-      loading: false, //加载状态
-      finished: false, //是否完成加载
-      refreshing: false, //是否正在上拉刷新
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.onLoad();
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    onLoad() {
-      var that = this;
-      that.$axios
-        .get("/getIntegralWaresInfoList", {
-          params: {
-            stationId: "1",
-          },
-        })
-        .then((res) => {
-          console.log(res)
-          if (res.data.retCode == 0) {
-            that.list = res.data.data; //追加数据
-            // 加载状态结束
-            that.loading = false;
-            that.finished = true;
-            console.log(that.list);
-          }
-        });
-    },
-    onRefresh() {
-      // 清空列表数据
-      that.finished = true;
-      // 重新加载数据
-      // 将 loading 设置为 true，表示处于加载状态
-      that.loading = true;
-      that.onLoad();
-    },
-  },
-};
-</script>
-
-<style scope>
-.list {
-  width: 92vw;
-}
-.list .list-item {
-  display: flex;
-  margin-top: 30px;
-  width: 92vw;
-  height: 28.5vw;
-}
-.list .list-item .list-item-left {
-  width: 28.5vw;
-  height: 28.5vw;
-  border: 0.26vw solid #eeeeee;
-  flex-shrink: 0;
-}
-.list .list-item .list-item-left img {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  border-radius: 3vw;
-}
-.list .list-item .list-item-right {
-  margin-left: 3vw;
-  width: 60.5vw;
-  color: red;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  font-size: 4.266vw;
-  font-weight: 400;
-  color: #111111;
-  line-height: 6vw;
-  height: 28.5vw;
-}
-.list .list-item .list-item-right .item-right-top {
-  width: 60.5vw;
-  height: 12vm;
-  flex-shrink: 0;
-  word-break:break-all;
-  height:20vw
-}
-
-.list .list-item .list-item-right .item-right-top{
-  width: 60.5vw;
-  height: 12vm;
-  flex-shrink: 0;
-}
-
-</style>

pages/point/detail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="outer">
+  <div class="point-detail">
     <div class="good">
       <img :src="img" alt="" srcset="" />
     </div>
@@ -8,14 +8,22 @@
       <div class="price">￥<span class="amount">99.00</span></div>
       <div class="sold">已售223</div>
     </div>
-    <div class="selected">2</div>
-    <div class="text">4</div>
-    <div class="buy">5</div>
+    <div class="selected">
+      <div class="text">已选</div>
+      <div class="content">儿童情商课+智慧课堂,1</div>
+      <div class="icon"></div>
+    </div>
+    <div class="pictures">
+      <div class="text">- 图文详情 -</div>
+    </div>
+    <div class="buy">
+      <button class="buy">立刻购买</button>
+    </div>
   </div>
 </template>
 
 <script>
-import ProductList from "../common/ProductList";
+import ProductList from "../../components/ProductList";
 export default {
   head() {
     return {
@@ -50,41 +58,45 @@ export default {
 </script>
 
 <style>
-.outer {
+.point-detail {
   display: flex;
   width: 100vw;
   flex-direction: column;
   box-sizing: border-box;
+  background: #f8f8f8;
 }
-.outer .good {
+.point-detail .good {
   box-sizing: border-box;
   width: 100vw;
   height: 100vw;
   padding: 15vw;
   background: #ffffff;
 }
-.outer .good img {
+.point-detail .good img {
   width: 100%;
   height: 100%;
 }
-.outer .title {
+.point-detail .title {
   width: 100%;
   height: 26.66vw;
   padding: 4vw;
+  background: #ffffff;
   position: relative;
   box-sizing: border-box;
 }
-.outer .title .text {
-  height: 0.5rem;
+.point-detail .title .text {
   width: 3.6rem;
+  height: 0.5rem;
   font-size: 0.36rem;
   font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
+  font-weight: 800;
   color: #111111;
   line-height: 0.5rem;
+  position: absolute;
+  left: 0.3rem;
+  top: 0.3rem;
 }
-
-.outer .title .price {
+.point-detail .title .price {
   width: 1.34rem;
   height: 0.7rem;
   font-size: 0.28rem;
@@ -92,9 +104,106 @@ export default {
   font-weight: 600;
   color: #fe9700;
   line-height: 0.7rem;
+  position: absolute;
+  left: 0.57rem;
+  bottom: 0.27rem;
 }
-.outer .title .price .amount{
-  font-size: 0.50rem;
+.point-detail .title .price .amount {
+  font-size: 0.5rem;
+}
+.point-detail .title .sold {
+  width: 1.07rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  line-height: 0.4rem;
+  position: absolute;
+  right: 0.45rem;
+  bottom: 0.3rem;
+}
+.point-detail .selected {
+  width: 100%;
+  height: 1.1rem;
+  background: #ffffff;
+  margin-top: 0.2rem;
+  position: relative;
+}
+.point-detail .selected .text {
+  width: 0.56rem;
+  height: 1.1rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 1.1rem;
+  position: absolute;
+  left: 0.31rem;
+  top: 0rem;
+}
+.point-detail .selected .content {
+  width: 3.09rem;
+  height: 1.1rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 500;
+  color: #111111;
+  line-height: 1.1rem;
+  position: absolute;
+  left: 1.17rem;
+}
+.point-detail .selected .icon {
+  width: 0.42rem;
+  height: 0.1rem;
+  background: url("../../static/point/6_d02_more.png") no-repeat 0px 0px;
+  background-size: cover;
+  position: absolute;
+  left: 6.3rem;
+  top: 0.49rem;
+}
+.point-detail .pictures {
+  width: 100%;
+  height: 3.2rem;
+  background: #ffffff;
+  margin-top:.21rem;
+  position: relative;
 }
 
+.point-detail .pictures .text {
+  width: 1.74rem;
+  height: 1.1rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 1.1rem;
+  position: absolute;
+  top:0rem;
+  left:2.88rem
+}
+.point-detail .buy {
+  position: fixed;
+  bottom: 0.83rem;
+  left: 0;
+  right: 0;
+  height: 100px;
+}
+
+.point-detail .buy button {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  display: block;
+  width: 6.9rem;
+  height: 0.8rem;
+  background: #fe9700;
+  border-radius: 0.45rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.4rem;
+  margin:0 auto;
+}
 </style>

pages/point/index.vue

@@ -29,19 +29,13 @@
       </div>
       <div class="show">
         <product-list/>
-        <!-- <div class="title">好物推荐</div>
-        <div class="content">
-          <div class="item">
-            <div>你好</div>
-          </div>
-        </div> -->
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProductList from "../common/ProductList"
+import ProductList from "../../components/ProductList"
 export default {
   head() {
     return {

pages/point/list.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import ProductList from "../common/ProductList"
+import ProductList from "../../components/ProductList"
 export default {
   head() {
     return {

pages/shop/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="shop-index">
     <van-search placeholder="请输入商品关键词" />
     <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
       <!-- <van-swipe-item v-for="(image, index) in images" :key="index">
@@ -10,39 +10,9 @@
       <van-swipe-item>3</van-swipe-item>
       <van-swipe-item>4</van-swipe-item>
     </van-swipe>
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <van-list
-        v-model="loading"
-        :finished="finished"
-        finished-text="没有更多了~"
-        @load="onLoad"
-      >
-        <!-- <van-card
-          :desc="item.waresDetail"
-          :title="item.waresName"
-          :thumb="item.waresPic"
-          centered
-          v-for="item in list"
-          :key="item.id"
-        >
-        </van-card> -->
-        <div class="list">
-          <div class="list-item" v-for="item in list" :key="item.src">
-            <div class="list-item-left">
-              <img :src="item.waresPic" alt="" srcset="" />
-            </div>
-            <div class="list-item-right">
-              <div class="item-right-top">
-               {{ item.waresDetail }} 
-              </div>
-              <div class="item-right-bottom">
-                {{ item.waresName }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </van-list>
-    </van-pull-refresh>
+          <div class="show">
+        <product-list/>
+      </div>
   </div>
 </template>
 
@@ -50,6 +20,7 @@
 <script type="text/javascript">
 import Vue from "vue";
 import axios from "axios";
+import ProductList from "../../components/ProductList"
 import {
   NavBar,
   Search,
@@ -87,6 +58,9 @@ export default {
       refreshing: false, //是否正在上拉刷新
     };
   },
+  components:{
+    ProductList
+  },
   beforeCreate() {},
   created() {},
   beforeMount() {},
@@ -127,10 +101,10 @@ export default {
 </script>
 
 <style scope>
-* {
+.shop-index * {
   box-sizing: border-box;
 }
-.my-swipe .van-swipe-item {
+.shop-index .my-swipe .van-swipe-item {
   color: #fff;
   font-size: 20px;
   line-height: 150px;
@@ -138,32 +112,32 @@ export default {
   background-color: #39a9ed;
   border-radius: 4vw;
 }
-.container {
+.shop-index {
   width: 92vw;
   margin: 0 auto;
 }
-.list {
+.shop-index .list {
   width: 92vw;
 }
-.list .list-item {
+.shop-index .list .list-item {
   display: flex;
   margin-top: 30px;
   width: 92vw;
   height: 28.5vw;
 }
-.list .list-item .list-item-left {
+.shop-index .list .list-item .list-item-left {
   width: 28.5vw;
   height: 28.5vw;
   border: 0.26vw solid #eeeeee;
   flex-shrink: 0;
 }
-.list .list-item .list-item-left img {
+.shop-index .list .list-item .list-item-left img {
   display: inline-block;
   width: 100%;
   height: 100%;
   border-radius: 3vw;
 }
-.list .list-item .list-item-right {
+.shop-index .list .list-item .list-item-right {
   margin-left: 3vw;
   width: 60.5vw;
   color: red;
@@ -176,7 +150,7 @@ export default {
   line-height: 6vw;
   height: 28.5vw;
 }
-.list .list-item .list-item-right .item-right-top {
+.shop-index .list .list-item .list-item-right .item-right-top {
   width: 60.5vw;
   height: 12vm;
   flex-shrink: 0;
@@ -184,7 +158,7 @@ export default {
   height:20vw
 }
 
-.list .list-item .list-item-right .item-right-top{
+.shop-index .list .list-item .list-item-right .item-right-top{
   width: 60.5vw;
   height: 12vm;
   flex-shrink: 0;