confirmCreateOrder.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065
  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+"&companyUserId="+that.form.companyUserId +"&dataKey="+that.dataKey+"&combinationOrderId=" + encodeURIComponent(res.data[0].order.combinationOrderId)
  514. })
  515. }, 200);
  516. } else {
  517. setTimeout(function() {
  518. uni.redirectTo({
  519. url: '/pages_shopping/paymentOrder?combinationOrderId=' +
  520. encodeURIComponent(res.data[0].order.combinationOrderId)
  521. })
  522. }, 200);
  523. }
  524. // if(res.order.isPrescribe==1){
  525. // setTimeout(function(){
  526. // uni.redirectTo({
  527. // url:"/pages_shopping/prescribe?orderId="+res.order.id
  528. // })
  529. // },200);
  530. // }
  531. // else{
  532. // setTimeout(function(){
  533. // uni.redirectTo({
  534. // url: '/pages_shopping/paymentOrder?orderId='+res.order.id
  535. // })
  536. // },200);
  537. // }
  538. return;
  539. } else {
  540. if (res.code == 501) {
  541. uni.showToast({
  542. icon: 'none',
  543. title: res.msg,
  544. });
  545. setTimeout(function() {
  546. uni.navigateBack({
  547. delta: 1
  548. })
  549. }, 200);
  550. return;
  551. } else {
  552. uni.showToast({
  553. icon: 'none',
  554. title: res.msg,
  555. });
  556. }
  557. }
  558. },
  559. rej => {}
  560. );
  561. },
  562. openAddress() {
  563. uni.navigateTo({
  564. url: '/pages_user/address'
  565. })
  566. }
  567. }
  568. }
  569. </script>
  570. <style lang="scss" scoped>
  571. .inner-box {
  572. padding: 20upx 20upx 140upx;
  573. .address-box {
  574. box-sizing: border-box;
  575. min-height: 171upx;
  576. background: #FFFFFF;
  577. border-radius: 16upx;
  578. background-image: url(https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/address_bg.png);
  579. background-repeat: no-repeat;
  580. background-size: 100% 30upx;
  581. background-position: left bottom;
  582. padding: 38upx 30upx 36upx;
  583. display: flex;
  584. align-items: center;
  585. justify-content: space-between;
  586. .left {
  587. width: 92%;
  588. .name-box {
  589. display: flex;
  590. align-items: center;
  591. .text {
  592. font-size: 32upx;
  593. font-family: PingFang SC;
  594. font-weight: bold;
  595. color: #111111;
  596. line-height: 1;
  597. &.name {
  598. margin-right: 30upx;
  599. }
  600. }
  601. }
  602. .address {
  603. font-size: 28upx;
  604. font-family: PingFang SC;
  605. font-weight: 500;
  606. color: #666666;
  607. line-height: 42upx;
  608. text-align: left;
  609. margin-top: 23upx;
  610. }
  611. }
  612. .arrow-box {
  613. width: 12upx;
  614. height: 23upx;
  615. display: flex;
  616. align-items: cenetr;
  617. justify-content: cenetr;
  618. image {
  619. width: 100%;
  620. height: 100%;
  621. }
  622. }
  623. }
  624. .shopbox {
  625. background: #FFFFFF;
  626. border-radius: 16rpx;
  627. margin: 20rpx 0;
  628. .points {
  629. padding: 0 !important;
  630. }
  631. .remarks {
  632. padding: 0 !important;
  633. }
  634. }
  635. .shopbox-name {
  636. padding: 30rpx 30rpx 0 30rpx;
  637. font-family: PingFang SC, PingFang SC;
  638. font-weight: bold;
  639. font-size: 30rpx;
  640. color: #111;
  641. overflow: hidden;
  642. white-space: nowrap;
  643. text-overflow: ellipsis;
  644. }
  645. .goods-list {
  646. // margin-top: 20upx;
  647. padding: 0 30upx;
  648. background-color: #FFFFFF;
  649. border-radius: 16upx;
  650. .item {
  651. padding: 30upx 0;
  652. border-bottom: 1px solid #EDEEEF;
  653. display: flex;
  654. align-items: center;
  655. .img-box {
  656. width: 160upx;
  657. height: 160upx;
  658. margin-right: 30upx;
  659. image {
  660. width: 100%;
  661. height: 100%;
  662. }
  663. }
  664. .info-box {
  665. width: calc(100% - 190upx);
  666. height: 160upx;
  667. display: flex;
  668. flex-direction: column;
  669. justify-content: space-between;
  670. .name-box {
  671. font-size: 28upx;
  672. font-family: PingFang SC;
  673. font-weight: 500;
  674. color: #111111;
  675. line-height: 40upx;
  676. .tag {
  677. display: inline-block;
  678. padding: 0 6upx;
  679. height: 30upx;
  680. background: linear-gradient(90deg, #66b2ef 0%, #0bb3f2 100%);
  681. border-radius: 4upx;
  682. margin-right: 10upx;
  683. font-size: 22upx;
  684. font-family: PingFang SC;
  685. font-weight: bold;
  686. color: #FFFFFF;
  687. line-height: 30upx;
  688. float: left;
  689. margin-top: 7upx;
  690. }
  691. }
  692. .spec {
  693. margin-top: 10upx;
  694. font-size: 24upx;
  695. font-family: PingFang SC;
  696. font-weight: 500;
  697. color: #999999;
  698. line-height: 1;
  699. }
  700. .price-num {
  701. display: flex;
  702. align-items: center;
  703. justify-content: space-between;
  704. .price {
  705. display: flex;
  706. align-items: flex-end;
  707. .unit {
  708. font-size: 24upx;
  709. font-family: PingFang SC;
  710. font-weight: 500;
  711. color: #111111;
  712. line-height: 1.2;
  713. margin-right: 4upx;
  714. }
  715. .num {
  716. font-size: 32upx;
  717. font-family: PingFang SC;
  718. font-weight: 500;
  719. color: #111111;
  720. line-height: 1;
  721. }
  722. }
  723. .num {
  724. font-size: 24upx;
  725. font-family: PingFang SC;
  726. font-weight: 500;
  727. color: #999999;
  728. line-height: 1;
  729. }
  730. }
  731. }
  732. }
  733. .sub-total {
  734. height: 88upx;
  735. display: flex;
  736. align-items: center;
  737. justify-content: flex-end;
  738. .label {
  739. font-size: 24upx;
  740. font-family: PingFang SC;
  741. font-weight: 500;
  742. color: #999999;
  743. }
  744. .price {
  745. display: flex;
  746. align-items: flex-end;
  747. .unit {
  748. font-size: 24upx;
  749. font-family: PingFang SC;
  750. font-weight: 500;
  751. color: #FF6633;
  752. line-height: 1.2;
  753. margin-right: 4upx;
  754. }
  755. .num {
  756. font-size: 32upx;
  757. font-family: PingFang SC;
  758. font-weight: bold;
  759. color: #FF6633;
  760. line-height: 1;
  761. }
  762. }
  763. }
  764. }
  765. .price-info {
  766. background: #FFFFFF;
  767. border-radius: 16upx;
  768. &-title {
  769. padding: 30rpx 30rpx 20rpx 30rpx;
  770. font-family: PingFang SC, PingFang SC;
  771. font-weight: 500;
  772. font-size: 30rpx;
  773. color: #111;
  774. }
  775. &-unit {
  776. font-size: 24rpx;
  777. }
  778. &-num {
  779. font-size: 28rpx;
  780. }
  781. }
  782. .points {
  783. height: 88upx;
  784. width: 100%;
  785. padding: 0 30upx;
  786. box-sizing: border-box;
  787. background: #FFFFFF;
  788. border-radius: 16upx;
  789. display: flex;
  790. align-items: center;
  791. justify-content: space-between;
  792. .left {
  793. display: flex;
  794. align-items: center;
  795. image {
  796. width: 28upx;
  797. height: 28upx;
  798. margin-right: 20upx;
  799. }
  800. .text {
  801. font-size: 28upx;
  802. font-family: PingFang SC;
  803. font-weight: 500;
  804. color: #666666;
  805. }
  806. }
  807. .right {
  808. display: flex;
  809. align-items: center;
  810. .text {
  811. font-size: 28upx;
  812. font-family: PingFang SC;
  813. font-weight: 500;
  814. color: #111111;
  815. }
  816. image {
  817. margin-left: 15upx;
  818. width: 14upx;
  819. height: 24upx;
  820. }
  821. }
  822. }
  823. .remarks {
  824. height: 88upx;
  825. padding: 0 30upx;
  826. background: #FFFFFF;
  827. border-radius: 16upx;
  828. display: flex;
  829. align-items: center;
  830. input {
  831. width: 100%;
  832. font-size: 28upx;
  833. font-family: PingFang SC;
  834. font-weight: 500;
  835. color: #000000;
  836. }
  837. .input {
  838. font-size: 28upx;
  839. font-family: PingFang SC;
  840. font-weight: 500;
  841. color: #999999;
  842. }
  843. }
  844. }
  845. .agreement {
  846. font-size: 28rpx;
  847. font-family: PingFang SC;
  848. font-weight: 500;
  849. color: red;
  850. padding: 30rpx 0;
  851. }
  852. .btn-foot {
  853. box-sizing: border-box;
  854. width: 100%;
  855. height: 121upx;
  856. background: #FFFFFF;
  857. padding: 16upx;
  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. //
  914. </style>
  915. // <style lang="less" scoped>
  916. .coupon {
  917. height: 100%;
  918. }
  919. /*优惠券列表公共*/
  920. .coupon-list {}
  921. .coupon-list .item {
  922. display: flex;
  923. flex-direction: column;
  924. justify-content: center;
  925. align-items: center;
  926. width: 100%;
  927. height: 1.7 * 100rpx;
  928. margin-bottom: 0.16 * 100rpx;
  929. }
  930. .coupon-list .item .money {
  931. background-size: 100% 100%;
  932. width: 2.4 * 100rpx;
  933. height: 100%;
  934. color: #fff;
  935. font-size: 0.36 * 100rpx;
  936. font-weight: bold;
  937. text-align: center;
  938. display: flex;
  939. flex-direction: column;
  940. align-items: center;
  941. justify-content: center;
  942. position: relative;
  943. }
  944. .coupon-list .item .money .img {
  945. position: absolute;
  946. width: 2.4 * 100rpx;
  947. height: 100%;
  948. color: #fff;
  949. }
  950. .coupon-list .item .money .num {
  951. font-size: 0.6 * 100rpx;
  952. }
  953. .coupon-list .item .money .pic-num {
  954. font-size: 20rpx;
  955. z-index: 99;
  956. }
  957. .coupon-list .item .text {
  958. width: 4.5 * 100rpx;
  959. padding: 0 0.17 * 100rpx 0 0.24 * 100rpx;
  960. background-color: #fff;
  961. box-sizing: border-box;
  962. }
  963. .coupon-list .item .text .condition {
  964. font-size: 0.3 * 100rpx;
  965. color: #282828;
  966. height: 0.93 * 100rpx;
  967. line-height: 0.93 * 100rpx;
  968. border-bottom: 1px solid #f0f0f0;
  969. }
  970. .coupon-list .item .text .data {
  971. font-size: 0.2 * 100rpx;
  972. color: #999;
  973. height: 0.76 * 100rpx;
  974. }
  975. .coupon-list .item .text .data .bnt {
  976. width: 1.36 * 100rpx;
  977. height: 0.44 * 100rpx;
  978. border-radius: 0.22 * 100rpx;
  979. font-size: 0.22 * 100rpx;
  980. color: #fff;
  981. text-align: center;
  982. line-height: 0.44 * 100rpx;
  983. background-color: red;
  984. }
  985. .coupon-list .item .text .data .bnt.gray {
  986. background-color: #ccc;
  987. }
  988. </style>