confirmCreateOrder.vue 25 KB

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