order.vue 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007
  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. uni.redirectTo({
  407. url: `/pages/orders/completion?params=${encodedArray}`,
  408. });
  409. return;
  410. } else {
  411. uni.showToast({
  412. title: re.msg,
  413. icon: "none",
  414. });
  415. }
  416. });
  417. },
  418. // 弹出优惠券
  419. popupCoupon() {
  420. this.$refs.popup.open();
  421. },
  422. // 选择优惠券
  423. checkedCoupon(index) {
  424. // 单个设置选中/未选
  425. this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
  426. // 循环处理
  427. for (let i in this.couponList) {
  428. // 有未选的就不做全选
  429. if (index != i) this.couponList[i].checked = 0;
  430. }
  431. // 如果未选中,提示可用
  432. if (!this.couponList[index].checked) this.couponUsed = "去使用 >";
  433. // 已经选择的优惠券ID
  434. this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
  435. // 计算扣减
  436. this.couponRebate();
  437. // 计算价格
  438. this.priceHandler();
  439. // 关闭弹窗
  440. this.$refs.popup.close();
  441. },
  442. // 计算优惠券扣减
  443. couponRebate() {
  444. // 默认扣减0
  445. this.rebatePrice = 0;
  446. // 循环优惠券
  447. for (let i in this.couponList) {
  448. // 判断是否选中
  449. if (!this.couponList[i].checked) {
  450. // 未选择的不管
  451. continue;
  452. }
  453. /* 商品的总价格,决定是否可用 */
  454. var totalPrice = 0.0;
  455. // 循环产品,
  456. for (let j in this.cartList) {
  457. // 如果是商品券
  458. if (this.couponList[i].type_id == 1) {
  459. // 判断商品是不是在商品范围
  460. var isScope = false;
  461. // 循环商品范围
  462. for (let k in this.couponList[i].product_scope) {
  463. // 如果存在商品范围
  464. if (this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
  465. }
  466. // 范围内的做计算
  467. if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  468. // 店铺券
  469. } else {
  470. // 折扣券以及满减券的话,计算价格
  471. totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.cartList[j].price, this.cartList[j].buy_num));
  472. }
  473. }
  474. // 如果是可以用的话
  475. if (parseFloat(totalPrice.toFixed(2)) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1).toFixed(2))) {
  476. // 扣减金额
  477. let rebatePrice = 0;
  478. // 满减
  479. if (this.couponList[i].rebate_type == 1) {
  480. // 计算扣减数据
  481. rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
  482. // 替换文字
  483. this.couponUsed = "¥-" + rebatePrice.toFixed(2);
  484. }
  485. // 折扣
  486. if (this.couponList[i].rebate_type == 2) {
  487. // 折扣
  488. rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
  489. // -0.1 表示折扣
  490. rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
  491. // 替换文字
  492. this.couponUsed = "¥-" + rebatePrice.toFixed(2);
  493. }
  494. // 赠品
  495. if (this.couponList[i].rebate_type == 3) {
  496. // 替换文字
  497. this.couponUsed = "送" + (this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name : "");
  498. }
  499. // 小数点保留
  500. this.rebatePrice = rebatePrice.toFixed(2);
  501. }
  502. }
  503. },
  504. // 选择地址
  505. checkedAddrItem(item) {
  506. this.checkedAddr = item;
  507. this.$refs.addrPopup.close();
  508. },
  509. getAddrList() {
  510. // 判断数据
  511. this.$http.request("api/custom_addr/get_list").then((callback) => {
  512. // 获取成功
  513. if (callback.code == "success") {
  514. this.addrList = callback.data;
  515. // 如果有的话
  516. if (this.addrList.length) {
  517. // 获取默认的
  518. for (let i in this.addrList) {
  519. // 如果是默认的
  520. if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
  521. }
  522. // 如果没有默认的话
  523. if (!this.checkedAddr.id) {
  524. this.checkedAddr = this.addrList[this.addrList.length - 1];
  525. }
  526. }
  527. }
  528. });
  529. },
  530. },
  531. };
  532. </script>
  533. <style lang="less">
  534. .custom_addr {
  535. width: 680rpx;
  536. display: block;
  537. font-size: 24rpx;
  538. overflow: hidden;
  539. margin: 0rpx auto;
  540. line-height: 40rpx;
  541. padding: 20rpx 35rpx;
  542. background-color: #ffffff;
  543. border-bottom: 2rpx solid #dddddd;
  544. .contact_user {
  545. display: block;
  546. font-size: 24rpx;
  547. line-height: 50rpx;
  548. .contact_none {
  549. font-size: 26rpx;
  550. font-weight: bold;
  551. }
  552. .contact_name {
  553. font-size: 26rpx;
  554. font-weight: bold;
  555. margin-right: 16rpx;
  556. }
  557. .contact_more {
  558. float: right;
  559. font-size: 40rpx;
  560. font-weight: bold;
  561. }
  562. .contact_shop {
  563. float: right;
  564. font-size: 26rpx;
  565. margin-right: 16rpx;
  566. }
  567. }
  568. .contact_addr {
  569. width: 620rpx;
  570. display: block;
  571. font-size: 24rpx;
  572. line-height: 30rpx;
  573. padding: 10rpx 5rpx;
  574. }
  575. }
  576. .car_list {
  577. display: block;
  578. overflow: hidden;
  579. margin: 0rpx auto;
  580. margin-top: 20rpx;
  581. background: #ffffff;
  582. .business_name {
  583. padding: 8rpx 35rpx;
  584. border-bottom: 1px solid #f3f3f3;
  585. font-size: 32rpx;
  586. z-index: 1;
  587. display: flex;
  588. align-items: center;
  589. .business_icon {
  590. width: 48rpx;
  591. height: 48rpx;
  592. margin-right: 10rpx;
  593. }
  594. }
  595. .car_item {
  596. height: 170rpx;
  597. display: block;
  598. overflow: hidden;
  599. margin: 0rpx auto;
  600. padding: 20rpx 35rpx;
  601. border-bottom: 2rpx solid #f3f3f3;
  602. .box_left {
  603. float: left;
  604. width: 140rpx;
  605. height: 190rpx;
  606. margin-top: 10rpx;
  607. .car_image {
  608. width: 140rpx;
  609. height: 140rpx;
  610. border-radius: 5rpx;
  611. }
  612. }
  613. .box_center {
  614. float: left;
  615. width: 300rpx;
  616. margin-left: 25rpx;
  617. .car_name {
  618. max-height: 70rpx;
  619. font-size: 30rpx;
  620. line-height: 40rpx;
  621. overflow: hidden;
  622. white-space: nowrap;
  623. /* 不换行 */
  624. overflow: hidden;
  625. /* 隐藏超出的内容 */
  626. text-overflow: ellipsis;
  627. /* 用省略号表示被隐藏的部分 */
  628. }
  629. .car_spec {
  630. color: #999999;
  631. font-size: 24rpx;
  632. line-height: 60rpx;
  633. max-height: 60rpx;
  634. overflow: hidden;
  635. }
  636. .promo_title {
  637. max-height: 80rpx;
  638. font-size: 20rpx;
  639. line-height: 40rpx;
  640. overflow: hidden;
  641. padding: 0rpx 0rpx;
  642. color: #dd524d;
  643. }
  644. .car_price {
  645. font-size: 30rpx;
  646. line-height: 60rpx;
  647. .price {
  648. color: red;
  649. }
  650. }
  651. }
  652. .box_right {
  653. float: right;
  654. width: 185rpx;
  655. .buy_num_box {
  656. float: right;
  657. color: #333333;
  658. overflow: hidden;
  659. font-size: 24rpx;
  660. margin-top: 130rpx;
  661. text-align: center;
  662. .buy_num {
  663. float: left;
  664. width: 100rpx;
  665. height: 30rpx;
  666. font-size: 24rpx;
  667. line-height: 30rpx;
  668. padding: 0rpx 0rpx;
  669. border-radius: 8rpx;
  670. }
  671. }
  672. }
  673. }
  674. .car_item:last-child {
  675. border-bottom: none;
  676. }
  677. }
  678. .to_select_coupon {
  679. display: block;
  680. height: 120rpx;
  681. font-size: 30rpx;
  682. margin: 20rpx auto;
  683. background: #ffffff;
  684. padding: 0rpx 35rpx;
  685. line-height: 120rpx;
  686. .coupon_deduction {
  687. color: red;
  688. float: right;
  689. font-size: 26rpx;
  690. }
  691. }
  692. .to_select_coupon:last-child {
  693. margin-bottom: 160rpx;
  694. }
  695. .bottom_box {
  696. left: 0rpx;
  697. z-index: 9;
  698. width: 100%;
  699. height: 140rpx;
  700. display: block;
  701. position: fixed;
  702. overflow: hidden;
  703. background: #ffffff;
  704. padding: 0rpx 35rpx;
  705. bottom: var(--window-bottom);
  706. .price_box {
  707. float: left;
  708. width: 500rpx;
  709. display: block;
  710. color: #666666;
  711. font-size: 26rpx;
  712. text-align: right;
  713. line-height: 100rpx;
  714. margin-right: 20rpx;
  715. .price_total {
  716. color: red;
  717. font-size: 30rpx;
  718. }
  719. }
  720. .to_order {
  721. float: left;
  722. width: 180rpx;
  723. height: 80rpx;
  724. display: block;
  725. color: #ffffff;
  726. font-size: 28rpx;
  727. margin-top: 10rpx;
  728. line-height: 80rpx;
  729. padding: 0rpx 0rpx;
  730. text-align: center;
  731. border-radius: 40rpx;
  732. background-color: #e03519;
  733. }
  734. }
  735. .popup {
  736. .popup_title {
  737. display: block;
  738. overflow: hidden;
  739. margin: 0rpx auto;
  740. font-size: 36rpx;
  741. height: 120rpx;
  742. line-height: 120rpx;
  743. padding: 0rpx 20rpx;
  744. border-bottom: 10rpx solid #f8f8f8;
  745. .to_addr_page {
  746. float: right;
  747. color: #f59a23;
  748. display: block;
  749. height: 120rpx;
  750. line-height: 120rpx;
  751. font-size: 26rpx;
  752. padding: 0rpx 10rpx;
  753. }
  754. }
  755. .coupon_list {
  756. display: block;
  757. overflow: hidden;
  758. margin: 10rpx auto;
  759. min-height: 600rpx;
  760. background: #ffffff;
  761. padding-bottom: 50rpx;
  762. .coupon_item {
  763. height: 200rpx;
  764. display: block;
  765. margin: 10rpx auto;
  766. border-bottom: 2rpx solid #dddddd;
  767. .box_left {
  768. float: left;
  769. width: 160rpx;
  770. height: 160rpx;
  771. font-size: 20rpx;
  772. text-align: center;
  773. margin-left: 35rpx;
  774. line-height: 60rpx;
  775. margin-top: 20rpx;
  776. background: pink;
  777. .rebate {
  778. width: 120rpx;
  779. height: 60rpx;
  780. margin: 0rpx auto;
  781. line-height: 60rpx;
  782. margin-top: 20rpx;
  783. overflow: hidden;
  784. white-space: nowrap;
  785. text-overflow: ellipsis;
  786. }
  787. }
  788. .box_right {
  789. float: left;
  790. width: 485rpx;
  791. margin-left: 35rpx;
  792. padding-top: 20rpx;
  793. .coupon_title {
  794. width: 485rpx;
  795. max-height: 80rpx;
  796. font-size: 30rpx;
  797. overflow: hidden;
  798. line-height: 40rpx;
  799. padding: 0rpx 0rpx;
  800. .coupon_name {
  801. float: left;
  802. height: 40rpx;
  803. width: 380rpx;
  804. }
  805. .coupon_status {
  806. width: 85rpx;
  807. float: right;
  808. color: #999999;
  809. font-size: 24rpx;
  810. }
  811. }
  812. .product_scope {
  813. width: 485rpx;
  814. height: 80rpx;
  815. color: #999999;
  816. font-size: 24rpx;
  817. overflow: hidden;
  818. line-height: 80rpx;
  819. .check_label {
  820. float: right;
  821. display: block;
  822. overflow: hidden;
  823. padding: 20rpx 20rpx;
  824. .isstd {
  825. line-height: 40rpx;
  826. }
  827. .checkbox {
  828. float: right;
  829. width: 40rpx;
  830. height: 40rpx;
  831. }
  832. }
  833. }
  834. .coupon_info {
  835. width: 485rpx;
  836. max-height: 80rpx;
  837. font-size: 30rpx;
  838. overflow: hidden;
  839. line-height: 40rpx;
  840. padding: 0rpx 0rpx;
  841. .coupon_exp {
  842. float: left;
  843. font-size: 20rpx;
  844. }
  845. }
  846. }
  847. }
  848. .coupon_item:last-child {
  849. border-bottom: none;
  850. }
  851. }
  852. .addr_list {
  853. width: 730rpx;
  854. display: block;
  855. overflow: hidden;
  856. margin: 0rpx auto;
  857. min-height: 500rpx;
  858. .addr_item {
  859. display: block;
  860. font-size: 24rpx;
  861. overflow: hidden;
  862. line-height: 40rpx;
  863. padding: 15rpx 10rpx;
  864. border-radius: 15rpx;
  865. border-bottom: 2rpx solid #dddddd;
  866. .radio_label {
  867. width: 40rpx;
  868. float: left;
  869. height: 50rpx;
  870. padding-top: 30rpx;
  871. margin-right: 20rpx;
  872. .radio_icon {
  873. float: left;
  874. width: 40rpx;
  875. height: 40rpx;
  876. }
  877. }
  878. .contact_user {
  879. float: left;
  880. width: 640rpx;
  881. display: block;
  882. height: 50rpx;
  883. font-size: 24rpx;
  884. line-height: 50rpx;
  885. .contact_name {
  886. font-size: 26rpx;
  887. font-weight: bold;
  888. margin-right: 16rpx;
  889. }
  890. .contact_default {
  891. color: #f59a23;
  892. font-size: 20rpx;
  893. margin-left: 16rpx;
  894. border: 1rpx solid #f59a23;
  895. }
  896. .contact_shop {
  897. float: right;
  898. font-size: 26rpx;
  899. margin-right: 16rpx;
  900. }
  901. }
  902. .contact_addr {
  903. float: left;
  904. width: 640rpx;
  905. display: block;
  906. font-size: 24rpx;
  907. line-height: 30rpx;
  908. padding: 10rpx 5rpx;
  909. }
  910. }
  911. }
  912. .create_box {
  913. height: 140rpx;
  914. display: block;
  915. .create_addr {
  916. width: 700rpx;
  917. height: 80rpx;
  918. display: block;
  919. color: #ffffff;
  920. font-size: 30rpx;
  921. overflow: hidden;
  922. line-height: 80rpx;
  923. padding: 0rpx 0rpx;
  924. text-align: center;
  925. margin: 0rpx auto;
  926. margin-top: 20rpx;
  927. border-radius: 40rpx;
  928. background-color: #e03519;
  929. }
  930. }
  931. }
  932. .price_content {
  933. background-color: #fff;
  934. position: fixed;
  935. bottom: 140rpx;
  936. padding: 16rpx 26rpx;
  937. width: 100%;
  938. .price_content_title {
  939. font-weight: bold;
  940. margin-bottom: 20rpx;
  941. }
  942. }
  943. </style>