packageOrderPay.vue 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483
  1. <template>
  2. <view>
  3. <!-- #ifdef APP-PLUS -->
  4. <es-nav-title title="支付" ></es-nav-title>
  5. <!-- #endif -->
  6. <view class="inner-box">
  7. <!-- 收货人 -->
  8. <view class="address-box" v-if="address==null" @click="openAddress()">
  9. <view class="left">
  10. <view class="name-box">
  11. <text class="text name">添加收货地址</text>
  12. </view>
  13. </view>
  14. <view class="arrow-box">
  15. <image src="/static/images/arrow_gray.png" mode=""></image>
  16. </view>
  17. </view>
  18. <view class="address-box" v-if="address!=null" @click="openAddress()">
  19. <view class="left">
  20. <view class="name-box">
  21. <text class="text name">{{address.realName}}</text>
  22. <text class="text" v-if="address.phone!=null">{{address.phone}}</text>
  23. </view>
  24. <view class="address">
  25. {{address.address}}
  26. </view>
  27. </view>
  28. <view class="arrow-box">
  29. <image src="/static/images/arrow_gray.png" mode=""></image>
  30. </view>
  31. </view>
  32. <view class="other-info">
  33. <view class="title">支付明细</view>
  34. <view class="item">
  35. <view class="left">
  36. <text class="label">应付金额:</text>
  37. </view>
  38. <view class="right">
  39. <text class="text" >{{payPrice}}</text>
  40. </view>
  41. </view>
  42. <view class="item" v-if="order!=null&&(order.userCouponId==null||order.userCouponId==0)" @click.stop="openCoupon()">
  43. <view class="left">
  44. <text class="label">优惠券:</text>
  45. </view>
  46. <view class="right">
  47. <text class="text">{{couponText}}</text>
  48. <image v-if="userCouponId!=0" @click.stop="delCoupon()" class="ic-close" src="/static/images/close.png"></image>
  49. <image class="ic-back" src="/static/images/arrow_gray.png"></image>
  50. </view>
  51. </view>
  52. <view class="item" >
  53. <view class="left">
  54. <text class="label">优惠金额:</text>
  55. </view>
  56. <view class="right">
  57. <text class="text">{{discountMoney}}</text>
  58. </view>
  59. </view>
  60. <view class="item">
  61. <view class="left">
  62. <text class="label">支付金额:</text>
  63. </view>
  64. <view class="right">
  65. <text class="text">{{payMoney}}</text>
  66. </view>
  67. </view>
  68. <view class="item">
  69. <view class="left">
  70. <text class="label">物流代收:</text>
  71. </view>
  72. <view class="right">
  73. <text class="text">{{payRemain}}</text>
  74. </view>
  75. </view>
  76. <view class="item">
  77. <view class="left">
  78. <text class="label">邮费:</text>
  79. </view>
  80. <view class="right">
  81. <text class="text">{{payDelivery}}</text>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="pay-type">
  86. <view class="title">支付方式</view>
  87. <radio-group @change="payTypeChange" >
  88. <view class="item" v-if="checkPayType('1')&&choose!=1" >
  89. <view class="left" >
  90. <image src="/static/images/wecha_pay.png" mode=""></image>
  91. <text class="text">全款支付</text>
  92. </view>
  93. <label>
  94. <text v-show="payType==1" class="text" style="margin-right: 14rpx;">赠送芳华币:{{integral}}</text>
  95. <radio :value="1" :checked="payType=='1'" />
  96. </label>
  97. </view>
  98. <view class="item" v-if="checkPayType('2')" >
  99. <view class="left" >
  100. <image src="/static/image/pay_de.png" mode=""></image>
  101. <text class="text">物流代收</text>
  102. </view>
  103. <label>
  104. <text v-show="payType==2" class="text" style="margin-right: 14rpx;">赠送芳华币:{{integral}}</text>
  105. <radio :value="2" :checked="payType=='2'" />
  106. </label>
  107. </view>
  108. <view class="item" v-if="checkPayType('3')&&choose!=2" >
  109. <view class="left">
  110. <image src="/static/image/pay_1.png" mode=""></image>
  111. <text class="text">货到付款</text>
  112. </view>
  113. <label>
  114. <text v-show="payType==3" class="text" style="margin-right: 14rpx;">赠送芳华币:{{integral}}</text>
  115. <radio :value="3" :checked="payType=='3'" />
  116. </label>
  117. </view>
  118. </radio-group>
  119. </view>
  120. <!-- <view class="other-info" v-if="payType=='1'&&order!=null&&order.companyId!=null&&order.companyId>0&&giftPrice<=payPrice"> -->
  121. <view class="other-info" v-if="gifts.length>0">
  122. <view class="title">赠品</view>
  123. <view class="drug-list" >
  124. <view v-for="(product) in gifts" class="drug-item" >
  125. <view class="img-box">
  126. <image :src="product.image" mode="aspectFill"></image>
  127. </view>
  128. <view class="drug-info" >
  129. <view>
  130. <view class="name-box ellipsis2">
  131. {{product.productName}}
  132. </view>
  133. <view class="spec">{{product.sku}}</view>
  134. </view>
  135. <view class="num-box">
  136. <view class="use">
  137. {{product.usageMethod}}
  138. </view>
  139. <view class="price">
  140. <text class="unit">¥</text>
  141. <text class="num">{{product.price.toFixed(2)}}</text>
  142. </view>
  143. <view class="amount">x{{product.count}}</view>
  144. </view>
  145. </view>
  146. </view>
  147. </view>
  148. </view>
  149. <!-- 备注 -->
  150. <view class="remarks" v-if="order!=null">
  151. <input type="text" v-model="order.remark" placeholder="备注留言(选填)" placeholder-class="input" />
  152. </view>
  153. </view>
  154. <uni-popup ref="popCoupon" type="bottom" borderRadius="10rpx 10rpx 0px 0px">
  155. <view class="coupon">
  156. <view class="coupon-box" v-if="coupons.length>0" >
  157. <view @click="couponSelect(item)" class="coupon-item" v-for="(item) in coupons">
  158. <view class="left" >
  159. <image v-if="item.status==0" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/0fdd75d89db84458886d38e615011048.png" mode="widthFix"></image>
  160. <image v-if="item.status!=0" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/d950e4c7af1e4464be1a7777e9dca576.png" mode="widthFix"></image>
  161. <view style="z-index: 999;">
  162. ¥<span class="num">{{item.price.toFixed(2)}}</span>
  163. </view>
  164. <view class="pic-num" >满{{item.minPrice.toFixed(2)}}元可用</view>
  165. </view>
  166. <view class="right">
  167. <view class="title">
  168. {{item.title}}
  169. </view>
  170. <view class="btns">
  171. <view v-if="item.status==0||item.status==2" >{{item.limitTime}} 到期</view>
  172. <view v-if="item.status==1">使用时间 {{item.useTime}}</view>
  173. <view class="bnt gray" v-if="item.status==1" >已使用</view>
  174. <view class="bnt gray" v-if="item.status==2" >已过期</view>
  175. <view class="btn" v-if="item.status==0" >使用</view>
  176. </view>
  177. </view>
  178. </view>
  179. </view>
  180. <view class="empty" v-if="coupons.length==0">
  181. <image src="https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png"></image>
  182. </view>
  183. </view>
  184. </uni-popup>
  185. <uni-popup ref="popTip" type="dialog">
  186. <uni-popup-dialog cancelText="支付失败" confirmText="支付成功" mode="base" content="是否已支付成功?" title="提示" :duration="2000" :before-close="true" @close="confirmTip" @confirm="confirmTip"></uni-popup-dialog>
  187. </uni-popup>
  188. <!-- 底部按钮 -->
  189. <view class="btn-box">
  190. <view class="btn" v-if="order!=null" @click="payOrder()">支付{{payMoney}}元</view>
  191. </view>
  192. <uni-popup ref="popPayType" type="bottom" borderRadius="10rpx 10rpx 0px 0px">
  193. <view class="pay-box">
  194. <view class="title">请选择支付方式</view>
  195. <view class="pay-list">
  196. <view class="pay-item alipay" @click="doAlipay()">
  197. <image src="/static/images/alipay.png"></image>
  198. <view class="name">支付宝支付</view>
  199. </view>
  200. <view class="pay-item wx" @click="doWxPay()">
  201. <image src="/static/images/wx.png"></image>
  202. <view class="name" >微信支付</view>
  203. </view>
  204. <view class="pay-item wx" @click="doWxPay1()">
  205. <image src="/static/images/wx.png"></image>
  206. <view class="name" >微信支付备用</view>
  207. </view>
  208. </view>
  209. </view>
  210. </uni-popup>
  211. <uni-popup ref="popCopyTip" type="dialog">
  212. <uni-popup-dialog cancelText="取消" confirmText="复制链接" mode="base" content="请点击“复制链接”按钮在浏览器中粘贴打开" title="提示" :duration="2000" :before-close="true" @close="closeCopyTip" @confirm="confirmCopyTip"></uni-popup-dialog>
  213. </uni-popup>
  214. </view>
  215. </template>
  216. <script>
  217. import * as jweixin from 'weixin-js-sdk'
  218. import {getConfigByKey} from '@/api/common'
  219. import {getAddressByDefault} from '@/api/userAddress.js'
  220. import {getMyEnableCouponList} from '@/api/user.js'
  221. import {getPackageById} from '@/api/package.js'
  222. import {getPackageOrderById,pay,compute,aliPayment,wxPayment,H5WxPayment,H5AliPayment} from '@/api/packageOrder'
  223. import { qconfig } from '../../utils/config'
  224. export default {
  225. data() {
  226. return {
  227. giftPrice:0.00,
  228. payTypes:[],
  229. addressId:null,
  230. wxPay: true,
  231. address:null,
  232. orderId:null,
  233. order:null,
  234. items:null,
  235. payType:"1",
  236. couponText:"请选择优惠券",
  237. userCouponId:0,
  238. coupons:[],
  239. couponShow:false,
  240. payMoney:0.00,
  241. discountMoney:0,
  242. payRemain:0,
  243. payDelivery:0,
  244. payPrice:0,
  245. gifts:[],
  246. alipayQrCode:null,
  247. showPayTips:false,
  248. choose: 0,
  249. integral:0,
  250. tzCashier:null,
  251. userInfo:null
  252. }
  253. },
  254. onLoad(option) {
  255. this.tzCashier=uni.requireNativePlugin("TZBank-Cashier");
  256. this.choose = option.choose || 0
  257. this.payType = this.choose == 1 ? 3:this.choose == 2 ? 1 :this.payType
  258. this.orderId=option.orderId;
  259. this.userInfo=JSON.parse(uni.getStorageSync("userInfo"));
  260. var that=this;
  261. uni.$on('updateAddress', (e) => {
  262. that.addressId=e.addressId;
  263. that.address=e;
  264. that.address.address=e.province+e.city+e.district+e.detail
  265. });
  266. this.getAddressByDefault();
  267. this.getPackageOrderById();
  268. // this.getPackageById();
  269. this.getConfigByKey();
  270. uni.hideNavigationBarLoading();
  271. },
  272. onShow() {
  273. if(this.showPayTips){
  274. this.$refs.popPayType.close();
  275. this.$refs.popTip.open();
  276. this.showPayTips=false;
  277. }
  278. },
  279. methods: {
  280. getAddressByDefault(){
  281. var data={};
  282. getAddressByDefault(data).then(
  283. res => {
  284. if(res.code==200){
  285. if(res.data!=null){
  286. this.addressId=res.data.addressId;
  287. this.address=res.data;
  288. this.address.address=res.data.province+res.data.city+res.data.district+res.data.detail
  289. }
  290. }else{
  291. uni.showToast({
  292. icon:'none',
  293. title: res.msg,
  294. });
  295. }
  296. },
  297. rej => {}
  298. );
  299. },
  300. getConfigByKey(){
  301. var that=this;
  302. var data={key:"his.package"}
  303. getConfigByKey(data).then(
  304. res => {
  305. if(res.code==200){
  306. this.giftPrice=JSON.parse(res.data).giftPrice;
  307. console.log(this.giftPrice)
  308. }
  309. },
  310. rej => {}
  311. );
  312. },
  313. checkPayType(payType){
  314. var flag=false
  315. this.payTypes.forEach(function(value,index,array){
  316. if(value.toString()==payType.toString()){
  317. flag=true;
  318. }
  319. });
  320. return flag;
  321. },
  322. payTypeChange(e){
  323. console.log(e.detail.value)
  324. this.payType=e.detail.value;
  325. this.compute()
  326. },
  327. couponSelect(item){
  328. this.$refs.popCoupon.close();
  329. //计算金额
  330. this.userCouponId=item.id;
  331. console.log(item)
  332. this.couponText=item.price+"元优惠券"
  333. this.compute()
  334. },
  335. openCoupon(){
  336. this.$refs.popCoupon.open("bottom")
  337. },
  338. delCoupon(){
  339. this.userCouponId=0;
  340. this.couponText="请选择优惠券";
  341. this.compute();
  342. },
  343. compute(){
  344. var data={
  345. payType:this.payType, // choose 1:付邮费领取 2:加粉领取,付邮费领取payType为3
  346. orderId:this.orderId,
  347. userCouponId:this.userCouponId
  348. }
  349. compute(data).then(
  350. res => {
  351. if(res.code==200){
  352. this.payPrice=res.moneys.payPrice.toFixed(2);
  353. this.payMoney=res.moneys.payMoney.toFixed(2);
  354. this.discountMoney=res.moneys.discountMoney.toFixed(2);
  355. this.payDelivery=res.moneys.payDelivery.toFixed(2);
  356. this.payRemain=res.moneys.payRemain.toFixed(2);
  357. this.gifts=res.moneys.gifts;
  358. this.integral = res.moneys.integral;
  359. }
  360. else{
  361. this.payType=1;
  362. this.compute()
  363. this.userCouponId=0;
  364. this.couponText="请选择优惠券"
  365. uni.showToast({
  366. icon:'none',
  367. title: res.msg,
  368. });
  369. }
  370. },
  371. err => {
  372. }
  373. );
  374. },
  375. getMyEnableCouponList(){
  376. var data={
  377. orderId:this.orderId
  378. }
  379. if(this.package.isShow==0){
  380. data.couponType=5;
  381. data.cateId=this.package.privateType
  382. }
  383. else if(this.package.isShow==1){
  384. data.couponType=6;
  385. data.cateId=this.package.diseaseType
  386. }
  387. getMyEnableCouponList(data).then(
  388. res => {
  389. if(res.code==200){
  390. this.coupons=res.data;
  391. }
  392. },
  393. err => {
  394. }
  395. );
  396. },
  397. getPackageOrderById(){
  398. var data={orderId:this.orderId};
  399. getPackageOrderById(data).then(res => {
  400. if(res.code==200){
  401. this.order=res.order;
  402. this.choose = res.choose || 0
  403. this.payType = this.choose == 1 ? 3:this.choose == 2 ? 1 :this.payType
  404. this.compute();
  405. this.getPackageById(this.order.packageId);
  406. }
  407. },
  408. rej => {}
  409. );
  410. },
  411. getPackageById(packageId){
  412. let data={packageId:packageId};
  413. if(this.choose == 1 || this.choose == 2) {
  414. data={
  415. packageId:packageId,
  416. choose: this.choose
  417. };
  418. }
  419. getPackageById(data).then(
  420. res => {
  421. if(res.code==200){
  422. this.package=res.data;
  423. this.payTypes=res.data.payType.split(',');
  424. this.payType=this.choose == 1 ? 3:this.choose == 2 ? 1 :this.payType
  425. this.getMyEnableCouponList();
  426. }else{
  427. }
  428. },
  429. rej => {}
  430. );
  431. },
  432. openAddress(){
  433. uni.navigateTo({
  434. url: '/pages/user/address'
  435. });
  436. },
  437. closeTip(){
  438. this.$refs.popTip.close()
  439. },
  440. confirmTip() {
  441. uni.showLoading({title:"请稍侯...",mask:true});
  442. setTimeout(()=>{
  443. uni.hideLoading();
  444. this.getPackagOrderInfo();
  445. },2000);
  446. },
  447. getPackagOrderInfo(){
  448. getPackageOrderById({orderId:this.orderId}).then(res => {
  449. this.$refs.popTip.close();
  450. if(res.code==200){
  451. this.order=res.order;
  452. if(res.order.status==1){ //1:代付款 2:已支付
  453. uni.showToast({title: '未支付成功',icon: 'none'});
  454. }
  455. else if(res.order.status==2){ //1:代付款 2:已支付
  456. this.$refs.popTip.close();
  457. // #ifdef APP-PLUS
  458. if(plus.runtime.channel=="baidu"){ //获取百度渠道标识
  459. let bdCmdType=uni.getStorageSync("bdCmdType");
  460. if(bdCmdType!=null && parseInt(bdCmdType)<=2){
  461. //this.$registerIdCode("orders",2,res.order.payPrice.toString()); //已下单
  462. }
  463. }
  464. // #endif
  465. uni.redirectTo({
  466. url:"./packageOrderPaySuccess?orderId="+this.order.orderId
  467. });
  468. }
  469. }
  470. },
  471. rej => {}
  472. );
  473. },
  474. closeCopyTip(){
  475. this.$refs.popCopyTip.close()
  476. },
  477. confirmCopyTip() {
  478. this.$refs.popCopyTip.close();
  479. var that=this;
  480. uni.setClipboardData({
  481. data:that.alipayQrCode,
  482. success:()=>{
  483. uni.showToast({
  484. title:'内容已成功复制到剪切板',
  485. icon:'none'
  486. })
  487. that.showPayTips=true;
  488. }
  489. });
  490. },
  491. doAlipay(){
  492. var data = {orderId:this.order.orderId};
  493. var that=this;
  494. // #ifdef H5
  495. uni.showLoading();
  496. H5AliPayment(data).then(
  497. res => {
  498. uni.hideLoading()
  499. if(res.code==200){
  500. if(res.type=="tz"){
  501. window.location.href =res.data.body.url
  502. }
  503. else if(res.type=='hf'){
  504. console.log(res)
  505. that.alipayQrCode=res.data.qr_code;
  506. that.$refs.popCopyTip.open();
  507. }
  508. }else{
  509. uni.showToast({icon:'none',title: res.msg});
  510. }
  511. },
  512. rej => {}
  513. );
  514. // #endif
  515. // #ifdef APP-PLUS
  516. uni.showLoading();
  517. aliPayment(data).then(res => {
  518. uni.hideLoading()
  519. this.$refs.popPayType.close();
  520. this.$refs.popTip.open();
  521. console.log("qxj res:"+JSON.stringify(res));
  522. console.log("qxj orderFlowNo:"+res.data.body.orderFlowNo+" businessCstNo:"+res.data.body.orderNo+" platMerCstNo:"+res.data.body.platMerCstNo);
  523. if(res.code==200){
  524. if(res.type=="tz"){
  525. const match = res.data.body.url.match(/[\?&]businessCstNo=([^&]+)/);
  526. const businessCstNo = match ? match[1] : null;
  527. console.log("qxj tzCashier:"+this.tzCashier+" businessCstNo:"+businessCstNo);
  528. this.tzCashier.pay({
  529. env:0,
  530. wxMiniProgramType:0,
  531. wxAppId:'wx703c4bd07bbd1695',
  532. wxUniversalLink:"https://yjf.runtzh.com/",
  533. orderFlowNo:res.data.body.orderFlowNo,
  534. businessCstNo:businessCstNo,
  535. platMerCstNo:res.data.body.platMerCstNo
  536. },(res)=>{
  537. console.log("qxj 支付成功:"+JSON.stringify(res));
  538. });
  539. }
  540. else if(res.type=='hf'){
  541. if (uni.getSystemInfoSync().platform == 'android') {
  542. var alipayScheme ='alipays://platformapi/startApp?&saId=10000007&qrcode=' + res.data.qr_code;
  543. }else{
  544. var alipayScheme ='alipay://platformapi/startApp?&saId=10000007&qrcode=' + res.data.qr_code;
  545. }
  546. console.log(alipayScheme)
  547. // 在uni-app中使用plus.runtime.openURL打开URL
  548. plus.runtime.openURL(alipayScheme, function(error) {
  549. // console.error('打开支付宝失败: ' + error.message);
  550. // 处理打开支付宝失败的情况,比如提示用户或者跳转到其他支付方式
  551. });
  552. }
  553. }
  554. else{
  555. uni.showToast({
  556. title:res.msg,
  557. icon:'none'
  558. });
  559. }
  560. },
  561. rej => {}
  562. );
  563. // #endif
  564. },
  565. doWxPay(){
  566. var that=this;
  567. var data = {orderId:this.orderId};
  568. // #ifdef H5
  569. if(String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"){
  570. uni.showLoading();
  571. H5WxPayment(data).then(res => {
  572. uni.hideLoading()
  573. if(res.code==200){
  574. if(res.type=="tz"){
  575. window.location.href =res.data.body.url
  576. // uni.setStorageSync("h5PayUrl",res.data.body.url);
  577. // console.log(res.data.body.url)
  578. // uni.redirectTo({
  579. // url:"/pages/store/payH5"
  580. // })
  581. }
  582. else if(res.type=='hf'){
  583. var payObj=JSON.parse(res.data.pay_info);
  584. jweixin.config({
  585. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  586. appId: payObj.appId, // 必填,公众号的唯一标识
  587. timestamp: payObj.timeStamp, // 必填,生成签名的时间戳
  588. nonceStr: payObj.nonceStr, // 必填,生成签名的随机串
  589. signature: payObj.paySign, // 必填,签名
  590. jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
  591. })
  592. jweixin.ready(function() {
  593. jweixin.chooseWXPay({
  594. timestamp: payObj.timeStamp, // 时间戳
  595. nonceStr: payObj.nonceStr, // 随机数
  596. package: payObj.package, //
  597. signType: payObj.signType,
  598. paySign: payObj.paySign, // 签名
  599. success: function() {
  600. uni.showToast({ title:'支付成功' });
  601. setTimeout(() => {
  602. uni.navigateTo({
  603. url: `/pages/store/packageOrderPaySuccess?orderId=${that.orderId}`
  604. });
  605. },2000);
  606. },
  607. cancel: function() {
  608. uni.showToast({ title:'取消支付', icon:'none' });
  609. },
  610. fail: function(res) {
  611. uni.showToast({title:'支付失败'+JSON.stringify(res),icon:'none'});
  612. }
  613. })
  614. })
  615. }
  616. }else{
  617. uni.showToast({
  618. icon:'none',
  619. title: res.msg,
  620. });
  621. }
  622. },
  623. rej => {}
  624. );
  625. }
  626. else{
  627. uni.showToast({
  628. title:'请在微信内打开',
  629. icon:'none'
  630. });
  631. }
  632. // #endif
  633. // #ifdef APP-PLUS
  634. //小程序支付
  635. plus.share.getServices(function(res){
  636. var sweixin = null;
  637. for(var i=0;i<res.length;i++){
  638. var t = res[i];
  639. if(t.id == 'weixin'){
  640. sweixin = t;
  641. }
  642. }
  643. if(sweixin){
  644. //唤起微信跳转小程序
  645. sweixin.launchMiniProgram({
  646. id:"gh_feb7753a310b",//gh_7a6a32e5ef61 御君方互医
  647. path:'pages_order/packagePayment?orderId='+that.orderId+"&payMethod=app",
  648. type:0
  649. },function(){
  650. that.$refs.popPayType.close()
  651. that.$refs.popTip.open()
  652. console.log("微信唤起成功");
  653. return true;
  654. },function(e){
  655. console.log("微信唤起失败",e);
  656. uni.showToast({
  657. title:'微信唤起失败,请检查是否有微信应用',
  658. icon:'none'
  659. })
  660. return false;
  661. })
  662. }else{
  663. uni.showToast({
  664. title:'微信唤起失败,请检查是否有微信应用',
  665. icon:'none',
  666. duration:3000
  667. });
  668. return false;
  669. }
  670. },function(res){
  671. console.log(JSON.stringify(res));
  672. });
  673. // #endif
  674. },
  675. doWxPay1(){
  676. var that=this;
  677. var data = {orderId:this.orderId};
  678. // #ifdef H5
  679. if(String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"){
  680. uni.showLoading();
  681. H5WxPayment(data).then(res => {
  682. uni.hideLoading()
  683. if(res.code==200){
  684. if(res.type=="tz"){
  685. window.location.href =res.data.body.url
  686. // uni.setStorageSync("h5PayUrl",res.data.body.url);
  687. // console.log(res.data.body.url)
  688. // uni.redirectTo({
  689. // url:"/pages/store/payH5"
  690. // })
  691. }
  692. else if(res.type=='hf'){
  693. var payObj=JSON.parse(res.data.pay_info);
  694. jweixin.config({
  695. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  696. appId: payObj.appId, // 必填,公众号的唯一标识
  697. timestamp: payObj.timeStamp, // 必填,生成签名的时间戳
  698. nonceStr: payObj.nonceStr, // 必填,生成签名的随机串
  699. signature: payObj.paySign, // 必填,签名
  700. jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
  701. })
  702. jweixin.ready(function() {
  703. jweixin.chooseWXPay({
  704. timestamp: payObj.timeStamp, // 时间戳
  705. nonceStr: payObj.nonceStr, // 随机数
  706. package: payObj.package, //
  707. signType: payObj.signType,
  708. paySign: payObj.paySign, // 签名
  709. success: function() {
  710. uni.showToast({ title:'支付成功' });
  711. setTimeout(() => {
  712. uni.navigateTo({
  713. url: `/pages/store/packageOrderPaySuccess?orderId=${that.orderId}`
  714. });
  715. },2000);
  716. },
  717. cancel: function() {
  718. uni.showToast({ title:'取消支付', icon:'none' });
  719. },
  720. fail: function(res) {
  721. uni.showToast({title:'支付失败'+JSON.stringify(res),icon:'none'});
  722. }
  723. })
  724. })
  725. }
  726. }else{
  727. uni.showToast({
  728. icon:'none',
  729. title: res.msg,
  730. });
  731. }
  732. },
  733. rej => {}
  734. );
  735. }
  736. else{
  737. uni.showToast({
  738. title:'请在微信内打开',
  739. icon:'none'
  740. });
  741. }
  742. // #endif
  743. // #ifdef APP-PLUS
  744. uni.showLoading();
  745. wxPayment(data).then(res => {
  746. uni.hideLoading();
  747. that.$refs.popPayType.close();
  748. that.showPayTips = true;
  749. setTimeout(() => {
  750. that.$refs.popTip.open();
  751. }, 500);
  752. if(res.code==200){
  753. if(res.type=="tz"){
  754. let businessCstNo=this.userInfo.userId;
  755. if(!!res.data.body.url){
  756. const match = res.data.body.url.match(/[\?&]businessCstNo=([^&]+)/);
  757. businessCstNo = match ? match[1] : null;
  758. }
  759. let payConfig={
  760. env:0, //0 生产环境 1-回归 2-测试环境
  761. wxAppId:"wx703c4bd07bbd1695",
  762. wxUniversalLink:"https://yjf.runtzh.com/",
  763. wxMiniProgramType:0,
  764. orderFlowNo:res.data.body.orderFlowNo,
  765. businessCstNo:businessCstNo,
  766. platMerCstNo:res.data.body.platMerCstNo
  767. };
  768. this.tzCashier.pay({
  769. env:0,
  770. wxAppId:"wx703c4bd07bbd1695",
  771. wxUniversalLink:"https://yjf.runtzh.com/",
  772. wxMiniProgramType:0,
  773. orderFlowNo:res.data.body.orderFlowNo,
  774. businessCstNo:businessCstNo,
  775. platMerCstNo:res.data.body.platMerCstNo
  776. },(res)=>{
  777. uni.$emit('closePrivilege', {});
  778. that.$refs.popTip.open();
  779. });
  780. }
  781. else if(res.type=='hf'){
  782. uni.$emit('closePrivilege', {});
  783. that.$refs.popTip.open();
  784. }
  785. }
  786. else{
  787. uni.showToast({title:res.msg,icon:'none'})
  788. }
  789. },
  790. rej => {}
  791. );
  792. // #endif
  793. },
  794. payOrder(){
  795. var that=this;
  796. var data = {
  797. payType:this.payType,
  798. userCouponId:this.userCouponId,
  799. addressId:this.addressId,
  800. remark:this.order.remark,
  801. orderId:this.order.orderId,
  802. };
  803. uni.showLoading();
  804. pay(data).then(res => {
  805. uni.hideLoading()
  806. if(res.code==200){
  807. that.$refs.popPayType.open("bottom")
  808. }else{
  809. uni.showToast({
  810. icon:'none',
  811. title: res.msg,
  812. });
  813. }
  814. },
  815. rej => {}
  816. );
  817. }
  818. }
  819. }
  820. </script>
  821. <style lang="scss">
  822. page{
  823. position: relative;
  824. }
  825. .inner-box{
  826. padding: 20upx 20upx 300upx;
  827. .address-box{
  828. box-sizing: border-box;
  829. min-height: 171upx;
  830. background: #FFFFFF;
  831. border-radius: 16upx;
  832. background-image: url(/static/images/address_bg.png);
  833. background-repeat: no-repeat;
  834. background-size: 100% 30upx;
  835. background-position: left bottom;
  836. padding: 38upx 30upx 36upx;
  837. display: flex;
  838. align-items: center;
  839. justify-content: space-between;
  840. .left{
  841. width: 92%;
  842. .name-box{
  843. display: flex;
  844. align-items: center;
  845. .text{
  846. font-size: 32upx;
  847. font-family: PingFang SC;
  848. font-weight: bold;
  849. color: #111111;
  850. line-height: 1;
  851. &.name{
  852. margin-right: 30upx;
  853. }
  854. }
  855. }
  856. .address{
  857. font-size: 28upx;
  858. font-family: PingFang SC;
  859. font-weight: 500;
  860. color: #666666;
  861. line-height: 42upx;
  862. text-align:left;
  863. margin-top: 23upx;
  864. }
  865. }
  866. .arrow-box{
  867. width: 12upx;
  868. height: 23upx;
  869. display: flex;
  870. align-items: cenetr;
  871. justify-content: cenetr;
  872. image{
  873. width: 100%;
  874. height: 100%;
  875. }
  876. }
  877. }
  878. .goods-list{
  879. margin-top: 20upx;
  880. padding: 0 30upx;
  881. background-color: #FFFFFF;
  882. border-radius: 16upx;
  883. .item{
  884. padding: 30upx 0;
  885. border-bottom: 1px solid #EDEEEF;
  886. display: flex;
  887. align-items: center;
  888. .img-box{
  889. width: 160upx;
  890. height: 160upx;
  891. margin-right: 30upx;
  892. image{
  893. width: 100%;
  894. height: 100%;
  895. }
  896. }
  897. .info-box{
  898. width: calc(100% - 190upx);
  899. height: 160upx;
  900. display: flex;
  901. flex-direction: column;
  902. justify-content: space-between;
  903. .name-box{
  904. font-size: 28upx;
  905. font-family: PingFang SC;
  906. font-weight: 500;
  907. color: #111111;
  908. line-height: 40upx;
  909. .tag{
  910. display: inline-block;
  911. padding: 0 6upx;
  912. height: 30upx;
  913. background: linear-gradient(90deg, #C39A58 0%, #E2C99E 100%);
  914. border-radius: 4upx;
  915. margin-right: 10upx;
  916. font-size: 22upx;
  917. font-family: PingFang SC;
  918. font-weight: bold;
  919. color: #FFFFFF;
  920. line-height: 30upx;
  921. float: left;
  922. margin-top: 7upx;
  923. }
  924. }
  925. .spec{
  926. margin-top: 10upx;
  927. font-size: 24upx;
  928. font-family: PingFang SC;
  929. font-weight: 500;
  930. color: #999999;
  931. line-height: 1;
  932. }
  933. .price-num{
  934. display: flex;
  935. align-items: center;
  936. justify-content: space-between;
  937. .price{
  938. display: flex;
  939. align-items: flex-end;
  940. .unit{
  941. font-size: 24upx;
  942. font-family: PingFang SC;
  943. font-weight: 500;
  944. color: #111111;
  945. line-height: 1.2;
  946. margin-right: 4upx;
  947. }
  948. .num{
  949. font-size: 32upx;
  950. font-family: PingFang SC;
  951. font-weight: 500;
  952. color: #111111;
  953. line-height: 1;
  954. }
  955. }
  956. .num{
  957. font-size: 24upx;
  958. font-family: PingFang SC;
  959. font-weight: 500;
  960. color: #999999;
  961. line-height: 1;
  962. }
  963. }
  964. }
  965. }
  966. .sub-total{
  967. height: 88upx;
  968. display: flex;
  969. align-items: center;
  970. justify-content: flex-end;
  971. .label{
  972. font-size: 24upx;
  973. font-family: PingFang SC;
  974. font-weight: 500;
  975. color: #999999;
  976. }
  977. .price{
  978. display: flex;
  979. align-items: flex-end;
  980. .unit{
  981. font-size: 24upx;
  982. font-family: PingFang SC;
  983. font-weight: 500;
  984. color: #FF6633;
  985. line-height: 1.2;
  986. margin-right: 4upx;
  987. }
  988. .num{
  989. font-size: 32upx;
  990. font-family: PingFang SC;
  991. font-weight: bold;
  992. color: #FF6633;
  993. line-height: 1;
  994. }
  995. }
  996. }
  997. }
  998. .other-info{
  999. margin-top: 20upx;
  1000. background-color: #fff;
  1001. border-radius: 20upx;
  1002. overflow: hidden;
  1003. padding: 0 30upx;
  1004. .title{
  1005. height: 80upx;
  1006. line-height: 80upx;
  1007. font-size: 30upx;
  1008. color: #000;
  1009. font-weight: bold;
  1010. border-bottom: 2upx solid #eeeeee;
  1011. }
  1012. .drug-list{
  1013. margin-top: 15rpx;
  1014. .drug-item{
  1015. padding-bottom: 15upx;
  1016. border-bottom: 1px soli #F0F0F0;
  1017. display: flex;
  1018. align-items: center;
  1019. .img-box{
  1020. width: 160upx;
  1021. height: 160upx;
  1022. margin-right: 30upx;
  1023. flex-shrink: 0;
  1024. image{
  1025. width: 100%;
  1026. height: 100%;
  1027. }
  1028. }
  1029. .drug-info{
  1030. width: calc(100% - 190upx);
  1031. height: 160upx;
  1032. display: flex;
  1033. flex-direction: column;
  1034. justify-content: space-between;
  1035. .name-box{
  1036. font-size: 28upx;
  1037. font-family: PingFang SC;
  1038. font-weight: 500;
  1039. color: #111111;
  1040. line-height: 40upx;
  1041. .tag{
  1042. display: inline-block;
  1043. padding: 0 6upx;
  1044. height: 30upx;
  1045. background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
  1046. border-radius: 4upx;
  1047. margin-right: 10upx;
  1048. font-size: 22upx;
  1049. font-family: PingFang SC;
  1050. font-weight: bold;
  1051. color: #FFFFFF;
  1052. line-height: 30upx;
  1053. float: left;
  1054. margin-top: 7upx;
  1055. }
  1056. }
  1057. .spec{
  1058. font-size: 24upx;
  1059. font-family: PingFang SC;
  1060. font-weight: 500;
  1061. color: #999999;
  1062. line-height: 1;
  1063. margin-top: 10upx;
  1064. }
  1065. .num-box{
  1066. display: flex;
  1067. align-items: center;
  1068. justify-content: space-between;
  1069. .price{
  1070. display: flex;
  1071. align-items: flex-end;
  1072. .unit{
  1073. font-size: 24upx;
  1074. font-family: PingFang SC;
  1075. font-weight: 500;
  1076. color: #111111;
  1077. line-height: 1.2;
  1078. margin-right: 4upx;
  1079. }
  1080. .num{
  1081. font-size: 32upx;
  1082. font-family: PingFang SC;
  1083. font-weight: 500;
  1084. color: #111111;
  1085. line-height: 1;
  1086. }
  1087. }
  1088. .use{
  1089. font-size: 24upx;
  1090. font-family: PingFang SC;
  1091. color: #999999;
  1092. }
  1093. .amount{
  1094. font-size: 24upx;
  1095. font-family: PingFang SC;
  1096. font-weight: 500;
  1097. color: #999999;
  1098. line-height: 1;
  1099. }
  1100. }
  1101. }
  1102. }
  1103. }
  1104. .item{
  1105. height: 80upx;
  1106. display: flex;
  1107. align-items: center;
  1108. justify-content: space-between;
  1109. &:last-child{
  1110. border-bottom: none;
  1111. }
  1112. .left{
  1113. flex: 1;
  1114. display: flex;
  1115. align-items: center;
  1116. .label{
  1117. min-width: 140rpx;
  1118. font-size: 28upx;
  1119. color: #000;
  1120. }
  1121. .text{
  1122. font-size: 28upx;
  1123. color: #1b1b1b;
  1124. }
  1125. }
  1126. .right{
  1127. display: flex;
  1128. align-items: center;
  1129. justify-content: flex-end;
  1130. .text{
  1131. font-size: 28upx;
  1132. color: #1b1b1b;
  1133. }
  1134. .ic-close{
  1135. margin-left: 10rpx;
  1136. width: 30rpx;
  1137. height:30rpx;
  1138. }
  1139. .ic-back{
  1140. margin-left: 10rpx;
  1141. width: 15rpx;
  1142. height:30rpx;
  1143. }
  1144. }
  1145. .item-btn{
  1146. max-width: 200rpx;
  1147. padding: 0rpx 15rpx;
  1148. height: 48upx;
  1149. border-radius: 24upx;
  1150. line-height: 48upx;
  1151. font-size: 24upx;
  1152. color: #000;
  1153. border: 1upx solid #d8d8d8;
  1154. display: flex;
  1155. align-items: center;
  1156. justify-content: center;
  1157. }
  1158. }
  1159. }
  1160. .remarks{
  1161. height: 88upx;
  1162. padding: 0 30upx;
  1163. background: #FFFFFF;
  1164. border-radius: 16upx;
  1165. margin-top: 20upx;
  1166. display: flex;
  1167. align-items: center;
  1168. input{
  1169. width: 100%;
  1170. font-size: 28upx;
  1171. font-family: PingFang SC;
  1172. font-weight: 500;
  1173. color: #000000;
  1174. }
  1175. .input{
  1176. font-size: 28upx;
  1177. font-family: PingFang SC;
  1178. font-weight: 500;
  1179. color: #999999;
  1180. }
  1181. }
  1182. }
  1183. .btn-box{
  1184. width: 100%;
  1185. padding: 30rpx 30upx 0rpx;
  1186. position: fixed;
  1187. bottom: 0;
  1188. left: 0;
  1189. box-sizing: border-box;
  1190. background-color: #ffffff;
  1191. display: flex;
  1192. flex-direction: column;
  1193. align-items: center;
  1194. justify-content: center;
  1195. .btn{
  1196. margin-bottom: 20rpx;
  1197. width: 100%;
  1198. height: 88upx;
  1199. line-height: 88upx;
  1200. text-align: center;
  1201. font-size: 34upx;
  1202. font-family: PingFang SC;
  1203. font-weight: 400;
  1204. color: #FFFFFF;
  1205. background: #FF5C03;
  1206. border-radius: 10upx;
  1207. position: relative;
  1208. .contact-btn {
  1209. position: absolute;
  1210. width:100%;
  1211. height:100%;
  1212. display: flex;
  1213. opacity: 0;
  1214. }
  1215. }
  1216. .btn1{
  1217. margin-bottom: 20rpx;
  1218. width: 100%;
  1219. height: 88upx;
  1220. line-height: 88upx;
  1221. text-align: center;
  1222. font-size: 34upx;
  1223. font-family: PingFang SC;
  1224. font-weight: 400;
  1225. color: #FF5C03;
  1226. border: 1rpx solid #FF5C03;
  1227. border-radius: 10upx;
  1228. position: relative;
  1229. .contact-btn {
  1230. position: absolute;
  1231. width:100%;
  1232. height:100%;
  1233. display: flex;
  1234. opacity: 0;
  1235. }
  1236. }
  1237. }
  1238. .pay-type{
  1239. box-sizing: border-box;
  1240. background: #FFFFFF;
  1241. border-radius: 16upx;
  1242. margin-top: 20upx;
  1243. padding: 40upx 30upx 20rpx;
  1244. display: flex;
  1245. flex-direction: column;
  1246. justify-content: space-between;
  1247. .title{
  1248. font-size: 28upx;
  1249. font-family: PingFang SC;
  1250. font-weight: 500;
  1251. color: #999999;
  1252. line-height: 1;
  1253. margin-bottom: 10upx;
  1254. }
  1255. .item{
  1256. padding: 15upx 0upx;
  1257. display: flex;
  1258. align-items: center;
  1259. justify-content: space-between;
  1260. .left{
  1261. display: flex;
  1262. align-items: center;
  1263. image{
  1264. width: 44upx;
  1265. height: 44upx;
  1266. margin-right: 20upx;
  1267. }
  1268. .text{
  1269. font-size: 30upx;
  1270. font-family: PingFang SC;
  1271. font-weight: bold;
  1272. color: #222222;
  1273. line-height: 1;
  1274. }
  1275. }
  1276. }
  1277. }
  1278. .coupon{
  1279. background-color: #fff;
  1280. border-radius: 30rpx 30rpx 0rpx 0rpx;
  1281. height: 100%;
  1282. .empty{
  1283. display: flex;
  1284. align-items: center;
  1285. justify-content: center;
  1286. height: 650rpx;
  1287. width: 100%;
  1288. image{
  1289. width: 280rpx;
  1290. height: 200rpx;
  1291. }
  1292. }
  1293. }
  1294. .coupon-box{
  1295. overflow-y: auto;
  1296. padding: 80rpx 20rpx 80rpx;
  1297. height: 650rpx;
  1298. width: 100%;
  1299. display: flex;
  1300. flex-direction: column;
  1301. align-items: flex-start;
  1302. justify-content: flex-start;
  1303. box-sizing: border-box;
  1304. .coupon-item{
  1305. width: 100%;
  1306. display: flex;
  1307. align-items: center;
  1308. justify-content: flex-start;
  1309. margin-bottom: 16rpx;
  1310. height:170rpx;
  1311. &:last-child{
  1312. margin-bottom: 0rpx;
  1313. }
  1314. .left{
  1315. color: #fff;
  1316. font-size: 36rpx;
  1317. font-weight: bold;
  1318. text-align: center;
  1319. display: flex;
  1320. flex-direction: column;
  1321. align-items: center;
  1322. justify-content: center;
  1323. position: relative;
  1324. width: 230rpx;
  1325. image{
  1326. position: absolute;
  1327. width: 230rpx;
  1328. height:170rpx;
  1329. color: #fff;
  1330. }
  1331. .num{
  1332. font-size: 40rpx;
  1333. }
  1334. .pic-num{
  1335. font-size: 20rpx;
  1336. z-index: 99;
  1337. }
  1338. }
  1339. .right{
  1340. display: flex;
  1341. flex-direction: column;
  1342. align-items: flex-start;
  1343. justify-content: flex-start;
  1344. height:170rpx;
  1345. width: calc(100% - 230rpx);
  1346. padding: 0 17rpx 0 24rpx;
  1347. background-color: #fff;
  1348. box-sizing: border-box;
  1349. .title{
  1350. width: 100%;
  1351. font-size: 0.3 * 100rpx;
  1352. color: #282828;
  1353. height: 0.93 * 100rpx;
  1354. line-height: 0.93 * 100rpx;
  1355. border-bottom: 1px solid #f0f0f0;
  1356. }
  1357. .btns{
  1358. display: flex;
  1359. align-items: center;
  1360. justify-content: space-between;
  1361. width: 100%;
  1362. font-size: 0.2 * 100rpx;
  1363. color: #999;
  1364. height: 0.76 * 100rpx;
  1365. .btn{
  1366. width: 1.36 * 100rpx;
  1367. height: 0.44 * 100rpx;
  1368. border-radius: 0.22 * 100rpx;
  1369. font-size: 0.22 * 100rpx;
  1370. color: #fff;
  1371. text-align: center;
  1372. line-height: 0.44 * 100rpx;
  1373. background-color: #FF5C03;
  1374. .gray{
  1375. background-color: #ccc;
  1376. }
  1377. }
  1378. }
  1379. }
  1380. }
  1381. }
  1382. .pay-box{
  1383. border-radius: 30rpx 30rpx 0rpx 0rpx;
  1384. padding: 10rpx;
  1385. height: 350rpx;
  1386. background-color: #fff;
  1387. width: 100%;
  1388. display:flex;
  1389. flex-direction: column;
  1390. text-align: center;
  1391. justify-content: flex-start;
  1392. .title{
  1393. padding-top:50rpx;
  1394. font-size: 36rpx;
  1395. font-weight: bold;
  1396. color: #111;
  1397. }
  1398. .pay-list{
  1399. margin-top: 50rpx;
  1400. display:flex;
  1401. text-align: center;
  1402. justify-content: center;
  1403. .pay-item{
  1404. margin:5rpx 5rpx;
  1405. padding: 20rpx 0rpx;
  1406. border-radius: 60rpx;
  1407. background-color: green;
  1408. flex: 1;
  1409. display:flex;
  1410. text-align: center;
  1411. justify-content: center;
  1412. image{
  1413. width:40rpx;
  1414. height:40rpx;
  1415. }
  1416. .name{
  1417. margin-left: 10rpx;
  1418. font-size: 28rpx;
  1419. font-weight: normal;
  1420. color: #fff;
  1421. }
  1422. }
  1423. .wx{
  1424. background-color: #09ba08;
  1425. }
  1426. .alipay{
  1427. background-color: #04a9ed;
  1428. }
  1429. }
  1430. }
  1431. </style>