createOrder.vue 27 KB

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