wxd / MShopWeApp

Commit 7aae027c3cf53492075bfa8f27843a3ee1aa03f9

Authored by 前端研发-钱巧玲
1 parent 2a6960a2

助力活动分享代码拷贝

Inline Side-by-side
Showing 3 changed files with 471 additions and 166 deletions
pages/user/assistance/task_assistance.js
  View file @7aae027
1   -var auth = require("../../../utils/auth.js"), rq = require("../../../utils/request.js");
2   -var e = getApp(), app = e, i = require("../../../utils/util.js"),
3   - ut = i,s = e.globalData.setting, os = s, app_d = e.globalData;
  1 +var auth = require("../../../utils/auth.js"),
  2 + rq = require("../../../utils/request.js");
  3 +var e = getApp(),
  4 + app = e,
  5 + i = require("../../../utils/util.js"),
  6 + ut = i,
  7 + s = e.globalData.setting,
  8 + os = s,
  9 + app_d = e.globalData;
4 10 var regeneratorRuntime = require('../../../utils/runtime.js');
5 11 Page({
6 12  
... ... @@ -8,54 +14,79 @@ Page({
8 14 * 页面的初始数据
9 15 */
10 16 data: {
11   - sw_index: 0,//轮播的下标控制
  17 + sw_index: 0, //轮播的下标控制
  18 + url: s.url, //接口网址
12 19 iurl: s.imghost,
13   - is_task:0,//判断标题名是任务1还是2
14   - activity_data:"25:20:59",//活动剩余时间
15   - task_number:12,//任务数
16   - is_task:0,//历史记录与任务
17   - aitem:"",//活动的轮播图
  20 + is_task: 0, //判断标题名是任务1还是2
  21 + activity_data: "25:20:59", //活动剩余时间
  22 + task_number: 12, //任务数
  23 + is_task: 0, //历史记录与任务
  24 + aitem: "", //活动的轮播图
18 25 switch_head: 0, //0：我的任务，1：记录
19   - help_id:"",//活动的id
  26 + help_id: "", //活动的id canvasHidden: 0, //分享图片是否已经生成
  27 + is_share: 0, //是否显示画布
  28 + shareImgPath: [], //生成的图片
  29 + screenWidth: "", //用户的屏幕宽度
  30 + gid: "",
  31 + images: ["miniapp/images/friendhelp/help.png", "miniapp/images/friendhelp/background.png", "miniapp/images/friendhelp/gift.png", "miniapp/images/friendhelp/no_check.png",
  32 + "miniapp/images/friendhelp/check.png", "miniapp/images/friendhelp/check.png", "miniapp/images/friendhelp/unfinished.png", "miniapp/images/friendhelp/gift.png"
  33 + ]
20 34 },
21 35  
22 36 /**
23 37 * 生命周期函数--监听页面加载
24 38 */
25   - onLoad: function (options) {
26   - var help_id=options.help_id;
27   - console.log("是什么鬼",help_id);
28   - var th=this;
29   - th.setData({help_id:help_id});
  39 + onLoad: function(options) {
  40 + var help_id = options.help_id;
  41 + console.log("是什么鬼", help_id);
  42 + var th = this;
  43 + th.setData({
  44 + help_id: help_id
  45 + });
  46 + if (options.gid != undefined) {
  47 + th.setData({
  48 + gid: options.gid
  49 + })
  50 + }
30 51 th.close();
  52 + th.syinfo();
  53 + th.imageinfo();
31 54 },
32 55 // 轮播图点击左边
33   - click_pre:function(){
  56 + click_pre: function() {
34 57 var index = this.data.sw_index;
35 58 index--;
36 59 if (index < 0) return;
37   - this.setData({ sw_index: index })
38   -
  60 + this.setData({
  61 + sw_index: index
  62 + })
  63 +
39 64 },
40   - //轮播图点击右边
41   - click_next:function(){
  65 + //轮播图点击右边
  66 + click_next: function() {
42 67 var index = this.data.sw_index;
43 68 index++;
44 69 if (index >= this.data.aitem.length) return;
45   - this.setData({ sw_index: index })
  70 + this.setData({
  71 + sw_index: index
  72 + })
46 73  
47 74 },
48 75 //任务领取
49   - onlicke:function(){
50   - var th=this;
  76 + onlicke: function() {
  77 + var th = this;
  78 + th.shareFrends();
  79 + th.setData({
  80 + is_share:1
  81 + })
51 82 getApp().my_warnning("任务领取成功", 1, th);
52 83 },
53 84  
54   -//我的任务和帮拆记录的替换
55   - switch_head: function (e) {
  85 + //我的任务和帮拆记录的替换
  86 + switch_head: function(e) {
56 87 var th = this;
57   - var index = e.currentTarget.dataset.index;//获取当前选择的是任务还是活动说明
58   - var switch_head = th.data.switch_head;//0任务，1活动说明
  88 + var index = e.currentTarget.dataset.index; //获取当前选择的是任务还是活动说明
  89 + var switch_head = th.data.switch_head; //0任务，1活动说明
59 90 if (index != switch_head) {
60 91 th.setData({
61 92 switch_head: index,
... ... @@ -64,15 +95,15 @@ Page({
64 95 }
65 96 },
66 97 //划动的时候监听
67   - onSli:function(e){
68   -
69   - var ind=e.detail.current ;
  98 + onSli: function(e) {
  99 +
  100 + var ind = e.detail.current;
70 101 this.setData({
71   - sw_index:ind
  102 + sw_index: ind
72 103 })
73 104 },
74 105 //导航球
75   - close: function () {
  106 + close: function() {
76 107 var th = this;
77 108 var nav_b = th.selectComponent("#nav_b"); //组件的id
78 109 nav_b.close_box();
... ... @@ -82,58 +113,60 @@ Page({
82 113 /**
83 114 * 生命周期函数--监听页面初次渲染完成
84 115 */
85   - onReady: function () {
  116 + onReady: function() {
86 117  
87 118 },
88 119  
89 120 /**
90 121 * 生命周期函数--监听页面显示
91 122 */
92   - onShow: function () {
93   - var th=this;
94   - var help_id=th.data.help_id;
95   - console.log("活动的id", help_id);
  123 + onShow: function() {
  124 + var th = this;
  125 + var help_id = th.data.help_id;
96 126 /*-----统计-----*/
97 127 rq.get("/api/weshop/marketing/help/help/task/page", {
98   - data: {
  128 + data: {
99 129 helpId: help_id,
100   - storeId:os.stoid
101   - },
102   - success: function (su) {
103   -
104   - var data=su.data;
  130 + storeId: os.stoid
  131 + },
  132 + success: function(su) {
  133 +
  134 + var data = su.data;
105 135 console.log('waitlist5555555555' + data.code);
106   - if (data.code!=0){
107   - getApp().my_warnning(data.msg,0, th);
  136 + if (data.code != 0) {
  137 + getApp().my_warnning(data.msg, 0, th);
108 138 return false;
109 139 }
110   - if (data.code==0){
  140 + if (data.code == 0) {
111 141 //轮播图的数据
112   - var data_aissa=data.data.pageData;
  142 + var data_aissa = data.data.pageData;
113 143 //当前时间戳
114 144 var nt = ut.gettimestamp();
115 145  
116   - data_aissa.forEach(function (val, ind) {
117   - console.log(nt, "当前时间","结束时间", val.end_time,"开始时间");
  146 + data_aissa.forEach(function(val, ind) {
  147 + console.log(nt, "当前时间", "结束时间", val.end_time, "开始时间");
118 148 //已开始
119 149 if (val.start_time < nt && val.end_time > nt) data_aissa[ind].status = 0;
120 150 //未开始
121 151 else if (val.start_time > nt && val.end_time > nt) data_aissa[ind].status = 1;
122   - //已结束
123   -
  152 + //已结束
  153 +
124 154 else if (val.start_time < nt && val.end_time < nt) data_aissa[ind].status = 2;
125   -
  155 +
126 156 });
127 157  
128   - console.log("是什么东西2222222222",data_aissa);
129   -
130   - th.setData({ aitem:data_aissa});
  158 + th.setData({
  159 + aitem: data_aissa
  160 + });
131 161  
132 162  
133 163 }
134   -
  164 +
135 165 }
136 166 })
  167 + setTimeout(function() {
  168 + th.shareFrends();
  169 + }, 1000)
137 170  
138 171 },
139 172 //----助力任务-----
... ... @@ -183,41 +216,279 @@ Page({
183 216  
184 217 }
185 218 setTimeout(th.countDown, 1000);
186   -
  219 +
187 220 },
188 221  
189 222 /**
190 223 * 生命周期函数--监听页面隐藏
191 224 */
192   - onHide: function () {
  225 + onHide: function() {
193 226  
194 227 },
195 228  
196 229 /**
197 230 * 生命周期函数--监听页面卸载
198 231 */
199   - onUnload: function () {
  232 + onUnload: function() {
200 233  
201 234 },
202 235  
203 236 /**
204 237 * 页面相关事件处理函数--监听用户下拉动作
205 238 */
206   - onPullDownRefresh: function () {
  239 + onPullDownRefresh: function() {
207 240  
208 241 },
209 242  
210 243 /**
211 244 * 页面上拉触底事件的处理函数
212 245 */
213   - onReachBottom: function () {
  246 + onReachBottom: function() {
214 247  
215 248 },
216 249  
217 250 /**
218 251 * 用户点击右上角分享
219 252 */
220   - onShareAppMessage: function () {
  253 + onShareAppMessage: function() {
  254 +
  255 + },
  256 + shareFrends: function(e) {
  257 + var th = this;
  258 + var scene = th.data.gid;
  259 + ///二微码
  260 + // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
  261 + // a.stoid + "?sceneValue=" + scene + "&pageValue=pages/goods/goodsInfo/goodsInfo";
  262 + var iurl = th.data.iurl; //图片地址前缀
  263 + const ctx = wx.createCanvasContext('share_id'); //绘图上下文
  264 + var unit = th.data.screenWidth / 750 * 1.35;
  265 + var numsize = 20 * unit; //几人助力字体大小
  266 + var size = 15 * unit;
  267 + var num = 10;
  268 + var q_num = 6;
  269 + var already = num.toString().length + 1; //已有几位好友助力
  270 + var lack = q_num.toString().length + 1; //还差几位好友助力
  271 + var imagesize = 40 * unit; //助力人的图片大小
  272 + var left = 74 * unit; //助力人头像跟左边的距离
  273 + var spacing = 12 * unit; //助力人图片间距
  274 + var images = th.data.images;
  275 + ctx.drawImage(images[0], 0, 0, 445 * unit, 700 * unit); //分享的背景图片
  276 + ctx.drawImage(images[1], 37 * unit, 185 * unit, 370 * unit, 377 * unit); //分享的背景图片
  277 + ctx.drawImage(images[2], 90 * unit, 231 * unit, 266 * unit, 160 * unit); //分享的背景图片
  278 + ctx.setFillStyle("rgb(221,153,116)");
  279 + ctx.setFontSize(size)
  280 + ctx.fillText("已有", 77 * unit, 430 * unit);
  281 + ctx.setFillStyle("#FF4746");
  282 + ctx.setFontSize(numsize)
  283 + ctx.fillText(num + "位", 108 * unit, 430 * unit);
  284 + ctx.setFillStyle("rgb(221,153,116)");
  285 + ctx.setFontSize(size)
  286 + ctx.fillText("好友助力，还差", 114 * unit + already * numsize * unit, 430 * unit);
  287 + ctx.setFillStyle("#FF4746");
  288 + ctx.setFontSize(numsize);
  289 + ctx.fillText(q_num + "位", 220 * unit + already * numsize * unit, 430 * unit);
  290 + ctx.setFillStyle("rgb(221,153,116)");
  291 + ctx.setFontSize(size);
  292 + ctx.fillText("达成助力", 248 * unit + lack * numsize * unit + already * numsize - numsize * 2, 430 * unit);
  293 + var c = q_num / num;
  294 + ctx.drawImage(images[3], 65 * unit, 445 * unit, 320 * unit, 12 * unit);
  295 + ctx.drawImage(images[4], 65 * unit, 445 * unit, 320 * unit * c, 12 * unit);
  296 + for (var i = 0; i < 6; i++) {
  297 + if (i == 0) {
  298 + ctx.save();
  299 + ctx.beginPath(); //开始绘制
  300 + ctx.arc(left + imagesize / 2, 505 * unit, imagesize/2, 0, 2 * Math.PI);
  301 + ctx.setLineWidth(4 * unit);
  302 + ctx.setStrokeStyle('red');
  303 + ctx.setFillStyle("white");
  304 + ctx.fill();
  305 + ctx.clip();
  306 + ctx.drawImage(images[6], left, 505 * unit - imagesize/2, imagesize, imagesize);
  307 + ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
  308 + } else {
  309 + // 助力人的头像
  310 + ctx.drawImage(images[6], left, 505 * unit - imagesize / 2, imagesize, imagesize); //分享的背景图片
  311 + }
  312 + left += imagesize + spacing;
  313 + }
  314 + ctx.setFillStyle("rgb(255,255,255)");
  315 + ctx.setFontSize(size);
  316 + ctx.fillText("优惠乐翻天，精彩就在你身边!", 37 * unit, 595 * unit);
  317 + ctx.setFillStyle("rgb(255,255,255)");
  318 + ctx.setFontSize(size);
  319 + ctx.fillText("2019.06.26 - 2019.07.02!", 37 * unit, 620 * unit);
  320 + ctx.setFillStyle("rgb(255,255,255)");
  321 + ctx.setFontSize(size);
  322 + ctx.fillText("长按识别二维码，可帮我助力!", 37 * unit, 660 * unit);
  323 + ctx.drawImage(images[7], 325 * unit, 595 * unit, 77 * unit, 77 * unit); //分享的背景图片
  324 + ctx.save();
  325 + //读取文件成功则OK--
  326 + // wx.getImageInfo({
  327 + // src: path3,
  328 + // success: function (res) {
  329 + //把画板内容绘制成图片，并回调 画板图片路径
  330 + ctx.draw(false, function() {
  331 + setTimeout(function() {
  332 + wx.canvasToTempFilePath({
  333 + x: 0,
  334 + y: 0,
  335 + width: 300,
  336 + height: 500,
  337 + destWidth: 400 * 2,
  338 + destHeight: 720 * 2,
  339 + canvasId: 'share_id',
  340 + success: function(res) {
  341 + wx.hideLoading();
  342 + var shareImgPath = th.data.shareImgPath;
  343 + shareImgPath[0] = res.tempFilePath;
  344 +
  345 + th.setData({
  346 + shareImgPath: shareImgPath,
  347 + canvasHidden: 1,
  348 + is_share: 1
  349 + })
  350 + if (!res.tempFilePath) {
  351 + wx.showModal({
  352 + title: '提示',
  353 + content: '图片绘制中，请稍后重试',
  354 + showCancel: false
  355 + })
  356 + return false;
  357 + }
  358 +
  359 + },
  360 + fail(r) {
  361 +
  362 + }
  363 + }, 500)
  364 + })
  365 + })
  366 + // }
  367 + // })
  368 + },
  369 + preview: function() {
  370 + var th = this;
  371 + var shareImgPath = th.data.shareImgPath;
  372 + wx.previewImage({
  373 + url: shareImgPath[0],
  374 + urls: shareImgPath
  375 + })
  376 + },
  377 +
  378 + //关闭分享显示
  379 + close_share: function() {
  380 + var th = this;
  381 + th.setData({
  382 + is_share: 0
  383 + })
  384 + },
  385 + syinfo: function() {
  386 + var th = this;
  387 + //获取用户设备信息，屏幕宽度
  388 + wx.getSystemInfo({
  389 + success: res => {
  390 + th.setData({
  391 + screenWidth: res.screenWidth
  392 + })
  393 + }
  394 + })
  395 + },
  396 + imageinfo: function() {
  397 + var th = this;
  398 + var images = th.data.images;
  399 + var iurl = th.data.iurl;
  400 + wx.getImageInfo({
  401 + src: iurl + images[0],
  402 + success: function(res) {
  403 + console.log(res + i);
  404 + //res.path是网络图片的本地地址
  405 + images[0] = res.path;
  406 + },
  407 + fail: function(res) {
  408 + console.log(res.toString() + "" + i);
  409 + }
  410 + });
  411 + wx.getImageInfo({
  412 + src: iurl + images[1],
  413 + success: function(res) {
  414 + console.log(res + i);
  415 + //res.path是网络图片的本地地址
  416 + images[1] = res.path;
  417 + },
  418 + fail: function(res) {
  419 + console.log(res.toString() + "" + i);
  420 + }
  421 + });
  422 + wx.getImageInfo({
  423 + src: iurl + images[2],
  424 + success: function(res) {
  425 + console.log(res + i);
  426 + //res.path是网络图片的本地地址
  427 + images[2] = res.path;
  428 + },
  429 + fail: function(res) {
  430 + console.log(res.toString() + "" + i);
  431 + }
  432 + });
  433 + wx.getImageInfo({
  434 + src: iurl + images[3],
  435 + success: function(res) {
  436 + console.log(res + i);
  437 + //res.path是网络图片的本地地址
  438 + images[3] = res.path;
  439 + },
  440 + fail: function(res) {
  441 + console.log(res.toString() + "" + i);
  442 + }
  443 + });
  444 + wx.getImageInfo({
  445 + src: iurl + images[4],
  446 + success: function(res) {
  447 + console.log(res + i);
  448 + //res.path是网络图片的本地地址
  449 + images[4] = res.path;
  450 + },
  451 + fail: function(res) {
  452 + console.log(res.toString() + "" + i);
  453 + }
  454 + });
  455 + wx.getImageInfo({
  456 + src: iurl + images[5],
  457 + success: function(res) {
  458 + console.log(res + i);
  459 + //res.path是网络图片的本地地址
  460 + images[5] = res.path;
  461 + },
  462 + fail: function(res) {
  463 + console.log(res.toString() + "" + i);
  464 + }
  465 + });
  466 + wx.getImageInfo({
  467 + src: iurl + images[6],
  468 + success: function(res) {
  469 + console.log(res + i);
  470 + //res.path是网络图片的本地地址
  471 + images[6] = res.path;
  472 + },
  473 + fail: function(res) {
  474 + console.log(res.toString() + "" + i);
  475 + }
  476 + });
  477 +
  478 + wx.getImageInfo({
  479 + src: iurl + images[7],
  480 + success: function(res) {
  481 + console.log(res + i);
  482 + //res.path是网络图片的本地地址
  483 + images[7] = res.path;
  484 + },
  485 + fail: function(res) {
  486 + console.log(res.toString() + "" + i);
  487 + }
  488 + })
  489 + th.setData({
  490 + images: images
  491 + })
221 492  
222 493 }
223 494 })
224 495 \ No newline at end of file
... ...
pages/user/assistance/task_assistance.wxml
  View file @7aae027
1 1 <view class="top-back" style="background-image: url({{iurl}}/miniapp/images/friendhelp/lumi.png)">
2   - <!-- 助力活动头部 -->
3   - <view class="top-frame">
4   - <view class="top-title white fs36 t-c">
5   - {{aitem[sw_index].tite_name}}
6   - </view>
7   - <view class="activity-data t-c fs28 white">
8   - 活动剩余时间: {{activity_data}}
9   - </view>
  2 + <!-- 助力活动头部 -->
  3 + <view class="top-frame">
  4 + <view class="top-title white fs36 t-c">
  5 + {{aitem[sw_index].tite_name}}
10 6 </view>
11   - <!-- 图片的轮播图 -->
12   - <view class="xc-specific-more-frame flex-center">
13   - <view bindtap="click_pre">
14   - <view class="bg_left xc-left bcolor"></view>
15   - </view>
16   - <swiper current="{{sw_index}}" style='width:82.7%; height:100%'
17   - bindchange='onSli'
18   - indicator-dots="{{false}}" autoplay="{{false}}" >
19   -
20   - <swiper-item wx:for="{{aitem}}" wx:for-item="aitem" wx:for-index="pidx">
21   -
22   - <image class="xc-center-img "src="{{aitem.PrivilegeICOUrl}}"></image>
23   -
24   - </swiper-item>
25   -
26   - </swiper>
27   -
28   - <view bindtap="click_next">
29   - <view class="bg_right xc-right bcolor mt" ></view>
30   - </view>
31   - </view>
  7 + <view class="activity-data t-c fs28 white">
  8 + 活动剩余时间: {{activity_data}}
  9 + </view>
  10 + </view>
  11 + <!-- 图片的轮播图 -->
  12 + <view class="xc-specific-more-frame flex-center">
  13 + <view bindtap="click_pre">
  14 + <view class="bg_left xc-left bcolor"></view>
  15 + </view>
  16 + <swiper current="{{sw_index}}" style='width:82.7%; height:100%' bindchange='onSli' indicator-dots="{{false}}" autoplay="{{false}}">
32 17  
33   - <view class="task-number fs28 white t-c ">
34   - 今天剩余可领{{task_number}}个任务
  18 + <swiper-item wx:for="{{aitem}}" wx:for-item="aitem" wx:for-index="pidx">
  19 +
  20 + <image class="xc-center-img " src="{{aitem.PrivilegeICOUrl}}"></image>
  21 +
  22 + </swiper-item>
  23 +
  24 + </swiper>
  25 +
  26 + <view bindtap="click_next">
  27 + <view class="bg_right xc-right bcolor mt"></view>
35 28 </view>
36   - <view class="task_clike fs40 t-c flex-center" bindtap="onlicke">
  29 + </view>
  30 +
  31 + <view class="task-number fs28 white t-c ">
  32 + 今天剩余可领{{task_number}}个任务
  33 + </view>
  34 +
  35 + <view class="task_clike fs40 t-c flex-center" bindtap="onlicke">
37 36 就选它了
38   - </view>
  37 + </view>
39 38 </view>
40 39 <!-- 底部列表 -->
41   - <view>
42   - <!-- 标题 -->
43   -
44   - <view class="flex-vertical-between fs28 padding head">
45   - <view class="flex-center lhead {{switch_head==0?'rhead':''}}" bindtap="switch_head"data-index="0">
46   - <image class="unfinished" src="{{iurl}}miniapp/images/friendhelp/task.png" lazy-load="true"></image>
47   - <view >我的任务</view>
  40 +<view>
  41 + <!-- 标题 -->
  42 +
  43 + <view class="flex-vertical-between fs28 padding head">
  44 + <view class="flex-center lhead {{switch_head==0?'rhead':''}}" bindtap="switch_head" data-index="0">
  45 + <image class="unfinished" src="{{iurl}}miniapp/images/friendhelp/task.png" lazy-load="true"></image>
  46 + <view>我的任务</view>
  47 + </view>
  48 + <view class="flex-center lhead {{switch_head==1?'rhead':''}}" bindtap="switch_head" data-index='1'>
  49 + <image class="unfinished" style="margin-top: 5rpx;" src="{{iurl}}miniapp/images/friendhelp/edit.png" lazy-load="true"></image>
  50 + <view>帮拆记录</view>
  51 + </view>
  52 + </view>
  53 +
  54 + <view class="white">
  55 + <view class="items" wx:if="{{is_task==0}}">
  56 + <view class="item fs26 flex-vertical-between padding" wx:for="{{5}}">
  57 + <view class="flex-center width">
  58 + <view class="ellipsis-1">豪华任务一
  59 + </view>
48 60 </view>
49   - <view class="flex-center lhead {{switch_head==1?'rhead':''}}" bindtap="switch_head" data-index='1'>
50   - <image class="unfinished" style="margin-top: 5rpx;" src="{{iurl}}miniapp/images/friendhelp/edit.png" lazy-load="true"></image>
51   - <view>帮拆记录</view>
  61 +
  62 + <view class="flex-center width state">
  63 + <view class="ellipsis-1">进行中
  64 + </view>
52 65 </view>
  66 +
53 67 </view>
  68 + </view>
  69 + </view>
54 70  
55   - <view class="white">
56   - <view class="items" wx:if="{{is_task==0}}">
57   - <view class="item fs26 flex-vertical-between padding" wx:for="{{5}}">
58   - <view class="flex-center width">
59   - <view class="ellipsis-1">豪华任务一
60   - </view>
61   - </view>
62 71  
63   - <view class="flex-center width state">
64   - <view class="ellipsis-1">进行中
65   - </view>
66   - </view>
  72 + <view class="items" wx:if="{{is_task==1}}">
67 73  
68   - </view>
69   - </view>
70   - </view>
71   -
72   -
73   - <view class="items" wx:if="{{is_task==1}}">
74   -
75   -
76   - <view class="item fs26 flex flex-vertical-between padding" wx:for="{{5}}">
77   - <view class="flex white"style="justify-content: space-around; width: 90%;margin:auto">
78   - <image class="circle user_img" src="https://mshopimg.yolipai.net/public/upload/qyimg/temp/2019/08-14/0697f7277936a3b116a6ebc4f8f5e39a.png"></image>
79   - <view class="ellipsis-1">豪华任务一
80   - </view>
81   - <view class="ellipsis-1">2019-05-12
82   - </view>
83   - </view>
84   -
85   - </view>
86   -
87   - </view>
88   - <view class="fs30" wx:if="{{1<0}}">
89   - <view class="flex-center nothing">
90   - <view>暂无任务记录</view>
91   - </view>
92   - <view class="flex-center receive">
93   - <view class="flex-center">
94   - <view>已有</view>
95   - <view>126</view>
96   - <view>人领取了任务</view>
97   - </view>
98   - </view>
  74 +
  75 + <view class="item fs26 flex flex-vertical-between padding" wx:for="{{5}}">
  76 + <view class="flex white" style="justify-content: space-around; width: 90%;margin:auto">
  77 + <image class="circle user_img" src="https://mshopimg.yolipai.net/public/upload/qyimg/temp/2019/08-14/0697f7277936a3b116a6ebc4f8f5e39a.png"></image>
  78 + <view class="ellipsis-1">豪华任务一
99 79 </view>
100   -
101   - </view>
102   - <!-- 加载更多 -->
103   - <view class="fs32 ">
104   - <view class="flex-center">
105   - <view class="line"></view>
106   - <view class="load white" bindtap="">点击加载更多</view>
107   - <view class="line"></view>
108   - </view>
109   - <view class="flex-center white"style="margin-top: 20rpx;" >
110   - <view>已有</view>
111   - <view>126</view>
112   - <view>人领取了任务</view>
113   - </view>
114   - </view>
115   -
  80 + <view class="ellipsis-1">2019-05-12
  81 + </view>
  82 + </view>
  83 +
  84 + </view>
  85 +
  86 + </view>
  87 + <view class="fs30" wx:if="{{1<0}}">
  88 + <view class="flex-center nothing">
  89 + <view>暂无任务记录</view>
  90 + </view>
  91 + <view class="flex-center receive">
  92 + <view class="flex-center">
  93 + <view>已有</view>
  94 + <view>126</view>
  95 + <view>人领取了任务</view>
  96 + </view>
  97 + </view>
  98 + </view>
  99 +
  100 +</view>
  101 +<!-- 加载更多 -->
  102 +<view class="fs32 ">
  103 + <view class="flex-center">
  104 + <view class="line"></view>
  105 + <view class="load white" bindtap="">点击加载更多</view>
  106 + <view class="line"></view>
  107 + </view>
  108 + <view class="flex-center white" style="margin-top: 20rpx;">
  109 + <view>已有</view>
  110 + <view>126</view>
  111 + <view>人领取了任务</view>
  112 + </view>
  113 +</view>
  114 +<view wx:if="{{is_share}}">
  115 + <!-- 蒙尘 -->
  116 + <view wx:if="{{is_share}}" class="dust">
  117 + </view>
  118 + <!-- 画布 -->
  119 + <view class="canvas" style="width:100%;">
  120 + <view class="flex-center">
  121 + <canvas canvas-id="share_id" style="width:600rpx;height:1000rpx;" bindtap="preview"></canvas>
  122 + </view>
  123 + <view class="closes flex-center">
  124 + <image class="close" src="{{iurl}}/miniapp/images/plus/Close.png" bindtap="close_share"></image>
  125 + </view>
  126 + </view>
  127 +</view>
116 128 <!-- 引入提示组件 -->
117 129 <warn id="warn"></warn>
118 130 <!-- 制作一个圆球导航 -->
... ...
pages/user/assistance/task_assistance.wxss
  View file @7aae027
... ... @@ -129,6 +129,28 @@ border-color: #fff;
129 129 }
130 130 .user_img{
131 131 width: 50rpx;
132   - height: 50rpx;
133   -
134   -}
135 132 \ No newline at end of file
  133 + height: 50rpx;
  134 +}
  135 +.dust {
  136 + position: fixed;
  137 + width: 100%;
  138 + height: 100%;
  139 + background-color: rgba(206, 184, 188, 0.158);
  140 + z-index: 10;
  141 +}
  142 +
  143 +.closes {
  144 + margin-top: 20rpx;
  145 +}
  146 +
  147 +.canvas {
  148 + position: fixed;
  149 + z-index: 11;
  150 + width: 100%;
  151 + top:20rpx;
  152 +}
  153 +
  154 +.close {
  155 + width: 70rpx;
  156 + height: 70rpx;
  157 +}
... ...