order.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939
  1. <template>
  2. <view>
  3. <view class="custom_addr" @click="showAddrPopup()">
  4. <view class="contact_user">
  5. <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
  6. <text class="contact_name">{{ checkedAddr.contact_name }}</text>
  7. <text class="contact_phone">{{ checkedAddr.contact_phone }}</text>
  8. <text class="contact_more">&gt;</text>
  9. <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
  10. <text v-if="checkedAddr.shop_type">({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})&nbsp;</text>
  11. {{ checkedAddr.contact_shop }}
  12. </view>
  13. </view>
  14. <view class="contact_addr" style="display: flex">
  15. {{ checkedAddr.contact_province }} {{ checkedAddr.contact_city }} {{ checkedAddr.contact_area }}
  16. {{ checkedAddr.contact_addr }}
  17. </view>
  18. </view>
  19. <view class="car_list">
  20. <view class="car_item" v-for="(item, index) in cartList" :key="index">
  21. <view class="box_left">
  22. <image class="car_image" :src="item.thumb" mode=""></image>
  23. </view>
  24. <view class="box_center">
  25. <view class="car_name">{{ item.name }}</view>
  26. <view class="car_spec">{{ item.spec }}</view>
  27. <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
  28. <view class="car_price">
  29. <text class="price">¥{{ item.price }}</text>
  30. </view>
  31. </view>
  32. <view class="box_right">
  33. <view class="buy_num_box">
  34. <view class="buy_num">共{{ item.buy_num }}件</view>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="car_item" v-for="(item, index) in promoRebateList" :key="index">
  39. <view class="box_left">
  40. <image class="car_image" :src="item.thumb" mode=""></image>
  41. </view>
  42. <view class="box_center">
  43. <view class="car_name">
  44. <text v-if="item.promo_rebate_id">【赠品】</text>
  45. {{ item.name }}
  46. </view>
  47. <view class="car_spec">{{ item.spec }}</view>
  48. <view class="car_price">
  49. <text class="price">¥{{ item.price }}</text>
  50. </view>
  51. </view>
  52. <view class="box_right">
  53. <view class="buy_num_box">
  54. <view class="buy_num">共{{ item.buy_num }}件</view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view>
  60. <view class="to_select_coupon" v-if="couponList.length" @click="popupCoupon()">
  61. <text>优惠券</text>
  62. <view class="coupon_deduction">{{ couponUsed }}</view>
  63. </view>
  64. <view class="to_select_coupon" v-if="reduction > 0">
  65. <text>满减</text>
  66. <view class="coupon_deduction">-{{ reduction }}</view>
  67. </view>
  68. <view class="to_select_coupon" v-if="discount > 0">
  69. <text>商品折扣</text>
  70. <view class="coupon_deduction">-{{ discount }}</view>
  71. </view>
  72. </view>
  73. <view class="bottom_box">
  74. <view class="price_box">
  75. 合计:
  76. <text class="price_total">¥{{ priceTotal }}</text>
  77. </view>
  78. <button class="to_order" @click="createOrder()" data-eventsync="true">提交预约</button>
  79. </view>
  80. <uni-popup ref="popup" type="bottom" class="popup" background-color="#FFFFFF" @touchmove.stop.prevent="() => {}">
  81. <view class="coupon_list">
  82. <view class="coupon_item" v-for="(item, index) in couponList" :key="index" @click="checkedCoupon(index)">
  83. <view class="box_left">
  84. <view class="rebate" v-if="item.rebate_type == 1">¥{{ item.rebate }}</view>
  85. <view class="rebate" v-if="item.rebate_type == 2">打 {{ item.rebate }} 折</view>
  86. <view class="rebate" v-if="item.rebate_type == 3">
  87. <text v-if="item.rebate_scope.length">{{ item.rebate_scope[0].product_name }}</text>
  88. </view>
  89. <view class="std_pay">满{{ item.std_pay }}</view>
  90. </view>
  91. <view class="box_right">
  92. <view class="coupon_title">
  93. <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
  94. <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
  95. <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
  96. </view>
  97. <view class="product_scope">
  98. <text class="" v-if="item.type_id == 1">限定商品可用</text>
  99. <text class="" v-if="item.type_id == 2">全场可用</text>
  100. <view class="check_label">
  101. <view class="isstd" v-if="!item.is_std">不可用</view>
  102. <image class="checkbox" v-if="item.is_std" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>
  103. </view>
  104. </view>
  105. <view class="coupon_info">
  106. <view class="coupon_exp">{{ item.exp_time }} 到期</view>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. </uni-popup>
  112. <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
  113. <view class="popup_title">
  114. 收货地址
  115. <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator>
  116. </view>
  117. <view class="addr_list">
  118. <view class="addr_item" v-for="(item, index) in addrList" :key="index" @click="checkedAddrItem(item)">
  119. <view class="radio_label">
  120. <image class="radio_icon" :src="item.id == checkedAddr.id ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
  121. </view>
  122. <view class="contact_user">
  123. <text class="contact_name">{{ item.contact_name }}</text>
  124. <text class="contact_phone">{{ item.contact_phone }}</text>
  125. <text class="contact_default" v-if="item.is_default">默认</text>
  126. <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
  127. <text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
  128. {{ item.contact_shop }}
  129. </view>
  130. </view>
  131. <view class="contact_addr" style="display: flex">{{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }}</view>
  132. </view>
  133. </view>
  134. <view class="create_box">
  135. <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
  136. </view>
  137. </uni-popup>
  138. </view>
  139. </template>
  140. <script>
  141. export default {
  142. data() {
  143. return {
  144. // 购物车列表
  145. cartList: [],
  146. // 优惠券列表
  147. couponList: [],
  148. //赠品列表
  149. promoRebateList: [],
  150. // 请求参数
  151. requestParam: {
  152. cart_ids: ''
  153. },
  154. // 总价
  155. priceTotal: '0.00',
  156. discount: '0.00',
  157. reduction: '0.00',
  158. // 优惠券使用
  159. couponUsed: '去使用 >',
  160. // 扣减金额
  161. rebatePrice: 0.0,
  162. // 已经选择的优惠券ID
  163. customCoupon: 0,
  164. // 地址列表
  165. addrList: [],
  166. // 已选地址
  167. checkedAddr: {
  168. id: 0,
  169. contact_name: '',
  170. contact_phone: '',
  171. contact_province: '',
  172. contact_city: '',
  173. contact_area: '',
  174. contact_addr: '',
  175. is_default: 0
  176. }
  177. };
  178. },
  179. onLoad(param) {
  180. // 获取路由参数
  181. this.requestParam.cart_ids = param.cart_ids;
  182. var that = this;
  183. // 监听地址变动
  184. uni.$on('addr_list_change', function (data) {
  185. // 地址列表
  186. that.addrList = data.list;
  187. });
  188. },
  189. onShow() {
  190. // 结果
  191. this.$http.request('api/shop_cart/check_list', this.requestParam).then((re) => {
  192. if (re.code == 'success') {
  193. // 赋值
  194. this.cartList = re.data;
  195. this.promoRebateList = re.promoRebateList;
  196. this.discount = re.discount;
  197. this.reduction = re.reduction;
  198. // 结果
  199. this.$http.request('api/custom_coupon/get_checked', this.requestParam).then((re) => {
  200. if (re.code == 'success') {
  201. // 赋值
  202. this.couponList = re.data;
  203. // 推荐使用的优惠券
  204. let rebatePrice = 0;
  205. // 循环优惠券
  206. for (let i in this.couponList) {
  207. /* 商品的总价格,决定是否可用 */
  208. var totalPrice = 0.0;
  209. // 循环产品,
  210. for (let j in this.cartList) {
  211. // 如果是商品券
  212. if (this.couponList[i].type_id == 1) {
  213. // 判断商品是不是在商品范围
  214. var isScope = false;
  215. // 循环商品范围
  216. for (let k in this.couponList[i].product_scope) {
  217. // 如果存在商品范围
  218. if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
  219. }
  220. // 范围内的做计算
  221. if (isScope) {
  222. totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  223. }
  224. // 如果排除商品
  225. } else if (this.couponList[i].type_id == 3) {
  226. // 判断商品是不是在排除范围
  227. var isExclude = false;
  228. // 循环排除范围
  229. for (let k in this.couponList[i].product_exclude) {
  230. // 如果存在排除范围
  231. if (this.couponList[i].product_exclude[k].product_id == this.cartList[j].product_id) isExclude = true;
  232. }
  233. // 不在排除内的做计算
  234. if (!isExclude) {
  235. totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  236. }
  237. // 店铺券
  238. } else {
  239. // 折扣券以及满减券的话,计算价格
  240. totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  241. }
  242. // 判断价格到不到限额
  243. this.couponList[i].is_std = parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2));
  244. // 如果可用的话,并且没有主动选择优惠券
  245. if (this.couponList[i].is_std) {
  246. // 优惠金额
  247. let newRebatePrice = 0.0;
  248. // 计算满减价格
  249. if (this.couponList[i].rebate_type == 1) {
  250. // 计算扣减数据
  251. newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
  252. }
  253. // 计算折扣价格
  254. if (this.couponList[i].rebate_type == 2) {
  255. // 折扣
  256. newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
  257. // 减数
  258. newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
  259. }
  260. // 判断哪个比较优惠
  261. if (parseFloat(rebatePrice.toFixed(2)) < parseFloat(newRebatePrice.toFixed(2))) {
  262. // 覆盖价格
  263. rebatePrice = parseFloat(newRebatePrice.toFixed(2));
  264. // 选中
  265. this.checkedCoupon(i);
  266. }
  267. }
  268. }
  269. }
  270. }
  271. });
  272. // 计算价格
  273. this.priceHandler();
  274. }
  275. });
  276. // 地址列表
  277. this.getAddrList();
  278. },
  279. methods: {
  280. // 地址弹出层
  281. showAddrPopup() {
  282. // 显示下单弹出层
  283. this.$refs.addrPopup.open('bottom');
  284. },
  285. // 价格计算
  286. priceHandler() {
  287. // 总价格
  288. let priceTotal = 0;
  289. // 循环处理
  290. for (let index in this.cartList) {
  291. priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(this.cartList[index].price, this.cartList[index].buy_num));
  292. }
  293. // 扣减数据
  294. priceTotal = this.$decimal.sub(priceTotal, this.rebatePrice);
  295. priceTotal = this.$decimal.sub(priceTotal, this.reduction);
  296. priceTotal = this.$decimal.sub(priceTotal, this.discount);
  297. // 小数点保留
  298. this.priceTotal = priceTotal.toFixed(2);
  299. },
  300. // 创建订单
  301. createOrder() {
  302. // 不可预约
  303. if (!this.$checkAccess.alertCity()) return;
  304. // 需要下单的产品列表
  305. let productList = [];
  306. // 循环列表数据
  307. for (let index in this.cartList) {
  308. // 购买数量必须大于0的才行
  309. if (this.cartList[index].buy_num > 0) {
  310. // 追加需要下单的数据
  311. productList.push({
  312. product_id: this.cartList[index].product_id,
  313. buy_num: this.cartList[index].buy_num,
  314. product_skuid: this.cartList[index].skuid
  315. });
  316. }
  317. }
  318. if (productList.length <= 0) {
  319. uni.showToast({
  320. title: '未选择可预约的产品',
  321. icon: 'none'
  322. });
  323. return;
  324. }
  325. // 地址未填
  326. if (!this.checkedAddr.id) {
  327. uni.showToast({
  328. title: '请选择收货地址',
  329. icon: 'none'
  330. });
  331. return;
  332. }
  333. //需要下单的产品信息参数传给OrederCompletion页面
  334. let productInfo = [];
  335. for (let index in this.cartList) {
  336. // 购买数量必须大于0的才行
  337. if (this.cartList[index].buy_num > 0) {
  338. // 追加需要下单的数据
  339. productInfo.push({
  340. name: this.cartList[index].name,
  341. spec: this.cartList[index].spec,
  342. price: this.cartList[index].price
  343. });
  344. }
  345. }
  346. // 转成json字符串
  347. productInfo = JSON.stringify(productInfo);
  348. //加密json格式成编码数组
  349. let encodedArray = encodeURIComponent(productInfo);
  350. // 转成json字符串传输
  351. productList = JSON.stringify(productList);
  352. // 请求接口
  353. this.$http
  354. .request(
  355. 'api/orders/create',
  356. {
  357. product_list: productList,
  358. custom_coupon_id: this.customCoupon,
  359. is_cart: 1,
  360. addr_id: this.checkedAddr.id
  361. },
  362. 'post'
  363. )
  364. .then((re) => {
  365. // 判断结果
  366. if (re.code == 'success') {
  367. // 跳转到报单完成页面
  368. uni.redirectTo({
  369. url: `/pages/orders/completion?params=${encodedArray}`
  370. });
  371. return;
  372. } else {
  373. uni.showToast({
  374. title: re.msg,
  375. icon: 'none'
  376. });
  377. }
  378. });
  379. },
  380. // 弹出优惠券
  381. popupCoupon() {
  382. this.$refs.popup.open();
  383. },
  384. // 选择优惠券
  385. checkedCoupon(index) {
  386. // 单个设置选中/未选
  387. this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
  388. // 循环处理
  389. for (let i in this.couponList) {
  390. // 有未选的就不做全选
  391. if (index != i) this.couponList[i].checked = 0;
  392. }
  393. // 如果未选中,提示可用
  394. if (!this.couponList[index].checked) this.couponUsed = '去使用 >';
  395. // 已经选择的优惠券ID
  396. this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
  397. // 计算扣减
  398. this.couponRebate();
  399. // 计算价格
  400. this.priceHandler();
  401. // 关闭弹窗
  402. this.$refs.popup.close();
  403. },
  404. // 计算优惠券扣减
  405. couponRebate() {
  406. // 默认扣减0
  407. this.rebatePrice = 0;
  408. // 循环优惠券
  409. for (let i in this.couponList) {
  410. // 判断是否选中
  411. if (!this.couponList[i].checked) {
  412. // 未选择的不管
  413. continue;
  414. }
  415. /* 商品的总价格,决定是否可用 */
  416. var totalPrice = 0.0;
  417. // 循环产品,
  418. for (let j in this.cartList) {
  419. // 如果是商品券
  420. if (this.couponList[i].type_id == 1) {
  421. // 判断商品是不是在商品范围
  422. var isScope = false;
  423. // 循环商品范围
  424. for (let k in this.couponList[i].product_scope) {
  425. // 如果存在商品范围
  426. if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
  427. }
  428. // 范围内的做计算
  429. if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  430. // 店铺券
  431. } else {
  432. // 折扣券以及满减券的话,计算价格
  433. totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  434. }
  435. }
  436. // 如果是可以用的话
  437. if (parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2))) {
  438. // 扣减金额
  439. let rebatePrice = 0;
  440. // 满减
  441. if (this.couponList[i].rebate_type == 1) {
  442. // 计算扣减数据
  443. rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
  444. // 替换文字
  445. this.couponUsed = '¥-' + rebatePrice.toFixed(2);
  446. }
  447. // 折扣
  448. if (this.couponList[i].rebate_type == 2) {
  449. // 折扣
  450. rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
  451. // -0.1 表示折扣
  452. rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
  453. // 替换文字
  454. this.couponUsed = '¥-' + rebatePrice.toFixed(2);
  455. }
  456. // 赠品
  457. if (this.couponList[i].rebate_type == 3) {
  458. // 替换文字
  459. this.couponUsed = '送' + (this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name : '');
  460. }
  461. // 小数点保留
  462. this.rebatePrice = rebatePrice.toFixed(2);
  463. }
  464. }
  465. },
  466. // 选择地址
  467. checkedAddrItem(item) {
  468. this.checkedAddr = item;
  469. this.$refs.addrPopup.close();
  470. },
  471. getAddrList() {
  472. // 判断数据
  473. this.$http.request('api/custom_addr/get_list').then((callback) => {
  474. // 获取成功
  475. if (callback.code == 'success') {
  476. this.addrList = callback.data;
  477. // 如果有的话
  478. if (this.addrList.length) {
  479. // 获取默认的
  480. for (let i in this.addrList) {
  481. // 如果是默认的
  482. if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
  483. }
  484. // 如果没有默认的话
  485. if (!this.checkedAddr.id) {
  486. this.checkedAddr = this.addrList[this.addrList.length - 1];
  487. }
  488. }
  489. }
  490. });
  491. }
  492. }
  493. };
  494. </script>
  495. <style lang="less">
  496. .custom_addr {
  497. width: 680rpx;
  498. display: block;
  499. font-size: 24rpx;
  500. overflow: hidden;
  501. margin: 0rpx auto;
  502. line-height: 40rpx;
  503. padding: 20rpx 35rpx;
  504. background-color: #ffffff;
  505. border-bottom: 2rpx solid #dddddd;
  506. .contact_user {
  507. display: block;
  508. font-size: 24rpx;
  509. line-height: 50rpx;
  510. .contact_none {
  511. font-size: 26rpx;
  512. font-weight: bold;
  513. }
  514. .contact_name {
  515. font-size: 26rpx;
  516. font-weight: bold;
  517. margin-right: 16rpx;
  518. }
  519. .contact_more {
  520. float: right;
  521. font-size: 40rpx;
  522. font-weight: bold;
  523. }
  524. .contact_shop {
  525. float: right;
  526. font-size: 26rpx;
  527. margin-right: 16rpx;
  528. }
  529. }
  530. .contact_addr {
  531. width: 620rpx;
  532. display: block;
  533. font-size: 24rpx;
  534. line-height: 30rpx;
  535. padding: 10rpx 5rpx;
  536. }
  537. }
  538. .car_list {
  539. display: block;
  540. overflow: hidden;
  541. margin: 0rpx auto;
  542. margin-top: 20rpx;
  543. background: #ffffff;
  544. .car_item {
  545. height: 170rpx;
  546. display: block;
  547. overflow: hidden;
  548. margin: 0rpx auto;
  549. padding: 20rpx 35rpx;
  550. border-bottom: 2rpx solid #dddddd;
  551. .box_left {
  552. float: left;
  553. width: 140rpx;
  554. height: 190rpx;
  555. margin-top: 10rpx;
  556. .car_image {
  557. width: 140rpx;
  558. height: 140rpx;
  559. border-radius: 5rpx;
  560. }
  561. }
  562. .box_center {
  563. float: left;
  564. width: 300rpx;
  565. margin-left: 25rpx;
  566. .car_name {
  567. max-height: 70rpx;
  568. font-size: 30rpx;
  569. line-height: 40rpx;
  570. overflow: hidden;
  571. white-space: nowrap;
  572. /* 不换行 */
  573. overflow: hidden;
  574. /* 隐藏超出的内容 */
  575. text-overflow: ellipsis;
  576. /* 用省略号表示被隐藏的部分 */
  577. }
  578. .car_spec {
  579. color: #999999;
  580. font-size: 24rpx;
  581. line-height: 60rpx;
  582. max-height: 60rpx;
  583. overflow: hidden;
  584. }
  585. .promo_title {
  586. max-height: 80rpx;
  587. font-size: 20rpx;
  588. line-height: 40rpx;
  589. overflow: hidden;
  590. padding: 0rpx 0rpx;
  591. color: #dd524d;
  592. }
  593. .car_price {
  594. font-size: 30rpx;
  595. line-height: 60rpx;
  596. .price {
  597. color: red;
  598. }
  599. }
  600. }
  601. .box_right {
  602. float: right;
  603. width: 185rpx;
  604. .buy_num_box {
  605. float: right;
  606. color: #333333;
  607. overflow: hidden;
  608. font-size: 24rpx;
  609. margin-top: 130rpx;
  610. text-align: center;
  611. .buy_num {
  612. float: left;
  613. width: 100rpx;
  614. height: 30rpx;
  615. font-size: 24rpx;
  616. line-height: 30rpx;
  617. padding: 0rpx 0rpx;
  618. border-radius: 8rpx;
  619. }
  620. }
  621. }
  622. }
  623. .car_item:last-child {
  624. border-bottom: none;
  625. }
  626. }
  627. .to_select_coupon {
  628. display: block;
  629. height: 120rpx;
  630. font-size: 30rpx;
  631. margin: 20rpx auto;
  632. background: #ffffff;
  633. padding: 0rpx 35rpx;
  634. line-height: 120rpx;
  635. .coupon_deduction {
  636. color: red;
  637. float: right;
  638. font-size: 26rpx;
  639. }
  640. }
  641. .to_select_coupon:last-child {
  642. margin-bottom: 160rpx;
  643. }
  644. .bottom_box {
  645. left: 0rpx;
  646. z-index: 9;
  647. width: 100%;
  648. height: 140rpx;
  649. display: block;
  650. position: fixed;
  651. overflow: hidden;
  652. background: #ffffff;
  653. padding: 0rpx 35rpx;
  654. bottom: var(--window-bottom);
  655. .price_box {
  656. float: left;
  657. width: 500rpx;
  658. display: block;
  659. color: #666666;
  660. font-size: 26rpx;
  661. text-align: right;
  662. line-height: 100rpx;
  663. margin-right: 20rpx;
  664. .price_total {
  665. color: red;
  666. font-size: 30rpx;
  667. }
  668. }
  669. .to_order {
  670. float: left;
  671. width: 180rpx;
  672. height: 80rpx;
  673. display: block;
  674. color: #ffffff;
  675. font-size: 28rpx;
  676. margin-top: 10rpx;
  677. line-height: 80rpx;
  678. padding: 0rpx 0rpx;
  679. text-align: center;
  680. border-radius: 40rpx;
  681. background-color: #e03519;
  682. }
  683. }
  684. .popup {
  685. .popup_title {
  686. display: block;
  687. overflow: hidden;
  688. margin: 0rpx auto;
  689. font-size: 36rpx;
  690. height: 120rpx;
  691. line-height: 120rpx;
  692. padding: 0rpx 20rpx;
  693. border-bottom: 10rpx solid #f8f8f8;
  694. .to_addr_page {
  695. float: right;
  696. color: #f59a23;
  697. display: block;
  698. height: 120rpx;
  699. line-height: 120rpx;
  700. font-size: 26rpx;
  701. padding: 0rpx 10rpx;
  702. }
  703. }
  704. .coupon_list {
  705. display: block;
  706. overflow: hidden;
  707. margin: 10rpx auto;
  708. min-height: 600rpx;
  709. background: #ffffff;
  710. padding-bottom: 50rpx;
  711. .coupon_item {
  712. height: 200rpx;
  713. display: block;
  714. margin: 10rpx auto;
  715. border-bottom: 2rpx solid #dddddd;
  716. .box_left {
  717. float: left;
  718. width: 160rpx;
  719. height: 160rpx;
  720. font-size: 20rpx;
  721. text-align: center;
  722. margin-left: 35rpx;
  723. line-height: 60rpx;
  724. margin-top: 20rpx;
  725. background: pink;
  726. .rebate {
  727. width: 120rpx;
  728. height: 60rpx;
  729. margin: 0rpx auto;
  730. line-height: 60rpx;
  731. margin-top: 20rpx;
  732. overflow: hidden;
  733. white-space: nowrap;
  734. text-overflow: ellipsis;
  735. }
  736. }
  737. .box_right {
  738. float: left;
  739. width: 485rpx;
  740. margin-left: 35rpx;
  741. padding-top: 20rpx;
  742. .coupon_title {
  743. width: 485rpx;
  744. max-height: 80rpx;
  745. font-size: 30rpx;
  746. overflow: hidden;
  747. line-height: 40rpx;
  748. padding: 0rpx 0rpx;
  749. .coupon_name {
  750. float: left;
  751. height: 40rpx;
  752. width: 380rpx;
  753. }
  754. .coupon_status {
  755. width: 85rpx;
  756. float: right;
  757. color: #999999;
  758. font-size: 24rpx;
  759. }
  760. }
  761. .product_scope {
  762. width: 485rpx;
  763. height: 80rpx;
  764. color: #999999;
  765. font-size: 24rpx;
  766. overflow: hidden;
  767. line-height: 80rpx;
  768. .check_label {
  769. float: right;
  770. display: block;
  771. overflow: hidden;
  772. padding: 20rpx 20rpx;
  773. .isstd {
  774. line-height: 40rpx;
  775. }
  776. .checkbox {
  777. float: right;
  778. width: 40rpx;
  779. height: 40rpx;
  780. }
  781. }
  782. }
  783. .coupon_info {
  784. width: 485rpx;
  785. max-height: 80rpx;
  786. font-size: 30rpx;
  787. overflow: hidden;
  788. line-height: 40rpx;
  789. padding: 0rpx 0rpx;
  790. .coupon_exp {
  791. float: left;
  792. font-size: 20rpx;
  793. }
  794. }
  795. }
  796. }
  797. .coupon_item:last-child {
  798. border-bottom: none;
  799. }
  800. }
  801. .addr_list {
  802. width: 730rpx;
  803. display: block;
  804. overflow: hidden;
  805. margin: 0rpx auto;
  806. min-height: 500rpx;
  807. .addr_item {
  808. display: block;
  809. font-size: 24rpx;
  810. overflow: hidden;
  811. line-height: 40rpx;
  812. padding: 15rpx 10rpx;
  813. border-radius: 15rpx;
  814. border-bottom: 2rpx solid #dddddd;
  815. .radio_label {
  816. width: 40rpx;
  817. float: left;
  818. height: 50rpx;
  819. padding-top: 30rpx;
  820. margin-right: 20rpx;
  821. .radio_icon {
  822. float: left;
  823. width: 40rpx;
  824. height: 40rpx;
  825. }
  826. }
  827. .contact_user {
  828. float: left;
  829. width: 640rpx;
  830. display: block;
  831. height: 50rpx;
  832. font-size: 24rpx;
  833. line-height: 50rpx;
  834. .contact_name {
  835. font-size: 26rpx;
  836. font-weight: bold;
  837. margin-right: 16rpx;
  838. }
  839. .contact_default {
  840. color: #f59a23;
  841. font-size: 20rpx;
  842. margin-left: 16rpx;
  843. border: 1rpx solid #f59a23;
  844. }
  845. .contact_shop {
  846. float: right;
  847. font-size: 26rpx;
  848. margin-right: 16rpx;
  849. }
  850. }
  851. .contact_addr {
  852. float: left;
  853. width: 640rpx;
  854. display: block;
  855. font-size: 24rpx;
  856. line-height: 30rpx;
  857. padding: 10rpx 5rpx;
  858. }
  859. }
  860. }
  861. .create_box {
  862. height: 140rpx;
  863. display: block;
  864. .create_addr {
  865. width: 700rpx;
  866. height: 80rpx;
  867. display: block;
  868. color: #ffffff;
  869. font-size: 30rpx;
  870. overflow: hidden;
  871. line-height: 80rpx;
  872. padding: 0rpx 0rpx;
  873. text-align: center;
  874. margin: 0rpx auto;
  875. margin-top: 20rpx;
  876. border-radius: 40rpx;
  877. background-color: #e03519;
  878. }
  879. }
  880. }
  881. </style>