xt / xcx-book · Commits

Go to a project

Commit 700f23655f9794e2b5b790bf0ee8166cd7d95ca5

Authored by yiren
1 parent eb3fb496
build: skipped

提前点餐菜单图片预览功能和高度自适应

Inline Side-by-side
Showing 4 changed files with 47 additions and 28 deletions
@@ -37,11 +37,32 @@ Page({ @@ -37,11 +37,32 @@ Page({
37 themeColor: '', 37 themeColor: '',
38 textColor: '', 38 textColor: '',
39 navColor: '', 39 navColor: '',
40 - height:wx.getSystemInfoSync().windowWidth*1*2,  
41 - height2:wx.getSystemInfoSync().windowWidth, 40 + height:wx.getSystemInfoSync().windowWidth*1,
  41 + height2:wx.getSystemInfoSync().windowWidth*1/2,
42 }, 42 },
43 checkModal: '', 43 checkModal: '',
44 classifyModal: '', 44 classifyModal: '',
  45 + imageLoad(e) {
  46 + const index = e.currentTarget.dataset['index'];
  47 + const indexs = e.currentTarget.dataset['indexs'];
  48 + //获取图片的原始宽度和高度
  49 + let originalWidth = e.detail.width;
  50 + let originalHeight = e.detail.height;
  51 + let imageSize = util.imageZoomHeightUtil(originalWidth,originalHeight);
  52 + let imageHeight = `cookbooklist[${indexs}].cookbooklist[0][${index}].imageHeight`;
  53 + let height=(imageSize && imageSize.imageHeight)?imageSize.imageHeight.toFixed(0):'';
  54 + this.setData({
  55 + [imageHeight]:height,
  56 + })
  57 + },
  58 + preview(event){
  59 + const item = event.currentTarget.dataset['item'];
  60 + let currentUrl = item.image
  61 + wx.previewImage({
  62 + current: currentUrl, // 当前显示图片的http链接
  63 + urls: [currentUrl] // 需要预览的图片http链接列表
  64 + })
  65 + },
45 /** 66 /**
46 * 生命周期函数--监听页面加载 67 * 生命周期函数--监听页面加载
47 */ 68 */
@@ -103,21 +124,6 @@ Page({ @@ -103,21 +124,6 @@ Page({
103 checkItem, 124 checkItem,
104 }) 125 })
105 }, 126 },
106 - // 获取点菜列表  
107 - getCheckCookList() {  
108 - let param = {  
109 - sellerid: this.data.options.sid,  
110 - identity: this.data.options.identity,  
111 - orderid: this.data.options.oid,  
112 - status: '0,1',  
113 - };  
114 - App.Cookbook.GetCookbookByClass(param).then(json => {  
115 - let cookbooklist = this.formatCookList(json.data[0].list)  
116 - this.setData({  
117 - cookbooklist  
118 - })  
119 - })  
120 - },  
121 // 选择菜品分类 127 // 选择菜品分类
122 checkItem(e) { 128 checkItem(e) {
123 const item = e.currentTarget.dataset['item']; 129 const item = e.currentTarget.dataset['item'];
@@ -145,7 +151,7 @@ Page({ @@ -145,7 +151,7 @@ Page({
145 } 151 }
146 App.Advance.AddCart(params).then(res => { 152 App.Advance.AddCart(params).then(res => {
147 this.closeModal() 153 this.closeModal()
148 - this.getCheckCookList(); 154 + this.getCookList();
149 let orderItemCount = this.data.orderItemCount * 1 + 1 155 let orderItemCount = this.data.orderItemCount * 1 + 1
150 this.setData({ 156 this.setData({
151 orderItemCount 157 orderItemCount
@@ -196,7 +202,7 @@ Page({ @@ -196,7 +202,7 @@ Page({
196 identity: this.data.options.identity 202 identity: this.data.options.identity
197 } 203 }
198 App.Advance.AddCart(params).then(res => { 204 App.Advance.AddCart(params).then(res => {
199 - this.getCheckCookList(); 205 + this.getCookList();
200 let orderItemCount = this.data.orderItemCount * 1 + 1 206 let orderItemCount = this.data.orderItemCount * 1 + 1
201 this.setData({ 207 this.setData({
202 orderItemCount 208 orderItemCount
@@ -218,7 +224,7 @@ Page({ @@ -218,7 +224,7 @@ Page({
218 identity: this.data.options.identity 224 identity: this.data.options.identity
219 } 225 }
220 App.Advance.ReduceOrder(params).then(res => { 226 App.Advance.ReduceOrder(params).then(res => {
221 - this.getCheckCookList(); 227 + this.getCookList();
222 let orderItemCount = this.data.orderItemCount * 1 - 1 228 let orderItemCount = this.data.orderItemCount * 1 - 1
223 this.setData({ 229 this.setData({
224 orderItemCount 230 orderItemCount
@@ -257,7 +263,6 @@ Page({ @@ -257,7 +263,6 @@ Page({
257 orderItemCount: orderItemCount, 263 orderItemCount: orderItemCount,
258 checkCookbooklist: res.data.cookbooklist, 264 checkCookbooklist: res.data.cookbooklist,
259 }) 265 })
260 - this.getCheckCookList();  
261 }) 266 })
262 }, 267 },
263 // 过滤数据 268 // 过滤数据
@@ -352,6 +357,7 @@ Page({ @@ -352,6 +357,7 @@ Page({
352 cook.item_clear_num = item_clear_num; 357 cook.item_clear_num = item_clear_num;
353 cook.index = n; //分类下菜品的下标 358 cook.index = n; //分类下菜品的下标
354 cook.type = '1'; 359 cook.type = '1';
  360 + cook.imageHeight='';
355 let cook_style = cook.cook_style ? util.determine(cook.cook_style) : { 361 let cook_style = cook.cook_style ? util.determine(cook.cook_style) : {
356 image_type: '1', 362 image_type: '1',
357 name_type: '' 363 name_type: ''
@@ -467,7 +473,6 @@ Page({ @@ -467,7 +473,6 @@ Page({
467 isloading: false, 473 isloading: false,
468 showSkeleton: false, 474 showSkeleton: false,
469 }) 475 })
470 - this.getCheckCookList()  
471 }).catch(res => { 476 }).catch(res => {
472 console.log(res); 477 console.log(res);
473 }); 478 });
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 </view> 63 </view>
64 </view> 64 </view>
65 <view class="imgOneBox"> 65 <view class="imgOneBox">
66 - <image wx:if="{{item.image}}" style="height:{{height}}rpx;" src="{{item.image}}" class="dishImg" mode="aspectFit" /> 66 + <image wx:if="{{item.image}}" catch:tap="preview" style="height: {{item.imageHeight>height?height+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height?'':item.imageHeight==height?'100%':'100%'}}" mode="{{(item.imageHeight>375 || item.imageHeight==375)?'aspectFit':''}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
67 </view> 67 </view>
68 <view class="greens" wx:if="{{item.desc}}"> 68 <view class="greens" wx:if="{{item.desc}}">
69 <view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view> 69 <view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view>
@@ -99,7 +99,7 @@ @@ -99,7 +99,7 @@
99 {{item.price?'￥'+item.price+'/'+item.unit:''}} 99 {{item.price?'￥'+item.price+'/'+item.unit:''}}
100 {{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}} 100 {{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}}
101 </view> 101 </view>
102 - <image wx:if="{{item.image}}" src="{{item.image}}" style="height:{{height2}}rpx;" mode="aspectFit" /> 102 + <image wx:if="{{item.image}}" catch:tap="preview" style="height: {{item.imageHeight>height2?height2+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height2?height2+'px':item.imageHeight==height2?'100%':'100%'}}" mode="{{(item.imageHeight>375 || item.imageHeight==375)?'aspectFit':'aspectFill'}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
103 <view class="greens" wx:if="{{item.desc}}"> 103 <view class="greens" wx:if="{{item.desc}}">
104 <view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view> 104 <view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view>
105 </view> 105 </view>
@@ -82,9 +82,6 @@ page { @@ -82,9 +82,6 @@ page {
82 padding: 0 40rpx 30rpx 10rpx; 82 padding: 0 40rpx 30rpx 10rpx;
83 } 83 }
84 84
85 -.dishImg {  
86 - width: 100%;  
87 -}  
88 .imgOneBox{ 85 .imgOneBox{
89 width: 100%; 86 width: 100%;
90 display: flex; 87 display: flex;
@@ -215,7 +212,7 @@ page { @@ -215,7 +212,7 @@ page {
215 } 212 }
216 213
217 .reduceImg { 214 .reduceImg {
218 - width: 70rpx; 215 + width: 70rpx !important;
219 height: 8rpx !important; 216 height: 8rpx !important;
220 padding: 10rpx; 217 padding: 10rpx;
221 } 218 }
@@ -21,6 +21,22 @@ function formatTime(date, type, connect) { @@ -21,6 +21,22 @@ function formatTime(date, type, connect) {
21 } 21 }
22 22
23 } 23 }
  24 +function imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){
  25 + let imageSize = {};
  26 + if(imageWidth){
  27 + imageSize.imageWidth = imageWidth;
  28 + imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
  29 + }else{//如果没有传imageWidth,使用屏幕的宽
  30 + wx.getSystemInfo({
  31 + success: function (res) {
  32 + imageWidth = res.windowWidth;
  33 + imageSize.imageWidth = imageWidth;
  34 + imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
  35 + }
  36 + });
  37 + }
  38 + return imageSize;
  39 +}
24 40
25 function formatNumber(n) { 41 function formatNumber(n) {
26 n = n.toString() 42 n = n.toString()
@@ -170,6 +186,7 @@ module.exports = { @@ -170,6 +186,7 @@ module.exports = {
170 parseDataValue, 186 parseDataValue,
171 determine, 187 determine,
172 objCompare, 188 objCompare,
  189 + imageZoomHeightUtil,
173 cgi: function (act) { 190 cgi: function (act) {
174 return uri.HOST__LINE + act //正式 191 return uri.HOST__LINE + act //正式
175 //return uri.HOST__TEST+act //测试 192 //return uri.HOST__TEST+act //测试