confirm.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  1. <template>
  2. <view class="page">
  3. <view class="pro-sec flex-row justify-between section_3">
  4. <view class="flex-row">
  5. <image src="/static/temp/pro.png" class="image_5" mode="aspectFill" />
  6. <view class="flex-col group_7">
  7. <view class="flex-col items-start">
  8. <text class="text_2 clamp">幸福西饼Rice盲盒</text>
  9. <view class="stars align-center"><image src="/static/mang_star.png" class="image_6" v-for="(item, idx) in 3" :key="idx" /></view>
  10. </view>
  11. <view class="group_9">
  12. <text class="text_3">¥</text>
  13. <text class="text_4">149.00</text>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="flex-col items-end group_10">
  18. <text class="text_7">随机搭配</text>
  19. <!-- <text class="text_8">*1</text> -->
  20. <uni-number-box
  21. class="step"
  22. :min="1"
  23. :max="stock"
  24. :disabled="number >= stock"
  25. :value="number"
  26. :isMax="number >= stock ? true : false"
  27. :isMin="number === 1"
  28. @eventChange="numberChange"
  29. ></uni-number-box>
  30. </view>
  31. </view>
  32. <view class="loc-sec flex-col">
  33. <view class="flex-row section_5">
  34. <view class="flex-col items-start group_11">
  35. <text class="text_9 clamp">幸福西饼万达店</text>
  36. <text class="text_11 clamp2">长安路与香港路交汇处万达广场3楼1104</text>
  37. </view>
  38. <view class="align-center group_12">
  39. <view class="section_6"></view>
  40. <image
  41. src="/static/confirm-phone.png"
  42. class="image_7"
  43. />
  44. </view>
  45. </view>
  46. <view class="flex-row justify-between group_13">
  47. <text class="text_12">自提时间</text>
  48. <view class="flex-row" @tap="openTime">
  49. <text class="text_14" :class="{active: show_time}">{{show_time? show_time : '请选择'}}</text>
  50. <image
  51. src="/static/confirm-rarrow.png"
  52. class="image_8"
  53. />
  54. </view>
  55. </view>
  56. </view>
  57. <view class="price-sec flex-col">
  58. <view class="flex-row justify-between group_15">
  59. <text class="text_16">商品总额</text>
  60. <text class="text_17">¥149.00</text>
  61. </view>
  62. <view class="flex-row justify-between group_13">
  63. <text class="text_12">优惠券</text>
  64. <view class="flex-row group_16" @tap="showCoupons">
  65. <text class="text_14">请选择</text>
  66. <image
  67. src="/static/confirm-rarrow.png"
  68. class="image_8"
  69. />
  70. </view>
  71. </view>
  72. </view>
  73. <view class="note-sec flex-col">
  74. <text class="text_20">订单备注</text>
  75. <view class="flex-col items-start text-wrapper">
  76. <textarea class="area" placeholder="请输入备注信息"></textarea>
  77. </view>
  78. </view>
  79. <safeArea height="128rpx">
  80. <template v-slot:btn>
  81. <view class="btn-wrap justify-between">
  82. <view class="align-center group_17">
  83. <text class="text_22">待支付</text>
  84. <view class="group_18 align-center">
  85. <text class="text_23">¥</text>
  86. <text class="text_24 clamp">151.00</text>
  87. </view>
  88. </view>
  89. <view class="flex-col items-center text-wrapper_1"><text class="text_25">立即支付</text></view>
  90. </view>
  91. </template>
  92. </safeArea>
  93. <datetime @rundata="getTime" ref="timeRef" :end='enddate' :start='startdate' default='start'></datetime>
  94. <popup ref="couponRef" type="bottom">
  95. <view class="coupon-panel">
  96. <view class="cancel-wrap align-center justify-center">
  97. <text class="zicon zicon-quxiao ic" @tap="hideCoupons"></text>
  98. </view>
  99. <view class="title-wrap">
  100. 选择优惠券
  101. </view>
  102. <view class="content-wrap">
  103. <scroll-view scroll-y="true" class="scroll">
  104. <view class="item flex-col justify-center" v-for="(item,idx) in 10" :key="idx">
  105. <view class="name clamp">店铺优惠1</view>
  106. <view class="tips">
  107. <text class="stxt">消费金额</text>
  108. <text class="mtxt">满30减5</text>
  109. </view>
  110. </view>
  111. </scroll-view>
  112. </view>
  113. </view>
  114. </popup>
  115. </view>
  116. </template>
  117. <script>
  118. import uniNumberBox from './components/uni-number-box.vue';
  119. import datetime from './components/datetime.vue';
  120. export default {
  121. components: {
  122. uniNumberBox,
  123. datetime
  124. },
  125. data() {
  126. return {
  127. stock: 10000,
  128. number: 1,
  129. show_time:'', //自提时间
  130. couponList: [], //优惠券列表
  131. useCouponIndex: -1,
  132. coupon_price: 0.0, //优惠券金额
  133. price: 0.0, //商品金额
  134. total: 0.0 ,//实付金额
  135. startdate: '',
  136. enddate: '2042-05-30 23:59',
  137. };
  138. },
  139. onLoad() {
  140. let date = new Date();
  141. this.startdate = this.$tools.handleDatetime(date);
  142. },
  143. methods: {
  144. //数量
  145. async numberChange(data) {
  146. //number,index
  147. this.number = data.number;
  148. this.calcTotal();
  149. },
  150. // 计算价格
  151. calcTotal() {
  152. let price = 0;
  153. let number = 0; // 产品数量
  154. //计算出当前产品price,number
  155. this.price = price.toFixed(2);
  156. let total = price;
  157. // 检查当前优惠券是否满足使用条件
  158. this.coupon_price = 0.0;
  159. if (this.useCouponIndex != -1 && this.couponList && this.couponList[this.useCouponIndex]) {
  160. this.coupon_price = this.couponList[this.useCouponIndex].value;
  161. if (this.price >= this.couponList[this.useCouponIndex].least) {
  162. total = total - this.coupon_price;
  163. } else {
  164. this.$tools.msg('选中的优惠券不满足使用条件', 2000);
  165. this.useCouponIndex = -1; //取消选中的优惠券
  166. this.coupon_price = 0; //设置优惠金额为0
  167. total = total - this.coupon_price;
  168. }
  169. }
  170. },
  171. getTime(e){
  172. this.show_time=e;
  173. // var date= new Date(e.replace(/-/g, "/"));
  174. },
  175. openTime(){
  176. this.$refs.timeRef.open();
  177. },
  178. showCoupons(){
  179. this.$refs.couponRef.show();
  180. },
  181. hideCoupons(){
  182. this.$refs.couponRef.hide();
  183. },
  184. }
  185. };
  186. </script>
  187. <style lang="scss">
  188. page {
  189. background-color: #f8f8f8;
  190. }
  191. .page {
  192. padding: 20rpx 30rpx;
  193. }
  194. .pro-sec {
  195. padding: 22rpx 17rpx 24rpx 20rpx;
  196. background-color: #ffffff;
  197. box-shadow: 0px 6rpx 10rpx #2a2a2a14;
  198. border-radius: 20rpx;
  199. margin-bottom: 20rpx;
  200. position: relative;
  201. .image_5 {
  202. width: 154rpx;
  203. height: 154rpx;
  204. }
  205. .group_7 {
  206. margin-left: 15rpx;
  207. margin-bottom: 10rpx;
  208. }
  209. .text_2 {
  210. color: #333333;
  211. font-size: 30rpx;
  212. font-family: PingFang;
  213. max-width: 370rpx;
  214. }
  215. .image_6 {
  216. margin-top: 10rpx;
  217. width: 28rpx;
  218. height: 28rpx;
  219. margin-right: 4rpx;
  220. }
  221. .group_9 {
  222. margin-top: 51rpx;
  223. align-self: flex-start;
  224. line-height: 28rpx;
  225. }
  226. .text_3 {
  227. color: #fc4d37;
  228. font-size: 30rpx;
  229. font-family: PingFang;
  230. letter-spacing: 1.2rpx;
  231. }
  232. .text_4 {
  233. color: #fc4d37;
  234. font-size: 36rpx;
  235. font-family: PingFang;
  236. letter-spacing: 1.44rpx;
  237. }
  238. .group_10 {
  239. margin: 4rpx 0 5rpx;
  240. }
  241. .text_7 {
  242. color: #999999;
  243. font-size: 24rpx;
  244. font-family: PingFang;
  245. }
  246. .text_8 {
  247. margin-top: 106rpx;
  248. color: #999999;
  249. font-size: 24rpx;
  250. font-family: PingFang;
  251. line-height: 18rpx;
  252. }
  253. .step {
  254. margin-top: 86rpx;
  255. }
  256. }
  257. .loc-sec{
  258. margin-top: 24rpx;
  259. padding: 30rpx 20rpx 0 24rpx;
  260. background-color: #ffffff;
  261. box-shadow: 0px 6rpx 10rpx #2a2a2a14;
  262. border-radius: 20rpx;
  263. .section_5 {
  264. padding: 27rpx 20rpx 24rpx;
  265. background-color: #f7f7f7;
  266. border-radius: 10rpx;
  267. }
  268. .group_11 {
  269. margin-bottom: 6rpx;
  270. flex: 1 1 auto;
  271. }
  272. .text_9 {
  273. color: #333333;
  274. font-size: 30rpx;
  275. font-family: PingFang;
  276. max-width: 500rpx;
  277. }
  278. .text_11 {
  279. margin-top: 20rpx;
  280. color: #666666;
  281. font-size: 24rpx;
  282. font-family: PingFang;
  283. line-height: 36rpx;
  284. max-width: 500rpx;
  285. }
  286. .group_12 {
  287. margin-left: 40rpx;
  288. margin-right: 10rpx;
  289. flex-shrink: 0;
  290. }
  291. .section_6 {
  292. background-color: #0000001a;
  293. width: 1rpx;
  294. height: 80rpx;
  295. }
  296. .image_7 {
  297. margin-left: 30rpx;
  298. align-self: center;
  299. width: 48rpx;
  300. height: 48rpx;
  301. }
  302. .group_13 {
  303. padding: 40rpx 0;
  304. }
  305. .text_12 {
  306. color: #333333;
  307. font-size: 30rpx;
  308. font-family: PingFang;
  309. line-height: 28rpx;
  310. letter-spacing: 1.2rpx;
  311. }
  312. .text_14 {
  313. color: #999999;
  314. font-size: 28rpx;
  315. font-family: PingFang;
  316. &.active{
  317. color: #333;
  318. }
  319. }
  320. .image_8 {
  321. margin: 4rpx 0 4rpx 11rpx;
  322. flex-shrink: 0;
  323. width: 10rpx;
  324. height: 18rpx;
  325. }
  326. }
  327. .price-sec{
  328. margin-top: 24rpx;
  329. padding-left: 21rpx;
  330. padding-right: 12rpx;
  331. background-color: #ffffff;
  332. box-shadow: 0px 6rpx 10rpx #2a2a2a14;
  333. border-radius: 20rpx;
  334. .group_15 {
  335. padding: 40rpx 0;
  336. border-bottom: solid 2rpx #0000001a;
  337. }
  338. .text_16 {
  339. color: #333333;
  340. font-size: 30rpx;
  341. font-family: PingFang;
  342. letter-spacing: 1.2rpx;
  343. }
  344. .text_17 {
  345. margin-bottom: 3rpx;
  346. color: #333333;
  347. font-size: 30rpx;
  348. font-family: PingFang;
  349. }
  350. .group_13 {
  351. padding: 40rpx 0;
  352. }
  353. .text_12 {
  354. color: #333333;
  355. font-size: 30rpx;
  356. font-family: PingFang;
  357. line-height: 28rpx;
  358. letter-spacing: 1.2rpx;
  359. }
  360. .group_16 {
  361. margin-right: 8rpx;
  362. }
  363. .text_14 {
  364. color: #999999;
  365. font-size: 28rpx;
  366. font-family: PingFang;
  367. line-height: 26rpx;
  368. }
  369. .image_8 {
  370. margin: 4rpx 0 4rpx 11rpx;
  371. flex-shrink: 0;
  372. width: 10rpx;
  373. height: 18rpx;
  374. }
  375. }
  376. .note-sec{
  377. margin-top: 24rpx;
  378. padding: 40rpx 20rpx 40rpx 21rpx;
  379. background-color: #ffffff;
  380. box-shadow: 0px 6rpx 10rpx #2a2a2a14;
  381. border-radius: 20rpx;
  382. .text_20 {
  383. align-self: flex-start;
  384. color: #333333;
  385. font-size: 30rpx;
  386. font-family: PingFang;
  387. letter-spacing: 1.2rpx;
  388. }
  389. .text-wrapper {
  390. margin-left: 3rpx;
  391. margin-top: 30rpx;
  392. background-color: #f7f7f7;
  393. border-radius: 10rpx;
  394. .area{
  395. padding: 18rpx;
  396. font-size: 24rpx;
  397. color: #333;
  398. line-height: 36rpx;
  399. width: 646rpx;
  400. height: 147rpx;
  401. }
  402. }
  403. }
  404. .btn-wrap{
  405. padding: 32rpx 20rpx 20rpx 29rpx;
  406. background-color: #ffffff;
  407. box-shadow: 0px 0px 14rpx #0000001a;
  408. height: 128rpx;
  409. .group_17 {
  410. align-self: center;
  411. }
  412. .text_22 {
  413. color: #999999;
  414. font-size: 28rpx;
  415. font-family: PingFang;
  416. }
  417. .group_18 {
  418. margin-left: 11rpx;
  419. line-height: 28rpx;
  420. height: 29rpx;
  421. }
  422. .text_23 {
  423. color: #ff342e;
  424. font-size: 28rpx;
  425. font-family: PingFang;
  426. }
  427. .text_24 {
  428. color: #ff342e;
  429. font-size: 36rpx;
  430. font-family: PingFang;
  431. max-width: 320rpx;
  432. }
  433. .text-wrapper_1 {
  434. padding: 24rpx 0 23rpx;
  435. background-color: #92b99c;
  436. border-radius: 38rpx;
  437. width: 228rpx;
  438. height: 76rpx;
  439. }
  440. .text_25 {
  441. color: #ffffff;
  442. font-size: 30rpx;
  443. font-family: PingFang;
  444. }
  445. }
  446. .coupon-panel{
  447. width: 750rpx;
  448. // height: 441rpx;
  449. background: #FFFFFF;
  450. border-radius: 20rpx 20rpx 0rpx 0rpx;
  451. position: relative;
  452. .cancel-wrap{
  453. width: 68rpx;
  454. height: 68rpx;
  455. position: absolute;
  456. right: 0;
  457. top: 0;
  458. z-index: 2;
  459. .ic{
  460. font-size: 24rpx;
  461. color: #999;
  462. }
  463. }
  464. .title-wrap{
  465. height: 92rpx;
  466. line-height: 92rpx;
  467. text-align: center;
  468. font-size: 34rpx;
  469. font-family: PingFang SC;
  470. font-weight: bold;
  471. color: #333333;
  472. }
  473. .content-wrap{
  474. padding: 30rpx;
  475. // padding-bottom: 30rpx + calc( var(--safe-area-inset-bottom) / 2);
  476. .scroll{
  477. min-height: 350rpx;
  478. max-height: 600rpx;
  479. }
  480. .item{
  481. width: 690rpx;
  482. height: 133rpx;
  483. background: #F5F5F5;
  484. border-radius: 10rpx;
  485. margin-bottom: 20rpx;
  486. padding: 0 30rpx;
  487. }
  488. .name{
  489. font-size: 32rpx;
  490. font-family: PingFang SC;
  491. font-weight: bold;
  492. color: #333333;
  493. }
  494. .tips{
  495. margin-top: 24rpx;
  496. font-size: 26rpx;
  497. font-family: PingFang SC;
  498. font-weight: 500;
  499. color: #666666;
  500. .mtxt{
  501. color:$base-color;
  502. }
  503. }
  504. }
  505. }
  506. </style>