ソースを参照

goods页面微调,登陆按钮微调

usgeek 7 年 前
コミット
07420f0685

+ 1 - 1
litemall-wx/pages/cart/cart.wxml

@@ -3,7 +3,7 @@
     <view class="c">
       <image src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png" />
       <text>还没有登录</text>
-      <button type="primary" plain="true" bindtap="goLogin">去登录</button>
+      <button style="background-color:#A9A9A9"  bindtap="goLogin">去登录</button>
     </view>
   </view>
   <view class='login' wx:else>

+ 11 - 0
litemall-wx/pages/goods/goods.js

@@ -41,6 +41,17 @@ Page({
    path: '/pages/index/index?goodId=' + this.data.id
   }
  },
+ 
+ shareFriendOrCircle: function () {
+  //var that = this;
+  if (this.data.openShare === false) {
+    this.setData({
+      openShare: !this.data.openShare
+    });
+  } else {
+    return false;
+  }
+ },
 
  // 保存分享图
  saveShare: function() {

+ 137 - 138
litemall-wx/pages/goods/goods.wxml

@@ -1,10 +1,10 @@
 <view class="container">
- <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
-  <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
-   <image src="{{item}}" background-size="cover"></image>
-  </swiper-item>
- </swiper>
- <!-- 分享 -->
+  <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+    <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
+      <image src="{{item}}" background-size="cover"></image>
+    </swiper-item>
+  </swiper>
+  <!-- 分享 -->
   <view class='goods_name'>
     <view class='goods_name_left'>{{goods.name}}</view>
     <view class="goods_name_right" bindtap="shareFriendOrCircle">分享</view>
@@ -26,169 +26,168 @@
       </view>
     </view>
   </view>
- <view class="goods-info">
-  <view class="c">
-   <text class="name">{{goods.name}}</text>
-   <text class="desc">{{goods.goodsBrief}}</text>
-   <view class="price">
-    <view class="counterPrice">原价:¥{{goods.counterPrice}}</view>
-    <view class="retailPrice">现价:¥{{checkedSpecPrice}}</view>
-   </view>
+  
+  <view class="goods-info">
+    <view class="c">
+      <text class="desc">{{goods.goodsBrief}}</text>
+      <view class="price">
+        <view class="counterPrice">原价:¥{{goods.counterPrice}}</view>
+        <view class="retailPrice">现价:¥{{checkedSpecPrice}}</view>
+      </view>
 
-   <view class="brand" wx:if="{{brand.name}}">
-    <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
-     <text>{{brand.name}}</text>
-    </navigator>
-   </view>
+      <view class="brand" wx:if="{{brand.name}}">
+        <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
+          <text>{{brand.name}}</text>
+        </navigator>
+      </view>
+    </view>
   </view>
- </view>
- <view class="section-nav section-attr" bindtap="switchAttrPop">
-  <view class="t">{{checkedSpecText}}</view>
-  <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
- </view>
- <view class="comments" wx:if="{{comment.count > 0}}">
-  <view class="h">
-   <navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
-    <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
-    <text class="i">查看全部</text>
-   </navigator>
+  <view class="section-nav section-attr" bindtap="switchAttrPop">
+    <view class="t">{{checkedSpecText}}</view>
+    <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
   </view>
-  <view class="b">
-   <view class="item" wx:for="{{comment.data}}" wx:key="id">
-    <view class="info">
-     <view class="user">
-      <image src="{{item.avatar}}"></image>
-      <text>{{item.nickname}}</text>
-     </view>
-     <view class="time">{{item.addTime}}</view>
+  <view class="comments" wx:if="{{comment.count > 0}}">
+    <view class="h">
+      <navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
+        <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
+        <text class="i">查看全部</text>
+      </navigator>
     </view>
-    <view class="content">
-     {{item.content}}
-    </view>
-    <view class="imgs" wx:if="{{item.picList.length > 0}}">
-     <image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="iitem" src="{{iitem}} "></image>
+    <view class="b">
+      <view class="item" wx:for="{{comment.data}}" wx:key="id">
+        <view class="info">
+          <view class="user">
+            <image src="{{item.avatar}}"></image>
+            <text>{{item.nickname}}</text>
+          </view>
+          <view class="time">{{item.addTime}}</view>
+        </view>
+        <view class="content">
+          {{item.content}}
+        </view>
+        <view class="imgs" wx:if="{{item.picList.length > 0}}">
+          <image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="iitem" src="{{iitem}} "></image>
+        </view>
+      </view>
     </view>
-   </view>
   </view>
- </view>
- <view class="goods-attr">
-  <view class="t">商品参数</view>
-  <view class="l">
-   <view class="item" wx:for="{{attribute}}" wx:key="name">
-    <text class="left">{{item.attribute}}</text>
-    <text class="right">{{item.value}}</text>
-   </view>
+  <view class="goods-attr">
+    <view class="t">商品参数</view>
+    <view class="l">
+      <view class="item" wx:for="{{attribute}}" wx:key="name">
+        <text class="left">{{item.attribute}}</text>
+        <text class="right">{{item.value}}</text>
+      </view>
+    </view>
   </view>
- </view>
 
- <view class="detail">
-  <import src="/lib/wxParse/wxParse.wxml" />
-  <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
- </view>
-
- <view class="common-problem">
-  <view class="h">
-   <view class="line"></view>
-   <text class="title">常见问题</text>
+  <view class="detail">
+    <import src="/lib/wxParse/wxParse.wxml" />
+    <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
   </view>
-  <view class="b">
-   <view class="item" wx:for="{{issueList}}" wx:key="id">
-    <view class="question-box">
-     <text class="spot"></text>
-     <text class="question">{{item.question}}</text>
+
+  <view class="common-problem">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">常见问题</text>
     </view>
-    <view class="answer">
-     {{item.answer}}
+    <view class="b">
+      <view class="item" wx:for="{{issueList}}" wx:key="id">
+        <view class="question-box">
+          <text class="spot"></text>
+          <text class="question">{{item.question}}</text>
+        </view>
+        <view class="answer">
+          {{item.answer}}
+        </view>
+      </view>
     </view>
-   </view>
   </view>
- </view>
 
- <!-- 大家都在看 -->
- <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
-  <view class="h">
-   <view class="line"></view>
-   <text class="title">大家都在看</text>
-  </view>
-  <view class="b">
-   <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
-    <navigator url="/pages/goods/goods?id={{item.id}}">
-     <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-     <text class="name">{{item.name}}</text>
-     <text class="price">¥{{item.retailPrice}}</text>
-    </navigator>
-   </view>
+  <!-- 大家都在看 -->
+  <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">大家都在看</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
+        <navigator url="/pages/goods/goods?id={{item.id}}">
+          <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+          <text class="name">{{item.name}}</text>
+          <text class="price">¥{{item.retailPrice}}</text>
+        </navigator>
+      </view>
+    </view>
   </view>
- </view>
 </view>
-
 <!-- 规格选择界面 -->
 <view class="attr-pop-box" hidden="{{!openAttr}}">
- <view class="attr-pop">
-  <view class="close" bindtap="closeAttr">
-   <image class="icon" src="/static/images/icon_close.png"></image>
-  </view>
-  <view class="img-info">
-   <image class="img" src="{{goods.picUrl}}"></image>
-   <view class="info">
-    <view class="c">
-     <view class="p">价格:¥{{checkedSpecPrice}}</view>
-     <view class="a">{{tmpSpecText}}</view>
+  <view class="attr-pop">
+    <view class="close" bindtap="closeAttr">
+      <image class="icon" src="/static/images/icon_close.png"></image>
     </view>
-   </view>
-  </view>
-
-  <!-- 规格列表 -->
-  <view class="spec-con">
-   <view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
-    <view class="name">{{item.name}}</view>
-    <view class="values">
-     <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">{{vitem.value}}</view>
+    <view class="img-info">
+      <image class="img" src="{{goods.picUrl}}"></image>
+      <view class="info">
+        <view class="c">
+          <view class="p">价格:¥{{checkedSpecPrice}}</view>
+          <view class="a">{{tmpSpecText}}</view>
+        </view>
+      </view>
     </view>
-   </view>
 
-   <view class="spec-con" wx:if="{{groupon.length > 0}}">
-    <view class="spec-item">
-     <view class="name">团购立减</view>
-     <view class="values">
-      <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickGroupon" wx:for="{{groupon}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">¥{{vitem.discount}} ({{vitem.discountMember}}人)</view>
-     </view>
-    </view>
-   </view>
+    <!-- 规格列表 -->
+    <view class="spec-con">
+      <view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
+        <view class="name">{{item.name}}</view>
+        <view class="values">
+          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">{{vitem.value}}</view>
+        </view>
+      </view>
 
-   <!-- 数量 -->
-   <view class="number-item">
-    <view class="name">数量</view>
-    <view class="selnum">
-     <view class="cut" bindtap="cutNumber">-</view>
-     <input value="{{number}}" class="number" disabled="true" type="number" />
-     <view class="add" bindtap="addNumber">+</view>
-    </view>
-   </view>
+      <view class="spec-con" wx:if="{{groupon.length > 0}}">
+        <view class="spec-item">
+          <view class="name">团购立减</view>
+          <view class="values">
+            <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickGroupon" wx:for="{{groupon}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">¥{{vitem.discount}} ({{vitem.discountMember}}人)</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 数量 -->
+      <view class="number-item">
+        <view class="name">数量</view>
+        <view class="selnum">
+          <view class="cut" bindtap="cutNumber">-</view>
+          <input value="{{number}}" class="number" disabled="true" type="number" />
+          <view class="add" bindtap="addNumber">+</view>
+        </view>
+      </view>
 
 
+    </view>
   </view>
- </view>
 </view>
 
 <!-- 联系客服 -->
 <view class="contact">
- <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
- </contact-button>
+  <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
+  </contact-button>
 </view>
 
 <!-- 底部按钮 -->
 <view class="bottom-btn">
- <view class="l l-collect" bindtap="addCollectOrNot" wx:if="{{!isGroupon}}">
-  <image class="icon" src="{{ collectImage }}"></image>
- </view>
- <view class="l l-cart" wx:if="{{!isGroupon}}">
-  <view class="box">
-   <text class="cart-count">{{cartGoodsCount}}</text>
-   <image bindtap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
+  <view class="l l-collect" bindtap="addCollectOrNot" wx:if="{{!isGroupon}}">
+    <image class="icon" src="{{ collectImage }}"></image>
+  </view>
+  <view class="l l-cart" wx:if="{{!isGroupon}}">
+    <view class="box">
+      <text class="cart-count">{{cartGoodsCount}}</text>
+      <image bindtap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
+    </view>
   </view>
- </view>
- <view class="r" bindtap="addToCart" wx:if="{{!soldout}}" wx:if="{{!isGroupon}}">加入购物车</view>
- <view class="c" bindtap="addFast" wx:if="{{!soldout}}">{{isGroupon?'参加团购':'立即购买'}}</view>
- <view class="n" wx:if="{{soldout}}">商品已售空</view>
+  <view class="r" bindtap="addToCart" wx:if="{{!soldout}}" wx:if="{{!isGroupon}}">加入购物车</view>
+  <view class="c" bindtap="addFast" wx:if="{{!soldout}}">{{isGroupon?'参加团购':'立即购买'}}</view>
+  <view class="n" wx:if="{{soldout}}">商品已售空</view>
 </view>

+ 81 - 76
litemall-wx/pages/goods/goods.wxss

@@ -12,6 +12,30 @@
   height: 750rpx;
 }
 
+.commodity_screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.2;
+  overflow: hidden;
+  z-index: 1000;
+  color: #fff;
+}
+
+.commodity_attr_box {
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  background: #fff;
+  padding-top: 20rpx;
+}
+
 /* .service-policy {
   width: 750rpx;
   height: 73rpx;
@@ -52,14 +76,47 @@
 .goods-info .c text {
   display: block;
   width: 687.5rpx;
-  text-align: center;
+  text-align: left;
 }
 
-.goods-info .name {
-  height: 41rpx;
-  margin-bottom: 5.208rpx;
-  font-size: 41rpx;
-  line-height: 41rpx;
+.goods_name {
+  /* border: 1px solid black; */
+  height: 86rpx;
+  line-height: 86rpx;
+  border-bottom: 1px solid #fafafa;
+}
+
+.goods_name_left {
+  /* border: 1px solid #757575; */
+  float: left;
+  height: 86rpx;
+  font-weight: 550;
+  line-height: 86rpx;
+  margin-left: 35rpx;
+  font-size: 38rpx;
+  letter-spacing: 1rpx;
+}
+
+.goods_name_right {
+  float: right;
+  font-weight: 550;
+  margin-top: 28rpx;
+  width: 140rpx;
+  height: 80rpx;
+  line-height: 82rpx;
+  padding: 0;
+  margin: 0;
+  margin-right: 0rpx;
+  text-align: center;
+  font-size: 25rpx;
+  color: #f4f4f4;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-top-right-radius: 0rpx;
+  border-bottom-right-radius: 0rpx;
+  letter-spacing: 3rpx;
+  /* background-image: linear-gradient(to right, #ff7701 100%); */
+  background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
 }
 
 .goods-info .desc {
@@ -71,29 +128,28 @@
 }
 
 .goods-info .price {
- height: 70rpx;
- align-content: center;
+  height: 70rpx;
+  align-content: center;
 }
 
 .goods-info .counterPrice {
- float: left;
- padding-left: 120rpx;
- text-decoration: line-through;
- font-size: 30rpx;
- color: #999;
+  float: left;
+  padding-left: 0rpx;
+  text-decoration: line-through;
+  font-size: 30rpx;
+  color: #999;
 }
 
 .goods-info .retailPrice {
- /* float: right; */
- padding-left: 60rpx;
- font-size: 30rpx;
- color: #a78845;
+  padding-left: 5%;
+  font-size: 30rpx;
+  color: #a78845;
 }
 
 .goods-info .brand {
   margin-top: 23rpx;
   min-height: 40rpx;
-  text-align: center;
+  text-align: left;
 }
 
 .goods-info .brand text {
@@ -431,7 +487,7 @@
   width: 750rpx;
   height: auto;
   overflow: hidden;
- padding-bottom: 80rpx;
+  padding-bottom: 80rpx;
 }
 
 .related-goods .h {
@@ -601,7 +657,7 @@
 
 .bottom-btn .c {
   float: left;
-  background: #f48f18;
+  background: #b4282d;
   height: 100rpx;
   line-height: 96rpx;
   flex: 1;
@@ -611,8 +667,8 @@
 }
 
 .bottom-btn .r {
-  border: 1px solid #b4282d;
-  background: #b4282d;
+  border: 1px solid #f48f18;
+  background: #f48f18;
   float: left;
   height: 100rpx;
   line-height: 96rpx;
@@ -767,71 +823,20 @@
   line-height: 65rpx;
 }
 
+
 .contact {
   height: 100rpx;
   width: 100rpx;
-  background-color: #008000;
   border-radius: 100%;
   position: fixed;
-  bottom: 150rpx;
-  right: 20rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9;
-  flex-direction: column;
-  /*line-height: 100rpx;
-  text-align: center;
-  padding-top: 26rpx;*/
+  bottom: 96rpx;
+  right: 10rpx;
   font-size: 20rpx;
-  color: #008000;
   box-sizing: border-box;
   background: url("https://litemall.oss-cn-shenzhen.aliyuncs.com/kefu.png") no-repeat center 21rpx;
   background-size: 55rpx auto;
 }
 
-
-/*分享样式*/
-.goods_name {
-  /* border: 1px solid black; */
-  height: 86rpx;
-  line-height: 86rpx;
-  border-bottom: 1px solid #fafafa;
-}
-
-.goods_name_left {
-  /* border: 1px solid #757575; */
-  float: left;
-  height: 86rpx;
-  font-weight: 550;
-  line-height: 86rpx;
-  margin-left: 35rpx;
-  font-size: 38rpx;
-  letter-spacing: 1rpx;
-}
-
-.goods_name_right {
-  float: right;
-  font-weight: 550;
-  margin-top: 28rpx;
-  width: 140rpx;
-  height: 80rpx;
-  line-height: 82rpx;
-  padding: 0;
-  margin: 0;
-  margin-right: 0rpx;
-  text-align: center;
-  font-size: 25rpx;
-  color: #f4f4f4;
-  border-top-left-radius: 50rpx;
-  border-bottom-left-radius: 50rpx;
-  border-top-right-radius: 0rpx;
-  border-bottom-right-radius: 0rpx;
-  letter-spacing: 3rpx;
-  /* background-image: linear-gradient(to right, #ff7701 100%); */
-  background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
-}
-
 .share-pop-box {
   width: 100%;
   height: 100%;