order.vue 29 KB

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