商品详情添加倒计时及ui修改

@@ -6,6 +6,14 @@ Component({
   properties: {
   properties: {
     list: {
     list: {
       type: Array
       type: Array
+    },
+    bannerSrc: {
+      type: String,
+      value: null
+    },
+    bannerUrl: {
+      type: String,
+      value: null
     }
     }
   },
   },
 
 
@@ -20,6 +28,8 @@ Component({
    * 组件的方法列表
    * 组件的方法列表
    */
    */
   methods: {
   methods: {
-
+    jumpUrl:function() {
+      this.triggerEvent('tapUrl')
+    }
   }
   }
 })
 })

@@ -5,6 +5,9 @@
   </view>
   </view>
 
 
   <view class="desc-content">
   <view class="desc-content">
+  <view class="banner" bindtap="_jumpBanner" wx:if="{{bannerSrc != null}}">
+  <image class="banner-img" src="{{bannerSrc}}"></image>
+</view>
     <block wx:for="{{list}}">
     <block wx:for="{{list}}">
       <block wx:if="{{item.floor_type === 1}}">
       <block wx:if="{{item.floor_type === 1}}">
         <view >{{item.content}}</view>
         <view >{{item.content}}</view>

@@ -33,4 +33,15 @@
   display: block;
   display: block;
   width: 100%;
   width: 100%;
   margin: 50rpx 0;
   margin: 50rpx 0;
+}
+
+
+.banner {
+ width: 100%;
+ height: 234rpx;
+}
+
+.banner-img {
+   width: 100%;
+  height: 234rpx;
 }
 }

 
 
 
 
-<view class="help" bindtap="_onTap"> 活动说明 </view>
+<view class="help" bindtap="_onTap"> 
+<image class="helpe-img" src="../images/que_ic@2x.png"></image>
+<text>活动说明 </text>
+</view>

 /* page/subPackage/pages/zeroSell/components/help.wxss */
 /* page/subPackage/pages/zeroSell/components/help.wxss */
 
 
 .help {
 .help {
-  width: 200rpx;
+  width: 100%;
   height: 65rpx;
   height: 65rpx;
   font-size: 24rpx;
   font-size: 24rpx;
   line-height: 65rpx;
   line-height: 65rpx;
-  background-color: rgba(0, 0, 0, 0.6);
-  border-radius: 40rpx;
-  color: white;
-  text-align: left;
-  padding-left: 20rpx;
+  color: #222222;
+  text-align: center;
+  text-decoration: underline;
+}
+
+.helpe-img {
+  width: 30rpx;
+  height: 30rpx;
+  vertical-align: middle;
+  margin-right: 10rpx;
 }
 }

@@ -4,6 +4,12 @@ Component({
   properties: {
   properties: {
     product: {
     product: {
       type: Object
       type: Object
+    },
+    avatars: {
+      type: Array
     }
     }
   },
   },
+  ready:function() {
+    // console.log(`productdetail: ${this.properties.avatars}`)
+  }
 });
 });

 {
 {
   "component": true,
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "time-countdown": "./timeCountDown/time-countdown",
+    "avatars": "./avatar-swiper"          
+  }
 }
 }

   
   
   <wxs src="./helper.wxs" module="helper" />
   <wxs src="./helper.wxs" module="helper" />
+  <view wx:if="{{product.status === 2}}">
+  <view class="countdown_label">
+  <text class="countdown_labeltext">抽奖</text>
+  <text class="countdown_labeltext">倒计时</text>
+  </view>
+  
+  <time-countdown class="product_countdown" wx:if="{{product.status === 2}}" endTime="{{product.end_time}}"></time-countdown>
+  </view>
 
 
+  <view class="avatars" wx:if="{{product.status === 2 && avatars.length > 0}}">
+    <avatars list="{{avatars}}"></avatars>
+  </view>
+  
   <image class="product_image" src="{{product.cover_img}}"></image>
   <image class="product_image" src="{{product.cover_img}}"></image>
   <view class="product_name" >{{product.name}}</view>
   <view class="product_name" >{{product.name}}</view>
   <view class="product_price" >{{product.price}}</view>
   <view class="product_price" >{{product.price}}</view>
-  <view class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
+  <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
+  <view class="product_margin"></view>

@@ -26,7 +26,6 @@
   color: #B0B0B0;
   color: #B0B0B0;
   font-size: 24rpx;
   font-size: 24rpx;
   margin-top: 16rpx;
   margin-top: 16rpx;
-  margin-bottom: 40rpx;
 }
 }
 
 
 .product_time:before {
 .product_time:before {
@@ -47,4 +46,39 @@
   background-color: #D8D8D8;
   background-color: #D8D8D8;
   margin-left: 20rpx;
   margin-left: 20rpx;
   vertical-align: 6rpx
   vertical-align: 6rpx
+}
+
+.product_margin {
+    margin-bottom: 40rpx;
+}
+
+.product_countdown {
+  display: inline-block;
+  height: 92rpx;
+  margin-top: 40rpx;
+  margin-bottom: 40rpx;
+}
+
+.countdown_label {
+  width: 60rpx;
+  height: 56rpx;
+  font-family: PingFang-SC-Regular;
+  font-size: 20rpx;
+  color: #222222;
+  letter-spacing: -0.36rpx;
+  text-align: center;
+  display: inline-block;
+  margin-right: 16rpx;
+}
+
+.countdown_labeltext {
+  display: block;
+}
+
+.avatars {
+  display: inline-block;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 38rpx;
 }
 }

@@ -20,6 +20,9 @@ Component({
   },
   },
 
 
   ready: function() {
   ready: function() {
+    this.setData({
+      formatTime: this.formatCountDown(this.properties.endTime)
+    })
     this.formatTime()
     this.formatTime()
   },
   },
   /**
   /**

 // page/subPackage/pages/zeroSell/detail.js
 // page/subPackage/pages/zeroSell/detail.js
 
 
 import ZeroSellService from './service/zero-sell'
 import ZeroSellService from './service/zero-sell'
+import CommonService from './service/common'
 import {
 import {
   decodePhoneNumber,
   decodePhoneNumber,
   getUnionID,
   getUnionID,
@@ -16,6 +17,8 @@ import {
 } from '../../vendors/zanui/index';
 } from '../../vendors/zanui/index';
 import router from './router/router'
 import router from './router/router'
 import {wrapperName} from './helper'
 import {wrapperName} from './helper'
+import { formatImageUrl } from '../../utils/util'
+import { jumpByUrl } from '../../libs/urlRoute';
 
 
 const ACTIVITY = {
 const ACTIVITY = {
   UNKNOWN: 0,
   UNKNOWN: 0,
@@ -68,6 +71,8 @@ Page(Object.assign({
     hasUnionID: false,
     hasUnionID: false,
     uid: 0,
     uid: 0,
     isLogin: false,
     isLogin: false,
+    bannerSrc:null,
+    bannerUrl: null,
 
 
     actionsheet: {
     actionsheet: {
       componentId: 'shareActionSheet',
       componentId: 'shareActionSheet',
@@ -120,6 +125,8 @@ Page(Object.assign({
     this.setData(data);
     this.setData(data);
 
 
     new app.WeToast();
     new app.WeToast();
+
+    this._getDetailBanner()
   },
   },
 
 
   /**
   /**
@@ -358,6 +365,26 @@ Page(Object.assign({
       showAuth: true
       showAuth: true
     })
     })
   },
   },
+  _jumpBanner() {
+    if (this.data.bannerUrl == null) {
+      return;
+    }
+    jumpByUrl(that.data.bannerUrl);
+  },
+  _getDetailBanner() {
+    let commonService = new CommonService()
+    commonService.getResourceCode('ccc32dbedf164a52b4efa34383878860')
+      .then(data => {
+        // console.log(data)
+        this.setData({
+          bannerSrc: formatImageUrl(data.src, 340 * app.globalData.systemInfo.pixelRatio, 340 * app.globalData.systemInfo.pixelRatio, 2),
+          bannerUrl: data.url
+        })
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  },
 
 
   _getUser() {
   _getUser() {
     const userInfo = app.getUserInfo();
     const userInfo = app.getUserInfo();

@@ -3,24 +3,17 @@
 
 
 <view class="header">
 <view class="header">
 
 
-  <product-header product="{{product}}"></product-header>
+  <product-header product="{{product}}" avatars="{{avatars}}"></product-header>
   <view style="height: 20rpx;"></view>
   <view style="height: 20rpx;"></view>
-
-  <view class="help">
-    <help></help>
-  </view>
-
-  <view class="avatars" wx:if="{{product.status === 2 && avatars.length > 0}}">
-    <avatars list="{{avatars}}"></avatars>
-  </view>
-
 </view>
 </view>
 
 
 <counter count="{{participantCount}}" num="{{product.limit}}" status="{{product.status}}"></counter>
 <counter count="{{participantCount}}" num="{{product.limit}}" status="{{product.status}}"></counter>
 
 
 <prize-progress step="{{step}}"></prize-progress>
 <prize-progress step="{{step}}"></prize-progress>
-
-<desc list="{{product.content}}"></desc>
+  <view class="help">
+    <help></help>
+  </view>
+<desc list="{{product.content}}" bind:tapUrl="_jumpBanner" bannerSrc="{{bannerSrc}}" bannerUrl="{{bannerUrl}}"></desc>
 
 
 <view class="line"></view>
 <view class="line"></view>
 
 

@@ -15,24 +15,19 @@
   position: relative;
   position: relative;
   text-align: center;
   text-align: center;
   overflow: hidden;
   overflow: hidden;
+  margin-top: 56rpx;
 }
 }
 
 
 .help {
 .help {
-  position: absolute;
-  top: 20rpx;
-  right: -90rpx;
-}
-
-.avatars {
-  position: absolute;
-  top: 20rpx;
-  left: 32rpx;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 60rpx;
 }
 }
 
 
 .fellow-bar {
 .fellow-bar {
   position: fixed;
   position: fixed;
   width: 100%;
   width: 100%;
-  bottom: 100rpx;
+  top: 0rpx;
 }
 }
 
 
 .action-bar {
 .action-bar {

@@ -3,6 +3,7 @@
 
 
   <tabs-pane name="进行中">
   <tabs-pane name="进行中">
     <view>
     <view>
+    <image class="topgif" src="./images/yoluck.gif"/>
       <block wx:for="{{list[0].products}}" wx:key="{{item.id}}">
       <block wx:for="{{list[0].products}}" wx:key="{{item.id}}">
         <product-item product="{{item}}" class="product"></product-item>
         <product-item product="{{item}}" class="product"></product-item>
       </block>
       </block>

@@ -52,4 +52,9 @@
 
 
 .tabs-class {
 .tabs-class {
   border-bottom: 1rpx solid #E0E0E0;
   border-bottom: 1rpx solid #E0E0E0;
+}
+
+.topgif {
+  width: 100%;
+  height: 200rpx;
 }
 }