confirmCreateOrder.vue 24 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051
  1. <template>
  2. <view>
  3. <view class="inner-box">
  4. <!-- 收货人 -->
  5. <view class="address-box" v-if="address==null" @click="openAddress()">
  6. <view class="left">
  7. <view class="name-box">
  8. <text class="text name">添加收货地址</text>
  9. </view>
  10. </view>
  11. <view class="arrow-box">
  12. <image src="/static/images/arrow_gray.png" mode=""></image>
  13. </view>
  14. </view>
  15. <view class="address-box" v-if="address!=null" @click="openAddress()">
  16. <view class="left">
  17. <view class="name-box">
  18. <text class="text name">{{address.realName}}</text>
  19. <text class="text" v-if="address.phone!=null">{{$parsePhone(address.phone)}}</text>
  20. </view>
  21. <view class="address">
  22. {{address.province}}{{address.city}}{{address.district}}{{address.detail}}
  23. </view>
  24. </view>
  25. <view class="arrow-box">
  26. <image src="/static/images/arrow_gray.png" mode=""></image>
  27. </view>
  28. </view>
  29. <!-- 药品列表 -->
  30. <view class="shopbox" v-for="(shop,idx) in carts" :key="idx">
  31. <view class="shopbox-name" v-if="shop.storeName && shop.storeName != 'null'">
  32. <text>{{shop.storeName}}</text>
  33. </view>
  34. <view class="goods-list">
  35. <view v-for="(item,index) in shop.list" :key="index" class="item">
  36. <view class="img-box">
  37. <image :src="item.productAttrImage?item.productAttrImage:item.productImage"
  38. mode="aspectFill"></image>
  39. </view>
  40. <view class="info-box">
  41. <view>
  42. <view class="name-box ellipsis2">
  43. <view class="tag">{{utils.getDictLabelName("storeProductType",item.productType)}}
  44. </view>{{item.productName}}
  45. </view>
  46. <view class="spec ellipsis2">{{item.productAttrName}}</view>
  47. </view>
  48. <view class="price-num">
  49. <view class="price">
  50. <text class="unit">¥</text>
  51. <text class="num">{{item.price?.toFixed(2)}}</text>
  52. </view>
  53. <view class="num">x{{item.cartNum}}</view>
  54. </view>
  55. </view>
  56. </view>
  57. <!-- 运费 -->
  58. <view class="points">
  59. <view class="left">
  60. <text class="text">运费</text>
  61. </view>
  62. <view class="right" v-if="price&&price.length > 0">
  63. <text
  64. class="text">{{price[idx].payPostage==null||price[idx].payPostage==0?'免运费':price[idx].payPostage.toFixed(2)}}</text>
  65. </view>
  66. </view>
  67. <!-- 备注 -->
  68. <view class="points">
  69. <view class="left">
  70. <text class="text">备注</text>
  71. </view>
  72. <view class="remarks">
  73. <input type="text" v-model="shop.markinfo" placeholder="备注留言(选填)"
  74. placeholder-class="input" />
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- 积分 -->
  80. <view class="price-info">
  81. <view class="price-info-title">价格明细</view>
  82. <view class="points">
  83. <view class="left">
  84. <text class="text">商品总价</text>
  85. </view>
  86. <view class="right" style="align-items: baseline;">
  87. <text class="price-info-unit">¥</text>
  88. <text class="price-info-num">{{price?.toFixed(2)}}</text>
  89. </view>
  90. </view>
  91. <!-- <view class="points">
  92. <view class="left">
  93. <image src="/static/images/points.png" mode=""></image>
  94. <text class="text">可用积分</text>
  95. </view>
  96. <view class="right">
  97. <text class="text">{{priceAll.usedIntegral}}积分</text>
  98. <evan-switch @change="integralChange" v-model="checked" activeColor="#0bb3f2"
  99. inactiveColor="rgba(0, 0, 0, 0.1)"></evan-switch>
  100. </view>
  101. </view> -->
  102. <!-- <view class="points" @click="openCoupon()">
  103. <view class="left">
  104. <text class="text">优惠券</text>
  105. </view>
  106. <view class="right">
  107. <text class="text">{{couponText}}</text>
  108. <image src="/static/images/arrow4.png" mode=""></image>
  109. </view>
  110. </view> -->
  111. <view class="points">
  112. <view class="left">
  113. <text class="text">合计</text>
  114. </view>
  115. <view class="right" style="align-items: baseline;">
  116. <text class="price-info-unit">¥</text>
  117. <text class="price-info-num">{{priceSum?.toFixed(2)}}</text>
  118. </view>
  119. </view>
  120. </view>
  121. <!-- <view class="points">
  122. <view class="left">
  123. <text class="text">运费</text>
  124. </view>
  125. <view class="right">
  126. <text class="text">{{price.payPostage==null||price.payPostage==0?'免运费':price.payPostage.toFixed(2)}}</text>
  127. </view>
  128. </view> -->
  129. <!-- 备注 -->
  130. <!-- <view class="remarks">
  131. <input type="text" v-model="form.mark" placeholder="备注留言(选填)" placeholder-class="input" />
  132. </view> -->
  133. </view>
  134. <!-- 底部按钮 -->
  135. <view class="btn-foot">
  136. <view class="right">
  137. <view class="total">
  138. <text class="label">合计:</text>
  139. <view class="price">
  140. <text class="unit">¥</text>
  141. <text class="num">{{priceSum?.toFixed(2)}}</text>
  142. </view>
  143. </view>
  144. <view class="btn" @click="submitOrder">提交订单</view>
  145. </view>
  146. </view>
  147. <popupBottom ref="popup" :visible.sync="couponVisible" title=" " bgColor="#f5f5f5" radius="30" maxHeight="60%">
  148. <view class="coupon" style="height:650rpx;">
  149. <div class="coupon-list" v-if="couponsList.length > 0">
  150. <div class="item acea-row row-center-wrapper" v-for="(item, index) in couponsList" :key="index">
  151. <div class="money">
  152. <image v-if="item.status==0" class="img" src="/static/images/coupon1.png" mode="widthFix">
  153. </image>
  154. <image v-if="item.status!=0" class="img" src="/static/images/coupon2.png" mode="widthFix">
  155. </image>
  156. <div style="z-index: 999;">
  157. ¥<span class="num">{{ item.couponPrice }}</span>
  158. </div>
  159. <div class="pic-num">满{{ item.useMinPrice }}元可用</div>
  160. </div>
  161. <div class="text">
  162. <div class="condition line1">
  163. {{ item.couponTitle }}
  164. </div>
  165. <div class="data acea-row row-between-wrapper">
  166. <div>{{ item.limitTime }}到期</div>
  167. <div class="bnt bg-color-red" @click="couponSelect(item)">选择</div>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <view v-if="couponsList.length == 0" class="no-data-box">
  173. <image src="/static/images/no_data.png" mode="aspectFit"></image>
  174. <view class="empty-title">暂无数据</view>
  175. </view>
  176. </view>
  177. </popupBottom>
  178. </view>
  179. </template>
  180. <script>
  181. // import {getWeixinOrderTemps} from '@/api/common'
  182. // import {confirm,computed,create} from '@/api/storeOrder'
  183. // import { getMyEnableCouponList } from '@/api/coupon'
  184. import {
  185. createliveOrder, // 创建订单
  186. } from "@/api/order.js"
  187. import EvanSwitch from '@/components/evan-switch/evan-switch.vue'
  188. import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
  189. export default {
  190. components: {
  191. EvanSwitch,
  192. popupBottom
  193. },
  194. data() {
  195. return {
  196. address: null,
  197. addressId: null,
  198. totalNum: null,
  199. orderKey: null,
  200. price: null,
  201. liveId: null,
  202. orderList: [],
  203. userInfo: null,
  204. userAddrLiat: [], //用户地址
  205. temps: [],
  206. couponUserId: null,
  207. couponText: "请选择",
  208. couponsList: [],
  209. couponVisible: false,
  210. priceAll: {
  211. payPrice: 0,
  212. totalPostage: 0,
  213. usedIntegral: 0,
  214. totalPrice: 0.00,
  215. },
  216. address: null,
  217. carts: [],
  218. checked: false,
  219. type: null,
  220. cartIds: null,
  221. // form:{
  222. // useIntegral:0,
  223. // orderKey:null,
  224. // addressId:null,
  225. // mark:null,
  226. // companyId:null,
  227. // companyUserId:null,
  228. // createOrderKey:null,
  229. // },
  230. confirmParam: []
  231. }
  232. },
  233. computed: {
  234. priceSum() {
  235. return this.price * this.totalNum;
  236. }
  237. },
  238. onLoad(options) {
  239. console.log("确认订单", options)
  240. this.orderKey = options.orderKey;
  241. this.liveId = options.liveId
  242. this.productId = options.productId
  243. this.totalNum = Number(options.totalNum)
  244. this.price = Number(options.price)
  245. // this.confirmParam = JSON.parse(decodeURIComponent(option.confirmParam))
  246. // this.form.createOrderKey=option.createOrderKey;
  247. // this.form.companyId= option.companyId;
  248. // this.form.companyUserId=option.companyUserId;
  249. // this.cartIds=option.cartIds;
  250. // this.type=option.type;
  251. // this.confirm();
  252. // uni.$on('updateAddress', (e) => {
  253. // console.log("e",e)
  254. // this.address=e;
  255. // this.addressId=e.id;
  256. // })
  257. // this.getWeixinOrderTemps();
  258. },
  259. mounted() {
  260. uni.$on('updateAddress', (e) => {
  261. this.address = e;
  262. this.addressId = e.addressId;
  263. });
  264. },
  265. beforeDestroy() {
  266. // 移除事件监听,避免内存泄漏
  267. uni.$off('updateAddress');
  268. },
  269. methods: {
  270. // 创建订单
  271. createLiveOrder() {
  272. let data = {
  273. liveId: this.liveId,
  274. orderKey: this.orderKey,
  275. // storeId:this.storeId,,
  276. userName: "没名字",
  277. userPhone: "1234568",
  278. userAddress: "随便住",
  279. // cartId:"5",
  280. productId: this.productId,
  281. totalNum: this.totalNum,
  282. // totalPrice:999,
  283. // remark:"随便备注",
  284. }
  285. return createliveOrder(data).then(res => { // 添加 return
  286. if (res.code == 200) {
  287. this.orderList = res.order;
  288. return res.order; // 返回订单数据供后续使用
  289. } else {
  290. uni.showToast({
  291. title: res.msg,
  292. icon: 'none'
  293. });
  294. throw new Error(res.msg); // 抛出错误以便 submitOrder 捕获
  295. }
  296. });
  297. },
  298. getWeixinOrderTemps: function() {
  299. getWeixinOrderTemps().then(
  300. res => {
  301. if (res.code == 200) {
  302. this.temps = res.temp
  303. } else {
  304. }
  305. },
  306. rej => {}
  307. );
  308. },
  309. couponSelect(item) {
  310. this.couponText = "-¥" + item.couponPrice.toFixed(2);
  311. this.couponUserId = item.id;
  312. this.couponVisible = false;
  313. this.computed();
  314. },
  315. openCoupon() {
  316. let that = this;
  317. var data = {
  318. couponType: 2,
  319. useMinPrice: this.price.payPrice
  320. };
  321. getMyEnableCouponList(data).then(res => {
  322. this.couponVisible = true;
  323. that.couponsList = res.data
  324. })
  325. },
  326. integralChange(e) {
  327. this.form.useIntegral = e ? 1 : 0
  328. this.computed()
  329. },
  330. // confirm(item) {
  331. // // let data = {type:this.type,cartIds:this.cartIds};
  332. // confirm(this.confirmParam).then(
  333. // res => {
  334. // if (res.code == 200) {
  335. // this.carts = res.carts.map(item => ({
  336. // ...item,
  337. // markinfo: ""
  338. // }));
  339. // this.form.orderKey = res.orderKeys;
  340. // if (res.address != null) {
  341. // this.form.addressId = res.address.id;
  342. // this.address = res.address;
  343. // }
  344. // this.computed()
  345. // } else {
  346. // uni.showToast({
  347. // icon: 'none',
  348. // title: res.msg,
  349. // });
  350. // }
  351. // },
  352. // rej => {}
  353. // );
  354. // },
  355. // computed(item) {
  356. // let data = {
  357. // createOrderKey: this.form.createOrderKey,
  358. // couponUserId: this.couponUserId,
  359. // orderKeys: this.form.orderKey,
  360. // addressId: this.form.addressId,
  361. // useIntegral: this.form.useIntegral
  362. // };
  363. // computed(data).then(
  364. // res => {
  365. // if (res.code == 200) {
  366. // // this.price=res.data
  367. // this.price = res.data && res.data.length > 0 ? res.data : []
  368. // this.priceAll = res.data && res.data.length > 0 ? res.data[res.data.length - 1] : {
  369. // payPrice: 0,
  370. // totalPostage: 0,
  371. // usedIntegral: 0,
  372. // totalPrice: 0.00,
  373. // }
  374. // } else {
  375. // if (res.code == 501) {
  376. // uni.showToast({
  377. // icon: 'none',
  378. // title: res.msg,
  379. // });
  380. // setTimeout(function() {
  381. // uni.navigateBack({
  382. // delta: 1
  383. // })
  384. // }, 500);
  385. // return;
  386. // } else {
  387. // uni.showToast({
  388. // icon: 'none',
  389. // title: res.msg,
  390. // });
  391. // }
  392. // }
  393. // },
  394. // rej => {}
  395. // );
  396. // },
  397. // 提交订单
  398. async submitOrder() {
  399. try {
  400. if (this.orderKey == null) {
  401. uni.showToast({
  402. icon: 'none',
  403. title: '订单KEY不存在',
  404. });
  405. return;
  406. }
  407. if (this.address == null) {
  408. uni.showToast({
  409. icon: 'none',
  410. title: '收货地址不能为空',
  411. });
  412. return;
  413. }
  414. const orderList = await this.createLiveOrder(); // 等待订单数据返回
  415. const orderListStr = encodeURIComponent(JSON.stringify(orderList));
  416. uni.navigateTo({
  417. url: `/pages_shop/paymentOrder?orderList=${orderListStr}`
  418. });
  419. } catch (error) {
  420. console.error('订单创建失败:', error);
  421. uni.showToast({
  422. title: '提交失败',
  423. icon: 'none'
  424. });
  425. }
  426. }
  427. // var that=this;
  428. // if(this.form.orderKey==null){
  429. // uni.showToast({
  430. // icon:'none',
  431. // title: '订单KEY不存在',
  432. // });
  433. // return;
  434. // }
  435. // if(this.form.addressId==null){
  436. // uni.showToast({
  437. // icon:'none',
  438. // title: '收货地址不能为空',
  439. // });
  440. // return;
  441. // }
  442. // uni.requestSubscribeMessage({
  443. // tmplIds: this.temps,
  444. // success(res) {
  445. // that.createOrder();
  446. // },
  447. // fail(res) {
  448. // that.createOrder();
  449. // }
  450. // })
  451. ,
  452. // createOrder() {
  453. // const mark = this.carts.map(item => item.markinfo)
  454. // var that = this;
  455. // var data = null;
  456. // var tuiUserId = uni.getStorageSync('tuiUserId');
  457. // uni.showLoading({
  458. // title: '正在处理中...'
  459. // });
  460. // if (tuiUserId != null && tuiUserId != undefined && tuiUserId > 0) {
  461. // data = {
  462. // createOrderKey: this.form.createOrderKey,
  463. // orderCreateType: 3,
  464. // tuiUserId: tuiUserId,
  465. // companyId: this.form.companyId,
  466. // companyUserId: this.form.companyUserId,
  467. // couponUserId: this.couponUserId,
  468. // mark: mark,
  469. // orderKeys: this.form.orderKey,
  470. // addressId: this.form.addressId,
  471. // useIntegral: this.form.useIntegral,
  472. // payType: 1
  473. // };
  474. // } else {
  475. // data = {
  476. // createOrderKey: this.form.createOrderKey,
  477. // orderCreateType: 3,
  478. // companyId: this.form.companyId,
  479. // companyUserId: this.form.companyUserId,
  480. // couponUserId: this.couponUserId,
  481. // mark: mark,
  482. // orderKeys: this.form.orderKey,
  483. // addressId: this.form.addressId,
  484. // useIntegral: this.form.useIntegral,
  485. // payType: 1
  486. // };
  487. // }
  488. // create(data).then(
  489. // res => {
  490. // uni.hideLoading()
  491. // if (!res.code && res.code !== 0) {
  492. // uni.hideLoading()
  493. // // if(res.order.isPrescribe==1){
  494. // // setTimeout(function(){
  495. // // uni.redirectTo({
  496. // // url:"prescribe?orderId="+res.order.id
  497. // // })
  498. // // },200);
  499. // // }
  500. // // else{
  501. // // setTimeout(function(){
  502. // // uni.redirectTo({
  503. // // url: './paymentOrder?orderId='+res.order.id
  504. // // })
  505. // // },200);
  506. // // }
  507. // if (res.some(item => item.order.isPrescribe) == 1) {
  508. // setTimeout(function() {
  509. // let orderIds = res.filter(item => item.order.isPrescribe == 1).map(it => it
  510. // .order.id)
  511. // orderIds = orderIds.join(',')
  512. // uni.redirectTo({
  513. // url: "prescribe?orderId=" + orderIds + "&combinationOrderId=" +
  514. // encodeURIComponent(res[0].order.combinationOrderId)
  515. // })
  516. // }, 200);
  517. // } else {
  518. // setTimeout(function() {
  519. // uni.redirectTo({
  520. // url: './paymentOrder?combinationOrderId=' + encodeURIComponent(
  521. // res[0].order.combinationOrderId)
  522. // })
  523. // }, 200);
  524. // }
  525. // return;
  526. // } else {
  527. // if (res.code == 501) {
  528. // uni.showToast({
  529. // icon: 'none',
  530. // title: res.msg,
  531. // });
  532. // setTimeout(function() {
  533. // uni.navigateBack({
  534. // delta: 1
  535. // })
  536. // }, 200);
  537. // return;
  538. // } else {
  539. // uni.showToast({
  540. // icon: 'none',
  541. // title: res.msg,
  542. // });
  543. // }
  544. // }
  545. // },
  546. // rej => {}
  547. // );
  548. // },
  549. openAddress() {
  550. uni.navigateTo({
  551. url: '/pages_user/address'
  552. })
  553. }
  554. }
  555. }
  556. </script>
  557. <style lang="scss">
  558. .inner-box {
  559. padding: 20upx 20upx 140upx;
  560. .address-box {
  561. margin-bottom: 20rpx;
  562. box-sizing: border-box;
  563. min-height: 171upx;
  564. background: #FFFFFF;
  565. border-radius: 16upx;
  566. // background-image: url(../../static/images/address_bg.png);
  567. background-repeat: no-repeat;
  568. background-size: 100% 30upx;
  569. background-position: left bottom;
  570. padding: 38upx 30upx 36upx;
  571. display: flex;
  572. align-items: center;
  573. justify-content: space-between;
  574. .left {
  575. width: 92%;
  576. .name-box {
  577. display: flex;
  578. align-items: center;
  579. .text {
  580. font-size: 32upx;
  581. font-family: PingFang SC;
  582. font-weight: bold;
  583. color: #111111;
  584. line-height: 1;
  585. &.name {
  586. margin-right: 30upx;
  587. }
  588. }
  589. }
  590. .address {
  591. font-size: 28upx;
  592. font-family: PingFang SC;
  593. font-weight: 500;
  594. color: #666666;
  595. line-height: 42upx;
  596. text-align: left;
  597. margin-top: 23upx;
  598. }
  599. }
  600. .arrow-box {
  601. width: 12upx;
  602. height: 23upx;
  603. display: flex;
  604. align-items: cenetr;
  605. justify-content: cenetr;
  606. image {
  607. width: 100%;
  608. height: 100%;
  609. }
  610. }
  611. }
  612. .shopbox {
  613. background: #FFFFFF;
  614. border-radius: 16rpx;
  615. margin-bottom: 20rpx;
  616. .points {
  617. padding: 0 !important;
  618. }
  619. .remarks {
  620. padding: 0 !important;
  621. }
  622. }
  623. .shopbox-name {
  624. padding: 30rpx 30rpx 0 30rpx;
  625. font-family: PingFang SC, PingFang SC;
  626. font-weight: 400;
  627. font-size: 30rpx;
  628. color: #111;
  629. overflow: hidden;
  630. white-space: nowrap;
  631. text-overflow: ellipsis;
  632. }
  633. .goods-list {
  634. // margin-top: 20upx;
  635. padding: 0 30upx;
  636. background-color: #FFFFFF;
  637. border-radius: 16upx;
  638. .item {
  639. padding: 30upx 0;
  640. border-bottom: 1px solid #EDEEEF;
  641. display: flex;
  642. align-items: center;
  643. .img-box {
  644. width: 160upx;
  645. height: 160upx;
  646. margin-right: 30upx;
  647. image {
  648. width: 100%;
  649. height: 100%;
  650. }
  651. }
  652. .info-box {
  653. width: calc(100% - 190upx);
  654. height: 160upx;
  655. display: flex;
  656. flex-direction: column;
  657. justify-content: space-between;
  658. .name-box {
  659. font-size: 28upx;
  660. font-family: PingFang SC;
  661. font-weight: 500;
  662. color: #111111;
  663. line-height: 40upx;
  664. .tag {
  665. display: inline-block;
  666. padding: 0 6upx;
  667. height: 30upx;
  668. background: linear-gradient(90deg, #66b2ef 0%, #0bb3f2 100%);
  669. border-radius: 4upx;
  670. margin-right: 10upx;
  671. font-size: 22upx;
  672. font-family: PingFang SC;
  673. font-weight: bold;
  674. color: #FFFFFF;
  675. line-height: 30upx;
  676. float: left;
  677. margin-top: 7upx;
  678. }
  679. }
  680. .spec {
  681. margin-top: 10upx;
  682. font-size: 24upx;
  683. font-family: PingFang SC;
  684. font-weight: 500;
  685. color: #999999;
  686. line-height: 1;
  687. }
  688. .price-num {
  689. display: flex;
  690. align-items: center;
  691. justify-content: space-between;
  692. .price {
  693. display: flex;
  694. align-items: flex-end;
  695. .unit {
  696. font-size: 24upx;
  697. font-family: PingFang SC;
  698. font-weight: 500;
  699. color: #111111;
  700. line-height: 1.2;
  701. margin-right: 4upx;
  702. }
  703. .num {
  704. font-size: 32upx;
  705. font-family: PingFang SC;
  706. font-weight: 500;
  707. color: #111111;
  708. line-height: 1;
  709. }
  710. }
  711. .num {
  712. font-size: 24upx;
  713. font-family: PingFang SC;
  714. font-weight: 500;
  715. color: #999999;
  716. line-height: 1;
  717. }
  718. }
  719. }
  720. }
  721. .sub-total {
  722. height: 88upx;
  723. display: flex;
  724. align-items: center;
  725. justify-content: flex-end;
  726. .label {
  727. font-size: 24upx;
  728. font-family: PingFang SC;
  729. font-weight: 500;
  730. color: #999999;
  731. }
  732. .price {
  733. display: flex;
  734. align-items: flex-end;
  735. .unit {
  736. font-size: 24upx;
  737. font-family: PingFang SC;
  738. font-weight: 500;
  739. color: #FF6633;
  740. line-height: 1.2;
  741. margin-right: 4upx;
  742. }
  743. .num {
  744. font-size: 32upx;
  745. font-family: PingFang SC;
  746. font-weight: bold;
  747. color: #FF6633;
  748. line-height: 1;
  749. }
  750. }
  751. }
  752. }
  753. .price-info {
  754. background: #FFFFFF;
  755. border-radius: 16upx;
  756. &-title {
  757. padding: 30rpx 30rpx 20rpx 30rpx;
  758. font-family: PingFang SC, PingFang SC;
  759. font-weight: 500;
  760. font-size: 30rpx;
  761. color: #111;
  762. }
  763. &-unit {
  764. font-size: 24rpx;
  765. }
  766. &-num {
  767. font-size: 28rpx;
  768. }
  769. }
  770. .points {
  771. height: 88upx;
  772. padding: 0 30upx;
  773. background: #FFFFFF;
  774. border-radius: 16upx;
  775. display: flex;
  776. align-items: center;
  777. justify-content: space-between;
  778. .left {
  779. display: flex;
  780. align-items: center;
  781. image {
  782. width: 28upx;
  783. height: 28upx;
  784. margin-right: 20upx;
  785. }
  786. .text {
  787. font-size: 28upx;
  788. font-family: PingFang SC;
  789. font-weight: 500;
  790. color: #666666;
  791. }
  792. }
  793. .right {
  794. display: flex;
  795. align-items: center;
  796. .text {
  797. font-size: 28upx;
  798. font-family: PingFang SC;
  799. font-weight: 500;
  800. color: #111111;
  801. }
  802. image {
  803. margin-left: 15upx;
  804. width: 14upx;
  805. height: 24upx;
  806. }
  807. }
  808. }
  809. .remarks {
  810. // height: 88upx;
  811. padding: 0 30upx;
  812. background: #FFFFFF;
  813. border-radius: 16upx;
  814. margin-top: 20upx;
  815. display: flex;
  816. align-items: center;
  817. input {
  818. width: 100%;
  819. font-size: 28upx;
  820. font-family: PingFang SC;
  821. font-weight: 500;
  822. color: #000000;
  823. }
  824. .input {
  825. font-size: 28upx;
  826. font-family: PingFang SC;
  827. font-weight: 500;
  828. color: #999999;
  829. }
  830. }
  831. }
  832. .btn-foot {
  833. box-sizing: border-box;
  834. width: 100%;
  835. height: 121upx;
  836. background: #FFFFFF;
  837. padding: 16upx 30upx 16upx 60upx;
  838. display: flex;
  839. align-items: center;
  840. justify-content: flex-end;
  841. position: fixed;
  842. left: 0;
  843. bottom: 0;
  844. z-index: 99;
  845. .right {
  846. display: flex;
  847. align-items: center;
  848. .total {
  849. display: flex;
  850. align-items: flex-end;
  851. margin-right: 36upx;
  852. .label {
  853. font-size: 26upx;
  854. font-family: PingFang SC;
  855. font-weight: 500;
  856. color: #999999;
  857. line-height: 1.5;
  858. }
  859. .price {
  860. display: flex;
  861. align-items: flex-end;
  862. .unit {
  863. font-size: 32upx;
  864. font-family: PingFang SC;
  865. font-weight: bold;
  866. color: #FF6633;
  867. line-height: 1.2;
  868. margin-right: 10upx;
  869. }
  870. .num {
  871. font-size: 50upx;
  872. font-family: PingFang SC;
  873. font-weight: bold;
  874. color: #FF6633;
  875. line-height: 1;
  876. }
  877. }
  878. }
  879. .btn {
  880. width: 200upx;
  881. height: 88upx;
  882. line-height: 88upx;
  883. text-align: center;
  884. font-size: 30upx;
  885. font-family: PingFang SC;
  886. font-weight: bold;
  887. color: #FFFFFF;
  888. background: #0bb3f2;
  889. border-radius: 44upx;
  890. }
  891. }
  892. }
  893. </style>
  894. <style lang="less" scoped>
  895. .coupon {
  896. height: 100%;
  897. }
  898. /*优惠券列表公共*/
  899. .coupon-list {}
  900. .coupon-list .item {
  901. display: flex;
  902. flex-direction: column;
  903. justify-content: center;
  904. align-items: center;
  905. width: 100%;
  906. height: 1.7 * 100rpx;
  907. margin-bottom: 0.16 * 100rpx;
  908. }
  909. .coupon-list .item .money {
  910. background-size: 100% 100%;
  911. width: 2.4 * 100rpx;
  912. height: 100%;
  913. color: #fff;
  914. font-size: 0.36 * 100rpx;
  915. font-weight: bold;
  916. text-align: center;
  917. display: flex;
  918. flex-direction: column;
  919. align-items: center;
  920. justify-content: center;
  921. position: relative;
  922. }
  923. .coupon-list .item .money .img {
  924. position: absolute;
  925. width: 2.4 * 100rpx;
  926. height: 100%;
  927. color: #fff;
  928. }
  929. .coupon-list .item .money .num {
  930. font-size: 0.6 * 100rpx;
  931. }
  932. .coupon-list .item .money .pic-num {
  933. font-size: 20rpx;
  934. z-index: 99;
  935. }
  936. .coupon-list .item .text {
  937. width: 4.5 * 100rpx;
  938. padding: 0 0.17 * 100rpx 0 0.24 * 100rpx;
  939. background-color: #fff;
  940. box-sizing: border-box;
  941. }
  942. .coupon-list .item .text .condition {
  943. font-size: 0.3 * 100rpx;
  944. color: #282828;
  945. height: 0.93 * 100rpx;
  946. line-height: 0.93 * 100rpx;
  947. border-bottom: 1px solid #f0f0f0;
  948. }
  949. .coupon-list .item .text .data {
  950. font-size: 0.2 * 100rpx;
  951. color: #999;
  952. height: 0.76 * 100rpx;
  953. }
  954. .coupon-list .item .text .data .bnt {
  955. width: 1.36 * 100rpx;
  956. height: 0.44 * 100rpx;
  957. border-radius: 0.22 * 100rpx;
  958. font-size: 0.22 * 100rpx;
  959. color: #fff;
  960. text-align: center;
  961. line-height: 0.44 * 100rpx;
  962. background-color: red;
  963. }
  964. .coupon-list .item .text .data .bnt.gray {
  965. background-color: #ccc;
  966. }
  967. </style>