order.vue 28 KB

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