27 changed files with 1033 additions and 3 deletions
Unified View
Diff Options
-
11app.js.rej
-
4app.json
-
36components/actionsheet/index.js
-
3components/actionsheet/index.json
-
15components/actionsheet/index.wxml
-
107components/actionsheet/index.wxss
-
29components/pop-manager/index.js
-
3components/pop-manager/index.json
-
12components/pop-manager/index.wxml
-
1components/pop-manager/index.wxss
-
35components/popup/index.js
-
6components/popup/index.json
-
8components/popup/index.wxml
-
BINimages/finish_ico.png
-
BINimages/ic_arrow_right.png
-
BINimages/icon_task_finish.png
-
BINimages/moments_ico.png
-
BINimages/wechat_ico.png
-
88pages/activity_list/activity_list.js
-
3pages/activity_list/activity_list.json
-
36pages/activity_list/activity_list.wxml
-
138pages/activity_list/activity_list.wxss
-
9pages/mcenter/mcenter.js
-
371pages/pay_result/pay_result.js
-
7pages/pay_result/pay_result.json
-
31pages/pay_result/pay_result.wxml
-
83pages/pay_result/pay_result.wxss
@ -0,0 +1,11 @@ |
|||||
|
diff a/app.js b/app.js (rejected hunks) |
||||
|
@@ -19,8 +19,7 @@ |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
- |
||||
|
- |
||||
|
+ this.gw.systemInfo = wx.getSystemInfoSync(); |
||||
|
}, |
||||
|
getSessionKey: function (code) { |
||||
|
var that = this; |
||||
@ -0,0 +1,36 @@ |
|||||
|
Component({ |
||||
|
externalClasses: ['mask-class', 'container-class'], |
||||
|
properties: { |
||||
|
actions: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
|
}, |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
}, |
||||
|
cancelWithMask: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
cancelText: { |
||||
|
type: String, |
||||
|
value: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onMaskClick() { |
||||
|
if (this.data.cancelWithMask) { |
||||
|
this.cancelClick(); |
||||
|
} |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
this.triggerEvent('cancel'); |
||||
|
}, |
||||
|
handleBtnClick({ currentTarget = {} }) { |
||||
|
const dataset = currentTarget.dataset || {}; |
||||
|
const { index } = dataset; |
||||
|
this.triggerEvent('actionclick', { index }); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
<view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}"> |
||||
|
<view class="mask-class zan-actionsheet__mask" bindtap="onMaskClick"> |
||||
|
<view class="container-class zan-actionsheet__container"> |
||||
|
|
||||
|
<view wx:for="{{ actions }}" class="icon-wrap" wx:key="{{ index }}-{{ item.name }}"> |
||||
|
|
||||
|
<button class="icon-wrap" open-type="{{ item.openType }}" data-index="{{ index }}" bindtap='handleBtnClick'> |
||||
|
<image class="icon-classname" src="{{ item.icon }}" mode='scaleToFill' /> |
||||
|
<view class="txt-classname">{{ item.name }}</view> |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,107 @@ |
|||||
|
.zan-actionsheet { |
||||
|
background-color: #f8f8f8; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__mask { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 10; |
||||
|
background: rgba(0, 0, 0, 0.7); |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__container { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: #f8f8f8; |
||||
|
-webkit-transform: translate3d(0, 50%, 0); |
||||
|
transform: translate3d(0, 50%, 0); |
||||
|
-webkit-transform-origin: center; |
||||
|
transform-origin: center; |
||||
|
transition: all 0.2s ease; |
||||
|
z-index: 11; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__btn { |
||||
|
margin-bottom: 0 !important; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__footer .zan-actionsheet__btn { |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__btn-content { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__subname { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__name, .zan-actionsheet__subname { |
||||
|
height: 45px; |
||||
|
line-height: 45px; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__btn.zan-btn:last-child::after { |
||||
|
border-bottom-width: 0; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__subname { |
||||
|
margin-left: 2px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__footer { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet__btn--loading .zan-actionsheet__subname { |
||||
|
color: transparent; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet--show .zan-actionsheet__container { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: translate3d(0, 0, 0); |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
.zan-actionsheet--show .zan-actionsheet__mask { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.icon-wrap { |
||||
|
width: 375rpx; |
||||
|
height: 135px; |
||||
|
float: left; |
||||
|
text-align: center; |
||||
|
background: none !important; |
||||
|
color: #000 !important; |
||||
|
} |
||||
|
|
||||
|
.icon-wrap::after { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.txt-classname { |
||||
|
height: 20rpx; |
||||
|
line-height: 20rpx; |
||||
|
color: #333; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.icon-classname { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
margin-top: 48rpx; |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
Component({ |
||||
|
properties: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
}, |
||||
|
// 是否有遮罩层
|
||||
|
overlay: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
// 遮罩层是否会显示
|
||||
|
showOverlay: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
// 内容从哪个方向出,可选 center top bottom left right
|
||||
|
type: { |
||||
|
type: String, |
||||
|
value: 'center' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleMaskClick() { |
||||
|
this.triggerEvent('clickmask', {}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,12 @@ |
|||||
|
<view |
||||
|
class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}" |
||||
|
> |
||||
|
<view |
||||
|
wx:if="{{ overlay }}" |
||||
|
class="pop__mask {{ showOverlay ? '' : 'pop__mask--hide' }}" |
||||
|
bindtap="handleMaskClick" |
||||
|
></view> |
||||
|
<view class="pop__container"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1 @@ |
|||||
|
.pop{visibility:hidden}.pop--show{visibility:visible}.pop__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.pop__mask--hide{background:0 0}.pop__container{position:fixed;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;transform-origin:center;transition:all .4s ease;z-index:11;opacity:0}.pop--show .pop__container{opacity:1}.pop--show .pop__mask{display:block}.pop--left .pop__container{left:0;top:50%;-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.pop--show.pop--left .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--right .pop__container{right:0;top:50%;left:auto;-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.pop--show.pop--right .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--bottom .pop__container{top:auto;left:50%;bottom:0;-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}.pop--show.pop--bottom .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.pop--top .pop__container{top:0;left:50%;-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}.pop--show.pop--top .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)} |
||||
@ -0,0 +1,35 @@ |
|||||
|
Component({ |
||||
|
properties: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
value: false |
||||
|
}, |
||||
|
|
||||
|
overlay: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
|
||||
|
closeOnClickOverlay: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
|
||||
|
// 弹出方向
|
||||
|
type: { |
||||
|
type: String, |
||||
|
value: 'center' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleMaskClick() { |
||||
|
this.triggerEvent('click-overlay', {}); |
||||
|
|
||||
|
if (!this.data.closeOnClickOverlay) { |
||||
|
return; |
||||
|
} |
||||
|
this.triggerEvent('close', {}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"component": true, |
||||
|
"usingComponents": { |
||||
|
"pop-manager": "../pop-manager/index" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
<pop-manager |
||||
|
show="{{ show }}" |
||||
|
type="{{ type }}" |
||||
|
show-overlay="{{ overlay }}" |
||||
|
bindclickmask="handleMaskClick" |
||||
|
> |
||||
|
<slot></slot> |
||||
|
</pop-manager> |
||||
@ -0,0 +1,88 @@ |
|||||
|
// pages/activity_list/activity_list.js
|
||||
|
const util = require('../../utils/util.js') |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
repos: [], |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
this.loadData(); |
||||
|
}, |
||||
|
|
||||
|
loadData: function () {//定义函数名称
|
||||
|
wx.showLoading(); |
||||
|
var that = this; |
||||
|
wx.request({ |
||||
|
url: getApp().gw.hostUrl + '/mall/wxa/activity/group/list', |
||||
|
method: 'get', |
||||
|
data: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 2 |
||||
|
}, |
||||
|
header: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded', |
||||
|
'sessionId': wx.getStorageSync('sessionId') |
||||
|
}, |
||||
|
success: function (res) { |
||||
|
console.log(res); |
||||
|
wx.hideLoading(); |
||||
|
if (res.data.code == 0) { |
||||
|
that.setData({ |
||||
|
repos: res.data.response.map((n) => Object.assign({}, n, { |
||||
|
createdAt: util.formatTime(new Date(n.createdAt)).substr(0, 16), |
||||
|
img: that.switchImg(n.status), |
||||
|
activityTypeStr: that.switchType(n.activityType), |
||||
|
})), |
||||
|
}) |
||||
|
} else { |
||||
|
wx.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'none', |
||||
|
duration: 1000 |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
fail: function (e) { |
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ |
||||
|
title: '网络异常!', |
||||
|
icon: 'none', |
||||
|
duration: 1000 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
itemClick: function (event) { |
||||
|
var groupNo = event.currentTarget.dataset.testid; |
||||
|
wx.navigateTo({ |
||||
|
url: '../pay_result/pay_result?groupNo=' + groupNo |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
switchType: function (activityType) { |
||||
|
switch (activityType) { |
||||
|
case 10: return '拼团' |
||||
|
case 20: return '砍价' |
||||
|
case 30: return '抽奖' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
switchImg: function (status) { |
||||
|
switch (status) { |
||||
|
case 0: return '../../images/icon_task_finish.png' |
||||
|
case 20: return '../../images/icon_task_finish.png' |
||||
|
case 90: return '../../images/icon_task_finish.png' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "活动记录" |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<!--pages/activity_list/activity_list.wxml--> |
||||
|
<view wx:if="{{repos.length > 0}}"> |
||||
|
|
||||
|
<view wx:for="{{repos}}" wx:key=""> |
||||
|
|
||||
|
<view class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" bindtap="itemClick" data-testId="{{item.groupNo}}"> |
||||
|
|
||||
|
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg"> |
||||
|
|
||||
|
<view class="weui-media-box__info"> |
||||
|
<view class="weui-media-box-name">{{ item.activityName }}</view> |
||||
|
<view class="weui-media-box__type{{item.activityType}}">{{ item.activityTypeStr }}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="weui-media-box-info-meta">参与时间: {{ item.createdAt }}</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view wx:if="{{item.status == 10}}"> |
||||
|
<view class="item_status">进行中</view> |
||||
|
</view> |
||||
|
<view wx:else> |
||||
|
<image class="weui-media-box__thumb" src="{{ item.img }}" /> |
||||
|
</view> |
||||
|
|
||||
|
<image class="icon-arrow" src="../../images/ic_arrow_right.png" /> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view wx:else> |
||||
|
<view class="empty-layout"> |
||||
|
<text>亲,您还没有参加任何活动!</text> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,138 @@ |
|||||
|
/* pages/activity_list/activity_list.wxss */ |
||||
|
|
||||
|
.weui-media-box { |
||||
|
height: 120rpx; |
||||
|
padding: 15px; |
||||
|
margin-top: 10rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box:before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 1px; |
||||
|
border-top: 1rpx solid #f1f1f1; |
||||
|
color: #f1f1f1; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box_appmsg { |
||||
|
height: 120rpx; |
||||
|
margin-top: 10rpx; |
||||
|
background: #fff; |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-webkit-align-items: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.weui-cell_active { |
||||
|
background-color: #f1f1f1; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box__bd_in-appmsg { |
||||
|
-webkit-box-flex: 1; |
||||
|
-webkit-flex: 1; |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box__info { |
||||
|
list-style: none; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box-info-meta { |
||||
|
float: left; |
||||
|
padding-right: 1px; |
||||
|
font-size: 13px; |
||||
|
margin-top: 12px; |
||||
|
color: #cecece; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box-name { |
||||
|
float: left; |
||||
|
padding-right: 1px; |
||||
|
margin-right: 4px; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
font-size: 18px; |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.item_status { |
||||
|
margin-right: 0.8em; |
||||
|
float: left; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
font-size: 16px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box__thumb { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
margin-right: 0.8em; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.icon-arrow { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box__type10 { |
||||
|
color: #fff; |
||||
|
background: #f36619; |
||||
|
border-radius: 20rpx; |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
width: 90rpx; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box__type20 { |
||||
|
color: #fff; |
||||
|
background: #21be8d; |
||||
|
border-radius: 20rpx; |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
width: 90rpx; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.weui-media-box__type30 { |
||||
|
color: #fff; |
||||
|
background: #ffa043; |
||||
|
border-radius: 20rpx; |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
width: 90rpx; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.view_hide { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.empty-layout { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding-top: 65%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
@ -0,0 +1,371 @@ |
|||||
|
Page({ |
||||
|
data: { |
||||
|
groupNo: '', |
||||
|
windowWidth: 0, |
||||
|
windowHeight: 0, |
||||
|
scaleW: 0.85, |
||||
|
scaleH: 1.15, |
||||
|
shareImgSrc: '', |
||||
|
showPopup: false, |
||||
|
show: false, |
||||
|
cancelWithMask: true, |
||||
|
actions: [{ |
||||
|
name: '微信好友', |
||||
|
icon: '../../images/wechat_ico.png', |
||||
|
openType: 'share' |
||||
|
}, { |
||||
|
name: '朋友圈', |
||||
|
icon: '../../images/moments_ico.png' |
||||
|
}], |
||||
|
txtmoment: '保存图片,分享到朋友圈', |
||||
|
qrImageUrl: "", |
||||
|
avatarPath: '', |
||||
|
imgPath: '', |
||||
|
qrCodePath: '', |
||||
|
}, |
||||
|
|
||||
|
onLoad: function (options) { |
||||
|
this.groupNo = options.groupNo; |
||||
|
console.log("groupNo>>" + this.groupNo); |
||||
|
wx.getSystemInfo({ |
||||
|
success: (res) => { |
||||
|
this.setData({ |
||||
|
windowWidth: res.windowWidth, |
||||
|
windowHeight: res.windowHeight, |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
var that = this; |
||||
|
wx.request({ |
||||
|
url: getApp().gw.hostUrl + '/mall/wxa/activity/group/wxa_code', |
||||
|
method: 'get', |
||||
|
data: { |
||||
|
groupNo: that.groupNo, |
||||
|
width: 120, |
||||
|
// page: ''
|
||||
|
}, |
||||
|
header: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded', |
||||
|
'sessionId': wx.getStorageSync('sessionId') |
||||
|
}, |
||||
|
success: function (res) { |
||||
|
if (res.statusCode == 200) { |
||||
|
that.qrImageUrl = res.data.msg; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//打败Actionsheet,进行分享
|
||||
|
openActionsheet: function () { |
||||
|
if (this.data.qrImageUrl.length == 0) { |
||||
|
wx.showLoading({ |
||||
|
title: '正在获取', |
||||
|
mask: true, |
||||
|
}); |
||||
|
var that = this; |
||||
|
wx.request({ |
||||
|
url: getApp().gw.hostUrl + '/mall/wxa/activity/group/wxa_code', |
||||
|
method: 'get', |
||||
|
data: { |
||||
|
groupNo: that.groupNo, |
||||
|
width: 120, |
||||
|
page: '' |
||||
|
}, |
||||
|
header: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded', |
||||
|
'sessionId': wx.getStorageSync('sessionId') |
||||
|
}, |
||||
|
success: function (res) { |
||||
|
wx.hideLoading(); |
||||
|
if (res.statusCode == 200) { |
||||
|
that.setData({ |
||||
|
qrImageUrl: res.data.msg, |
||||
|
show: true |
||||
|
}); |
||||
|
} else { |
||||
|
wx.showToast({ |
||||
|
title: '获取信息失败!', |
||||
|
icon: 'none', |
||||
|
duration: 1000 |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
fail: function (res) { |
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ |
||||
|
title: '网络错误!', |
||||
|
icon: 'none', |
||||
|
duration: 1000 |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
this.setData({ |
||||
|
'show': true |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
closeActionSheet: function () { |
||||
|
this.setData({ |
||||
|
'show': false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
onShareAppMessage: function () { |
||||
|
return { |
||||
|
title: '1号家政', |
||||
|
imageUrl: this.qrImageUrl |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
clickAction({ detail }) { |
||||
|
// 如果是分享按钮被点击, 不处理关闭
|
||||
|
const { index } = detail; |
||||
|
if (index === 0) { |
||||
|
|
||||
|
return |
||||
|
} else if (index == 1) { |
||||
|
this.showMomentImage(); |
||||
|
} |
||||
|
this.setData({ |
||||
|
[`show`]: false, |
||||
|
[`actions[${index}].loading`]: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
goActivityInfo: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
togglePopup: function () { |
||||
|
this.setData({ |
||||
|
shareImgSrc: '', |
||||
|
showPopup: !this.data.showPopup, |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//绘制图片,加上二维码和相关的信息;
|
||||
|
drawMomentImage: function (avatarPath, imgPath, qrCodePath) { |
||||
|
var that = this; |
||||
|
console.log(avatarPath.length + "," + imgPath.length + "," + qrCodePath.length); |
||||
|
if (avatarPath.length == 0 || qrCodePath.length == 0 || imgPath.length == 0) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const ctx = wx.createCanvasContext('shareCanvas'); |
||||
|
var viewWidth = that.data.windowWidth * that.data.scaleW; |
||||
|
var viewHight = that.data.windowWidth * that.data.scaleH; |
||||
|
|
||||
|
ctx.clearRect(0, 0, viewWidth, viewHight) |
||||
|
ctx.setFillStyle('white') |
||||
|
ctx.fillRect(0, viewHight - 120, viewWidth, viewHight); |
||||
|
|
||||
|
ctx.drawImage(imgPath, 0, 0, viewWidth, viewHight - 120) |
||||
|
ctx.drawImage(qrCodePath, viewWidth - 110, viewHight - 110, 100, 100); |
||||
|
ctx.save(); |
||||
|
|
||||
|
ctx.beginPath(); //开始绘制
|
||||
|
ctx.arc(36 / 2 + 10, 36 / 2 + 200, 36 / 2, 0, Math.PI * 2, false); |
||||
|
ctx.clip();//
|
||||
|
ctx.drawImage(avatarPath, 10, 200, 36, 36); // 推进去图片
|
||||
|
ctx.drawImage(avatarPath, 10, viewHight - 113, 24, 24) |
||||
|
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
|
||||
|
ctx.save(); |
||||
|
|
||||
|
ctx.setFontSize(15) |
||||
|
ctx.setTextBaseline('top') |
||||
|
ctx.setFillStyle('#333') |
||||
|
ctx.fillText(getApp().globalData.userInfo.nickName, 40, viewHight - 111) |
||||
|
|
||||
|
ctx.setFontSize(16) |
||||
|
ctx.setFillStyle('#000') |
||||
|
ctx.fillText('宠友们快来围观萌宠靓照', 10, viewHight - 80) |
||||
|
ctx.fillText('我在萌爪幼稚园', 10, viewHight - 58) |
||||
|
|
||||
|
ctx.setFontSize(13) |
||||
|
ctx.fillText('长按扫码查看详情', 10, viewHight - 26) |
||||
|
ctx.draw() |
||||
|
//将绘制的图片保存到内存,然后进行展示;
|
||||
|
setTimeout(function () { |
||||
|
wx.canvasToTempFilePath({ |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
width: viewWidth, |
||||
|
height: viewHight, |
||||
|
destWidth: viewWidth, |
||||
|
destHeight: viewHight, |
||||
|
canvasId: 'shareCanvas', |
||||
|
success: function (res) { |
||||
|
that.setData({ |
||||
|
shareImgSrc: res.tempFilePath, |
||||
|
showPopup: !that.data.showPopup |
||||
|
}) |
||||
|
wx.hideLoading(); |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
that.handleErr(err, false); |
||||
|
} |
||||
|
}) |
||||
|
}, 2000); |
||||
|
}, |
||||
|
|
||||
|
handleErr: function (err, toast) { |
||||
|
if (!toast) { |
||||
|
toast = true; |
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ |
||||
|
title: '生成图片失败!', |
||||
|
icon: 'none', |
||||
|
duration: 1000 |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
showMomentImage: function () { |
||||
|
var that = this; |
||||
|
var toast = false; |
||||
|
var avatarPath = ''; |
||||
|
var imgPath = ''; |
||||
|
var qrCodePath = ''; |
||||
|
wx.showLoading({ |
||||
|
title: '正在生成图片', |
||||
|
mask: true, |
||||
|
}); |
||||
|
console.log(getApp().globalData.userInfo); |
||||
|
//先从服务器获取要分享的图片,保存到本地;
|
||||
|
wx.downloadFile({ |
||||
|
url: getApp().globalData.userInfo.avatarUrl, |
||||
|
success: (res) => { |
||||
|
if (res.statusCode == 200 && res.tempFilePath != undefined && res.tempFilePath.length > 0) { |
||||
|
console.log(res); |
||||
|
avatarPath = res.tempFilePath; |
||||
|
that.drawMomentImage(avatarPath, imgPath, qrCodePath); |
||||
|
} else { |
||||
|
that.handleErr(err, toast); |
||||
|
toast = true; |
||||
|
} |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
that.handleErr(err, toast); |
||||
|
toast = true; |
||||
|
} |
||||
|
}); |
||||
|
wx.downloadFile({ |
||||
|
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527496410439&di=54c111d35f3ca9d1e9b193834785c264&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013c81583fa08ea8012060c864c3b7.jpg', |
||||
|
success: (res) => { |
||||
|
if (res.statusCode == 200 && res.tempFilePath != undefined && res.tempFilePath.length > 0) { |
||||
|
console.log(res); |
||||
|
imgPath = res.tempFilePath; |
||||
|
that.drawMomentImage(avatarPath, imgPath, qrCodePath); |
||||
|
} else { |
||||
|
that.handleErr(err, toast); |
||||
|
toast = true; |
||||
|
} |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
that.handleErr(err, toast); |
||||
|
toast = true; |
||||
|
} |
||||
|
}); |
||||
|
wx.downloadFile({ |
||||
|
url: that.qrImageUrl, |
||||
|
success: (res) => { |
||||
|
if (res.statusCode == 200 && res.tempFilePath != undefined && res.tempFilePath.length > 0) { |
||||
|
console.log(res); |
||||
|
qrCodePath = res.tempFilePath; |
||||
|
that.drawMomentImage(avatarPath, imgPath, qrCodePath); |
||||
|
} else { |
||||
|
that.handleErr(err, toast); |
||||
|
toast = true; |
||||
|
} |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
that.handleErr(err, toast); |
||||
|
toast = true; |
||||
|
} |
||||
|
}); |
||||
|
// wx.downloadFile({
|
||||
|
// url: getApp().globalData.userInfo.avatarUrl,
|
||||
|
// success: (aRes) => {
|
||||
|
// wx.downloadFile({
|
||||
|
// url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527496410439&di=54c111d35f3ca9d1e9b193834785c264&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013c81583fa08ea8012060c864c3b7.jpg',
|
||||
|
// success: (res) => {
|
||||
|
// //从服务器获二维码图片,保存到本地;
|
||||
|
// wx.downloadFile({
|
||||
|
// url: that.qrImageUrl,
|
||||
|
// success: (qRres) => {
|
||||
|
// that.drawMomentImage(aRes.tempFilePath, res.tempFilePath, qRres.tempFilePath);
|
||||
|
// },
|
||||
|
// fail: function (err) {
|
||||
|
// wx.hideLoading();
|
||||
|
// wx.showToast({
|
||||
|
// title: '生成图片失败!qRres',
|
||||
|
// icon: 'none',
|
||||
|
// duration: 1000
|
||||
|
// });
|
||||
|
// }
|
||||
|
// })
|
||||
|
// },
|
||||
|
// fail: function (err) {
|
||||
|
// console.log(err);
|
||||
|
// wx.hideLoading();
|
||||
|
// wx.showToast({
|
||||
|
// title: '生成图片失败!res',
|
||||
|
// icon: 'none',
|
||||
|
// duration: 1000
|
||||
|
// });
|
||||
|
// }
|
||||
|
// })
|
||||
|
// },
|
||||
|
// fail: function (err) {
|
||||
|
// wx.hideLoading();
|
||||
|
// wx.showToast({
|
||||
|
// title: '生成图片失败!' + err.errMsg,
|
||||
|
// icon: 'none',
|
||||
|
// duration: 1000
|
||||
|
// });
|
||||
|
// }
|
||||
|
// });
|
||||
|
}, |
||||
|
|
||||
|
//将图片保存到本地相册
|
||||
|
saveImageToAlbum: function () { |
||||
|
wx.showLoading({ |
||||
|
title: '正在保存成图片', |
||||
|
mask: true, |
||||
|
}); |
||||
|
var that = this; |
||||
|
setTimeout(function () { |
||||
|
wx.saveImageToPhotosAlbum({ |
||||
|
filePath: that.data.shareImgSrc, |
||||
|
success(res) { |
||||
|
wx.hideLoading(); |
||||
|
that.togglePopup() |
||||
|
wx.showModal({ |
||||
|
title: '保存图片成功', |
||||
|
content: '图片成功保存到相册了,去发圈噻~', |
||||
|
showCancel: false, |
||||
|
confirmText: '好哒', |
||||
|
confirmColor: '#333', |
||||
|
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
console.log('用户点击确定'); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
fail: function (res) { |
||||
|
console.log(res) |
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ |
||||
|
title: '保存图片失败!aRres', |
||||
|
icon: 'none', |
||||
|
duration: 1000 |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, 3000) |
||||
|
}, |
||||
|
|
||||
|
}) |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "支付成功", |
||||
|
"usingComponents": { |
||||
|
"zan-actionsheet": "../../components/actionsheet/index", |
||||
|
"zan-popup": "../../components/popup/index" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
<view class="main-layout"> |
||||
|
|
||||
|
<view class="userinfo"> |
||||
|
|
||||
|
<image class="pay-icon" src="../../images/finish_ico.png" mode='scaleToFill' /> |
||||
|
|
||||
|
<text class="pay-text">支付成功</text> |
||||
|
|
||||
|
<text class="tip-text">拼团成功后,将会存入您的服务卡中公众号关注【一号家政服务号】,即可预约</text> |
||||
|
|
||||
|
<button class='btn-invite' bindtap='openActionsheet'>邀请好友</button> |
||||
|
|
||||
|
<button class='btn-info' bindtap='goActivityInfo'>拼团详情</button> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<image class="title_img" src="../../images/title-icon.png" mode='scaleToFill' /> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<!--分享界面--> |
||||
|
<zan-popup show="{{showPopup}}" bindclose="togglePopup"> |
||||
|
|
||||
|
<canvas canvas-id="shareCanvas" style="width:{{windowWidth * scaleW}}px;height:{{windowWidth * scaleH}}px;"></canvas> |
||||
|
|
||||
|
<button class='btn-invite' style='margin-top:40px;' bindtap='saveImageToAlbum'>{{txtmoment}}</button> |
||||
|
|
||||
|
</zan-popup> |
||||
|
|
||||
|
<!--底部弹出框--> |
||||
|
<zan-actionsheet show="{{ show }}" actions="{{ actions }}" cancel-with-mask="{{ cancelWithMask }}" bind:cancel="closeActionSheet" bind:actionclick="clickAction" mask-class="tiny" /> |
||||
@ -0,0 +1,83 @@ |
|||||
|
page { |
||||
|
background-color: #21be8d; |
||||
|
} |
||||
|
|
||||
|
.main-layout { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.userinfo { |
||||
|
width: 85%; |
||||
|
height: 900rpx; |
||||
|
display: flex; |
||||
|
background-color: #fff; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
border-radius: 8px; |
||||
|
margin-top: 85rpx; |
||||
|
} |
||||
|
|
||||
|
.pay-icon { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
margin-top: 60rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.pop-image { |
||||
|
width: 85vw; |
||||
|
height: 105vw; |
||||
|
} |
||||
|
|
||||
|
.pay-text { |
||||
|
color: #21be8d; |
||||
|
font-size: 20px; |
||||
|
/* font-weight:bold; */ |
||||
|
} |
||||
|
|
||||
|
.tip-text { |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
margin: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-invite { |
||||
|
color: #fff; |
||||
|
background: #1eba84; |
||||
|
border-radius: 40px; |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
width: 80%; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 80rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-info { |
||||
|
color: #333; |
||||
|
background: #fff; |
||||
|
border-radius: 40px; |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
width: 80%; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 50rpx; |
||||
|
border: 2rpx solid #1eba84; |
||||
|
} |
||||
|
|
||||
|
.title_img { |
||||
|
width: 200rpx; |
||||
|
height: 36rpx; |
||||
|
margin-top: 80rpx; |
||||
|
} |
||||
|
|
||||
|
.tiny { |
||||
|
background: rgba(30, 30, 40, 0.7) !important; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save