Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
678744e3 by simon
Options

版本提交

1 parent 28e34513
Expand all
Inline Side-by-side
Showing 40 changed files with 1204 additions and 28 deletions
...@@ -33,6 +33,7 @@ App({ ...@@ -33,6 +33,7 @@ App({
33 loading: true, 33 loading: true,
34 }).then((result) => { 34 }).then((result) => {
35 this.globalData.indexInfo = result; 35 this.globalData.indexInfo = result;
36 this.globalData.userInfo = result.userInfo;
36 if (result.isNeedAuth == 1) { 37 if (result.isNeedAuth == 1) {
37 //需要授权 38 //需要授权
38 this.router.push({ 39 this.router.push({
......
...@@ -105,6 +105,7 @@ ...@@ -105,6 +105,7 @@
105 105
106 // 通用按钮 106 // 通用按钮
107 @mixin cb($width:320px, $height:80px, $fontSize:32px) { 107 @mixin cb($width:320px, $height:80px, $fontSize:32px) {
108 font-weight: 300;
108 position: relative; 109 position: relative;
109 width: $width; 110 width: $width;
110 height: $height; 111 height: $height;
......
1 let app = getApp();
2 Component({
3 properties: {
4 // 这里定义了innerText属性，属性值可以在组件使用时指定
5 innerText: {
6 type: String,
7 value: 'default value',
8 }
9 },
10 data: {
11 // 这里是一些组件内部数据
12 someData: {}
13 },
14 methods: {
15 // 这里是一个自定义方法
16 customMethod() {
17 this.triggerEvent('evtcomp', {
18 name: "_evt_custom"
19 })
20 },
21 // 隐藏蒙层
22 hideMask() {
23 this.triggerEvent('evtcomp', {
24 name: "_evt_hide_mask"
25 });
26 },
27 toMyWishHandler() {
28 app.router.push({
29 openType: "reLaunchs",
30 path: "wish"
31 })
32 }
33 }
34 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp-item {
5 position: relative;
6 width: 654px;
7 height: 732px;
8
9 font-weight: 300;
10
11 // background-color: wheat;
12 .bg {
13 position: absolute;
14 width: 654px;
15 height: 732px;
16 }
17
18 .cont {
19 position: relative;
20 text-align: center;
21 color: #333333;
22
23 .space1 {
24 height: 92px;
25 }
26
27 .tit {
28 color: #ba3038;
29 font-size: 36px;
30 }
31
32 .tips {
33 margin-top: 42px;
34 font-size: 32px;
35
36 .val {
37 color: #ba3138;
38 }
39 }
40
41 }
42
43
44 .btn-wrap {
45 position: absolute;
46 left: 0;
47 right: 0;
48 bottom: 100px;
49 display: flex;
50 justify-content: center;
51 padding: 0 50px;
52 @extend .bb;
53
54 .btn {
55 margin: 0 auto;
56 @include cb(234px, 64px);
57 }
58
59 .btn2 {
60 border: solid 1px #b83138;
61 background: transparent;
62 color: #ba3039;
63 }
64 }
65
66
67
68
69 }
70
71 // 心愿
72 .wish {
73 position: relative;
74 margin: 0 auto 0;
75 display: flex;
76 justify-content: space-between;
77 @extend .bb;
78 // padding-top: 116px;
79 padding: 56px 80px 0;
80
81 &-item {
82 position: relative;
83 text-align: center;
84
85 .display {
86 position: relative;
87 width: 140px;
88 height: 140px;
89 border-radius: 70px;
90 background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
91 @extend .fcc;
92
93 .prod {
94 max-width: 200px;
95 max-height: 200px;
96 margin-bottom: 10px;
97 }
98
99 .close {
100 width: 30px;
101 height: 30px;
102 position: absolute;
103 bottom: 0;
104 right: 0;
105 }
106 }
107
108 .name {
109 width: 160px;
110 margin: 8px auto 0;
111 color: #333333;
112 font-size: 20px;
113 // font-weight: 300;
114 }
115
116 .val {
117 @extend .fcc;
118 color: #b93138;
119 font-size: 20px;
120 margin-top: 12px;
121
122 .icon {
123 margin-left: 6px;
124 width: 11px;
125 height: 18px;
126 }
127 }
128 }
129 }
1 <view class="comp-item">
2 <image class="bg" src="../../image/oss/tips/tips-create-complete.png" mode="widthFix" />
3 <view class="cont">
4 <view class="space1"></view>
5 <view class="tit">· 太棒了 ·</view>
6 <view class="tips">
7 共获得
8 <span class="val">100</span>
9 弹力值
10 </view>
11 <!-- 心愿容器 -->
12 <view class="wish">
13 <view class="wish-item">
14 <view class="display">
15 <image class="prod" mode="aspectFit" src="../../image/oss/prize/prize_3.png" />
16 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
17 </view>
18 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
19 <view class="val">
20 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
21 获得20
22 </view>
23 </view>
24 <view class="wish-item">
25 <view class="display">
26 <image class="prod" mode="aspectFit" src="../../image/oss/prize/prize_2.png" />
27 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
28 </view>
29 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
30 <view class="val">
31 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
32 获得20
33 </view>
34 </view>
35 <view class="wish-item">
36 <view class="display">
37 <image class="prod" mode="aspectFit" src="../../image/oss/prize/prize_1.png" />
38 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
39 </view>
40 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
41 <view class="val">
42 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
43 获得20
44 </view>
45 </view>
46 </view>
47 </view>
48 <view class="btn-wrap">
49 <view bindtap="toMyWishHandler" class="btn">立即查看</view>
50 </view>
51 </view>
...@@ -24,8 +24,12 @@ Component({ ...@@ -24,8 +24,12 @@ Component({
24 this.triggerEvent('_evt_hide_mask', { 24 this.triggerEvent('_evt_hide_mask', {
25 name: "_evt_custom" 25 name: "_evt_custom"
26 }) 26 })
27 // app.router.push({
28 // path:"question"
29 // })
27 app.router.push({ 30 app.router.push({
28 path:"question" 31 openType: "reLaunchs",
32 path: "wish"
29 }) 33 })
30 } 34 }
31 } 35 }
......
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
4 .comp-item { 4 .comp-item {
5 position: relative; 5 position: relative;
6 width: 654px; 6 width: 654px;
7 height: 588px; 7 height: 861px;
8 8
9 // background-color: wheat; 9 // background-color: wheat;
10 .bg { 10 .bg {
11 position: absolute; 11 position: absolute;
12 width: 654px; 12 width: 654px;
13 height: 588px; 13 height: 861px;
14 } 14 }
15 15
16 .space1 { 16 .space1 {
......
1 Component({
2 properties: {
3 // 这里定义了innerText属性，属性值可以在组件使用时指定
4 innerText: {
5 type: String,
6 value: 'default value',
7 }
8 },
9 data: {
10 // 这里是一些组件内部数据
11 someData: {}
12 },
13 methods: {
14 // 这里是一个自定义方法
15 customMethod() {
16 this.triggerEvent('evtcomp', {
17 name: "_evt_custom"
18 })
19 },
20 // 隐藏蒙层
21 hideMask() {
22 this.triggerEvent('evtcomp', {
23 name: "_evt_hide_mask"
24 });
25 },
26 onCreateHandler(){
27 this.triggerEvent('evtcomp', {
28 name: "_evt_create_wish"
29 });
30 }
31 }
32 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp-item {
5 position: relative;
6 width: 654px;
7 height: 951px;
8
9 // background-color: wheat;
10 .bg {
11 position: absolute;
12 width: 654px;
13 height: 951px;
14 }
15
16
17 .cont {
18 position: relative;
19
20 .space1 {
21 height: 250px;
22 }
23
24 // 心愿列表
25 .wish {
26 @extend .bb;
27 padding: 0 80px;
28
29 .row {
30 display: flex;
31
32 }
33
34 .row2 {
35 justify-content: flex-end;
36
37 .desc {
38 padding-left: 32px;
39 }
40 }
41
42 .wish-item {
43 width: 420px;
44 height: 122px;
45 box-shadow: 0px 6px 30px 0 rgba(0, 0, 0, 0.3);
46 background-color: #ffffff;
47 display: flex;
48 justify-content: center;
49 margin-bottom: 32px;
50
51 .prod {
52 position: relative;
53 width: 122px;
54 height: 122px;
55 text-align: center;
56
57 image {
58 position: absolute;
59 max-width: 120px;
60 max-height: 120px;
61 bottom: 12px;
62 left: 0;
63 right: 0;
64 margin: 0 auto;
65 }
66 }
67
68 .desc {
69 width: 300px;
70 font-weight: 300;
71 font-size: 22px;
72 display: flex;
73 flex-wrap: wrap;
74 align-content: center;
75 @extend .bb;
76
77 .name {
78 color: #333333;
79 }
80
81 .val {
82 font-size: 18px;
83 color: #999999;
84 margin-top: 4px;
85 }
86 }
87 }
88
89
90
91 &-item2 {
92 justify-self: flex-end;
93 align-self: flex-end;
94 }
95
96 }
97
98 // 累计心愿值
99 .wish-val {
100 @extend .fcc;
101 color: #333333;
102 font-size: 24px;
103
104 .icon {
105 width: 12px;
106 height: 25px;
107 margin-right: 8px;
108 }
109
110 .val {
111 color: #b93138;
112 }
113 }
114
115 }
116
117
118 .btn-wrap {
119 position: absolute;
120 left: 0;
121 right: 0;
122 bottom: 100px;
123 display: flex;
124 justify-content: center;
125 padding: 0 50px;
126 @extend .bb;
127
128 .btn {
129 margin: 0 auto;
130 @include cb(234px, 64px);
131 }
132
133 .btn2 {
134 border: solid 1px #b83138;
135 background: transparent;
136 color: #ba3039;
137 }
138 }
139
140
141
142 }
1 <view class="comp-item">
2 <image class="bg" src="../../image/oss/tips/tips-wish.png" mode="widthFix" />
3 <view class="cont">
4 <view class="space1"></view>
5 <view class="wish">
6 <view class="row">
7 <view class="wish-item">
8 <view class="prod">
9 <image mode="widthFix" src="../../image/oss/prize/prize_1.png" />
10 </view>
11 <view class="desc">
12 <view class="name">丸美弹力蛋白凝时紧致乳</view>
13 <view class="val">需弹力值：5480</view>
14 </view>
15 </view>
16 </view>
17 <view class="row row2">
18 <view class="wish-item ">
19 <view class="desc">
20 <view class="name">丸美弹力蛋白凝时紧致乳</view>
21 <view class="val">需弹力值：5480</view>
22 </view>
23 <view class="prod">
24 <image mode="widthFix" src="../../image/oss/prize/prize_2.png" />
25 </view>
26 </view>
27 </view>
28 <view class="row">
29 <view class="wish-item">
30 <view class="prod">
31 <image mode="widthFix" src="../../image/oss/prize/prize_3.png" />
32 </view>
33 <view class="desc">
34 <view class="name">丸美弹力蛋白凝时紧致乳</view>
35 <view class="val">需弹力值：5480</view>
36 </view>
37 </view>
38 </view>
39 </view>
40 <view class="wish-val">
41 <image class="icon" mode="widthFix" src="../../image/oss/question/question-light.png" />
42 累计心愿单所需弹力值：
43 <span class="val">2500</span>
44 </view>
45 </view>
46 <view class="btn-wrap">
47 <view bindtap="hideMask" class="btn btn2">返回修改</view>
48 <view bindtap="onCreateHandler" class="btn">马上创建</view>
49 </view>
50 </view>
...@@ -22,4 +22,5 @@ module.exports = { ...@@ -22,4 +22,5 @@ module.exports = {
22 wishbillAcceptTypeSubmit: '/warubiEyeCreamApi/app/wishbill/accept/type/submit', // post 提交礼品领取方式 22 wishbillAcceptTypeSubmit: '/warubiEyeCreamApi/app/wishbill/accept/type/submit', // post 提交礼品领取方式
23 wishbillAddressSubmit: '/warubiEyeCreamApi/app/wishbill/address/submit', // post 提交邮寄地址 23 wishbillAddressSubmit: '/warubiEyeCreamApi/app/wishbill/address/submit', // post 提交邮寄地址
24 wishbillStoreAppoint: '/warubiEyeCreamApi/app/wishbill/store/appoint', // post 预约自提门店 24 wishbillStoreAppoint: '/warubiEyeCreamApi/app/wishbill/store/appoint', // post 预约自提门店
25 wxacodeGet: '/warubiEyeCreamApi/app/qrcode/create', //
25 } 26 }
......
1 {
2 "component": true
3 }
...\ No newline at end of file ...\ No newline at end of file
1 <!--index.wxml-->
2 <view class="container">
3 <canvas canvas-id='canvasid' class="canvas {{debug ? 'debug' : 'pro'}}" style='width: {{pxWidth}}px; height: {{pxHeight}}px;'></canvas>
4 </view>
1 .canvas {
2 width: 750rpx;
3 height: 750rpx;
4 }
5 .canvas.pro {
6 position: absolute;
7 bottom: 0;
8 left: 0;
9 transform: translate3d(-9999rpx, 0, 0);
10 }
11 .canvas.debug {
12 position: absolute;
13 bottom: 0;
14 left: 0;
15 border: 1rpx solid #ccc;
16 }
...\ No newline at end of file ...\ No newline at end of file
1 Component({
2 properties: {
3 config: {
4 type: Object,
5 value: {},
6 },
7 preload: { // 是否预下载图片资源
8 type: Boolean,
9 value: false,
10 },
11 hideLoading: { // 是否隐藏loading
12 type: Boolean,
13 value: false,
14 }
15 },
16 ready() {
17 if (this.data.preload) {
18 const poster = this.selectComponent('#poster');
19 this.downloadStatus = 'doing';
20 poster.downloadResource(this.data.config.images).then(() => {
21 this.downloadStatus = 'success';
22 this.trigger('downloadSuccess');
23 }).catch((e) => {
24 this.downloadStatus = 'fail';
25 this.trigger('downloadFail', e);
26 });
27 }
28 },
29 methods: {
30 trigger(event, data) {
31 if (this.listener && typeof this.listener[event] === 'function') {
32 this.listener[event](data);
33 }
34 },
35 once(event, fun) {
36 if (typeof this.listener === 'undefined') {
37 this.listener = {};
38 }
39 this.listener[event] = fun;
40 },
41 downloadResource(reset) {
42 return new Promise((resolve, reject) => {
43 if (reset) {
44 this.downloadStatus = null;
45 }
46 const poster = this.selectComponent('#poster');
47 if (this.downloadStatus && this.downloadStatus !== 'fail') {
48 if (this.downloadStatus === 'success') {
49 resolve();
50 } else {
51 this.once('downloadSuccess', () => resolve());
52 this.once('downloadFail', (e) => reject(e));
53 }
54 } else {
55 poster.downloadResource(this.data.config.images)
56 .then(() => {
57 this.downloadStatus = 'success';
58 resolve();
59 })
60 .catch((e) => reject(e));
61 }
62 })
63 },
64 onCreate(reset = false) {
65 !this.data.hideLoading && wx.showLoading({ mask: true, title: '生成中' });
66 return this.downloadResource(typeof reset === 'boolean' && reset).then(() => {
67 !this.data.hideLoading && wx.hideLoading();
68 const poster = this.selectComponent('#poster');
69 poster.create(this.data.config);
70 })
71 .catch((err) => {
72 !this.data.hideLoading && wx.hideLoading();
73 wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
74 console.error(err);
75 this.triggerEvent('fail', err);
76 })
77 },
78 onCreateSuccess(e) {
79 const { detail } = e;
80 this.triggerEvent('success', detail);
81 },
82 onCreateFail(err) {
83 console.error(err);
84 this.triggerEvent('fail', err);
85 }
86 }
87 })
...\ No newline at end of file ...\ No newline at end of file
1 {
2 "component": true,
3 "usingComponents": {
4 "we-canvas": "../index/index"
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
1 <view bindtap='onCreate'>
2 <slot/>
3 </view>
4 <we-canvas id="poster" bind:success="onCreateSuccess" bind:fail="onCreateFail"/>
...\ No newline at end of file ...\ No newline at end of file
1 const defaultOptions = {
2 selector: '#poster'
3 };
4
5 function Poster(options = {}) {
6 options = {
7 ...defaultOptions,
8 ...options,
9 };
10
11 const pages = getCurrentPages();
12 const ctx = pages[pages.length - 1];
13
14 const poster = ctx.selectComponent(options.selector);
15 delete options.selector;
16
17 return poster;
18 };
19
20 Poster.create = (reset = false) => {
21 const poster = Poster();
22 if (!poster) {
23 console.error('请设置组件的id="poster"!!!');
24 } else {
25 return Poster().onCreate(reset);
26 }
27 }
28
29 export default Poster;
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,6 +4,9 @@ Page({ ...@@ -4,6 +4,9 @@ Page({
4 tipsRegisterVisible: false, 4 tipsRegisterVisible: false,
5 tipsGroupMemberVisible: false, 5 tipsGroupMemberVisible: false,
6 tipsNewMemberVisible: false, 6 tipsNewMemberVisible: false,
7 tipsWishVisible: false,
8 tipsShakeVisible: false,
9 tipsCreateCompleteVisible: true,
7 curStatus: 1, // 当前场景 10 curStatus: 1, // 当前场景
8 candidate: [], // 心愿候选列表 11 candidate: [], // 心愿候选列表
9 myWishList: [], // 我的心愿列表 12 myWishList: [], // 我的心愿列表
...@@ -16,7 +19,6 @@ Page({ ...@@ -16,7 +19,6 @@ Page({
16 app.queryIndex().then((result) => { 19 app.queryIndex().then((result) => {
17 this.queryWishbillPrizeCandidate(); 20 this.queryWishbillPrizeCandidate();
18 }); 21 });
19
20 }, 22 },
21 /** 23 /**
22 * 点击提交心愿单按钮 24 * 点击提交心愿单按钮
...@@ -50,6 +52,7 @@ Page({ ...@@ -50,6 +52,7 @@ Page({
50 wishBillCode 52 wishBillCode
51 } = indexInfo; 53 } = indexInfo;
52 // 未登陆 出注册弹窗提示 54 // 未登陆 出注册弹窗提示
55 // isCrmLogin = 1;
53 if (isCrmLogin == 0) { 56 if (isCrmLogin == 0) {
54 this.setData({ 57 this.setData({
55 tipsRegisterVisible: true 58 tipsRegisterVisible: true
...@@ -67,7 +70,7 @@ Page({ ...@@ -67,7 +70,7 @@ Page({
67 } 70 }
68 // 新老会员 71 // 新老会员
69 // isNewMember 72 // isNewMember
70 hadAnswerQuestion = 1; //硬编码答题 73 // hadAnswerQuestion = 1; //硬编码答题
71 if (isNewMember == 1) { 74 if (isNewMember == 1) {
72 // 新会员 75 // 新会员
73 if (hadAnswerQuestion) { 76 if (hadAnswerQuestion) {
...@@ -75,7 +78,10 @@ Page({ ...@@ -75,7 +78,10 @@ Page({
75 // todo 校验选择 78 // todo 校验选择
76 // 校验完成后显示提示 79 // 校验完成后显示提示
77 80
78 this.queryWishbillCreate(); 81 this.setData({
82 tipsWishVisible: true
83 });
84 // this.queryWishbillCreate();
79 } else { 85 } else {
80 // 未答题，提示答题 86 // 未答题，提示答题
81 this.setData({ 87 this.setData({
...@@ -148,13 +154,24 @@ Page({ ...@@ -148,13 +154,24 @@ Page({
148 data 154 data
149 } = evt.detail; 155 } = evt.detail;
150 switch (name) { 156 switch (name) {
151 157 // 隐藏蒙层
152 case "_evt_hide_mask": 158 case "_evt_hide_mask":
153 this.setData({ 159 this.setData({
154 ruleTipsVisible: false, 160 ruleTipsVisible: false,
155 tipsGroupMemberVisible: false, 161 tipsGroupMemberVisible: false,
156 tipsNewMemberVisible: false, 162 tipsNewMemberVisible: false,
163 tipsWishVisible: false,
164 tipsWishVisible:false,
165 tipsCreateCompleteVisible:false,
166 })
167 break;
168
169 // 创建心愿单
170 case "_evt_create_wish":
171 this.setData({
172 tipsWishVisible: false
157 }) 173 })
174 this.queryWishbillCreate();
158 break; 175 break;
159 176
160 default: 177 default:
......
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
4 "tips-register-comp": "../../component/tips-register-comp/tips-register-comp", 4 "tips-register-comp": "../../component/tips-register-comp/tips-register-comp",
5 "tips-group-member-comp": "../../component/tips-group-member-comp/tips-group-member-comp", 5 "tips-group-member-comp": "../../component/tips-group-member-comp/tips-group-member-comp",
6 "tips-new-comp": "../../component/tips-new-comp/tips-new-comp", 6 "tips-new-comp": "../../component/tips-new-comp/tips-new-comp",
7 "tips-wish-comp": "../../component/tips-wish-comp/tips-wish-comp",
8 "tips-shake-comp": "../../component/tips-shake-comp/tips-shake-comp",
9 "tips-create-complete-comp": "../../component/tips-create-complete-comp/tips-create-complete-comp",
7 "van-popup": "../../ui/vant-weapp/popup/index" 10 "van-popup": "../../ui/vant-weapp/popup/index"
8 } 11 }
9 } 12 }
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 background-color: #ffd5da; 9 background-color: #ffd5da;
10 } 10 }
11 11
12
13 .bg { 12 .bg {
14 image { 13 image {
15 position: absolute; 14 position: absolute;
......
...@@ -66,3 +66,12 @@ ...@@ -66,3 +66,12 @@
66 <van-popup show="{{ tipsNewMemberVisible }}"> 66 <van-popup show="{{ tipsNewMemberVisible }}">
67 <tips-new-comp bind:evtcomp="evtcomp"></tips-new-comp> 67 <tips-new-comp bind:evtcomp="evtcomp"></tips-new-comp>
68 </van-popup> 68 </van-popup>
69 <van-popup show="{{ tipsWishVisible }}">
70 <tips-wish-comp bind:evtcomp="evtcomp"></tips-wish-comp>
71 </van-popup>
72 <van-popup show="{{ tipsShakeVisible }}">
73 <tips-shake-comp bind:evtcomp="evtcomp"></tips-shake-comp>
74 </van-popup>
75 <van-popup show="{{ tipsCreateCompleteVisible }}">
76 <tips-create-complete-comp bind:evtcomp="evtcomp"></tips-create-complete-comp>
77 </van-popup>
......
...@@ -35,7 +35,7 @@ Page({ ...@@ -35,7 +35,7 @@ Page({
35 } = evt.detail; 35 } = evt.detail;
36 switch (name) { 36 switch (name) {
37 37
38 case "_evt_hide_rule_tips": 38 case "_evt_hide_mask":
39 this.setData({ 39 this.setData({
40 tipsRuleVisible: false 40 tipsRuleVisible: false
41 }) 41 })
......
1 import Poster from '../../miniprogram_dist/poster/poster';
1 let app = getApp(); 2 let app = getApp();
2 Page({ 3 Page({
3 data: {}, 4 data: {
4 onShareAppMessage() {}, 5 imageUrl: "", // 海报图片
5 onLoad(options) {}, 6 wxShareTitle: "", // 分享标题
7 wxCodePath: "", // 微信二维码参数地址，分享链接公用
8 wxCodeUrl: "", // 微信二维码图片地址
9 },
10 onShareAppMessage() {
11 if (res.from === 'button') {
12 // 来自页面内转发按钮
13 console.log(res.target)
14 }
15 let title = this.data.wxShareTitle;
16 let path = this.data.wxCodePath;
17 let imageUrl = this.data.imageUrl;
18 console.log("title:", title);
19 console.log("path:", path);
20 console.log("imageUrl:", imageUrl);
21 return {
22 title,
23 path,
24 imageUrl
25 }
26 },
27 onLoad(options) {
28 app.queryIndex().then((result) => {
29 console.log("result:", result);
30 wx.showLoading({
31 title: '生成中',
32 });
33 this.initData();
34 })
35 },
36 initData() {
37 // 设置 分享链接，分享文案
38 let nickname = app.globalData.userInfo && app.globalData.userInfo.nickname || "";
39 let billCode = app.globalData.indexInfo.wishBillCode;
40 let wxShareTitle = nickname + `正在参加丸美眼霜节心愿单活动，需要你的倾情相助！`;
41 let wxCodePath = `/pages/coop/coop?billCode=${billCode}&s=share`
42 this.setData({
43 wxCodePath: wxCodePath,
44 wxShareTitle: wxShareTitle
45 })
46
47 // 获取小程序码
48 app.post({
49 url: app.api.wxacodeGet,
50 data: {
51 path: encodeURIComponent(wxCodePath)
52 }
53 }).then((result) => {
54 this.setData({
55 wxCodeUrl: result
56 })
57
58 // 获取海报数据
59 let posterData = this.getPosterConfig();
60 // 绘制设置海报
61 this.onCreatePoster(posterData);
62 })
63
64 // // 获取海报数据
65 // let posterData = this.getPosterConfig();
66 // // 绘制设置海报
67 // this.onCreatePoster(posterData);
68
69 },
70
71 onPosterSuccess(e) {
72 console.log("onPosterSuccess");
73 wx.hideLoading();
74 const {
75 detail
76 } = e;
77 console.log("detail:", detail)
78 this.setData({
79 imageUrl: detail
80 })
81 },
82 onPosterFail(err) {
83 wx.hideLoading();
84 console.error(err);
85 },
86
87 /**
88 * 查看图片
89 */
90 onPreviewImage() {
91 let imageUrl = this.data.imageUrl
92 console.log("imageUrl:", imageUrl);
93 wx.previewImage({
94 current: imageUrl,
95 urls: [imageUrl]
96 })
97 },
98 /**
99 * 保存图片到本地
100 */
101 saveImageToPhotosAlbum() {
102 let _this = this;
103 wx.saveImageToPhotosAlbum({
104 filePath: _this.data.imageUrl,
105 success(res) {
106 wx.showToast({
107 title: '海报保存成功',
108 icon: 'success'
109 });
110 },
111 fail(err) {
112 wx.getSetting({
113 success: (res) => {
114 if (!res.authSetting['scope.writePhotosAlbum']) {
115 // 未授权
116 wx.showModal({
117 title: '提示',
118 content: '小程序请求访问相册权限',
119 confirmText: '前往授权',
120 success(res) {
121 if (res.confirm) {
122 wx.openSetting({
123 success(res) {}
124 })
125 } else if (res.cancel) {}
126 }
127 })
128 }
129 }
130 })
131 }
132 })
133 },
134
135 /**
136 * 异步生成海报
137 */
138 onCreatePoster(posterConfig) {
139 console.log("posterConfig:", posterConfig);
140 this.setData({
141 posterConfig: posterConfig
142 }, () => {
143 Poster.create(true); // 入参：true为抹掉重新生成
144 });
145 },
146
147
148 // 获取海报数据
149 getPosterConfig() {
150 // 合成图片需要的数据
151 let {
152 userInfo
153 } = app.globalData;
154 let codeUrl = this.data.wxCodeUrl;
155 let posterData = {
156 width: 700,
157 height: 921,
158 debug: false,
159 blocks: [],
160 images: [
161 // 底图
162 {
163 width: 700,
164 height: 921,
165 x: 0,
166 y: 0,
167 url: '../../image/draw/draw-c1.png',
168 },
169 // // 头像
170 // {
171 // width: 102,
172 // height: 102,
173 // x: 35,
174 // y: 700,
175 // url: userInfo.avatar,
176 // },
177 // 小程序码
178 {
179 width: 118,
180 height: 118,
181 x: 560,
182 y: 780,
183 url: codeUrl,
184 zIndex: 14
185 }
186 ],
187 lines: [],
188 texts: [{
189 x: 165,
190 y: 810,
191 width: 360,
192 lineHeight: 32,
193 fontSize: 26,
194 lineNum: 3,
195 baseLine: 'middle',
196 text: `${userInfo.nickname}正在参加丸美眼霜节心愿单活动，需要你的倾情相助！`,
197 color: '#666666',
198 zIndex: 111
199 }],
200 }
201 return posterData;
202 },
203
204
6 // 子组件事件 205 // 子组件事件
7 evtcomp(evt) { 206 evtcomp(evt) {
8 let { 207 let {
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "心愿单海报",
3 "usingComponents": {
4 "poster": "/miniprogram_dist/poster/index"
5 }
3 } 6 }
......
...@@ -4,15 +4,55 @@ ...@@ -4,15 +4,55 @@
4 .page { 4 .page {
5 .bgc {} 5 .bgc {}
6 6
7 .bg {} 7 .bg {
8 position: fixed;
9 width: 100%;
10 height: 100%;
11 }
8 12
9 .main { 13 .main {
14 position: relative;
15
10 .top-space { 16 .top-space {
11 height: 0px; 17 height: 24px;
12 } 18 }
13 19
14 .content { 20 .content {
15 position: relative; 21 position: relative;
22
23 .poster-wrap {
24 width: 700px;
25 height: 921px;
26 margin: 0 auto;
27
28 .poster {
29 width: 700px;
30 height: 921px;
31 }
32
33 .tips {
34 margin-top: 10px;
35 color: #ebc6ce;
36 font-size: 26px;
37 @extend .bb;
38 padding: 0 10px;
39 font-weight: 300;
40 line-height: 1.5;
41 }
42
43 .download-btn {
44 margin: 28px auto 0;
45 border-radius: 40px;
46 background-image: linear-gradient(to right, #ffdcd4, #fdf2f0 51%, #ffdcd4);
47 color: #a73136;
48 font-size: 32px;
49 @include btc(300px, 80px);
50 }
51 }
52
53
16 } 54 }
55
56
17 } 57 }
18 } 58 }
......
1 <poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
1 <view class="page"> 2 <view class="page">
2 <view class="app__bgc bgc"></view> 3 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view> 4 <!-- <view class="app__bg bg"></view> -->
4 <!-- <view class="app__top-shadow"></view> --> 5 <image class="bg" mode="scaleToFill" src="../../image/oss/poster/poster-bg.png" />
5 <view class="app__content main"> 6 <view class="app__content main">
6 <view class="top-space"></view> 7 <view class="top-space"></view>
7 <view class="content"></view> 8 <view class="content">
9 <view class="poster-wrap" wx:if="{{imageUrl}}">
10 <image bindtap="onPreviewImage" class="poster" src="{{imageUrl}}" mode="widthFix" />
11 <view class="tips">*您可以一键保存本海报或者长按直接分享给好友，让更多
12 人来为您助力哦！</view>
13 <view bindtap="saveImageToPhotosAlbum" class="download-btn">一键保存</view>
14 </view>
15 </view>
8 </view> 16 </view>
9 </view> 17 </view>
......
...@@ -20,7 +20,7 @@ Page({ ...@@ -20,7 +20,7 @@ Page({
20 // "state": 0 20 // "state": 0
21 // }] 21 // }]
22 // }, 22 // },
23 questionResult:{}, 23 questionResult: {},
24 // 答题结果 24 // 答题结果
25 questionNumList: ["A", "B", "C", "D"], 25 questionNumList: ["A", "B", "C", "D"],
26 myAnswer: [], //我的答案 26 myAnswer: [], //我的答案
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 <image class="d2" mode="widthFix" src="../../image/oss/question/question-d2.png" /> 34 <image class="d2" mode="widthFix" src="../../image/oss/question/question-d2.png" />
35 <view class="cont"> 35 <view class="cont">
36 <view class="space1"></view> 36 <view class="space1"></view>
37 <view class="tit">测验结果：答对1题，答错2题</view> 37 <view class="tit">测验结果：答对{{questionResult.right}}题，答错{{questionResult.wrong}}题</view>
38 <view class="ball"> 38 <view class="ball">
39 <view class="t1">获得</view> 39 <view class="t1">获得</view>
40 <view class="score">{{questionResult.elasticValue}}</view> 40 <view class="score">{{questionResult.elasticValue}}</view>
......
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {
4 tipsRuleVisible: false,
5 userInfo: {},
6 wishInfo: {},
7 helperInfo: {}
8 },
4 onShareAppMessage() {}, 9 onShareAppMessage() {},
5 onLoad(options) {}, 10 onLoad(options) {
11 this.initData();
12 },
13 initData() {
14 app.queryIndex().then((result) => {
15 this.setData({
16 userInfo: app.globalData.userInfo
17 })
18 this.queryWishbillDetail();
19 this.queryWishbillHelpers();
20 })
21 },
22 // 显示规则页面
23 onShowRuleHandler() {
24 this.setData({
25 tipsRuleVisible: true
26 })
27 },
28 // 显示海报图
29 onCreatePosterHandler() {
30 app.router.push({
31 path: "poster"
32 })
33 },
34 // 获取心愿单详情
35 queryWishbillDetail() {
36 return new Promise((resolve, reject) => {
37 app.post({
38 url: app.api.wishbillDetail,
39 data: {
40 billCode: app.globalData.indexInfo.wishBillCode
41 }
42 }).then((result) => {
43 this.setData({
44 wishInfo: result
45 })
46 })
47 });
48 },
49 // 获取助力列表
50 queryWishbillHelpers() {
51 return new Promise((resolve, reject) => {
52 app.post({
53 url: app.api.wishbillHelpers,
54 data: {
55 billCode: app.globalData.indexInfo.wishBillCode,
56 page: 1,
57 size: 50
58 }
59 }).then((result) => {
60 this.setData({
61 helperInfo: result
62 })
63 })
64 });
65 },
6 // 子组件事件 66 // 子组件事件
7 evtcomp(evt) { 67 evtcomp(evt) {
8 let { 68 let {
...@@ -11,7 +71,10 @@ Page({ ...@@ -11,7 +71,10 @@ Page({
11 } = evt.detail; 71 } = evt.detail;
12 switch (name) { 72 switch (name) {
13 73
14 case "_evt_hide": 74 case "_evt_hide_mask":
75 this.setData({
76 tipsRuleVisible: false
77 })
15 break; 78 break;
16 79
17 default: 80 default:
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "我的心愿单",
3 "usingComponents": {
4 "authorize-comp": "../../component/authorize-comp/authorize-comp",
5 "tips-rule-comp": "../../component/tips-rule-comp/tips-rule-comp",
6 "van-popup": "../../ui/vant-weapp/popup/index"
7 }
3 } 8 }
......
...@@ -2,17 +2,192 @@ ...@@ -2,17 +2,192 @@
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 .page { 4 .page {
5 font-weight: 300;
6 padding-bottom: $pageBottom;
7
5 .bgc {} 8 .bgc {}
6 9
7 .bg {} 10 .bg {
11 .b1 {
12 position: absolute;
13 width: 750px;
14 height: 576px;
15 }
16
17 .b1 {
18 position: absolute;
19 width: 750px;
20 height: 576px;
21 }
22 }
23
24 .decoration {
25 position: relative;
26
27 .d1 {
28 position: absolute;
29 width: 532px;
30 height: 847px;
31 top: 290px;
32 right: 0;
33 }
34 }
8 35
9 .main { 36 .main {
10 .top-space { 37 .top-space {
11 height: 0px; 38 height: 152px;
12 } 39 }
13 40
14 .content { 41 .content {
15 position: relative; 42 position: relative;
43
44 // 我的信息框
45 .my {
46 position: relative;
47 margin: 0 auto 0;
48 width: 742px;
49 height: 957px;
50
51 .ebg {
52 position: absolute;
53 width: 742px;
54 height: 957px;
55 }
56
57 .portrait {
58 position: absolute;
59 width: 182px;
60 height: 182px;
61 border-radius: 91px;
62 background-color: wheat;
63 left: 0;
64 right: 0;
65 top: -82px;
66 margin: 0 auto;
67 }
68
69 // 内容
70 .cont {
71 position: relative;
72 text-align: center;
73
74 // 占位
75 .space1 {
76 height: 118px;
77 }
78
79 .nickname {
80 color: #ba3039;
81 font-size: 36px;
82 }
83
84 .number {
85 color: #999999;
86 font-size: 24px;
87 }
88
89 .mycard {
90 margin: 16px auto;
91 border-radius: 24px;
92 box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.1);
93 background-color: #ffffff;
94 color: #bb3039;
95 @include btc(160px, 48px);
96 font-size: 24px;
97
98 }
99 }
100
101 // 海报按钮
102 .poster-btn {
103 position: absolute;
104 left: 0;
105 right: 0;
106 bottom: 42px;
107 margin: 0 auto;
108 box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.2);
109 background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138);
110 color: #ffffff;
111 font-size: 28px;
112 @include btc(200px, 56px);
113 @include border-top-radius(28px);
114 }
115 }
116
117 // 协作
118 .coop {
119 margin-top: 60px;
120 text-align: center;
121
122 .tit {
123 color: #a01635;
124 font-size: 40px;
125 }
126
127 .tips {
128 margin-top: 16px;
129 color: #333333;
130 font-size: 24px;
131
132 .t1 {
133 color: #ba3039;
134 }
135 }
136
137 .list {
138 margin: 32px auto 0;
139 width: 654px;
140 height: 331px;
141 background-color: #fffbf8;
142 padding: 30px 20px;
143 @extend .bb;
144 overflow-y: auto;
145
146 &-item {
147 font-size: 22px;
148 width: 100%;
149 // margin: 12px 0;
150 margin-bottom: 20px;
151 }
152 }
153 }
154
155 // 按钮容器
156 .btn-wrap {
157 position: relative;
158 margin: 72px auto 0;
159 width: 654px;
160 display: flex;
161 justify-content: space-between;
162
163 .btn {
164 @include cb(300px, 80px);
165 }
166
167 .btn2 {
168 border-radius: 40px;
169 border: solid 2px #b83138;
170 background: transparent;
171 color: #a21f3c;
172 }
173 }
174 }
175
176 .rule-btn {
177 position: absolute;
178 top: 32px;
179 right: 0;
180 @include border-left-radius(30px);
181 @include btc(162px, 60px);
182 font-size: 30px;
183 color: #bf0221;
184
185 box-shadow: 7.4px 8.2px 27px 0 rgba(228, 78, 96, 0.86);
186 background-image: linear-gradient(to right, #fbddd5, #f9efed 51%, #ffded9 99%), linear-gradient(to bottom, #000000, #000000);
187
188 .c1 {
189 padding-left: 12px;
190 }
16 } 191 }
17 } 192 }
18 } 193 }
......
1 <view class="page"> 1 <view class="page">
2 <view class="app__bgc bgc"></view> 2 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view> 3 <view class="app__bg bg">
4 <image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" />
5 </view>
6 <view class="decoration">
7 <image class="d1" src="../../image/oss/my-wish/my-wish-d1.png" mode="widthFix" />
8 </view>
4 <view class="app__content main"> 9 <view class="app__content main">
5 <view class="top-space"></view> 10 <view class="top-space"></view>
6 <view class="content"></view> 11 <view class="content">
12 <!-- 我的信息框 -->
13 <view class="my">
14 <image class="ebg" src="../../image/oss/my-wish/my-wish-c2.png" mode="widthFix" />
15 <image class="portrait" src="{{wishInfo.member.avatar}}" />
16 <!-- 内容 -->
17 <view class="cont">
18 <view class="space1"></view>
19 <view class="nickname">{{wishInfo.member.nickname}}</view>
20 <view class="number">{{wishInfo.member.mobile}}</view>
21 <view class="mycard">我的卡券</view>
22 </view>
23 <view bindtap="onCreatePosterHandler" class="poster-btn">生成海报</view>
24 </view>
25 <!-- 协作 -->
26 <view class="coop">
27 <view class="tit">· 我的弹力帮帮团 ·</view>
28 <view class="tips">
29 积累
30 <span class="t1">5</span>
31 人助力，获得
32 <span class="t1">12100</span>
33 弹力值！
34 </view>
35 <scroll-view scroll-y="{{true}}" class="list">
36 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
37 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
38 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
39 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
40 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
41 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
42 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
43 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
44 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
45 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
46 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
47 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
48 </scroll-view>
49 </view>
50 <view class="btn-wrap">
51 <view class="btn btn2">弹力girl榜单</view>
52 <view class="btn">弹弹好友</view>
53 </view>
54 </view>
55 <!-- 规则按钮 -->
56 <view class="rule-btn" bindtap="onShowRuleHandler">
57 <span class="c1">活动详情</span>
58 </view>
7 </view> 59 </view>
8 </view> 60 </view>
61 <van-popup show="{{ tipsRuleVisible }}">
62 <tips-rule-comp bind:evtcomp="evtcomp"></tips-rule-comp>
63 </van-popup>
......