createOrderT.vue 25 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013
  1. <template>
  2. <view class="padding-t-30">
  3. <view class="qrimg">
  4. <tki-qrcode :cid="ciddk" ref="qrcodet" :val="valdk" :size="size" :unit="unit" :background="background"
  5. :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconSize" :lv="lv" :onval="onval"
  6. :showLoading="showLoading" :loadMake="loadMake" :usingComponents="usingComponents" @result="qrRdk" />
  7. <canvas :style="{ width:cw + 'rpx', height: ch+'rpx',}" canvas-id="myCanvass" id="myCanvass"
  8. class="hb"></canvas>
  9. </view>
  10. <!-- 地址 -->
  11. <navigator url="" class="address-section">
  12. <view class="order-content" v-if="userInfo.store_id">
  13. <view class="addAddress">
  14. <text class="iconfont iconaddition"></text>
  15. <text>推荐渠道</text>
  16. </view>
  17. </view>
  18. <view class="order-content" v-else>
  19. <view class="cen">
  20. <view class="top">
  21. <text class="name">{{ shopDetail.name }}</text>
  22. <text class="mobile">{{ shopDetail.phone }}</text>
  23. </view>
  24. <text
  25. class="address flex">{{ shopDetail.address.split(',')[0] + shopDetail.address.split(',')[1] }}{{ shopDetail.name }}</text>
  26. </view>
  27. <text class="iconfont iconenter"></text>
  28. </view>
  29. </navigator>
  30. <view class="goodsList">
  31. <view class="goods-section" v-for="(ls, ind) in shopList" :key="ind">
  32. <!-- 商品列表 -->
  33. <view class="g-item">
  34. <image :src="ls.productInfo.image"></image>
  35. <view class="right">
  36. <text class="title clamp">{{ ls.productInfo.store_name }}</text>
  37. <text class="spec">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.suk : '默认' }}</text>
  38. <view class="price-box">
  39. <text
  40. class="price">¥{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.price : ls.productInfo.price }}</text>
  41. <text class="number">{{ 'x ' + ls.cart_num + (ls.productInfo.unit_name || '') }}</text>
  42. <!-- <view class="number">
  43. <uni-number-box class="step" :value="lss.number" :index="indx" @eventChange="numberChange"></uni-number-box>
  44. </view> -->
  45. </view>
  46. <view class="serverSet" v-if="ls.day>0">
  47. (<text>服务费:{{ls.day_deducted}}</text>
  48. <text class="margin-l-10">服务天数:{{ls.day}}天</text>)
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <!-- 金额明细 -->
  55. <view class="yt-list">
  56. <!-- <view class="yt-list-cell b-b">
  57. <text class="cell-tit clamp">运费</text>
  58. <text class="cell-tip disabled">{{ Postage }}</text>
  59. </view> -->
  60. <view class="yt-list-cell b-b" v-if="deposit">
  61. <text class="cell-tit clamp">押金</text>
  62. <text class="cell-tip disabled">{{ deposit }}</text>
  63. </view>
  64. <view class="yt-list-cell b-b">
  65. <text class="cell-tit clamp">备注</text>
  66. <input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
  67. </view>
  68. <view class="yt-list-cell b-b" @click="userQxq()" >
  69. <view class="cell-tit flex" >
  70. <image class="orderIcon" src="../../static/icon/qxq.png" mode="widthFix"></image>
  71. <text class="margin-l-10">使用骑行券抵扣(可用骑行券({{userInfo.certificate}})</text>
  72. </view>
  73. <image class="checked" v-if="isqxq" src="../../static/icon/addressIconXz.png" mode="widthFix">
  74. </image>
  75. <view v-else class="noChecked"></view>
  76. </view>
  77. </view>
  78. <view class="yt-list">
  79. <view class="yt-list-cell b-b" @click="choosePayType('pxz')">
  80. <view class="cell-tit flex">
  81. <image class="orderIcon" src="../../static/icon/zqdk.png" mode="widthFix"></image>
  82. <text class="margin-l-10">使用代扣</text>
  83. </view>
  84. <image class="checked" v-if="payType=='pxz'" src="../../static/icon/addressIconXz.png"
  85. mode="widthFix"></image>
  86. <view v-else class="noChecked"></view>
  87. </view>
  88. <view class="yt-list-cell b-b" v-if="fx" @click="choosePayType('weixin')">
  89. <view class="cell-tit flex">
  90. <image class="orderIcon" src="../../static/icon/orderWx.png" mode="widthFix"></image>
  91. <text class="margin-l-10">微信支付</text>
  92. </view>
  93. <image class="checked" v-if="payType=='weixin'" src="../../static/icon/addressIconXz.png"
  94. mode="widthFix"></image>
  95. <view v-else class="noChecked"></view>
  96. </view>
  97. <!-- #ifdef APP-PLUS -->
  98. <view class="yt-list-cell b-b" @click="choosePayType('ali')">
  99. <view class="cell-tit flex">
  100. <image class="orderIcon" src="../../static/icon/orderAli.png" mode="widthFix"></image>
  101. <text class="margin-l-10">支付宝</text>
  102. </view>
  103. <image class="checked" v-if="payType=='ali'" src="../../static/icon/addressIconXz.png" mode="widthFix">
  104. </image>
  105. <view v-else class="noChecked"></view>
  106. </view>
  107. <!-- #endif -->
  108. <view class="yt-list-cell b-b" @click="choosePayType('yue')">
  109. <view class="cell-tit flex">
  110. <image class="orderIcon" src="../../static/icon/ye.png" mode="widthFix"></image>
  111. <text class="margin-l-10">余额({{now_money}})</text>
  112. </view>
  113. <image class="checked" v-if="payType=='yue'" src="../../static/icon/addressIconXz.png" mode="widthFix">
  114. </image>
  115. <view v-else class="noChecked"></view>
  116. </view>
  117. </view>
  118. <view class="myj-wrap" v-if="dkQrcodeUrl">
  119. <view class="ewm-wrap">
  120. <!-- <canvas :style="{ width:cw + 'rpx', height: ch+'rpx',}" canvas-id="myCanvass" id="myCanvass"
  121. class="hb"></canvas> -->
  122. <image :src="dkQrcodeUrl" mode="" :style="{ width:cw + 'rpx', height: ch+'rpx',}"></image>
  123. </view>
  124. <view class="bcewm" @click="saveShareQrcode('dkQrcodeUrl')">
  125. 保存二维码
  126. </view>
  127. </view>
  128. <!-- 底部 -->
  129. <view class="footer" v-show="!dkQrcodeUrl">
  130. <view class="price-content">
  131. <text>实付款</text>
  132. <text class="price-tip">¥</text>
  133. <text class="price">{{ payPrice }}</text>
  134. </view>
  135. <text class="submit" :class="{submitNo:payLoding}" @click="payLoding?'':submit()">{{payType == 'pxz'? '生成二维码': '提交订单'}}</text>
  136. </view>
  137. </view>
  138. </template>
  139. <script>
  140. import {loadIndexs,createSignFLow} from '@/api/index.js'
  141. import {
  142. mapState
  143. } from 'vuex';
  144. import {
  145. confirm,
  146. computedOrderkey,
  147. createOrderkey,
  148. orderPay
  149. } from '@/api/order.js';
  150. import {
  151. getUserInfo
  152. } from '@/api/user.js';
  153. // #ifdef H5
  154. import weixinObj from "@/plugin/jweixin-module/index.js";
  155. // #endif
  156. export default {
  157. data() {
  158. return {
  159. isqxq: false,//是否使用骑行券
  160. ewmw: 300, //二维码相对宽度
  161. cw: 702, //画布相对宽度
  162. ch: 600, //画布相对高度
  163. dkQrcodeUrl: '',
  164. canvasW: '', //画布宽度
  165. canvasH: '', //画布高度
  166. ewmImg: '', //二维码图片信息
  167. erweimasrc: '', //生成的二维码图片
  168. dkerweima: '',
  169. ciddk: 'dk-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
  170. size: 300, //生成的二维码大小
  171. unit: 'upx', //大小单位尺寸
  172. // show: true,//默认使用组件中的image标签显示二维码
  173. val: '', //要生成的内容
  174. valdk: '',
  175. background: '#ffffff', //二维码背景色
  176. foreground: '#333333', //二维码前景色
  177. pdground: '#333333', //二维码角标色
  178. icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
  179. iconSize: 40, //二维码图标大小
  180. lv: 3, //容错级别
  181. onval: true, //监听val值变化自动重新生成二维码
  182. loadMake: true, //组件初始化完成后自动生成二维码,val需要有值
  183. usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
  184. showLoading: false, //是否显示loading
  185. is_battery: 0,
  186. is_booster: 0,
  187. battery_deposit: 0,//押金
  188. userInfo: {},
  189. deposit_waiver: false,//是否免押
  190. payType: '',
  191. desc: '', //备注
  192. // 收货地址
  193. addressData: {},
  194. // 商品列表
  195. shopList: [],
  196. // 购物车id
  197. cartId: '',
  198. //购物金额详情
  199. moneyAll: {
  200. storeFreePostage: 0, //邮费优惠
  201. storePostage: 0, //邮费
  202. totalPrice: 0, //总支付金额
  203. vipPrice: 0 //vip优惠价
  204. },
  205. payPrice: 0, //总支付金额
  206. orderKey: '', //订单id
  207. payLoding: true, //判断是否支付中
  208. orderId: '', //订单id
  209. now_money: 0, //余额
  210. onShopId: -1, //默认-1为不存在商家id
  211. deposit: 0,//押金
  212. };
  213. },
  214. onLoad(option) {
  215. // 保存当前商品在购物车中的id
  216. this.cartId = option.id;
  217. // 判断是否要读取商家id
  218. if (option.shopId) {
  219. this.onShopId = option.shopId;
  220. }
  221. if(option.is_battery) {
  222. this.is_battery = option.is_battery
  223. }
  224. if(option.is_booster) {
  225. this.is_booster = option.is_booster
  226. }
  227. this.loadData();
  228. this.userinfo();
  229. this.loadIndexs()
  230. console.log('shopDetail',this.shopDetail);
  231. },
  232. watch:{
  233. isqxq(n,o) {
  234. this.payMoneyNub()
  235. }
  236. },
  237. computed: {
  238. Postage() {
  239. let money = +this.moneyAll.storePostage;
  240. if (money == 0) {
  241. return '免运费';
  242. } else {
  243. return '¥' + money;
  244. }
  245. },
  246. payAllMoney() {
  247. return +this.moneyAll.totalPrice + +this.moneyAll.vipPrice;
  248. },
  249. ...mapState('shop', ['shopDetail']),
  250. ...mapState(['fx'])
  251. },
  252. methods: {
  253. userQxq() {
  254. if(this.payType == 'pxz') {
  255. return this.$api.msg('周期代扣无法使用骑行券')
  256. }
  257. this.isqxq = !this.isqxq
  258. },
  259. choosePayType(payType) {
  260. if(payType == this.payType) {
  261. return
  262. }
  263. this.dkQrcodeUrl = ''
  264. if(payType == 'pxz' && this.userInfo.battery_deposit == 0) {
  265. return uni.showModal({
  266. title: '提示',
  267. content: '您未支付押金,暂无法使用代扣服务。',
  268. showCancel: false,
  269. });
  270. }
  271. this.payType = payType
  272. if(this.payType == 'pxz') {
  273. this.isqxq = false
  274. }
  275. },
  276. // 获取图片信息
  277. getImageInfo(image) {
  278. return new Promise((req, rej) => {
  279. uni.getImageInfo({
  280. src: image,
  281. success: function(res) {
  282. req(res)
  283. },
  284. });
  285. })
  286. },
  287. // 获取设备信息
  288. getSystemInfo() {
  289. return new Promise((req, rej) => {
  290. uni.getSystemInfo({
  291. success: function(res) {
  292. req(res)
  293. }
  294. });
  295. })
  296. },
  297. async createPoster(imgname, ewmimg, cavid, tit = '') {
  298. let that = this
  299. // 获取设备信息,主要获取宽度,赋值给canvasW 也就是宽度:100%
  300. that.SystemInfo = await that.getSystemInfo();
  301. that.ewmImg = await that.getImageInfo(ewmimg);
  302. // this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
  303. that.ratio = that.SystemInfo.windowWidth / 750;
  304. that.canvasW = that.cw * that.ratio;
  305. this.canvasH = that.ch * that.ratio;
  306. that.ewmW = that.ewmw * that.ratio;
  307. // 如果主图,二维码图片,设备信息都获取成功,开始绘制海报,这里需要用setTimeout延时绘制,否则可能会出现图片不显示。
  308. if (that.ewmImg.errMsg == 'getImageInfo:ok' && that.SystemInfo.errMsg == 'getSystemInfo:ok') {
  309. console.log('二维码和屏幕信息加载完成')
  310. setTimeout(() => {
  311. var ctx = uni.createCanvasContext(cavid, that);
  312. // 填充背景色,白色
  313. ctx.setFillStyle('#fff'); // 默认白色
  314. ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度,高度)
  315. // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
  316. ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2), 100 * that.ratio,
  317. this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度,二维码的宽,高)
  318. // 3、绘制商品标题,多余文字自动换行
  319. ctx.setFontSize(16); // setFontSize() 设置字体字号
  320. ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
  321. ctx.setTextAlign('center')
  322. ctx.fillText('请使用支付宝扫描上方二维码', this.canvasW / 2, 200 * that.ratio + that.ewmW)
  323. ctx.fillText(tit, this.canvasW / 2, 260 * that.ratio + that.ewmW)
  324. ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
  325. that.fina = true
  326. uni.canvasToTempFilePath({ // 保存canvas为图片
  327. canvasId: cavid,
  328. quality: 1,
  329. fileType: 'jpg',
  330. complete: function(res) {
  331. // 在H5平台下,tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败,APP端正常输出临时路径
  332. console.log(res)
  333. // that.canvasShow = false
  334. that[imgname] = res.tempFilePath
  335. that.$forceUpdate()
  336. uni.hideLoading()
  337. that.payLoding = false;
  338. // setTimeout(function() {
  339. // console.log(that.shareQrcodeUrl, that
  340. // .canvasShow)
  341. // }, 2000)
  342. },
  343. })
  344. });
  345. }, 1500)
  346. } else {
  347. console.log('err')
  348. }
  349. },
  350. qrRdk(res) {
  351. this.dkerweima = res
  352. this.createPoster('dkQrcodeUrl', this.dkerweima, 'myCanvass', '完成代扣服务')
  353. },
  354. loadIndexs() {
  355. loadIndexs().then(res => {
  356. console.log(res);
  357. this.battery_deposit = (res.data.battery_deposit*1).toFixed(2)
  358. })
  359. },
  360. // 加载用户基础信息
  361. userinfo() {
  362. getUserInfo({}).then(({
  363. data
  364. }) => {
  365. this.userInfo = data
  366. this.now_money = data.now_money;
  367. });
  368. },
  369. // 计算支付金额
  370. payMoneyNub() {
  371. computedOrderkey({
  372. is_certificate: this.isqxq,
  373. orderkey: this.orderKey,
  374. useIntegral: 0, //是否积分抵扣
  375. addressId: this.addressData.id //地址编号
  376. })
  377. .then(({
  378. data
  379. }) => {
  380. this.integralShow = true;
  381. // 获取支付金额
  382. this.payPrice = +data.result.pay_price;
  383. this.integralMoney = data.result.deduction_price;
  384. this.payLoding = false
  385. this.deposit = +data.result.deposit
  386. })
  387. .catch(e => {
  388. console.log(e);
  389. this.payLoding = true
  390. this.integralShow = false;
  391. });
  392. },
  393. // 加载基础数据
  394. loadData() {
  395. let obj = this;
  396. confirm({
  397. cartId: obj.cartId + ''
  398. }).then(({
  399. data
  400. }) => {
  401. obj.addressData = data.addressInfo || {};
  402. obj.shopList = data.cartInfo; //商品列表
  403. obj.moneyAll = data.priceGroup; //金额数据
  404. obj.orderKey = data.orderKey; //订单key
  405. // 计算金额
  406. this.payMoneyNub();
  407. });
  408. },
  409. // 提交订单
  410. submit() {
  411. let obj = this;
  412. // if (!this.addressData.real_name) {
  413. // this.$api.msg('请选择收货地址');
  414. // return false;
  415. // }
  416. if(!obj.payType) {
  417. return obj.$api.msg('请选择支付方式')
  418. }
  419. // 判断是否余额不足
  420. if (obj.payType == 'yue' && +obj.now_money < obj.payPrice) {
  421. uni.showModal({
  422. title: '提示',
  423. content: '账户余额不足!',
  424. showCancel: false,
  425. });
  426. return;
  427. }
  428. if(obj.payType == 'pxz') {
  429. uni.showLoading({
  430. title: '二维码生成中',
  431. mask: true
  432. })
  433. }else {
  434. uni.showLoading({
  435. title: '支付中',
  436. mask: true
  437. })
  438. }
  439. // 支付中
  440. obj.payLoding = true;
  441. // 判断是否为未支付订单中跳转进入
  442. obj.firstCreateOrder();
  443. },
  444. // 订单金额支付
  445. orderMoneyPay() {
  446. let obj = this;
  447. orderPay({
  448. uni: obj.orderId,
  449. // #ifdef H5
  450. from: 'weixin', //来源
  451. // #endif
  452. // #ifdef MP-WEIXIN
  453. from: 'routine', //来源
  454. // #endif
  455. // #ifdef APP-PLUS
  456. from: 'app', //来源
  457. // #endif
  458. paytype: obj.payType //支付类型 weixin-微信 yue-余额
  459. })
  460. .then(e => {
  461. // 判断是否微信小程序支付
  462. if (obj.payType == 'weixin') {
  463. // #ifdef H5 || MP
  464. let da = e.data.result.jsConfig;
  465. let data = {
  466. nonceStr: da.nonceStr,
  467. package: da.package,
  468. signType: da.signType,
  469. paySign: da.paySign,
  470. success: function(res) {
  471. obj.paySuccessTo();
  472. },
  473. fail: () => {
  474. uni.navigateTo({
  475. url: '/pages/order/order?state=0'
  476. });
  477. }
  478. };
  479. // #endif
  480. // #ifdef H5
  481. data.timestamp = da.timestamp;
  482. weixinObj.chooseWXPay(data);
  483. // #endif
  484. // #ifdef MP-WEIXIN
  485. data.timeStamp = da.timestamp;
  486. wx.requestPayment(data);
  487. // #endif
  488. // #ifdef APP
  489. console.log( e.data.result.jsConfig,'返回数值');
  490. uni.requestPayment({
  491. provider: 'wxpay',
  492. orderInfo: e.data.result.jsConfig,
  493. success(e) {
  494. obj.paySuccessTo();
  495. },
  496. fail: (e) => {
  497. console.log(e,'支付失败');
  498. uni.navigateTo({
  499. url: '/pages/order/order?state=0'
  500. });
  501. }
  502. })
  503. // #endif
  504. }
  505. // #ifdef APP
  506. if(obj.payType == 'ali'){
  507. uni.requestPayment({
  508. provider: 'alipay',
  509. orderInfo: e.data.result.jsConfig,
  510. success(e) {
  511. obj.paySuccessTo();
  512. },
  513. fail: (e) => {
  514. console.log(e,'支付失败');
  515. uni.navigateTo({
  516. url: '/pages/order/order?state=0'
  517. });
  518. }
  519. })
  520. }
  521. // #endif
  522. uni.hideLoading();
  523. obj.payLoding = false;
  524. })
  525. .catch(e => {
  526. // 支付完成
  527. uni.hideLoading();
  528. obj.payLoding = false;
  529. console.log(e);
  530. });
  531. },
  532. // 支付成功跳转
  533. paySuccessTo() {
  534. uni.hideLoading();
  535. uni.redirectTo({
  536. url: '/pages/user/money/paySuccess?orderid=' + this.orderId,
  537. });
  538. },
  539. // 初次订单创建
  540. firstCreateOrder() {
  541. let obj = this;
  542. // 获取下单页面数据
  543. let prepage = obj;
  544. let data = {
  545. is_car: 0,
  546. is_certificate: obj.isqxq,
  547. is_booster: obj.is_booster,
  548. is_battery: obj.is_battery,
  549. real_name: prepage.addressData.real_name, //联系人名称
  550. phone: prepage.addressData.phone, //联系人号码
  551. addressId: prepage.addressData.id, //支付地址id
  552. useIntegral: 0, //是否积分抵扣1为是0为否
  553. payType: obj.payType, //支付类型 weixin-微信 yue-余额
  554. mark: prepage.desc, //备注
  555. // #ifdef H5
  556. from: 'weixin', //来源
  557. // #endif
  558. // #ifdef MP-WEIXIN
  559. from: 'routine', //来源
  560. // #endif
  561. // #ifdef APP-PLUS
  562. from: 'app', //来源
  563. // #endif
  564. shipping_type: 2, //提货方式 1 快递 2自提
  565. };
  566. // 判断是否需要读取非默认商家id
  567. if (obj.onShopId != -1) {
  568. data.store_id = obj.onShopId;
  569. } else {
  570. if(obj.userInfo.store_id) {
  571. data.store_id = obj.userInfo.store_id
  572. }else {
  573. data.store_id = obj.shopDetail.id;
  574. }
  575. }
  576. // 生成订单
  577. createOrderkey(data, obj.orderKey)
  578. .then(({
  579. data,
  580. status,
  581. msg
  582. }) => {
  583. // 判断是否支付失败
  584. if (data.status == 'ORDER_EXIST') {
  585. uni.showModal({
  586. title: '提示',
  587. content: msg,
  588. showCancel: false
  589. });
  590. uni.hideLoading();
  591. obj.payLoding = false;
  592. return;
  593. }
  594. // 保存订单号
  595. obj.orderId = data.result.orderId;
  596. // 判断是否为余额支付
  597. if (obj.payType == 'yue') {
  598. console.log('余额支付', status == 200 && data.status == 'SUCCESS');
  599. if (status == 200 && data.status == 'SUCCESS') {
  600. obj.paySuccessTo();
  601. } else {
  602. obj.$api.msg(msg);
  603. }
  604. } else if( obj.payType == 'pxz'){
  605. createSignFLow().then(res => {
  606. obj.valdk = res.data.result.link
  607. })
  608. }else {
  609. // 立即支付
  610. obj.orderMoneyPay();
  611. }
  612. })
  613. .catch(e => {
  614. uni.hideLoading();
  615. obj.payLoding = false;
  616. console.log(e);
  617. });
  618. }
  619. }
  620. };
  621. </script>
  622. <style lang="scss">
  623. page {
  624. background: $page-color-base;
  625. padding-bottom: 100rpx;
  626. }
  627. .address-section {
  628. border-radius: 20rpx;
  629. padding: 30rpx;
  630. margin: 0 $page-row-spacing;
  631. background: #fff;
  632. position: relative;
  633. .order-content {
  634. min-height: 100rpx;
  635. display: flex;
  636. align-items: center;
  637. .leftIcon {
  638. width: 36rpx;
  639. margin: 0 30rpx;
  640. }
  641. .addAddress {
  642. text-align: center;
  643. width: 100%;
  644. display: flex;
  645. justify-content: center;
  646. align-items: center;
  647. .iconaddition {
  648. font-size: 55rpx;
  649. line-height: 1;
  650. border-radius: 100rpx;
  651. margin-right: 20rpx;
  652. }
  653. }
  654. }
  655. .iconlocation {
  656. flex-shrink: 0;
  657. display: flex;
  658. align-items: center;
  659. justify-content: center;
  660. width: 90rpx;
  661. color: #888;
  662. font-size: 44rpx;
  663. }
  664. .cen {
  665. display: flex;
  666. flex-direction: column;
  667. flex: 1;
  668. font-size: 28rpx;
  669. color: $font-color-dark;
  670. }
  671. .name {
  672. font-size: 34rpx;
  673. margin-right: 24rpx;
  674. }
  675. .address {
  676. margin-top: 16rpx;
  677. margin-right: 20rpx;
  678. color: $font-color-light;
  679. }
  680. .icon-you {
  681. font-size: 32rpx;
  682. color: $font-color-light;
  683. margin-right: 30rpx;
  684. }
  685. .a-bg {
  686. position: absolute;
  687. left: 0;
  688. bottom: 0;
  689. display: block;
  690. width: 100%;
  691. height: 5rpx;
  692. }
  693. }
  694. .goodsList {
  695. margin: 0 $page-row-spacing;
  696. padding: 30rpx;
  697. background: #fff;
  698. border-radius: 20rpx;
  699. margin-top: 30rpx;
  700. }
  701. .goods-section {
  702. .logo {
  703. display: block;
  704. width: 50rpx;
  705. height: 50rpx;
  706. border-radius: 100px;
  707. }
  708. .name {
  709. font-size: 30rpx;
  710. color: $font-color-base;
  711. margin-left: 24rpx;
  712. }
  713. .g-item {
  714. display: flex;
  715. image {
  716. flex-shrink: 0;
  717. display: block;
  718. width: 170rpx;
  719. height: 170rpx;
  720. border-radius: 4rpx;
  721. }
  722. .right {
  723. flex: 1;
  724. padding-left: 24rpx;
  725. overflow: hidden;
  726. .serverSet {
  727. font-size: 22rpx;
  728. color: $font-color-light;
  729. }
  730. }
  731. .title {
  732. font-size: 30rpx;
  733. color: $font-color-dark;
  734. }
  735. .spec {
  736. font-size: 26rpx;
  737. color: $font-color-light;
  738. }
  739. .price-box {
  740. display: flex;
  741. align-items: center;
  742. font-size: 32rpx;
  743. padding-top: 10rpx;
  744. color: $font-color-light;
  745. .price {
  746. margin-bottom: 4rpx;
  747. }
  748. .number {
  749. font-size: 26rpx;
  750. margin-left: 20rpx;
  751. }
  752. }
  753. .step-box {
  754. position: relative;
  755. }
  756. }
  757. }
  758. .yt-list {
  759. background: #fff;
  760. margin: 0 $page-row-spacing;
  761. margin-top: 30rpx;
  762. border-radius: 20rpx;
  763. }
  764. .yt-list-cell {
  765. display: flex;
  766. align-items: center;
  767. justify-content: space-between;
  768. padding: 10rpx 30rpx 10rpx 40rpx;
  769. line-height: 70rpx;
  770. position: relative;
  771. .checked,
  772. .noChecked {
  773. width: 36rpx;
  774. height: 36rpx;
  775. }
  776. .noChecked {
  777. border: 1px solid $font-color-light;
  778. border-radius: 100rpx;
  779. }
  780. &.cell-hover {
  781. background: #fafafa;
  782. }
  783. &.b-b:after {
  784. left: 30rpx;
  785. }
  786. .cell-icon {
  787. height: 32rpx;
  788. width: 32rpx;
  789. font-size: 22rpx;
  790. color: #fff;
  791. text-align: center;
  792. line-height: 32rpx;
  793. background: #f85e52;
  794. border-radius: 4rpx;
  795. margin-right: 12rpx;
  796. &.hb {
  797. background: #ffaa0e;
  798. }
  799. &.lpk {
  800. background: #3ab54a;
  801. }
  802. }
  803. .cell-more {
  804. align-self: center;
  805. font-size: 24rpx;
  806. color: $font-color-light;
  807. margin-left: 8rpx;
  808. margin-right: -10rpx;
  809. }
  810. .cell-tit {
  811. font-size: 26rpx;
  812. color: $font-color-light;
  813. margin-right: 10rpx;
  814. .orderIcon {
  815. width: 48rpx;
  816. }
  817. }
  818. .cell-tip {
  819. font-size: 26rpx;
  820. color: $font-color-dark;
  821. &.disabled {
  822. color: $font-color-light;
  823. }
  824. &.active {
  825. color: $base-color;
  826. }
  827. &.red {
  828. color: $base-color;
  829. }
  830. }
  831. &.desc-cell {
  832. .cell-tit {
  833. max-width: 90rpx;
  834. }
  835. }
  836. .desc {
  837. text-align: right;
  838. font-size: $font-base;
  839. color: $font-color-light;
  840. }
  841. }
  842. /* 支付列表 */
  843. .pay-list {
  844. padding-left: 40rpx;
  845. margin-top: 16rpx;
  846. background: #fff;
  847. .pay-item {
  848. display: flex;
  849. align-items: center;
  850. padding-right: 20rpx;
  851. line-height: 1;
  852. height: 110rpx;
  853. position: relative;
  854. }
  855. .icon-weixinzhifu {
  856. width: 80rpx;
  857. font-size: 40rpx;
  858. color: #6bcc03;
  859. }
  860. .icon-alipay {
  861. width: 80rpx;
  862. font-size: 40rpx;
  863. color: #06b4fd;
  864. }
  865. .icon-xuanzhong2 {
  866. display: flex;
  867. align-items: center;
  868. justify-content: center;
  869. width: 60rpx;
  870. height: 60rpx;
  871. font-size: 40rpx;
  872. color: $base-color;
  873. }
  874. .tit {
  875. font-size: 32rpx;
  876. color: $font-color-dark;
  877. flex: 1;
  878. }
  879. }
  880. .footer {
  881. position: fixed;
  882. left: 0;
  883. bottom: 0;
  884. z-index: 995;
  885. display: flex;
  886. align-items: center;
  887. width: 100%;
  888. height: 90rpx;
  889. justify-content: space-between;
  890. font-size: 30rpx;
  891. background-color: #fff;
  892. z-index: 998;
  893. color: $font-color-base;
  894. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  895. .price-content {
  896. padding-left: 30rpx;
  897. }
  898. .price-tip {
  899. color: $font-color-base;
  900. margin-left: 8rpx;
  901. }
  902. .price {
  903. font-size: 36rpx;
  904. color: $font-color-base;
  905. }
  906. .submit {
  907. display: flex;
  908. align-items: center;
  909. justify-content: center;
  910. width: 280rpx;
  911. height: 100%;
  912. color: #fff;
  913. font-size: 32rpx;
  914. background-color: $base-color;
  915. &.submitNo {
  916. background-color: $font-color-disabled;
  917. }
  918. }
  919. }
  920. .qrimg {
  921. position: absolute;
  922. left: -9999rpx;
  923. top: -9999rpx;
  924. }
  925. .ewm-wrap {
  926. border-radius: 20rpx;
  927. overflow: hidden;
  928. }
  929. .bcewm {
  930. background-color: $base-color;
  931. color: #fff;
  932. text-align: center;
  933. height: 80rpx;
  934. width: 702rpx;
  935. border-radius: 40rpx;
  936. margin: auto;
  937. margin-top: 30rpx;
  938. display: flex;
  939. justify-content: center;
  940. align-items: center;
  941. // margin-left: 75rpx;
  942. }
  943. .myj-wrap {
  944. width: 702rpx;
  945. margin: auto;
  946. margin-top: 20rpx;
  947. }
  948. </style>