Helppay.vue 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571
  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. mask: true, // 是否显示透明蒙层,防止触摸穿透
  740. });
  741. if (res.code == 0) {
  742. console.log(this.openWay, '支付')
  743. uni.requestPayment({
  744. provider: 'wxpay',
  745. timeStamp: res.data.timestamp,
  746. nonceStr: res.data.noncestr,
  747. package: res.data.package,
  748. signType: res.data.signType,
  749. paySign: res.data.sign,
  750. success: function(suc) {
  751. console.log('success:' + JSON.stringify(suc));
  752. uni.showToast({
  753. title: '支付成功',
  754. icon: 'success'
  755. })
  756. uni.setStorageSync('current', 0)
  757. setTimeout(function() {
  758. uni.switchTab({
  759. url: '/pages/order/index',
  760. })
  761. }, 10)
  762. },
  763. fail: function(err) {
  764. console.log('fail:' + JSON.stringify(err));
  765. uni.showToast({
  766. title: '支付失败',
  767. icon: 'none'
  768. })
  769. uni.switchTab({
  770. url: '/pages/order/index'
  771. })
  772. }
  773. });
  774. }
  775. })
  776. // #endif
  777. // #ifdef H5
  778. let ua = navigator.userAgent.toLowerCase();
  779. if (ua.indexOf('micromessenger') !== -1) { //微信里打开
  780. this.$Request.postJson('/app/wxPay/wxPayMpOrder?indentNumber=' + this.indentNumber)
  781. .then(res => {
  782. console.log(res)
  783. if (res.code == 0) {
  784. console.log()
  785. this.callPay(res.data);
  786. } else {
  787. uni.showToast({
  788. icon: 'none',
  789. title: '支付失败!'
  790. });
  791. }
  792. });
  793. } else { //不是微信打开
  794. this.$Request.postJson('/app/wxPay/wxPayMpOrder?indentNumber=' + this.indentNumber)
  795. .then(
  796. res => {
  797. if (res.code == 0) {
  798. console.log('....11111111.....', res.data)
  799. const div = document.createElement('div')
  800. div.innerHTML = res.data //此处form就是后台返回接收到的数据
  801. console.log('....2.....', res.data)
  802. document.body.appendChild(div)
  803. console.log('....33333.....', document.forms[0])
  804. document.forms[0].submit()
  805. } else {
  806. uni.showToast({
  807. icon: 'none',
  808. title: '支付失败!'
  809. });
  810. }
  811. });
  812. }
  813. // #endif
  814. // #ifdef APP-PLUS
  815. // 微信APP支付 根据订单id获取支付信息
  816. this.$Request.postT("/app/wxPay/payAppOrder", {
  817. indentNumber: this.indentNumber
  818. }).then(ret => {
  819. console.log(JSON.stringify(ret))
  820. this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
  821. });
  822. // #endif
  823. } else {
  824. // #ifdef H5
  825. this.$Request.postJson('/app/aliPay/payH5Order?indentNumber=' + this.indentNumber).then(
  826. res => {
  827. if (res.code == 0) {
  828. const div = document.createElement('div')
  829. div.innerHTML = res.data //此处form就是后台返回接收到的数据
  830. document.body.appendChild(div)
  831. document.forms[0].submit()
  832. } else {
  833. uni.showToast({
  834. icon: 'none',
  835. title: '支付失败!'
  836. });
  837. }
  838. });
  839. // #endif
  840. // #ifdef APP
  841. // APP支付宝支付
  842. this.$Request.postJson("/app/aliPay/payAppOrder?indentNumber=" + this.indentNumber).then(ret => {
  843. console.log(ret)
  844. this.isCheckPay(ret.code, 'alipay', ret.data);
  845. });
  846. // #endif
  847. }
  848. },
  849. callPay: function(response) {
  850. if (typeof WeixinJSBridge === "undefined") {
  851. if (document.addEventListener) {
  852. document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
  853. } else if (document.attachEvent) {
  854. document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
  855. document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
  856. }
  857. } else {
  858. this.onBridgeReady(response);
  859. }
  860. },
  861. onBridgeReady: function(response) {
  862. let that = this;
  863. if (!response.package) {
  864. return;
  865. }
  866. WeixinJSBridge.invoke(
  867. 'getBrandWCPayRequest', {
  868. "appId": response.appid, //公众号名称,由商户传入
  869. "timeStamp": response.timestamp, //时间戳,自1970年以来的秒数
  870. "nonceStr": response.noncestr, //随机串
  871. "package": response.package,
  872. "signType": response.signType, //微信签名方式:
  873. "paySign": response.sign //微信签名
  874. },
  875. function(res) {
  876. console.log(res, '/*-/*-/*-')
  877. if (res.err_msg === "get_brand_wcpay_request:ok") {
  878. // 使用以上方式判断前端返回,微信团队郑重提示:
  879. //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
  880. uni.showLoading({
  881. title: '支付成功'
  882. });
  883. setTimeout(function() {
  884. uni.hideLoading();
  885. uni.switchTab({
  886. url: '/pages/order/index'
  887. })
  888. }, 1000);
  889. } else {
  890. uni.hideLoading();
  891. }
  892. WeixinJSBridge.log(response.err_msg);
  893. }
  894. );
  895. },
  896. isCheckPay(code, name, order) {
  897. if (code == 0) {
  898. this.setPayment(name, order);
  899. } else {
  900. uni.hideLoading();
  901. uni.showToast({
  902. title: '支付信息有误',
  903. icon: 'none'
  904. });
  905. }
  906. },
  907. setPayment(name, order) {
  908. console.log(name, '*-*-*', order)
  909. uni.requestPayment({
  910. provider: name,
  911. orderInfo: order, //微信、支付宝订单数据
  912. success: function(res) {
  913. console.log(res)
  914. uni.hideLoading();
  915. uni.showLoading({
  916. title: '支付成功'
  917. });
  918. setTimeout(function() {
  919. uni.switchTab({
  920. url: '/pages/order/index',
  921. })
  922. }, 1000);
  923. },
  924. fail: function(err) {
  925. console.log(err)
  926. uni.hideLoading();
  927. },
  928. complete() {
  929. uni.hideLoading();
  930. }
  931. });
  932. },
  933. }
  934. }
  935. </script>
  936. <style>
  937. body {
  938. background: #F2EDED;
  939. }
  940. /* #ifndef MP-WEIXIN */
  941. page {
  942. background: #F2EDED;
  943. }
  944. /* #endif */
  945. /* 取件时间弹框 */
  946. .popup_data {
  947. height: 600upx;
  948. width: 100%;
  949. position: relative;
  950. }
  951. .data_title {
  952. width: 92%;
  953. margin: 0 auto;
  954. font-size: 32upx;
  955. line-height: 105upx;
  956. font-weight: bold;
  957. letter-spacing: 2upx;
  958. position: relative;
  959. top: 0upx;
  960. z-index: 99991;
  961. }
  962. .data_btn {
  963. position: absolute;
  964. bottom: 28upx;
  965. width: 100%;
  966. z-index: 99992;
  967. }
  968. .btn {
  969. width: 90%;
  970. margin: 0 auto;
  971. height: 98upx;
  972. color: white;
  973. background: #FF7F00;
  974. border-radius: 20upx;
  975. text-align: center;
  976. line-height: 98upx;
  977. letter-spacing: 1upx;
  978. }
  979. .u-close {
  980. position: absolute;
  981. z-index: 999999 !important;
  982. }
  983. .u-picker-body {
  984. height: 700upx !important;
  985. }
  986. /* .u-picker-header {
  987. position: relative !important;
  988. top: 138upx;
  989. z-index: 99992;
  990. } */
  991. /* 物品信息弹框 */
  992. .popup_info {
  993. height: 1100upx;
  994. width: 100%;
  995. position: relative;
  996. }
  997. .data_items {
  998. width: 100%;
  999. }
  1000. .item_box {
  1001. width: 90%;
  1002. margin: 0 auto;
  1003. }
  1004. .item_btn {
  1005. border: 1upx solid #cccccc;
  1006. border-radius: 78upx;
  1007. width: 200upx;
  1008. height: 80upx;
  1009. text-align: center;
  1010. line-height: 80upx;
  1011. font-size: 28upx;
  1012. margin-right: 10upx;
  1013. margin-left: 10upx;
  1014. margin-bottom: 20upx;
  1015. }
  1016. .item_btn:active {
  1017. background: #ffd9b3;
  1018. border: 2upx solid #ff7f00;
  1019. }
  1020. .item_type {
  1021. display: flex;
  1022. flex-wrap: wrap;
  1023. margin-top: 20upx;
  1024. }
  1025. /* 物品保价弹框 */
  1026. .valua_icon {
  1027. width: 90%;
  1028. position: absolute;
  1029. bottom: 130upx;
  1030. left: 40upx;
  1031. }
  1032. .input {
  1033. width: 90%;
  1034. margin: 0 auto;
  1035. }
  1036. .u-input--border {
  1037. border-radius: 10upx;
  1038. border-radius: 10upx;
  1039. border: 2upx solid #F2F2F2 !important;
  1040. background: #F2F2F2 !important;
  1041. }
  1042. .input_bg {
  1043. width: 90%;
  1044. margin: 0 auto;
  1045. position: relative;
  1046. }
  1047. .input_bg image {
  1048. width: 100%;
  1049. height: 98upx;
  1050. }
  1051. .input_bg text {
  1052. position: absolute;
  1053. top: 30upx;
  1054. left: 36upx;
  1055. color: #FF7F00;
  1056. font-size: 28upx;
  1057. }
  1058. /* 红包弹框 */
  1059. .popup_money {
  1060. /* height: 400upx; */
  1061. width: 100%;
  1062. height: 630rpx;
  1063. position: relative;
  1064. background: #F2EDED;
  1065. padding-bottom: 45rpx;
  1066. /* #ifndef MP-WEIXIN */
  1067. height: 680rpx;
  1068. /* #endif */
  1069. }
  1070. .uni-scroll-view,
  1071. .uni-scroll-view-content {
  1072. position: relative;
  1073. width: 100%;
  1074. height: 100%;
  1075. background: #F2EDED;
  1076. }
  1077. .image_box {
  1078. width: 40%;
  1079. margin: 0 auto;
  1080. margin-bottom: 110rpx;
  1081. }
  1082. .money_box {
  1083. width: 93%;
  1084. margin: 0 auto;
  1085. background: #ffffff;
  1086. border-radius: 16upx;
  1087. height: 240upx;
  1088. margin-top: 10rpx;
  1089. /* margin-bottom: 35rpx; */
  1090. /* margin-top: 20rpx; */
  1091. }
  1092. .box_tit {
  1093. width: 90%;
  1094. margin: 0 auto;
  1095. height: 80upx;
  1096. display: flex;
  1097. }
  1098. .money_name {
  1099. flex: 1;
  1100. display: flex;
  1101. justify-content: left;
  1102. align-items: center;
  1103. font-size: 24upx;
  1104. font-weight: bold;
  1105. letter-spacing: 2upx;
  1106. }
  1107. .money_price {
  1108. flex: 1;
  1109. display: flex;
  1110. justify-content: flex-end;
  1111. align-items: center;
  1112. font-size: 36upx;
  1113. font-weight: bold;
  1114. color: red;
  1115. }
  1116. .money_data {
  1117. color: #999999;
  1118. font-size: 22upx;
  1119. width: 90%;
  1120. margin: 0 auto;
  1121. margin-top: -10upx;
  1122. }
  1123. .u-line {
  1124. width: 90% !important;
  1125. border-bottom-width: 6upx !important;
  1126. margin: 0 auto !important;
  1127. margin-top: 24upx !important;
  1128. margin-bottom: 24upx !important;
  1129. }
  1130. .box_bottom {
  1131. width: 90%;
  1132. margin: 0 auto;
  1133. display: flex;
  1134. height: 40upx;
  1135. }
  1136. .money_use {
  1137. flex: 1;
  1138. color: #999999;
  1139. font-size: 22upx;
  1140. display: flex;
  1141. justify-content: left;
  1142. align-items: center;
  1143. }
  1144. .lj_use {
  1145. width: 160upx;
  1146. border: 1upx solid #FF7F00;
  1147. color: #FF7F00;
  1148. text-align: center;
  1149. line-height: 46upx;
  1150. border-radius: 42upx;
  1151. font-size: 20upx;
  1152. }
  1153. .help_pay {
  1154. width: 100%;
  1155. /* position: fixed;
  1156. bottom: 120upx;
  1157. left: 0upx;
  1158. right: 0upx; */
  1159. }
  1160. .content {
  1161. /* margin-top: -380upx; */
  1162. /* position: relative; */
  1163. /* z-index: 999; */
  1164. }
  1165. .part_one {
  1166. width: 95%;
  1167. margin: 0 auto;
  1168. /* height: 190rpx; */
  1169. background: #ffffff;
  1170. border-radius: 20upx;
  1171. padding: 25rpx 10rpx;
  1172. }
  1173. .pay_tit {
  1174. width: 90%;
  1175. margin: 0 auto;
  1176. /* height: 200upx; */
  1177. position: relative;
  1178. }
  1179. .pay_name {
  1180. font-size: 32rpx;
  1181. font-weight: bold;
  1182. width: 95%;
  1183. margin: 0 auto;
  1184. letter-spacing: 1upx;
  1185. /* padding-top: 30upx; */
  1186. }
  1187. .pay_set {
  1188. color: #333333;
  1189. font-size: 29upx;
  1190. width: 95%;
  1191. margin: 0 auto;
  1192. /* margin-top: 20upx; */
  1193. }
  1194. .part_two {
  1195. width: 95%;
  1196. margin: 0 auto;
  1197. padding: 20rpx 10rpx;
  1198. background: #ffffff;
  1199. border-radius: 15rpx;
  1200. margin-top: 20rpx;
  1201. }
  1202. .tabs_box {
  1203. display: none;
  1204. margin-top: 10upx;
  1205. }
  1206. .dis {
  1207. display: block;
  1208. width: 100%;
  1209. padding-bottom: 28rpx;
  1210. }
  1211. .part_three {
  1212. width: 95%;
  1213. margin: 0 auto;
  1214. /* height: 335rpx; */
  1215. background: #ffffff;
  1216. border-radius: 20upx;
  1217. margin-top: 20upx;
  1218. }
  1219. .u-form-item__body {
  1220. position: relative !important;
  1221. }
  1222. .u-form-item--left {
  1223. position: absolute !important;
  1224. top: 30upx;
  1225. left: 15rpx;
  1226. font-size: 31rpx !important;
  1227. font-weight: bold;
  1228. letter-spacing: 2upx;
  1229. }
  1230. .u-form-item--right__content {
  1231. margin-right: 20upx !important;
  1232. }
  1233. .u-form-item {
  1234. line-height: 20upx !important;
  1235. padding: 20rpx 0 !important;
  1236. }
  1237. .u-input__input {
  1238. font-size: 31rpx !important;
  1239. }
  1240. .part_four {
  1241. width: 95%;
  1242. background: #ffffff;
  1243. margin: 0 auto;
  1244. border-radius: 20upx;
  1245. display: flex;
  1246. margin-top: 20upx;
  1247. }
  1248. .take_number {
  1249. flex: 4;
  1250. }
  1251. .number_name {
  1252. width: 90%;
  1253. margin: 0 auto;
  1254. font-size: 31upx;
  1255. font-weight: bold;
  1256. line-height: 80upx;
  1257. }
  1258. .number_text {
  1259. width: 90%;
  1260. margin: 0 auto;
  1261. color: #999999;
  1262. font-size: 25rpx;
  1263. line-height: 20upx;
  1264. }
  1265. .take_number_kg {
  1266. flex: 1;
  1267. display: flex;
  1268. justify-content: center;
  1269. align-items: center;
  1270. }
  1271. .content_sure {
  1272. display: flex;
  1273. align-items: center;
  1274. margin-bottom: 160rpx;
  1275. margin-left: 30rpx;
  1276. margin-top: 20rpx;
  1277. /* #ifndef MP-WEIXIN */
  1278. /* margin-bottom: 200px; */
  1279. /* #endif */
  1280. }
  1281. .u-checkbox__label {
  1282. font-size: 26rpx !important;
  1283. letter-spacing: 2upx;
  1284. color: #888888 !important;
  1285. }
  1286. .tabbar {
  1287. width: 100%;
  1288. height: 130rpx;
  1289. background: #ffffff;
  1290. position: fixed;
  1291. bottom: 0upx;
  1292. left: 0upx;
  1293. right: 0upx;
  1294. display: flex;
  1295. /* #ifndef MP-WEIXIN */
  1296. position: fixed;
  1297. bottom: 0upx;
  1298. left: 0upx;
  1299. right: 0upx;
  1300. /* #endif */
  1301. z-index: 99;
  1302. }
  1303. .tabbar_price {
  1304. flex: 1;
  1305. display: flex;
  1306. justify-content: left;
  1307. align-items: center;
  1308. font-size: 28upx;
  1309. font-weight: bold;
  1310. margin-left: 40upx;
  1311. }
  1312. .tabbar_price text {
  1313. color: #FF3333;
  1314. font-size: 36upx;
  1315. font-weight: 500;
  1316. }
  1317. .tabbar_btn {
  1318. flex: 1;
  1319. display: flex;
  1320. justify-content: center;
  1321. align-items: center;
  1322. }
  1323. .but {
  1324. background: #FF7F00;
  1325. width: 240upx;
  1326. height: 80upx;
  1327. text-align: center;
  1328. line-height: 80upx;
  1329. border-radius: 60upx;
  1330. color: white;
  1331. font-size: 24upx;
  1332. }
  1333. .actclass {
  1334. background-color: #FFD9B3;
  1335. }
  1336. .popup_pay {
  1337. width: 100%;
  1338. }
  1339. .pay_btn {
  1340. width: 90%;
  1341. margin: 20rpx auto 40rpx;
  1342. text-align: center;
  1343. background: #FF7F00;
  1344. height: 80rpx;
  1345. border-radius: 16rpx;
  1346. color: #ffffff;
  1347. line-height: 80rpx;
  1348. }
  1349. .one_box {
  1350. width: 100%;
  1351. /* height: 80upx; */
  1352. /* background: #F5F5F5; */
  1353. margin: 0 auto;
  1354. border-radius: 12upx;
  1355. display: flex;
  1356. /* height: 100rpx; */
  1357. /* #ifndef MP-WEIXIN */
  1358. padding: 0px 15px;
  1359. /* #endif */
  1360. }
  1361. .box_jh {
  1362. width: 90%;
  1363. margin: 0 auto;
  1364. line-height: 70rpx;
  1365. }
  1366. .box_jh image {
  1367. width: 30upx;
  1368. height: 30upx;
  1369. }
  1370. .box_dian {
  1371. /* flex: 1; */
  1372. width: 15%;
  1373. display: flex;
  1374. justify-content: center;
  1375. align-items: center;
  1376. }
  1377. .box_dian image {
  1378. width: 45rpx;
  1379. height: 45rpx;
  1380. }
  1381. .box_name {
  1382. flex: 5;
  1383. display: flex;
  1384. justify-content: left;
  1385. align-items: center;
  1386. color: #333333;
  1387. font-weight: 700;
  1388. }
  1389. .box_addres {
  1390. /* flex: 5; */
  1391. width: 80%;
  1392. font-size: 32rpx;
  1393. overflow: hidden;
  1394. }
  1395. .box_addres1 {
  1396. /* flex: 5; */
  1397. width: 80%;
  1398. font-size: 32rpx;
  1399. overflow: hidden;
  1400. text-align: right;
  1401. }
  1402. .name {
  1403. display: inline;
  1404. font-size: 31rpx;
  1405. color: #999999;
  1406. }
  1407. .number {
  1408. display: initial;
  1409. color: #999999;
  1410. font-size: 31rpx;
  1411. margin-left: 30upx;
  1412. }
  1413. .box_image {
  1414. width: 15%;
  1415. /* margin-right: 22rpx; */
  1416. display: flex;
  1417. justify-content: center;
  1418. align-items: center;
  1419. }
  1420. .icon_you {
  1421. color: #c0c4cc;
  1422. }
  1423. </style>