小程序开发

public/appmini/old/weixin/app.wxss

@@ -140,19 +140,19 @@ textarea {
 
 /* 文字超出部分使用省略号 */
 .single-text {
-    -o-text-overflow: ellipsis;
-	text-overflow: ellipsis;	  
-	overflow: hidden;
-	white-space: nowrap;
-    max-width: 100%;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;	  
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
 }
 .multi-text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 

public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.js

@@ -16,6 +16,29 @@ Component({
     seconds: 30,
     timer_title: '距离结束',
     is_show_time: true,
+    data_list: [
+      {
+        goods_id: 1,
+        goods_title: '2019新款夏装漂亮的睡衣，性感女士专享',
+        images_url: 'https://demo.shopxo.net/static/upload/images/goods/2019/01/14/1547454702543219.jpg',
+        min_price: 345.23,
+        min_original_price: 9863.98,
+      },
+      {
+        goods_id: 2,
+        goods_title: 'MARNI Trunk 女士 中号拼色十字纹小牛皮 斜挎风琴包',
+        images_url: 'https://demo.shopxo.net/static/upload/images/goods/2019/01/14/1547454145355962.jpg',
+        min_price: 256.00,
+        min_original_price: 356.00,
+      },
+      {
+        goods_id: 3,
+        goods_title: 'Huawei/华为 H60-L01 荣耀6 移动4G版智能手机 安卓',
+        images_url: 'https://demo.shopxo.net/static/upload/images/goods/2019/01/14/1547452474332334.jpg',
+        min_price: 1999.99,
+        min_original_price: 2300.00,
+      }
+    ],
   },
 
   ready: function () {

public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxml

-<view class="limitedtimediscount">
+<view wx:if="{{data_list.length > 0}}" class="limitedtimediscount">
   <view class="spacing-nav-title">
     <text class="text-wrapper">限时秒杀</text>
     <view class="countdown">
@@ -14,17 +14,16 @@
   </view>
   <view class="data-list">
     <scroll-view scroll-x>
-      <view class="item">
-        <view class='inner'>1</view>
-      </view>
-      <view class="item">
-        <view class='inner'>2</view>
-      </view>
-      <view class="item">
-        <view class='inner'>3</view>
-      </view>
-      <view class="item">
-        <view class='inner'>4</view>
+      <view wx:for="{{data_list}}" key="key" class="item">
+        <navigator url="/pages/goods-detail/goods-detail?id={{item.goods_id}}" hover-class="none">
+          <image src="{{item.images_url}}" mode="aspectFit"></image>
+          <view class="goods-base">
+            <view class="goods-title">{{item.goods_title}}</view>
+            <view class="goods-price">￥{{item.min_price}}</view>
+            <view wx:if="{{(item.min_original_price || null) != null}}" class="goods-original-price">￥{{item.min_original_price}}</view>
+            <button size="mini">抢购</button>
+          </view>
+        </navigator>
       </view>
     </scroll-view>
   </view>

public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxss

@@ -52,14 +52,55 @@
   box-sizing: border-box;
   margin-top: 5rpx;
 }
-
-/*设置行内块*/
-
 .data-list .item {
-  width: 100px;
-  height: 80px;
-  border: 1px solid red;
+  width: 460rpx;
+  height: 600rpx;
+  border: 1px solid #f5f5f5;
   background: white;
   display: inline-block;
+  position: relative;
+}
+.data-list .item:not(:last-child) {
   margin-right: 10px;
+}
+.data-list .item image {
+  width: 460rpx;
+  height: 460rpx;
+}
+.data-list .item .goods-base {
+  padding: 0 10rpx;
+}
+.data-list .goods-base .goods-title,
+.data-list .goods-base .goods-price,
+.data-list .goods-base .ogoods-riginal-price {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;	  
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.data-list .goods-base .goods-title {
+  font-size: 32rpx;
+}
+.data-list .goods-base .goods-price {
+  color: #f40;
+  font-weight: bold;
+  font-size: 36rpx;
+}
+.data-list .goods-base .goods-original-price {
+  color: #999;
+  text-decoration: line-through;
+  font-size: 24rpx;
+}
+.data-list .goods-base button {
+  background: #d2364c;
+  border: 0;
+  color: #fff;
+  padding: 0 30rpx;
+  line-height: 50rpx;
+  font-size: 30rpx;
+  border-radius: 6rpx;
+  position: absolute;
+  right: 10rpx;
+  bottom: 10rpx;
 }
\ No newline at end of file