BJ_web_developers / jy_parkingOS

Browse Code »

Commit e0afa52ee95575899985a30afae0eb9a61104380

Authored by 刘淇 2022-06-07 14:45:01 +0800

1 parent 27ddc5cb

卡券发放

Inline Side-by-side

Showing 1 changed file with 345 additions and 364 deletions

pages/moneyRecharge/moneyRecharge.vue

View file @e0afa52

1	1	<template>
2		- <view>
3		-
4		- <view class="rechargeTop">
5		- <view class="toDetail uni-list-cell-pd uni-right" @click="detailCell">明细 ></view>
6		- <view class="rechargeNum uni-center">¥{{acctBalance \| toFixed2 }}</view>
7		- </view>
8		-
9		- <uni-section title="充值金额(元)" type="line" padding>
10		- <uni-grid :column="3" :highlight="true" :showBorder="false" :square="false" @change="change">
11		- <uni-grid-item v-for="(item, index) in ListData" :index="index" :key="index">
12		- <view class="grid-item-box" style="background-color: #fff;">
13		- <view class="text" :class="currentIndex==index?'itemActive':''">
14		- {{item.rechargeCode \| ortherToFixed}}
15		- </view>
16		- </view>
17		- </uni-grid-item>
18		- </uni-grid>
19		- <view class="uni-list-cell-pd" v-show="isShowInput">
20		- <input class="payInut" type="number" v-model="rechargeNum" @input="checkNum" :maxlength="maxlength"
21		- placeholder=" 请输入金额">
22		- </view>
23		- </uni-section>
24		-
25		- <view class="uni-list-cell-pd">
26		- 温馨提示：暂不支持退款，请谨慎选择充值金额！
27		- </view>
28		- <view class="border-bg"></view>
29		-
30		- <view class="order-title">
31		- 支付方法
32		- </view>
33		- <view class="order-line"></view>
34		-
35		- <view class="orderwaysview">
36		- <image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>
37		- <view class="order-info" style="margin-left: 8px;">
38		- 微信支付
39		- </view>
40		- <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>
41		- </view>
42		-
43		- <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认充值</button>
44		-
45		- </view>
	2	+ <view>
	3	+
	4	+ <view class="rechargeTop">
	5	+ <view class="toDetail uni-list-cell-pd uni-right" @click="detailCell">明细 ></view>
	6	+ <view class="rechargeNum uni-center">¥{{acctBalance \| toFixed2 }}</view>
	7	+ </view>
	8	+
	9	+ <uni-section title="充值金额(元)" type="line" padding>
	10	+ <uni-grid :column="3" :highlight="true" :showBorder="false" :square="false" @change="change">
	11	+ <uni-grid-item v-for="(item, index) in ListData" :index="index" :key="index">
	12	+ <view class="grid-item-box" style="background-color: #fff;">
	13	+ <view class="text" :class="currentIndex==index?'itemActive':''">
	14	+ {{item.rechargeCode \| ortherToFixed}}
	15	+ </view>
	16	+ </view>
	17	+ </uni-grid-item>
	18	+ </uni-grid>
	19	+ <view class="uni-list-cell-pd" v-show="isShowInput">
	20	+ <input class="payInut" type="number" v-model="rechargeNum" @input="checkNum" :maxlength="maxlength"
	21	+ placeholder=" 请输入金额">
	22	+ </view>
	23	+ </uni-section>
	24	+
	25	+ <view class="uni-list-cell-pd">
	26	+ 温馨提示：暂不支持退款，请谨慎选择充值金额！
	27	+ </view>
	28	+ <view class="border-bg"></view>
	29	+
	30	+ <view class="order-title">
	31	+ 支付方法
	32	+ </view>
	33	+ <view class="order-line"></view>
	34	+
	35	+ <view class="orderwaysview">
	36	+ <image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>
	37	+ <view class="order-info" style="margin-left: 8px;">
	38	+ 微信支付
	39	+ </view>
	40	+ <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>
	41	+ </view>
	42	+
	43	+ <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认充值</button>
	44	+
	45	+ </view>
46	46	</template>
47	47
48	48	<script>
49		- export default {
50		- data() {
51		- return {
52		- acctBalance: '0.00',
53		- wxopenId: '',
54		- ListData: [],
55		- currentIndex: 0,
56		- rechargeFee: 0,
57		- isShowInput: false,
58		- rechargeNum: '',
59		- maxlength: 6 //默认一个长度
60		- }
61		- },
62		- onLoad() {
63		- uni.setStorageSync("wxCode", '')
64		- this.getCode();
65		- this.recharge();
66		- this.rechargeList();
67		-
68		-
69		- },
70		- mounted() {
71		-
72		- },
73		- onShow() {
74		-
75		- },
76		- methods: {
77		- getCode() {
78		- uni.login({
79		- provider: 'weixin',
80		- success: function(loginRes) {
81		- console.log('获取微信code-loginRes.code: ' + loginRes.code);
82		- uni.setStorageSync("wxCode", loginRes.code)
83		-
84		- }
85		- });
86		- },
87		- getOpenID() {
88		- let that = this;
89		- let code = uni.getStorageSync("wxCode");
90		- console.log(code)
91		- let data = {
92		- appId: that.$common.hs_wxPay_appId,
93		- // appId:"wxadb8caee05ab2981",
94		- code: code,
95		-
96		- };
97		- that.$myRequest({
98		- url: that.$common.getOpenIdByCode,
99		- method: 'POST',
100		- data: data
101		- }).then(res => {
102		-
103		-
104		- let data = res.data;
105		- that.wxopenId = data.openid;
106		- console.log(data.openid)
107		- that.wxPayOrder()
108		- })
109		- },
110		- recharge() {
111		- let that = this;
112		- that.$myRequest({
113		- url: that.$common.walletAccount,
114		- method: 'POST',
115		- data: that.$common.requestSign()
116		- }).then(res => {
117		-
118		- console.log(res)
119		- let data = res.data;
120		- that.acctBalance = data.acctBalance;
121		-
122		- })
123		- },
124		- rechargeList() {
125		- let that = this;
126		- that.$myRequest({
127		- url: that.$common.rechargeList,
128		- method: 'POST',
129		- data: that.$common.requestSign()
130		- }).then(res => {
131		-
132		- console.log(res)
133		- let data = res.data;
134		- that.ListData = data;
135		- that.rechargeFee = that.ListData[0].rechargeCode
136		-
137		- })
138		- },
139		- change(e) {
140		- let that = this;
141		- let {
142		- index
143		- } = e.detail;
144		- that.currentIndex = index;
145		-
146		- if (that.ListData[index].rechargeCode == -1) {
147		- console.log('1')
148		- that.isShowInput = true;
149		- that.rechargeNum = ''
150		- } else {
151		- that.isShowInput = false;
152		- that.rechargeFee = that.ListData[index].rechargeCode;
153		- }
154		-
155		- },
156		- checkNum(e) {
157		- let value = e.detail.value;
158		- let dot = value.indexOf('.'); //包含小数点
159		- let reg = /^[0-9]+$/; //正整数
160		- if (dot > -1) {
161		- this.maxlength = dot + 3; //长度是小数点后两位
162		- if (value.length > dot + 3) {}
163		- }
164		- if (reg.test(value)) { //如果是正整数不包含小数点
165		- this.maxlength = 6;
166		- }
167		-
168		- },
169		-
170		- detailCell() {
171		- uni.navigateTo({
172		- url: '../rechargeDetail/rechargeDetail'
173		-
174		- });
175		- },
176		- payClick() {
177		- let that = this;
178		- that.getOpenID()
179		-
180		- },
181		- wxPayOrder(){
182		- let that = this;
183		- let payMoney;
184		- if (that.isShowInput) {
185		- payMoney = that.rechargeNum*100;
186		- } else {
187		- payMoney = that.rechargeFee;
188		- }
189		- console.log(that.wxopenId)
190		- let data = {
191		- openId: that.wxopenId,
192		- rechargeType: '2',
193		- acctType: '1',
194		- paySrcType: '204',
195		- payType: '2',
196		- realPayMoney: payMoney.toString(),
197		- rechargeFee: payMoney.toString(),
198		- };
199		- console.log(data)
200		- that.$myRequest({
201		- url: that.$common.publicUnifiedOrder,
202		- method: 'POST',
203		- data: that.$common.requestSign(data)
204		- }).then(res => {
205		- var mydata = res.data;
206		- console.log(mydata);
207		- that.MakeWxPay(mydata)
208		-
209		- })
210		- },
211		- // 调用微信支付
212		- MakeWxPay(mydata) {
213		- console.log(mydata)
214		- var me = this;
215		- uni.requestPayment({
216		- provider: 'wxpay',
217		- timeStamp: mydata.timeStamp,
218		- //随机字符串，长度为32个字符以下
219		- nonceStr: mydata.nonceStr,
220		- //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
221		- package: mydata.package,
222		- signType: mydata.signType,
223		- paySign: mydata.paySign,
224		- success: function(res) {
225		- console.log('success:' + JSON.stringify(res));
226		- me.recharge();
227		- },
228		- fail: function(err) {
229		- console.log('fail:' + JSON.stringify(err));
230		- uni.showModal({
231		- title: '提示',
232		- content: '支付失败/取消',
233		- showCancel: false,
234		- success: function(res) {
235		- if (res.confirm) {
236		- console.log('支付失败');
237		- }
238		- }
239		- });
240		- }
241		- });
242		- },
243		-
244		- }
245		- }
	49	+export default {
	50	+ data() {
	51	+ return {
	52	+ acctBalance: '0.00',
	53	+ wxopenId: '',
	54	+ ListData: [],
	55	+ currentIndex: 0,
	56	+ rechargeFee: 0,
	57	+ isShowInput: false,
	58	+ rechargeNum: '',
	59	+ maxlength: 6 //默认一个长度
	60	+ }
	61	+ },
	62	+ onLoad() {
	63	+ uni.setStorageSync("wxCode", '')
	64	+ this.getCode();
	65	+ this.recharge();
	66	+ this.rechargeList();
	67	+ },
	68	+ mounted() {
	69	+ },
	70	+ onShow() {
	71	+ },
	72	+ methods: {
	73	+ getCode() {
	74	+ uni.login({
	75	+ provider: 'weixin',
	76	+ success: function (loginRes) {
	77	+ console.log('获取微信code-loginRes.code: ' + loginRes.code);
	78	+ uni.setStorageSync("wxCode", loginRes.code)
	79	+ }
	80	+ });
	81	+ },
	82	+ getOpenID() {
	83	+ let that = this;
	84	+ let code = uni.getStorageSync("wxCode");
	85	+ console.log(code)
	86	+ let data = {
	87	+ appId: that.$common.hs_wxPay_appId,
	88	+ // appId:"wxadb8caee05ab2981",
	89	+ code: code,
	90	+ };
	91	+ that.$myRequest({
	92	+ url: that.$common.getOpenIdByCode,
	93	+ method: 'POST',
	94	+ data: data
	95	+ }).then(res => {
	96	+ let data = res.data;
	97	+ that.wxopenId = data.openid;
	98	+ console.log(data.openid)
	99	+ that.wxPayOrder()
	100	+ })
	101	+ },
	102	+ recharge() {
	103	+ let that = this;
	104	+ that.$myRequest({
	105	+ url: that.$common.walletAccount,
	106	+ method: 'POST',
	107	+ data: that.$common.requestSign()
	108	+ }).then(res => {
	109	+ console.log(res)
	110	+ let data = res.data;
	111	+ that.acctBalance = data.acctBalance;
	112	+ })
	113	+ },
	114	+ rechargeList() {
	115	+ let that = this;
	116	+ that.$myRequest({
	117	+ url: that.$common.rechargeList,
	118	+ method: 'POST',
	119	+ data: that.$common.requestSign()
	120	+ }).then(res => {
	121	+ console.log(res)
	122	+ let data = res.data;
	123	+ that.ListData = data;
	124	+ that.rechargeFee = that.ListData[0].rechargeCode
	125	+ })
	126	+ },
	127	+ change(e) {
	128	+ let that = this;
	129	+ let {
	130	+ index
	131	+ } = e.detail;
	132	+ that.currentIndex = index;
	133	+ if (that.ListData[index].rechargeCode == -1) {
	134	+ console.log('1')
	135	+ that.isShowInput = true;
	136	+ that.rechargeNum = ''
	137	+ } else {
	138	+ that.isShowInput = false;
	139	+ that.rechargeFee = that.ListData[index].rechargeCode;
	140	+ }
	141	+ },
	142	+ checkNum(e) {
	143	+ let value = e.detail.value;
	144	+ let dot = value.indexOf('.'); //包含小数点
	145	+ let reg = /^[0-9]+$/; //正整数
	146	+ if (dot > -1) {
	147	+ this.maxlength = dot + 3; //长度是小数点后两位
	148	+ if (value.length > dot + 3) {
	149	+ }
	150	+ }
	151	+ if (reg.test(value)) { //如果是正整数不包含小数点
	152	+ this.maxlength = 6;
	153	+ }
	154	+ },
	155	+ detailCell() {
	156	+ uni.navigateTo({
	157	+ url: '../rechargeDetail/rechargeDetail'
	158	+ });
	159	+ },
	160	+ payClick() {
	161	+ let that = this;
	162	+ that.getOpenID()
	163	+ },
	164	+ wxPayOrder() {
	165	+ let that = this;
	166	+ let payMoney;
	167	+ if (that.isShowInput) {
	168	+ payMoney = that.rechargeNum * 100;
	169	+ } else {
	170	+ payMoney = that.rechargeFee;
	171	+ }
	172	+ console.log(that.wxopenId)
	173	+ let data = {
	174	+ openId: that.wxopenId,
	175	+ rechargeType: '2',
	176	+ acctType: '1',
	177	+ paySrcType: '204',
	178	+ payType: '12',
	179	+ realPayMoney: payMoney.toString(),
	180	+ rechargeFee: payMoney.toString(),
	181	+ };
	182	+ console.log(data)
	183	+ that.$myRequest({
	184	+ url: that.$common.publicUnifiedOrder,
	185	+ method: 'POST',
	186	+ data: that.$common.requestSign(data)
	187	+ }).then(res => {
	188	+ var mydata = res.data;
	189	+ console.log(mydata);
	190	+ that.MakeWxPay(mydata)
	191	+ })
	192	+ },
	193	+ // 调用微信支付
	194	+ MakeWxPay(mydata) {
	195	+ console.log(mydata)
	196	+ var me = this;
	197	+ uni.requestPayment({
	198	+ provider: 'wxpay',
	199	+ timeStamp: mydata.timeStamp,
	200	+ //随机字符串，长度为32个字符以下
	201	+ nonceStr: mydata.nonceStr,
	202	+ //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
	203	+ package: mydata.package,
	204	+ signType: mydata.signType,
	205	+ paySign: mydata.paySign,
	206	+ success: function (res) {
	207	+ console.log('success:' + JSON.stringify(res));
	208	+ me.recharge();
	209	+ },
	210	+ fail: function (err) {
	211	+ console.log('fail:' + JSON.stringify(err));
	212	+ uni.showModal({
	213	+ title: '提示',
	214	+ content: '支付失败/取消',
	215	+ showCancel: false,
	216	+ success: function (res) {
	217	+ if (res.confirm) {
	218	+ console.log('支付失败');
	219	+ }
	220	+ }
	221	+ });
	222	+ }
	223	+ });
	224	+ },
	225	+ }
	226	+}
246	227	</script>
247	228
248	229	<style scoped lang="scss">
249		- .rechargeTop {
250		- height: 100px;
251		- background: #007AFF;
252		- color: #fff;
253		- position: relative;
254		- }
255		-
256		- .toDetail {
257		- /text-align: right;/
258		-
259		- }
260		-
261		- .rechargeNum {
262		- font-size: 30px;
263		- }
264		-
265		- .text {
266		- width: 80%;
267		- height: 60px;
268		- line-height: 60px;
269		- margin: 10px auto;
270		- border: 1px solid #ccc;
271		- text-align: center;
272		- }
273		-
274		- .itemActive {
275		- background: #f0ad4e;
276		- }
277		-
278		- .order-title {
279		- font-size: 18px;
280		- margin-left: 16px;
281		- margin-top: 15px;
282		- font-weight: bold;
283		- color: #404040;
284		- }
285		-
286		- .order-info {
287		- font-size: 14px;
288		- margin-left: 15px;
289		- margin-top: 12px;
290		- color: #404040;
291		- }
292		-
293		- .order-line {
294		- background: #D9D9D9;
295		- height: 1px;
296		- margin-top: 12px;
297		- margin-left: 15px;
298		- padding: 0px;
299		- overflow: hidden;
300		- /* 透明度 */
301		- opacity: 0.5;
302		- }
303		-
304		- .order-line-bold {
305		- background: #FAFAFA;
306		- height: 12px;
307		- margin-top: 12px;
308		- padding: 0px;
309		- overflow: hidden;
310		- }
311		-
312		- .flex-row-justify-between {
313		- display: flex;
314		- flex-direction: row;
315		- justify-content: space-between;
316		- }
317		-
318		- .flex-row-justify-end {
319		- display: flex;
320		- flex-direction: row;
321		- /* 水平对齐*/
322		- align-items: baseline;
323		-
324		- }
325		-
326		- .order-discount {
327		- color: #C8C7CC;
328		- margin-right: 20 upx;
329		- /* margin-right: 12px ; */
330		- /* margin-top:12px ; */
331		-
332		- }
333		-
334		- .orderwaysview {
335		- display: flex;
336		- flex-direction: row;
337		- }
338		-
339		- .orderways {
340		- width: 18px;
341		- height: 18px;
342		- margin-left: 15px;
343		- margin-top: 14px;
344		- }
345		-
346		- .orderwaysSel {
347		- width: 16px;
348		- height: 16px;
349		- margin-left: auto;
350		- margin-right: 14px;
351		- margin-top: 14px;
352		- /* justify-content:flex-end; */
353		- }
354		-
355		- .button-sp-area {
356		- margin: 0 auto;
357		- width: 60%;
358		- margin-top: 40px;
359		-
360		- }
361		-
362		- .payInut {
363		- display: flex;
364		- box-sizing: border-box;
365		- flex-direction: row;
366		- align-items: center;
367		- border: 1px solid #DCDFE6;
368		- border-radius: 4px;
369		- min-height: 36px;
370		- padding-left: 10px;
371		- }
	230	+ .rechargeTop {
	231	+ height: 100px;
	232	+ background: #007AFF;
	233	+ color: #fff;
	234	+ position: relative;
	235	+ }
	236	+
	237	+ .toDetail {
	238	+ /text-align: right;/
	239	+
	240	+ }
	241	+
	242	+ .rechargeNum {
	243	+ font-size: 30px;
	244	+ }
	245	+
	246	+ .text {
	247	+ width: 80%;
	248	+ height: 60px;
	249	+ line-height: 60px;
	250	+ margin: 10px auto;
	251	+ border: 1px solid #ccc;
	252	+ text-align: center;
	253	+ }
	254	+
	255	+ .itemActive {
	256	+ background: #f0ad4e;
	257	+ }
	258	+
	259	+ .order-title {
	260	+ font-size: 18px;
	261	+ margin-left: 16px;
	262	+ margin-top: 15px;
	263	+ font-weight: bold;
	264	+ color: #404040;
	265	+ }
	266	+
	267	+ .order-info {
	268	+ font-size: 14px;
	269	+ margin-left: 15px;
	270	+ margin-top: 12px;
	271	+ color: #404040;
	272	+ }
	273	+
	274	+ .order-line {
	275	+ background: #D9D9D9;
	276	+ height: 1px;
	277	+ margin-top: 12px;
	278	+ margin-left: 15px;
	279	+ padding: 0px;
	280	+ overflow: hidden;
	281	+ /* 透明度 */
	282	+ opacity: 0.5;
	283	+ }
	284	+
	285	+ .order-line-bold {
	286	+ background: #FAFAFA;
	287	+ height: 12px;
	288	+ margin-top: 12px;
	289	+ padding: 0px;
	290	+ overflow: hidden;
	291	+ }
	292	+
	293	+ .flex-row-justify-between {
	294	+ display: flex;
	295	+ flex-direction: row;
	296	+ justify-content: space-between;
	297	+ }
	298	+
	299	+ .flex-row-justify-end {
	300	+ display: flex;
	301	+ flex-direction: row;
	302	+ /* 水平对齐*/
	303	+ align-items: baseline;
	304	+
	305	+ }
	306	+
	307	+ .order-discount {
	308	+ color: #C8C7CC;
	309	+ margin-right: 20 upx;
	310	+ /* margin-right: 12px ; */
	311	+ /* margin-top:12px ; */
	312	+
	313	+ }
	314	+
	315	+ .orderwaysview {
	316	+ display: flex;
	317	+ flex-direction: row;
	318	+ }
	319	+
	320	+ .orderways {
	321	+ width: 18px;
	322	+ height: 18px;
	323	+ margin-left: 15px;
	324	+ margin-top: 14px;
	325	+ }
	326	+
	327	+ .orderwaysSel {
	328	+ width: 16px;
	329	+ height: 16px;
	330	+ margin-left: auto;
	331	+ margin-right: 14px;
	332	+ margin-top: 14px;
	333	+ /* justify-content:flex-end; */
	334	+ }
	335	+
	336	+ .button-sp-area {
	337	+ margin: 0 auto;
	338	+ width: 60%;
	339	+ margin-top: 40px;
	340	+
	341	+ }
	342	+
	343	+ .payInut {
	344	+ display: flex;
	345	+ box-sizing: border-box;
	346	+ flex-direction: row;
	347	+ align-items: center;
	348	+ border: 1px solid #DCDFE6;
	349	+ border-radius: 4px;
	350	+ min-height: 36px;
	351	+ padding-left: 10px;
	352	+ }
372	353	</style>
...	...