Skip to content

严立 / mini-shimao

Go to a project
Commit 7291410d by 严立
Options

评论页面优化

parent cde5b2e5
Expand all
Inline Side-by-side
Showing with 84 additions and 75 deletions
app.json
...@@ -66,6 +66,7 @@ ...@@ -66,6 +66,7 @@
"m-button-bottom": "./component/m-button-bottom/m-button-bottom", "m-button-bottom": "./component/m-button-bottom/m-button-bottom",
"m-checkbox": "./component/m-checkbox/m-checkbox", "m-checkbox": "./component/m-checkbox/m-checkbox",
"m-dialog": "./component/m-dialog/m-dialog", "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-input": "./component/m-input/m-input",
"m-nav": "./component/m-nav/m-nav", "m-nav": "./component/m-nav/m-nav",
"m-popup": "./component/m-popup/m-popup", "m-popup": "./component/m-popup/m-popup",
...@@ -77,8 +78,7 @@ ...@@ -77,8 +78,7 @@
"l-icon": "./miniprogram_npm/lin-ui/icon/index", "l-icon": "./miniprogram_npm/lin-ui/icon/index",
"l-collapse": "./miniprogram_npm/lin-ui/collapse/index", "l-collapse": "./miniprogram_npm/lin-ui/collapse/index",
"l-collapse-item": "./miniprogram_npm/lin-ui/collapse-item/index", "l-collapse-item": "./miniprogram_npm/lin-ui/collapse-item/index",
"l-textarea": "./miniprogram_npm/lin-ui/textarea/index", "l-textarea": "./miniprogram_npm/lin-ui/textarea/index"
"l-image-picker": "./miniprogram_npm/lin-ui/image-picker/index"
}, },
"window": { "window": {
"navigationStyle": "custom", "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({ ...@@ -12,6 +12,7 @@ Component({
maxSelection: 9, maxSelection: 9,
allowFormat: ['.jpg', '.jpeg', '.png', '.bmp'], allowFormat: ['.jpg', '.jpeg', '.png', '.bmp'],
allowFormatRegExp: {}, allowFormatRegExp: {},
imageMode: 'aspectFill',
selectionImageList: [], selectionImageList: [],
}, },
...@@ -94,20 +95,20 @@ Component({ ...@@ -94,20 +95,20 @@ Component({
// 检查图片格式 // 检查图片格式
let funcFormatInspectResult = this.imageFormatInspect(funcList) let funcFormatInspectResult = this.imageFormatInspect(funcList)
if (funcFormatInspectResult.errorImage.length > 0) { 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) { if (funcSizeInspectResult.errorImage.length > 0) {
this.triggerEvent('error', { type: 'size', images: funcSizeInspectResult } ) this.eventErrorSize(funcSizeInspectResult.errorImage)
} }
this.setData({ 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) => { fail: (response) => {
console.log(response) console.log(response)
...@@ -125,10 +126,35 @@ Component({ ...@@ -125,10 +126,35 @@ Component({
selectionImageList: funcSelectionImageList selectionImageList: funcSelectionImageList
}) })
this.triggerEvent('remove', { type: 'remove', images: [funcRemoveImage] } ) this.eventRemove(funcRemoveImage)
this.eventChange()
return 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 @@ ...@@ -3,7 +3,7 @@
<view class="image-picker-selected-item"> <view class="image-picker-selected-item">
<image class="image-picker-selected-image" src="{{item.path}}"></image> <image class="image-picker-selected-image" src="{{item.path}}"></image>
<view class="image-picker-remove row cc ac" data-item="{{item}}" bindtap="onRemoveSelectedImage"> <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>
</view> </view>
</block> </block>
......
component/m-image-picker/m-image-picker.wxss
...@@ -20,9 +20,8 @@ ...@@ -20,9 +20,8 @@
position: absolute; position: absolute;
top: -30rpx; top: -30rpx;
right: -30rpx; right: -30rpx;
width: 60rpx; width: 64rpx;
height: 60rpx; height: 64rpx;
border: 1px red solid;
} }
.image-picker-remove > image { .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.wxml
<m-toast></m-toast> <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="container con-s">
<view class="order-wrapper"> <view class="order-wrapper">
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<view class="row align-c"> <view class="row align-c">
<block wx:for="{{orderInfo.commodity}}" wx:key="id"> <block wx:for="{{orderInfo.commodity}}" wx:key="id">
<view class="order-cover"> <view class="order-cover">
<image src="{{item.cover}}"></image> <image src="{{item.cover}}" mode="aspectFill"></image>
</view> </view>
</block> </block>
<view class="order-name" wx:if="{{orderInfo.commodity.length === 1}}"> <view class="order-name" wx:if="{{orderInfo.commodity.length === 1}}">
...@@ -36,14 +36,14 @@ ...@@ -36,14 +36,14 @@
</view> </view>
<view class="score-star row"> <view class="score-star row">
<block wx:for="{{5}}" wx:key="index"> <block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{1}}"> <view class="star" data-index="{{index}}" data-type="{{1}}" bindtap="onScoreServe">
<image wx:if="{{scoreServe >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image> <image wx:if="{{scoreServe >= index + 1}}" src="{{imageBase + 'icon/star-1.png'}}"></image>
<image wx:elif="{{scoreServe < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image> <image wx:elif="{{scoreServe < index + 1}}" src="{{imageBase + 'icon/star-2.png'}}"></image>
</view> </view>
</block> </block>
</view> </view>
<view class="score"> <view class="score">
<text>{{scoreServeText + '星'}}</text> <text>{{scoreServe + '.0星'}}</text>
</view> </view>
</view> </view>
<view class="score-wrapper row align-c"> <view class="score-wrapper row align-c">
...@@ -52,14 +52,14 @@ ...@@ -52,14 +52,14 @@
</view> </view>
<view class="score-star row"> <view class="score-star row">
<block wx:for="{{5}}" wx:key="index"> <block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{2}}"> <view class="star" data-index="{{index}}" data-type="{{2}}" bindtap="onScoreProduct">
<image wx:if="{{scoreProduct >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image> <image wx:if="{{scoreProduct >= index + 1}}" src="{{imageBase + 'icon/star-1.png'}}"></image>
<image wx:elif="{{scoreProduct < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image> <image wx:elif="{{scoreProduct < index + 1}}" src="{{imageBase + 'icon/star-2.png'}}"></image>
</view> </view>
</block> </block>
</view> </view>
<view class="score"> <view class="score">
<text>{{scoreProductText + '星'}}</text> <text>{{scoreProduct + '.0星'}}</text>
</view> </view>
</view> </view>
<view class="score-wrapper row align-c"> <view class="score-wrapper row align-c">
...@@ -68,27 +68,26 @@ ...@@ -68,27 +68,26 @@
</view> </view>
<view class="score-star row"> <view class="score-star row">
<block wx:for="{{5}}" wx:key="index"> <block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{3}}"> <view class="star" data-index="{{index}}" data-type="{{3}}" bindtap="onScoreEnvironment">
<image wx:if="{{scoreEnvironment >= (index + 1)}}" src="{{imageBase + 'star-yellow.png'}}"></image> <image wx:if="{{scoreEnvironment >= (index + 1)}}" src="{{imageBase + 'icon/star-1.png'}}"></image>
<image wx:elif="{{scoreEnvironment < (index + 1)}}" src="{{imageBase + 'star-gray.png'}}"></image> <image wx:elif="{{scoreEnvironment < (index + 1)}}" src="{{imageBase + 'icon/star-2.png'}}"></image>
</view> </view>
</block> </block>
</view> </view>
<view class="score"> <view class="score">
<text>{{scoreEnvironmentText + '星'}}</text> <text>{{scoreEnvironment + '.0星'}}</text>
</view> </view>
</view> </view>
<view class="order-comment"> <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> <m-textarea
<view class="text-length-box " style="padding:16rpx 24rpx;text-align:right;font-size:24rpx;color:#C2C7CF;">{{content.length}}/200</view> inputId="evaluate"
className="evaluate-content"
placeholder="您的评价与建议，会让园区做的更好"
inputMax="{{200}}"
bindblur="doInputContent">
</m-textarea>
<view class="order-picker"> <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"> <m-image-picker bind:change="eventImageChange" bind:error="eventImageError"></m-image-picker>
<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>
</view> </view>
</view> </view>
</view> </view>
......
pages/pay/order-comment/order-comment.wxss
...@@ -30,6 +30,11 @@ ...@@ -30,6 +30,11 @@
display: none; display: none;
} }
.order-cover > image {
width: 124rpx;
height: 120rpx;
}
.order-name { .order-name {
width: 274rpx; width: 274rpx;
margin-left: 16rpx; margin-left: 16rpx;
...@@ -97,9 +102,9 @@ ...@@ -97,9 +102,9 @@
padding: 0 32rpx; padding: 0 32rpx;
} }
.star { .star > image {
width: 40rpx; width: 36rpx;
height: 40rpx; height: 36rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
...@@ -119,38 +124,6 @@ ...@@ -119,38 +124,6 @@
padding: 19rpx 12rpx 8rpx; 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 { .footer-wrapper {
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -174,7 +147,14 @@ ...@@ -174,7 +147,14 @@
border-radius: 4rpx; border-radius: 4rpx;
} }
image { .evaluate-content {
width: 100%; width: 606rpx;
height: 100%; 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({ ...@@ -27,6 +27,10 @@ Page({
this.queryOrderDetail() this.queryOrderDetail()
}, },
onReload: function () {
this.queryOrderDetail()
},
/** /**
* 订单详情 * 订单详情
* @function * @function
......
utils/extend/api.js
...@@ -50,7 +50,7 @@ function navigateBack (wxObject) { ...@@ -50,7 +50,7 @@ function navigateBack (wxObject) {
console.log('[extend api] navigateBack', object) console.log('[extend api] navigateBack', object)
if (object && object.event && inspectEventFormat(object.event)) { if (object && object.event && inspectEventFormat(object.event)) {
let funcPageList = getCurrentPages() 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) { if (funcPageList.length > 1) {
for (let i = funcPageList.length - 1; 0 <= i; i--) { for (let i = funcPageList.length - 1; 0 <= i; i--) {
if (funcPageList[i].route === funcReceivePagePath) { 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