Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
5f973076 by simon
Options

默认提交

1 parent 7247f8c5
Inline Side-by-side
Showing 18 changed files with 928 additions and 10 deletions
...@@ -76,8 +76,10 @@ ...@@ -76,8 +76,10 @@
76 "auction-bid-comp": "../../component/auction-bid-comp/auction-bid-comp", 76 "auction-bid-comp": "../../component/auction-bid-comp/auction-bid-comp",
77 "auction-bid-success-comp": "../../component/auction-bid-success-comp/auction-bid-success-comp", 77 "auction-bid-success-comp": "../../component/auction-bid-success-comp/auction-bid-success-comp",
78 "auction-bid-fail-comp": "../../component/auction-bid-fail-comp/auction-bid-fail-comp", 78 "auction-bid-fail-comp": "../../component/auction-bid-fail-comp/auction-bid-fail-comp",
79 "seckill-order-comp": "../../component/seckill-order-comp/seckill-order-comp",
79 "empty-tips": "../../component/empty-tips/empty-tips", 80 "empty-tips": "../../component/empty-tips/empty-tips",
80 "empty-tips-light": "../../component/empty-tips-light/empty-tips-light", 81 "empty-tips-light": "../../component/empty-tips-light/empty-tips-light",
82 "van-stepper": "../../ui/vant-weapp/stepper/index",
81 "van-popup": "../../ui/vant-weapp/popup/index" 83 "van-popup": "../../ui/vant-weapp/popup/index"
82 } 84 }
83 } 85 }
......
1 let app = getApp();
2 Component({
3 options: {
4 styleIsolation: 'apply-shared'
5 },
6 properties: {
7 // 这里定义了innerText属性，属性值可以在组件使用时指定
8 // cid 用户区分组件
9 cid: {
10 type: String,
11 value: '1',
12 },
13 innerTitle: {
14 type: String,
15 value: '',
16 },
17 innerText: {
18 type: String,
19 value: '',
20 },
21 innerButton: {
22 type: String,
23 value: '确定',
24 },
25 userInfo: {
26 type: Object,
27 value: {}
28 },
29 productInfo: {
30 type: Object,
31 value: {}
32 },
33 },
34 data: {
35 // 这里是一些组件内部数据
36 someData: {},
37 num: 1,
38 },
39 methods: {
40
41 // 这里是一个自定义方法
42 customMethod() {
43 this.triggerEvent('evtcomp', {
44 name: "_evt_custom"
45 })
46 },
47 onStepperChange(e) {
48 this.setNum(e.detail);
49 },
50 setNum(val) {
51 this.setData({
52 num: val
53 })
54 },
55 // 隐藏蒙层
56 hideMask() {
57 this.triggerEvent('evtcomp', {
58 name: "_evt_hide_mask"
59 });
60 },
61 // 点击自定义按钮
62 onInnerButtonHandler() {
63 this.triggerEvent('evtcomp', {
64 name: "_evt_hide_mask"
65 });
66 }
67 }
68 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp-item {
5 width: 650px;
6 min-height: 496px;
7 border-radius: 10px;
8 background-color: #ffffff;
9 padding-bottom: 244px;
10
11 .remove {
12 position: absolute;
13 right: 16px;
14 top: 16px;
15 font-size: 40px;
16 color: #333333;
17 }
18
19 .cspace {
20 height: 76px;
21 }
22
23 .cont {
24 // text-align: center;
25 width: 572px;
26 margin: 0 auto;
27
28 .product {
29 @extend .bb;
30 display: flex;
31 // justify-content: space-between;
32
33 .prize {
34 .image {
35 width: 180px;
36 height: 180px;
37 }
38 }
39
40 .con {
41 @extend .bb;
42 padding: 0 0 0 24px;
43 display: flex;
44 align-content: space-between;
45 justify-content: flex-start;
46 flex-wrap: wrap;
47
48 .tt {
49 font-size: 24px;
50 width: 100%;
51 }
52
53 .t1 {
54 font-size: 30px;
55 }
56
57 .t2 {
58 // margin-top: 16px;
59 display: flex;
60 align-items: center;
61
62 .t2-1 {
63 font-size: 30px;
64 }
65
66 .t2-2 {
67 font-size: 20px;
68 color: #888888;
69 margin-left: 20px;
70 }
71 }
72
73 .t3 {
74 font-size: 36px;
75 }
76 }
77 }
78
79 // 表单
80 .table {
81 width: 572px;
82 margin: 32px auto 0;
83 border: solid 1PX #c7c7c7;
84 @extend .bb;
85 padding: 24px 28px;
86 border-radius: 8px;
87 min-height: 380px;
88
89 .tips {
90 font-size: 18px;
91 color: #888888;
92 }
93
94 .form {
95 margin: 48px 0 0;
96 color: #444444;
97 font-size: 26px;
98
99 &-item {
100 display: flex;
101 align-items: center;
102 margin: 10px 0;
103 height: 48px;
104
105 .label {
106 width: 140px;
107 }
108
109 .val {
110 flex: 1;
111 }
112
113 .ipt {
114 border-bottom: solid 1PX #444444;
115 }
116 }
117 }
118
119 .empty-tips {
120 color: #444444;
121 text-align: center;
122 margin-top: 80px;
123 font-size: 32px;
124 line-height: 60px;
125 }
126 }
127 }
128
129 .btn-wrap {
130 position: absolute;
131 left: 0;
132 right: 0;
133 bottom: 74px;
134 margin: 0 auto;
135 display: flex;
136 justify-content: center;
137
138 .btn {
139 @include cb();
140 margin: 0 16px;
141 }
142
143 .btn2 {
144 @include cb2();
145 }
146 }
147
148
149
150 }
1 <wxs module="filter" src="../../utils/utilswxs.wxs"></wxs>
2 <view class="comp-item">
3 <span class="iconfont iconbaseline-close-px remove" bindtap="hideMask"></span>
4 <view class="cspace"></view>
5 <view class="cont">
6 <view class="product">
7 <view class="prize">
8 <image class="image" mode="aspectFill" src="{{productInfo.seckillImages && productInfo.seckillImages[0] || ''}}" />
9 </view>
10 <view class="con">
11 <view class="tt t1">{{productInfo.seckillName}}</view>
12 <block wx:if="{{productInfo.minNum == productInfo.maxNum}}">
13 <!-- 固定个数 -->
14 <view class="tt t2">
15 <view class="t2-1">{{productInfo.minNum}}个</view>
16 <view class="t2-2">数量不可修改</view>
17 </view>
18 </block>
19 <block wx:else>
20 <!-- 不定个数 -->
21 <view class="tt t2">
22 <view class="t2-1">
23 <van-stepper bind:change="onStepperChange" value="{{ num }}" min="{{productInfo.minNum}}" max="{{productInfo.maxNum}}" integer />
24 </view>
25 <view class="t2-2">可选填{{productInfo.minNum}}-{{productInfo.maxNum}}个</view>
26 </view>
27 </block>
28 <view class="tt t3 price">￥{{filter.Fen2Yuan(productInfo.originalPrice*num)}}</view>
29 </view>
30 </view>
31 <!-- 表单 -->
32 <view class="table" wx:if="{{1>10}}">
33 <view class="tips">*本活动仅记录订单，无需付款，后期由线下工作人员另行安排支付与配送，请确保收货信息准确。</view>
34 <view class="form">
35 <view class="form-item">
36 <view class="label">收件人：</view>
37 <view class="val">{{userInfo.realName}}</view>
38 </view>
39 <view class="form-item">
40 <view class="label">联系方式：</view>
41 <view class="val">{{userInfo.memberPhone}}</view>
42 </view>
43 <view class="form-item">
44 <view class="label">店名：</view>
45 <view class="val">{{userInfo.storeName}}</view>
46 </view>
47 <view class="form-item">
48 <view class="label">备注：</view>
49 <!-- <view class="val">{{userInfo.storeName}}</view> -->
50 <input value="{{remark}}" bindinput="bindRemarkInput" class="val ipt" placeholder="请填写备注" />
51 </view>
52 </view>
53 </view>
54 <!-- 无存库 -->
55 <view class="table" wx:else>
56 <view class="empty-tips">
57 <text class="txt">抱歉来晚一步，库存已告罄\n下次再来吧！</text>
58 </view>
59 </view>
60 </view>
61 <view class="btn-wrap">
62 <view bindtap="onInnerButtonHandler" class="btn">确认下单</view>
63 </view>
64 </view>
...@@ -270,7 +270,7 @@ Page({ ...@@ -270,7 +270,7 @@ Page({
270 openSocket() { 270 openSocket() {
271 let memberCode = this.data.userInfo.memberCode; 271 let memberCode = this.data.userInfo.memberCode;
272 let auctionCode = this.data.options.code; 272 let auctionCode = this.data.options.code;
273 let wsUrl = 'wss://ow.go.qudone.com/zlzm/websocket/' + memberCode + auctionCode; 273 let wsUrl = 'wss://ow.go.qudone.com/zlzm/websocket/auction/' + memberCode + auctionCode;
274 // console.log("wsUrl:", wsUrl); 274 // console.log("wsUrl:", wsUrl);
275 if (!memberCode || !auctionCode) { 275 if (!memberCode || !auctionCode) {
276 wx.showModal({ 276 wx.showModal({
......
...@@ -51,7 +51,7 @@ $contentWidth:690px; ...@@ -51,7 +51,7 @@ $contentWidth:690px;
51 51
52 .arrow { 52 .arrow {
53 top: 0; 53 top: 0;
54 left: 450px; 54 left: 500px;
55 position: absolute; 55 position: absolute;
56 width: 0; 56 width: 0;
57 height: 0; 57 height: 0;
...@@ -96,7 +96,7 @@ $contentWidth:690px; ...@@ -96,7 +96,7 @@ $contentWidth:690px;
96 &-right { 96 &-right {
97 text-align: right; 97 text-align: right;
98 @extend .linear; 98 @extend .linear;
99 width: 300px; 99 width: 250px;
100 height: $funcHei; 100 height: $funcHei;
101 101
102 @include border-right-radius(4px); 102 @include border-right-radius(4px);
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 <view bindtap="queryAuctionRecordLast" class="refresh-btn">刷新价格</view> 35 <view bindtap="queryAuctionRecordLast" class="refresh-btn">刷新价格</view>
36 <view class="desc-tit">{{productInfo.auctionName}}</view> 36 <view class="desc-tit">{{productInfo.auctionName}}</view>
37 <view class="desc-t1">{{productInfo.auctionDescription}}</view> 37 <view class="desc-t1">{{productInfo.auctionDescription}}</view>
38 <view class="desc-t1">{{productInfo.district}}</view> 38 <view class="desc-t1">活动区域：{{productInfo.district}}</view>
39 </view> 39 </view>
40 <!-- 线 --> 40 <!-- 线 -->
41 <view class="line"></view> 41 <view class="line"></view>
......
...@@ -134,7 +134,7 @@ $contentWidth:690px; ...@@ -134,7 +134,7 @@ $contentWidth:690px;
134 position: absolute; 134 position: absolute;
135 right: 2px; 135 right: 2px;
136 top: -28px; 136 top: -28px;
137 font-size: 40rpx; 137 font-size: 40px;
138 } 138 }
139 } 139 }
140 } 140 }
......
1 import { 1 import {
2 getBindtapData 2 getBindtapData,
3 formatDateTime,
3 } from '../../utils/util'; 4 } from '../../utils/util';
5 let Date = require('../../utils/date.js');
6 var timer = require('../../utils/wxTimer.js');
7
8 var wxTimer;
4 9
5 let app = getApp(); 10 let app = getApp();
6 Page({ 11 Page({
7 data: {}, 12 data: {
13 authorizeVisible: false,
14 seckillOrderVisible: true,
15 userInfo: {},
16 productInfo: {},
17 navBackTimeout: 0,
18 options: {},
19 wxTimerList: {},
20 lastTime: "",
21 },
8 onShareAppMessage() {}, 22 onShareAppMessage() {},
9 showAuth() { 23 showAuth() {
10 this.setData({ 24 this.setData({
11 authorizeVisible: true 25 authorizeVisible: true
12 }) 26 })
13 }, 27 },
14 onLoad(options) {}, 28 onShow() {
29 if (wxTimer) {
30 wxTimer.calibration()
31 }
32 },
33 onLoad(options) {
34 this.setData({
35 options
36 })
37 this.querySeckillDetail().then((result) => {
38 this.startTimer();
39 })
40 this.initData();
41 },
42 onUnload() {
43 this.removeTimer();
44 },
45
46 initData() {
47 this.queryMember().then((result) => {});
48 },
49
50 // 开始倒计时
51 startTimer() {
52 let _this = this;
53 if (wxTimer) {
54 wxTimer.stop();
55 }
56 let beginTime = _this.getTimeStr();
57 console.log("beginTime:", beginTime);
58 if (!beginTime) return;
59 wxTimer = new timer({
60 beginTime: beginTime,
61 complete() {
62 _this.removeTimer();
63 _this.querySeckillDetail();
64 },
65 interval: 1,
66 intervalFn() {
67 let lastTime = _this.getTimeStr({
68 day: true
69 });
70 _this.setData({
71 lastTime
72 })
73 // console.log("lastTime:", lastTime);
74 }
75 })
76 wxTimer.start(_this);
77 },
78
79 /**
80 * 移除倒计时
81 */
82 removeTimer() {
83 if (wxTimer) {
84 wxTimer.stop()
85 }
86 },
87
88 /**
89 * 获取时间字符串
90 * @param {*} initObj
91 */
92 getTimeStr(initObj) {
93 let productInfo = this.data.productInfo;
94 let endTime = productInfo && productInfo.endTime || 0;
95 return formatDateTime(endTime, initObj)
96 },
97
98
99 /**
100 * 我要秒杀
101 */
102 onSubmitHandler() {
103 let productInfo = this.data.productInfo;
104 if (productInfo && productInfo.status == 1) {
105 // 显示弹窗
106 this.setData({
107 seckillOrderVisible: true
108 })
109 let minNum = productInfo.minNum;
110 this.seckillOrderComp = this.selectComponent("#seckillOrderComp");
111 console.log("this.seckillOrderComp:",this.seckillOrderComp);
112 console.log("minNum:",minNum);
113 if (this.seckillOrderComp) {
114 this.seckillOrderComp.setNum(minNum);
115 }
116 }
117 },
118
119 /**
120 * 秒杀详情
121 */
122 querySeckillDetail() {
123 let code = this.data.options.code;
124 let _this = this;
125 return new Promise((resolve, reject) => {
126 app.post({
127 url: app.api.seckillDetail,
128 data: {
129 seckillCode: code
130 }
131 }).then((result) => {
132 this.setData({
133 productInfo: result
134 })
135 console.log("result:", result);
136 resolve();
137 }).catch((err) => {
138 clearTimeout(_this.data.navBackTimeout);
139 _this.data.navBackTimeout = setTimeout(() => {
140 wx.navigateBack({
141 delta: 1
142 });
143 }, 1000);
144 });
145 })
146 },
147
148 /**
149 * 拍卖出价提交
150 * @param {*} price
151 */
152 querySeckillSubmit(price) {
153 let code = this.data.options.code;
154 app.post({
155 toast: false,
156 url: app.api.seckillSubmit,
157 data: {
158 seckillCode: code,
159 price: price * 100 //转成分
160 }
161 }).then((result) => {
162 console.log("result:", result);
163 // this.setData({
164 // auctionBidSuccessVisible: true
165 // })
166 }).catch((err) => {
167 console.log("querySeckillSubmit err:", err);
168
169 // switch (err.code) {
170 // // 来晚一步，该价格已经被其他用户提交 显示组件
171 // case 1010:
172 // this.setData({
173 // auctionBidFailVisible: true
174 // })
175 // break;
176
177 // default:
178 // wx.showToast({
179 // title: err.errMsg || "系统开小差"
180 // })
181 // break;
182 // }
183 });
184 },
185
186 /**
187 * 获取会员信息
188 */
189 queryMember() {
190 return new Promise((resolve, reject) => {
191 app.post({
192 url: app.api.member,
193 data: {}
194 }).then((result) => {
195 this.setData({
196 userInfo: result
197 })
198 resolve(result);
199 })
200 });
201 },
202
15 // 隐藏蒙层 203 // 隐藏蒙层
16 hideMask() { 204 hideMask() {
17 this.setData({ 205 this.setData({
18 authorizeVisible: false, 206 authorizeVisible: false,
207 seckillOrderVisible: false,
19 }) 208 })
20 }, 209 },
21 // 子组件事件 210 // 子组件事件
...@@ -24,6 +213,7 @@ Page({ ...@@ -24,6 +213,7 @@ Page({
24 name, 213 name,
25 data 214 data
26 } = evt.detail; 215 } = evt.detail;
216 console.log("@seckill-detail || evt:", name)
27 switch (name) { 217 switch (name) {
28 218
29 // 隐藏弹窗 219 // 隐藏弹窗
...@@ -31,6 +221,8 @@ Page({ ...@@ -31,6 +221,8 @@ Page({
31 this.hideMask(); 221 this.hideMask();
32 break; 222 break;
33 223
224
225
34 default: 226 default:
35 break; 227 break;
36 } 228 }
......
1 { 1 {
2 "navigationBarTitleText": "demo" 2 "navigationBarTitleText": "秒杀活动"
3 } 3 }
......
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 $contentWidth:690px;
5
6 .page {
7 padding-bottom: $pageBottom;
8
9 .bgc {}
10
11 .bg {}
12
13 .main {
14 .top-space {
15 height: 0px;
16 }
17
18 .content {
19 position: relative;
20 min-height: 1000px;
21
22 // 产品图片
23 .img-wrap {
24 $imgWidth: 750px;
25 $imgHeight: 480px;
26 width: $imgWidth;
27 height: $imgHeight;
28 // border: 1PX solid #F0F0F0;
29 border-radius: 4px;
30 // @extend .bb;
31
32 .swiper {
33 width: $imgWidth;
34 height: $imgHeight;
35
36 .swiper-image {
37 width: $imgWidth;
38 height: $imgHeight;
39 }
40 }
41 }
42
43 // 价格栏
44 .func {
45 position: relative;
46 $funcHei: 120px;
47 height: $funcHei;
48 display: flex;
49 justify-content: space-between;
50 background-color: #f2f2f2;
51
52 .arrow {
53 top: 0;
54 left: 500px;
55 position: absolute;
56 width: 0;
57 height: 0;
58 border: $funcHei/2 solid transparent;
59 border-left-color: #f2f2f2;
60
61 }
62
63 &-ele {
64 display: flex;
65 font-size: 22px;
66 @extend .bb;
67
68 .price {
69 font-size: 52px;
70 font-weight: bold;
71 }
72
73 }
74
75 &-left {
76 align-items: center;
77 color: #333333;
78
79 padding-left: 24px;
80 font-size: 20px;
81
82 .t1 {
83 margin-left: 20px;
84 margin-top: 36px;
85 align-self: flex-start;
86
87 }
88
89 .t2 {}
90
91 .line-th {
92 text-decoration: line-through;
93 }
94 }
95
96 &-right {
97 text-align: right;
98 @extend .linear;
99 width: 250px;
100 height: $funcHei;
101
102 @include border-right-radius(4px);
103 color: #ffffff;
104 padding-right: 24px;
105 align-content: center;
106 flex-wrap: wrap;
107
108 .t1 {
109 width: 100%;
110 font-size: 20px;
111 padding: 4px 0;
112 }
113
114 .t2 {
115 font-size: 24px;
116 }
117
118 .date {
119 // width: 100%;
120 font-size: 22px;
121 }
122 }
123 }
124
125 // 描述
126 .desc {
127 position: relative;
128 font-size: 26px;
129 color: #666666;
130 width: $contentWidth;
131 margin: 0 auto;
132
133 .refresh-btn {
134 @include cb2(160px, 48px, 24px);
135 position: absolute;
136 right: 0;
137 top: 0;
138 }
139
140 &-tit {
141 font-size: 36px;
142 font-weight: bold;
143 color: #333333;
144 margin: 24px 0 10px;
145 width: 520px;
146 @include ellipsis(1);
147 }
148
149 &-t1 {
150 margin-top: 12px;
151 }
152 }
153
154 // 线
155 .line {
156 width: $contentWidth;
157 margin: 24px auto;
158 height: 1PX;
159 background-color: #666666;
160 opacity: 0.5;
161 }
162
163 // 拍卖详情
164 .auction {
165 width: $contentWidth;
166 margin: 24px auto 0;
167 font-size: 24px;
168
169 &-desc {
170 color: #666666;
171 display: flex;
172 flex-wrap: wrap;
173
174 .t1 {
175 width: 50%;
176 padding: 6px 0;
177 // @extend .bb;
178 }
179 }
180
181 &-table {
182 @extend .bb;
183 padding: 24px 0 24px 24px;
184 background-color: #f8f8f8;
185 border-radius: 8px;
186 margin-top: 24px;
187 font-size: 22px;
188
189 .tab {
190 &-item {
191 display: flex;
192 justify-content: space-between;
193
194 .item {
195 text-align: center;
196 height: 32px;
197 line-height: 32px;
198 margin: 6px 0;
199 @extend .bb;
200 padding: 0 6px;
201 }
202
203 .item1 {
204 width: 72px;
205 @extend .fcc;
206
207 .block {
208 width: 72px;
209 height: 32px;
210 line-height: 32px;
211 @extend .linear;
212 color: #ffffff;
213 border-radius: 4px;
214 }
215 }
216
217 .item2 {
218 width: 200px;
219 }
220
221 .item3 {
222 width: 120px;
223 }
224
225 .item4 {
226 flex: 1;
227 }
228 }
229
230 &-item2 {
231 color: #c9c9c9;
232
233 .item1 {
234 .block {
235 background: #c9c9c9;
236 }
237 }
238 }
239 }
240
241 .all-bid-tips {
242 color: #3680EB;
243 margin-top: 32px;
244 }
245
246 .empty-tips{
247 text-align: center;
248 padding: 60px 0;
249 color: #666666;
250 }
251 }
252 }
253
254
255 }
256
257 // 提交按钮
258 .submit-btn {
259 @include cb(560px, 84px);
260 @extend .linear;
261 margin: 72px auto 0;
262 }
263 }
264 }
265
266 .disable {
267 background: #c9c9c9 !important;
268 }
......
1 <wxs module="filter" src="../../utils/utilswxs.wxs"></wxs>
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 <!-- <view class="app__top-shadow"></view> -->
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 <!-- 产品图 -->
10 <view class="img-wrap">
11 <swiper class="swiper" indicator-color="rgba(0,0,0,.3)" indicator-active-color="rgba(255,255,255,1)" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
12 <block wx:for="{{productInfo.seckillImages}}" wx:key="{{index}}">
13 <swiper-item>
14 <image class="swiper-image" src="{{item}}" mode="aspectFill" />
15 </swiper-item>
16 </block>
17 </swiper>
18 </view>
19 <!-- 价格栏 -->
20 <view class="func">
21 <view class="arrow"></view>
22 <view class="func-ele func-left">
23 <text class="price">￥{{filter.Fen2Yuan(productInfo.originalPrice)}}</text>
24 <text class="t1 line-th">￥{{filter.Fen2Yuan(productInfo.specialPrice)}}</text>
25 <text class="t1">仅剩{{productInfo.stock}}个</text>
26 </view>
27 <view class="func-ele func-right {{productInfo.status != 1 ? 'disable' : ''}}">
28 <text wx:if="{{productInfo.status == 0}}" class="t1 t2">秒杀未开始</text>
29 <text wx:if="{{productInfo.status == 1}}" class="t1">秒杀进行中</text>
30 <text wx:if="{{productInfo.status == 2}}" class="t1 t2">秒杀已结束</text>
31 <text wx:if="{{productInfo.status == 1}}" class="t1 date">{{lastTime}}</text>
32 </view>
33 </view>
34 <!-- 描述 -->
35 <view class="desc">
36 <view class="desc-tit">{{productInfo.seckillName}}</view>
37 <view class="desc-t1">{{productInfo.seckillDescription}}</view>
38 <view class="desc-t1">
39 秒杀数量：{{productInfo.minNum == productInfo.maxNum ? productInfo.minNum+'个' : productInfo.minNum+' - '+productInfo.maxNum+'个'}}
40 </view>
41 <view class="desc-t1">活动区域：{{productInfo.district}}</view>
42 </view>
43 </view>
44 <!-- 按钮 -->
45 <view bindtap="onSubmitHandler" class="submit-btn {{productInfo.status != 1 ? 'disable' : ''}}">
46 立即秒杀
47 </view>
8 </view> 48 </view>
9 </view> 49 </view>
10 <van-popup show="{{ authorizeVisible }}"> 50 <van-popup show="{{ authorizeVisible }}">
11 <authorize-comp bind:evtcomp="evtcomp"></authorize-comp> 51 <authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
12 </van-popup> 52 </van-popup>
53 <van-popup show="{{ seckillOrderVisible }}">
54 <seckill-order-comp id="seckillOrderComp" product-info="{{productInfo}}" user-info="{{userInfo}}" bind:evtcomp="evtcomp"></seckill-order-comp>
55 </van-popup>
......
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 field: true,
4 classes: [
5 'input-class',
6 'plus-class',
7 'minus-class'
8 ],
9 props: {
10 value: null,
11 integer: Boolean,
12 disabled: Boolean,
13 inputWidth: String,
14 asyncChange: Boolean,
15 disableInput: Boolean,
16 min: {
17 type: null,
18 value: 1
19 },
20 max: {
21 type: null,
22 value: Number.MAX_SAFE_INTEGER
23 },
24 step: {
25 type: null,
26 value: 1
27 }
28 },
29 computed: {
30 minusDisabled() {
31 return this.data.disabled || this.data.value <= this.data.min;
32 },
33 plusDisabled() {
34 return this.data.disabled || this.data.value >= this.data.max;
35 }
36 },
37 watch: {
38 value(value) {
39 if (value === '') {
40 return;
41 }
42 const newValue = this.range(value);
43 if (typeof newValue === 'number' && value !== newValue) {
44 this.set({ value: newValue });
45 }
46 }
47 },
48 data: {
49 focus: false
50 },
51 created() {
52 this.set({
53 value: this.range(this.data.value)
54 });
55 },
56 methods: {
57 onFocus(event) {
58 this.$emit('focus', event.detail);
59 },
60 onBlur(event) {
61 const value = this.range(this.data.value);
62 this.triggerInput(value);
63 this.$emit('blur', event.detail);
64 },
65 // limit value range
66 range(value) {
67 return Math.max(Math.min(this.data.max, value), this.data.min);
68 },
69 onInput(event) {
70 const { value = '' } = event.detail || {};
71 this.triggerInput(value);
72 },
73 onChange(type) {
74 if (this.data[`${type}Disabled`]) {
75 this.$emit('overlimit', type);
76 return;
77 }
78 const diff = type === 'minus' ? -this.data.step : +this.data.step;
79 const value = Math.round((this.data.value + diff) * 100) / 100;
80 this.triggerInput(this.range(value));
81 this.$emit(type);
82 },
83 onMinus() {
84 this.onChange('minus');
85 },
86 onPlus() {
87 this.onChange('plus');
88 },
89 triggerInput(value) {
90 this.set({
91 value: this.data.asyncChange ? this.data.value : value
92 });
93 this.$emit('change', value);
94 }
95 }
96 });
1 {
2 "component": true
3 }
...\ No newline at end of file ...\ No newline at end of file
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view class="van-stepper custom-class">
4 <view
5 class="minus-class {{ utils.bem('stepper__minus', { disabled: minusDisabled }) }}"
6 hover-class="van-stepper__minus--hover"
7 hover-stay-time="70"
8 bind:tap="onMinus"
9 />
10 <input
11 type="{{ integer ? 'number' : 'digit' }}"
12 class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
13 style="{{ inputWidth ? 'width: ' + inputWidth : '' }}"
14 value="{{ value }}"
15 focus="{{ focus }}"
16 disabled="{{ disabled || disableInput }}"
17 bindinput="onInput"
18 bind:focus="onFocus"
19 bind:blur="onBlur"
20 />
21 <view
22 class="plus-class {{ utils.bem('stepper__plus', { disabled: plusDisabled }) }}"
23 hover-class="van-stepper__plus--hover"
24 hover-stay-time="70"
25 bind:tap="onPlus"
26 />
27 </view>
1 @import '../common/index.wxss';.van-stepper{font-size:0}.van-stepper__minus,.van-stepper__plus{position:relative;display:inline-block;width:28px;height:28px;padding:5px;margin:1px;vertical-align:middle;background-color:#f2f3f5;border:0;box-sizing:border-box}.van-stepper__minus:before,.van-stepper__plus:before{width:9px;height:1px}.van-stepper__minus:after,.van-stepper__plus:after{width:1px;height:9px}.van-stepper__minus:after,.van-stepper__minus:before,.van-stepper__plus:after,.van-stepper__plus:before{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:#333;content:""}.van-stepper__minus--hover,.van-stepper__plus--hover{background-color:#e8e8e8}.van-stepper__minus--disabled,.van-stepper__plus--disabled{background-color:#f7f8fa}.van-stepper__minus--disabled:after,.van-stepper__minus--disabled:before,.van-stepper__plus--disabled:after,.van-stepper__plus--disabled:before{background-color:#c9c9c9}.van-stepper__minus--disabled.van-stepper__minus--hover,.van-stepper__minus--disabled.van-stepper__plus--hover,.van-stepper__plus--disabled.van-stepper__minus--hover,.van-stepper__plus--disabled.van-stepper__plus--hover{background-color:#f7f8fa}.van-stepper__minus{border-radius:4px 0 0 4px}.van-stepper__minus:after{display:none}.van-stepper__plus{border-radius:0 4px 4px 0}.van-stepper__input{display:inline-block;width:30px;height:26px;padding:1px;margin:1px;font-size:14px;color:#333;text-align:center;vertical-align:middle;background-color:#f2f3f5;border:0;border-width:1px 0;border-radius:0;box-sizing:initial;-webkit-appearance:none}.van-stepper__input--disabled{color:#c9c9c9;background-color:#f2f3f5}
...\ No newline at end of file ...\ No newline at end of file