Helppay.vue 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570
  1. <template>
  2. <view class="help_pay" style="padding-bottom: 10upx;">
  3. <view class="part_two">
  4. <u-tabs :list="list" :is-scroll="false" active-color="#FF7F00" :current="current" @change="tabs">
  5. </u-tabs>
  6. <view class="tabs_box" :class="{dis:current == 0}">
  7. <view class="one_box">
  8. <view class="box_dian">
  9. <image src="../static/mai.png"></image>
  10. </view>
  11. <view class="box_addres1" style="margin-top: 10upx;">
  12. <view class="adds">{{AddressRider}}</view>
  13. </view>
  14. <view class="box_image">
  15. <u-icon name="arrow-right" class="icon_you"></u-icon>
  16. </view>
  17. </view>
  18. <view class="box_jh">
  19. <image src="../static/icon_qh.png"></image>
  20. </view>
  21. <!-- 收获地址 -->
  22. <view class="one_box">
  23. <view class="box_dian">
  24. <image src="../static/icon_s.png"></image>
  25. </view>
  26. <view class="box_addres" @click="bindclose(1)">
  27. <view style="text-align: left;" v-if="Object.keys(takeAdd).length>0">
  28. <view class="add">
  29. {{takeAdd.province}}{{takeAdd.city}}{{takeAdd.district}}{{takeAdd.addressDetail}}
  30. </view>
  31. <view class="num">
  32. <view class="name">{{takeAdd.userName}}</view>
  33. <view class="number">{{takeAdd.userPhone}}</view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="box_image">
  38. <u-icon name="arrow-right" class="icon_you"></u-icon>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="tabs_box" :class="{dis:current == 1}">
  43. <view class="one_box" @click="bindclose(3)">
  44. <view class="box_dian">
  45. <image src="../static/mai.png"></image>
  46. </view>
  47. <view class="box_addres" v-if="disinfo">
  48. <view style="text-align: left;">
  49. <view class="adds" v-if="disinfo.addressDetail">
  50. {{disinfo.province}}{{disinfo.city}}{{disinfo.district}}{{disinfo.addressDetail}}
  51. </view>
  52. <view class="num" v-if="disinfo.addressDetail">
  53. <view class="name">{{disinfo.userName}}</view>
  54. <view class="number">{{disinfo.userPhone}}</view>
  55. </view>
  56. <view class="adds text-right text-lg" v-else>请填写取货地址</view>
  57. </view>
  58. </view>
  59. <view class="box_image">
  60. <u-icon name="arrow-right" class="icon_you"></u-icon>
  61. </view>
  62. </view>
  63. <view class="box_jh">
  64. <image src="../static/icon_qh.png"></image>
  65. </view>
  66. <!-- 收货地址 -->
  67. <view class="one_box" @click="bindclose(2)">
  68. <view class="box_dian">
  69. <image src="../static/icon_s.png"></image>
  70. </view>
  71. <view class="box_addres" v-if="Object.keys(takeAdds).length>0">
  72. <view class="add">
  73. {{takeAdds.province}}{{takeAdds.city}}{{takeAdds.district}}{{takeAdds.addressDetail}}
  74. </view>
  75. <view class="num">
  76. <view class="name">{{takeAdds.userName}}</view>
  77. <view class="number">{{takeAdds.userPhone}}</view>
  78. </view>
  79. </view>
  80. <view class="box_addres1 flex-sub text-df text-right" v-else>请填写收货地址</view>
  81. <view class="box_image">
  82. <u-icon name="arrow-right" class="icon_you"></u-icon>
  83. </view>
  84. </view>
  85. </view>
  86. <view style="text-align:right;padding: 10upx;margin-right: 32upx;font-size: 24upx;" v-if="distance">
  87. 预估跑腿距离:
  88. <text v-if="distance>1000">{{parseFloat(distance/1000).toFixed(1)}}km</text>
  89. <text v-else>{{distance}}m</text>
  90. </view>
  91. </view>
  92. <view class="part_one" style="margin-top: 20rpx;">
  93. <view class="pay_name">请填写帮买商品信息</view>
  94. <view class="pay_set" style="margin-top: 10upx;">
  95. <u-input v-model="values" type="textarea" :maxlength="100" placeholder='请填写餐品名称,份数,是否忌口等要求' />
  96. </view>
  97. </view>
  98. <view class="part_three">
  99. <u-form :model="forms" ref="uForm" label-position="left" :label-style="labelstyle">
  100. <u-form-item label="时间" right-icon="arrow-right">
  101. <u-input @click="onshowdata" :clearable="clearable" :disabled="true" v-model="forms.data"
  102. input-align="right" placeholder="立即购买" />
  103. </u-form-item>
  104. <u-form-item label="预付商品费" right-icon="arrow-right">
  105. <u-input @click="onshowvalua" :type="types" v-model="forms.price" :clearable="clearable"
  106. input-align="right" placeholder="预估价格" @input="onKeyInput()" />
  107. </u-form-item>
  108. <u-form-item label="红包" right-icon="arrow-right">
  109. <u-input @click="onshowmoney" v-model="forms.hongbao" :disabled="true" :clearable="clearable"
  110. input-align="right" placeholder="请选择红包" />
  111. </u-form-item>
  112. <u-form-item label="小费" right-icon="arrow-right">
  113. <u-input v-model="forms.tip" type="number" :clearable="clearable" input-align="right"
  114. placeholder="接单更快 购买更加及时" @input="onKeyInput()" />
  115. </u-form-item>
  116. </u-form>
  117. </view>
  118. <view class="part_four" style="padding-bottom: 35rpx;">
  119. <view class="take_number">
  120. <view class="number_name">收货码</view>
  121. <view class="number_text">骑手送达时,需提供收货码,确保安全签收</view>
  122. </view>
  123. <view class="take_number_kg">
  124. <u-switch v-model="checked" size="40" active-color="#FF7F00" @change="codekg"></u-switch>
  125. </view>
  126. </view>
  127. <view class="part_four" v-if="price">
  128. <view class="take_number">
  129. <view class="number_name">预估跑腿费</view>
  130. </view>
  131. <view class="take_number_kg">
  132. ¥{{price}}
  133. </view>
  134. </view>
  135. <view class="content_sure">
  136. <u-checkbox-group>
  137. <u-checkbox v-model="check" shape="circle" active-color="#FF7F00">同意并接受</u-checkbox>
  138. </u-checkbox-group>
  139. <view style="font-size: 25rpx;margin-left: -10rpx;" @click="binduserxieyi()">
  140. 《跑腿代购服务用户协议》
  141. </view>
  142. </view>
  143. <view class="tabbar">
  144. <!-- <view class="tabbar_price">支付:<text>¥23</text></view> -->
  145. <view class="tabbar_price">支付:
  146. <text v-if="!totalprice">¥{{price || 0}}</text>
  147. <text v-else>¥{{totalprice}}</text>
  148. </view>
  149. <view class="tabbar_btn">
  150. <view class="but" @click="bindpay()">发布并支付</view>
  151. </view>
  152. </view>
  153. <!-- 取件时间弹框 -->
  154. <u-picker mode="time" v-model="showdata" :default-selector='[0, 0]' cancel-tex="确认" :params="params"
  155. @confirm="confirm"></u-picker>
  156. <!-- 红包弹框 -->
  157. <u-popup v-model="showmoney" mode="bottom" close-icon="close-circle" close-icon-pos="top-right"
  158. close-icon-color="#8f9298" close-icon-size="50" :closeable="closeable">
  159. <view class="popup_money">
  160. <view class="data_title">红包</view>
  161. <view class="data_select">
  162. <!-- 红包列表 -->
  163. <view class="money_box" v-for="(item,index) in hongbao" :key="index"
  164. v-if="Number(item.redPacketType)==0||Number(item.redPacketType)==indentType">
  165. <view class="box_tit">
  166. <view class="money_name">{{item.redPacketTitle}}</view>
  167. <view class="money_price">¥{{item.redPacketAmount}}</view>
  168. </view>
  169. <view class="money_data">有效期至{{item.expirationTime}}</view>
  170. <view class="money_line">
  171. <u-line direction="row" color="#E6E6E6" border-style="dashed" />
  172. </view>
  173. <view class="box_bottom">
  174. <view class="money_use">满{{item.minimumAmount}}元可使用</view>
  175. <view class="money_btn">
  176. <view class="lj_use" @click="bindhongindex(item.redPacketId,item.redPacketAmount)">
  177. 立即使用</view>
  178. <view class="lj_use" @click="bindhongindex(item.redPacketId,item.redPacketAmount)"
  179. v-if="hongid">
  180. 已选红包</view>
  181. </view>
  182. </view>
  183. </view>
  184. <!-- 暂无红包 -->
  185. <view class="image_box" v-if="hongbao.length==0">
  186. <image src="../../static/images/empty.png" style="width:100%;height: 350rpx;"></image>
  187. <view style="width: 100%;text-align: center;color: #ccc;">暂无红包</view>
  188. </view>
  189. </view>
  190. </view>
  191. </u-popup>
  192. <u-popup v-model="showpay" mode="bottom" close-icon="close-circle" close-icon-pos="top-right"
  193. close-icon-color="#8f9298" close-icon-size="50">
  194. <view class="popup_pay">
  195. <view class="bg margin-top padding-lr radius">
  196. <view style="padding: 0 20upx;margin-top: 36rpx;">
  197. <view
  198. style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
  199. v-for="(item,index) in openLists" :key='index'>
  200. <image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
  201. </image>
  202. <view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
  203. {{item.text}}
  204. </view>
  205. <radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
  206. <label class="tui-radio">
  207. <radio color="#FF7F00" :checked="openWay === item.id ? true : false" />
  208. </label>
  209. </radio-group>
  210. </view>
  211. </view>
  212. </view>
  213. <view class="pay_btn" @click="pay()">确认支付</view>
  214. </view>
  215. </u-popup>
  216. </view>
  217. </template>
  218. <script>
  219. export default {
  220. data() {
  221. return {
  222. openWay: 0,
  223. values: '',
  224. list: [{
  225. name: '骑手就近购买'
  226. }, {
  227. name: '指定购买地址'
  228. }],
  229. current: 0,
  230. checked: true,
  231. check: false,
  232. mobile: '',
  233. code: '',
  234. AddressRider: '骑手将在您附近3公里内购买',
  235. forms: {
  236. data: '立即购买',
  237. price: '',
  238. hongbao: '',
  239. tip: ''
  240. },
  241. formts: {
  242. data: '立即购买',
  243. price: '',
  244. hongbao: '',
  245. tip: ''
  246. },
  247. clearable: false,
  248. showdata: false,
  249. showvalua: false,
  250. showmoney: false,
  251. showpay: false,
  252. value: '',
  253. type: 'text',
  254. types: 'number',
  255. indentBasicsMoney: '',
  256. border: true,
  257. params: {
  258. // year: true,
  259. // month: true,
  260. day: true,
  261. hour: true,
  262. minute: true,
  263. timestamp: true
  264. },
  265. takeAdd: {},
  266. takeAdds: {},
  267. disinfo: [],
  268. indentType: '3',
  269. price: 0,
  270. hongbao: '',
  271. redPacketId: '',
  272. helppay: '',
  273. distance: 3000,
  274. year: '',
  275. shipAddressDetail: '',
  276. buyTime: '',
  277. closeable: true,
  278. labelstyle: {
  279. whiteSpace: 'nowrap',
  280. fontWeight: 'bold',
  281. textIndent: '20rpx',
  282. },
  283. indentNumber: '',
  284. openLists: [],
  285. data: [],
  286. openWay: '',
  287. totalprice: '',
  288. itemCodeFlag: 0,
  289. hongid: false,
  290. addressId: '',
  291. xitongMoney: '', //三公里最低费用
  292. addressType: ''
  293. }
  294. },
  295. onLoad() {
  296. // #ifdef H5
  297. let ua = navigator.userAgent.toLowerCase();
  298. if (ua.indexOf('micromessenger') !== -1) {
  299. this.openLists = [{
  300. image: '../static/icon_weixin.png',
  301. text: '微信',
  302. id: 2
  303. }];
  304. this.openWay = 2;
  305. } else {
  306. this.openLists = [{
  307. image: '../static/zhifubao.png',
  308. text: '支付宝',
  309. id: 1
  310. }];
  311. this.openWay = 1;
  312. }
  313. // #endif
  314. // #ifdef APP-PLUS
  315. this.openLists = [{
  316. image: '../static/zhifubao.png',
  317. text: '支付宝',
  318. id: 1
  319. }, {
  320. image: '../static/icon_weixin.png',
  321. text: '微信',
  322. id: 2
  323. }];
  324. this.openWay = 1;
  325. // #endif
  326. // #ifdef MP-WEIXIN
  327. this.openLists = [{
  328. image: '../static/icon_weixin.png',
  329. text: '微信',
  330. id: 2
  331. }];
  332. this.openWay = 2;
  333. // #endif
  334. //帮我买订单最低金额
  335. this.$Request.get('/app/common/type/280').then(res => {
  336. if (res.code == 0) {
  337. this.xitongMoney = res.data.value
  338. this.price = res.data.value
  339. }
  340. });
  341. },
  342. onShow() {
  343. console.log(this.addressId, '选择的地址id')
  344. console.log(this.addressType, '选择的地址type')
  345. this.addressId = this.addressId ? this.addressId : uni.getStorageSync('addressId')
  346. this.addressType = this.addressType ? this.addressType : uni.getStorageSync('addressType')
  347. if (this.addressId) {
  348. this.getAddress(this.addressId)
  349. // uni.removeStorageSync('addressType')
  350. // uni.removeStorageSync('addressId')
  351. }
  352. console.log(this.current, '默认地址')
  353. },
  354. methods: {
  355. // 跳转地址
  356. bindclose(index) {
  357. this.addressType = index;
  358. // uni.navigateTo({
  359. // url: '/pages/closeaddress/closeaddress?addressType=' + index
  360. // })
  361. uni.navigateTo({
  362. url: '/my/address/index?add=1&addressType=' + index
  363. })
  364. },
  365. // 查询地址
  366. getAddress(e) {
  367. let data = {
  368. addressId: e
  369. }
  370. this.$Request.getT('/app/address/selectAddressById', data).then(res => {
  371. if (res.code == 0) {
  372. if (this.addressType == 1) {
  373. this.distance = 0
  374. this.takeAdd = res.data
  375. } else if (this.addressType == 2) {
  376. this.takeAdds = res.data
  377. } else if (this.addressType == 3) {
  378. this.disinfo = res.data
  379. }
  380. if (Object.keys(this.disinfo).length && Object.keys(this.takeAdds).length) {
  381. this.binddistance()
  382. }
  383. uni.removeStorageSync('addressId')
  384. }
  385. });
  386. },
  387. // 距离计算
  388. binddistance() {
  389. // this.disinfo = uni.getStorageSync('disinfo')[0]
  390. let ol = ''
  391. let od = ''
  392. let dl = ''
  393. let dd = ''
  394. if (this.current == 0) {
  395. ol = this.takeAdd.lng
  396. od = this.takeAdd.lat
  397. dl = this.takeAdd.lng
  398. dd = this.takeAdd.lat
  399. } else if (this.current == 1) {
  400. console.log(this.disinfo[0], 'jjjjjjjj')
  401. ol = this.disinfo.lng
  402. od = this.disinfo.lat
  403. dl = this.takeAdds.lng
  404. dd = this.takeAdds.lat
  405. }
  406. console.log('取货纬度:' + ol, '取货经度:' + od, '送货纬度:' + dl, '送货经度:' + dd)
  407. this.$Request.postT('/app/tbindent/distance?ol=' + ol + '&od=' + od + '&dl=' + dl + '&dd=' + dd).then(
  408. res => {
  409. if (res.code === 0) {
  410. //通过经纬度计算的距离
  411. this.distance = res.data
  412. // console.log(this.distance)
  413. // 计算跑腿费用
  414. this.orderjc()
  415. }
  416. });
  417. },
  418. // 开关
  419. codekg(e) {
  420. console.log(e)
  421. if (e == true) {
  422. this.itemCodeFlag = 0
  423. } else if (e == false) {
  424. this.itemCodeFlag = 1
  425. }
  426. },
  427. // 跑腿用户协议
  428. binduserxieyi() {
  429. uni.navigateTo({
  430. url: '/my/setting/xieyi'
  431. })
  432. },
  433. tabs(index) {
  434. this.values = '';
  435. this.AddressRider = '骑手将在您附近3公里内购买';
  436. this.itemCodeFlag = 0;
  437. this.distance = 3000;
  438. this.redPacketId = '';
  439. this.indentBasicsMoney = '';
  440. this.totalprice = '';
  441. this.takeAdd = {};
  442. this.forms = this.formts;
  443. this.takeAdd = {};
  444. this.takeAdds = {};
  445. this.disinfo = [];
  446. this.helppay = '';
  447. // console.log(this.current)
  448. if (this.current == 0) {
  449. if (this.form && this.form.payaddress1) {
  450. this.shipAddressDetail = this.form.payaddress1
  451. }
  452. this.distance = 0
  453. this.price = 0
  454. } else if (this.current == 1) {
  455. if (uni.getStorageSync('disinfo')) {
  456. this.shipAddressDetail = uni.getStorageSync('disinfo')[0].detailaddress
  457. }
  458. this.distance = 3000
  459. this.price = this.xitongMoney
  460. }
  461. this.current = index;
  462. },
  463. // switch打开或者关闭时触发,值为true或者false
  464. // 即使不监听此事件,this.checked此时也会相应的变成true或者false
  465. change(status) {
  466. // console.log(status);
  467. },
  468. bindtake(index) {
  469. let that = this
  470. uni.chooseLocation({
  471. success: function(res) {
  472. console.log(res)
  473. let disinfo = [{
  474. addressLatitude: res.latitude,
  475. addressLongitude: res.longitude,
  476. address: res.address,
  477. shipAddressDetail: res.name
  478. }]
  479. uni.setStorageSync('disinfo', disinfo)
  480. that.disinfo = uni.getStorageSync('disinfo')[0]
  481. }
  482. });
  483. },
  484. confirm(e) {
  485. console.log(e.timestamp)
  486. let curDate = new Date();
  487. this.year = curDate.getFullYear();
  488. this.month = curDate.getMonth();
  489. console.log(e.timestamp * 1000)
  490. console.log(curDate)
  491. if (parseInt(curDate) >= parseInt(e.timestamp * 1000)) {
  492. uni.showToast({
  493. title: '请选择正确时间',
  494. icon: 'none'
  495. })
  496. } else {
  497. // this.selTime = e.timestamp
  498. this.buyTime = this.year + '-' + this.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + '00'
  499. this.forms.data = e.day + '日' + e.hour + ':' + e.minute
  500. }
  501. },
  502. onshowdata() {
  503. this.showdata = true
  504. },
  505. binddata() {
  506. this.showdata = false
  507. },
  508. onshowvalua() {
  509. this.showvalua = true
  510. },
  511. bindvalua() {
  512. this.showvalua = false
  513. },
  514. // 根据订单信息判断用户可用红包
  515. onshowmoney() {
  516. this.showmoney = true
  517. let data = {
  518. indentType: this.indentType, //订单类型
  519. indentBasicsMoney: this.price
  520. }
  521. this.$Request.postJson('/app/tbindent/findRedPacket', data).then(res => {
  522. // console.log(res)
  523. if (res.code === 0) {
  524. this.hongbao = res.data
  525. // console.log(this.hongbao)
  526. }
  527. });
  528. },
  529. // 判断红包使用id
  530. bindhongindex(id, price) {
  531. console.log(id)
  532. this.hongid = false
  533. this.redPacketId = id
  534. this.forms.hongbao = price
  535. this.showmoney = false
  536. let price1 = (Number(this.price) - Number(this.forms.hongbao)).toFixed(2)
  537. if (price1 <= 0) {
  538. price1 = 0.01
  539. }
  540. this.totalprice = (Number(price1) + Number(this.forms.price) + Number(this.forms.tip)).toFixed(2)
  541. if (this.totalprice <= 0) {
  542. this.totalprice = 0.01
  543. }
  544. },
  545. // 计算订单基础价格
  546. orderjc() {
  547. let data = {
  548. indentType: this.indentType, //订单类型
  549. distance: this.distance, //距离
  550. }
  551. this.$Request.postJson('/app/tbindent/basicsMoney', data).then(res => {
  552. // console.log(res)
  553. if (res.code === 0) {
  554. //计算好的跑腿费用
  555. this.price = res.data.indentBasicsMoney
  556. this.helppay = res.data
  557. this.onKeyInput();
  558. // console.log(this.wpprice)
  559. }
  560. });
  561. },
  562. // 价格计算
  563. onKeyInput(e) {
  564. console.log(e)
  565. let price = Number(this.price) - Number(this.forms.hongbao)
  566. if (price <= 0) {
  567. price = 0.01
  568. }
  569. this.totalprice = (Number(price) + Number(this.forms.price) + Number(this.forms.tip)).toFixed(2)
  570. },
  571. // 提交订单
  572. bindpay() {
  573. // if (!this.indentNumber) {
  574. // this.totalprice = (Number(this.price) + Number(this.forms.price) - Number(this.forms.hongbao) + Number(this.forms.tip)).toFixed(2)
  575. // }
  576. console.log(this.totalprice)
  577. if (!this.takeAdd && this.current == 0) {
  578. uni.showToast({
  579. title: '请填写收货地址',
  580. icon: 'none',
  581. duration: 2000
  582. });
  583. return;
  584. }
  585. console.log(this.disinfo)
  586. console.log(this.current)
  587. if (!this.disinfo && this.current == 1) {
  588. uni.showToast({
  589. title: '请选择购买地址',
  590. icon: 'none',
  591. duration: 2000
  592. });
  593. return;
  594. }
  595. if (!this.takeAdds && this.current == 1) {
  596. uni.showToast({
  597. title: '请填写收货地址',
  598. icon: 'none',
  599. duration: 2000
  600. });
  601. return;
  602. }
  603. if (this.values == '') {
  604. uni.showToast({
  605. title: '请填写帮买商品',
  606. icon: 'none',
  607. duration: 2000
  608. });
  609. return;
  610. }
  611. if (this.check == false) {
  612. uni.showToast({
  613. title: '请勾选跑腿协议',
  614. icon: 'none',
  615. duration: 2000
  616. });
  617. return;
  618. }
  619. if (this.current == 0) {
  620. let data = {
  621. indentType: this.indentType, //订单类型
  622. productDetails: this.values,
  623. buyType: this.current,
  624. shopAddressDetail: this.AddressRider,
  625. userName: this.takeAdd.userName, //收货人姓名
  626. userPhone: this.takeAdd.userPhone, //收货人电话
  627. userProvince: this.takeAdd.province, //收货人 省
  628. userCity: this.takeAdd.city, //收货人 市
  629. userDistrict: this.takeAdd.district, //收货人 区
  630. userAddressDetail: this.takeAdd.addressDetail, //收货人详细地址
  631. userLng: this.takeAdd.lng,
  632. userLat: this.takeAdd.lat,
  633. sendOutTime: this.forms.data,
  634. // prepayMoney: this.price, //商品价格
  635. tip: this.forms.tip, //小费
  636. prepayMoney: this.forms.price,
  637. itemCodeFlag: this.itemCodeFlag,
  638. // "itemCode": "收货码",
  639. // "modeOfPayment": "",
  640. distance: this.distance, //距离(米)
  641. redPacketId: this.redPacketId, //红包id,
  642. indentBasicsMoney: this.indentBasicsMoney,
  643. userFine: this.helppay.userFine,
  644. riderFine: this.helppay.riderFine,
  645. errandMoney: this.helppay.errandMoney
  646. }
  647. this.$Request.postJson('/app/tbindent/addIndent', data).then(res => {
  648. // console.log(res)
  649. if (res.code == 0) {
  650. this.indentNumber = res.data.indentNumber
  651. // #ifdef MP-WEIXIN
  652. this.openWay = 2
  653. this.pay()
  654. // #endif
  655. // #ifndef MP-WEIXIN
  656. this.showpay = true
  657. // #endif
  658. }
  659. });
  660. }
  661. if (this.current == 1) {
  662. console.error(JSON.stringify(this.takeAdds))
  663. let data = {
  664. indentType: this.indentType, //订单类型
  665. productDetails: this.values,
  666. buyType: this.current,
  667. shopName: this.disinfo.userName, //发货人姓名
  668. shopPhone: this.disinfo.userPhone, //发货人电话
  669. shopProvince: this.disinfo.province, //发货人 省
  670. shopCity: this.disinfo.city, //发货人 市
  671. shopDistrict: this.disinfo.district, //发货人 区
  672. shopAddressDetail: this.disinfo.addressDetail, //发货人详细地址
  673. shopLng: this.disinfo.lng,
  674. shopLat: this.disinfo.lat,
  675. userName: this.takeAdds.userName, //收货人姓名
  676. userPhone: this.takeAdds.userPhone, //收货人电话
  677. userProvince: this.takeAdds.province, //收货人 省
  678. userCity: this.takeAdds.city, //收货人 市
  679. userDistrict: this.takeAdds.district, //收货人 区
  680. userAddressDetail: this.takeAdds.addressDetail, //收货人详细地址
  681. userLng: this.takeAdds.lng,
  682. userLat: this.takeAdds.lat,
  683. //收货人信息
  684. deliveryUserPhone: this.takeAdds.userPhone,
  685. deliveryUserName: this.takeAdds.userName,
  686. deliveryAddress: this.takeAdds.address,
  687. deilveryAddressDetail: this.takeAdds.addressDetail,
  688. deliveryAddressLatitude: this.takeAdds.addressLongitude,
  689. deliveryAddressLongitude: this.takeAdds.addressLatitude,
  690. //取货地址
  691. shipAddressDetail: this.disinfo.shipAddressDetail,
  692. shipAddressLatitude: this.disinfo.addressLatitude,
  693. shipAddressLongitude: this.disinfo.addressLongitude,
  694. shipAddress: this.disinfo.address,
  695. // shipUserName: this.disinfo.shipUserName,
  696. // shipUserPhone:this.disinfo.shipUserPhone,
  697. sendOutTime: this.forms.data,
  698. // prepayMoney: this.price, //商品价格
  699. tip: this.forms.tip, //小费
  700. prepayMoney: this.forms.price,
  701. itemCodeFlag: this.itemCodeFlag,
  702. // "itemCode": "收货码",
  703. // "modeOfPayment": "",
  704. distance: this.distance, //距离(米)
  705. redPacketId: this.redPacketId, //红包id,
  706. indentBasicsMoney: this.indentBasicsMoney,
  707. userFine: this.helppay.userFine,
  708. riderFine: this.helppay.riderFine,
  709. errandMoney: this.helppay.errandMoney
  710. }
  711. // console.log(data)
  712. this.$Request.postJson('/app/tbindent/addIndent', data).then(res => {
  713. // console.log(res)
  714. if (res.code == 0) {
  715. this.indentNumber = res.data.indentNumber
  716. this.showpay = true
  717. }
  718. });
  719. return;
  720. }
  721. },
  722. selectWay: function(item) {
  723. this.openWay = item.id;
  724. },
  725. pay() {
  726. // let indentNumber = this.indentNumber
  727. // console.log(data)
  728. if (this.openWay == 0) {
  729. this.$queue.showToast('请选择支付方式!')
  730. return;
  731. }
  732. if (this.openWay == 2) {
  733. // #ifdef MP-WEIXIN
  734. // 微信小程序支付
  735. this.$Request.postJson("/app/wxErrPay/wxPayJsApiOrder?indentNumber=" + this.indentNumber).then(res => {
  736. console.log(res, '********')
  737. uni.showLoading({
  738. title: '支付中...'
  739. });
  740. if (res.code == 0) {
  741. console.log(this.openWay, '支付')
  742. uni.requestPayment({
  743. provider: 'wxpay',
  744. timeStamp: res.data.timestamp,
  745. nonceStr: res.data.noncestr,
  746. package: res.data.package,
  747. signType: res.data.signType,
  748. paySign: res.data.sign,
  749. success: function(suc) {
  750. console.log('success:' + JSON.stringify(suc));
  751. uni.showToast({
  752. title: '支付成功',
  753. icon: 'success'
  754. })
  755. uni.setStorageSync('current', 0)
  756. setTimeout(function() {
  757. uni.switchTab({
  758. url: '/pages/order/index',
  759. })
  760. }, 10)
  761. },
  762. fail: function(err) {
  763. console.log('fail:' + JSON.stringify(err));
  764. uni.showToast({
  765. title: '支付失败',
  766. icon: 'none'
  767. })
  768. uni.switchTab({
  769. url: '/pages/order/index'
  770. })
  771. }
  772. });
  773. }
  774. })
  775. // #endif
  776. // #ifdef H5
  777. let ua = navigator.userAgent.toLowerCase();
  778. if (ua.indexOf('micromessenger') !== -1) { //微信里打开
  779. this.$Request.postJson('/app/wxPay/wxPayMpOrder?indentNumber=' + this.indentNumber)
  780. .then(res => {
  781. console.log(res)
  782. if (res.code == 0) {
  783. console.log()
  784. this.callPay(res.data);
  785. } else {
  786. uni.showToast({
  787. icon: 'none',
  788. title: '支付失败!'
  789. });
  790. }
  791. });
  792. } else { //不是微信打开
  793. this.$Request.postJson('/app/wxPay/wxPayMpOrder?indentNumber=' + this.indentNumber)
  794. .then(
  795. res => {
  796. if (res.code == 0) {
  797. console.log('....11111111.....', res.data)
  798. const div = document.createElement('div')
  799. div.innerHTML = res.data //此处form就是后台返回接收到的数据
  800. console.log('....2.....', res.data)
  801. document.body.appendChild(div)
  802. console.log('....33333.....', document.forms[0])
  803. document.forms[0].submit()
  804. } else {
  805. uni.showToast({
  806. icon: 'none',
  807. title: '支付失败!'
  808. });
  809. }
  810. });
  811. }
  812. // #endif
  813. // #ifdef APP-PLUS
  814. // 微信APP支付 根据订单id获取支付信息
  815. this.$Request.postT("/app/wxPay/payAppOrder", {
  816. indentNumber: this.indentNumber
  817. }).then(ret => {
  818. console.log(JSON.stringify(ret))
  819. this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
  820. });
  821. // #endif
  822. } else {
  823. // #ifdef H5
  824. this.$Request.postJson('/app/aliPay/payH5Order?indentNumber=' + this.indentNumber).then(
  825. res => {
  826. if (res.code == 0) {
  827. const div = document.createElement('div')
  828. div.innerHTML = res.data //此处form就是后台返回接收到的数据
  829. document.body.appendChild(div)
  830. document.forms[0].submit()
  831. } else {
  832. uni.showToast({
  833. icon: 'none',
  834. title: '支付失败!'
  835. });
  836. }
  837. });
  838. // #endif
  839. // #ifdef APP
  840. // APP支付宝支付
  841. this.$Request.postJson("/app/aliPay/payAppOrder?indentNumber=" + this.indentNumber).then(ret => {
  842. console.log(ret)
  843. this.isCheckPay(ret.code, 'alipay', ret.data);
  844. });
  845. // #endif
  846. }
  847. },
  848. callPay: function(response) {
  849. if (typeof WeixinJSBridge === "undefined") {
  850. if (document.addEventListener) {
  851. document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
  852. } else if (document.attachEvent) {
  853. document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
  854. document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
  855. }
  856. } else {
  857. this.onBridgeReady(response);
  858. }
  859. },
  860. onBridgeReady: function(response) {
  861. let that = this;
  862. if (!response.package) {
  863. return;
  864. }
  865. WeixinJSBridge.invoke(
  866. 'getBrandWCPayRequest', {
  867. "appId": response.appid, //公众号名称,由商户传入
  868. "timeStamp": response.timestamp, //时间戳,自1970年以来的秒数
  869. "nonceStr": response.noncestr, //随机串
  870. "package": response.package,
  871. "signType": response.signType, //微信签名方式:
  872. "paySign": response.sign //微信签名
  873. },
  874. function(res) {
  875. console.log(res, '/*-/*-/*-')
  876. if (res.err_msg === "get_brand_wcpay_request:ok") {
  877. // 使用以上方式判断前端返回,微信团队郑重提示:
  878. //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
  879. uni.showLoading({
  880. title: '支付成功'
  881. });
  882. setTimeout(function() {
  883. uni.hideLoading();
  884. uni.switchTab({
  885. url: '/pages/order/index'
  886. })
  887. }, 1000);
  888. } else {
  889. uni.hideLoading();
  890. }
  891. WeixinJSBridge.log(response.err_msg);
  892. }
  893. );
  894. },
  895. isCheckPay(code, name, order) {
  896. if (code == 0) {
  897. this.setPayment(name, order);
  898. } else {
  899. uni.hideLoading();
  900. uni.showToast({
  901. title: '支付信息有误',
  902. icon: 'none'
  903. });
  904. }
  905. },
  906. setPayment(name, order) {
  907. console.log(name, '*-*-*', order)
  908. uni.requestPayment({
  909. provider: name,
  910. orderInfo: order, //微信、支付宝订单数据
  911. success: function(res) {
  912. console.log(res)
  913. uni.hideLoading();
  914. uni.showLoading({
  915. title: '支付成功'
  916. });
  917. setTimeout(function() {
  918. uni.switchTab({
  919. url: '/pages/order/index',
  920. })
  921. }, 1000);
  922. },
  923. fail: function(err) {
  924. console.log(err)
  925. uni.hideLoading();
  926. },
  927. complete() {
  928. uni.hideLoading();
  929. }
  930. });
  931. },
  932. }
  933. }
  934. </script>
  935. <style>
  936. body {
  937. background: #F2EDED;
  938. }
  939. /* #ifndef MP-WEIXIN */
  940. page {
  941. background: #F2EDED;
  942. }
  943. /* #endif */
  944. /* 取件时间弹框 */
  945. .popup_data {
  946. height: 600upx;
  947. width: 100%;
  948. position: relative;
  949. }
  950. .data_title {
  951. width: 92%;
  952. margin: 0 auto;
  953. font-size: 32upx;
  954. line-height: 105upx;
  955. font-weight: bold;
  956. letter-spacing: 2upx;
  957. position: relative;
  958. top: 0upx;
  959. z-index: 99991;
  960. }
  961. .data_btn {
  962. position: absolute;
  963. bottom: 28upx;
  964. width: 100%;
  965. z-index: 99992;
  966. }
  967. .btn {
  968. width: 90%;
  969. margin: 0 auto;
  970. height: 98upx;
  971. color: white;
  972. background: #FF7F00;
  973. border-radius: 20upx;
  974. text-align: center;
  975. line-height: 98upx;
  976. letter-spacing: 1upx;
  977. }
  978. .u-close {
  979. position: absolute;
  980. z-index: 999999 !important;
  981. }
  982. .u-picker-body {
  983. height: 700upx !important;
  984. }
  985. /* .u-picker-header {
  986. position: relative !important;
  987. top: 138upx;
  988. z-index: 99992;
  989. } */
  990. /* 物品信息弹框 */
  991. .popup_info {
  992. height: 1100upx;
  993. width: 100%;
  994. position: relative;
  995. }
  996. .data_items {
  997. width: 100%;
  998. }
  999. .item_box {
  1000. width: 90%;
  1001. margin: 0 auto;
  1002. }
  1003. .item_btn {
  1004. border: 1upx solid #cccccc;
  1005. border-radius: 78upx;
  1006. width: 200upx;
  1007. height: 80upx;
  1008. text-align: center;
  1009. line-height: 80upx;
  1010. font-size: 28upx;
  1011. margin-right: 10upx;
  1012. margin-left: 10upx;
  1013. margin-bottom: 20upx;
  1014. }
  1015. .item_btn:active {
  1016. background: #ffd9b3;
  1017. border: 2upx solid #ff7f00;
  1018. }
  1019. .item_type {
  1020. display: flex;
  1021. flex-wrap: wrap;
  1022. margin-top: 20upx;
  1023. }
  1024. /* 物品保价弹框 */
  1025. .valua_icon {
  1026. width: 90%;
  1027. position: absolute;
  1028. bottom: 130upx;
  1029. left: 40upx;
  1030. }
  1031. .input {
  1032. width: 90%;
  1033. margin: 0 auto;
  1034. }
  1035. .u-input--border {
  1036. border-radius: 10upx;
  1037. border-radius: 10upx;
  1038. border: 2upx solid #F2F2F2 !important;
  1039. background: #F2F2F2 !important;
  1040. }
  1041. .input_bg {
  1042. width: 90%;
  1043. margin: 0 auto;
  1044. position: relative;
  1045. }
  1046. .input_bg image {
  1047. width: 100%;
  1048. height: 98upx;
  1049. }
  1050. .input_bg text {
  1051. position: absolute;
  1052. top: 30upx;
  1053. left: 36upx;
  1054. color: #FF7F00;
  1055. font-size: 28upx;
  1056. }
  1057. /* 红包弹框 */
  1058. .popup_money {
  1059. /* height: 400upx; */
  1060. width: 100%;
  1061. height: 630rpx;
  1062. position: relative;
  1063. background: #F2EDED;
  1064. padding-bottom: 45rpx;
  1065. /* #ifndef MP-WEIXIN */
  1066. height: 680rpx;
  1067. /* #endif */
  1068. }
  1069. .uni-scroll-view,
  1070. .uni-scroll-view-content {
  1071. position: relative;
  1072. width: 100%;
  1073. height: 100%;
  1074. background: #F2EDED;
  1075. }
  1076. .image_box {
  1077. width: 40%;
  1078. margin: 0 auto;
  1079. margin-bottom: 110rpx;
  1080. }
  1081. .money_box {
  1082. width: 93%;
  1083. margin: 0 auto;
  1084. background: #ffffff;
  1085. border-radius: 16upx;
  1086. height: 240upx;
  1087. margin-top: 10rpx;
  1088. /* margin-bottom: 35rpx; */
  1089. /* margin-top: 20rpx; */
  1090. }
  1091. .box_tit {
  1092. width: 90%;
  1093. margin: 0 auto;
  1094. height: 80upx;
  1095. display: flex;
  1096. }
  1097. .money_name {
  1098. flex: 1;
  1099. display: flex;
  1100. justify-content: left;
  1101. align-items: center;
  1102. font-size: 24upx;
  1103. font-weight: bold;
  1104. letter-spacing: 2upx;
  1105. }
  1106. .money_price {
  1107. flex: 1;
  1108. display: flex;
  1109. justify-content: flex-end;
  1110. align-items: center;
  1111. font-size: 36upx;
  1112. font-weight: bold;
  1113. color: red;
  1114. }
  1115. .money_data {
  1116. color: #999999;
  1117. font-size: 22upx;
  1118. width: 90%;
  1119. margin: 0 auto;
  1120. margin-top: -10upx;
  1121. }
  1122. .u-line {
  1123. width: 90% !important;
  1124. border-bottom-width: 6upx !important;
  1125. margin: 0 auto !important;
  1126. margin-top: 24upx !important;
  1127. margin-bottom: 24upx !important;
  1128. }
  1129. .box_bottom {
  1130. width: 90%;
  1131. margin: 0 auto;
  1132. display: flex;
  1133. height: 40upx;
  1134. }
  1135. .money_use {
  1136. flex: 1;
  1137. color: #999999;
  1138. font-size: 22upx;
  1139. display: flex;
  1140. justify-content: left;
  1141. align-items: center;
  1142. }
  1143. .lj_use {
  1144. width: 160upx;
  1145. border: 1upx solid #FF7F00;
  1146. color: #FF7F00;
  1147. text-align: center;
  1148. line-height: 46upx;
  1149. border-radius: 42upx;
  1150. font-size: 20upx;
  1151. }
  1152. .help_pay {
  1153. width: 100%;
  1154. /* position: fixed;
  1155. bottom: 120upx;
  1156. left: 0upx;
  1157. right: 0upx; */
  1158. }
  1159. .content {
  1160. /* margin-top: -380upx; */
  1161. /* position: relative; */
  1162. /* z-index: 999; */
  1163. }
  1164. .part_one {
  1165. width: 95%;
  1166. margin: 0 auto;
  1167. /* height: 190rpx; */
  1168. background: #ffffff;
  1169. border-radius: 20upx;
  1170. padding: 25rpx 10rpx;
  1171. }
  1172. .pay_tit {
  1173. width: 90%;
  1174. margin: 0 auto;
  1175. /* height: 200upx; */
  1176. position: relative;
  1177. }
  1178. .pay_name {
  1179. font-size: 32rpx;
  1180. font-weight: bold;
  1181. width: 95%;
  1182. margin: 0 auto;
  1183. letter-spacing: 1upx;
  1184. /* padding-top: 30upx; */
  1185. }
  1186. .pay_set {
  1187. color: #333333;
  1188. font-size: 29upx;
  1189. width: 95%;
  1190. margin: 0 auto;
  1191. /* margin-top: 20upx; */
  1192. }
  1193. .part_two {
  1194. width: 95%;
  1195. margin: 0 auto;
  1196. padding: 20rpx 10rpx;
  1197. background: #ffffff;
  1198. border-radius: 15rpx;
  1199. margin-top: 20rpx;
  1200. }
  1201. .tabs_box {
  1202. display: none;
  1203. margin-top: 10upx;
  1204. }
  1205. .dis {
  1206. display: block;
  1207. width: 100%;
  1208. padding-bottom: 28rpx;
  1209. }
  1210. .part_three {
  1211. width: 95%;
  1212. margin: 0 auto;
  1213. /* height: 335rpx; */
  1214. background: #ffffff;
  1215. border-radius: 20upx;
  1216. margin-top: 20upx;
  1217. }
  1218. .u-form-item__body {
  1219. position: relative !important;
  1220. }
  1221. .u-form-item--left {
  1222. position: absolute !important;
  1223. top: 30upx;
  1224. left: 15rpx;
  1225. font-size: 31rpx !important;
  1226. font-weight: bold;
  1227. letter-spacing: 2upx;
  1228. }
  1229. .u-form-item--right__content {
  1230. margin-right: 20upx !important;
  1231. }
  1232. .u-form-item {
  1233. line-height: 20upx !important;
  1234. padding: 20rpx 0 !important;
  1235. }
  1236. .u-input__input {
  1237. font-size: 31rpx !important;
  1238. }
  1239. .part_four {
  1240. width: 95%;
  1241. background: #ffffff;
  1242. margin: 0 auto;
  1243. border-radius: 20upx;
  1244. display: flex;
  1245. margin-top: 20upx;
  1246. }
  1247. .take_number {
  1248. flex: 4;
  1249. }
  1250. .number_name {
  1251. width: 90%;
  1252. margin: 0 auto;
  1253. font-size: 31upx;
  1254. font-weight: bold;
  1255. line-height: 80upx;
  1256. }
  1257. .number_text {
  1258. width: 90%;
  1259. margin: 0 auto;
  1260. color: #999999;
  1261. font-size: 25rpx;
  1262. line-height: 20upx;
  1263. }
  1264. .take_number_kg {
  1265. flex: 1;
  1266. display: flex;
  1267. justify-content: center;
  1268. align-items: center;
  1269. }
  1270. .content_sure {
  1271. display: flex;
  1272. align-items: center;
  1273. margin-bottom: 160rpx;
  1274. margin-left: 30rpx;
  1275. margin-top: 20rpx;
  1276. /* #ifndef MP-WEIXIN */
  1277. /* margin-bottom: 200px; */
  1278. /* #endif */
  1279. }
  1280. .u-checkbox__label {
  1281. font-size: 26rpx !important;
  1282. letter-spacing: 2upx;
  1283. color: #888888 !important;
  1284. }
  1285. .tabbar {
  1286. width: 100%;
  1287. height: 130rpx;
  1288. background: #ffffff;
  1289. position: fixed;
  1290. bottom: 0upx;
  1291. left: 0upx;
  1292. right: 0upx;
  1293. display: flex;
  1294. /* #ifndef MP-WEIXIN */
  1295. position: fixed;
  1296. bottom: 0upx;
  1297. left: 0upx;
  1298. right: 0upx;
  1299. /* #endif */
  1300. z-index: 99;
  1301. }
  1302. .tabbar_price {
  1303. flex: 1;
  1304. display: flex;
  1305. justify-content: left;
  1306. align-items: center;
  1307. font-size: 28upx;
  1308. font-weight: bold;
  1309. margin-left: 40upx;
  1310. }
  1311. .tabbar_price text {
  1312. color: #FF3333;
  1313. font-size: 36upx;
  1314. font-weight: 500;
  1315. }
  1316. .tabbar_btn {
  1317. flex: 1;
  1318. display: flex;
  1319. justify-content: center;
  1320. align-items: center;
  1321. }
  1322. .but {
  1323. background: #FF7F00;
  1324. width: 240upx;
  1325. height: 80upx;
  1326. text-align: center;
  1327. line-height: 80upx;
  1328. border-radius: 60upx;
  1329. color: white;
  1330. font-size: 24upx;
  1331. }
  1332. .actclass {
  1333. background-color: #FFD9B3;
  1334. }
  1335. .popup_pay {
  1336. width: 100%;
  1337. }
  1338. .pay_btn {
  1339. width: 90%;
  1340. margin: 20rpx auto 40rpx;
  1341. text-align: center;
  1342. background: #FF7F00;
  1343. height: 80rpx;
  1344. border-radius: 16rpx;
  1345. color: #ffffff;
  1346. line-height: 80rpx;
  1347. }
  1348. .one_box {
  1349. width: 100%;
  1350. /* height: 80upx; */
  1351. /* background: #F5F5F5; */
  1352. margin: 0 auto;
  1353. border-radius: 12upx;
  1354. display: flex;
  1355. /* height: 100rpx; */
  1356. /* #ifndef MP-WEIXIN */
  1357. padding: 0px 15px;
  1358. /* #endif */
  1359. }
  1360. .box_jh {
  1361. width: 90%;
  1362. margin: 0 auto;
  1363. line-height: 70rpx;
  1364. }
  1365. .box_jh image {
  1366. width: 30upx;
  1367. height: 30upx;
  1368. }
  1369. .box_dian {
  1370. /* flex: 1; */
  1371. width: 15%;
  1372. display: flex;
  1373. justify-content: center;
  1374. align-items: center;
  1375. }
  1376. .box_dian image {
  1377. width: 45rpx;
  1378. height: 45rpx;
  1379. }
  1380. .box_name {
  1381. flex: 5;
  1382. display: flex;
  1383. justify-content: left;
  1384. align-items: center;
  1385. color: #333333;
  1386. font-weight: 700;
  1387. }
  1388. .box_addres {
  1389. /* flex: 5; */
  1390. width: 80%;
  1391. font-size: 32rpx;
  1392. overflow: hidden;
  1393. }
  1394. .box_addres1 {
  1395. /* flex: 5; */
  1396. width: 80%;
  1397. font-size: 32rpx;
  1398. overflow: hidden;
  1399. text-align: right;
  1400. }
  1401. .name {
  1402. display: inline;
  1403. font-size: 31rpx;
  1404. color: #999999;
  1405. }
  1406. .number {
  1407. display: initial;
  1408. color: #999999;
  1409. font-size: 31rpx;
  1410. margin-left: 30upx;
  1411. }
  1412. .box_image {
  1413. width: 15%;
  1414. /* margin-right: 22rpx; */
  1415. display: flex;
  1416. justify-content: center;
  1417. align-items: center;
  1418. }
  1419. .icon_you {
  1420. color: #c0c4cc;
  1421. }
  1422. </style>