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	<template>	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	</template>	46	</template>
47		47
48	<script>	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	</script>	227	</script>
247		228
248	<style scoped lang="scss">	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	</style>	353	</style>