confirmCreateOrder.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071
  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. userAddr // 获取用户收货地址
  187. } from "@/api/order.js"
  188. import EvanSwitch from '@/components/evan-switch/evan-switch.vue'
  189. import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
  190. export default {
  191. components: {
  192. EvanSwitch,
  193. popupBottom
  194. },
  195. data() {
  196. return {
  197. address: null,
  198. addressId: null,
  199. totalNum: null,
  200. orderKey: null,
  201. price: null,
  202. liveId: null,
  203. orderList: [],
  204. userInfo: null,
  205. userAddrLiat: [], //用户地址
  206. temps: [],
  207. couponUserId: null,
  208. couponText: "请选择",
  209. couponsList: [],
  210. couponVisible: false,
  211. priceAll: {
  212. payPrice: 0,
  213. totalPostage: 0,
  214. usedIntegral: 0,
  215. totalPrice: 0.00,
  216. },
  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. this.getUserAddr()
  261. uni.$on('updateAddress', (e) => {
  262. this.address = e;
  263. this.addressId = e.addressId;
  264. });
  265. },
  266. beforeDestroy() {
  267. // 移除事件监听,避免内存泄漏
  268. uni.$off('updateAddress');
  269. },
  270. methods: {
  271. // 获取用户收货地址
  272. getUserAddr() {
  273. this.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
  274. userAddr(this.userInfo.userId).then(res => {
  275. if (res.code == 200) {
  276. console.log("用户收货地址>>>>", res.data)
  277. // this.address = res.data;
  278. this.address = res.data.find(item => item.isDefault == 1);
  279. } else {
  280. uni.showToast({
  281. title: res.msg,
  282. icon: 'none'
  283. });
  284. }
  285. },
  286. rej => {}
  287. );
  288. },
  289. // 创建订单
  290. createLiveOrder() {
  291. let data = {
  292. liveId: this.liveId,
  293. orderKey: this.orderKey,
  294. // storeId:this.storeId,,
  295. userName: this.address.realName,
  296. userPhone: this.address.phone,
  297. userAddress: this.address.province + this.address.city + this.address.district + this.address
  298. .detail,
  299. // cartId:"5",
  300. productId: this.productId,
  301. totalNum: this.totalNum,
  302. // totalPrice:999,
  303. // remark:"随便备注",
  304. }
  305. return createliveOrder(data).then(res => { // 添加 return
  306. if (res.code == 200) {
  307. this.orderList = res.order;
  308. return res.order; // 返回订单数据供后续使用
  309. } else {
  310. uni.showToast({
  311. title: res.msg,
  312. icon: 'none'
  313. });
  314. throw new Error(res.msg); // 抛出错误以便 submitOrder 捕获
  315. }
  316. });
  317. },
  318. getWeixinOrderTemps: function() {
  319. getWeixinOrderTemps().then(
  320. res => {
  321. if (res.code == 200) {
  322. this.temps = res.temp
  323. } else {
  324. }
  325. },
  326. rej => {}
  327. );
  328. },
  329. couponSelect(item) {
  330. this.couponText = "-¥" + item.couponPrice.toFixed(2);
  331. this.couponUserId = item.id;
  332. this.couponVisible = false;
  333. this.computed();
  334. },
  335. openCoupon() {
  336. let that = this;
  337. var data = {
  338. couponType: 2,
  339. useMinPrice: this.price.payPrice
  340. };
  341. getMyEnableCouponList(data).then(res => {
  342. this.couponVisible = true;
  343. that.couponsList = res.data
  344. })
  345. },
  346. integralChange(e) {
  347. this.form.useIntegral = e ? 1 : 0
  348. this.computed()
  349. },
  350. // confirm(item) {
  351. // // let data = {type:this.type,cartIds:this.cartIds};
  352. // confirm(this.confirmParam).then(
  353. // res => {
  354. // if (res.code == 200) {
  355. // this.carts = res.carts.map(item => ({
  356. // ...item,
  357. // markinfo: ""
  358. // }));
  359. // this.form.orderKey = res.orderKeys;
  360. // if (res.address != null) {
  361. // this.form.addressId = res.address.id;
  362. // this.address = res.address;
  363. // }
  364. // this.computed()
  365. // } else {
  366. // uni.showToast({
  367. // icon: 'none',
  368. // title: res.msg,
  369. // });
  370. // }
  371. // },
  372. // rej => {}
  373. // );
  374. // },
  375. // computed(item) {
  376. // let data = {
  377. // createOrderKey: this.form.createOrderKey,
  378. // couponUserId: this.couponUserId,
  379. // orderKeys: this.form.orderKey,
  380. // addressId: this.form.addressId,
  381. // useIntegral: this.form.useIntegral
  382. // };
  383. // computed(data).then(
  384. // res => {
  385. // if (res.code == 200) {
  386. // // this.price=res.data
  387. // this.price = res.data && res.data.length > 0 ? res.data : []
  388. // this.priceAll = res.data && res.data.length > 0 ? res.data[res.data.length - 1] : {
  389. // payPrice: 0,
  390. // totalPostage: 0,
  391. // usedIntegral: 0,
  392. // totalPrice: 0.00,
  393. // }
  394. // } else {
  395. // if (res.code == 501) {
  396. // uni.showToast({
  397. // icon: 'none',
  398. // title: res.msg,
  399. // });
  400. // setTimeout(function() {
  401. // uni.navigateBack({
  402. // delta: 1
  403. // })
  404. // }, 500);
  405. // return;
  406. // } else {
  407. // uni.showToast({
  408. // icon: 'none',
  409. // title: res.msg,
  410. // });
  411. // }
  412. // }
  413. // },
  414. // rej => {}
  415. // );
  416. // },
  417. // 提交订单
  418. async submitOrder() {
  419. try {
  420. if (this.orderKey == null) {
  421. uni.showToast({
  422. icon: 'none',
  423. title: '订单KEY不存在',
  424. });
  425. return;
  426. }
  427. if (this.address == null) {
  428. uni.showToast({
  429. icon: 'none',
  430. title: '收货地址不能为空',
  431. });
  432. return;
  433. }
  434. const orderList = await this.createLiveOrder(); // 等待订单数据返回
  435. const orderListStr = encodeURIComponent(JSON.stringify(orderList));
  436. uni.navigateTo({
  437. url: `/pages_shop/paymentOrder?orderList=${orderListStr}`
  438. });
  439. } catch (error) {
  440. console.error('订单创建失败:', error);
  441. uni.showToast({
  442. title: '提交失败',
  443. icon: 'none'
  444. });
  445. }
  446. }
  447. // var that=this;
  448. // if(this.form.orderKey==null){
  449. // uni.showToast({
  450. // icon:'none',
  451. // title: '订单KEY不存在',
  452. // });
  453. // return;
  454. // }
  455. // if(this.form.addressId==null){
  456. // uni.showToast({
  457. // icon:'none',
  458. // title: '收货地址不能为空',
  459. // });
  460. // return;
  461. // }
  462. // uni.requestSubscribeMessage({
  463. // tmplIds: this.temps,
  464. // success(res) {
  465. // that.createOrder();
  466. // },
  467. // fail(res) {
  468. // that.createOrder();
  469. // }
  470. // })
  471. ,
  472. // createOrder() {
  473. // const mark = this.carts.map(item => item.markinfo)
  474. // var that = this;
  475. // var data = null;
  476. // var tuiUserId = uni.getStorageSync('tuiUserId');
  477. // uni.showLoading({
  478. // title: '正在处理中...'
  479. // });
  480. // if (tuiUserId != null && tuiUserId != undefined && tuiUserId > 0) {
  481. // data = {
  482. // createOrderKey: this.form.createOrderKey,
  483. // orderCreateType: 3,
  484. // tuiUserId: tuiUserId,
  485. // companyId: this.form.companyId,
  486. // companyUserId: this.form.companyUserId,
  487. // couponUserId: this.couponUserId,
  488. // mark: mark,
  489. // orderKeys: this.form.orderKey,
  490. // addressId: this.form.addressId,
  491. // useIntegral: this.form.useIntegral,
  492. // payType: 1
  493. // };
  494. // } else {
  495. // data = {
  496. // createOrderKey: this.form.createOrderKey,
  497. // orderCreateType: 3,
  498. // companyId: this.form.companyId,
  499. // companyUserId: this.form.companyUserId,
  500. // couponUserId: this.couponUserId,
  501. // mark: mark,
  502. // orderKeys: this.form.orderKey,
  503. // addressId: this.form.addressId,
  504. // useIntegral: this.form.useIntegral,
  505. // payType: 1
  506. // };
  507. // }
  508. // create(data).then(
  509. // res => {
  510. // uni.hideLoading()
  511. // if (!res.code && res.code !== 0) {
  512. // uni.hideLoading()
  513. // // if(res.order.isPrescribe==1){
  514. // // setTimeout(function(){
  515. // // uni.redirectTo({
  516. // // url:"prescribe?orderId="+res.order.id
  517. // // })
  518. // // },200);
  519. // // }
  520. // // else{
  521. // // setTimeout(function(){
  522. // // uni.redirectTo({
  523. // // url: './paymentOrder?orderId='+res.order.id
  524. // // })
  525. // // },200);
  526. // // }
  527. // if (res.some(item => item.order.isPrescribe) == 1) {
  528. // setTimeout(function() {
  529. // let orderIds = res.filter(item => item.order.isPrescribe == 1).map(it => it
  530. // .order.id)
  531. // orderIds = orderIds.join(',')
  532. // uni.redirectTo({
  533. // url: "prescribe?orderId=" + orderIds + "&combinationOrderId=" +
  534. // encodeURIComponent(res[0].order.combinationOrderId)
  535. // })
  536. // }, 200);
  537. // } else {
  538. // setTimeout(function() {
  539. // uni.redirectTo({
  540. // url: './paymentOrder?combinationOrderId=' + encodeURIComponent(
  541. // res[0].order.combinationOrderId)
  542. // })
  543. // }, 200);
  544. // }
  545. // return;
  546. // } else {
  547. // if (res.code == 501) {
  548. // uni.showToast({
  549. // icon: 'none',
  550. // title: res.msg,
  551. // });
  552. // setTimeout(function() {
  553. // uni.navigateBack({
  554. // delta: 1
  555. // })
  556. // }, 200);
  557. // return;
  558. // } else {
  559. // uni.showToast({
  560. // icon: 'none',
  561. // title: res.msg,
  562. // });
  563. // }
  564. // }
  565. // },
  566. // rej => {}
  567. // );
  568. // },
  569. openAddress() {
  570. uni.navigateTo({
  571. url: '/pages_user/address'
  572. })
  573. }
  574. }
  575. }
  576. </script>
  577. <style lang="scss">
  578. .inner-box {
  579. padding: 20upx 20upx 140upx;
  580. .address-box {
  581. margin-bottom: 20rpx;
  582. box-sizing: border-box;
  583. min-height: 171upx;
  584. background: #FFFFFF;
  585. border-radius: 16upx;
  586. // background-image: url(../../static/images/address_bg.png);
  587. background-repeat: no-repeat;
  588. background-size: 100% 30upx;
  589. background-position: left bottom;
  590. padding: 38upx 30upx 36upx;
  591. display: flex;
  592. align-items: center;
  593. justify-content: space-between;
  594. .left {
  595. width: 92%;
  596. .name-box {
  597. display: flex;
  598. align-items: center;
  599. .text {
  600. font-size: 32upx;
  601. font-family: PingFang SC;
  602. font-weight: bold;
  603. color: #111111;
  604. line-height: 1;
  605. &.name {
  606. margin-right: 30upx;
  607. }
  608. }
  609. }
  610. .address {
  611. font-size: 28upx;
  612. font-family: PingFang SC;
  613. font-weight: 500;
  614. color: #666666;
  615. line-height: 42upx;
  616. text-align: left;
  617. margin-top: 23upx;
  618. }
  619. }
  620. .arrow-box {
  621. width: 12upx;
  622. height: 23upx;
  623. display: flex;
  624. align-items: cenetr;
  625. justify-content: cenetr;
  626. image {
  627. width: 100%;
  628. height: 100%;
  629. }
  630. }
  631. }
  632. .shopbox {
  633. background: #FFFFFF;
  634. border-radius: 16rpx;
  635. margin-bottom: 20rpx;
  636. .points {
  637. padding: 0 !important;
  638. }
  639. .remarks {
  640. padding: 0 !important;
  641. }
  642. }
  643. .shopbox-name {
  644. padding: 30rpx 30rpx 0 30rpx;
  645. font-family: PingFang SC, PingFang SC;
  646. font-weight: 400;
  647. font-size: 30rpx;
  648. color: #111;
  649. overflow: hidden;
  650. white-space: nowrap;
  651. text-overflow: ellipsis;
  652. }
  653. .goods-list {
  654. // margin-top: 20upx;
  655. padding: 0 30upx;
  656. background-color: #FFFFFF;
  657. border-radius: 16upx;
  658. .item {
  659. padding: 30upx 0;
  660. border-bottom: 1px solid #EDEEEF;
  661. display: flex;
  662. align-items: center;
  663. .img-box {
  664. width: 160upx;
  665. height: 160upx;
  666. margin-right: 30upx;
  667. image {
  668. width: 100%;
  669. height: 100%;
  670. }
  671. }
  672. .info-box {
  673. width: calc(100% - 190upx);
  674. height: 160upx;
  675. display: flex;
  676. flex-direction: column;
  677. justify-content: space-between;
  678. .name-box {
  679. font-size: 28upx;
  680. font-family: PingFang SC;
  681. font-weight: 500;
  682. color: #111111;
  683. line-height: 40upx;
  684. .tag {
  685. display: inline-block;
  686. padding: 0 6upx;
  687. height: 30upx;
  688. background: linear-gradient(90deg, #66b2ef 0%, #0bb3f2 100%);
  689. border-radius: 4upx;
  690. margin-right: 10upx;
  691. font-size: 22upx;
  692. font-family: PingFang SC;
  693. font-weight: bold;
  694. color: #FFFFFF;
  695. line-height: 30upx;
  696. float: left;
  697. margin-top: 7upx;
  698. }
  699. }
  700. .spec {
  701. margin-top: 10upx;
  702. font-size: 24upx;
  703. font-family: PingFang SC;
  704. font-weight: 500;
  705. color: #999999;
  706. line-height: 1;
  707. }
  708. .price-num {
  709. display: flex;
  710. align-items: center;
  711. justify-content: space-between;
  712. .price {
  713. display: flex;
  714. align-items: flex-end;
  715. .unit {
  716. font-size: 24upx;
  717. font-family: PingFang SC;
  718. font-weight: 500;
  719. color: #111111;
  720. line-height: 1.2;
  721. margin-right: 4upx;
  722. }
  723. .num {
  724. font-size: 32upx;
  725. font-family: PingFang SC;
  726. font-weight: 500;
  727. color: #111111;
  728. line-height: 1;
  729. }
  730. }
  731. .num {
  732. font-size: 24upx;
  733. font-family: PingFang SC;
  734. font-weight: 500;
  735. color: #999999;
  736. line-height: 1;
  737. }
  738. }
  739. }
  740. }
  741. .sub-total {
  742. height: 88upx;
  743. display: flex;
  744. align-items: center;
  745. justify-content: flex-end;
  746. .label {
  747. font-size: 24upx;
  748. font-family: PingFang SC;
  749. font-weight: 500;
  750. color: #999999;
  751. }
  752. .price {
  753. display: flex;
  754. align-items: flex-end;
  755. .unit {
  756. font-size: 24upx;
  757. font-family: PingFang SC;
  758. font-weight: 500;
  759. color: #FF6633;
  760. line-height: 1.2;
  761. margin-right: 4upx;
  762. }
  763. .num {
  764. font-size: 32upx;
  765. font-family: PingFang SC;
  766. font-weight: bold;
  767. color: #FF6633;
  768. line-height: 1;
  769. }
  770. }
  771. }
  772. }
  773. .price-info {
  774. background: #FFFFFF;
  775. border-radius: 16upx;
  776. &-title {
  777. padding: 30rpx 30rpx 20rpx 30rpx;
  778. font-family: PingFang SC, PingFang SC;
  779. font-weight: 500;
  780. font-size: 30rpx;
  781. color: #111;
  782. }
  783. &-unit {
  784. font-size: 24rpx;
  785. }
  786. &-num {
  787. font-size: 28rpx;
  788. }
  789. }
  790. .points {
  791. height: 88upx;
  792. padding: 0 30upx;
  793. background: #FFFFFF;
  794. border-radius: 16upx;
  795. display: flex;
  796. align-items: center;
  797. justify-content: space-between;
  798. .left {
  799. display: flex;
  800. align-items: center;
  801. image {
  802. width: 28upx;
  803. height: 28upx;
  804. margin-right: 20upx;
  805. }
  806. .text {
  807. font-size: 28upx;
  808. font-family: PingFang SC;
  809. font-weight: 500;
  810. color: #666666;
  811. }
  812. }
  813. .right {
  814. display: flex;
  815. align-items: center;
  816. .text {
  817. font-size: 28upx;
  818. font-family: PingFang SC;
  819. font-weight: 500;
  820. color: #111111;
  821. }
  822. image {
  823. margin-left: 15upx;
  824. width: 14upx;
  825. height: 24upx;
  826. }
  827. }
  828. }
  829. .remarks {
  830. // height: 88upx;
  831. padding: 0 30upx;
  832. background: #FFFFFF;
  833. border-radius: 16upx;
  834. margin-top: 20upx;
  835. display: flex;
  836. align-items: center;
  837. input {
  838. width: 100%;
  839. font-size: 28upx;
  840. font-family: PingFang SC;
  841. font-weight: 500;
  842. color: #000000;
  843. }
  844. .input {
  845. font-size: 28upx;
  846. font-family: PingFang SC;
  847. font-weight: 500;
  848. color: #999999;
  849. }
  850. }
  851. }
  852. .btn-foot {
  853. box-sizing: border-box;
  854. width: 100%;
  855. height: 121upx;
  856. background: #FFFFFF;
  857. padding: 16upx 30upx 16upx 60upx;
  858. display: flex;
  859. align-items: center;
  860. justify-content: flex-end;
  861. position: fixed;
  862. left: 0;
  863. bottom: 0;
  864. z-index: 99;
  865. .right {
  866. display: flex;
  867. align-items: center;
  868. .total {
  869. display: flex;
  870. align-items: flex-end;
  871. margin-right: 36upx;
  872. .label {
  873. font-size: 26upx;
  874. font-family: PingFang SC;
  875. font-weight: 500;
  876. color: #999999;
  877. line-height: 1.5;
  878. }
  879. .price {
  880. display: flex;
  881. align-items: flex-end;
  882. .unit {
  883. font-size: 32upx;
  884. font-family: PingFang SC;
  885. font-weight: bold;
  886. color: #FF6633;
  887. line-height: 1.2;
  888. margin-right: 10upx;
  889. }
  890. .num {
  891. font-size: 50upx;
  892. font-family: PingFang SC;
  893. font-weight: bold;
  894. color: #FF6633;
  895. line-height: 1;
  896. }
  897. }
  898. }
  899. .btn {
  900. width: 200upx;
  901. height: 88upx;
  902. line-height: 88upx;
  903. text-align: center;
  904. font-size: 30upx;
  905. font-family: PingFang SC;
  906. font-weight: bold;
  907. color: #FFFFFF;
  908. background: #0bb3f2;
  909. border-radius: 44upx;
  910. }
  911. }
  912. }
  913. </style>
  914. <style lang="less" scoped>
  915. .coupon {
  916. height: 100%;
  917. }
  918. /*优惠券列表公共*/
  919. .coupon-list {}
  920. .coupon-list .item {
  921. display: flex;
  922. flex-direction: column;
  923. justify-content: center;
  924. align-items: center;
  925. width: 100%;
  926. height: 1.7 * 100rpx;
  927. margin-bottom: 0.16 * 100rpx;
  928. }
  929. .coupon-list .item .money {
  930. background-size: 100% 100%;
  931. width: 2.4 * 100rpx;
  932. height: 100%;
  933. color: #fff;
  934. font-size: 0.36 * 100rpx;
  935. font-weight: bold;
  936. text-align: center;
  937. display: flex;
  938. flex-direction: column;
  939. align-items: center;
  940. justify-content: center;
  941. position: relative;
  942. }
  943. .coupon-list .item .money .img {
  944. position: absolute;
  945. width: 2.4 * 100rpx;
  946. height: 100%;
  947. color: #fff;
  948. }
  949. .coupon-list .item .money .num {
  950. font-size: 0.6 * 100rpx;
  951. }
  952. .coupon-list .item .money .pic-num {
  953. font-size: 20rpx;
  954. z-index: 99;
  955. }
  956. .coupon-list .item .text {
  957. width: 4.5 * 100rpx;
  958. padding: 0 0.17 * 100rpx 0 0.24 * 100rpx;
  959. background-color: #fff;
  960. box-sizing: border-box;
  961. }
  962. .coupon-list .item .text .condition {
  963. font-size: 0.3 * 100rpx;
  964. color: #282828;
  965. height: 0.93 * 100rpx;
  966. line-height: 0.93 * 100rpx;
  967. border-bottom: 1px solid #f0f0f0;
  968. }
  969. .coupon-list .item .text .data {
  970. font-size: 0.2 * 100rpx;
  971. color: #999;
  972. height: 0.76 * 100rpx;
  973. }
  974. .coupon-list .item .text .data .bnt {
  975. width: 1.36 * 100rpx;
  976. height: 0.44 * 100rpx;
  977. border-radius: 0.22 * 100rpx;
  978. font-size: 0.22 * 100rpx;
  979. color: #fff;
  980. text-align: center;
  981. line-height: 0.44 * 100rpx;
  982. background-color: red;
  983. }
  984. .coupon-list .item .text .data .bnt.gray {
  985. background-color: #ccc;
  986. }
  987. </style>