列表组件完成，价格组件封装

components/en-list/en-list.vue

@@ -2,7 +2,7 @@
   <view class="list">
     <Blank v-if="list.length<0"></Blank>
     <view class="scroll-view" v-else>
-      <scroll-view class="scroll-list" scroll-y="true" style="height: 100%;" @scrolltolower="onReachScollBottom">
+      <scroll-view class="scroll-list" scroll-y="true" style="height: 100%;" @scrolltolower="onReachScollBottom" :scroll-top="scrollTop"  @scroll="scroll">
         <slot name="listInfo" v-bind:pagingData="list"  ></slot>
         <view class="toMore" v-show="isAjax">加载中-----</view>
       </scroll-view>
@@ -19,6 +19,7 @@ export default {
   data() {
     return {
       list: [],
+      scrollTop: 0,
       page: 1,
       total: null,
       isAjax: false,
@@ -28,6 +29,9 @@ export default {
     this.getList()
   },
   methods: {
+    scroll: function(e) {
+      this.scrollTop = e.detail.scrollTop
+    },
     onReachScollBottom() {
       if (this.isAjax || this.list.length === this.total) {
         return

components/en-utils/en-price/en-price.vue

@@ -0,0 +1,60 @@
+<template>
+  <view>
+    <view class="item-price">
+      <text class="item-current-price">￥<text class="price-integer">{{ integer }}</text>.<text>{{ decimal }}</text></text>
+      <text class="item-original-price" v-show="originalPrice!==''">{{ originalPrice }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "en-price",
+  props: {
+    'currentPrice': {
+      default: ''
+    },
+    'originalPrice': {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      integer: 0,
+      decimal: 0,
+    }
+  },
+  mounted() {
+    if (this.currentPrice !== '') {
+      let currentPrice = this.currentPrice * 1
+      this.integer = Math.trunc(currentPrice)
+      currentPrice = (currentPrice.toFixed(2)) + ''
+      this.decimal = currentPrice.substring((currentPrice.length) - 2)
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.item-price {
+  .item-current-price {
+    color: #ED301D;
+    font-size: 24rpx;
+    text{
+      color: #ED301D;
+      font-size: 24rpx;
+    }
+    .price-integer{
+      font-size: 40rpx;
+    }
+  }
+
+  .item-original-price {
+    margin-left: 12rpx;
+    color: #999999;
+    font-size: 24rpx;
+    text-decoration: line-through;
+  }
+}
+</style>

pages.json

@@ -30,8 +30,8 @@
 	"condition": {
 		"current": 0,
 		"list": [{
-			"name": "",
-			"path": "",
+			"name": "列表调试",
+			"path": "pages/text/index",
 			"query": ""
 		}]
 	}

pages/text/index.vue

@@ -3,11 +3,28 @@
 		<Nav title="列表组件演示"></Nav>
 		<pagingList ref="likeGoodsList" @getList="getGoodsList">
       <template v-slot:listInfo="{pagingData}">
-        <view v-for="item in pagingData">
-          <view>商品名称：{{item.good_name}}</view>
-          <view>商品价格：{{item.price}}</view>
-          <view>商品原价：{{item.original_price}}</view>
-          <view>------------------------------------</view>
+        <view class="goods-list">
+          <view class="goods-item" v-for="item in pagingData">
+            <view class="goods-item-left">
+              <image class="goods-item-img" :src="item.cover_img" mode="aspectFill"></image>
+            </view>
+            <view class="goods-item-right">
+              <view class="goods-item-name">{{item.good_name}}</view>
+              <view class="goods-item-price goods-item-zh" v-if="item.p_type===1">
+                振合
+              </view>
+              <view class="goods-item-price goods-item-tp" v-else>
+                <view class="goods-item-platform">
+                  <text class="goods-item-tp"  v-if="item.p_type===2">天猫好物</text>
+                  <text class="goods-item-jd"  v-else>京东优选</text>
+                </view>
+                <view class="item-price">
+                  <enPrice :currentPrice="item.price" :originalPrice="item.original_price"></enPrice>
+                </view>
+              </view>
+
+            </view>
+          </view>
         </view>
       </template>
     </pagingList>
@@ -17,12 +34,14 @@
 <script>
 	import Black from '@/components/en-utils/en-blank/en-blank'
 	import pagingList from '@/components/en-list/en-list'
+  import enPrice from '@/components/en-utils/en-price/en-price'
   import {likeGoods} from "@/api/goods";
 
 	export default {
 		components:{
 			Black,
       pagingList,
+      enPrice,
 		},
     methods:{
       getGoodsList(page){
@@ -37,5 +56,82 @@
 </script>
 
 <style scoped lang="scss">
+    .goods-list{
+      background-color: #F5F5F5;
+      margin: 0 24rpx;
+      .goods-item{
+        width: 100%;
+        height: 364rpx;
+        background-color: #FFFFFF;
+        border-radius: 20rpx;
+        margin: 20rpx 0;
+        display: flex;
+        .goods-item-left{
+          padding: 24rpx;
+          .goods-item-img{
+            width:316rpx;
+            height:316rpx;
+            border-radius: 16rpx;
+          }
+        }
+        .goods-item-right{
+          width:100%;
+          height:300rpx;
+          padding:32rpx 30rpx 32rpx 0;
+          position:relative;
+          //display: flex;
+          //align-content: space-between;
+          .goods-item-name{
+            color: #333333;
+            font-size: 30rpx;
+            font-weight: 600;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+          .goods-item-price{
+            position:absolute;
+            bottom: 32rpx;
+            .item-price{
+              .item-current-price{
+                color: #ED301D;
+                font-size: 40rpx;
+              }
+              .item-original-price{
+                margin-left: 12rpx;
+                color: #999999;
+                font-size: 24rpx;
+                text-decoration: line-through;
+              }
+            }
+          }
+          .goods-item-platform{
+            height: 32rpx;
+            margin-bottom: 10rpx;
+            .goods-item-tp{
+              padding: 4rpx 8rpx;
+              color: #975BFE;
+              width: 90rpx;
+              height: 30rpx;
+              font-size: 24rpx;
+              line-height: 28rpx;
+              border: 2rpx solid #985DFF;
+              border-radius: 4rpx;
+            }
+            .goods-item-jd{
+              padding: 4rpx 8rpx;
+              border-radius: 6rpx;
+              color: #FFFFFF;
+              font-size: 24rpx;
+              line-height: 28rpx;
+              background: linear-gradient(90deg, #FD3229 0%, #FC7A28 100%);
+            }
+          }
+          .goods-item-zh{
 
+          }
+        }
+      }
+    }
 </style>