Skip to content

严立 / mini-shimao

Go to a project
Commit feb628f0 by 严立
Options

LL - 商店静态

parent e8b72e3c
Inline Side-by-side
Showing with 1016 additions and 125 deletions
app.json
{ {
"pages": [ "pages": [
"pages/mine/order/order",
"pages/home/home/home", "pages/home/home/home",
"pages/home/dynamic/dynamic", "pages/home/dynamic/dynamic",
...@@ -8,10 +8,11 @@ ...@@ -8,10 +8,11 @@
"pages/home/night-appointment/night-appointment", "pages/home/night-appointment/night-appointment",
"pages/home/guide/guide", "pages/home/guide/guide",
"pages/home/history/history", "pages/home/history/history",
"pages/play/home/home", "pages/play/home/home",
"pages/play/service/service", "pages/play/service/service",
"pages/play/service-detail/service-detail",
"pages/play/service-sell/service-sell", "pages/play/service-sell/service-sell",
"pages/play/service-detail/service-detail",
"pages/play/activity/activity", "pages/play/activity/activity",
"pages/play/activity-detail/activity-detail", "pages/play/activity-detail/activity-detail",
"pages/play/activity-entry/activity-entry", "pages/play/activity-entry/activity-entry",
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
"pages/play/movie-detail/movie-detail", "pages/play/movie-detail/movie-detail",
"pages/play/point-detail/point-detail", "pages/play/point-detail/point-detail",
"pages/play/strategy-detail/strategy-detail", "pages/play/strategy-detail/strategy-detail",
"pages/commodity/home/home", "pages/commodity/home/home",
"pages/commodity/shopping-cart/shopping-cart", "pages/commodity/shopping-cart/shopping-cart",
"pages/commodity/food/food", "pages/commodity/food/food",
...@@ -29,9 +31,10 @@ ...@@ -29,9 +31,10 @@
"pages/commodity/room-appointment/room-appointment", "pages/commodity/room-appointment/room-appointment",
"pages/campsite/home/home", "pages/campsite/home/home",
"pages/campsite/home-mirror/home-mirror", "pages/campsite/home-mirror/home-mirror",
"pages/mine/home/home", "pages/mine/home/home",
"pages/mine/info/info", "pages/mine/info/info",
"pages/mine/order/order",
"pages/mine/card/card", "pages/mine/card/card",
"pages/mine/accumulate/accumulate", "pages/mine/accumulate/accumulate",
"pages/mine/appointment/appointment", "pages/mine/appointment/appointment",
......
pages/mine/order/order.js
const App = getApp()
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase,
orderTypeTitle: '全部分类',
orderTypeHeight: 0,
statusActive: 0, statusActive: 0,
statusList: [ statusList: [
{ 'id': 0, 'name': '全部' },
{ 'id': 1, 'name': '待付款' },
{ 'id': 2, 'name': '待使用' },
{ 'id': 3, 'name': '取消/过期' },
],
orderList: [
{ {
'name': '全部', 'id': 0,
'logo': '',
'name': '原味舒食',
'status': 0,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 20
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 1,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 2,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 3,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 4,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 5,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
} }
], ],
winOrderType: false,
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
onOrderType: function () {
this.setData({
winOrderType: !this.data.winOrderType
})
},
onOrderTypeSelection: function (event) {
console.log(event.currentTarget.dataset.id)
this.setData({
orderTypeTitle: event.currentTarget.dataset.id
})
},
onSelectionStatus: function (event) { onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type) console.log(event.currentTarget.dataset.type)
this.setData({ this.setData({
......
pages/mine/order/order.wxml
<view class="navigation-order"> <view class="navigation-order row con-b align-c">
<image src="{{imageBase + 'icon/arrow-l-1.png'}}"></image>
<view class="order-type row con-c align-c" bindtap="onOrderType">
<text>{{orderTypeTitle}}</text>
<image src="{{imageBase + 'icon/arrow-b-2.png'}}"></image>
</view>
<image src=""></image>
</view>
<view class="order-type-selection col" wx:if="{{winOrderType}}" bindtap="onOrderType">
<view>
<view class="order-type-row row con-b align-c">
<view class="order-type-item row con-c align-c {{orderTypeTitle === '全部分类' ? 'order-type-item-active' : ''}}" data-id="全部分类" bindtap="onOrderTypeSelection">
<text>全部分类</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === '门票' ? 'order-type-item-active' : ''}}" data-id="门票" bindtap="onOrderTypeSelection">
<text>门票</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === '餐饮' ? 'order-type-item-active' : ''}}" data-id="餐饮" bindtap="onOrderTypeSelection">
<text>餐饮</text>
</view>
</view>
<view class="order-type-row row con-b align-c">
<view class="order-type-item row con-c align-c {{orderTypeTitle === '影票' ? 'order-type-item-active' : ''}}" data-id="影票" bindtap="onOrderTypeSelection">
<text>影票</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === 'SPA' ? 'order-type-item-active' : ''}}" data-id="SPA" bindtap="onOrderTypeSelection">
<text>SPA</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === '文创' ? 'order-type-item-active' : ''}}" data-id="文创" bindtap="onOrderTypeSelection">
<text>文创</text>
</view>
</view>
</view>
</view> </view>
<view class="container-order"> <view class="container-order">
<view class="status row con-b align-c"> <view class="status row con-b align-c">
<view class="status-item status-item-active row con-c align-c" data-type="1" bindtap="onSelectionStatus"> <block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<text>全部</text> <view class="status-item row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}" data-type="{{index}}" bindtap="onSelectionStatus">
</view> <text>{{item.name}}</text>
<view class="status-item row con-c align-c" data-type="2" bindtap="onSelectionStatus"> </view>
<text>待付款</text> </block>
</view> </view>
<view class="status-item row con-c align-c" data-type="3" bindtap="onSelectionStatus">
<text>待使用</text> <view class="order-list col con-c align-c">
</view> <block wx:for="{{orderList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-type="4" bindtap="onSelectionStatus"> <view class="order-list-item col align-c">
<text>取消/过期</text> <view class="order-list-item-title row con-b align-c">
</view> <view class="row align-c">
<image src=""></image>
<text>{{item.name}}</text>
</view>
<view>
<text class="warning" wx:if="{{item.status === 0}}">待付款</text>
<text class="warning" wx:if="{{item.status === 1}}">待使用</text>
<text class="warning" wx:if="{{item.status === 2}}">待评价</text>
<text class="message" wx:if="{{item.status === 3}}">已取消</text>
<text class="message" wx:if="{{item.status === 4}}">已过期</text>
<text class="message" wx:if="{{item.status === 5}}">已评价</text>
</view>
</view>
<view class="order-list-item-service row con-b align-c" wx:if="{{item.commodity.length === 1}}">
<image class="cover" src=""></image>
<text class="name">精灵鸟理想国单人次票精灵鸟理想国单人次票</text>
<text class="total">{{'x ' + item.total}}</text>
</view>
<view class="order-list-item-service row con-b align-c" wx:if="{{item.commodity.length >= 2}}">
<block wx:for="{{item.commodity}}" wx:for-index="commodityIndex" wx:for-item="commodityItem" wx:key="commodityIndex">
<image class="cover" src=""></image>
</block>
<text class="total">{{'共 ' + item.total + ' 件'}}</text>
</view>
<view class="order-list-item-operation row con-b align-c">
<view class="row align-c">
<text class="amount">实付:</text>
<text class="amount">¥20.00</text>
</view>
<view class="row align-c">
<button wx:if="{{item.status === 0}}" class="delete row con-c align-c">取消订单</button>
<button wx:if="{{item.status >= 3}}" class="delete row con-c align-c">删除订单</button>
<button wx:if="{{item.status === 0}}" class="again row con-c align-c">去支付</button>
<button wx:if="{{item.status === 1}}" class="again row con-c align-c">去使用</button>
<button wx:if="{{item.status === 2}}" class="again row con-c align-c">去评价</button>
<button wx:if="{{item.status === 3}}" class="again row con-c align-c">再次下单</button>
</view>
</view>
</view>
</block>
</view> </view>
</view> </view>
\ No newline at end of file
pages/mine/order/order.wxss
.navigation-order { .navigation-order {
z-index: 1700;
position: fixed;
top: 0;
left: 0;
width: 750rpx; width: 750rpx;
height: 176rpx; height: 176rpx;
padding: 0 24rpx;
background: #FFFFFF; background: #FFFFFF;
} }
.navigation-order image {
width: 32rpx;
height: 32rpx;
}
.order-type {
width: 200rpx;
height: 64rpx;
border-radius: 32rpx;
border: 1px solid #E2E7EF;
}
.order-type text {
margin-right: 8rpx;
font-size: 26rpx;
}
/* 订单类型选择 */
.order-type-selection {
z-index: 1700;
position: fixed;
top: 176rpx;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .65);
}
.order-type-selection > view {
width: 750rpx;
height: 240rpx;
padding-top: 10rpx;
border-radius: 0px 0px 24rpx 24rpx;
background: #FFFFFF;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
color: #959DA9;
}
.order-type-row {
height: 64rpx;
margin-bottom: 40rpx;
padding: 0 40rpx;
}
.order-type-item {
width: 192rpx;
height: 64rpx;
border-radius: 32rpx;
background: #F2F3F5;
}
.order-type-item-active {
background: #86C5E1;
color: #FFFFFF;
}
.container { .container {
position: relative; position: relative;
} }
/* 状态筛选菜单 */
.status { .status {
width: 750rpx; width: 750rpx;
height: 112rpx; height: 112rpx;
padding: 0 34rpx 0 64rpx; padding: 0 34rpx 1rpx 64rpx;
border-bottom: 1px #E2E7EF solid; border-bottom: 1px #E2E7EF solid;
} }
...@@ -20,10 +85,112 @@ ...@@ -20,10 +85,112 @@
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
line-height: 36rpx; line-height: 36rpx;
border-bottom: 4px #FFFFFF solid;
color: #959DA9; color: #959DA9;
} }
.status-item-active { .status-item-active {
color: #000000; height: 112rpx;
border-bottom: 4px #000000 solid; border-bottom: 4px #000000 solid;
color: #000000;
}
/* 订单列表 */
.order-list {
width: 750rpx;
padding-bottom: 120rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
}
.order-list-item {
width: 670rpx;
height: 396rpx;
margin-top: 48rpx;
padding: 20rpx 0 40rpx 0;
border-radius: 4rpx;
background: #FFFFFF;
}
.order-list-item > view {
width: 610rpx;
}
.order-list-item-title .warning {
font-weight: 800;
color: #E66060;
}
.order-list-item-title .message {
font-weight: 800;
color: #C2C7CF;
}
.order-list-item-title image {
display: block;
max-width: 100rpx;
height: 60rpx;
margin-right: 20rpx;
background: #999999;
}
.order-list-item-service {
margin: 34rpx 0 48rpx 0;
}
.order-list-item-service .cover {
display: block;
width: 140rpx;
height: 140rpx;
margin-right: 20rpx;
border-radius: 4px;
background: #999999;
}
.order-list-item-service .name {
width: 376rpx;
margin-left: 12rpx;
font-weight: 800;
}
.order-list-item-service .total {
flex-grow: 1;
height: 36rpx;
text-align: right;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.order-list-item-operation .amount {
height: 36rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #15191F;
}
.order-list-item-operation .delete {
width: 120rpx;
height: 56rpx;
border-radius: 4px;
border: 1px solid #C2C7CF;
font-size: 22rpx;
font-weight: 500;
line-height: 32rpx;
color: #656E7B;
}
.order-list-item-operation .again {
width: 120rpx;
height: 56rpx;
margin-left: 20rpx;
border-radius: 4px;
background: #86C5E1;
font-size: 22rpx;
font-weight: 500;
line-height: 32rpx;
color: #FFFFFF;
} }
\ No newline at end of file
pages/play/service-detail/service-detail.js
...@@ -40,12 +40,28 @@ Page({ ...@@ -40,12 +40,28 @@ Page({
}, },
navigationScroll: 0, navigationScroll: 0,
// 内容类型
contentType: 'evaluate',
// banner 列表数据 // banner 列表数据
banner: [], banner: [],
bannerIndex: 0, bannerIndex: 0,
bannerHeight: 300, bannerHeight: 300,
info: {}, info: {},
detailActivity: [], // 活动
detailCommodity: [], // 商品
detailEvaluate: [], // 评论
isBlack: false, isBlack: false,
sideHeight: 550, sideHeight: 550,
...@@ -53,6 +69,7 @@ Page({ ...@@ -53,6 +69,7 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
options.id = 1
logicData.option = options logicData.option = options
this.queryDetail(Number(options.id)) this.queryDetail(Number(options.id))
}, },
...@@ -77,6 +94,36 @@ Page({ ...@@ -77,6 +94,36 @@ Page({
name: '海错图展馆', name: '海错图展馆',
title: '海错图', title: '海错图',
date: '周一至周日 10:00 - 20:00', date: '周一至周日 10:00 - 20:00',
activity: [
{
cover: '',
title: '亲子自然教育工作坊',
tab: '亲子教育',
time: '7.20-7.25 10:00-11:30',
price: '150',
specialPrice: '100',
}, {
cover: '',
title: '装饰干花工作坊',
tab: '亲子教育',
time: '7.20-7.25 10:00-11:30',
price: '150',
specialPrice: '100',
}
],
commodity: [
{
cover: '',
title: '海错图画册',
price: '150',
specialPrice: '100',
}, {
cover: '',
title: '海错图画册',
price: '150',
specialPrice: '100',
}
],
describe: [ describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-1.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-1.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-2.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-2.png',
...@@ -84,6 +131,17 @@ Page({ ...@@ -84,6 +131,17 @@ Page({
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-4.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-4.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-5.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-5.png',
], ],
evaluate: [
{
avatar: '',
name: '张笑寒',
status: 1,
date: '2020.02.29',
star: 4,
content: '通过数字化形式，运用视频、动画 游戏、交感互动等多种手段，分层呈现画谱中原本二维的文字与图片信息。乾隆挚爱的故宫典藏图谱、清代画师聂璜所著12312313123',
image: [],
}
],
contact: '13316748039' contact: '13316748039'
}, { }, {
id: 2, id: 2,
...@@ -170,6 +228,8 @@ Page({ ...@@ -170,6 +228,8 @@ Page({
} }
] ]
this.setData({ this.setData({
banner: funcDetail[funcIndex].banner, banner: funcDetail[funcIndex].banner,
info: { info: {
...@@ -179,7 +239,10 @@ Page({ ...@@ -179,7 +239,10 @@ Page({
date: funcDetail[funcIndex].date, date: funcDetail[funcIndex].date,
describe: funcDetail[funcIndex].describe, describe: funcDetail[funcIndex].describe,
contact: funcDetail[funcIndex].contact, contact: funcDetail[funcIndex].contact,
} },
detailActivity: funcDetail[funcIndex].activity,
detailCommodity: funcDetail[funcIndex].commodity,
detailEvaluate: funcDetail[funcIndex].evaluate,
}) })
if (this.data.info.id === 6) { if (this.data.info.id === 6) {
...@@ -195,6 +258,29 @@ Page({ ...@@ -195,6 +258,29 @@ Page({
}) })
}, },
/**
* 简介，评价切换
* @function
* @param {object} - event
* @returns
*/
onSelectionContent: function (event) {
let funcContentType = event.currentTarget.dataset.type
switch (funcContentType) {
case 'detail':
this.setData({
contentType: funcContentType
})
break
case 'evaluate':
this.setData({
contentType: funcContentType
})
break
}
},
onContact: function () { onContact: function () {
wx.makePhoneCall({ wx.makePhoneCall({
phoneNumber: this.data.info.contact phoneNumber: this.data.info.contact
......
pages/play/service-detail/service-detail.wxml
<!-- 畅玩 - 商店详情 --> <!-- 畅玩 - 商店详情 -->
<navigation wx:if="{{!isBlack}}" class="navigation" titleText="{{info.name}}" color="#ffffff" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <navigation class="navigation" titleText="{{info.name}}" color="#ffffff" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<navigation wx:if="{{isBlack}}" class="navigation" titleText="{{info.name}}" color="#ffffff" scrollStyle="{{navigationStyleBlack}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container"> <view class="container">
<view id="banner" class="banner"> <view id="banner" class="banner">
...@@ -15,66 +14,168 @@ ...@@ -15,66 +14,168 @@
<swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point> <swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view> </view>
<view class="banner-wave"> <view class="banner-wave">
<image wx:if="{{!isBlack}}" src="/image/ornament-2.png" mode="widthFix"></image> <image src="/image/ornament-2.png" mode="widthFix"></image>
<image wx:if="{{isBlack}}" src="/image/ornament-2-black.png" mode="widthFix"></image>
</view> </view>
</view> </view>
<!-- 明亮样式 --> <view class="commodity">
<view wx:if="{{!isBlack}}" class="detail"> <!-- 详情标题，分享，位置 -->
<view class="detail-title row"> <view class="commodity-title row align-c">
<text>{{info.title}}</text> <text>{{info.title}}</text>
<image src="{{imageBase + 'icon/share-2.png'}}"></image>
<image src="{{imageBase + 'icon/location-2.png'}}" bind:tap="onLocation"></image>
</view> </view>
<view class="detail-other col">
<view class="row align-c"> <!-- 开放时间信息 -->
<image class="detail-other-time" src="./image/time.png"></image> <view class="commodity-other row align-c">
<text>时间</text> <image src="./image/time.png"></image>
<text>{{info.date}}</text> <text>开放时间</text>
<text>{{info.date}}</text>
</view>
<!-- 近期活动 -->
<view class="commodity-card">
<view class="commodity-card-title row con-b align-e">
<text>近期活动</text>
<text>查看全部</text>
</view> </view>
<view class="row align-c" bind:tap="onLocation"> <view class="commodity-card-list row">
<image class="detail-other-location" src="./image/location.png"></image> <block wx:for="{{detailActivity}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<text>地址</text> <view class="commodity-card-item col">
<text>点击查看地址</text> <image src=""></image>
<image class="detail-other-more" src="{{imageBase + 'more.png'}}"></image> <view class="commodity-card-item-title row con-b align-c">
<text>{{item.title}}</text>
<text>{{item.tab}}</text>
</view>
<view class="commodity-card-item-date row align-c">
<image src="{{imageBase + 'icon/clock-2.png'}}"></image>
<text>{{item.time}}</text>
</view>
<view class="commodity-card-item-operation row con-b align-c">
<view class="row align-c">
<text>业主价</text>
<text>免费</text>
<text>{{item.price}}</text>
</view>
<view>
<button class="row con-c align-c">报名</button>
</view>
</view>
</view>
</block>
</view> </view>
</view> </view>
<view class="detail-describe">
<block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <!-- 文创商品 -->
<image src="{{item}}" mode="widthFix"></image> <view class="commodity-card">
</block> <view class="commodity-card-title row con-b align-e">
<text>文创商品</text>
<text>查看全部</text>
</view>
<view class="commodity-card-list row">
<block wx:for="{{detailActivity}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-card-item col">
<image src=""></image>
<view class="commodity-card-item-title row align-c">
<text>{{item.title}}</text>
</view>
<view class="commodity-card-item-operation row con-b align-c">
<view class="row align-c">
<text>业主价</text>
<text>免费</text>
<text>{{item.price}}</text>
</view>
<view>
<button class="row con-c align-c">购买</button>
</view>
</view>
</view>
</block>
</view>
</view> </view>
</view> </view>
<view wx:if="{{!isBlack}}" class="operation"> <!-- 简介，评价 -->
<button class="button row con-c align-c" bindtap="onContact">电话预约</button> <view class="selection-content row">
<view class="row align-c {{contentType === 'detail' ? 'selection-content-item-active' : 'selection-content-item'}}" data-type="detail" bindtap="onSelectionContent">
<text>简介</text>
</view>
<view class="row align-c {{contentType === 'evaluate' ? 'selection-content-item-active' : 'selection-content-item'}}" data-type="evaluate" bindtap="onSelectionContent">
<text>评价</text>
</view>
</view> </view>
<!-- 黑暗样式 --> <!-- 简介 -->
<view wx:if="{{isBlack}}" class="detail detail-black"> <view class="detail" wx:if="{{contentType === 'detail'}}">
<view class="detail-title title-black row"> <block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<text>{{info.title}}</text> <image src="{{item}}" mode="widthFix"></image>
</view> </block>
<view class="detail-other other-black col"> </view>
<view class="row align-c">
<image class="detail-other-time" src="./image/time.png"></image> <!-- 评价 -->
<text>时间</text> <view class="evaluate" wx:if="{{contentType === 'evaluate'}}">
<text>{{info.date}}</text> <view class="evaluate-option row con-b align-c">
<view class="evaluate-option-item row align-c">
<image src="{{imageBase + 'icon/evaluate-1.png'}}"></image>
<text>服务</text>
<text>0.5</text>
<text>分</text>
</view> </view>
<view class="row align-c" bind:tap="onLocation"> <view class="evaluate-option-item row align-c">
<image class="detail-other-location" src="./image/location.png"></image> <image src="{{imageBase + 'icon/shop-1.png'}}"></image>
<text>地址</text> <text>产品</text>
<text>点击查看地址</text> <text>0.5</text>
<image class="detail-other-more" src="{{imageBase + 'more-g.png'}}"></image> <text>分</text>
</view>
<view class="evaluate-option-item row align-c">
<image src="{{imageBase + 'icon/album-1.png'}}"></image>
<text>环境</text>
<text>0.5</text>
<text>分</text>
</view> </view>
</view> </view>
<view class="detail-describe">
<block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <view class="evaluate-list col">
<image src="{{item}}" mode="widthFix"></image> <block wx:for="{{detailEvaluate}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="evaluate-item col">
<view class="row">
<image class="evaluate-item-avatar" src="{{item}}" mode="widthFix"></image>
<view class="evaluate-item-info">
<view class="evaluate-item-info-text row align-c">
<text>{{item.name}}</text>
<text>业主</text>
<text>{{item.date}}</text>
</view>
<view class="evaluate-item-info-star row align-c">
<block wx:for="{{item.star}}" wx:for-index="indexStar" wx:for-item="itemStar" wx:key="indexStar">
<image src="{{imageBase + 'icon/star-1.png'}}"></image>
</block>
</view>
</view>
</view>
<view class="evaluate-item-content">
<view>
<text>{{item.content}}</text>
</view>
<view class="evaluate-item-content-more">
<text>...　</text>
<text>全文</text>
</view>
</view>
<view class="evaluate-item-album">
<block wx:for="{{6}}" wx:for-index="indexAlbum" wx:for-item="itemAlbum" wx:key="indexAlbum">
<image src=""></image>
</block>
</view>
</view>
</block> </block>
</view> </view>
</view> </view>
<view wx:if="{{isBlack}}" class="operation operation-black"> <!-- 操作 -->
<view class="operation">
<button class="button row con-c align-c" bindtap="onContact">电话预约</button> <button class="button row con-c align-c" bindtap="onContact">电话预约</button>
</view> </view>
......
pages/play/service-detail/service-detail.wxss
...@@ -55,69 +55,10 @@ ...@@ -55,69 +55,10 @@
height: 60rpx; height: 60rpx;
} }
/* 详情样式 */
.detail {
padding-bottom: 160rpx;
}
.detail-black {
background: #1C1C25;
}
.detail-title {
width: 670rpx;
min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #15191F;
line-height: 76rpx;
}
.title-black { .title-black {
color: #FFFFFF; color: #FFFFFF;
} }
.detail-other {
margin-top: 32rpx;
padding: 0 40rpx 48rpx 40rpx;
border-bottom: 1px #E2E7EF solid;
}
.detail-other view {
margin-top: 24rpx;
}
.detail-other-time,
.detail-other-location {
width: 36rpx;
height: 36rpx;
margin-right: 12rpx;
}
.detail-other view text:nth-child(2) {
width: 60rpx;
height: 42rpx;
margin-right: 32rpx;
font-size: 30rpx;
font-weight: 300;
color: #959DA9;
line-height: 42rpx;
}
.detail-other view text:nth-child(3) {
height: 40rpx;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
}
.detail-other-more {
width: 32rpx;
height: 32rpx;
margin-left: 318rpx;
}
.other-black { .other-black {
border-bottom: 1px #3a3a40 solid; border-bottom: 1px #3a3a40 solid;
} }
...@@ -126,12 +67,12 @@ ...@@ -126,12 +67,12 @@
color: #FFFFFF; color: #FFFFFF;
} }
.detail-describe { .commodity-describe {
position: relative; position: relative;
width: 750rpx; width: 750rpx;
} }
.detail-describe image { .commodity-describe image {
display: block; display: block;
width: 750rpx; width: 750rpx;
} }
...@@ -193,4 +134,390 @@ ...@@ -193,4 +134,390 @@
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
margin: 16rpx; margin: 16rpx;
}
/* 二期整理样式 */
.commodity-title {
width: 670rpx;
min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #15191F;
line-height: 76rpx;
}
.commodity-title text {
flex-grow: 1;
}
.commodity-title image {
width: 40rpx;
height: 40rpx;
margin-left: 24rpx;
}
.commodity-other {
padding: 50rpx 40rpx;
border-bottom: 1px #E2E7EF solid;
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
}
.commodity-other image {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
}
.commodity-other text:nth-child(2) {
margin-right: 16rpx;
color: #959DA9;
}
/* 近期活动，文创商品 */
.commodity-card-title {
margin-top: 80rpx;
padding: 0 40rpx;
}
.commodity-card-title text:nth-child(1) {
font-size: 40rpx;
font-weight: 800;
}
.commodity-card-title text:nth-child(2) {
font-size: 26rpx;
color: #959DA9;
}
.commodity-card-list {
width: 710rpx;
margin: 50rpx 0 0 40rpx;
overflow: scroll;
}
.commodity-card-list::-webkit-scrollbar {
width: 0;
}
.commodity-card-item {
width: 562rpx;
margin-right: 24rpx;
padding-bottom: 32rpx;
border-radius: 4px;
background: #F5F6F8;
}
.commodity-card-item > image {
width: 562rpx;
height: 316rpx;
background: #999999;
}
.commodity-card-item-title {
height: 44rpx;
margin-top: 32rpx;
padding: 0 32rpx;
}
.commodity-card-item-title text:nth-child(1) {
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.commodity-card-item-title text:nth-child(2) {
width: 96rpx;
height: 32rpx;
border-radius: 4px;
border: 1px solid #86C5E1;
background: #EAF0F5;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 24rpx;
color: #86C5E1;
}
.commodity-card-item-date {
width: 498rpx;
height: 40rpx;
margin-top: 8rpx;
padding: 0 32rpx;
}
.commodity-card-item-date image {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.commodity-card-item-date text {
height: 40rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 40rpx;
color: #656E7B;
}
.commodity-card-item-operation {
margin-top: 16rpx;
padding: 0 32rpx;
}
.commodity-card-item-operation text:nth-child(1) {
width: 78rpx;
height: 32rpx;
margin-right: 12rpx;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4px;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 28rpx;
color: #E8D0AF;
}
.commodity-card-item-operation text:nth-child(2) {
margin-right: 16rpx;
text-align: center;
font-size: 30rpx;
font-weight: 800;
line-height: 40rpx;
color: #15191F;
}
.commodity-card-item-operation text:nth-child(3) {
text-align: center;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #C2C7CF;
}
.commodity-card-item-operation button {
flex-grow: 1;
width: 132rpx;
height: 56rpx;
border-radius: 4px;
background: #86C5E1;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
color: #FFFFFF;
}
/* 简介，评论 */
.selection-content {
width: 750rpx;
height: 64rpx;
margin-top: 80rpx;
padding: 0 40rpx;
border-bottom: 1px #E2E7EF solid;
}
.selection-content-item {
width: 60rpx;
height: 64rpx;
margin-right: 64rpx;
border-bottom: 4rpx rgba(0, 0, 0, 0) solid;
font-size: 30rpx;
line-height: 44rpx;
color: #656E7B;
}
.selection-content-item-active {
width: 60rpx;
height: 64rpx;
margin-right: 64rpx;
border-bottom: 4rpx #15191F solid;
font-size: 30rpx;
font-weight: 800;
line-height: 44rpx;
color: #15191F;
}
/* 详情 */
.detail {
padding-bottom: 160rpx;
}
.detail image {
display: block;
width: 750rpx;
}
/* 评论 */
.evaluate {
padding-bottom: 160rpx;
}
.evaluate-option {
width: 750rpx;
margin: 62rpx 0 16rpx 0;
padding: 0 40rpx;
}
.evaluate-option-item image {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
.evaluate-option-item text:nth-child(2) {
width: 44rpx;
height: 32rpx;
margin-right: 8rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
}
.evaluate-option-item text:nth-child(3) {
height: 40rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 40rpx;
color: #15191F;
}
.evaluate-option-item text:nth-child(4) {
height: 40rpx;
font-size: 20rpx;
font-weight: 500;
line-height: 40rpx;
color: #15191F;
}
/* 评论详情 */
.evaluate-item {
width: 670rpx;
min-height: 292rpx;
margin: 48rpx 40rpx 0 40rpx;
}
.evaluate-item-avatar {
width: 80rpx;
height: 80rpx;
margin-right: 16rpx;
border-radius: 50%;
background: #999999;
}
.evaluate-item-info-text {
width: 574rpx;
}
.evaluate-item-info-text text:nth-child(1) {
height: 44rpx;
margin-right: 12rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.evaluate-item-info-text text:nth-child(2) {
width: 60rpx;
height: 32rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 28rpx;
color: #E8D0AF;
}
.evaluate-item-info-text text:nth-child(3) {
flex-grow: 1;
height: 32rpx;
text-align: right;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
}
.evaluate-item-info-star image {
width: 28rpx;
height: 28rpx;
margin-right: 4rpx;
}
.evaluate-item-content {
position: relative;
width: 670rpx;
max-height: 132rpx;
margin-top: 32rpx;
overflow: hidden;
font-size: 26rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.evaluate-item-content-more {
position: absolute;
bottom: 0;
right: 18rpx;
width: 106rpx;
height: 44rpx;
background: #FFFFFF;
text-align: right;
font-size: 26rpx;
font-weight: 400;
line-height: 44rpx;
}
.evaluate-item-content-more text:nth-child(1) {
color: #15191F;
}
.evaluate-item-content-more text:nth-child(2) {
color: #86C5E1;
}
.evaluate-item-album {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
padding: 32rpx 0 48rpx 0;
border-bottom: 1px #E2E7EF solid;
}
.evaluate-item-album:last-child {
border: none;
}
.evaluate-item-album image {
width: 160rpx;
height: 160rpx;
margin: 0 10rpx 10rpx 0;
border-radius: 4px;
background: #999999;
}
.evaluate-item-album image:nth-child(4n) {
margin-right: 0;
border: 1px red solid;
} }
\ No newline at end of file
project.config.json
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "2.10.0", "libVersion": "2.10.0",
"appid": "wx4933acc52682049e", "appid": "wx37a9b7a3d92029f2",
"projectname": "%E4%B8%96%E8%8C%82%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%8C%E6%9C%9F", "projectname": "%E4%B8%96%E8%8C%82%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%8C%E6%9C%9F",
"debugOptions": { "debugOptions": {
"hidedInDevtools": [] "hidedInDevtools": []
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment