order.vue 29 KB

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