商店详情-评论 商店详情-商家

app/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/shop/show",
     "pages/order/show",
     "pages/order/quasi",
     "pages/order/list",
@@ -7,7 +8,6 @@
     "pages/address/list",
     "pages/address/add",
     "pages/address/select",
-    "pages/shop/show",
     "pages/mine/mine",
     "pages/index/address",
     "pages/shop/category",

app/app.wxss

@@ -90,10 +90,4 @@ button[type="primary"][disabled] {
   padding: 0 15px;
 }
 
-.weui-navbar__item.weui-bar__item_on {
-  color: #ff5801;
-}
 
-.weui-navbar__slider {
-  background-color: #ff5801;
-}

app/pages/shop/show.js

@@ -1,6 +1,7 @@
 // pages/shop/show.js
 
-var sliderWidth = 96;
+import {makePhoneCall} from '../../utils/util'
+
 var initOrder = {
   totalNum: 0,
   totalPrice: 0,
@@ -12,10 +13,8 @@ var initOrder = {
 
 Page({
   data: {
-    tabs: ["商品", "评价"],
+    tabs: ["商品", "评价", "商家"],
-    activeIndex: 0,
+    activeIndex: 2,
-    sliderOffset: 0,
-    sliderLeft: 0,
 
     activeMenuIndex: 0,
     showCart: false,
@@ -24,6 +23,78 @@ Page({
 
     order: initOrder,
 
+    review: {
+      "list": [
+        {
+          "order_id": "1272",
+          "user_id": "4",
+          "seller_id": "1",
+          "service": "5",
+          "reach_time": "0",
+          "quality": "5",
+          "content": "",
+          "pic_url": null,
+          "time": "1488951898",
+          "nick": "te***",
+          "head_pic": null
+        },
+        {
+          "order_id": "1271",
+          "user_id": "4",
+          "seller_id": "1",
+          "service": "5",
+          "reach_time": "0",
+          "quality": "5",
+          "content": "123455",
+          "pic_url": null,
+          "time": "1488944987",
+          "nick": "te***",
+          "head_pic": null
+        },
+        {
+          "order_id": "1270",
+          "user_id": "4",
+          "seller_id": "1",
+          "service": "4",
+          "reach_time": "0",
+          "quality": "4",
+          "content": "hoohoo",
+          "pic_url": null,
+          "time": "1488944700",
+          "nick": "te***",
+          "head_pic": null
+        },
+        {
+          "order_id": "1267",
+          "user_id": "4",
+          "seller_id": "1",
+          "service": "5",
+          "reach_time": "0",
+          "quality": "5",
+          "content": "hoho",
+          "pic_url": null,
+          "time": "1488936939",
+          "nick": "te***",
+          "head_pic": null
+        },
+        {
+          "order_id": "1266",
+          "user_id": "5",
+          "seller_id": "1",
+          "service": "5",
+          "reach_time": "0",
+          "quality": "5",
+          "content": "",
+          "pic_url": "",
+          "time": "1488863802",
+          "nick": "te***",
+          "head_pic": null
+        }
+      ],
+      "count": 10,
+      "page": 0
+    },
+
     info: {
       "seller_id": "2",
       "seller_name": "鲜极道",
@@ -44,9 +115,9 @@ Page({
       "reserve_day": "0",
       "min_price": "5",
       "sales": "74",
-      "service": "0.0",
+      "service": "4.2",
-      "quality": "0.0",
+      "quality": "3.5",
-      "overall": "0.0",
+      "overall": "4.5",
       "distance": "20434",
       "delivery_fee": 45,
       "favorite": "0",
@@ -554,7 +625,6 @@ Page({
   },
   onLoad: function (options) {
     // 页面初始化 options为页面跳转所带来的参数
-    this.initTab()
   },
   onReady: function () {
     // 页面渲染完成
@@ -582,10 +652,16 @@ Page({
   },
   tabClick: function (e) {
     this.setData({
-      sliderOffset: e.currentTarget.offsetLeft,
       activeIndex: e.currentTarget.id
     });
   },
+
+  swiperChange(e) {
+    var {current} = e.detail
+    this.setData({
+      activeIndex: current
+    })
+  },
   menuClick: function (e) {
     this.setData({
       activeMenuIndex: e.currentTarget.id
@@ -773,5 +849,9 @@ Page({
     this.setData({
       activeSubGoods
     })
+  },
+  onPhoneTap(e) {
+    var {phone} = e.currentTarget.dataset
+    makePhoneCall(phone)
   }
 })

app/pages/shop/show.wxml

@@ -1,3 +1,4 @@
+<import src="/templates/star-rate.wxml" />
 <import src="templates/goods-actions.wxml" />
 <import src="templates/cart-box.wxml" />
 <import src="templates/sub-goods.wxml" />
@@ -6,22 +7,22 @@
 <view class="shop-show">
   <view class="shop-info weui-panel weui-panel_access">
     <view class="weui-panel__bd">
-      <navigator url="" hover-class="" class="weui-media-box weui-media-box_appmsg">
+      <view class="weui-media-box weui-media-box_appmsg">
         <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
           <image class="weui-media-box__thumb shop-info__pic" src="{{info.pic_url}}" />
         </view>
-        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg weui-cell__ft_in-access">
+        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
           <view class="weui-media-box__title">{{info.seller_name}}</view>
           <view class="weui-media-box__desc shop-info__desc">
             <view>
-              {{info.min_price}}元起送 | {{info.delivery_fee}}元配送费 | {{info.reach_time}}分钟到达
+              {{info.min_price}}元起送 | {{info.reach_time}}分钟 | 距离{{info.distance / 1000}}km
             </view>
             <view wx:if="{{info.notice}}">
               公告: {{info.notice}}
             </view>
           </view>
         </view>
-      </navigator>
+      </view>
       <view wx:if="{{info.promotion && info.promotion.length > 0}}" class="promotion">
         <swiper class="promotion-swiper" vertical="true" autoplay="true" interval="5000">
           <swiper-item wx:key="index" wx:for="{{info.promotion}}" class="promotion-item">
@@ -38,15 +39,12 @@
   <view class="shop-content">
     <view class=" weui-tab weui-tab_shop">
       <view class="weui-navbar">
-        <block wx:for="{{tabs}}" wx:key="*this">
+        <view wx:for="{{tabs}}" wx:key="*this" id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
-          <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
+          <view class="weui-navbar__title">{{item}}</view>
-            <view class="weui-navbar__title">{{item}}</view>
+        </view>
-          </view>
-        </block>
-        <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
       </view>
-      <view class="weui-tab__panel">
+      <swiper bindchange="swiperChange" current="{{activeIndex}}" autoplay="{{false}}" class="weui-tab__panel">
-        <view class="weui-tab__content menu-tab" hidden="{{activeIndex != 0}}">
+        <swiper-item class="weui-tab__content menu-tab">
           <view class="menu-content weui-flex">
             <view class="menu-list">
               <view bindtap="menuClick" id="{{index}}" class="menu-item {{index == activeMenuIndex ? 'menu-item_active' : ''}} " wx:for="{{info.menus}}" wx:key="menu_id">
@@ -93,11 +91,102 @@
               <text wx:else>{{info.min_price}}元起送</text>
             </button>
           </view>
-        </view>
+        </swiper-item>
-        <view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
+        <swiper-item class="weui-tab__content weui-tab__content_review">
-      </view>
+          <view class="shop-rate">
+            <view class="shop-rate__overall">
+              <view class="shop-rate__overall-num">{{info.overall}}</view>
+              <view class="classname">综合评分</view>
+            </view>
+            <view class="shop-rate__score">
+              <view class="shop-rate__score-item">
+                <view class="shop-rate__score-item-label">商家评分</view>
+                <template is="star-rate" data="{{value: info.quality}}"></template>
+                <view class="shop-rate__score-item-num">{{info.quality}}</view>
+              </view>
+              <view class="shop-rate__score-item">
+                <view class="shop-rate__score-item-label">配送评分</view>
+                <template is="star-rate" data="{{value: info.service}}"></template>
+                <view class="shop-rate__score-item-num">{{info.service}}</view>
+              </view>
+            </view>
+          </view>
+          <view class="shop-review">
+            <view class="review-list">
+              <view wx:for="{{review.list}}" wx:key="order_id" class="review-item">
+                <view class="">
+                  <image class="review-item__head-img" src="{{item.head_pic || '/images/default.jpg'}}"></image>
+                </view>
+                <view class="review-item__content">
+                  <view class="review-item__hd">
+                    <view class="review-item__add-time">{{item.time}}</view>
+                    <view class="review-item__nick">{{item.nick}}</view>
+                    <view class="weui-flex">
+                      <template is="star-rate" data="{{value: item.quality, mini: true}}"></template>
+                      <view class="review-item__reach-time text-small grey-color">及时到达</view>
+                    </view>
+                  </view>
+                  <view class="review-item__bd">
+                    {{item.content}}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </swiper-item>
+        <swiper-item class="weui-tab__content weui-tab__content_info">
+          <block wx:if="{{info.promotion.length > 0}}">
+            <view class="weui-cells__title">商家活动</view>
+            <view class="weui-cells weui-cells_after-title info__promotion-list">
+              <view wx:for="{{info.promotion}}" wx:key="{{index}}" class="weui-cell info__promotion-item">
+                <view class="weui-cell__hd">
+                  <image src="{{item.pic_url}}" class="info__promotion-img"></image>
+                </view>
+                <view class="weui-cell__bd">{{item.info}}</view>
+              </view>
+            </view>
+          </block>
+          <view class="weui-cells__title">商家信息</view>
+          <view class="weui-cells weui-cells_after-title">
+            <view data-phone="{{info.phone}}" bindtap="onPhoneTap" class="weui-cell weui-cell_access info-item">
+              <view class="weui-cell__hd weui-cell__hd_info">
+                商家电话
+              </view>
+              <view class="weui-cell__bd ">{{info.phone}}</view>
+              <view class="weui-cell__ft">
+                <image class="info__phone-icon" src="/images/chat_phone_normal.png"></image>
+              </view>
+            </view>
+            <view class="weui-cell">
+              <view class="weui-cell__hd weui-cell__hd_info">
+                商家公告
+              </view>
+              <view class="weui-cell__bd">{{info.notice}}</view>
+            </view>
+            <view class="weui-cell">
+              <view class="weui-cell__hd weui-cell__hd_info">
+                商家地址
+              </view>
+              <view class="weui-cell__bd">{{info.address}}</view>
+            </view>
+
+            <view class="weui-cell">
+              <view class="weui-cell__hd weui-cell__hd_info">
+                营业时间
+              </view>
+              <view class="weui-cell__bd">{{info.sell_time}}</view>
+            </view>
+            <view class="weui-cell">
+              <view class="weui-cell__hd weui-cell__hd_info">
+                配送服务
+              </view>
+              <view class="weui-cell__bd">爱跑腿</view>
+            </view>
+          </view>
+        </swiper-item>
+      </swiper>
     </view>
   </view>
 </view>
 <template wx:if="{{showCart}}" is="cart-box" data="{{...order}}" />
-<template  is="sub-goods" wx:if="{{showSubGoods}}"  data="{{...activeSubGoods}}"/>
+<template is="sub-goods" wx:if="{{showSubGoods}}" data="{{...activeSubGoods}}" />

app/pages/shop/show.wxss

@@ -1,4 +1,5 @@
 /* pages/shop/show.wxss */
+@import '/templates/star-rate.wxss';
 @import './templates/goods-actions.wxss';
 @import './templates/cart-box.wxss';
 @import './templates/sub-goods.wxss';
@@ -30,9 +31,6 @@
   border-radius: 50%;
 }
 
-.weui-cell__ft_in-access::after {
-  border-color: #fff;
-}
 
 .promotion {
   position: relative;
@@ -79,6 +77,26 @@
   height: 100%;
 }
 
+
+/* navbar */
+.weui-navbar__item {
+  position: relative;
+  color: #999;
+}
+
+.weui-navbar__item.weui-bar__item_on {
+  color: #000;
+  font-weight: 400;
+}
+.weui-bar__item_on::after {
+  content: '';
+  position: absolute;
+  left: 10%;
+  bottom: -1rpx;
+  width: 80%;
+  border-bottom: 5rpx solid #ff5801;
+}
+
 /* menu-tab */
 
 .menu-tab {
@@ -213,4 +231,118 @@
 .menu-cart__price {
   color: #ff5801;
   font-size: 1.2em;
+}
+
+/* weui-tab__content_review */
+.weui-tab__content {
+  overflow: auto;
+}
+.weui-tab__content_review {
+  background-color: #f8f8f8;
+}
+
+.shop-rate {
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #fff;
+}
+
+.shop-rate__overall {
+  flex: 2;
+  border-right: 1rpx solid #e8e8e8;
+}
+
+.shop-rate__overall-num {
+  font-size: 2em;
+  color: #ff5801;
+}
+.shop-rate__score {
+  flex: 3;
+  
+}
+
+.shop-rate__score-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.shop-rate__score-item-label {
+  margin-right: 5px;
+}
+.shop-rate__score-item-num {
+  margin-left: 5px;
+  color: #ff5801;
+}
+
+/*shop-review*/
+.shop-review {
+  margin-top: 10px;
+  background-color: #fff;
+}
+.review-item {
+  display: flex;
+  padding: 5px 8px;
+}
+.review-item:not(:last-child) {
+  border-bottom: 1rpx solid #e8e8e8;
+}
+
+.review-item__head-img {
+  margin-right: 10px;
+  height: 50px;
+  width: 50px;
+  border: 1rpx solid #e8e8e8;
+  border-radius: 50%;
+}
+.review-item__content {
+  flex: 1;
+}
+
+.review-item__hd {
+  position: relative;
+}
+
+.review-item__reach-time {
+  margin-left: 5px;
+}
+.review-item__add-time {
+  position: absolute;
+  right: 8px;
+  top: 5px;
+  color: #999;
+  font-size: 0.8em;
+}
+
+.review-item__bd {
+  padding: 5px 0;
+}
+
+/*weui-tab__content_info*/
+.weui-tab__content_info {
+  background-color: #f8f8f8;
+}
+
+.weui-cell__hd_info {
+  min-width: 5em;
+  color: #999;
+}
+
+.info__promotion-img {
+  margin:-2px 5px 0 0;
+  height: 18px;
+  width: 18px;
+  vertical-align: middle;
+}
+
+.info__promotion-list {
+  font-size: 14px;
+}
+
+.info__phone-icon {
+  height: 20px;
+  width: 20px;
+  vertical-align: middle;
 }

app/templates/star-rate.wxml

@@ -1,5 +1,5 @@
 <template name="star-rate">
-  <view class="star-rate">
+  <view class="star-rate {{mini && 'star-rate_mini'}}">
     <view wx:for="{{count || 5}}"  wx:key="item" class="star-rate__item {{value > item ? 'star-rate__item_active': ''}}">★</view>
   </view>
 </template>

app/templates/star-rate.wxss

@@ -1,9 +1,13 @@
 .star-rate {
     display: flex;
-    font-size: 16px;
+    font-size: 14px;
     color: #999;
 }
 
+.star-rate_mini {
+    font-size: 0.8em;
+}
+
 .star-rate__item_active {
     color: #ffd700;
 }

app/utils/util.js

@@ -146,6 +146,19 @@ export function confirm(options) {
     })
 }
 
+// 拨打电话
+export function makePhoneCall(phoneNum) {
+    confirm({
+        content: `是否拨打电话 ${phoneNum}`,
+        confirmText: '拨打',
+        ok() {
+            wx.makePhoneCall({
+                phoneNumber: phoneNum,
+            })
+        }
+    })
+}
+
 // 加载提示
 export function showLoading() {
     wx.showToast({