onPay.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431
  1. <template>
  2. <view class="container">
  3. <view class="" style="height: 52rpx;"></view>
  4. <view class="head-block">
  5. <view class="flex-y-center head-block-top">
  6. <view class="head-block-left">
  7. <!-- <i class="iconfont icon-shouyin logo-img" :style="{color:setColor}"></i> -->
  8. <image v-if="systemInfo.thumb" :src="URL+systemInfo.thumb" class="logo-img"></image>
  9. <i v-else class="iconfont icon-shouyin logo-img" :style="{color:setColor}"></i>
  10. </view>
  11. <view class="info">
  12. <view class="title">{{systemInfo.title}}</view>
  13. </view>
  14. </view>
  15. <view class="input-box box-pack-between flex-y-center">
  16. <view class="sign">¥</view>
  17. <view class="money" v-if="money.length">{{money.join('')}}</view>
  18. <view class="placeholder" v-else>消费金额</view>
  19. </view>
  20. </view>
  21. <view class="head-content">
  22. <block v-if="systemInfo.is_vip == 1">
  23. <view style="margin-top: 0;" class="input-box-coupon box-pack-between"
  24. v-if="menber_discount.discount&&menber_discount.name">
  25. <text> 会员优惠 </text>
  26. <view class="flex-y-center">
  27. {{menber_discount.name}}专享<text class="input-box-price">{{menber_discount.discount}} </text> 折优惠
  28. </view>
  29. </view>
  30. </block>
  31. <navigator v-if="money.length" hover-class="none"
  32. :url="`/pages/use-coupon-list/use-coupon-list?total_price=+${Number(money.join(''))}&pay_index=+${pay_index}`"
  33. class="box-pack-between input-box-coupon">
  34. <text>优惠劵</text>
  35. <view class="arr-r flex-y-center" :style="coupon_id?'color:red':''">
  36. {{coupon_id?'-¥'+coupon_price:'请选择优惠劵'}}
  37. </view>
  38. </navigator>
  39. <view class="input-box-coupon box-pack-between" v-if="systemInfo.is_vip == 1">
  40. <view class="flex-y-center box-pack-between flex-grow-1">
  41. <view class="choice_pay flex-center" :style="pay_index==0?'border: 1rpx solid'+ setColor:''"
  42. :class="pay_index==0?'act':''" @click="payrll(0)">
  43. <view>
  44. <view class="flex-center">
  45. <!-- #ifdef MP-ALIPAY -->
  46. <text class="iconfont ac icon-alipay" style="color: #1296db;"></text>
  47. <view>
  48. 支付宝支付
  49. </view>
  50. <!-- #endif -->
  51. <!-- #ifdef MP-WEIXIN -->
  52. <text class="iconfont ac icon-weixinzhifu" style="color: #07c160;"></text>
  53. <view>
  54. 微信支付
  55. </view>
  56. <!-- #endif -->
  57. </view>
  58. </view>
  59. <text v-if="pay_index==0" :style="{color: setColor}"
  60. class="iconfont icon-youxiajiaogouxuan"></text>
  61. </view>
  62. <view v-if="systemInfo.is_vip == 1 && userInfo.mobile" class="choice_pay flex-center"
  63. :style="pay_index==1?'border: 1rpx solid'+ setColor:''" :class="pay_index==1?'act':''"
  64. @click="payrll(1)">
  65. <view>
  66. <view class="flex-center">
  67. <text class="iconfont ac icon-qianbaoyue" :style="{color:setColor}"></text>
  68. <view>
  69. 余额支付
  70. </view>
  71. </view>
  72. <view class="ft22">
  73. {{'剩余余额:'+menber_discount.balance}}
  74. </view>
  75. </view>
  76. <text v-if="pay_index==1" :style="{color: setColor}"
  77. class="iconfont icon-youxiajiaogouxuan"></text>
  78. </view>
  79. </view>
  80. </view>
  81. <view style="padding-top: 30rpx;" v-if=" systemInfo.is_vip==1 && userInfo.mobile && czList.length>0">
  82. <scroll-view scroll-x="true" style="white-space: nowrap;">
  83. <view class="pay-price pr" :class="index==paytype?'act':''"
  84. :style="index==paytype?'border-color:#fff;color:#fff;background-color:'+setColor:''"
  85. v-for='(item,index) of czList' :key="index" :data-id='item.id' :data-content='item.pay_price'
  86. @click="choice_pay(index)" :data-index='index'>
  87. <text class="maney"> <text class="ft22">储值</text> ¥{{Number(item.pay_price)}}</text>
  88. <view class="maney_get" :style="index==paytype?'color:#fff;':''">赠送
  89. {{item.send_price}}
  90. </view>
  91. </view>
  92. </scroll-view>
  93. </view>
  94. <view class="input-box-coupon box-pack-between" v-if="money.length">
  95. <text>支付金额</text>
  96. <view class="flex-y-center">
  97. 实付:<text
  98. class="input-box-price">¥{{(Number(money.join(''))*price_discount-coupon_price).toFixed(2)}}</text>
  99. </view>
  100. </view>
  101. <view class="input-box-top">
  102. <input type="text" @input="bindRemark" maxlength="50" placeholder="添加备注(50个字以内)" />
  103. </view>
  104. </view>
  105. <view class="keyboard-block">
  106. <view class="table-block content is-iphonex-margin">
  107. <view hover-class="nav-hover" @click="inputNum(7)" class="td">7</view>
  108. <view hover-class="nav-hover" @click="inputNum(8)" class="td">8</view>
  109. <view hover-class="nav-hover" @click="inputNum(9)" class="td">9</view>
  110. <view hover-class="nav-hover" @click="delNum()" class="td">
  111. <image src="/static/backspace_icon.png" mode="aspectFit" class="backspace-icon"></image>
  112. </view>
  113. <view hover-class="nav-hover" @click="inputNum(4)" class="td">4</view>
  114. <view hover-class="nav-hover" @click="inputNum(5)" class="td">5</view>
  115. <view hover-class="nav-hover" @click="inputNum(6)" class="td">6</view>
  116. <view hover-class="nav-hover" class="td"></view>
  117. <view hover-class="nav-hover" @click="inputNum(1)" class="td">1</view>
  118. <view hover-class="nav-hover" @click="inputNum(2)" class="td">2</view>
  119. <view hover-class="nav-hover" @click="inputNum(3)" class="td">3</view>
  120. <view hover-class="nav-hover" class="td"></view>
  121. <view hover-class="nav-hover" @click="inputNum(0)" class="td td2">0</view>
  122. <view hover-class="nav-hover" @click="inputNum('.')" class="td">.</view>
  123. <view hover-class="nav-hover" class="td"></view>
  124. <view hover-class="nav-hover" v-if="paytype!=-1 && pay_index==1" @click="czPay" class="sub-btn"
  125. :style="{'background-color':setColor}">
  126. <view>确认</view>
  127. <view>支付</view>
  128. </view>
  129. <view hover-class="nav-hover" v-else-if="systemInfo.set.is_charge == 1" @click="mdPay" class="sub-btn"
  130. :style="{'background-color':setColor}">
  131. <view>确认</view>
  132. <view>支付</view>
  133. </view>
  134. <view hover-class="nav-hover" v-else @click="onSubmit()" class="sub-btn"
  135. :style="{'background-color':setColor}">
  136. <view>确认</view>
  137. <view>支付</view>
  138. </view>
  139. </view>
  140. </view>
  141. <uni-popup ref="popup" type="center">
  142. <view class="get-phone-pop" v-if="is_pay">
  143. <view class="content-block">
  144. <view class="content flex flex-y-center flex-x-center">提示</view>
  145. </view>
  146. <view class="flex-center content-tel">
  147. <text style="min-width: 130rpx;">订单处理成功</text>
  148. </view>
  149. <navigator open-type="redirect" :url="'../paySuccess/paySuccess?order_id='+order_id"
  150. class="btm-block flex flex-nowarp flex-x-between">
  151. <view form-type="submit" class="btn sub-btn">确定</view>
  152. </navigator>
  153. </view>
  154. <audio v-if="systemInfo.set.is_pop==1" />
  155. <coupon v-if="systemInfo.set.is_pop==2" />
  156. <swiper v-if="systemInfo.set.is_pop==3" />
  157. </uni-popup>
  158. <uni-popup ref="popup2" type="bottom">
  159. <view class="No_charge_recharging">
  160. <view class="box-pack-between No_charge_header flex-center">
  161. <view class="No_charge_title"></view> 选择支付方式 <image src="/static/icon_9.png" @click="onClose" class="icon_close"></image>
  162. </view>
  163. <!-- #ifdef MP-ALIPAY -->
  164. <view class="cell flex flex-nowarp flex-y-center" @click="payrll(0)">
  165. <image src="/static/icon_8.png" mode="aspectFit" class="pay-type-icon"></image>
  166. <view class="title">支付宝支付</view>
  167. <i v-if="pay_index==0" class="iconfont icon-lujing check-box" :style='{color:setColor}'></i>
  168. <view class="rund check-box" v-else :style='{color:setColor}'></view>
  169. </view>
  170. <!-- #endif -->
  171. <!-- #ifdef MP-WEIXIN -->
  172. <view class="cell flex flex-nowarp flex-y-center" @click="payrll(0)">
  173. <image src="/static/icon_7.png" mode="aspectFit" class="pay-type-icon"></image>
  174. <view class="title">微信支付</view>
  175. <i class="iconfont icon-lujing check-box" :style='{color:setColor}' v-if="pay_index==0"></i>
  176. <view class="rund check-box" :style='{color:setColor}' v-else></view>
  177. </view>
  178. <!-- #endif -->
  179. <view v-if="systemInfo.set.is_charge == 1" class="cell flex flex-nowarp flex-y-center"
  180. @click="payrll(5)">
  181. <image src="/static/icon_cz.png" mode="aspectFit" class="pay-type-icon"></image>
  182. <view class="title">充值 <text
  183. style="font-size: 34rpx;color: red;">¥{{total_price}}</text>
  184. 免单</view>
  185. <i class="iconfont icon-lujing check-box" :style='{color:setColor}' v-if="pay_index==5"></i>
  186. <view class="rund check-box" :style='{color:setColor}' v-else></view>
  187. </view>
  188. <view v-if="systemInfo.is_vip==1&&userInfo.mobile&&menber_discount.balance"
  189. class="cell flex flex-nowarp flex-y-center" @click="payrll(1)">
  190. <image src="/static/icon_6.png" mode="aspectFit" class="pay-type-icon"></image>
  191. <view class="title">余额支付(剩余余额:{{menber_discount.balance}})</view>
  192. <i class="iconfont icon-lujing check-box" :style='{color:setColor}' v-if="pay_index==1"></i>
  193. <view class="rund check-box" :style='{color:setColor}' v-else></view>
  194. </view>
  195. <view class="No_charge_btn">
  196. <button style="line-height: 2.55555556;" @click="payMdCz" type="primary">确认支付</button>
  197. </view>
  198. </view>
  199. </uni-popup>
  200. </view>
  201. </template>
  202. <script>
  203. // import uniPopup from '@/components/uni-popup/uni-popup.vue';
  204. import audio from '../../diy/audio.vue';
  205. import swiper from '../../diy/swiper.vue';
  206. import coupon from '../../diy/coupon';
  207. import {
  208. mapState,
  209. mapMutations,
  210. mapGetters
  211. } from 'vuex'
  212. let hideLoading = true;
  213. export default {
  214. components: {
  215. // uniPopup,
  216. coupon,
  217. swiper,
  218. audio
  219. },
  220. data() {
  221. return {
  222. money: [],
  223. storeInfo: {},
  224. coupon_id: "", //修改上一页data里面的sh参数值为100
  225. coupon_price: 0,
  226. activity: '',
  227. voucherCode: '',
  228. remark: "",
  229. price_discount: 1,
  230. menber_discount: {},
  231. pay_arr: [
  232. // #ifdef MP-WEIXIN
  233. "微信支付",
  234. // #endif
  235. // #ifdef MP-ALIPAY
  236. "支付宝支付",
  237. // #endif
  238. "余额支付"
  239. ],
  240. pay_index: 0,
  241. userInfos: null,
  242. systemInfos: {},
  243. URL: getApp().globalData.URL,
  244. czList: [],
  245. paytype: -1,
  246. pay_price: 0,
  247. send_price: 0,
  248. order_id: '',
  249. is_pay: false,
  250. is_popup: 1,
  251. total_price:0, //充值免单金额
  252. pay_money:0, //支付金额
  253. cz_order_id:'', //免单充值id
  254. is_status_czailpay:false,
  255. }
  256. },
  257. computed: {
  258. ...mapState(['setColor', 'store_id', 'systemInfo', 'teen_index', 'userInfo', 'address']),
  259. dateRange() {
  260. const {
  261. store_id,
  262. userInfo,
  263. systemInfo
  264. } = this;
  265. return {
  266. store_id,
  267. userInfo,
  268. systemInfo
  269. }
  270. }
  271. },
  272. created() {
  273. this.bus.$on('send', (data) => {
  274. this.$refs.popup.close();
  275. })
  276. },
  277. onShow() {
  278. if(this.is_status_czailpay){
  279. let info = uni.getStorageSync("order_id_info_pay");
  280. if(this.pay_index == 5){
  281. this.cz_order_id = info.order_id;
  282. this.aliPay(this.pay_money);
  283. }else{
  284. this.CzpaySuccess(info);
  285. }
  286. }
  287. },
  288. onLoad(options) {
  289. uni.hideTabBar();
  290. uni.setNavigationBarColor({
  291. frontColor: '#ffffff',
  292. backgroundColor: this.setColor,
  293. })
  294. if (this.$store.state.userInfo || this.$store.state.systemInfo) {
  295. this.userInfos = this.$store.state.userInfo;
  296. this.systemInfos = this.$store.state.systemInfo;
  297. this.init();
  298. this.czlist();
  299. this.setCopy();
  300. if (this.systemInfos.set) {
  301. // console.log(this.pay_index, "this.check_index")
  302. if (this.$store.state.systemInfo.set.is_pop != 0) {
  303. let is_pop = this.$store.state.systemInfo.set.is_pop;
  304. is_pop == 2 ? this.Coupons() :
  305. is_pop == 1 ? this.homePop(1) :
  306. is_pop == 3 ? this.homePop(3) : '';
  307. }
  308. }
  309. }
  310. },
  311. watch: {
  312. "$store.getters.store_id": function(nVal) {
  313. console.log("nVal", nVal)
  314. this.setCopy();
  315. this.czlist();
  316. },
  317. "$store.getters.userInfo": function(nVal) {
  318. console.log("nVal", nVal)
  319. this.userInfos = nVal;
  320. },
  321. "$store.getters.systemInfo": function(nVal) {
  322. console.log("nVal", nVal)
  323. this.systemInfos = nVal;
  324. // this.init();
  325. uni.setNavigationBarTitle({
  326. title: nVal.title
  327. })
  328. },
  329. setColor(nVal) {
  330. uni.setNavigationBarColor({
  331. frontColor: '#ffffff',
  332. backgroundColor: nVal,
  333. })
  334. },
  335. // 弹窗校检
  336. dateRange: {
  337. handler(val) {
  338. this.init();
  339. // console.log(val, "val")
  340. if (this.is_popup == 2) {
  341. return
  342. }
  343. if (val.systemInfo.set) {
  344. this.is_popup = 2;
  345. // 是否开启弹窗
  346. if (val.systemInfo.set.is_pop == 0) {
  347. return
  348. }
  349. // 优惠劵弹窗
  350. if (val.systemInfo.set.is_pop == 2) {
  351. if (val.store_id && val.userInfo) {
  352. this.can_popup(2)
  353. }
  354. }
  355. // 语音弹窗
  356. if (val.systemInfo.set.is_pop == 1) {
  357. if (val.store_id && val.userInfo) {
  358. this.can_popup(1)
  359. }
  360. }
  361. // 轮播图弹窗
  362. if (val.systemInfo.set.is_pop == 3) {
  363. if (val.store_id && val.userInfo) {
  364. this.can_popup(3)
  365. }
  366. }
  367. }
  368. },
  369. deep: true,
  370. },
  371. },
  372. methods: {
  373. ...mapMutations(['SET_COUPON', 'SET_AUDIO', 'SET_SWIPER']),
  374. // 是否弹窗
  375. can_popup(type) {
  376. let couponList = [];
  377. this.$http.request('xcx/can_popup', {
  378. store_id: this.store_id,
  379. user_id: this.userInfos.id
  380. }, "", true, true).then(res => {
  381. // console.log(res, "can_popup")
  382. if (res.code === '200') {
  383. type == 1 ? this.homePop(1) : type == 2 ? this.Coupons() : type == 3 ? this
  384. .homePop(3) :
  385. '';
  386. }
  387. })
  388. },
  389. Coupons() {
  390. let couponList = [];
  391. this.$http.request('xcx/LqCoupons_lists', {
  392. store_id: this.store_id,
  393. user_id: this.userInfos.id
  394. }, "", true, true).then(res => {
  395. for (let s of res.data) {
  396. s.checked = false;
  397. s.state = 1;
  398. if (s.is_index == 1) {
  399. couponList.push(s);
  400. this.SET_COUPON(couponList);
  401. if (couponList.length > 0) {
  402. this.$refs.popup.open();
  403. this.popup_log();
  404. }
  405. }
  406. };
  407. })
  408. },
  409. // 获取语音||轮播图
  410. homePop(type) {
  411. this.$http.request('xcx/home_pop_up', {
  412. store_id: this.store_id,
  413. user_id: this.userInfos.id,
  414. }, "", true, true).then(res => {
  415. if (res.code === '200') {
  416. let arr = res.data;
  417. if (type == 1) {
  418. for (let s of arr) {
  419. s.is_check = 1;
  420. s.pic = getApp().globalData.URL + this.systemInfos.thumb;
  421. s.content = getApp().globalData.URL + s.src;
  422. }
  423. this.SET_AUDIO(arr);
  424. }
  425. if (type == 3) {
  426. this.SET_SWIPER(arr);
  427. }
  428. if (arr.length > 0) {
  429. this.$refs.popup.open();
  430. this.popup_log();
  431. }
  432. }
  433. })
  434. },
  435. popup_log() {
  436. this.$http.request('xcx/popup_log', {
  437. store_id: this.store_id,
  438. user_id: this.userInfos.id,
  439. }, "", true, true).then(res => {
  440. if (res.code === 200) {}
  441. })
  442. },
  443. init() {
  444. // console.log("init", this.userInfos)
  445. if (this.userInfos && this.systemInfos) {
  446. if (this.systemInfos.set) {
  447. this.pay_index = (this.systemInfos.set.is_yuer == 1 && this.systemInfos.is_vip == 1 && this
  448. .userInfos.mobile) ? 1 : this.pay_index;
  449. }
  450. this.menber_pay();
  451. }
  452. },
  453. setCopy() {
  454. if (getApp().globalData.isApp) {
  455. this.$http.request('xcx/funeng', {
  456. store_id: this.store_id,
  457. }, "", "", hideLoading).then(res => {
  458. let way_power = res.data.way_power;
  459. let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  460. uni.showLoading({
  461. title:'正在加载',
  462. mask:true
  463. })
  464. uni.setClipboardData({
  465. data: content,
  466. success: function(r) {
  467. getApp().globalData.isApp = false
  468. console.log('赋能成功', r);
  469. },
  470. complete:() =>{
  471. uni.hideLoading();
  472. uni.hideToast();
  473. }
  474. });
  475. })
  476. }
  477. },
  478. czlist() {
  479. this.$http.request('xcx/czlist', {
  480. store_id: this.store_id
  481. }).then(res => {
  482. console.log(res)
  483. this.czList = res.data;
  484. })
  485. },
  486. choice_pay(e) {
  487. if (this.paytype == e) {
  488. this.paytype = -1
  489. return
  490. }
  491. if (this.pay_index == 0) {
  492. return
  493. }
  494. this.paytype = e;
  495. this.pay_price = this.czList[e].pay_price;
  496. this.send_price = this.czList[e].send_price;
  497. },
  498. // 免单充值
  499. mdPay(){
  500. // 重复点击
  501. if (!this.clickThrottle()) {
  502. return
  503. }
  504. if (this.money.length <= 0) {
  505. uni.showToast({
  506. title: '请输入消费金额',
  507. icon: 'none'
  508. })
  509. return false
  510. }
  511. if (this.money.length) {
  512. let money = Number(this.money.join('')),
  513. pirce = 1;
  514. if (this.price_discount > 0) {
  515. pirce = this.price_discount;
  516. }
  517. money = (money * pirce - this.coupon_price).toFixed(2);
  518. this.pay_money = Number(money);
  519. this.total_price = (Number(this.systemInfo.set.charge_num) * Number(money)).toFixed(2);
  520. }
  521. this.$refs.popup2.open();
  522. },
  523. payMdCz(){
  524. if(this.pay_index==5){
  525. this.pay_price = this.total_price;
  526. this.czPay();
  527. }else{
  528. this.onSubmit();
  529. }
  530. },
  531. // 余额充值
  532. czPay(e) {
  533. // 重复点击
  534. if (!this.clickThrottle()) {
  535. return
  536. }
  537. if (this.money.length <= 0) {
  538. uni.showToast({
  539. title: '请输入消费金额',
  540. icon: 'none'
  541. })
  542. return false
  543. }
  544. // #ifdef MP-WEIXIN
  545. var url = 'xcxweixinpay/czorder',
  546. user_id = this.userInfos.id;
  547. // #endif
  548. // #ifdef MP-ALIPAY
  549. var url = 'xcxpay/czorder',
  550. user_id = this.userInfos.user_id;
  551. // #endif
  552. uni.showLoading({
  553. title:'加载中',
  554. mask:true
  555. })
  556. this.$http.request(url, {
  557. store_id: this.store_id,
  558. user_id: user_id,
  559. pay_price: this.pay_price,
  560. send_price: this.paytype > -1 ? this.send_price : 0,
  561. }).then(res => {
  562. uni.hideLoading();
  563. console.log(res)
  564. // this.list = res.data;
  565. // #ifdef MP-ALIPAY
  566. this.czAliPay(res.data)
  567. // #endif
  568. // #ifdef MP-WEIXIN
  569. this.czWxPay(res.data)
  570. // #endif
  571. }).catch((err)=>{
  572. uni.hideLoading();
  573. })
  574. },
  575. //支付宝支付
  576. czAliPay(info) {
  577. // 防止支付完成不走回调
  578. this.is_status_czailpay = true;
  579. uni.setStorageSync("order_id_info_pay",info);
  580. my.tradePay({
  581. // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号trade_no
  582. tradeNO: info.trade_no,
  583. success: (res) => {
  584. console.log(res)
  585. if (res.resultCode == 9000) {
  586. if(this.pay_index == 5){
  587. this.cz_order_id = info.order_id;
  588. this.aliPay(this.pay_money);
  589. }else{
  590. this.CzpaySuccess(info);
  591. }
  592. } else if (res.resultCode == 8000 || res.resultCode == 6004) {
  593. uni.showToast({
  594. title: "支付结果未知,请核对",
  595. icon: "none"
  596. })
  597. }
  598. },
  599. fail: (res) => {
  600. uni.showToast({
  601. title: '支付失败',
  602. icon: 'none'
  603. })
  604. }
  605. });
  606. },
  607. CzpaySuccess(info){
  608. this.is_status_czailpay = false;
  609. this.$http.request('xcxpay/CzAliOrderInfo', {
  610. out_trade_no: info.out_trade_no,
  611. store_id: this.store_id,
  612. }).then(res => {
  613. console.log(res)
  614. this.Czdiscount();
  615. })
  616. },
  617. czWxPay(info) {
  618. wx.requestPayment({
  619. timeStamp: info.timeStamp,
  620. nonceStr: info.nonceStr,
  621. package: info.package,
  622. signType: info.signType,
  623. paySign: info.paySign,
  624. success: (res) => {
  625. if(this.pay_index == 5){
  626. this.cz_order_id = info.order_id;
  627. this.wxPay(this.pay_money);
  628. }else{
  629. this.Czdiscount();
  630. }
  631. },
  632. fail: (res) => {
  633. uni.showToast({
  634. title: '支付失败',
  635. icon: 'none'
  636. })
  637. },
  638. complete: (res) => {
  639. console.log(res)
  640. }
  641. })
  642. },
  643. Czdiscount() {
  644. this.$http.request('xcx/discount', {
  645. user_id: this.userInfos.id,
  646. store_id: this.store_id,
  647. }, "", "", hideLoading).then(res => {
  648. console.log(res)
  649. if (Number(res.data.balance) < Number(this.money)) {
  650. uni.showToast({
  651. title: "您的余额不足,请充值后使用",
  652. icon: "none"
  653. })
  654. return
  655. }
  656. this.onSubmit();
  657. }).catch(err => {
  658. console.log(err)
  659. })
  660. },
  661. // 会员充值end
  662. onClose(){
  663. this.$refs.popup2.close();
  664. },
  665. // 选择支付方式
  666. payrll(index) {
  667. this.pay_index = index;
  668. if (this.pay_index == 0 ||this.pay_index == 5) {
  669. this.paytype = -1;
  670. }
  671. let money = Number(this.money.join(''));
  672. // 支付宝支付商家劵会导致无法使用,余额不能使用
  673. if (this.voucherCode && index != 0 ) {
  674. uni.showModal({
  675. title: "提示",
  676. content: "优惠劵状态发生变化,请重新选择优惠劵",
  677. showCancel: false,
  678. cancelText: '取消',
  679. confirmText: '重新选择',
  680. success: res => {
  681. if (res.confirm) {
  682. this.coupon_id = ""; //修改上一页data里面的sh参数值为100
  683. this.coupon_price = 0;
  684. this.activity = '';
  685. this.voucherCode = '';
  686. uni.navigateTo({
  687. url: `../use-coupon-list/use-coupon-list?total_price=${money}&pay_index=${index}`
  688. })
  689. }
  690. },
  691. fail: () => {},
  692. complete: () => {}
  693. });
  694. }
  695. },
  696. menber_pay() {
  697. if (this.systemInfos.is_vip != 1) {
  698. return
  699. }
  700. this.$http.request('xcx/discount', {
  701. user_id: this.userInfos.id,
  702. store_id: this.store_id,
  703. }, "", "", hideLoading).then(res => {
  704. console.log(res)
  705. this.menber_discount = res.data;
  706. if (this.userInfos.mobile && res.data.discount) {
  707. this.price_discount = Number(res.data.discount) * 0.1;
  708. }
  709. }).catch(err => {
  710. console.log(err)
  711. })
  712. },
  713. inputNum(num) {
  714. if (num == '.') {
  715. if (this.money.indexOf('.') != -1) {
  716. return false
  717. }
  718. if (this.money.length == 0) {
  719. return false
  720. }
  721. }
  722. if (this.money.indexOf('.') == -1) {
  723. if (this.money.length == 5 && num != '.') {
  724. return false
  725. }
  726. } else {
  727. if (this.money.indexOf('.') == this.money.length - 3) {
  728. return false
  729. }
  730. }
  731. this.money.push(num)
  732. },
  733. bindRemark(e) {
  734. this.remark = e.detail.value;
  735. },
  736. delNum() {
  737. if (this.money.length) {
  738. this.money.pop()
  739. }
  740. },
  741. onSubmit() {
  742. // 重复点击
  743. if (!this.clickThrottle()) {
  744. return
  745. }
  746. let subscribe = uni.getStorageSync('balance_subscribe');
  747. this.cz_order_id ='';
  748. if (this.money.length) {
  749. let money = Number(this.money.join('')),
  750. pirce = 1;
  751. if (this.price_discount > 0) {
  752. pirce = this.price_discount;
  753. }
  754. money = (money * pirce - this.coupon_price).toFixed(2);
  755. if (money <= 0) {
  756. uni.showToast({
  757. title: '请正确输入消费金额',
  758. icon: 'none'
  759. })
  760. return false
  761. } else {
  762. let that = this;
  763. console.log(subscribe.alipay_pay_tid, subscribe.alipay_balance, that.systemInfos.alipay_appid,
  764. "模板id")
  765. // #ifdef MP-ALIPAY
  766. if (this.pay_index == 1) {
  767. // 调用方法,唤起订阅组件
  768. my.requestSubscribeMessage({
  769. thirdTypeAppId: that.systemInfos.alipay_appid, // 可选,isv接入场景下必填
  770. entityIds: [subscribe.alipay_balance], // 模板id列表,最多3个
  771. // 接收结果的回调方法
  772. complete: (r) => {
  773. console.log('订阅回调', r);
  774. that.yuer_pay(money)
  775. },
  776. });
  777. } else {
  778. let entityIds = [subscribe.alipay_pay_tid];
  779. // 调用方法,唤起订阅组件
  780. my.requestSubscribeMessage({
  781. thirdTypeAppId: that.systemInfos.alipay_appid, // 可选,isv接入场景下必填
  782. entityIds: entityIds, // 模板id列表,最多3个
  783. // 接收结果的回调方法
  784. complete: (r) => {
  785. console.log('订阅回调', r);
  786. that.aliPay(money)
  787. },
  788. });
  789. }
  790. // #endif
  791. // #ifdef MP-WEIXIN
  792. if (this.pay_index == 1) {
  793. uni.requestSubscribeMessage({
  794. tmplIds: [subscribe.balance_tid, subscribe.jf_tid],
  795. success: (r) => {
  796. console.log(r, "success")
  797. },
  798. complete: (r) => {
  799. console.log(r, "complete")
  800. this.yuer_pay(money)
  801. }
  802. })
  803. } else {
  804. let tmplIds = [subscribe.pay_tid, subscribe.jf_tid];
  805. uni.requestSubscribeMessage({
  806. tmplIds: tmplIds,
  807. success: (r) => {
  808. console.log(r, "success")
  809. },
  810. complete: (r) => {
  811. console.log(r, "complete")
  812. this.wxPay(money)
  813. }
  814. })
  815. }
  816. // #endif
  817. }
  818. } else {
  819. uni.showToast({
  820. title: '请输入消费金额',
  821. icon: 'none'
  822. })
  823. return false
  824. }
  825. },
  826. AddIntegral(order_id) {
  827. this.$http.request('xcx/AddIntegral', {
  828. order_id,
  829. }).then(res => {
  830. })
  831. },
  832. //支付宝支付
  833. aliPay(money) {
  834. uni.showLoading({
  835. title:'加载中',
  836. mask:true
  837. })
  838. this.$http.request('Xcxpay/smAliorderNo', {
  839. user_id: this.userInfos.user_id,
  840. store_id: this.store_id,
  841. money,
  842. pay_price: money,
  843. total_price: Number(money) + Number(this.coupon_price),
  844. coupon_id: this.coupon_id,
  845. coupon_price: this.coupon_price,
  846. activity: this.activity, //商家优惠劵金额
  847. voucherCode: this.voucherCode, //商家劵码
  848. remark: this.remark,
  849. pay_type: 2,
  850. czorder_id:this.cz_order_id||''
  851. }, "", "", hideLoading).then(rex => {
  852. uni.hideLoading();
  853. this.is_status_czailpay = false;
  854. let out_trade_no = rex.data.out_trade_no;
  855. // 免单充值跳转
  856. if(this.pay_index == 5){
  857. uni.showModal({
  858. content: '支付成功',
  859. showCancel: false,
  860. success: r => {
  861. this.AddIntegral(rex.data);
  862. uni.redirectTo({
  863. url: '/pages/paySuccess/paySuccess?order_id=' +
  864. rex.data
  865. })
  866. }
  867. })
  868. return
  869. }
  870. my.tradePay({
  871. // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号trade_no
  872. tradeNO: rex.data.trade_no,
  873. success: (res) => {
  874. console.log(res)
  875. if (res.resultCode == 9000) {
  876. this.AddIntegral(rex.data.order_id);
  877. this.is_pay = true;
  878. this.$refs.popup.open();
  879. } else if (res.resultCode == 8000 || res.resultCode == 6004) {
  880. my.alert({
  881. content: "支付结果未知,请核对",
  882. showCancle: false,
  883. success: () => {
  884. uni.switchTab({
  885. url: '/pages/index/index'
  886. })
  887. }
  888. });
  889. }
  890. },
  891. fail: (res) => {
  892. my.alert({
  893. content: JSON.stringify(res),
  894. });
  895. }
  896. });
  897. }).catch(err => {
  898. uni.hideLoading();
  899. console.log(err)
  900. })
  901. },
  902. wxPay(money) {
  903. uni.showLoading({
  904. title:'加载中',
  905. mask:true
  906. })
  907. this.$http.request('Xcxweixinpay/smAliorderNo', {
  908. user_id: this.userInfos.id,
  909. // money,
  910. pay_price: money,
  911. total_price: Number(money) + Number(this.coupon_price),
  912. store_id: this.store_id,
  913. coupon_id: this.coupon_id,
  914. coupon_price: this.coupon_price,
  915. remark: this.remark,
  916. pay_type: 1,
  917. czorder_id:this.cz_order_id || '',
  918. }).then(res => {
  919. uni.hideLoading();
  920. if(this.pay_index == 5){
  921. uni.showModal({
  922. content: '支付成功',
  923. showCancel: false,
  924. success: r => {
  925. uni.redirectTo({
  926. url: '/pages/paySuccess/paySuccess?order_id=' +
  927. res.data
  928. })
  929. }
  930. })
  931. return
  932. }
  933. wx.requestPayment({
  934. timeStamp: res.data.timeStamp,
  935. nonceStr: res.data.nonceStr,
  936. package: res.data.package,
  937. signType: res.data.signType,
  938. paySign: res.data.paySign,
  939. success: (r) => {
  940. this.AddIntegral(res.data.order_id);
  941. uni.showModal({
  942. content: '支付成功',
  943. showCancel: false,
  944. success: r => {
  945. uni.redirectTo({
  946. url: '/pages/paySuccess/paySuccess?order_id=' +
  947. res.data.order_id
  948. })
  949. }
  950. })
  951. },
  952. fail: (res) => {
  953. uni.showToast({
  954. title: '支付失败',
  955. icon: 'none'
  956. })
  957. }
  958. })
  959. }).catch(err => {
  960. uni.hideLoading();
  961. console.log(err)
  962. })
  963. },
  964. yuer_pay(money) {
  965. uni.showLoading({
  966. title:'加载中',
  967. mask:true
  968. })
  969. this.$http.request('xcx/hlep_yuer_pay', {
  970. user_id: this.userInfos.id,
  971. pay_price: money,
  972. total_price: Number(money) + Number(this.coupon_price),
  973. store_id: this.store_id,
  974. coupon_id: this.coupon_id,
  975. coupon_price: this.coupon_price,
  976. remark: this.remark,
  977. pay_type: 3,
  978. }).then(res => {
  979. uni.hideLoading();
  980. console.log(res)
  981. this.yuer_pay_order(res.data);
  982. }).catch((res) => {
  983. uni.hideLoading();
  984. uni.showToast({
  985. title: '支付失败',
  986. icon: 'none'
  987. })
  988. })
  989. },
  990. // 余额支付
  991. yuer_pay_order(order_id) {
  992. // #ifdef MP-WEIXIN
  993. var is_type = 1;
  994. // #endif
  995. // #ifdef MP-ALIPAY
  996. var is_type = 2;
  997. // #endif
  998. this.$http.request('xcx/yuer_pay', {
  999. order_id,
  1000. is_type,
  1001. }).then(res => {
  1002. this.AddIntegral(order_id);
  1003. uni.showModal({
  1004. content: '支付成功',
  1005. showCancel: false,
  1006. success: r => {
  1007. uni.redirectTo({
  1008. url: '/pages/paySuccess/paySuccess?order_id=' + order_id
  1009. })
  1010. }
  1011. })
  1012. }).catch(err => {})
  1013. }
  1014. }
  1015. }
  1016. </script>
  1017. <style lang="scss">
  1018. page {
  1019. background-color: #eee;
  1020. }
  1021. .No_charge_recharging {
  1022. width: 100%;
  1023. background: #FFFFFF;
  1024. height: 700rpx;
  1025. padding: 0 20rpx;
  1026. position: relative;
  1027. }
  1028. .No_charge_header{
  1029. height: 100rpx;
  1030. font-size: 32rpx;
  1031. }
  1032. .No_charge_title{
  1033. width: 50rpx;
  1034. }
  1035. .No_charge_recharging .icon_close{
  1036. width: 45rpx;
  1037. height: 45rpx;
  1038. }
  1039. .No_charge_recharging .cell {
  1040. padding: 30rpx 0;
  1041. }
  1042. .No_charge_recharging .pay-type-icon {
  1043. display: block;
  1044. flex: none;
  1045. width: 60rpx;
  1046. height: 60rpx;
  1047. margin-right: 10rpx;
  1048. }
  1049. .No_charge_recharging .cell .title {
  1050. font-size: 30rpx;
  1051. flex: none;
  1052. }
  1053. .No_charge_recharging .cell .desc {
  1054. font-size: 28rpx;
  1055. color: #bbb;
  1056. padding-left: 30rpx;
  1057. word-break: break-all;
  1058. }
  1059. .No_charge_recharging .cell .desc::after {
  1060. border-color: #bbb #bbb transparent transparent;
  1061. }
  1062. .No_charge_recharging .rund {
  1063. width: 32rpx;
  1064. height: 32rpx;
  1065. border: 1rpx solid #ccc;
  1066. border-radius: 100rpx;
  1067. }
  1068. .No_charge_recharging .check-box {
  1069. margin-left: auto;
  1070. flex: none;
  1071. font-size: 32rpx;
  1072. color: $theme-color;
  1073. }
  1074. .No_charge_btn{
  1075. position: absolute;
  1076. bottom: 20rpx;
  1077. left: 0;
  1078. width: 100%;
  1079. }
  1080. .No_charge_btn button{
  1081. width: 90%;
  1082. margin: 0 auto;
  1083. }
  1084. // 充值完成
  1085. .pay-price {
  1086. display: inline-block;
  1087. border: 1rpx solid #ccc;
  1088. text-align: center;
  1089. padding: 20rpx 30rpx;
  1090. border-radius: 8rpx;
  1091. margin: 0rpx 20rpx 0 0;
  1092. overflow: hidden;
  1093. }
  1094. .maney {
  1095. font-size: 32rpx;
  1096. }
  1097. .maney_get {
  1098. font-size: 24rpx;
  1099. color: #999;
  1100. }
  1101. .pay-price .act .maney_get {
  1102. color: #FFFFFF;
  1103. }
  1104. // 充值结束
  1105. .choice_pay {
  1106. width: 300rpx;
  1107. height: 100rpx;
  1108. background: #ffffff;
  1109. border: 1rpx solid rgba(0, 0, 0, 0.10);
  1110. position: relative;
  1111. border-radius: 6rpx;
  1112. }
  1113. .choice_pay.act {
  1114. border: 1rpx solid #FC8C04;
  1115. }
  1116. .choice_pay .ac {
  1117. margin-right: 6rpx;
  1118. }
  1119. .icon-youxiajiaogouxuan {
  1120. position: absolute;
  1121. right: 0;
  1122. bottom: 40rpx;
  1123. color: #000;
  1124. font-size: 40rpx;
  1125. height: 0;
  1126. }
  1127. .is-iphonex-margin {
  1128. padding-bottom: constant(safe-area-inset-bottom);
  1129. /*兼容 IOS>11.2*/
  1130. padding-bottom: env(safe-area-inset-bottom);
  1131. }
  1132. .container .input-box-top {
  1133. margin-top: 30rpx;
  1134. font-size: 26rpx;
  1135. color: #999;
  1136. padding: 20rpx 15rpx;
  1137. background: #f6f7f8;
  1138. }
  1139. .container .input-box-top input {
  1140. width: 100%;
  1141. font-size: 28rpx;
  1142. background: none;
  1143. }
  1144. .input-box-coupon {
  1145. font-size: 28rpx;
  1146. margin-top: 30rpx;
  1147. }
  1148. .input-box-price {
  1149. font-size: 32rpx;
  1150. color: red;
  1151. }
  1152. .head-block {
  1153. width: 690rpx;
  1154. margin: 0 auto;
  1155. background-color: #FFFFFF;
  1156. border-radius: 14rpx;
  1157. box-shadow: 0px 3px 30px 0px rgba(167, 177, 195, 0.06);
  1158. padding: 22rpx 30rpx 40rpx 30rpx;
  1159. // margin-top: 72rpx;
  1160. }
  1161. .head-block-left {
  1162. position: relative;
  1163. width: 110rpx;
  1164. margin-right: 20rpx;
  1165. }
  1166. .head-block .logo-img {
  1167. display: block;
  1168. font-size: 100rpx;
  1169. color: $theme-color;
  1170. flex: none;
  1171. margin-right: 18rpx;
  1172. position: absolute;
  1173. top: -62rpx;
  1174. width: 110rpx;
  1175. height: 110rpx;
  1176. border-radius: 10rpx;
  1177. }
  1178. .head-block .title {
  1179. font-size: 34rpx;
  1180. }
  1181. .input-box {
  1182. height: 110rpx;
  1183. opacity: 1;
  1184. background: #f6f7f8;
  1185. border-radius: 14rpx;
  1186. margin: 0 auto;
  1187. box-sizing: border-box;
  1188. padding: 0 20rpx;
  1189. font-size: 34rpx;
  1190. color: #333;
  1191. margin-top: 40rpx;
  1192. }
  1193. .input-box .sign {
  1194. margin-right: 10rpx;
  1195. font-size: 56rpx;
  1196. }
  1197. .input-box .placeholder {
  1198. color: #bbb;
  1199. }
  1200. .keyboard-block {
  1201. height: 40vh;
  1202. }
  1203. .head-content {
  1204. width: 690rpx;
  1205. opacity: 1;
  1206. background: #ffffff;
  1207. border-radius: 14rpx;
  1208. margin: 0 auto;
  1209. box-shadow: 0px 3rpx 30rpx 0px rgba(167, 177, 195, 0.06);
  1210. padding: 30rpx 30rpx 40rpx 30rpx;
  1211. margin-top: 40rpx;
  1212. }
  1213. .table-block {
  1214. display: table;
  1215. width: 100%;
  1216. height: 40vh;
  1217. background-color: #fff;
  1218. position: fixed;
  1219. left: 0;
  1220. bottom: 0;
  1221. bottom: constant(safe-area-inset-bottom);
  1222. /*兼容 IOS>11.2*/
  1223. bottom: env(safe-area-inset-bottom);
  1224. display: flex;
  1225. flex-flow: row wrap;
  1226. z-index: 99;
  1227. }
  1228. .table-block .td {
  1229. flex: none;
  1230. display: flex;
  1231. justify-content: center;
  1232. align-items: center;
  1233. border-top: 1rpx solid #ccc;
  1234. border-right: 1rpx solid #ccc;
  1235. width: 25vw;
  1236. height: 10vh;
  1237. line-height: 10vh;
  1238. box-sizing: border-box;
  1239. text-align: center;
  1240. vertical-align: middle;
  1241. font-size: 40rpx;
  1242. font-weight: bold;
  1243. color: #555;
  1244. }
  1245. .table-block .td2 {
  1246. width: 50vw;
  1247. }
  1248. .table-block .td .backspace-icon {
  1249. display: block;
  1250. width: 90rpx;
  1251. height: 90rpx;
  1252. }
  1253. .table-block .sub-btn {
  1254. width: 25vw;
  1255. height: 30vh;
  1256. box-sizing: border-box;
  1257. border-top: 1rpx solid #ccc;
  1258. // border-right: 1rpx solid #ccc;
  1259. background-color: $theme-color;
  1260. font-size: 40rpx;
  1261. font-weight: bold;
  1262. color: #fff;
  1263. display: flex;
  1264. flex-flow: column nowrap;
  1265. justify-content: center;
  1266. align-items: center;
  1267. position: absolute;
  1268. right: 0;
  1269. bottom: 0
  1270. }
  1271. .nav-hover {
  1272. padding-top: 10rpx;
  1273. }
  1274. .get-phone-pop {
  1275. /* 成为会员 */
  1276. width: 550rpx;
  1277. background-color: #fff;
  1278. border-radius: 14rpx;
  1279. overflow: hidden;
  1280. }
  1281. .code-btn {
  1282. flex: none;
  1283. width: 170rpx;
  1284. height: 60rpx;
  1285. border-radius: 30rpx;
  1286. background-color: #3387FF;
  1287. text-align: center;
  1288. line-height: 60rpx;
  1289. color: #fff;
  1290. font-size: 24rpx;
  1291. }
  1292. .get-phone-pop .content {
  1293. // height: 180rpx;
  1294. text-align: center;
  1295. font-size: 35rpx;
  1296. color: #000;
  1297. // line-height: 60rpx;
  1298. padding: 30rpx 0;
  1299. padding-bottom: 0;
  1300. }
  1301. .content-tel {
  1302. text-align: center;
  1303. padding: 30rpx 0;
  1304. }
  1305. .get-phone-pop .btm-block {
  1306. width: 100%;
  1307. height: 100rpx;
  1308. border-top: 1rpx solid #eef0ef;
  1309. font-size: 28rpx;
  1310. }
  1311. .get-phone-pop .btm-block .btn {
  1312. height: 100rpx;
  1313. box-sizing: border-box;
  1314. text-align: center;
  1315. line-height: 100rpx;
  1316. color: #010101;
  1317. font-weight: bold;
  1318. padding: 0;
  1319. margin: 0;
  1320. border: none;
  1321. border-radius: 0;
  1322. background-color: #fff;
  1323. // font-size: 35rpx;
  1324. margin: 0 auto;
  1325. }
  1326. </style>