Prechádzať zdrojové kódy

Merge branches 'master' and 'master' of https://gitee.com/huangg/panda_beauty_makeup_small_program

* 'master' of https://gitee.com/huangg/panda_beauty_makeup_small_program:
  details

* 'master' of https://gitee.com/huangg/panda_beauty_makeup_small_program:
  details

# Conflicts:
#	pages/components/blocks/homeGrid/homeGrid.wxml
#	project.config.json
huanggang 7 rokov pred
rodič
commit
61390ec3be

+ 2 - 1
app.json

@@ -4,7 +4,8 @@
     "pages/index/index",
     "pages/discover/discover",
     "pages/shopCart/shopCart",
-    "pages/person/person"
+    "pages/person/person",
+    "pages/details/details"
   ],
   "window": {
     "backgroundTextStyle": "dark",

+ 73 - 1
app.wxss

@@ -1,7 +1,9 @@
 /**app.wxss**/
+
 body {
   font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
 }
+
 .container {
   height: 100%;
   display: flex;
@@ -10,4 +12,74 @@ body {
   justify-content: space-between;
   padding: 200rpx 0;
   box-sizing: border-box;
-} 
+}
+
+.flex_center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.abs_img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.pos_rel {
+  position: relative;
+}
+
+.one_line_hidden {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.padLR30 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.f24 {
+  font-size: 24rpx;
+}
+
+.f28 {
+  font-size: 28rpx;
+}
+
+.col333 {
+  color: #333;
+}
+
+.colef524d {
+  color: #ef524d;
+}
+
+.f_left {
+  float: left;
+}
+.f_right {
+  float: right;
+}
+.vux-1px-b {
+  position: relative;
+}
+
+.vux-1px-b:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #c7c7c7;
+  color: #c7c7c7;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}

BIN
image/star.png


+ 1 - 1
pages/components/blocks/effect/effect.wxml

@@ -13,7 +13,7 @@
       </view> 
     </view> 
     <view class="function_item_container">
-      <view class="function_item"  wx:for-index="index" wx:for="{{item.subitem}}">
+      <view class="function_item" wx:key="index" wx:for-index="index" wx:for="{{item.subitem}}">
         <image class="subitem_img" src="{{item.img}}" mode="widthFix"></image>
         <view class="subitem_title">{{item.name}}</view>
       </view>

+ 6 - 4
pages/components/blocks/homeGrid/homeGrid.wxml

@@ -1,6 +1,8 @@
 <!--pages/components/blocks/homeGrid/homeGrid.wxml-->
 <view class="home_grid">
-  <view class="home_grid_item" wx:key="{{item}}" wx:for="{{items}}">
-     <image class="home_grid_img" src="{{item.image}}" mode="widthFix"></image> 
-  </view>  
-</view>
+   <navigator url="/pages/details/details?goods_id=6143" hover-class="navigator-hover" wx:key="{{item}}" wx:for="{{items}}"> 
+    <view class="home_grid_item">
+      <image class="home_grid_img" src="{{item.image}}"></image>
+    </view>
+   </navigator> 
+</view>

+ 13 - 4
pages/components/blocks/homeGrid/homeGrid.wxss

@@ -7,11 +7,14 @@
   border-top: 1px solid #f7f7f7;
   
 }
-
+.home_grid navigator {
+  width: 33.3%;
+}
 .home_grid_item {
   position: relative;
   display: flex;
-  width: 33.3%;
+   width: 100%; 
+  padding-top: 100%;
   justify-content: center;
   align-items: center;
   margin-bottom: 1px;
@@ -30,6 +33,7 @@
   transform-origin: 0 0;
   -webkit-transform: scaleX(0.5);
   transform: scaleX(0.5);
+  z-index: 2;
 }
 
 .home_grid_item::after {
@@ -45,8 +49,13 @@
   transform-origin: 0 100%;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
+  z-index: 2;
 }
 
-.home_grid_img {
+ .home_grid_img {
+  position: absolute;
   width: 100%;
-}
+  height: 100%;
+  left: 0;
+  top: 0;
+} 

+ 100 - 0
pages/details/details.js

@@ -0,0 +1,100 @@
+// pages/details/details.js
+const getReq = require('./../../config.js').getReq
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgUrls: [],
+    datas: {},
+    getOneSummary: [],
+    indicatorDots: true,
+    vertical: false,
+    autoplay: true,
+    interval: 2000,
+    duration: 500
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getDatas(options.goods_id)
+  },
+  getDatas(goods_id) {
+    var self = this
+    getReq({
+      act: 'goods_common',
+      op: 'index',
+      goods_id
+    }, function (res) {
+      if (res.code == 200) {
+        console.log(res)
+        let getOneSummary = res.datas.summary.filter((item, index) => {
+          return item.goods_id == goods_id
+        })
+        console.log('---')
+        console.log(getOneSummary)
+        console.log(res.datas)
+
+        self.setData({
+          datas: res.datas,
+          getOneSummary,
+          imgUrls: res.datas.common_info.images
+        })
+        
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

+ 1 - 0
pages/details/details.json

@@ -0,0 +1 @@
+{}

+ 113 - 0
pages/details/details.wxml

@@ -0,0 +1,113 @@
+<!--pages/details/details.wxml-->
+<view>
+  <view class="pos_rel">
+    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:750rpx">
+      <block wx:for="{{imgUrls}}" wx:key="*this">
+        <swiper-item>
+          <image src="{{item}}" class="slide-image" mode="widthFix" style="width: 100%;" />
+        </swiper-item>
+      </block>
+    </swiper>
+    <view class="comment_swiper">
+      <navigator>
+        <image src="{{datas.comment.member_avatar}}"></image>
+        <text class="nickname">{{datas.comment.nickname}}:</text>
+        <text class="comment_content">{{datas.comment.content}}</text>
+      </navigator>
+    </view>
+    <view class="details_collection">已收藏人数 {{getOneSummary.goods_collect}}</view>
+  </view>
+
+  <view class="goods_content">
+    <view class="padLR30">
+      <view class="one_line_hidden goods_name_title">{{getOneSummary.goods_mobile_name}}</view>
+      <view class="one_line_hidden col333 f28">{{getOneSummary.goods_jingle}}</view>
+    </view>
+    <view class="bonus_price flex_center">
+      <text>¥87.5</text>
+      <text class="goods_price">天猫价 125.00</text>
+    </view>
+    <view class="goods_desc">红包抵37.50元 / 已售35件 / 库存16件</view>
+  </view>
+
+  <view class="congratulation_text">恭喜,您的红包已经达到员工内买价格~</view>
+  <view class="details_stamps">
+    <view class="stamps_item">
+      <image class="goods_logo" src="https://passport.lrlz.com/data/upload/shop/country/faguo.png"></image>
+      法国品牌
+    </view>
+    <view class="stamps_item">
+      <image class="goods_logo" src="https://passport.lrlz.com/data/upload/shop/country/faguo.png"></image>
+      法国品牌
+    </view>
+    <view class="stamps_item">
+      <image class="goods_logo" src="https://passport.lrlz.com/data/upload/shop/country/faguo.png"></image>
+      法国品牌
+    </view>
+    <view class="stamps_item">
+      <image class="goods_logo" src="https://passport.lrlz.com/data/upload/shop/country/faguo.png"></image>
+      法国品牌
+    </view>
+  </view>
+
+  <view class="place-bac247"></view>
+
+  <view class="comments_block">
+    <view>用户评价
+      <text class="colef524d">(33)</text>
+    </view>
+    <view class="f24">查看全部评论 > </view>
+  </view>
+
+  <view class="comment">
+    <view class="user">
+      <view class="member_avatar f_left">
+        <image src="http://thirdwx.qlogo.cn/mmopen/vi_32/ZTKGY5ONARyDibLfHNI4IB0WrNqQrqTAiaP35IicoatNAyOcePn4d1Ynmd2l2mTSMsGfHHK2vGFGxnibqXRVHRgBLg/132">
+        </image>
+      </view>
+      <view class="f28 f_left">菜鸟小仙女🍼</view>
+      <view class="scores f_right">
+        <view>
+        <image class="star" src="../../image/star.png"></image>
+        <image class="star" src="../../image/star.png"></image>
+        <image class="star" src="../../image/star.png"></image>
+        <image class="star" src="../../image/star.png"></image>
+        <image class="star" src="../../image/star.png"></image>
+          <!-- <text class="star"></text>
+          <text class="star"></text>
+          <text class="star"></text>
+          <text class="star"></text>
+          <text class="star"></text> -->
+        </view>
+        <view class="comment_time">2018.3.14</view>
+      </view>
+    </view>
+    <view class="spec">规格:M402</view>
+    <view class="content">还可以</view>
+    <view class="content_img"></view>
+  </view>
+
+  <view class="place-bac247"></view>
+
+  <view class="comments_block">
+    <view>产品参数</view>   
+  </view>
+
+  <view class="vux-1px-b">
+    <view class="attr_list_item">
+      <text>功效</text>
+      <text class="col333">华丽着色</text>
+    </view>
+    <view class="attr_list_item">
+      <text>功效</text>
+      <text class="col333">华丽着色</text>
+    </view>
+    <view class="attr_list_item">
+      <text>功效</text>
+      <text class="col333">华丽着色</text>
+    </view>
+  </view>
+
+  <view class="place-bac247"></view>
+
+</view>

+ 225 - 0
pages/details/details.wxss

@@ -0,0 +1,225 @@
+/* pages/details/details.wxss */
+
+.comment_swiper {
+  position: absolute;
+  bottom: 90rpx;
+  left: 19rpx;
+  background: rgba(140, 140, 140, 0.5);
+  max-width: 430rpx;
+  height: 50rpx;
+  line-height: 50rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-radius: 30rpx;
+  padding: 0 21rpx;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 24rpx;
+}
+
+.comment_swiper image {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50rpx;
+  display: inline-block;
+}
+
+.details_collection {
+  position: absolute;
+  bottom: 96rpx;
+  right: 19rpx;
+  color: #fff;
+  padding: 10rpx 30rpx;
+  background: #7e7e7e;
+  border-radius: 50rpx;
+  font-size: 24rpx;
+}
+
+.goods_content {
+  text-align: center;
+  position: relative;
+}
+
+.goods_content::after {
+  position: absolute;
+  content: "";
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #dadada;
+}
+
+.goods_name_title {
+  font-size: 34rpx;
+  color: rgb(0, 0, 0);
+}
+
+.bonus_price {
+  font-size: 36rpx;
+  color: #ef524d;
+  overflow: hidden;
+}
+
+.goods_price {
+  color: #9b9b9b;
+  font-size: 22rpx;
+}
+
+.goods_desc {
+  font-size: 24rpx;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: #7e7e7e;
+  min-height: 56rpx;
+  line-height: 28rpx;
+}
+
+.congratulation_text {
+  position: relative;
+  padding: 16rpx 0;
+  margin-left: 25rpx;
+  color: rgb(167, 167, 167);
+  font-size: 24rpx;
+}
+
+.congratulation_text::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1rpx;
+  border-bottom: 1px solid #c7c7c7;
+  color: #c7c7c7;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.details_stamps {
+  /* height: 166rpx; */
+  padding-top: 40rpx;
+  padding-bottom: 30rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.stamps_item {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  padding-left: 90rpx;
+  color: #a7a7a7;
+  font-size: 24rpx;
+  height: 46rpx;
+  box-sizing: border-box;
+}
+
+.goods_logo {
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 22rpx;
+}
+
+.place-bac247 {
+  background: rgb(247, 247, 247);
+  height: 20rpx;
+}
+
+.comments_block {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70rpx;
+  margin: 0 24rpx;
+  color: #a7a7a7;
+  font-size: 28rpx;
+}
+
+.comments_block::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 726px;
+  height: 1px;
+  border-bottom: 1px solid #c7c7c7;
+  color: #c7c7c7;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.comment {
+  position: relative;
+  color: #a7a7a7;
+  padding-top: 28rpx;
+  padding-bottom: 20rpx;
+}
+
+.user {
+  overflow: hidden;
+  margin-bottom: 18rpx;
+  padding: 0 24rpx;
+}
+
+.member_avatar {
+  margin-right: 20rpx;
+}
+
+.member_avatar image {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  display: block;
+}
+
+.star {
+  display: inline-block;
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: 4rpx;
+  /* background: url(../../image/star.png) no-repeat center;
+  background-size: contain; */
+  vertical-align: middle;
+}
+
+.comment_time {
+  text-align: right;
+  font-size: 20rpx;
+}
+
+.spec {
+  padding: 0 24rpx;
+  margin-bottom: 10rpx;
+  font-size: 20rpx;
+}
+
+.content {
+  padding: 0 24rpx;
+  margin-bottom: 0;
+  font-size: 22rpx;
+  color: #000;
+  line-height: 36rpx;
+  padding-bottom: 10rpx;
+}
+
+.attr_list_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 70rpx;
+  padding: 0 25rpx;
+  overflow: hidden;
+  font-size: 24rpx;
+  color: rgb(167, 167, 167);
+}

+ 4 - 0
pages/discover/discover.js

@@ -34,6 +34,10 @@ Page({
     })
   },
   secTabs: function (e) {
+    wx.pageScrollTo({
+      scrollTop: 0,
+      duration: 16
+    })
     let direction = e.currentTarget.dataset.item
 
     if (direction == this.data.direction) {

+ 2 - 1
pages/discover/discover.wxml

@@ -9,5 +9,6 @@
    </view> 
     <blockList class="{{direction == 'backward' ? '' : 'hide'}}" special_datas="{{special_datas}}"> </blockList>  
     <effect class="{{direction == 'backward' ? 'hide' : ''}}" function_items="{{function_items}}"></effect> 
-   <!-- <effect function_items="{{function_items}}"></effect> -->
+
+    
 </view>

+ 5 - 4
project.config.json

@@ -30,12 +30,13 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 0,
+			"current": -1,
 			"list": [
 				{
-					"id": -1,
-					"name": "index",
-					"pathName": "pages/index/index"
+					"id": 0,
+					"name": "details",
+					"pathName": "pages/details/details",
+					"query": ""
 				}
 			]
 		}