商店详情-评论 商店详情-商家
This commit is contained in:
Kiyan
parent
87d9148977
commit
050b9403ec
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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: ["商品", "评价"],
|
||||
activeIndex: 0,
|
||||
sliderOffset: 0,
|
||||
sliderLeft: 0,
|
||||
tabs: ["商品", "评价", "商家"],
|
||||
activeIndex: 2,
|
||||
|
||||
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",
|
||||
"quality": "0.0",
|
||||
"overall": "0.0",
|
||||
"service": "4.2",
|
||||
"quality": "3.5",
|
||||
"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)
|
||||
}
|
||||
})
|
||||
@ -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 id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
|
||||
<view class="weui-navbar__title">{{item}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
|
||||
<view wx:for="{{tabs}}" wx:key="*this" id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
|
||||
<view class="weui-navbar__title">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weui-tab__panel">
|
||||
<view class="weui-tab__content menu-tab" hidden="{{activeIndex != 0}}">
|
||||
<swiper bindchange="swiperChange" current="{{activeIndex}}" autoplay="{{false}}" class="weui-tab__panel">
|
||||
<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>
|
||||
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="weui-tab__content weui-tab__content_review">
|
||||
<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}}" />
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
@ -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({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user