createOrder.vue 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040
  1. <template>
  2. <view>
  3. <!-- <view class="navbar">
  4. <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
  5. </view> -->
  6. <!-- 地址 -->
  7. <navigator v-if="tabCurrentIndex == 0" url="/pages/address/address?source=2" class="address-section">
  8. <view class="order-content" v-if="addressData.real_name">
  9. <text class="iconfont iconlocation"></text>
  10. <view class="cen">
  11. <view class="top">
  12. <text class="name">{{ addressData.real_name }}</text>
  13. <text class="mobile">{{ addressData.phone }}</text>
  14. </view>
  15. <text class="address">{{ addressData.province + addressData.city + addressData.district }} {{ addressData.detail }}</text>
  16. </view>
  17. <text class="iconfont iconenter" style="color: #CCCCCC;"></text>
  18. </view>
  19. <view class="order-content" v-if="!addressData.real_name">
  20. <view class="addAddress">
  21. <text class="iconfont iconaddition"></text>
  22. <text>添加收货地址</text>
  23. </view>
  24. </view>
  25. <image class="a-bg" :src="addressImg"></image>
  26. </navigator>
  27. <navigator v-if="tabCurrentIndex == 1" url="/pages/address/address?source=1" class="address-section">
  28. <view class="order-content" v-if="shopAddress.name">
  29. <text class="iconfont iconlocation"></text>
  30. <view class="cen">
  31. <view class="top">
  32. <text class="name">{{ shopAddress.name }}</text>
  33. <text class="mobile">{{ shopAddress.mobile }}</text>
  34. </view>
  35. <text class="address">{{ shopAddress.address }} {{ shopAddress.area }}</text>
  36. </view>
  37. <text class="iconfont iconenter"></text>
  38. </view>
  39. <view class="order-content" v-if="!shopAddress.name">
  40. <text class="addAddress">
  41. <text class="iconfont iconaddition"></text>
  42. <text>添加收货地址</text>
  43. </text>
  44. </view>
  45. <image class="a-bg" :src="addressImg"></image>
  46. </navigator>
  47. <!-- 订单编号 -->
  48. <view class="order-box">
  49. <text class="order-num">订单详情</text>
  50. <text class="iconfont iconenter" style="color: #CCCCCC;"></text>
  51. </view>
  52. <view class="goods-section" v-for="(ls, ind) in shopList" :key="ind">
  53. <!-- <view class="g-header b-b">
  54. <image class="logo" :src="ls.productInfo.image"></image>
  55. <text class="name">{{ ls.name }}</text>
  56. </view> -->
  57. <!-- 商品列表 -->
  58. <view class="g-item">
  59. <image :src="ls.productInfo.image"></image>
  60. <view class="right">
  61. <text class="title clamp">{{ ls.productInfo.store_name }}</text>
  62. <text class="attr">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.suk : '默认' }}</text>
  63. <view class="price-box">
  64. <!-- <text class="price">¥{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.price : ls.productInfo.price }}</text> -->
  65. <text class="price">¥{{ total_price }}</text>
  66. <text class="number">{{ 'x ' + ls.cart_num }}</text>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="yt-list-cell yt-list">
  72. <text class="cell-tit inte-power">邮费</text>
  73. <text class="integral" v-if="addressData.real_name">{{ pay_postage }}</text>
  74. <text class="integral" v-if="!addressData.real_name">¥6.00</text>
  75. </view>
  76. <view class="yt-list" v-if="ms_type == 2">
  77. <view class="yt-list-cell">
  78. <text class="cell-tit inte-power">
  79. 积分助力
  80. <text class="cell-tit">(可用积分:{{ userInfo.integral | filtersNub }})</text>
  81. </text>
  82. <input class="integral" type="number" v-model="integral" placeholder="输入助力积分" placeholder-class="placeholder" />
  83. </view>
  84. </view>
  85. <!-- 金额明细 -->
  86. <view class="yt-list">
  87. <view class="yt-list-cell b-b">
  88. <text class="cell-tit clamp">商品金额</text>
  89. <text class="cell-tip">¥{{ total_price }}</text>
  90. </view>
  91. <view class="yt-list-cell b-b" v-if="checkedPoints && integralShow">
  92. <text class="cell-tit clamp">积分抵扣</text>
  93. <text class="cell-tip">-¥{{ integralMoney }}</text>
  94. </view>
  95. <view class="yt-list-cell b-b" v-if="moneyAll.vipPrice > 0 && combination_id == 0">
  96. <text class="cell-tit clamp">VIP优惠</text>
  97. <text class="cell-tip">-¥{{ moneyAll.vipPrice }}</text>
  98. </view>
  99. <view class="yt-list-cell b-b" v-if="moneyAll.vipPrice > 0 && combination_id > 0">
  100. <text class="cell-tit clamp">团长优惠</text>
  101. <text class="cell-tip">-¥{{ moneyAll.vipPrice }}</text>
  102. </view>
  103. </view>
  104. <!-- 底部 -->
  105. <view class="footer">
  106. <view class="price-content">
  107. <text>合计:</text>
  108. <text class="price-tip">¥</text>
  109. <text class="price" v-if="addressData.real_name">{{ payPrice }}</text>
  110. <text class="price" v-if="!addressData.real_name">{{ ot_payPrice }}</text>
  111. </view>
  112. <text class="submit" :class="{ submitNo: !payType }" @click="payType ? submit() : ''">提交订单</text>
  113. </view>
  114. <!-- 优惠券面板 -->
  115. <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
  116. <view class="mask-content">
  117. <!-- 优惠券页面,仿mt -->
  118. <view class="coupon-item" @click="checkedCp(item)" v-for="(item, index) in couponList" :key="index">
  119. <view class="con">
  120. <view class="left">
  121. <text class="title">{{ item.coupon_title }}</text>
  122. <text class="time">领取时间{{ item.add_time }}</text>
  123. </view>
  124. <view class="right">
  125. <text class="price">{{ item.coupon_price }}</text>
  126. <text>满{{ item.use_min_price }}可用</text>
  127. </view>
  128. <view class="circle l"></view>
  129. <view class="circle r"></view>
  130. </view>
  131. <text class="tips">有效期至{{ item.end_time }}</text>
  132. </view>
  133. </view>
  134. </view>
  135. </view>
  136. </template>
  137. <script>
  138. import { mapState } from 'vuex';
  139. import { confirm } from '@/api/order.js';
  140. import { couponsOrder } from '@/api/coupon.js';
  141. import { computedOrderkey, createOrderkey } from '@/api/money.js';
  142. import { openPaySubscribe } from '@/utils/SubscribeMessage.js';
  143. import { cartAdd } from '@/api/product.js';
  144. import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
  145. import createPay from './components/createOrder_pay.vue';
  146. export default {
  147. components: { uniNoticeBar, createPay },
  148. data() {
  149. return {
  150. usableCoupon: null,
  151. payOpen: false,
  152. ms_type: '', // 1 普通商品 2拼团 4积分
  153. bargaintype: '', //bargain 砍价
  154. addressImg:
  155. 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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',
  156. // 当前选中的支付方式
  157. tabCurrentIndex: 0,
  158. navList: [
  159. {
  160. state: 0,
  161. text: '快递配送'
  162. },
  163. {
  164. state: 1,
  165. text: '到店自提'
  166. }
  167. ],
  168. maskState: 0, //优惠券面板显示状态
  169. desc: '', //备注
  170. idcardName: '', //身份证姓名
  171. idcardNum: '', //身份证号码
  172. integral: '', //积分助力
  173. // 优惠券列表
  174. couponList: [],
  175. couponListshow: false, //是有可以显示优惠券列表
  176. couponChecked: {}, //选中的优惠券
  177. // 收货地址
  178. addressData: {},
  179. // 店铺地址
  180. shopAddress: {
  181. name: '',
  182. mobile: '',
  183. addressName: '',
  184. address: '',
  185. area: '',
  186. default: false
  187. },
  188. // 商品列表
  189. shopList: [],
  190. // 购物车id
  191. cartId: '',
  192. storePostage: '', //邮费
  193. //购物金额详情
  194. moneyAll: {
  195. storeFreePostage: 0, //邮费优惠
  196. storePostage: 0, //邮费
  197. totalPrice: 0, //总支付金额
  198. vipPrice: 0 //vip优惠价
  199. },
  200. people: '1', //参团人数
  201. payPrice: 0, //总支付金额
  202. total_price: 0, //商品价格
  203. orderKey: '', //订单id
  204. checkedPoints: false, //判断是否积分抵扣
  205. integralAll: 0, //可使用的积分
  206. integralMoney: 0, //积分抵扣金额
  207. integralShow: false, //是否显示积分抵扣金额
  208. payType: true, //是否可支付
  209. pinkid: '0', //保存拼团商品id
  210. combination_id: '', //判断是否是拼团商品
  211. is_create: '0',
  212. option: {}, //当前传值存储
  213. goodsdata: '', //提交订单提交数据
  214. Orderkey: '', //生成key值提交数据
  215. pay_postage: ''
  216. };
  217. },
  218. filters: {
  219. filtersNub: function(value) {
  220. return +value;
  221. }
  222. },
  223. onLoad(option) {
  224. // 保存当前商品在购物车中的id
  225. console.log(option);
  226. // 保存当前商品在购物车中的id
  227. this.cartId = option.id;
  228. this.ms_type = option.goodsType;
  229. this.bargaintype = option.bargaintype;
  230. if (option.goodsType) {
  231. this.ms_type = option.goodsType;
  232. }
  233. if (option.pinkid) {
  234. if (option.pinkid > 0) {
  235. this.is_create = 0;
  236. } else {
  237. this.is_create = 1;
  238. }
  239. } else {
  240. this.is_create = 1;
  241. }
  242. // 判断是否为拼团商品
  243. if (option.type == 'pink') {
  244. this.option = option;
  245. this.pinkid = option.pinkid;
  246. this.cartAdd(option);
  247. } else {
  248. // 保存当前商品在购物车中的id
  249. this.cartId = option.id;
  250. this.loadData();
  251. }
  252. if (option.unique) {
  253. this.uniqueId = option.unique;
  254. }
  255. },
  256. watch: {
  257. checkedPoints(newValue, oldValue) {
  258. this.integralShow = false;
  259. this.payMoneyNub();
  260. },
  261. addressData(newValue, oldValue) {
  262. if (newValue != oldValue) {
  263. this.payMoneyNub();
  264. }
  265. }
  266. },
  267. computed: {
  268. ...mapState(['weichatObj', 'userInfo', 'baseURL']),
  269. ot_payPrice() {
  270. return parseInt(this.total_price) + 6;
  271. }
  272. },
  273. methods: {
  274. // 添加商品到购物车
  275. cartAdd(opt) {
  276. let obj = this;
  277. cartAdd({
  278. cartNum: 1, //商品数量
  279. new: 1, //商品是否新增加到购物车1为不加入0为加入
  280. combinationId: +opt.gid, //拼团商品id
  281. productId: +opt.pid, //普通商品id
  282. is_create: obj.is_create,
  283. mer_id: obj.shopList.mer_id,
  284. uniqueId: obj.option.unique
  285. })
  286. .then(function(e) {
  287. let da = e.data;
  288. // 獲取购物车号
  289. obj.cartId = da.cartId;
  290. // 加载数据
  291. obj.loadData();
  292. })
  293. .catch(e => {
  294. console.log(e);
  295. });
  296. },
  297. // 计算支付金额
  298. payMoneyNub() {
  299. let obj = this;
  300. if (obj.typegoods == 6) {
  301. obj.Orderkey = {
  302. orderkey: obj.orderKey,
  303. useIntegral: obj.checkedPoints ? 1 : 0, //是否积分抵扣
  304. couponId: obj.couponChecked.id, //优惠券编号
  305. addressId: obj.addressData.id, //地址编号
  306. level: obj.userInfo.level //用户等级
  307. };
  308. }else {
  309. obj.Orderkey = {
  310. orderkey: obj.orderKey,
  311. useIntegral: obj.checkedPoints ? 1 : 0, //是否积分抵扣
  312. couponId: obj.couponChecked.id, //优惠券编号
  313. addressId: obj.addressData.id, //地址编号
  314. is_create: obj.is_create
  315. };
  316. }
  317. //统计金额
  318. computedOrderkey(obj.Orderkey,obj.orderKey)
  319. .then(({ data }) => {
  320. console.log(data, 111);
  321. obj.payType = true;
  322. obj.addressId = data.addressId;
  323. obj.integralShow = true;
  324. // 获取支付金额
  325. obj.payPrice = +data.result.pay_price;
  326. obj.total_price = data.result.total_price;
  327. if (data.result.pay_postage == 0) {
  328. obj.pay_postage = '免运费';
  329. } else {
  330. obj.pay_postage = '¥' + data.result.pay_postage;
  331. }
  332. obj.integralMoney = data.result.deduction_price;
  333. })
  334. .catch(e => {
  335. console.log(e);
  336. obj.integralShow = false;
  337. obj.payType = false;
  338. });
  339. },
  340. // 是否使用积分
  341. checkedIntegral() {
  342. this.checkedPoints = !this.checkedPoints;
  343. },
  344. // 选中优惠券
  345. checkedCp(item) {
  346. this.couponChecked = item;
  347. this.payMoneyNub();
  348. },
  349. // 加载优惠券列表
  350. couponsOrder(money) {
  351. couponsOrder({}, money).then(e => {
  352. if (e.data.length > 0) {
  353. this.couponListshow = true;
  354. }
  355. this.couponList = e.data;
  356. });
  357. },
  358. //顶部tab点击
  359. tabClick(index) {
  360. this.tabCurrentIndex = index;
  361. },
  362. //显示优惠券面板
  363. toggleMask(type) {
  364. let timer = type === 'show' ? 10 : 300;
  365. let state = type === 'show' ? 1 : 0;
  366. this.maskState = 2;
  367. setTimeout(() => {
  368. this.maskState = state;
  369. }, timer);
  370. },
  371. loadData() {
  372. let obj = this;
  373. if (obj.typegoods == 6) {
  374. obj.goodsdata = {
  375. cartId: '' + obj.cartId,
  376. level: obj.userInfo.level //用户等级
  377. };
  378. } else {
  379. obj.goodsdata = {
  380. cartId: '' + obj.cartId,
  381. is_create: obj.is_create
  382. };
  383. }
  384. confirm(obj.goodsdata).then(({ data }) => {
  385. obj.combination_id = data.combination_id;
  386. obj.addressData = data.addressInfo || {};
  387. //obj.usableCoupon = data.usableCoupon.id;
  388. obj.shopList = data.cartInfo; //商品列表
  389. obj.BargainId = data.bargain_id
  390. // obj.moneyAll = data.priceGroup; //金额数据
  391. obj.orderKey = data.orderKey; //订单key
  392. obj.payPrice = data.priceGroup.totalPrice;
  393. // 计算金额
  394. this.payMoneyNub();
  395. // 加载优惠券
  396. // obj.couponsOrder(data.priceGroup.totalPrice);
  397. });
  398. },
  399. // // 购买数量变化
  400. // numberChange(data) {
  401. // this.number = data.number;
  402. // },
  403. numberChange(data) {
  404. let arr = this.cartList[data.index];
  405. arr.cart_num = data.number;
  406. getCartNum({ id: arr.id, number: data.number });
  407. this.calcTotal();
  408. },
  409. // 修改支付方式
  410. changePayType(type) {
  411. this.payType = type;
  412. },
  413. // 提交订单
  414. submit() {
  415. // if (this.bargaintype == 'bargain') {
  416. // let that = this,
  417. // data = {};
  418. // if (!this.addressData.real_name) {
  419. // this.$api.msg('请选择收货地址');
  420. // return false;
  421. // }
  422. // data = {
  423. // // real_name: that.contacts,
  424. // // phone: that.contactsTel,
  425. // addressId: that.addressData.id,
  426. // formId: '',
  427. // couponId: that.couponChecked.id,
  428. // payType: that.payType,
  429. // useIntegral: that.checkedPoints ? 1 : 0,
  430. // bargainId: that.BargainId,
  431. // combinationId: that.combinationId,
  432. // pinkId: that.pinkId,
  433. // seckill_id: that.seckillId,
  434. // mark: that.mark,
  435. // // store_id: that.system_store.id || 0,
  436. // 'from': that.from,
  437. // shipping_type: that.$util.$h.Add(that.shippingType, 1)
  438. // };
  439. // console.log(data);
  440. // if (data.payType == 'yue' && parseFloat(that.userInfo.now_money) < parseFloat(that.totalPrice)) return that.$util.Tips({
  441. // title: '余额不足!'
  442. // });
  443. // uni.showLoading({
  444. // title: '订单支付中'
  445. // });
  446. // uni.navigateTo({
  447. // url:
  448. // '/pages/money/pay?key=' + this.orderKey + '&pinkid=' + this.pinkid + '&use_integral_pink=' + this.use_integral_pink +
  449. // '&goodsType=' + this.ms_type + '&id=' + id + '&data=' + data
  450. // });
  451. // } else {
  452. // this.use_integral_pink = Number(this.integral);
  453. // let id = this.addressData.id;
  454. // if (!this.addressData.real_name) {
  455. // this.$api.msg('请选择收货地址');
  456. // return false;
  457. // }
  458. // uni.navigateTo({
  459. // url:
  460. // '/pages/money/pay?key=' + this.orderKey + '&pinkid=' + this.pinkid + '&use_integral_pink=' + this.use_integral_pink +
  461. // '&goodsType=' + this.ms_type + '&id=' + id
  462. // });
  463. // }
  464. this.use_integral_pink = Number(this.integral);
  465. let id = this.addressData.id;
  466. if (!this.addressData.real_name) {
  467. this.$api.msg('请选择收货地址');
  468. return false;
  469. }
  470. uni.navigateTo({
  471. url:
  472. '/pages/money/pay?key=' + this.orderKey + '&pinkid=' + this.pinkid + '&use_integral_pink=' + this.use_integral_pink +
  473. '&goodsType=' + this.ms_type + '&id=' + id
  474. });
  475. }
  476. }
  477. };
  478. </script>
  479. <style lang="scss">
  480. page {
  481. background: $page-color-base;
  482. padding-bottom: 100rpx;
  483. }
  484. .navbar {
  485. display: flex;
  486. height: 80rpx;
  487. padding: 0 5px;
  488. background: #fff;
  489. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  490. position: relative;
  491. z-index: 10;
  492. .nav-item {
  493. flex: 1;
  494. display: flex;
  495. justify-content: center;
  496. align-items: center;
  497. height: 100%;
  498. font-size: $font-lg + 4rpx;
  499. color: $font-color-dark;
  500. position: relative;
  501. &.current {
  502. color: $base-color;
  503. &:after {
  504. content: '';
  505. position: absolute;
  506. left: 50%;
  507. bottom: 0;
  508. transform: translateX(-50%);
  509. width: 140rpx;
  510. height: 0;
  511. border-bottom: 2px solid $base-color;
  512. }
  513. }
  514. }
  515. }
  516. .address-section {
  517. padding: 30rpx 0;
  518. background: #fff;
  519. position: relative;
  520. border-top: 1px solid $border-color-light;
  521. .order-content {
  522. min-height: 100rpx;
  523. display: flex;
  524. align-items: center;
  525. padding-right: 30rpx;
  526. .cen {
  527. .top {
  528. .mobile {
  529. color: #999999;
  530. }
  531. }
  532. .address {
  533. color: #333333;
  534. text-overflow: -o-ellipsis-lastline;
  535. overflow: hidden;
  536. text-overflow: ellipsis;
  537. display: -webkit-box;
  538. -webkit-line-clamp: 2;
  539. -webkit-box-orient: vertical;
  540. }
  541. }
  542. .addAddress {
  543. text-align: center;
  544. width: 100%;
  545. .iconaddition {
  546. border-radius: 100rpx;
  547. margin-right: 20rpx;
  548. }
  549. }
  550. }
  551. .iconlocation {
  552. flex-shrink: 0;
  553. display: flex;
  554. align-items: center;
  555. justify-content: center;
  556. width: 90rpx;
  557. color: #888;
  558. font-size: 44rpx;
  559. }
  560. .cen {
  561. display: flex;
  562. flex-direction: column;
  563. flex: 1;
  564. font-size: 28rpx;
  565. color: $font-color-dark;
  566. }
  567. .name {
  568. font-size: 34rpx;
  569. margin-right: 24rpx;
  570. }
  571. .address {
  572. margin-top: 16rpx;
  573. margin-right: 20rpx;
  574. color: $font-color-light;
  575. }
  576. .icon-you {
  577. font-size: 32rpx;
  578. color: $font-color-light;
  579. margin-right: 30rpx;
  580. }
  581. .a-bg {
  582. position: absolute;
  583. left: 0;
  584. bottom: 0;
  585. display: block;
  586. width: 100%;
  587. height: 5rpx;
  588. }
  589. }
  590. //订单编号
  591. .order-box {
  592. background: #ffffff;
  593. margin-top: 16rpx;
  594. display: flex;
  595. align-items: center;
  596. height: 70rpx;
  597. padding: 10rpx 30rpx 10rpx 40rpx;
  598. .order-num {
  599. width: 100%;
  600. font-size: 28rpx;
  601. font-weight: 500;
  602. color: rgba(51, 51, 51, 1);
  603. }
  604. .iconfont {
  605. float: right;
  606. }
  607. }
  608. .goods-section {
  609. background: #fff;
  610. padding: 20rpx 30rpx;
  611. .g-header {
  612. display: flex;
  613. align-items: center;
  614. height: 84rpx;
  615. padding: 0 30rpx;
  616. position: relative;
  617. }
  618. .logo {
  619. display: block;
  620. width: 50rpx;
  621. height: 50rpx;
  622. border-radius: 100px;
  623. }
  624. .name {
  625. font-size: 30rpx;
  626. color: $font-color-base;
  627. margin-left: 24rpx;
  628. }
  629. .g-item {
  630. display: flex;
  631. padding-top: 20rpx;
  632. image {
  633. flex-shrink: 0;
  634. display: block;
  635. width: 140rpx;
  636. height: 140rpx;
  637. border-radius: 4rpx;
  638. }
  639. .right {
  640. flex: 1;
  641. padding-left: 24rpx;
  642. overflow: hidden;
  643. .attr {
  644. margin-top: 10rpx;
  645. width: 195rpx;
  646. background: #f6f6f6;
  647. border-radius: 10rpx;
  648. font-size: 18rpx;
  649. font-weight: 400;
  650. color: #606972;
  651. line-height: 40rpx;
  652. text-align: center;
  653. padding: 0 20rpx;
  654. }
  655. }
  656. .title {
  657. font-size: 30rpx;
  658. color: $font-color-dark;
  659. }
  660. .spec {
  661. font-size: 26rpx;
  662. color: $font-color-light;
  663. }
  664. .price-box {
  665. display: flex;
  666. align-items: center;
  667. font-size: 32rpx;
  668. color: $font-color-dark;
  669. padding-top: 10rpx;
  670. .price {
  671. margin-bottom: 4rpx;
  672. color: #fa2740;
  673. }
  674. .number {
  675. font-size: 26rpx;
  676. color: $font-color-base;
  677. margin-left: 20rpx;
  678. }
  679. }
  680. .step-box {
  681. position: relative;
  682. }
  683. }
  684. }
  685. .yt-list {
  686. margin-top: 16rpx;
  687. background: #fff;
  688. }
  689. .yt-list-cell {
  690. display: flex;
  691. align-items: center;
  692. padding: 10rpx 30rpx 10rpx 40rpx;
  693. line-height: 70rpx;
  694. position: relative;
  695. &.cell-hover {
  696. background: #fafafa;
  697. }
  698. &.b-b:after {
  699. left: 30rpx;
  700. }
  701. .cell-icon {
  702. height: 32rpx;
  703. width: 32rpx;
  704. font-size: 22rpx;
  705. color: #fff;
  706. text-align: center;
  707. line-height: 32rpx;
  708. background: #f85e52;
  709. border-radius: 4rpx;
  710. margin-right: 12rpx;
  711. &.hb {
  712. background: #ffaa0e;
  713. }
  714. &.lpk {
  715. background: #3ab54a;
  716. }
  717. }
  718. .cell-more {
  719. align-self: center;
  720. font-size: 24rpx;
  721. color: $font-color-light;
  722. margin-left: 8rpx;
  723. margin-right: -10rpx;
  724. }
  725. .cell-tit {
  726. flex: 1;
  727. font-size: 26rpx;
  728. color: $font-color-light;
  729. margin-right: 10rpx;
  730. }
  731. .cell-tip {
  732. font-size: 26rpx;
  733. color: $font-color-dark;
  734. &.disabled {
  735. color: $font-color-light;
  736. }
  737. &.active {
  738. color: $base-color;
  739. }
  740. &.red {
  741. color: $base-color;
  742. }
  743. }
  744. &.desc-cell {
  745. .cell-tit {
  746. max-width: 90rpx;
  747. }
  748. }
  749. .desc {
  750. flex: 1;
  751. font-size: $font-base;
  752. color: $font-color-dark;
  753. }
  754. .inte-power {
  755. color: #333333;
  756. }
  757. .integral {
  758. text-align: right;
  759. font-size: 24rpx;
  760. }
  761. .symbol {
  762. margin-right: 10rpx;
  763. font-size: 26rpx;
  764. font-weight: bold;
  765. color: #f23a30;
  766. }
  767. .idcard {
  768. width: 500rpx;
  769. font-size: 26rpx;
  770. }
  771. }
  772. // 跨境购买人信息
  773. .border-box {
  774. padding: 10rpx 30rpx 10rpx 40rpx;
  775. line-height: 70rpx;
  776. .info {
  777. width: 335rpx;
  778. height: 27rpx;
  779. font-size: 32rpx;
  780. font-weight: 500;
  781. color: rgba(51, 51, 51, 1);
  782. }
  783. .border-right {
  784. float: right;
  785. .iconfont {
  786. width: 22rpx;
  787. height: 22rpx;
  788. color: rgba(153, 153, 153, 1);
  789. }
  790. .word-1 {
  791. margin-left: 6rpx;
  792. width: 43rpx;
  793. height: 22rpx;
  794. font-size: 24rpx;
  795. font-weight: 500;
  796. color: rgba(153, 153, 153, 1);
  797. }
  798. }
  799. }
  800. .border-style {
  801. border-bottom: 1px solid #f0f0f0;
  802. &:last-of-type {
  803. border-bottom: 0;
  804. }
  805. }
  806. /* 支付列表 */
  807. .pay-list {
  808. padding-left: 40rpx;
  809. margin-top: 16rpx;
  810. background: #fff;
  811. .pay-item {
  812. display: flex;
  813. align-items: center;
  814. padding-right: 20rpx;
  815. line-height: 1;
  816. height: 110rpx;
  817. position: relative;
  818. }
  819. .icon-weixinzhifu {
  820. width: 80rpx;
  821. font-size: 40rpx;
  822. color: #6bcc03;
  823. }
  824. .icon-alipay {
  825. width: 80rpx;
  826. font-size: 40rpx;
  827. color: #06b4fd;
  828. }
  829. .icon-xuanzhong2 {
  830. display: flex;
  831. align-items: center;
  832. justify-content: center;
  833. width: 60rpx;
  834. height: 60rpx;
  835. font-size: 40rpx;
  836. color: $base-color;
  837. }
  838. .tit {
  839. font-size: 32rpx;
  840. color: $font-color-dark;
  841. flex: 1;
  842. }
  843. }
  844. .footer {
  845. position: fixed;
  846. left: 0;
  847. bottom: 0;
  848. z-index: 995;
  849. display: flex;
  850. align-items: center;
  851. width: 100%;
  852. height: 90rpx;
  853. justify-content: space-between;
  854. font-size: 30rpx;
  855. background-color: #fff;
  856. z-index: 998;
  857. color: $font-color-base;
  858. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  859. .price-content {
  860. padding-left: 30rpx;
  861. font-size: 36rpx;
  862. }
  863. .price-tip {
  864. color: #fc4141;
  865. margin-left: 8rpx;
  866. font-size: 36rpx;
  867. }
  868. .price {
  869. font-size: 36rpx;
  870. color: #fc4141;
  871. }
  872. .submit {
  873. display: flex;
  874. align-items: center;
  875. justify-content: center;
  876. margin-right: 27rpx;
  877. width: 200rpx;
  878. height: 72rpx;
  879. color: #fff;
  880. font-size: 32rpx;
  881. background: linear-gradient(0deg, rgba(250, 39, 64, 1), rgba(254, 85, 68, 1));
  882. border-radius: 36rpx;
  883. }
  884. }
  885. /* 优惠券面板 */
  886. .mask {
  887. display: flex;
  888. align-items: flex-end;
  889. position: fixed;
  890. left: 0;
  891. top: var(--window-top);
  892. bottom: 0;
  893. width: 100%;
  894. background: rgba(0, 0, 0, 0);
  895. z-index: 9995;
  896. transition: 0.3s;
  897. .mask-content {
  898. width: 100%;
  899. max-height: 70vh;
  900. background: #f3f3f3;
  901. transform: translateY(100%);
  902. transition: 0.3s;
  903. overflow-y: scroll;
  904. }
  905. &.none {
  906. display: none;
  907. }
  908. &.show {
  909. background: rgba(0, 0, 0, 0.4);
  910. .mask-content {
  911. transform: translateY(0);
  912. }
  913. }
  914. }
  915. /* 优惠券列表 */
  916. .coupon-item {
  917. display: flex;
  918. flex-direction: column;
  919. margin: 20rpx 24rpx;
  920. background: #fff;
  921. .con {
  922. display: flex;
  923. align-items: center;
  924. position: relative;
  925. height: 120rpx;
  926. padding: 0 30rpx;
  927. &:after {
  928. position: absolute;
  929. left: 0;
  930. bottom: 0;
  931. content: '';
  932. width: 100%;
  933. height: 0;
  934. border-bottom: 1px dashed #f3f3f3;
  935. transform: scaleY(50%);
  936. }
  937. }
  938. .left {
  939. display: flex;
  940. flex-direction: column;
  941. justify-content: center;
  942. flex: 1;
  943. overflow: hidden;
  944. height: 100rpx;
  945. }
  946. .title {
  947. font-size: 32rpx;
  948. color: $font-color-dark;
  949. margin-bottom: 10rpx;
  950. }
  951. .time {
  952. font-size: 24rpx;
  953. color: $font-color-light;
  954. }
  955. .right {
  956. display: flex;
  957. flex-direction: column;
  958. justify-content: center;
  959. align-items: center;
  960. font-size: 26rpx;
  961. color: $font-color-base;
  962. height: 100rpx;
  963. }
  964. .price {
  965. font-size: 44rpx;
  966. color: $base-color;
  967. &:before {
  968. content: '¥';
  969. font-size: 34rpx;
  970. }
  971. }
  972. .tips {
  973. font-size: 24rpx;
  974. color: $font-color-light;
  975. line-height: 60rpx;
  976. padding-left: 30rpx;
  977. }
  978. .circle {
  979. position: absolute;
  980. left: -6rpx;
  981. bottom: -10rpx;
  982. z-index: 10;
  983. width: 20rpx;
  984. height: 20rpx;
  985. background: #f3f3f3;
  986. border-radius: 100px;
  987. &.r {
  988. left: auto;
  989. right: -6rpx;
  990. }
  991. }
  992. }
  993. </style>