confirmCreateOrder.vue 24 KB

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