Skip to content

严立 / mini-shimao

Go to a project
Commit aa0acf14 by 严立
Options

LL - 评论功能

parent 05f095e5
Inline Side-by-side
Showing with 340 additions and 67 deletions
pages/commodity/project-detail/project-detail.js
let App = getApp()
Page({
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '600rpx',
},
navigationScroll: 0,
navbarTitle: '',
banner: '',
bgColor: '',
buyText: '',
unitText: '',
shopInfo: {},
userInfo: {},
commodityList: [],
},
......@@ -36,7 +57,7 @@ Page({
case 3:
this.setData({
navbarTitle: '儿童营地',
navbarTitle: '儿童营地入园购票',
banner: 'service/detail-banner-3.png',
bgColor: '#F6DADA',
buyText: '购买门票',
......@@ -309,6 +330,11 @@ Page({
* @returns
*/
onBuy: function (event) {
if (this.data.shopInfo.appId === 7) {
this.onCommodityDetail(event)
return
}
let funcCommodityInfo = event.currentTarget.dataset.item
// 补充必要参数
......@@ -322,4 +348,20 @@ Page({
url: '/pages/pay/order-input/order-input?type=' + funcCommodityInfo.typeId
})
},
onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
},
})
\ No newline at end of file
pages/commodity/project-detail/project-detail.wxml
<navigation class="navigation" titleText="{{navbarTitle}}" backIcon="/image/back.png"></navigation>
<navigation class="navigation" titleText="{{navbarTitle}}" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container con-s" style="background: {{bgColor}}">
<view class="background-img">
......@@ -6,7 +6,7 @@
</view>
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="project-wrapper col" data-item="{{item}}" bindtap="onCommodityDetail">
<view class="project-wrapper col" data-item="{{item}}" bindtap="onBuy">
<view class="project-cover">
<image src="{{item.cover}}"></image>
</view>
......
pages/commodity/project/project.js
let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '600rpx',
},
navigationScroll: 0,
banner: [],
bannerIndex: 0,
......@@ -29,48 +48,35 @@ Page({
},
onLoad: function (options) {
this.queryBanner()
for (let i = 0, l = this.data.shopAppId.length; i < l; i++) {
this.queryBanner(this.data.shopAppId[i].appId, i)
this.queryPassCheck(this.data.shopAppId[i].appId, this.data.shopAppId[i].commodityType, i)
}
},
queryBanner: function (funcShopAppId, funcIndex) {
let funcType = ''
switch (funcShopAppId) {
case 1:
funcType = 3
break
case 3:
funcType = 2
if (funcIndex === 3) funcIndex = 2
break
case 7:
funcType = 4
break
}
queryBanner: function () {
App.wxRequest({
url: '/api/v1/banner/getOfficeByBanner',
data: {
'smColumnId': funcType,
'smColumnId': 1,
},
success: (response) => {
let funcResponse = response.data
let funcBanner = this.data.banner
if (funcResponse.length) {
funcBanner[funcIndex] = funcResponse[0].img
} else {
funcBanner[funcIndex] = ''
let funcList = []
for (let i = 0, l = funcResponse.length; i < l; i++) {
let funcItem = {
'id': funcResponse[i].id,
'cover': funcResponse[i].img
}
funcList.push(funcItem)
}
this.setData({
banner: funcBanner
banner: funcList
})
console.log(funcBanner)
console.log(this.data.banner)
}
})
},
......@@ -262,6 +268,22 @@ Page({
})
},
onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
},
/**
* banner 切换图片同步自定义标识组件
* @function
......
pages/commodity/project/project.wxml
<navigation class="navigation" titleText="所有项目服务" color="#FFFFFF" backIcon="/image/back-w.png"></navigation>
<navigation class="navigation" titleText="所有项目服务" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container">
<view class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="eventSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item" data-item="{{item}}" bindtap="bannerClick">
<image class="banner-swiper-image" src="{{item}}"></image>
<image class="banner-swiper-image" src="{{item.cover}}"></image>
</swiper-item>
</block>
</swiper>
......@@ -24,7 +24,7 @@
</view>
<view class="commodity-list">
<block wx:for="{{shopCommodityData[0]}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row">
<view class="commodity-item row" data-index="{{0}}" data-itemindex="{{index}}" bindtap="onBuy">
<view class="commodity-cover">
<image src="{{item.cover}}"></image>
</view>
......@@ -74,7 +74,7 @@
</block>
<view class="commodity-price-operation row con-e align-c">
<button class="row con-c align-c" data-index="{{0}}" data-itemindex="{{index}}" bindtap="onBuy">购买门票</button>
<button class="row con-c align-c">购买门票</button>
</view>
</view>
</view>
......@@ -90,7 +90,7 @@
</view>
<view class="commodity-list">
<block wx:for="{{shopCommodityData[1]}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row">
<view class="commodity-item row" data-index="{{1}}" data-itemindex="{{index}}" bindtap="onBuyService">
<view class="commodity-cover">
<image src="{{item.cover}}"></image>
</view>
......@@ -160,7 +160,7 @@
</block>
<view class="commodity-price-operation row con-e align-c">
<button class="row con-c align-c" data-index="{{1}}" data-itemindex="{{index}}" bindtap="onBuyService">查看服务</button>
<button class="row con-c align-c">查看服务</button>
</view>
</view>
</view>
......@@ -176,7 +176,7 @@
</view>
<view class="commodity-list">
<block wx:for="{{shopCommodityData[2]}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row">
<view class="commodity-item row" data-index="{{2}}" data-itemindex="{{index}}" bindtap="onBuy">
<view class="commodity-cover">
<image src="{{item.cover}}"></image>
</view>
......@@ -226,14 +226,14 @@
</block>
<view class="commodity-price-operation row con-e align-c">
<button class="row con-c align-c" data-index="{{2}}" data-itemindex="{{index}}" bindtap="onBuy">购买门票</button>
<button class="row con-c align-c">购买门票</button>
</view>
</view>
</view>
</block>
<block wx:for="{{shopCommodityData[3]}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row">
<view class="commodity-item row" data-index="{{3}}" data-itemindex="{{index}}" bindtap="onBuy">
<view class="commodity-cover">
<image src="{{item.cover}}"></image>
</view>
......@@ -283,7 +283,7 @@
</block>
<view class="commodity-price-operation row con-e align-c">
<button class="row con-c align-c" data-index="{{3}}" data-itemindex="{{index}}" bindtap="onBuy">购买门票</button>
<button class="row con-c align-c">购买门票</button>
</view>
</view>
</view>
......
pages/home/guide/js/point.js
......@@ -110,7 +110,7 @@ let output = [
}, {
x: 2794,
y: 600,
id: '',
id: 3,
name: '儿童营地',
icon: './image/icon/13.png',
card: 'guide/card/13.png',
......
pages/pay/coupon-detail/coupon-detail.wxss
.container {
margin-top: 150rpx;
margin-top: 200rpx;
padding-bottom: 196rpx;
}
.list-wrapper {
......
pages/pay/order-input/order-input.js
......@@ -874,6 +874,7 @@ Page({
},
success: (response) => {
if (/ 商品不存在/.test(response.data.msg)) {
wx.setStorageSync('shoppingCartBuffer', [])
wx.lin.showToast({
title: '商品已下架，请重新下单。',
icon: 'error',
......@@ -887,6 +888,7 @@ Page({
}
if (/价格不一致/.test(response.data.msg)) {
wx.setStorageSync('shoppingCartBuffer', [])
wx.lin.showToast({
title: '价格已变更，请重新下单。',
icon: 'error',
......
pages/play/service-detail/service-detail.js
......@@ -9,6 +9,7 @@ let logicData = {
Page({
data: {
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
option: {},
// 弹出控制
......@@ -61,7 +62,7 @@ Page({
detailActivity: [], // 活动
detailCommodity: [], // 商品
detailEvaluate: [], // 评论
evaluateAlbum: [],
isBlack: false,
......@@ -74,6 +75,7 @@ Page({
winActivity: false, // 近期活动
winCommodity: false, // 商品列表
winCommodityMenu: false,
winEvaluateAlbum: false,
},
onLoad: function (options) {
......@@ -149,7 +151,6 @@ Page({
* @returns
*/
queryDetail: function (funcAppId) {
let that = this
let funcIndex = 0
// 预设数据
let funcDetail = [
......@@ -313,7 +314,7 @@ Page({
// 查询景点信息
App.wxRequest({
url: '/api/v1/park/getList',
success: function(res) {
success: (res) => {
let funcData = res.list
funcDetail.forEach(shop => {
funcData.forEach(item => {
......@@ -326,7 +327,7 @@ Page({
}
})
})
that.setData({
this.setData({
banner: funcDetail[funcIndex].banner,
shareImage: funcDetail[funcIndex].shareImage,
info: {
......@@ -519,10 +520,70 @@ Page({
'pageSize': '-1',
'officeId': this.data.shopInfo.id
},
success: (res) => {
let funcData = res.data
success: (response) => {
let funcResponse = response.data
let funcList = []
for (let i = 0, l = funcResponse.list.length; i< l; i++) {
let funcItem = {
'star': 4,
'scoreService': funcResponse.list[i].environmentalEvaluation, // 服务评价
'scoreCommodity': funcResponse.list[i].productEvaluation, // 商品评价
'scoreEnvironmental': funcResponse.list[i].environmentalEvaluation, // 环境评价
'userName': funcResponse.list[i].name,
'userAvatar': funcResponse.list[i].headImg,
'userType': funcResponse.list[i].userType,
'userAlbum': funcResponse.list[i].imgUrls, // 评论图册
'date': funcResponse.list[i].createDate,
'content': funcResponse.list[i].content,
'isMore': false,
}
funcItem = {
'isMore': false,
'star': 4,
'scoreService': 3,
'scoreCommodity': 2,
'scoreEnvironmental': 1,
'userName': '用户名称',
'userAvatar': 'https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=6a992d9158ef2273c2e9d0a77fbbbe88&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fpic%2Fitem%2F4d086e061d950a7be03653981dd162d9f2d3c96f.jpg',
'userType': 0,
'userAlbum': [
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=975216563,2695721503&fm=111&gp=0.jpg',
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2856846879,389279115&fm=26&gp=0.jpg',
'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2032511182,3555754069&fm=26&gp=0.jpg',
'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2032511182,3555754069&fm=26&gp=0.jpg',
'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2032511182,3555754069&fm=26&gp=0.jpg',
],
'date': '2020.02.09',
'content': '/sd12i301!@(#*)(#Updjs',
}
funcItem.star = Math.floor((funcItem.scoreService + funcItem.scoreCommodity + funcItem.scoreEnvironmental) / 3)
funcList.push(funcItem)
}
this.setData({
detailEvaluate: funcList
})
const funcQuery = wx.createSelectorQuery()
funcQuery.selectAll('.evaluate-item-content-mark').boundingClientRect()
funcQuery.exec((response) => {
let funcContentHeight = 88 * wx.getStorageSync('unitProportion')
let funcEvaluate = this.data.detailEvaluate
let funcTextHeight = response[0]
console.log(funcContentHeight)
console.log(funcTextHeight)
for (let i = 0, l = funcTextHeight.length; i < l; i++) {
if (funcContentHeight > funcTextHeight[i].height) {
funcEvaluate[i].isMore = true
}
}
this.setData({
detailEvaluate: funcData.list
detailEvaluate: funcEvaluate
})
})
}
})
......@@ -711,4 +772,54 @@ Page({
url: '/pages/play/movie/movie',
})
},
/**
* 评论查看全部
* @function
* @param
* @returns
*/
onEvaluateMore: function (event) {
let funcItem = event.currentTarget.dataset.item
let funcIndex = event.currentTarget.dataset.index
let funcEvaluate = this.data.detailEvaluate
funcEvaluate[funcIndex].isMore = true
this.setData({
detailEvaluate: funcEvaluate
})
console.log(funcItem)
},
/**
* 评论查看相册
* @function
* @param
* @returns
*/
onEvaluateAlbum: function (event) {
console.log('onEvaluateAlbum')
let funcItem = event.currentTarget.dataset.item
let funcIndex = event.currentTarget.dataset.index
this.setData({
evaluateAlbum: funcItem.userAlbum,
evaluateAlbumActive: funcIndex,
winEvaluateAlbum: true
})
},
/**
* 评论相册隐藏
* @function
* @param
* @returns
*/
onHiddenEvaluateAlbum: function () {
this.setData({
winEvaluateAlbum: false
})
},
})
\ No newline at end of file
pages/play/service-detail/service-detail.wxml
<!-- 畅玩 - 商店详情 -->
<navigation class="navigation" titleText="{{info.title}}" color="#ffffff" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<navigation class="navigation" titleText="{{info.title}}" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container" wx:if="{{option.id !== '2'}}">
<view id="banner" class="banner">
......@@ -79,6 +78,7 @@
<block wx:if="{{detailActivity.length === 0}}">
<view class="commodity-card-item-nothing col con-c align-c">
<image src="{{imageBase + 'icon/fireworks-2.png'}}"></image>
<text>近期暂无活动安排</text>
</view>
</block>
......@@ -166,19 +166,19 @@
<view class="evaluate-option-item row align-c">
<image src="{{imageBase + 'icon/evaluate-1.png'}}"></image>
<text>服务</text>
<text>0.5</text>
<text>{{officeServiceText}}</text>
<text>分</text>
</view>
<view class="evaluate-option-item row align-c">
<image src="{{imageBase + 'icon/shop-1.png'}}"></image>
<text>产品</text>
<text>0.5</text>
<text>{{officeProductText}}</text>
<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>{{officeEnvironmentalText}}</text>
<text>分</text>
</view>
</view>
......@@ -187,35 +187,47 @@
<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>
<image class="evaluate-item-avatar" src="{{item.userAvatar}}" mode="widthFix"></image>
<view class="evaluate-item-info">
<view class="evaluate-item-info-text row align-c">
<text>{{item.name}}</text>
<text>{{item.userName}}</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>
<image src="{{imageBase + 'icon/star-1.png'}}" data-item="{{item}}"></image>
</block>
</view>
</view>
</view>
<view class="evaluate-item-content">
<view>
<!-- 评论隐藏样式 -->
<view class="evaluate-item-content" wx:if="{{!item.isMore}}">
<view class="evaluate-item-content-mark">
<text>{{item.content}}</text>
</view>
<!-- <view class="evaluate-item-content-more">
<view class="evaluate-item-content-more" data-item="{{item}}" data-index="{{index}}" bindtap="onEvaluateMore">
<text>...　</text>
<text>全文</text>
</view> -->
</view>
</view>
<!-- 评论展开样式 -->
<view class="evaluate-item-content-whole" wx:if="{{item.isMore}}">
<view>
<text>{{item.content}}</text>
</view>
</view>
<view class="evaluate-item-album">
<block wx:for="{{item.imgUrls}}" wx:for-index="indexAlbum" wx:for-item="itemAlbum" wx:key="indexAlbum">
<image src="{{itemAlbum}}" bindtap="onPreviewImage" data-index="{{index}}" data-url="{{itemAlbum}}"></image>
<block wx:for="{{item.userAlbum}}" wx:for-index="indexAlbum" wx:for-item="itemAlbum" wx:key="indexAlbum">
<image wx:if="{{indexAlbum < 4}}" src="{{itemAlbum}}" data-index="{{indexAlbum}}" data-item="{{item}}" bindtap="onEvaluateAlbum"></image>
</block>
<view wx:if="{{item.userAlbum.length > 4}}" class="evaluate-item-album-more row con-c align-c" data-index="{{3}}" data-item="{{item}}" bindtap="onEvaluateAlbum">
<text>{{'+' + (item.userAlbum.length - 4)}}</text>
</view>
</view>
</view>
</block>
......@@ -427,3 +439,14 @@
</button>
</view>
</view>
<!-- 查看相册 -->
<view class="full-screen-album" wx:if="{{winEvaluateAlbum}}" bindtap="onHiddenEvaluateAlbum" >
<swiper circular current="{{evaluateAlbumActive}}" class="full-screen-album-swiper" duration="500">
<block wx:for="{{evaluateAlbum}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="album-item row con-c align-c">
<image class="album-image" src="{{item}}" mode="aspectFit"></image>
</swiper-item>
</block>
</swiper>
</view>
\ No newline at end of file
pages/play/service-detail/service-detail.wxss
......@@ -238,6 +238,22 @@
background: #F5F6F8;
}
.commodity-card-item-nothing image {
display: block;
width: 96rpx;
height: 76rpx;
}
.commodity-card-item-nothing text {
width: 240rpx;
height: 42rpx;
margin-top: 40rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 42rpx;
color: #959DA9;
}
.commodity-card-item {
width: 562rpx;
margin-right: 24rpx;
......@@ -599,6 +615,7 @@
}
/* 评论详情 */
.evaluate-item {
position: relative;
width: 670rpx;
min-height: 292rpx;
margin: 48rpx 40rpx 0 40rpx;
......@@ -657,6 +674,7 @@
.evaluate-item-content {
position: relative;
width: 670rpx;
min-height: 88rpx;
max-height: 132rpx;
margin-top: 32rpx;
overflow: hidden;
......@@ -667,6 +685,18 @@
color: #15191F;
}
.evaluate-item-content-whole {
position: relative;
width: 670rpx;
min-height: 132rpx;
margin-top: 32rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.evaluate-item-content-more {
position: absolute;
bottom: 0;
......@@ -690,6 +720,7 @@
}
.evaluate-item-album {
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: row;
......@@ -712,7 +743,46 @@
.evaluate-item-album image:nth-child(4n) {
margin-right: 0;
border: 1px red solid;
}
.evaluate-item-album-more {
position: absolute;
right: 0;
width: 160rpx;
height: 160rpx;
margin: 0 0 10rpx 0;
border-radius: 4px;
background: rgba(0, 0, 0, .4);
}
.evaluate-item-album-more text {
height: 53rpx;
font-size: 38rpx;
font-weight: 400;
line-height: 52rpx;
color: #FFFFFF;
}
/* 评论相册样式 */
.full-screen-album {
z-index: 2000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
}
.full-screen-album-swiper,
.album-item {
width: 750rpx;
height: 100%;
}
.album-image {
width: 750rpx;
min-height: 100%;
}
/* 价格样式 */
......
pages/play/service-sell/service-sell.js
......@@ -49,7 +49,7 @@ Page({
let funcItem = {
'name': funcResponse.name,
'time': funcResponse.spaMins,
'time': funcResponse.spaMins + 'mins',
'address': '元养水韵SPA',
'content': funcResponse.particulars,
......
pages/play/service-sell/service-sell.wxml
......@@ -30,7 +30,7 @@
<view class="time-address-title">
<text>时长</text>
</view>
<view class="time-address">
<view class="time-address" wx:if="{{serviceInfo.time}}">
<text>{{serviceInfo.time}}</text>
</view>
</view>
......
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