Skip to content

严立 / mini-shimao

Go to a project
Commit 7291410d by 严立
Options

评论页面优化

parent cde5b2e5
Inline Side-by-side
Showing with 231 additions and 259 deletions
app.json
......@@ -66,6 +66,7 @@
"m-button-bottom": "./component/m-button-bottom/m-button-bottom",
"m-checkbox": "./component/m-checkbox/m-checkbox",
"m-dialog": "./component/m-dialog/m-dialog",
"m-image-picker": "./component/m-image-picker/m-image-picker",
"m-input": "./component/m-input/m-input",
"m-nav": "./component/m-nav/m-nav",
"m-popup": "./component/m-popup/m-popup",
......@@ -77,8 +78,7 @@
"l-icon": "./miniprogram_npm/lin-ui/icon/index",
"l-collapse": "./miniprogram_npm/lin-ui/collapse/index",
"l-collapse-item": "./miniprogram_npm/lin-ui/collapse-item/index",
"l-textarea": "./miniprogram_npm/lin-ui/textarea/index",
"l-image-picker": "./miniprogram_npm/lin-ui/image-picker/index"
"l-textarea": "./miniprogram_npm/lin-ui/textarea/index"
},
"window": {
"navigationStyle": "custom",
......
component/m-image-picker/image/remove.png
component/m-image-picker/image/remove.png

2.9 KB | W: | H:

component/m-image-picker/image/remove.png

2.16 KB | W: | H:

component/m-image-picker/image/remove.png
component/m-image-picker/image/remove.png
component/m-image-picker/image/remove.png
component/m-image-picker/image/remove.png
  • 2-up
  • Swipe
  • Onion skin
component/m-image-picker/m-image-picker.js
......@@ -12,6 +12,7 @@ Component({
maxSelection: 9,
allowFormat: ['.jpg', '.jpeg', '.png', '.bmp'],
allowFormatRegExp: {},
imageMode: 'aspectFill',
selectionImageList: [],
},
......@@ -94,20 +95,20 @@ Component({
// 检查图片格式
let funcFormatInspectResult = this.imageFormatInspect(funcList)
if (funcFormatInspectResult.errorImage.length > 0) {
this.triggerEvent('error', { type: 'format', images: funcFormatInspectResult } )
this.eventErrorFormat(funcFormatInspectResult.errorImage)
}
// 检查图片大小
let funcSizeInspectResult = this.imageSizeInspect(funcList)
let funcSizeInspectResult = this.imageSizeInspect(funcFormatInspectResult.passImage)
if (funcSizeInspectResult.errorImage.length > 0) {
this.triggerEvent('error', { type: 'size', images: funcSizeInspectResult } )
this.eventErrorSize(funcSizeInspectResult.errorImage)
}
this.setData({
selectionImageList: this.data.selectionImageList.concat(funcFormatInspectResult.passImage)
selectionImageList: this.data.selectionImageList.concat(funcSizeInspectResult.passImage)
})
console.log(this.data.selectionImageList)
this.triggerEvent('change', { type: 'change', images: this.data.selectionImageList } )
this.eventChange()
},
fail: (response) => {
console.log(response)
......@@ -125,10 +126,35 @@ Component({
selectionImageList: funcSelectionImageList
})
this.triggerEvent('remove', { type: 'remove', images: [funcRemoveImage] } )
this.eventRemove(funcRemoveImage)
this.eventChange()
return
}
}
},
eventChange: function () {
console.log('[m-image-picker] eventChange')
console.log(this.data.selectionImageList)
this.triggerEvent('change', { type: 'change', images: this.data.selectionImageList } )
},
eventRemove: function (funcRemoveImage) {
console.log('[m-image-picker] eventRemove')
console.log(funcRemoveImage)
this.triggerEvent('remove', { type: 'remove', images: funcRemoveImage } )
},
eventErrorFormat: function (funcErrorImageList) {
console.log('[m-image-picker] eventErrorFormat')
console.log(funcErrorImageList)
this.triggerEvent('error', { type: 'format', images: funcErrorImageList } )
},
eventErrorSize: function (funcErrorImageList) {
console.log('[m-image-picker] eventErrorSize')
console.log(funcErrorImageList)
this.triggerEvent('error', { type: 'size', images: funcErrorImageList } )
},
}
})
component/m-image-picker/m-image-picker.wxml
......@@ -3,7 +3,7 @@
<view class="image-picker-selected-item">
<image class="image-picker-selected-image" src="{{item.path}}"></image>
<view class="image-picker-remove row cc ac" data-item="{{item}}" bindtap="onRemoveSelectedImage">
<image src="./image/remove.png"></image>
<image src="./image/remove.png" mode="{{imageMode}}"></image>
</view>
</view>
</block>
......
component/m-image-picker/m-image-picker.wxss
......@@ -20,9 +20,8 @@
position: absolute;
top: -30rpx;
right: -30rpx;
width: 60rpx;
height: 60rpx;
border: 1px red solid;
width: 64rpx;
height: 64rpx;
}
.image-picker-remove > image {
......
image/icon/star-1.png
image/icon/star-1.png

368 Bytes | W: | H:

image/icon/star-1.png

2.09 KB | W: | H:

image/icon/star-1.png
image/icon/star-1.png
image/icon/star-1.png
image/icon/star-1.png
  • 2-up
  • Swipe
  • Onion skin
image/star-gray.png
image/star-gray.png

482 Bytes | W: | H:

image/star-gray.png

2.07 KB | W: | H:

image/star-gray.png
image/star-gray.png
image/star-gray.png
image/star-gray.png
  • 2-up
  • Swipe
  • Onion skin
image/star-yellow.png
image/star-yellow.png

472 Bytes | W: | H:

image/star-yellow.png

2.09 KB | W: | H:

image/star-yellow.png
image/star-yellow.png
image/star-yellow.png
image/star-yellow.png
  • 2-up
  • Swipe
  • Onion skin
pages/pay/order-comment/order-comment.js
......@@ -5,12 +5,9 @@ Page({
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
scoreServe: 0, // 服务分数
scoreServeText: '0.0',
scoreProduct: 0, // 产品分数
scoreProductText: '0.0',
scoreEnvironment: 0, // 环境分数
scoreEnvironmentText: '0.0',
content: '', // 评价内容,
imgUrls: [], // 评价图片本地路径
orderInfo: {
id: '',
......@@ -18,13 +15,15 @@ Page({
amount: '',
commodity: []
},
goodsQuantity: 0,
fileResults: [],
evaluateContent: '', // 评价内容,
evaluateAlbum: [],
evaluateAlbumTemp: [],
},
onLoad: function (options) {
console.log(options)
let pageFrom = options.pageFrom
this.setData({
orderInfo: Object.assign(this.data.orderInfo, { 'id': options.id }),
......@@ -137,229 +136,192 @@ Page({
})
},
/**
* 评价分数
* @function
* @param
* @returns
*/
onChangeScore: function (event) {
// type 1: 服务评价 2: 产品评价 3: 环境评价
const {
index,
type
} = event.currentTarget.dataset
let {
scoreServe,
scoreProduct,
scoreEnvironment
} = this.data
switch (type) {
case 1:
scoreServe = index + 1
break
case 2:
scoreProduct = index + 1
break
case 3:
scoreEnvironment = index + 1
break
}
onScoreServe: function (funcEvent) {
let funcScoreIndex = funcEvent.currentTarget.dataset.index + 1
this.setData({
scoreServe,
scoreServeText: scoreServe.toFixed(1),
scoreProduct,
scoreProductText: scoreProduct.toFixed(1),
scoreEnvironment,
scoreEnvironmentText: scoreEnvironment.toFixed(1),
scoreServe: funcScoreIndex
})
},
/**
* 输入框完成
* @function
* @param
* @returns
*/
eventInputDone: function (event) {
let content = event.detail.value
onScoreProduct: function (funcEvent) {
let funcScoreIndex = funcEvent.currentTarget.dataset.index + 1
this.setData({
content
scoreProduct: funcScoreIndex
})
},
/**
* 预览评价图片
* @function
* @param
* @returns
*/
eventImagePreview: function (event) {
// let imgUrl = event.detail.all[0].url
// let imgUrls = []
// imgUrls.push(imgUrl)
// this.setData({
// imgUrls
// })
onScoreEnvironment: function (funcEvent) {
let funcScoreIndex = funcEvent.currentTarget.dataset.index + 1
this.setData({
scoreEnvironment: funcScoreIndex
})
},
/**
* 新增评价图片
* @function
* @param
* @returns
*/
eventImageAdd: function (event) {
let that = this
let imgUrls = event.detail.current
// if (!/[.jpg|.jpeg|.png|.bmp]+$/.test(imgUrls[0].url)) {
// App.ui.showToast({
// iconType: 'error',
// title: '请上传图片格式',
// })
// console.log(this.data.imgUrls)
// let funcImgUrls = this.data.imgUrls
// for (let i = 0, l = funcImgUrls.length; i < l; i++) {
// if (funcImgUrls[i] === funcImgUrls) {
// funcImgUrls.splice(i, 1)
// this.setData({
// imgUrls: funcImgUrls,
// })
// }
// }
// return
// }
let urlArr = []
imgUrls.forEach(item => {
urlArr.push(item.url)
eventImageChange: function (funcEvent) {
let funcEvaluateAlbum = funcEvent.detail.images
this.setData({
evaluateAlbumTemp: funcEvaluateAlbum
})
console.log('eventImageChange', funcEvaluateAlbum)
},
for (let i = 0; i < urlArr.length; i++) {
wx.showLoading({
title: '上传中',
mask: true
})
wx.uploadFile({
url: App.globalData.baseUrl + 'v1/common/upload',
filePath: urlArr[i],
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
'token': wx.getStorageSync('token')
},
success: function (res) {
wx.hideLoading({
success: (res) => {},
})
let data = typeof (res.data) == 'string' ? JSON.parse(res.data) : res.data
that.data.fileResults.push(data.data.fileUrl[0])
eventImageError: function (funcEvent) {
let funcErrorType = funcEvent.detail.type
}
})
switch (funcErrorType) {
case 'format':
App.ui.showToast({
'iconType': 'error',
'title': '请选择正确图片格式'
})
break
case 'size':
App.ui.showToast({
'iconType': 'error',
'title': '超过图片最大限制'
})
break
}
},
doInputContent: function (event) {
doInputContent: function (funcEvent) {
console.log(funcEvent.detail.value)
this.setData({
content:event.detail.value
evaluateContent: funcEvent.detail.value
})
},
/**
* 移除评价图片
* @function
* @param
* @returns
*/
eventImageRemove: function (event) {
let index = event.detail.index
this.data.fileResults.splice(index, 1)
uploadImage: function () {
let funcToken = wx.getStorageSync('token')
let funcEvaluateAlbumTemp = this.data.evaluateAlbumTemp
let funcPromiseAllList = []
for (let i = 0; i < funcEvaluateAlbumTemp.length; i++) {
let funcUploadResult = new Promise((funcResolve, funcReject) => {
wx.uploadFile({
url: App.globalData.baseUrl + 'v1/common/upload',
filePath: funcEvaluateAlbumTemp[i].path,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
'token': funcToken,
},
success: (response) => {
console.log(response)
let funcResponseData = JSON.parse(response.data).data
let funcEvaluateAlbum = this.data.evaluateAlbum
funcEvaluateAlbum.push(funcResponseData.fileUrl[0])
this.setData({
evaluateAlbum: funcEvaluateAlbum
})
funcResolve()
},
fail: (response) => {
funcReject()
}
})
})
funcPromiseAllList.push(funcUploadResult)
}
return Promise.all(funcPromiseAllList)
},
/**
* 提交订单
* @function
* @param
* @returns
*/
onSubmitCommennt: function () {
let that = this;
if (this.data.scoreServeText == 0) {
inspectCommentInfo: function () {
if (this.data.scoreServe === 0) {
App.ui.showToast({
iconType: 'error',
title: '请对服务进行评价'
})
return
return false
}
if (this.data.scoreProductText == 0) {
if (this.data.scoreProduct === 0) {
App.ui.showToast({
iconType: 'error',
title: '请对产品进行评价'
})
return
return false
}
if (this.data.scoreEnvironmentText == 0) {
if (this.data.scoreEnvironment === 0) {
App.ui.showToast({
iconType: 'error',
title: '请对环境进行评价'
})
return
return false
}
if (this.data.evaluateContent === '') {
App.ui.showToast({
iconType: 'error',
title: '请填写评价内容'
})
return false
}
let formData = {}
formData.orderId = this.data.orderInfo.id
formData.imgUrls = this.data.fileResults
formData.serviceEvaluation = this.data.scoreServeText //服务评价
formData.productEvaluation = this.data.scoreProductText //产品评价
formData.environmentalEvaluation = this.data.scoreEnvironmentText //环境评价
formData.content = this.data.content
return true
},
App.ui.showToast({
iconType: 'loading',
title: '处理中',
duration: 60000
})
saveCommentInfo: function () {
App.wxRequest({
url: 'v1/order/doAppraise',
data: {
'orderId': formData.orderId,
'imgUrls': formData.imgUrls,
'serviceEvaluation': formData.serviceEvaluation,
'productEvaluation': formData.productEvaluation,
'environmentalEvaluation': formData.environmentalEvaluation,
'content': formData.content
'orderId': this.data.orderInfo.id,
'imgUrls': this.data.evaluateAlbum,
'serviceEvaluation': this.data.scoreServe,
'productEvaluation': this.data.scoreProduct,
'environmentalEvaluation': this.data.scoreEnvironment,
'content': this.data.evaluateContent
},
success: (response) => {
wx.hideLoading({
success: (res) => {},
})
App.ui.showToast({
iconType: 'success',
title: '评价成功'
})
setTimeout(() => {
// var pages = getCurrentPages();
// var beforePage = pages[pages.length - 2];
// beforePage.refresh();
let pageFrom = that.data.pageFrom
let url = ''
if (pageFrom == 'orderList') {
//评价列表
url = '/pages/mine/order/order'
} else if (pageFrom == 'orderDetail') {
//评价详情
url = '/pages/pay/order-detail/order-detail?id=' + that.data.orderInfo.id
} else if (pageFrom == 'activityList') {
//主题活动列表
url = '/pages/mine/appointment/appointment'
} else {
url = '/pages/home/home/home'
title: '评价成功',
ending: () => {
wx.navigateBack({
event: {
'type': 'onReload',
}
})
}
wx.redirectTo({
url: url,
})
}, 2000);
})
}
})
}
},
/**
* 提交订单
* @function
* @param
* @returns
*/
onSubmitCommennt: function () {
if (!this.inspectCommentInfo()) return
App.ui.showToast({
iconType: 'loading',
title: '提交中',
})
this.uploadImage()
.then((response) => {
this.saveCommentInfo()
console.log('onSubmitCommennt then')
})
.catch((response) => {
console.log('onSubmitCommennt catch')
})
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
})
\ No newline at end of file
pages/pay/order-comment/order-comment.wxml
<m-toast></m-toast>
<m-nav titleText="订单评价"></m-nav>
<m-nav titleText="订单评价" scrollHeight="{{navScroll}}" styleIndex="{{1}}"></m-nav>
<view class="container con-s">
<view class="order-wrapper">
......@@ -9,7 +9,7 @@
<view class="row align-c">
<block wx:for="{{orderInfo.commodity}}" wx:key="id">
<view class="order-cover">
<image src="{{item.cover}}"></image>
<image src="{{item.cover}}" mode="aspectFill"></image>
</view>
</block>
<view class="order-name" wx:if="{{orderInfo.commodity.length === 1}}">
......@@ -36,14 +36,14 @@
</view>
<view class="score-star row">
<block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{1}}">
<image wx:if="{{scoreServe >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreServe < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
<view class="star" data-index="{{index}}" data-type="{{1}}" bindtap="onScoreServe">
<image wx:if="{{scoreServe >= index + 1}}" src="{{imageBase + 'icon/star-1.png'}}"></image>
<image wx:elif="{{scoreServe < index + 1}}" src="{{imageBase + 'icon/star-2.png'}}"></image>
</view>
</block>
</view>
<view class="score">
<text>{{scoreServeText + '星'}}</text>
<text>{{scoreServe + '.0星'}}</text>
</view>
</view>
<view class="score-wrapper row align-c">
......@@ -52,14 +52,14 @@
</view>
<view class="score-star row">
<block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{2}}">
<image wx:if="{{scoreProduct >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreProduct < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
<view class="star" data-index="{{index}}" data-type="{{2}}" bindtap="onScoreProduct">
<image wx:if="{{scoreProduct >= index + 1}}" src="{{imageBase + 'icon/star-1.png'}}"></image>
<image wx:elif="{{scoreProduct < index + 1}}" src="{{imageBase + 'icon/star-2.png'}}"></image>
</view>
</block>
</view>
<view class="score">
<text>{{scoreProductText + '星'}}</text>
<text>{{scoreProduct + '.0星'}}</text>
</view>
</view>
<view class="score-wrapper row align-c">
......@@ -68,27 +68,26 @@
</view>
<view class="score-star row">
<block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{3}}">
<image wx:if="{{scoreEnvironment >= (index + 1)}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreEnvironment < (index + 1)}}" src="{{imageBase + 'star-gray.png'}}"></image>
<view class="star" data-index="{{index}}" data-type="{{3}}" bindtap="onScoreEnvironment">
<image wx:if="{{scoreEnvironment >= (index + 1)}}" src="{{imageBase + 'icon/star-1.png'}}"></image>
<image wx:elif="{{scoreEnvironment < (index + 1)}}" src="{{imageBase + 'icon/star-2.png'}}"></image>
</view>
</block>
</view>
<view class="score">
<text>{{scoreEnvironmentText + '星'}}</text>
<text>{{scoreEnvironment + '.0星'}}</text>
</view>
</view>
<view class="order-comment">
<textarea style="padding:24rpx;font-size:26rpx;color:#15191F;line-height:40rpx" cols="30" rows="10" maxlength='200' placeholder="您的评价与建议，会让园区做的更好" placeholder-style="color: #C2C7CF;font-size:26rpx" bindinput="doInputContent"></textarea>
<view class="text-length-box " style="padding:16rpx 24rpx;text-align:right;font-size:24rpx;color:#C2C7CF;">{{content.length}}/200</view>
<m-textarea
inputId="evaluate"
className="evaluate-content"
placeholder="您的评价与建议，会让园区做的更好"
inputMax="{{200}}"
bindblur="doInputContent">
</m-textarea>
<view class="order-picker">
<l-image-picker mode="aspectFill" size-type="compressed" preview="{{true}}" l-item-class="l-image-item" l-class="l-picker" count="9" size="3" size-type="compressed" custom="{{true}}" bind:linchange="eventImageAdd" bind:linremove="eventImageRemove" bind:linpreview="eventImagePreview">
<view class="col con-c align-c">
<image class="icon-img" src="{{resourcesBase+'mine/server/camera_icon.png'}}"></image>
<text>添加图片</text>
</view>
</l-image-picker>
<m-image-picker bind:change="eventImageChange" bind:error="eventImageError"></m-image-picker>
</view>
</view>
</view>
......
pages/pay/order-comment/order-comment.wxss
......@@ -30,6 +30,11 @@
display: none;
}
.order-cover > image {
width: 124rpx;
height: 120rpx;
}
.order-name {
width: 274rpx;
margin-left: 16rpx;
......@@ -97,9 +102,9 @@
padding: 0 32rpx;
}
.star {
width: 40rpx;
height: 40rpx;
.star > image {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
......@@ -119,38 +124,6 @@
padding: 19rpx 12rpx 8rpx;
}
.l-picker {
width: 504rpx !important;
}
.l-image-item {
width: 144rpx !important;
height: 144rpx !important;
border: 1px dashed #959da9 !important;
margin-bottom: 24rpx !important;
}
.l-image-item > view {
right: -20rpx;
top: -20rpx;
}
.l-image-item > image {
max-width: 144rpx !important;
height: 144rpx !important;
border: none !important;
}
.l-image-item text {
color: #959da9;
font-size: 22rpx;
}
.icon-img {
width: 48rpx;
height: 48rpx;
}
.footer-wrapper {
position: fixed;
left: 0;
......@@ -174,7 +147,14 @@
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
.evaluate-content {
width: 606rpx;
height: 280rpx;
padding: 24rpx;
background: #F5F6F8;
font-size: 26rpx;
font-weight: 400;
line-height: 40rpx;
color: #15191F;
}
\ No newline at end of file
pages/pay/order-detail/order-detail.js
......@@ -27,6 +27,10 @@ Page({
this.queryOrderDetail()
},
onReload: function () {
this.queryOrderDetail()
},
/**
* 订单详情
* @function
......
utils/extend/api.js
......@@ -50,7 +50,7 @@ function navigateBack (wxObject) {
console.log('[extend api] navigateBack', object)
if (object && object.event && inspectEventFormat(object.event)) {
let funcPageList = getCurrentPages()
let funcReceivePagePath = object.event.receivePage ? object.event.receivePage : funcPageList[funcPageList.length - 2].route
let funcReceivePagePath = object.event.receivePage || funcPageList[funcPageList.length - 2].route
if (funcPageList.length > 1) {
for (let i = funcPageList.length - 1; 0 <= i; i--) {
if (funcPageList[i].route === funcReceivePagePath) {
......
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