order.vue 30 KB

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