wxd / MShopWeApp

Commit 76307c80f1e774d3cfccbbe832ce3f68b1096b84

Authored by iceling
1 parent 2476135d

我的会员

Inline Side-by-side
Showing 3 changed files with 250 additions and 114 deletions
pages/user/plus/plus.js
  View file @76307c8
... ... @@ -13,6 +13,7 @@ var e = function(e) {
13 13 n = new e.default();
14 14 var regeneratorRuntime = require('../../../utils/runtime.js');
15 15 var api = require('../../../api/api.js');
  16 +//wx.downloadFile把线上地址设为本地地址
16 17 Page({
17 18  
18 19 /**
... ... @@ -28,8 +29,7 @@ Page({
28 29 canvasHidden: true,
29 30 shareImgPath: null,
30 31 plusCard: "",
31   - imagePath: "",
32   - isshare: 0,
  32 + imagePath: ""
33 33 },
34 34 swiperChange: function(e) {
35 35 var currentId = e.detail.current;
... ... @@ -51,9 +51,8 @@ Page({
51 51 })
52 52 }
53 53 })
54   - this.getPlusCardType();
55   -
56   -
  54 + this.getPlusCardType();
  55 + this.saveImageToPhotosAlbum();
57 56 },
58 57 //获取卡类
59 58 getPlusCardType: function(e) {
... ... @@ -70,116 +69,254 @@ Page({
70 69 * 生命周期函数--监听页面初次渲染完成
71 70 */
72 71 saveImageToPhotosAlbum: function() {
  72 + wx.showLoading({
  73 + title: '生成中...',
  74 + })
73 75 var th = this;
74 76 var unit = th.data.screenWidth / 750 * 1.35;
75 77 const ctx = wx.createCanvasContext('myCanvas');
76 78 //设置画板显示，才能开始绘图
77 79 th.setData({
  80 +
78 81 canvasHidden: false
79 82 })
80   - ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0,554 * unit,899 * unit);
81   - ctx.drawImage("../../../images/userinfo/user_head.jpg", 60 * unit, 20 * unit, 60 * unit, 60 * unit);
  83 + ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0, 554 * unit, 930 * unit);
82 84 ctx.setFontSize(26 * unit);
83 85 ctx.setFillStyle("rgb(0,0,0)");
84   - ctx.setTextAlign('left')
85   - ctx.fillText("钱巧玲", 136 * unit, 65 * unit, 110 * unit);
  86 + ctx.fillText("钱巧玲", 155 * unit, 75 * unit, 200 * unit);
86 87  
87   - ctx.setFontSize(22 * unit);
  88 + var tj_path = "../../../images/userinfo/q_tj.png";
  89 + ctx.drawImage(tj_path, 385 * unit, 45 * unit, 90 * unit, 30 * unit);
  90 + ctx.setFontSize(18 * unit);
88 91 ctx.setFillStyle("rgb(255,255,255)");
89   - ctx.fillText("强烈推荐", 400 * unit, 60 * unit);
90   -
  92 + ctx.fillText("强烈推荐", 394 * unit, 65 * unit);
91 93  
92 94 ctx.setStrokeStyle("rgb(255,255,255)");
93 95 ctx.setLineDash([5 * unit, 5 * unit], 5 * unit);
94 96 ctx.beginPath();
95   - ctx.moveTo(0, 120 * unit);
96   - ctx.lineTo(554 * unit, 120 * unit);
  97 + ctx.moveTo(0, 125 * unit);
  98 + ctx.lineTo(554 * unit, 125 * unit);
97 99 ctx.stroke();
98 100  
99   - ctx.setStrokeStyle("rgb(218,194,169)");
  101 + var x = 55 * unit,
  102 + y = 165 * unit,
  103 + w = 444 * unit,
  104 + h = 220 * unit,
  105 + r = 14 * unit;
  106 + ctx.save();
  107 + // 开始绘制
100 108 ctx.beginPath();
101   - ctx.moveTo(0, 420 * unit);
102   - ctx.lineTo(554 * unit, 420 * unit);
103   - ctx.stroke();
  109 + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
  110 + // 这里是使用 fill 还是 stroke都可以，二选一即可
  111 + ctx.setFillStyle('rgb(237,188,150)')
  112 + // ctx.setStrokeStyle('transparent')
  113 + // 左上角
  114 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  115 +
  116 + // border-top
  117 + ctx.moveTo(x + r, y)
  118 + ctx.lineTo(x + w - r, y)
  119 + ctx.lineTo(x + w, y + r)
  120 + // 右上角
  121 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  122 +
  123 + // border-right
  124 + ctx.lineTo(x + w, y + h - r)
  125 + ctx.lineTo(x + w - r, y + h)
  126 + // 右下角
  127 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  128 +
  129 + // border-bottom
  130 + ctx.lineTo(x + r, y + h)
  131 + ctx.lineTo(x, y + h - r)
  132 + // 左下角
  133 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  134 +
  135 + // border-left
  136 + ctx.lineTo(x, y + r)
  137 + ctx.lineTo(x + r, y)
  138 +
  139 + // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
  140 + ctx.fill()
  141 +
  142 + ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
  143 + ctx.drawImage("../../../images/plus/share/one.jpg", x, y, 444 * unit, 220 * unit); // 推进去图片
  144 + ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
104 145  
  146 + ctx.beginPath();
105 147 // 卡图片
106   - ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 170 * unit, 444 * unit, 205 * unit);
  148 + // ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 165 * unit, 444 * unit, 220 * unit,);
107 149 ctx.setFontSize(26 * unit);
108   - ctx.setFillStyle("white");
  150 + ctx.setFillStyle("rgb(237,188,150)");
109 151 ctx.fillText("PLUSI会员", 80 * unit, 215 * unit);
110 152 ctx.setFontSize(18 * unit);
111   - ctx.setFillStyle("white");
  153 + ctx.setFillStyle("rgb(237,188,150)");
112 154 ctx.fillText("开通会员年卡仅199元", 80 * unit, 240 * unit);
113 155  
114   - ctx.setFontSize(18 * unit);
115   - ctx.setFillStyle("white");
116   - ctx.fillText("立即开通", 360 * unit, 215 * unit);
117   -
118   - ctx.drawImage("../../../images/userinfo/user_head.jpg", 80 * unit, 315 * unit, 40 * unit, 40 * unit);
  156 + ctx.drawImage("../../../images/plus/share/privilege_o.png", 80 * unit, 343 * unit, 20 * unit, 20 * unit);
119 157  
120 158 ctx.setFontSize(14 * unit);
121   - ctx.setFillStyle("white");
122   - ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥2899元", 130 * unit, 345 * unit);
  159 + ctx.setFillStyle("rgb(237,188,150)");
  160 + ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥3031元", 105 * unit, 360 * unit);
  161 +
  162 + ctx.rect(70 * unit, 425 * unit, 182 * unit, 1 * unit);
  163 + ctx.setFillStyle('rgb(218,194,169)');
  164 + ctx.fill();
  165 +
  166 + ctx.drawImage("../../../images/plus/share/square.png", 267 * unit, 420 * unit, 13 * unit, 13 * unit);
  167 +
  168 + ctx.beginPath();
  169 + ctx.rect(295 * unit, 425 * unit, 182 * unit, 1 * unit);
  170 + ctx.setFillStyle('rgb(218,194,169)');
  171 + ctx.fill();
123 172  
124   - ctx.setFontSize(22 * unit);
  173 + ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 470 * unit, 10 * unit, 10 * unit);
  174 + ctx.setFontSize(24 * unit);
125 175 ctx.setFillStyle("rgb(198,165,126)");
126   - ctx.fillText("超级VIP权益", 90 * unit, 475 * unit);
  176 + ctx.fillText("超级VIP权益", 100 * unit, 475 * unit);
127 177  
128 178 ctx.setFontSize(20 * unit);
129 179 ctx.setFillStyle("rgb(198,165,126)");
130   - ctx.fillText("超级会员专属权益", 90 * unit, 505 * unit);
131   - ctx.drawImage("../../../images/plus/share/Ancrown.png", 395 * unit, 435 * unit, 80 * unit, 80 * unit);
  180 + ctx.fillText("超级会员专属权益", 100 * unit, 505 * unit);
  181 + ctx.drawImage("../../../images/plus/share/Ancrown.png", 355 * unit, 440 * unit, 65 * unit, 65 * unit);
  182 +
  183 + ctx.rect(85 * unit, 530 * unit, 375 * unit, 1 * unit)
  184 + ctx.setFillStyle('rgb(218,194,169)')
  185 + ctx.fill();
132 186  
133   - ctx.setFontSize(22 * unit);
  187 + ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 575 * unit, 10 * unit, 10 * unit);
  188 + ctx.setFontSize(24 * unit);
134 189 ctx.setFillStyle("rgb(198,165,126)");
135   - ctx.fillText("超级VIP标识", 90 * unit, 580 * unit);
  190 + ctx.fillText("超级VIP标识", 100 * unit, 580 * unit);
136 191  
137 192 ctx.setFontSize(20 * unit);
138 193 ctx.setFillStyle("rgb(198,165,126)");
139   - ctx.fillText("彰显尊贵身份的象征", 90 * unit, 610 * unit);
140   - ctx.drawImage("../../../images/plus/share/Identification.png", 395 * unit, 545 * unit, 80 * unit, 80 * unit);
  194 + ctx.fillText("彰显尊贵身份的象征", 100 * unit, 610 * unit);
  195 + ctx.drawImage("../../../images/plus/share/Identification.png", 355 * unit, 548 * unit, 65 * unit, 65 * unit);
  196 +
  197 + ctx.rect(85 * unit, 635 * unit, 375 * unit, 1 * unit);
  198 + ctx.setFillStyle('rgb(218,194,169)');
  199 + ctx.fill();
141 200  
142   - ctx.setFontSize(22 * unit);
  201 + ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 695 * unit, 10 * unit, 10 * unit);
  202 + ctx.setFontSize(24 * unit);
143 203 ctx.setFillStyle("rgb(198,165,126)");
144   - ctx.fillText("超级VIP价格", 90 * unit, 695 * unit);
  204 + ctx.fillText("超级VIP价格", 100 * unit, 695 * unit);
145 205  
146 206 ctx.setFontSize(20 * unit);
147 207 ctx.setFillStyle("rgb(198,165,126)");
148   - ctx.fillText("享受专属会员超低价", 90 * unit, 725 * unit);
149   - ctx.drawImage("../../../images/plus/share/money.png", 395 * unit, 660 * unit, 80 * unit, 80 * unit);
  208 + ctx.fillText("享受专属会员超低价", 100 * unit, 725 * unit);
  209 + ctx.drawImage("../../../images/plus/share/money.png", 355 * unit, 660 * unit, 65 * unit, 65 * unit);
150 210  
151   - ctx.drawImage("../../../images/userinfo/user_head.jpg", 100 * unit, 760 * unit, 100 * unit, 100 * unit);
  211 + ctx.rect(85 * unit, 750 * unit, 375 * unit, 1 * unit)
  212 + ctx.setFillStyle('rgb(218,194,169)')
  213 + ctx.fill();
  214 +
  215 + ctx.drawImage("../../../images/userinfo/user_head.jpg", 100 * unit, 780 * unit, 110 * unit, 110 * unit);
152 216  
153 217 ctx.setFontSize(20 * unit);
154   - ctx.setFillStyle("rgb(198,165,126)");
155   - ctx.fillText("解锁新权益 精彩享不停", 220 * unit, 800 * unit);
  218 + ctx.setFillStyle("#000");
  219 + ctx.fillText("解锁新权益 精彩享不停", 230 * unit, 825 * unit);
156 220  
157 221 ctx.setFontSize(20 * unit);
158   - ctx.setFillStyle("rgb(198,165,126)");
159   - ctx.fillText("长按识别二维码,立即开通", 220 * unit, 840 * unit);
  222 + ctx.setFillStyle("#000");
  223 + ctx.fillText("长按识别二维码,立即开通!", 230 * unit, 865 * unit);
160 224  
  225 + //---绘制圆形要放在最后----
  226 + ctx.save();
  227 + ctx.beginPath();
  228 + var h_x = 60 * unit;
  229 + var h_y = 24 * unit;
  230 + var h_r = 40 * unit;
  231 + var cx = h_x + h_r;
  232 + var cy = h_y + h_r;
  233 + ctx.arc(cx, cy, h_r, 0, Math.PI * 2, false);
  234 + ctx.closePath();
  235 + ctx.fill();
  236 + ctx.clip();
  237 + ctx.drawImage("../../../images/userinfo/user_head.jpg", h_x, h_y, h_r * 2, h_r * 2);
  238 + ctx.restore();
  239 +
  240 + var x = 345 * unit,
  241 + y = 190 * unit,
  242 + w = 105 * unit,
  243 + h = 30 * unit,
  244 + r = 14 * unit;
  245 + ctx.save();
  246 + // 开始绘制
  247 + ctx.beginPath();
  248 + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
  249 + // 这里是使用 fill 还是 stroke都可以，二选一即可
  250 + ctx.setFillStyle('rgb(237,188,150)')
  251 + // ctx.setStrokeStyle('transparent')
  252 + // 左上角
  253 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  254 +
  255 + // border-top
  256 + ctx.moveTo(x + r, y)
  257 + ctx.lineTo(x + w - r, y)
  258 + ctx.lineTo(x + w, y + r)
  259 + // 右上角
  260 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  261 +
  262 + // border-right
  263 + ctx.lineTo(x + w, y + h - r)
  264 + ctx.lineTo(x + w - r, y + h)
  265 + // 右下角
  266 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  267 +
  268 + // border-bottom
  269 + ctx.lineTo(x + r, y + h)
  270 + ctx.lineTo(x, y + h - r)
  271 + // 左下角
  272 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  273 +
  274 + // border-left
  275 + ctx.lineTo(x, y + r)
  276 + ctx.lineTo(x + r, y)
  277 +
  278 + // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
  279 + ctx.fill()
  280 + // ctx.stroke()
  281 + ctx.closePath()
  282 + // 剪切
  283 + ctx.clip();
  284 +
  285 + ctx.setFontSize(18 * unit);
  286 + ctx.setFillStyle("#000");
  287 + ctx.fillText("立即开通", 362 * unit, 212 * unit);
161 288  
162 289 //绘制图片
163   - ctx.draw(false, wx.canvasToTempFilePath({
  290 + ctx.draw(false,
  291 + wx.canvasToTempFilePath({
164 292 x: 0,
165 293 y: 0,
166 294 width: 750,
167   - height: 1217,
  295 + height: 930,
168 296 destWidth: 1.2 * 750 * 750 / th.data.screenWidth,
169 297 destHeight: 1.2 * 1217 * 750 / th.data.screenWidth,
170 298 canvasId: 'myCanvas',
171 299 success: function(res) {
  300 + console.log("sssssssssssssssssssssssss" + res.tempFilePath);
172 301 var tempFilePath = res.tempFilePath;
173 302 th.setData({
174 303 imagePath: tempFilePath,
175 304 maskHidden: false,
176   - canvasHidden: true,
177   - isshare: 1
  305 + canvasHidden: true
178 306 });
179 307 wx.previewImage({
180   - urls: [tempFilePath],
  308 + urls: [res.tempFilePath],
181 309 })
182   - }
  310 + if (!res.tempFilePath) {
  311 + wx.showModal({
  312 + title: '提示',
  313 + content: '图片绘制中，请稍后重试',
  314 + showCancel: false
  315 + })
  316 + }
  317 + wx.hideLoading();
  318 + }
  319 +
183 320 }))
184 321  
185 322 },
... ...
pages/user/plus/plus.wxml
  View file @76307c8
... ... @@ -43,35 +43,35 @@
43 43 <!-- 已开通 -->
44 44  
45 45  
46   -
47 46  
48   - <view class="MemberPlus" style=" background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
49 47  
50   - <view class="flex-space-between">
51   - <view>
52   - <view class="fs36" style="font-weight:bold">PLUSI会员</view>
53   - <view class="fs22">开通会员年卡仅199元</view>
54   - </view>
55   - <view class="renew fs28">立即续费
56   - </view>
  48 + <view class="MemberPlus" style=" background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
57 49  
58   - </view>
  50 + <view class="flex-space-between">
  51 + <view>
  52 + <view class="fs36" style="font-weight:bold">PLUSI会员</view>
  53 + <view class="fs22">开通会员年卡仅199元</view>
  54 + </view>
  55 + <view class="renew fs28">立即续费
  56 + </view>
59 57  
60   - <view class="flex-vertical-between xs fs24">
  58 + </view>
61 59  
62   - <view class="flex">
63   - <image class="privilege" src="{{url}}/miniapp/images/plus/privilege_o.png"></image>
64   - <view>正在享受PLUSI会员特权
65   - </view>
66   - </view>
67   - <view class="flex-vertical" bindtap="saveImageToPhotosAlbum">
68   - <view>邀请新朋友</view>
69   - <image class="share" src="{{url}}/miniapp/images/plus/Forward.png"></image>
70   - </view>
71   - </view>
  60 + <view class="flex-vertical-between xs fs24">
72 61  
  62 + <view class="flex">
  63 + <image class="privilege" src="{{url}}/miniapp/images/plus/privilege_o.png"></image>
  64 + <view>正在享受PLUSI会员特权
  65 + </view>
73 66 </view>
74   -
  67 + <view class="flex-vertical" bindtap="saveImageToPhotosAlbum">
  68 + <view>邀请新朋友</view>
  69 + <image class="share" src="{{url}}/miniapp/images/plus/Forward.png"></image>
  70 + </view>
  71 + </view>
  72 +
  73 + </view>
  74 +
75 75  
76 76 </block>
77 77 <view wx:if="{{j==false}}" class="flex-vertical-between Invitation fs30">
... ... @@ -188,36 +188,36 @@
188 188 <view bindtap="OpeningClose"></view>
189 189  
190 190 <!-- 弹框 -->
191   - <view class="Member_purchase">
192   - <view class="rel purchase_Bk" style="background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
193   - <image class="abs write" src="../../../images/plus/write.png"></image>
194   - </view>
195   - <view class="fs26 inf_com">
196   - <view class="fs36 flex-level perfect">请完善下面信息</view>
197   - <view class="fillin">
198   - <!-- 输入推荐人手机号 -->
199   - <view class="flex ai_and Enter_phone">
200   - <image class="phone_image" src="../../../images/plus/Invitation_code.png" ></image>
201   - <view class="phone">
202   - <input placeholder="请输入邀请码(推荐人手机号)" type="number" maxlength="30"/>
203   - </view>
  191 + <view class="Member_purchase">
  192 + <view class="rel purchase_Bk" style="background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
  193 + <image class="abs write" src="../../../images/plus/write.png"></image>
  194 + </view>
  195 + <view class="fs26 inf_com">
  196 + <view class="fs36 flex-level perfect">请完善下面信息</view>
  197 + <view class="fillin">
  198 + <!-- 输入推荐人手机号 -->
  199 + <view class="flex ai_and Enter_phone">
  200 + <image class="phone_image" src="../../../images/plus/Invitation_code.png"></image>
  201 + <view class="phone">
  202 + <input placeholder="请输入邀请码(推荐人手机号)" type="number" maxlength="30" />
204 203 </view>
  204 + </view>
205 205  
206   - <!-- 输入营业员 -->
207   - <view class="flex ai_and enter_SalesClerk">
208   - <image class="SalesClerk_image" src="../../../images/plus/Sales_Clerk.png" ></image>
209   - <view class="SalesClerk">
210   - <input placeholder="请输入营业员" maxlength="30"/>
211   - </view>
  206 + <!-- 输入营业员 -->
  207 + <view class="flex ai_and enter_SalesClerk">
  208 + <image class="SalesClerk_image" src="../../../images/plus/Sales_Clerk.png"></image>
  209 + <view class="SalesClerk">
  210 + <input placeholder="请输入营业员" maxlength="30" />
212 211 </view>
213   - <!-- 确认购买 -->
214   - <view class="flex-center">
215   - <view class="flex-center purchase" style="background-image:url({{url}}/miniapp/images/plus/card_one.jpg);">
216   - 确认购买
217   - </view>
  212 + </view>
  213 + <!-- 确认购买 -->
  214 + <view class="flex-center">
  215 + <view class="flex-center purchase" style="background-image:url({{url}}/miniapp/images/plus/card_one.jpg);">
  216 + 确认购买
218 217 </view>
219 218 </view>
220 219 </view>
  220 + </view>
221 221 <view class="flex-level">
222 222 <image class="purchaseClose" bindtap="OpeningClose" src="../../../images/plus/Close.png"></image>
223 223 </view>
... ... @@ -227,10 +227,15 @@
227 227  
228 228 <!-- 画布 -->
229 229  
230   -<canvas canvas-id='myCanvas' style="width:750rpx;height:1217rpx;"></canvas>
231   -<!-- 分享图片
232   -<view class="mc" wx:if="{{false}}" bindtap="isshare">
233   -<!-- 蒙尘 -->
234   - <!-- <image src="{{imagePath}}" style="width:400rpx;height:400rpx;"></image>
235   -</view> -->
  230 +<canvas canvas-id='myCanvas' style="width:750rpx;height:1330rpx;"></canvas>
  231 +<!-- < 分享图片 -->
  232 +<!-- <view class="mc" wx:if="{{isshare}}" catchtap="isshare">
  233 + <!-- 蒙尘 -->
  234 + <!-- <view>
  235 + <image src="{{imagePath}}"></image>
  236 + </view>
  237 + <view class="flex-center Close">
  238 + <image src="../../../images/plus/Close.png" bindtap="isshare"></image>
  239 + </view>
  240 +</view> --> -->
236 241 <warn id="warn"></warn>
237 242 \ No newline at end of file
... ...
pages/user/plus/plus.wxss
  View file @76307c8
... ... @@ -4,9 +4,11 @@ page {
4 4 z-index: 3;
5 5 overflow-x: hidden;
6 6 }
7   -.plus{
  7 +
  8 +.plus {
8 9 overflow-x: hidden;
9 10 }
  11 +
10 12 .Member_bk {
11 13 position: absolute;
12 14 z-index: 0;
... ... @@ -198,7 +200,7 @@ swiper {
198 200  
199 201 .Invitation .Detailed {
200 202 color: rgb(237, 189, 150);
201   - text-decoration:underline;
  203 + text-decoration: underline;
202 204 }
203 205  
204 206 .consumption {
... ... @@ -351,12 +353,4 @@ input {
351 353 overflow: visible;
352 354 width: 360rpx;
353 355 }
354   -.mc{
355   - position: fixed;
356   - width: 100%;
357   - height: 100%;
358   - z-index: 7;
359   - top: 0rpx;
360   - left: 0rpx;
361   - background-color: rgba(0,0,0,0.4);
362   -}
363 356 \ No newline at end of file
  357 +
... ...