confirmCreateOrder.vue 25 KB

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