createOrder.vue 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567
  1. <template>
  2. <view class="all">
  3. <view class="jg" style="height: 20rpx;">
  4. </view>
  5. <view class="navbar" style="display: none;">
  6. <view v-for="(item, index) in navList" :key="index" class="nav-item"
  7. :class="{ 'current': tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
  8. </view>
  9. <view class="top-nav" v-if="goodsType != 3">
  10. <view class="top-title">收货方式</view>
  11. <view class="top-btn">
  12. <view :class="{ 'action': tabCurrentIndex === 0 }" @click="tabClick(0)">外送</view>
  13. <view :class="{ 'action': tabCurrentIndex === 1 }" @click="tabClick(1)">自提</view>
  14. </view>
  15. </view>
  16. <!-- 地址 -->
  17. <template v-if="goodsType != 3">
  18. <navigator v-if="tabCurrentIndex == 0" url="/pages/set/address?source=1" class="address-section">
  19. <view class="order-content" v-if="addressData.real_name">
  20. <text class="iconfont iconlocation"></text>
  21. <view class="cen">
  22. <view class="top">
  23. <text class="name">{{ addressData.real_name }}</text>
  24. <text class="mobile">{{ addressData.phone }}</text>
  25. </view>
  26. <text class="address">{{ addressData.province + addressData.city + addressData.district }}
  27. {{ addressData.detail }}</text>
  28. </view>
  29. <text class="iconfont iconenter"></text>
  30. </view>
  31. <view class="order-content" v-if="!addressData.real_name">
  32. <view class="addAddress">
  33. <text class="iconfont iconaddition"></text>
  34. <text>添加收货地址</text>
  35. </view>
  36. </view>
  37. <image class="a-bg" :src="addressImg"></image>
  38. </navigator>
  39. </template>
  40. <view id="list-box" v-if="goodsType != 3">
  41. <!-- <view class="chose">
  42. <view class="title">选择门店</view>
  43. <view class="chose-name" @click.stop="selectStore">
  44. <view class="chose-name">
  45. {{ checkedStore ? '重新选择门店' : '请选择下单门店' }}
  46. <view class="img">
  47. <image src="https://bamboo.zfhzy.com/static/img/img39.png" mode=""></image>
  48. </view>
  49. </view>
  50. </view> -->
  51. <view class="stores-wrapper" v-if="checkedStore">
  52. <view class="store">
  53. <view class="store-logo">
  54. <image :src="checkedStore.image" mode=""></image>
  55. <text class="store-name clamp">{{ checkedStore.name }}</text>
  56. </view>
  57. <view class="store-addr store-base">
  58. 地区:
  59. <text>{{ checkedStore.detailed_address }}</text>
  60. </view>
  61. <view class="store-addr store-base">
  62. 电话:
  63. <text>{{ checkedStore.phone }}</text>
  64. </view>
  65. <view class="store-addr store-base">
  66. 距离:
  67. <text>{{checkedStore.distance | distance}}</text>
  68. </view>
  69. <view class="store-addr store-base">
  70. 营业时间:
  71. <text>{{checkedStore.day_time }}</text>
  72. </view>
  73. <view class="store-lv " v-if="checkedStore.store_user" style="background: #9a0b09;">采购</view>
  74. <view class="store-lv " v-else>门店</view>
  75. </view>
  76. </view>
  77. <view class="chose" v-if="shipping_type == 2">
  78. <view class="title">选择自提点</view>
  79. <view class="chose-name" @click.stop="selectPoint" v-if="tabCurrentIndex == 1">
  80. 请选择自提点
  81. <view class="img">
  82. <image src="https://bamboo.zfhzy.com/static/img/img39.png" mode=""></image>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="stores-wrapper" v-if="checkedPoint && shipping_type == 2">
  87. <view class="store">
  88. <view class="store-logo">
  89. <!-- <image :src="checkedPoint.image" mode=""></image> -->
  90. <text class="store-name clamp">{{ checkedPoint.name }}</text>
  91. </view>
  92. <view class="store-addr store-base">
  93. 地区:
  94. <text>{{ checkedPoint.detailed_address }}</text>
  95. </view>
  96. <view class="store-addr store-base">
  97. 电话:
  98. <text>{{ checkedPoint.phone }}</text>
  99. </view>
  100. <view class="store-addr store-base">
  101. 距离:
  102. <text>{{checkedPoint.distance | distance}}</text>
  103. </view>
  104. <view class="store-lv ">自提点</view>
  105. </view>
  106. </view>
  107. <template v-if="!is_caigou">
  108. <view class="personal" v-if="tabCurrentIndex == 1">
  109. <view class="info">
  110. <view class="name">提货人</view>
  111. <input type="text" class="box-right" v-model="addressData.real_name" style="color: #000000"
  112. placeholder="请填写提货人" />
  113. </view>
  114. <view class="info">
  115. <view class="name">手机号</view>
  116. <input type="text" class="box-right" v-model="addressData.phone" style="color: #000000" size="8"
  117. maxlength="11" placeholder="请填写收货人手机号" />
  118. </view>
  119. </view>
  120. </template>
  121. </view>
  122. <template v-if="!is_caigou">
  123. <view class="flex choose" v-if="goodsType != 3">
  124. <view class="choose-tit">
  125. {{shipping_type == 1 ? '配送时间' : '自提时间'}}
  126. </view>
  127. <view class="flex">
  128. <picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange">
  129. <view class="ps-time">{{psdate || '点击选择日期'}}</view>
  130. </picker>
  131. <picker mode="time" @change="bindTimeChange" :value="statr_time">
  132. <view class="ps-time">{{pstime || '点击选择时间'}}</view>
  133. </picker>
  134. </view>
  135. </view>
  136. </template>
  137. <view class="goods-section" v-for="(ls, ind) in shopList" :key="ind">
  138. <!-- <view class="g-header b-b">
  139. <image class="logo" :src="ls.productInfo.image"></image>
  140. <text class="name">{{ ls.name }}</text>
  141. </view> -->
  142. <!-- 商品列表 -->
  143. <view class="g-item">
  144. <image :src="ls.productInfo.image"></image>
  145. <view class="right">
  146. <text class="title clamp2">{{ ls.productInfo.store_name }}</text>
  147. <text
  148. class="spec">已选择{{ ls.productInfo.attrInfo ? (' ' + ls.productInfo.attrInfo.suk) : ' 默认' }}X{{ls.cart_num}}</text>
  149. <view class="price-box">
  150. <text
  151. class="price">¥{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.price : ls.productInfo.price }}</text>
  152. <text class="number"
  153. v-if="ls.productInfo.attrInfo*1 < ls.productInfo.attrInfo.ot_price*1">¥{{ ls.productInfo.attrInfo ?ls.productInfo.attrInfo.ot_price:ls.productInfo.ot_price }}</text>
  154. <!-- <view><text class="price">¥{{lss.price}}</text></view> -->
  155. <!-- <view class="number">
  156. <uni-number-box class="step" :value="lss.number" :index="indx" @eventChange="numberChange"></uni-number-box>
  157. </view> -->
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. <!-- 优惠明细 -->
  163. <view class="yt-list">
  164. <view class="yt-list-cell b-b" @click="couponListshow ? toggleMask('show') : ''">
  165. <view class="cell-icon">券</view>
  166. <text class="cell-tit clamp">优惠券</text>
  167. <text class="cell-tip active" v-if="couponListshow && !couponChecked.coupon_price">选择优惠券</text>
  168. <text class="cell-tip red" v-if="couponChecked.coupon_price">-¥{{ couponChecked.coupon_price }}</text>
  169. <text class="cell-tip disabled" v-if="!couponListshow && !couponChecked.coupon_price">没有优惠券</text>
  170. <text class="cell-more wanjia wanjia-gengduo-d"></text>
  171. </view>
  172. <!-- <view class="yt-list-cell b-b" v-if="moneyAll.storeFreePostage > 0">
  173. <view class="cell-icon hb">减</view>
  174. <text class="cell-tit clamp">商家促销</text>
  175. <text class="cell-tip disabled">满{{ moneyAll.storeFreePostage }}包邮</text>
  176. </view> -->
  177. </view>
  178. <!-- 配送时间 -->
  179. <uni-pagination title="" show-icon="" total="" current=""></uni-pagination>
  180. <!-- 金额明细 -->
  181. <view class="yt-list">
  182. <!-- <view class="yt-list-cell b-b">
  183. <text class="cell-tit clamp">优惠金额</text>
  184. <text class="cell-tip red">-¥35</text>
  185. </view> -->
  186. <view class="yt-list-cell b-b" v-if="goodsType == 0">
  187. <text class="cell-tit clamp">积分抵扣{{ '(当前积分:' + integralAll + ')' }}</text>
  188. <view class="cell-tip">
  189. <radio @click="checkedPoints = !checkedPoints" color=" #901b21" :checked="checkedPoints" />
  190. </view>
  191. </view>
  192. <!-- <view class="yt-list-cell b-b">
  193. <text class="cell-tit clamp">运费</text>
  194. <text class="cell-tip">{{ Postage }}</text>
  195. </view> -->
  196. <!-- <view class="yt-list-cell b-b">
  197. <text class="cell-tit clamp">备注</text>
  198. <input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
  199. </view> -->
  200. </view>
  201. <view class="price-info">
  202. <view class="item" v-if="shipping_type == 1 ">
  203. <text class="item-name">配送规则</text>
  204. <text class="item-value"
  205. v-if="ps_start_m > 0">{{ps_start | rml}}内配送费{{ps_start_m }}元,超出部分每{{ps_up | rml}}增加{{ps_up_m}}元</text>
  206. <text class="item-value" v-else>{{ps_start | rml}}内免配送费,超出部分每{{ps_up | rml}}增加{{ps_up_m}}元</text>
  207. </view>
  208. <view class="item">
  209. <text class="item-name">配送方式</text>
  210. <text class="item-value">{{ tabCurrentIndex === 0 ? '上门配送' : '门店自提' }}</text>
  211. </view>
  212. <view class="item">
  213. <text class="item-name">商品总价</text>
  214. <text class="item-value">¥{{ payAllMoney }}</text>
  215. </view>
  216. <view class="item" v-if="shipping_type == 1 ">
  217. <text class="item-name">物流费用</text>
  218. <text class="item-value">{{ Postage }}</text>
  219. </view>
  220. <view class="item" v-if="shipping_type == 1 ">
  221. <text class="item-name">配送距离</text>
  222. <text class="item-value">{{ pay_dis | rml }}</text>
  223. </view>
  224. <view class="item" v-if="moneyAll.vipPrice > 0">
  225. <text class="item-name">会员折扣</text>
  226. <text class="item-value">-¥{{ moneyAll.vipPrice }}</text>
  227. </view>
  228. <view class="item">
  229. <text class="item-name">押金</text>
  230. <text class="item-value">¥{{ moneyAll.totalDeposit || 0 }}</text>
  231. </view>
  232. <view class="item" v-if="checkedPoints && integralShow">
  233. <text class="item-name">积分抵扣</text>
  234. <text class="item-value">-¥{{ integralMoney }}</text>
  235. </view>
  236. <!-- <view class="item">
  237. <text class="item-name">积分</text>
  238. <text class="item-value">-{{}}</text>
  239. </view> -->
  240. </view>
  241. <!-- <view class="yt-list">
  242. <view class="yt-list-cell b-b">
  243. <text class="cell-tit clamp">商品金额</text>
  244. <text class="cell-tip">¥{{ payAllMoney }}</text>
  245. </view>
  246. <view class="yt-list-cell b-b" v-if="checkedPoints && integralShow">
  247. <text class="cell-tit clamp">积分抵扣</text>
  248. <text class="cell-tip">-¥{{ integralMoney }}</text>
  249. </view>
  250. <view class="yt-list-cell b-b" v-if="moneyAll.vipPrice > 0">
  251. <text class="cell-tit clamp">VIP优惠</text>
  252. <text class="cell-tip">-¥{{ moneyAll.vipPrice }}</text>
  253. </view>
  254. </view> -->
  255. <!-- <sPay v-if="sub" class="pay" @x="x" :moneyAll="moneyAll"></sPay> -->
  256. <!-- 底部 -->
  257. <view class="footer">
  258. <view class="price-content">
  259. <template v-if="payType">
  260. <text>应付金额</text>
  261. <text class="price-tip">¥</text>
  262. <text class="price">
  263. {{ (tabCurrentIndex == 0 ? (allPayInfo.pay_price*1 +allPayInfo.deposit*1).toFixed(2): (allPayInfo.pay_price - allPayInfo.pay_postage +allPayInfo.deposit).toFixed(2)) || 0 }}
  264. </text>
  265. </template>
  266. </view>
  267. <text class="submit" :class="{ submitNo: !payType || (tabCurrentIndex == 0 && isOver) }"
  268. @click="!(!payType || (tabCurrentIndex == 0 && isOver)) ? submit() : ''">提交订单</text>
  269. </view>
  270. <!-- 优惠券面板 -->
  271. <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
  272. <view class="mask-content">
  273. <!-- 优惠券页面,仿mt -->
  274. <view class="coupon-item" @click="checkedCp(item)" v-for="(item, index) in couponList" :key="index">
  275. <view class="con">
  276. <view class="left">
  277. <text class="title">{{ item.coupon_title }}</text>
  278. <text class="time">领取时间{{ item.add_time }}</text>
  279. </view>
  280. <view class="right">
  281. <text class="price">{{ item.coupon_price }}</text>
  282. <text>满{{ item.use_min_price }}可用</text>
  283. </view>
  284. <view class="circle l"></view>
  285. <view class="circle r"></view>
  286. </view>
  287. <text class="tips">有效期至{{ item.end_time }}</text>
  288. </view>
  289. </view>
  290. </view>
  291. </view>
  292. </template>
  293. <script>
  294. import {
  295. confirm,
  296. computedOrderkey,
  297. couponsOrder
  298. } from '@/api/order.js';
  299. import {
  300. getUserInfo,
  301. getAddress
  302. } from '@/api/user.js';
  303. import {
  304. cartAdd
  305. } from '@/api/product.js';
  306. import {
  307. mapState,
  308. mapMutations
  309. } from 'vuex';
  310. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  311. // import sPay from '../money/spay.vue'
  312. import {
  313. getPointList
  314. } from '@/api/index.js'
  315. export default {
  316. components: {
  317. // sPay
  318. },
  319. data() {
  320. return {
  321. storeList: [], //门店列表
  322. // checkedStore: null, //选择的门店
  323. pointList: [], //自提点列表
  324. // checkedPoint: '', //选择的自提点
  325. addressImg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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',
  326. // 当前选中的支付方式
  327. tabCurrentIndex: 0,
  328. navList: [{
  329. state: 0,
  330. text: '快递配送'
  331. },
  332. {
  333. state: 1,
  334. text: '到店自提'
  335. }
  336. ],
  337. maskState: 0, //优惠券面板显示状态
  338. time_area: '', //配送时间
  339. desc: '', //备注
  340. // payType: 1, //1微信 2支付宝
  341. // 优惠券列表
  342. couponList: [],
  343. couponListshow: false, //是有可以显示优惠券列表
  344. couponChecked: {}, //选中的优惠券
  345. // 收货地址
  346. addressData: {},
  347. // 收货地址id
  348. addressId: -1,
  349. // 店铺地址
  350. shopAddress: {
  351. name: '',
  352. mobile: '',
  353. addressName: '',
  354. address: '',
  355. area: '',
  356. default: false
  357. },
  358. // 商品列表
  359. shopList: [],
  360. // 购物车id
  361. cartId: '',
  362. //购物金额详情
  363. moneyAll: {
  364. storeFreePostage: 0, //邮费优惠
  365. storePostage: 0, //邮费
  366. totalPrice: 0, //总支付金额
  367. vipPrice: 0 //vip优惠价
  368. },
  369. payPrice: 0, //总支付金额
  370. orderKey: '', //订单id
  371. checkedPoints: false, //判断是否积分抵扣
  372. integralAll: 0, //可使用的积分
  373. integralMoney: 0, //积分抵扣金额
  374. integralShow: false, //是否显示积分抵扣金额
  375. payType: true, //是否可支付
  376. pinkid: '', //保存拼团商品id
  377. shipping_type: 1, // 1为快递 2为自提
  378. allPayInfo: {},
  379. goodsType: 0,
  380. sub: false, //是否提交订单
  381. isOver: false, //是否超出配送距离
  382. start_date: '',
  383. statr_time: '',
  384. psdate: '',
  385. pstime: '',
  386. pay_ps: 0, //配送费
  387. pay_dis: 0, //配送距离
  388. ps_start: 0,
  389. ps_start_m: 0,
  390. ps_up: 0,
  391. ps_up_m: 0,
  392. is_caigou: false, //是否是采购订单
  393. };
  394. },
  395. onLoad(option) {
  396. // 判断是否为拼团商品
  397. console.log(option, 'dingdanye')
  398. if (this.distribution == 2) {
  399. this.tabCurrentIndex = 0;
  400. this.shipping_type = 1
  401. } else if (this.distribution == 1) {
  402. this.tabCurrentIndex = 1;
  403. this.shipping_type = 2
  404. } else {
  405. this.tabCurrentIndex = 0;
  406. this.shipping_type = 1
  407. }
  408. if (option.type == 'pink') {
  409. this.pinkid = option.pinkId;
  410. this.cartAdd(option);
  411. } else {
  412. console.log('不是拼团+++++++++++');
  413. // 保存当前商品在购物车中的id
  414. this.cartId = option.id;
  415. this.loadData();
  416. }
  417. if (option.goodsType) {
  418. this.goodsType = option.goodsType;
  419. }
  420. if (option.isTakeaway) {
  421. this.tabCurrentIndex = option.isTakeaway * 1 - 1;
  422. this.shipping_type = option.isTakeaway * 1
  423. }
  424. if (this.goodsType == 3) {
  425. this.tabCurrentIndex = 1;
  426. this.shipping_type = 2
  427. }
  428. if (option.address) {
  429. this.addressId = option.address * 1;
  430. console.log(this.addressId)
  431. }
  432. this.userinfo();
  433. },
  434. onShow(option) {
  435. let date = new Date();
  436. let Y = date.getFullYear()
  437. let M = date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
  438. let D = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
  439. let h = date.getHours() > 9 ? date.getHours() : ('0' + date.getHours())
  440. let m = date.getMinutes() > 9 ? date.getMinutes() : ('0' + date.getMinutes())
  441. this.start_date = Y + '-' + M + '-' + D
  442. this.statr_time = h + ':' + m
  443. console.log(this.start_date, this.statr_time)
  444. console.log(this.checkedStore, 'this.checkedStore+++++++++++++')
  445. },
  446. watch: {
  447. pstime(newValue, oldValue) {
  448. console.log(this.checkedStore.day_time.split(' - ')[0])
  449. let okbin = this.checkedStore.day_time.split(' - ')[0]
  450. let okend = this.checkedStore.day_time.split(' - ')[1]
  451. let chooseTime = newValue + ':00'
  452. if (okbin > chooseTime || okend < chooseTime) {
  453. this.$api.msg('选择的时间不在营业时间内')
  454. this.pstime = ''
  455. }
  456. // console.log(newValue,'pstime++++++++++++')
  457. },
  458. checkedPoints(newValue, oldValue) {
  459. this.integralShow = false;
  460. this.payMoneyNub();
  461. },
  462. addressData: {
  463. handler(newValue, oldValue) {
  464. console.log(newValue, '新的地址')
  465. console.log(this.checkedStore, 'this.checkedStore')
  466. let distance = this.space(newValue.latitude, newValue.longitude, this.checkedStore.latitude, this
  467. .checkedStore.longitude)
  468. console.log(distance, this.checkedStore.radius)
  469. if (this.tabCurrentIndex == 0) {
  470. if (distance > this.checkedStore.radius) {
  471. this.$api.msg('地址超出配送范围')
  472. this.isOver = true
  473. } else {
  474. this.isOver = false
  475. }
  476. }
  477. this.payMoneyNub()
  478. },
  479. immediate: true,
  480. deep: true
  481. },
  482. tabCurrentIndex(newValue, oldValue) {
  483. console.log(newValue, 'newValue++++++++')
  484. if (this.orderKey) {
  485. this.payMoneyNub()
  486. }
  487. if (newValue == 0) {
  488. let distance = this.space(this.addressData.latitude, this.addressData.longitude, this.checkedStore
  489. .latitude, this.checkedStore.longitude)
  490. console.log(distance, this.checkedStore.radius)
  491. if (this.tabCurrentIndex == 0) {
  492. if (distance > this.checkedStore.radius) {
  493. this.$api.msg('地址超出配送范围')
  494. this.isOver = true
  495. } else {
  496. this.isOver = false
  497. }
  498. }
  499. }
  500. }
  501. },
  502. filters: {
  503. distance(val) {
  504. let str = '';
  505. if (val) {
  506. if (val * 1 > 1000) {
  507. return (str = ((val * 1) / 1000).toFixed(2) + 'km');
  508. } else {
  509. return (str = (val * 1).toFixed(0) + 'm');
  510. }
  511. }
  512. return str;
  513. },
  514. rml(val) {
  515. let str = ''
  516. if (val) {
  517. if (val * 1 >= 1000) {
  518. return (str = ((val * 1) / 1000).toFixed(1) + '公里');
  519. } else {
  520. return (str = (val * 1).toFixed(0) + '米');
  521. }
  522. }
  523. return str;
  524. }
  525. },
  526. computed: {
  527. ...mapState('user', ['hasLogin', 'userInfo', 'checkedStore', 'checkedPoint', 'distribution']),
  528. Postage() {
  529. let money = +this.moneyAll.storePostage + this.pay_ps;
  530. if (money == 0) {
  531. return '免运费';
  532. } else {
  533. return '¥' + money;
  534. }
  535. },
  536. payAllMoney() {
  537. return +this.moneyAll.totalPrice + +this.moneyAll.vipPrice;
  538. }
  539. },
  540. methods: {
  541. ...mapMutations('user', ['setPointInfo']),
  542. x() {
  543. this.sub = false
  544. },
  545. space(lat1, lng1, lat2, lng2) {
  546. var radLat1 = (lat1 * Math.PI) / 180.0;
  547. var radLat2 = (lat2 * Math.PI) / 180.0;
  548. var a = radLat1 - radLat2;
  549. var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
  550. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
  551. .pow(Math.sin(b / 2), 2)));
  552. s = s * 6378.137;
  553. s = Math.round(s * 10000) / 10000;
  554. return s * 1000;
  555. },
  556. // 添加商品到购物车
  557. cartAdd(opt) {
  558. let obj = this;
  559. cartAdd({
  560. // cartNum: 1, //商品数量
  561. new: 1, //商品是否新增加到购物车1为不加入0为加入
  562. mer_id: +opt.merid, //商店id
  563. combinationId: +opt.gid + '', //拼团商品id
  564. productId: +opt.pid, //普通商品id
  565. uniqueId: opt.unique
  566. })
  567. .then(function(e) {
  568. let da = e.data;
  569. // 獲取购物车号
  570. obj.cartId = da.cartId;
  571. // 加载数据
  572. obj.loadData();
  573. })
  574. .catch(e => {
  575. console.log(e);
  576. });
  577. },
  578. // 加载用户基础信息
  579. userinfo() {
  580. getUserInfo({}).then(({
  581. data
  582. }) => {
  583. this.integralAll = data.integral;
  584. });
  585. },
  586. // 计算支付金额
  587. payMoneyNub() {
  588. let obj = this
  589. computedOrderkey({
  590. orderkey: this.orderKey,
  591. useIntegral: this.checkedPoints ? 1 : 0, //是否积分抵扣
  592. // useIntegral: 1,
  593. couponId: this.couponChecked.id, //优惠券编号
  594. addressId: this.addressData.id, //地址编号
  595. shipping_type: this.shipping_type
  596. })
  597. .then(({
  598. data
  599. }) => {
  600. this.payType = true;
  601. this.integralShow = true;
  602. this.pay_ps = data.result.pay_postage_sh * 1
  603. this.pay_dis = data.result.distance * 1
  604. this.ps_start = data.result.store.sh_start_distance * 1
  605. this.ps_start_m = data.result.store.sh_start_money * 1
  606. this.ps_up = data.result.store.sh_step * 1
  607. this.ps_up_m = data.result.store.sh_step_money * 1
  608. // 获取支付金额
  609. this.payPrice = +data.result.pay_price;
  610. this.integralMoney = data.result.deduction_price;
  611. this.allPayInfo = data.result;
  612. // 判断是否是采购商品
  613. if (data.result.store_user) {
  614. this.is_caigou = true
  615. // 设置默认时间
  616. var myDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000);
  617. var time = myDate.toJSON().split('T').join(' ').substr(0, 19)
  618. let arr = time.split(' ')
  619. this.psdate = arr[0]
  620. this.pstime = arr[1]
  621. // 设置配送点
  622. getPointList({}, this.checkedStore.id).then(({
  623. data
  624. }) => {
  625. // obj.checkedPoint = data.list[0]
  626. obj.setPointInfo(data.list[0])
  627. // console.log(data.list[0])
  628. })
  629. //
  630. obj.addressData.real_name = obj.userInfo.store_info.name
  631. obj.addressData.phone = obj.userInfo.store_info.phone
  632. console.log(obj.userInfo.store_info.name)
  633. console.log(obj.userInfo.store_info.phone)
  634. // console.log(time.split(' '))
  635. }
  636. })
  637. .catch(e => {
  638. console.log(e);
  639. this.integralShow = false;
  640. this.payType = false;
  641. });
  642. },
  643. // 是否使用积分
  644. checkedIntegral() {
  645. this.checkedPoints = !this.checkedPoints;
  646. },
  647. // 选中优惠券
  648. checkedCp(item) {
  649. this.couponChecked = item;
  650. this.payMoneyNub();
  651. },
  652. // 加载优惠券列表
  653. couponsOrder(money) {
  654. couponsOrder({
  655. cartId: this.cartId
  656. }, money).then(e => {
  657. if (e.data.length > 0) {
  658. this.couponListshow = true;
  659. }
  660. this.couponList = e.data;
  661. });
  662. },
  663. //顶部tab点击
  664. tabClick(index) {
  665. this.tabCurrentIndex = index;
  666. this.shipping_type = index + 1;
  667. },
  668. //显示优惠券面板
  669. toggleMask(type) {
  670. let timer = type === 'show' ? 10 : 300;
  671. let state = type === 'show' ? 1 : 0;
  672. this.maskState = 2;
  673. setTimeout(() => {
  674. this.maskState = state;
  675. }, timer);
  676. },
  677. loadData() {
  678. let obj = this;
  679. confirm({
  680. cartId: obj.cartId + ''
  681. }).then(({
  682. data
  683. }) => {
  684. console.log(data, 'loadData')
  685. if (obj.addressId == -1) {
  686. obj.addressData = data.addressInfo || {};
  687. console.log('5555555')
  688. } else {
  689. getAddress({}, obj.addressId).then(({
  690. data
  691. }) => {
  692. obj.addressData = data
  693. })
  694. }
  695. obj.shopList = data.cartInfo; //商品列表
  696. console.log(obj.shopList, 'obj.shopList+++++++++')
  697. obj.moneyAll = data.priceGroup; //金额数据
  698. console.log(obj.moneyAll, 'obj.moneyAll+++++++++++');
  699. obj.orderKey = data.orderKey; //订单key
  700. // 计算金额
  701. this.payMoneyNub();
  702. // 加载优惠券
  703. obj.couponsOrder(data.priceGroup.totalPrice);
  704. }).catch(err => {
  705. // setTimeout(function() {
  706. // uni.navigateBack({
  707. // })
  708. // }, 1500)
  709. });
  710. },
  711. // 购买数量变化
  712. numberChange(data) {
  713. this.number = data.number;
  714. },
  715. // 修改支付方式
  716. changePayType(type) {
  717. this.payType = type;
  718. },
  719. // 提交订单
  720. submit() {
  721. console.log('点击提交');
  722. if (this.goodsType != 3) {
  723. if (!this.checkedStore) {
  724. return this.$api.msg('请选择下单门店');
  725. }
  726. }
  727. if (this.goodsType != 3) {
  728. if (this.psdate == '' || this.pstime == '') {
  729. if (this.shipping_type == 1) {
  730. return this.$api.msg('请选择配送时间')
  731. } else {
  732. return this.$api.msg('请选择自提时间')
  733. }
  734. }
  735. this.time_area = this.psdate + ' ' + this.pstime + ':00'
  736. console.log(this.time_area, 'this.time_area')
  737. }
  738. if (this.shipping_type == 2) {
  739. if (this.goodsType != 3) {
  740. if (!this.checkedPoint) {
  741. return this.$api.msg('请选择自提点');
  742. } else {
  743. console.log(this.checkedPoint, 'this.checkedPoint++++++++++++++');
  744. }
  745. }
  746. console.log(this.checkedPoint, 'this.checkedPoint+++++++++++')
  747. }
  748. if (this.checkedPoints && this.shopList.length > 1) {
  749. this.$api.msg('积分商品只可单件购买');
  750. return false;
  751. }
  752. if (!this.addressData.real_name) {
  753. if (this.goodsType != 3) {
  754. this.$api.msg('请选择收货地址');
  755. return false;
  756. }
  757. }
  758. console.log('拼接URL66666666666666');
  759. this.sub = true
  760. let url = '/pages/money/pay?key=' + this.orderKey + '&store_id=' + this.checkedStore.id +
  761. '&shipping_type=' + this.shipping_type;
  762. if (this.goodsType == 3) {
  763. url += '&goodstype=' + this.goodsType;
  764. }
  765. if (this.shipping_type == 2) {
  766. url += '&point_id=' + this.checkedPoint.id;
  767. }
  768. console.log(url, 'url+++++++++++++++');
  769. if (this.pinkid) {
  770. url += '&pinkid=' + this.pinkid;
  771. }
  772. uni.navigateTo({
  773. url
  774. });
  775. },
  776. selectStore() {
  777. uni.navigateTo({
  778. url: '/pages/order/choisestore?type=1'
  779. });
  780. },
  781. selectPoint() {
  782. if (!this.checkedStore) {
  783. return this.$api.msg('请选择下单门店');
  784. }
  785. uni.navigateTo({
  786. url: '/pages/order/choisestore?type=2&id=' + this.checkedStore.id
  787. });
  788. },
  789. bindDateChange(e) {
  790. console.log(e, 'ddddddddddddddddddd')
  791. this.psdate = e.detail.value
  792. console.log(this.psdate)
  793. },
  794. bindTimeChange(e) {
  795. this.pstime = e.detail.value
  796. console.log(this.pstime)
  797. }
  798. }
  799. };
  800. </script>
  801. <style lang="scss">
  802. page {
  803. background: $page-color-base;
  804. padding-bottom: 100rpx;
  805. }
  806. .all {
  807. margin-top: -20rpx;
  808. }
  809. .navbar {
  810. display: flex;
  811. height: 80rpx;
  812. padding: 0 5px;
  813. background: #fff;
  814. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  815. position: relative;
  816. z-index: 10;
  817. .nav-item {
  818. flex: 1;
  819. display: flex;
  820. justify-content: center;
  821. align-items: center;
  822. height: 100%;
  823. font-size: $font-lg + 4rpx;
  824. color: $font-color-dark;
  825. position: relative;
  826. &.current {
  827. color: $base-color;
  828. &:after {
  829. content: '';
  830. position: absolute;
  831. left: 50%;
  832. bottom: 0;
  833. transform: translateX(-50%);
  834. width: 140rpx;
  835. height: 0;
  836. border-bottom: 2px solid $base-color;
  837. }
  838. }
  839. }
  840. }
  841. .address-section {
  842. // padding: 30rpx 0;
  843. background: #fff;
  844. position: relative;
  845. border-top: 1px solid $border-color-light;
  846. .order-content {
  847. min-height: 100rpx;
  848. display: flex;
  849. align-items: center;
  850. .addAddress {
  851. text-align: center;
  852. width: 100%;
  853. display: flex;
  854. justify-content: center;
  855. align-items: center;
  856. .iconaddition {
  857. font-size: 55rpx;
  858. line-height: 1;
  859. border-radius: 100rpx;
  860. margin-right: 20rpx;
  861. }
  862. }
  863. }
  864. .iconlocation {
  865. flex-shrink: 0;
  866. display: flex;
  867. align-items: center;
  868. justify-content: center;
  869. width: 90rpx;
  870. color: #888;
  871. font-size: 44rpx;
  872. }
  873. .cen {
  874. display: flex;
  875. flex-direction: column;
  876. flex: 1;
  877. font-size: 28rpx;
  878. color: $font-color-dark;
  879. }
  880. .name {
  881. font-size: 34rpx;
  882. margin-right: 24rpx;
  883. }
  884. .address {
  885. margin-top: 16rpx;
  886. margin-right: 20rpx;
  887. color: $font-color-light;
  888. }
  889. .icon-you {
  890. font-size: 32rpx;
  891. color: $font-color-light;
  892. margin-right: 30rpx;
  893. }
  894. .a-bg {
  895. position: absolute;
  896. left: 0;
  897. bottom: 0;
  898. display: block;
  899. width: 100%;
  900. height: 5rpx;
  901. }
  902. }
  903. .goods-section {
  904. // margin-top: 16rpx;
  905. background: #fff;
  906. padding-bottom: 1px;
  907. .g-header {
  908. display: flex;
  909. align-items: center;
  910. height: 84rpx;
  911. padding: 0 30rpx;
  912. position: relative;
  913. }
  914. .logo {
  915. display: block;
  916. width: 50rpx;
  917. height: 50rpx;
  918. border-radius: 100px;
  919. }
  920. .name {
  921. font-size: 30rpx;
  922. color: $font-color-base;
  923. margin-left: 24rpx;
  924. }
  925. .g-item {
  926. display: flex;
  927. margin: 20rpx 30rpx;
  928. padding: 30rpx 0;
  929. position: relative;
  930. image {
  931. flex-shrink: 0;
  932. display: block;
  933. width: 180rpx;
  934. height: 180rpx;
  935. border-radius: 4rpx;
  936. }
  937. .right {
  938. flex: 1;
  939. padding-left: 24rpx;
  940. overflow: hidden;
  941. }
  942. .title {
  943. width: 475rpx;
  944. font-size: 30rpx;
  945. color: $font-color-dark;
  946. }
  947. .spec {
  948. display: inline-block;
  949. position: absolute;
  950. top: 130rpx;
  951. // left: 243rpx;
  952. font-size: 23rpx;
  953. font-size: 24rpx;
  954. font-weight: 500;
  955. color: #8a857c;
  956. line-height: 1;
  957. }
  958. .price-box {
  959. display: flex;
  960. align-items: center;
  961. font-size: 32rpx;
  962. color: $font-color-dark;
  963. padding-top: 10rpx;
  964. position: absolute;
  965. top: 150rpx;
  966. .price {
  967. font-size: 32rpx;
  968. font-weight: bold;
  969. color: #901b21;
  970. }
  971. .number {
  972. margin-left: 20rpx;
  973. font-size: 24rpx;
  974. font-weight: 500;
  975. color: #9d9d9d;
  976. text-decoration: line-through;
  977. }
  978. }
  979. .step-box {
  980. position: relative;
  981. }
  982. }
  983. }
  984. .yt-list {
  985. margin-top: 16rpx;
  986. background: #fff;
  987. }
  988. .yt-list-cell {
  989. display: flex;
  990. align-items: center;
  991. padding: 10rpx 30rpx 10rpx 40rpx;
  992. line-height: 70rpx;
  993. position: relative;
  994. &.cell-hover {
  995. background: #fafafa;
  996. }
  997. &.b-b:after {
  998. left: 30rpx;
  999. }
  1000. .cell-icon {
  1001. height: 32rpx;
  1002. width: 32rpx;
  1003. font-size: 22rpx;
  1004. color: #fff;
  1005. text-align: center;
  1006. line-height: 32rpx;
  1007. background: #f85e52;
  1008. border-radius: 4rpx;
  1009. margin-right: 12rpx;
  1010. &.hb {
  1011. background: #ffaa0e;
  1012. }
  1013. &.lpk {
  1014. background: #3ab54a;
  1015. }
  1016. }
  1017. .cell-more {
  1018. align-self: center;
  1019. font-size: 24rpx;
  1020. color: $font-color-light;
  1021. margin-left: 8rpx;
  1022. margin-right: -10rpx;
  1023. }
  1024. .cell-tit {
  1025. flex: 1;
  1026. font-size: 26rpx;
  1027. color: $font-color-light;
  1028. margin-right: 10rpx;
  1029. }
  1030. .cell-tip {
  1031. font-size: 26rpx;
  1032. color: $font-color-dark;
  1033. &.disabled {
  1034. color: $font-color-light;
  1035. }
  1036. &.active {
  1037. color: $base-color;
  1038. }
  1039. &.red {
  1040. color: $base-color;
  1041. }
  1042. }
  1043. &.desc-cell {
  1044. .cell-tit {
  1045. max-width: 90rpx;
  1046. }
  1047. }
  1048. .desc {
  1049. flex: 1;
  1050. text-align: right;
  1051. font-size: $font-base;
  1052. color: $font-color-dark;
  1053. }
  1054. }
  1055. /* 支付列表 */
  1056. .pay-list {
  1057. padding-left: 40rpx;
  1058. margin-top: 16rpx;
  1059. background: #fff;
  1060. .pay-item {
  1061. display: flex;
  1062. align-items: center;
  1063. padding-right: 20rpx;
  1064. line-height: 1;
  1065. height: 110rpx;
  1066. position: relative;
  1067. }
  1068. .icon-weixinzhifu {
  1069. width: 80rpx;
  1070. font-size: 40rpx;
  1071. color: #6bcc03;
  1072. }
  1073. .icon-alipay {
  1074. width: 80rpx;
  1075. font-size: 40rpx;
  1076. color: #06b4fd;
  1077. }
  1078. .icon-xuanzhong2 {
  1079. display: flex;
  1080. align-items: center;
  1081. justify-content: center;
  1082. width: 60rpx;
  1083. height: 60rpx;
  1084. font-size: 40rpx;
  1085. color: $base-color;
  1086. }
  1087. .tit {
  1088. font-size: 32rpx;
  1089. color: $font-color-dark;
  1090. flex: 1;
  1091. }
  1092. }
  1093. .footer {
  1094. position: fixed;
  1095. left: 0;
  1096. bottom: 0;
  1097. z-index: 995;
  1098. display: flex;
  1099. align-items: center;
  1100. width: 100%;
  1101. height: 90rpx;
  1102. justify-content: space-between;
  1103. font-size: 30rpx;
  1104. background-color: #fff;
  1105. z-index: 998;
  1106. color: $font-color-base;
  1107. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  1108. .price-content {
  1109. padding-left: 30rpx;
  1110. }
  1111. .price-tip {
  1112. color: #901b21;
  1113. margin-left: 8rpx;
  1114. }
  1115. .price {
  1116. font-size: 36rpx;
  1117. color: #901b21;
  1118. }
  1119. .submit {
  1120. display: flex;
  1121. align-items: center;
  1122. justify-content: center;
  1123. width: 280rpx;
  1124. height: 100%;
  1125. color: #fff;
  1126. font-size: 32rpx;
  1127. background-color: $base-color;
  1128. &.submitNo {
  1129. background-color: $font-color-disabled;
  1130. }
  1131. }
  1132. }
  1133. /* 优惠券面板 */
  1134. .mask {
  1135. display: flex;
  1136. align-items: flex-end;
  1137. position: fixed;
  1138. left: 0;
  1139. top: var(--window-top);
  1140. bottom: 0;
  1141. width: 100%;
  1142. background: rgba(0, 0, 0, 0);
  1143. z-index: 9995;
  1144. transition: 0.3s;
  1145. .mask-content {
  1146. width: 100%;
  1147. max-height: 70vh;
  1148. background: #f3f3f3;
  1149. transform: translateY(100%);
  1150. transition: 0.3s;
  1151. overflow-y: scroll;
  1152. }
  1153. &.none {
  1154. display: none;
  1155. }
  1156. &.show {
  1157. background: rgba(0, 0, 0, 0.4);
  1158. .mask-content {
  1159. transform: translateY(0);
  1160. }
  1161. }
  1162. }
  1163. /* 优惠券列表 */
  1164. .coupon-item {
  1165. display: flex;
  1166. flex-direction: column;
  1167. margin: 20rpx 24rpx;
  1168. background: #fff;
  1169. .con {
  1170. display: flex;
  1171. align-items: center;
  1172. position: relative;
  1173. height: 120rpx;
  1174. padding: 0 30rpx;
  1175. &:after {
  1176. position: absolute;
  1177. left: 0;
  1178. bottom: 0;
  1179. content: '';
  1180. width: 100%;
  1181. height: 0;
  1182. border-bottom: 1px dashed #f3f3f3;
  1183. transform: scaleY(50%);
  1184. }
  1185. }
  1186. .left {
  1187. display: flex;
  1188. flex-direction: column;
  1189. justify-content: center;
  1190. flex: 1;
  1191. overflow: hidden;
  1192. height: 100rpx;
  1193. }
  1194. .title {
  1195. font-size: 32rpx;
  1196. color: $font-color-dark;
  1197. margin-bottom: 10rpx;
  1198. }
  1199. .time {
  1200. font-size: 24rpx;
  1201. color: $font-color-light;
  1202. }
  1203. .right {
  1204. display: flex;
  1205. flex-direction: column;
  1206. justify-content: center;
  1207. align-items: center;
  1208. font-size: 26rpx;
  1209. color: $font-color-base;
  1210. height: 100rpx;
  1211. }
  1212. .price {
  1213. font-size: 44rpx;
  1214. color: $base-color;
  1215. &:before {
  1216. content: '¥';
  1217. font-size: 34rpx;
  1218. }
  1219. }
  1220. .tips {
  1221. font-size: 24rpx;
  1222. color: $font-color-light;
  1223. line-height: 60rpx;
  1224. padding-left: 30rpx;
  1225. }
  1226. .circle {
  1227. position: absolute;
  1228. left: -6rpx;
  1229. bottom: -10rpx;
  1230. z-index: 10;
  1231. width: 20rpx;
  1232. height: 20rpx;
  1233. background: #f3f3f3;
  1234. border-radius: 100px;
  1235. &.r {
  1236. left: auto;
  1237. right: -6rpx;
  1238. }
  1239. }
  1240. }
  1241. .top-nav {
  1242. width: 750rpx;
  1243. height: 94rpx;
  1244. background: #ffffff;
  1245. display: flex;
  1246. padding: 0 27rpx 0 35rpx;
  1247. justify-content: space-between;
  1248. align-items: center;
  1249. .top-title {
  1250. line-height: 94rpx;
  1251. font-size: 30rpx;
  1252. font-weight: 500;
  1253. color: #333333;
  1254. }
  1255. .top-btn {
  1256. width: 168rpx;
  1257. height: 56rpx;
  1258. background: #901b21;
  1259. border-radius: 14rpx;
  1260. padding: 4rpx;
  1261. display: flex;
  1262. justify-content: space-between;
  1263. view {
  1264. width: 76rpx;
  1265. height: 48rpx;
  1266. border-radius: 12rpx;
  1267. text-align: center;
  1268. color: #fff;
  1269. background: #901b21;
  1270. }
  1271. .action {
  1272. color: #901b21;
  1273. background: #ffffff;
  1274. }
  1275. }
  1276. }
  1277. .price-info {
  1278. width: 750rpx;
  1279. padding: 20rpx 30rpx;
  1280. background-color: #fff;
  1281. font-size: 24rpx;
  1282. font-weight: 500;
  1283. color: #666666;
  1284. .item {
  1285. display: flex;
  1286. justify-content: space-between;
  1287. line-height: 36rpx;
  1288. }
  1289. }
  1290. #list-box {
  1291. .chose {
  1292. margin-top: 25rpx;
  1293. background-color: #ffffff;
  1294. display: flex;
  1295. justify-content: space-between;
  1296. padding: 32rpx 24rpx;
  1297. font-size: 30rpx;
  1298. .title {
  1299. color: #333;
  1300. }
  1301. .chose-name {
  1302. display: flex;
  1303. align-items: center;
  1304. color: #901b21;
  1305. .img {
  1306. width: 30rpx;
  1307. height: 24rpx;
  1308. image {
  1309. width: 30rpx;
  1310. height: 24rpx;
  1311. display: inline;
  1312. }
  1313. }
  1314. }
  1315. }
  1316. .personal {
  1317. margin-top: 15rpx;
  1318. display: flex;
  1319. flex-direction: column;
  1320. background-color: #ffffff;
  1321. .box-right {
  1322. width: 100%;
  1323. font-size: 30rpx;
  1324. text-align: right;
  1325. padding-right: 25rpx;
  1326. }
  1327. .info {
  1328. padding: 10rpx 25rpx;
  1329. display: flex;
  1330. align-items: center;
  1331. font-size: 30rpx;
  1332. justify-content: space-between;
  1333. .name {
  1334. width: 120rpx;
  1335. }
  1336. input {
  1337. margin-left: 12rpx;
  1338. width: 100%;
  1339. // background-color: pink;
  1340. display: block;
  1341. color: #999999;
  1342. }
  1343. }
  1344. }
  1345. }
  1346. .stores-wrapper {
  1347. padding-top: 20rpx;
  1348. height: 100%;
  1349. .store {
  1350. width: 710rpx;
  1351. // height: 231rpx;
  1352. background: #ffffff;
  1353. box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
  1354. border-radius: 10rpx;
  1355. // margin-bottom: 15rpx;
  1356. margin: 0 auto 15rpx;
  1357. position: relative;
  1358. padding: 25rpx 0 20rpx 20rpx;
  1359. .store-logo {
  1360. height: 65rpx;
  1361. font-size: 32rpx;
  1362. font-weight: bold;
  1363. color: #333333;
  1364. line-height: 65rpx;
  1365. margin-bottom: 20rpx;
  1366. position: relative;
  1367. image {
  1368. width: 65rpx;
  1369. height: 65rpx;
  1370. border-radius: 50%;
  1371. }
  1372. .store-name {
  1373. max-width: 500rpx;
  1374. display: inline-block;
  1375. padding-left: 12rpx;
  1376. position: absolute;
  1377. top: 0;
  1378. }
  1379. }
  1380. .store-base {
  1381. height: 37rpx;
  1382. line-height: 37rpx;
  1383. font-size: 24rpx;
  1384. font-weight: bold;
  1385. color: #333333;
  1386. text {
  1387. font-weight: normal;
  1388. }
  1389. }
  1390. .store-lv {
  1391. display: inline-block;
  1392. // width: 60rpx;
  1393. padding: 0 10rpx;
  1394. height: 40rpx;
  1395. background: linear-gradient(-90deg, #dcb876 0%, #eecd92 100%);
  1396. border-radius: 5rpx;
  1397. text-align: center;
  1398. line-height: 40rpx;
  1399. color: #fff;
  1400. font-size: 23rpx;
  1401. position: absolute;
  1402. right: 20rpx;
  1403. top: 38rpx;
  1404. }
  1405. .store-can {
  1406. width: 113rpx;
  1407. height: 44rpx;
  1408. border: 2px solid #901b21;
  1409. border-radius: 5rpx;
  1410. font-size: 23rpx;
  1411. text-align: center;
  1412. line-height: 44rpx;
  1413. font-weight: 500;
  1414. color: #901b21;
  1415. position: absolute;
  1416. right: 20rpx;
  1417. bottom: 25rpx;
  1418. }
  1419. }
  1420. }
  1421. // .ps-time {
  1422. // width: 375rpx;
  1423. // height: 40rpx;
  1424. // background-color: red;
  1425. // }
  1426. .choose {
  1427. margin-top: 20rpx;
  1428. background-color: #fff;
  1429. padding: 10rpx 50rpx 10rpx 25rpx;
  1430. line-height: 70rpx;
  1431. justify-content: space-between;
  1432. .choose-tit {
  1433. width: 220rpx;
  1434. // background-color: #bfa;
  1435. }
  1436. .ps-time {
  1437. text-align: right;
  1438. width: 200rpx;
  1439. // background-color: red;
  1440. }
  1441. }
  1442. </style>