pindanDet.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212
  1. <template>
  2. <view class="">
  3. <view class="margin-tb-sm bg-white padding">
  4. <view class="flex justify-between align-center">
  5. <view class="flex align-center">
  6. <image src="../../../static/tabbar/index.png" style="width: 40rpx;height: 37rpx;" mode=""></image>
  7. <view class="text-xl text-bold text-black margin-lr-xs">{{goodsShop.shopName}}</view>
  8. <!-- <image src="../../../static/images/index/right.png" style="width: 14rpx;height: 24rpx;" mode=""></image> -->
  9. </view>
  10. <view class="flex Switch ">
  11. <view @click="tabSwidth(1)" :class="orderType==1?'selSwitch':''">自取</view>
  12. <view @click="tabSwidth(2)" :class="orderType==2?'selSwitch':''">外卖</view>
  13. </view>
  14. </view>
  15. <view style="font-size: 20upx;color: #FF130A;margin-top: 10rpx;">
  16. <view>加入购物车就可以拼单哦拼单人购物车有商品先清空再添加</view>
  17. </view>
  18. <!-- <view class="text-gray">距离您16km</view> -->
  19. <view class="flex justify-between margin-top">
  20. <view class="btn1" @click="cancel()">取消拼单</view>
  21. <button class="btn" open-type="share">分享好友</button>
  22. </view>
  23. </view>
  24. <view v-if="myGoodList.length" class="margin-tb-sm bg-white padding">
  25. <view class="flex justify-between align-center padding-bottom">
  26. <image :src="myGoodList[0].avatar" mode="" style="width: 48rpx;height: 48rpx;border-radius: 48rpx;">
  27. </image>
  28. <view class="flex align-center flex-sub margin-left-sm">
  29. <view class="text-black text-lg text-bold">{{myGoodList[0].nickName}}</view>
  30. <!-- <view class="margin-left-sm">我自己</view> -->
  31. </view>
  32. <view class="flex">
  33. <view class="sBtn1" @click="clear()" v-if="userId == myGoodList[0].userId">清空</view>
  34. <view class="sBtn2" @click="goGoodsList" v-if="userId == myGoodList[0].userId">去点餐</view>
  35. <!-- <view class="sBtn2" @click="goGoodsList">修改订单</view> -->
  36. </view>
  37. </view>
  38. <u-line color="#E6E6E6" />
  39. <view class="padding-top" v-for="(item,index) in myGoodList" :key='index'>
  40. <view class="flex justify-between">
  41. <view class="text-black text-lg text-bold">{{item.goodsName}}</view>
  42. <view v-if="item.skuMessage">{{item.skuMessage}}</view>
  43. <view class="text-lg text-gray"><text class="text-sm">x</text>{{item.goodsNum}}</view>
  44. </view>
  45. <view v-if="index==(myGoodList.length-1)" class="flex justify-between margin-top-sm ">
  46. <view class="text-gray">总计</view>
  47. <view class="text-lg text-black text-bold"><text class="text-sm">¥</text>{{item.goodsPrice}}</view>
  48. </view>
  49. </view>
  50. </view>
  51. <view v-if="otherGoodList.length>0" v-for="(orders,index) in otherGoodList" :key='index'>
  52. <view v-if="(index!=0 && orders.userId!=otherGoodList[index-1].userId) || index==0"
  53. class="margin-tb-sm bg-white padding">
  54. <view class="flex justify-between align-center padding-bottom">
  55. <image :src="orders.avatar" style="width: 48rpx;height: 48rpx;border-radius: 48rpx;"></image>
  56. <view class="flex align-center flex-sub margin-left-sm">
  57. <view class="text-black text-lg text-bold">{{orders.nickName}}</view>
  58. </view>
  59. <view class="flex">
  60. <view class="sBtn3" @click="goGoodsList" v-if="userId == orders.userId">去点餐</view>
  61. </view>
  62. </view>
  63. <u-line color="#E6E6E6" />
  64. <view v-for="(item,index) in otherGoodList" :key='index'>
  65. <view class="padding-top" v-if="item.userId==orders.userId">
  66. <view class="flex justify-between">
  67. <view class="text-black text-lg text-bold">{{item.goodsName}}</view>
  68. <view v-if="item.skuMessage">{{item.skuMessage}}</view>
  69. <view class="text-lg text-gray"><text class="text-sm">x</text>{{item.goodsNum}}</view>
  70. </view>
  71. <view v-if="item.userId!=otherGoodList[index+1].userId"
  72. class="flex justify-between margin-top-sm ">
  73. <view class="text-gray">总计</view>
  74. <view class="text-lg text-black text-bold"><text class="text-sm">¥</text>{{item.goodsPrice}}
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. <empty v-if="!myGoodList.length && !otherGoodList.length" content='暂无商品'></empty>
  82. <view style="height: 100rpx;"></view>
  83. <!-- 结算 -->
  84. <!-- 结算 -->
  85. <view class="settlement" @click="isPopupShow">
  86. <view class="settlement_img">
  87. <image src="../../../static/images/index/diancan.png" mode=""></image>
  88. <view class="settlement_hot">{{number}}</view>
  89. </view>
  90. <view class="settlement_le">
  91. <text>¥</text>{{totalPrice}}
  92. </view>
  93. <view class="settlement_ri" @click.stop="goConfirm()">去结算</view>
  94. </view>
  95. <!-- 购物车弹窗 -->
  96. <u-popup v-model="popupShow" mode="bottom" border-radius="20">
  97. <view class="padding">
  98. <view class="flex justify-between align-center margin-bottom-sm">
  99. <view class="text-bold text-black text-df">拼单餐品</view>
  100. <view class="flex align-center">
  101. <image src="../../../static/images/index/delete.png" style="width: 28rpx;height: 31rpx;"
  102. mode=""></image>
  103. <text class="margin-left-xs" @click="cancel">取消拼单</text>
  104. </view>
  105. </view>
  106. <scroll-view scroll-y='true' class="popup">
  107. <view v-for="(item,ind) in goodsList.orderGoodsList[0]" :key='ind'>
  108. <view class="flex align-center margin-tb-sm">
  109. <image :src="item.goodsPicture[0]" style="width: 96rpx;height: 96rpx;border-radius: 10rpx;">
  110. </image>
  111. <view class="margin-left-sm">
  112. <view>{{item.goodsName}}</view>
  113. <view v-if="item.skuMessage">{{item.skuMessage}}</view>
  114. </view>
  115. </view>
  116. <view class="flex justify-between align-center">
  117. <view class="text-bold text-sm">¥<text class="text-lg">{{item.goodsPrice}}</text>
  118. </view>
  119. <view class="flex align-center justify-between">
  120. <view @click.stop="noAdd(item,ind)">
  121. <image src="../../../static/images/index/jian.png"
  122. style="width: 54rpx;height: 54rpx;"></image>
  123. </view>
  124. <view class="text-center margin-lr-xs">{{item.goodsNum}}</view>
  125. <view @click.stop="add(item,ind)">
  126. <image src="../../../static/images/index/add.png"
  127. style="width: 50rpx;height: 50rpx;"></image>
  128. </view>
  129. </view>
  130. </view>
  131. </view>
  132. </scroll-view>
  133. </view>
  134. <view class="settlement1 margin-top-lg">
  135. <view class="settlement_img">
  136. <image src="../../../static/images/index/diancan.png" mode=""></image>
  137. <view class="settlement_hot">{{number}}</view>
  138. </view>
  139. <view class="settlement_le">
  140. <text>¥</text>{{totalPrice}}
  141. </view>
  142. <view class="settlement_ri" @click.stop="goConfirm()">去结算</view>
  143. </view>
  144. </u-popup>
  145. </view>
  146. </template>
  147. <script>
  148. import empty from '@/components/empty.vue'
  149. export default {
  150. components: {
  151. empty
  152. },
  153. onShareAppMessage(res) { //发送给朋友
  154. return {
  155. title: '快来和我一起拼个单吧!',
  156. path: '/pages/index/index?shopId=' + this.shopId + '&orderId=' + this.orderId,
  157. imageUrl: this.tuiguangImg,
  158. }
  159. },
  160. onShareTimeline(res) { //分享到朋友圈
  161. return {
  162. title: "快来和我一起拼个单吧!",
  163. path: '/pages/index/index?shopId=' + this.shopId + '&orderId=' + this.orderId,
  164. imageUrl: this.tuiguangImg,
  165. }
  166. },
  167. data() {
  168. return {
  169. dataList:[],
  170. orderType: 2,
  171. shopId: '',
  172. tuiguangImg: '',
  173. goodsNum: 0,
  174. totalPrice: 0,
  175. orderId: '',
  176. otherGoodList: [],
  177. myGoodList: [],
  178. goodsList: [],
  179. userId: '',
  180. popupShow: false,
  181. goodsShop: {},
  182. number: 0,
  183. }
  184. },
  185. onLoad(e) {
  186. this.shopId = e.shopId
  187. this.orderId = e.orderId ? e.orderId : uni.getStorageSync('orderId')
  188. this.userId = uni.getStorageSync('userId')
  189. this.getData();
  190. },
  191. onShow() {
  192. this.getOrderDetail();
  193. this.getGoodList()
  194. this.$Request.getT('/app/common/type/238').then(res => {
  195. if (res.code === 0) {
  196. this.tuiguangImg = res.data.value;
  197. }
  198. });
  199. },
  200. methods: {
  201. // 添加数量
  202. add(item, index) {
  203. // this.count++;
  204. console.log(item, index)
  205. this.goodsList.orderGoodsList[0][index].goodsNum++
  206. let data = {
  207. orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
  208. type: 1,
  209. num: 1,
  210. shopId: this.shopId
  211. }
  212. this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
  213. if (res.code == 0) {
  214. this.getGoodList()
  215. this.getOrderList();
  216. } else {
  217. this.$queue.showToast(res.msg);
  218. this.goodsList.orderGoodsList[0][index].goodsNum--
  219. }
  220. });
  221. },
  222. // 减少数量
  223. noAdd(item, index) {
  224. console.log(item, index)
  225. this.goodsList.orderGoodsList[0][index].goodsNum--
  226. // this.count--;
  227. let data = {
  228. orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
  229. type: 2,
  230. num: 1,
  231. shopId: this.shopId
  232. }
  233. this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
  234. if (res.code == 0) {
  235. this.getGoodList()
  236. this.getOrderList();
  237. }
  238. });
  239. },
  240. isPopupShow() {
  241. // uni.showToast({
  242. // title: '请返回到购物车模块操作',
  243. // icon: 'none'
  244. // })
  245. if (this.myGoodList.length > 0) {
  246. if (this.userId != this.myGoodList[0].userId) {
  247. uni.showToast({
  248. title: '请联系拼单发起人操作',
  249. icon: "none"
  250. })
  251. return
  252. } else {
  253. this.getOrderList();
  254. }
  255. } else {
  256. uni.showToast({
  257. title: '请联系拼单发起人操作',
  258. icon: "none"
  259. })
  260. return
  261. }
  262. },
  263. clear() {
  264. if (this.myGoodList.length > 0) {
  265. if (this.userId != this.myGoodList[0].userId) {
  266. uni.showToast({
  267. title: '请联系拼单发起人操作',
  268. icon: "none"
  269. })
  270. return
  271. }
  272. }
  273. let that = this
  274. uni.showModal({
  275. title: '提示',
  276. content: '确定清空我的订单吗',
  277. success: function(res) {
  278. if (res.confirm) {
  279. console.log('用户点击确定');
  280. let data = {
  281. shopId: that.shopId,
  282. }
  283. that.$Request.post("/app/order/emptyShoppingTrolley", data).then(res => {
  284. if (res.code == 0) {
  285. that.myGoodList = [];
  286. that.getGoodList()
  287. } else {
  288. that.$queue.showToast(res.msg);
  289. }
  290. });
  291. } else if (res.cancel) {
  292. console.log('用户点击取消');
  293. }
  294. }
  295. });
  296. },
  297. // 取消订单
  298. cancel(e) {
  299. if (this.myGoodList.length > 0) {
  300. //检查是不是发起人
  301. if (this.userId != this.myGoodList[0].userId) {
  302. uni.showToast({
  303. title: '请联系拼单发起人操作',
  304. icon: "none"
  305. })
  306. return
  307. }
  308. }
  309. let that = this
  310. console.log(e)
  311. uni.showModal({
  312. title: '提示',
  313. content: '确认取消订单吗?',
  314. success: function(res) {
  315. if (res.confirm) {
  316. console.log('用户点击确定');
  317. let data = {
  318. orderId: that.orderId
  319. }
  320. that.$Request.post("/app/order/deleteOrder", data).then(res => {
  321. if (res.code == 0) {
  322. uni.showToast({
  323. title: '订单取消成功',
  324. icon: 'none'
  325. })
  326. uni.removeStorageSync('orderId')
  327. setTimeout(function() {
  328. uni.navigateBack()
  329. }, 1000)
  330. } else {
  331. uni.showToast({
  332. title: res.msg,
  333. icon: 'none'
  334. })
  335. }
  336. });
  337. } else if (res.cancel) {
  338. console.log('用户点击取消');
  339. }
  340. }
  341. });
  342. },
  343. // 切换外卖/自提
  344. tabSwidth(e) {
  345. this.orderType = e
  346. this.getOrderList()
  347. },
  348. goGoodsList() {
  349. uni.setStorageSync('types', 1)
  350. uni.navigateBack({
  351. })
  352. // uni.navigateTo({
  353. // url: '/pages/index/shop/goodsList?shopId=' + this.shopId
  354. // })
  355. },
  356. // 获取购物车商品列表
  357. getOrderList() {
  358. let data = {
  359. shopId: this.shopId,
  360. page: 1,
  361. limit: 1000,
  362. status: 1,
  363. // orderType: this.orderType
  364. }
  365. this.$Request.get("/app/order/selectAllOrderList", data).then(res => {
  366. if (res.code == 0 && res.data.pageUtils.list.length) {
  367. this.goodsList = res.data.pageUtils.list[0]
  368. if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0]) {
  369. this.totalPrice = parseFloat(parseFloat(res.data.money).toFixed(2));
  370. this.goodsNum = 0
  371. this.goodsList.orderGoodsList[0].forEach(res => {
  372. res.goodsPicture = res.goodsPicture.split(',')
  373. this.goodsNum += res.goodsNum
  374. })
  375. this.popupShow = true
  376. if (!this.goodsList.orderGoodsList[0].length) {
  377. this.popupShow = false
  378. }
  379. }
  380. }
  381. uni.hideLoading()
  382. });
  383. },
  384. getOrderDetail() {
  385. this.$Request.getT('/app/order/selectOrderById?orderId=' + this.orderId).then(res => {
  386. if (res.code == 0 && res.data) {
  387. if (res.data.isPay && res.data.isPay == 1) {
  388. uni.showToast({
  389. title: '拼单已结束',
  390. icon: 'none'
  391. })
  392. setTimeout(function() {
  393. uni.removeStorageSync('orderId')
  394. uni.navigateBack()
  395. }, 1000)
  396. }
  397. }
  398. });
  399. },
  400. getGoodList() {
  401. this.number = 0;
  402. let data = {
  403. orderId: this.orderId,
  404. }
  405. this.$Request.get("/app/order/selectShareTheBill", data).then(res => {
  406. if (res.code == 0) {
  407. if (!res.data) {
  408. uni.showToast({
  409. title: '拼单已结束',
  410. icon: 'none'
  411. })
  412. setTimeout(function() {
  413. uni.removeStorageSync('orderId')
  414. uni.navigateBack()
  415. }, 1000)
  416. }
  417. this.goodsShop = res.data.goodsShop
  418. // this.goodsList = res.data.orderGoodsList
  419. this.myGoodList = res.data.parentShareTheBill
  420. let mySum = 0
  421. for (var i = 0; i < this.myGoodList.length; i++) {
  422. if (i == 0) {
  423. mySum = parseFloat(parseFloat(parseFloat(this.myGoodList[i].goodsPrice) *
  424. parseFloat(this.myGoodList[i].goodsNum)).toFixed(2))
  425. this.number += this.myGoodList[i].goodsNum
  426. } else {
  427. mySum = parseFloat(parseFloat(mySum + parseFloat(this.myGoodList[i].goodsPrice) *
  428. parseFloat(this.myGoodList[i].goodsNum)).toFixed(2))
  429. this.number += this.myGoodList[i].goodsNum
  430. }
  431. if (i == (this.myGoodList.length - 1)) {
  432. this.myGoodList[i].goodsPrice = mySum
  433. this.totalPrice = mySum
  434. }
  435. }
  436. this.otherGoodList = res.data.orderGoodsList
  437. var sum = 0
  438. for (var i = 0; i < this.otherGoodList.length; i++) {
  439. if (i == 0) {
  440. sum = parseFloat(parseFloat(parseFloat(this.otherGoodList[i].goodsPrice) *
  441. parseFloat(this.otherGoodList[i].goodsNum)).toFixed(2))
  442. this.number += this.otherGoodList[i].goodsNum
  443. } else {
  444. this.number += this.otherGoodList[i].goodsNum
  445. if (this.otherGoodList[i].userId == this.otherGoodList[i - 1].userId) {
  446. sum = parseFloat(parseFloat(sum + parseFloat(this.otherGoodList[i]
  447. .goodsPrice) * parseFloat(this.otherGoodList[i].goodsNum)).toFixed(
  448. 2))
  449. } else {
  450. this.otherGoodList[i - 1].goodsPrice = sum
  451. sum = parseFloat(parseFloat(parseFloat(this.otherGoodList[i].goodsPrice) *
  452. parseFloat(this.otherGoodList[i].goodsNum)).toFixed(2))
  453. }
  454. }
  455. if (i == (this.otherGoodList.length - 1)) {
  456. this.otherGoodList[i].goodsPrice = sum
  457. this.totalPrice = parseFloat(parseFloat(parseFloat(this.totalPrice) + parseFloat(
  458. sum)).toFixed(2))
  459. // parseFloat(parseFloat(mySum).toFixed(2))
  460. }
  461. }
  462. } else {
  463. uni.removeStorageSync('orderId')
  464. this.$queue.showToast(res.msg);
  465. setTimeout(function() {
  466. uni.navigateBack()
  467. }, 1000)
  468. }
  469. });
  470. },
  471. // 获取店铺信息
  472. getData() {
  473. let data = {
  474. shopId: this.shopId
  475. }
  476. this.$Request.get("/app/goods/selectGoodsList", data).then(res => {
  477. if (res.code == 0 && res.data) {
  478. this.dataList = res.data.list
  479. }
  480. });
  481. },
  482. // 去结算
  483. goConfirm() {
  484. if (!this.userId) {
  485. uni.navigateTo({
  486. url: '/pages/public/login'
  487. })
  488. return
  489. }
  490. if (this.myGoodList.length > 0) {
  491. if (this.userId != this.myGoodList[0].userId) {
  492. uni.showToast({
  493. title: '请联系拼单发起人结算订单',
  494. icon: "none"
  495. })
  496. return
  497. }
  498. }
  499. if (this.myGoodList.length > 0 || this.otherGoodList.length > 0) {
  500. let that = this;
  501. let goodstr1 = 0 //商品库的 必须次数
  502. let goodstr2 = 0 //购物车的 必须次数
  503. let regex = new RegExp('必选', 'g');
  504. let dataList = JSON.stringify(this.dataList)
  505. if (dataList.match(regex)) {
  506. goodstr1 = dataList.match(regex).length
  507. console.log("goodstr1----" + goodstr1)
  508. if (dataList.indexOf('必选') != -1) { //检测商品是否存在必选
  509. let goodsList = JSON.stringify(that.myGoodList)
  510. if (goodsList.match(regex)) {
  511. goodstr2 = goodsList.match(regex).length
  512. console.log("goodstr2----" + goodstr2)
  513. if (goodstr1 == goodstr2) { //检查购物车商品是否存在必须
  514. uni.navigateTo({
  515. url: '/pages/index/shop/confirmOrder?shopId=' + that.shopId + '&orderType=2&orderId=' +
  516. that.orderId
  517. })
  518. } else {
  519. uni.showToast({
  520. title: "有" + goodstr1 + "个必选商品,请选择后结算",
  521. icon: "none"
  522. })
  523. return
  524. }
  525. } else {
  526. uni.showToast({
  527. title: "有" + goodstr1 + "个必选商品,请选择后结算",
  528. icon: "none"
  529. })
  530. return
  531. }
  532. }
  533. } else {
  534. uni.navigateTo({
  535. url: '/pages/index/shop/confirmOrder?shopId=' + that.shopId + '&orderType=2&orderId=' +
  536. that.orderId
  537. })
  538. }
  539. } else {
  540. uni.showToast({
  541. title: '请先添加商品',
  542. icon: "none"
  543. })
  544. }
  545. },
  546. }
  547. }
  548. </script>
  549. <style>
  550. .Switch {
  551. width: 164rpx;
  552. height: 62rpx;
  553. color: #FFFFFF;
  554. background: #FCD202;
  555. border-radius: 30rpx;
  556. display: flex;
  557. align-items: center;
  558. padding: 2rpx;
  559. }
  560. .Switch>view {
  561. /* flex: 1; */
  562. width: 80rpx;
  563. text-align: center;
  564. line-height: 62rpx;
  565. height: 58rpx;
  566. }
  567. .selSwitch {
  568. color: #333333;
  569. background: #FFFFFF;
  570. border-radius: 30rpx;
  571. }
  572. .btn {
  573. width: 320rpx;
  574. height: 88rpx;
  575. color: #333333;
  576. font-size: 30rpx;
  577. font-weight: 500;
  578. text-align: center;
  579. line-height: 88rpx;
  580. border-radius: 50rpx;
  581. background: #FCD202;
  582. border: 2rpx solid #FCD202;
  583. margin: 0;
  584. }
  585. button::after {
  586. border: 2rpx solid #FCD202;
  587. }
  588. .btn1 {
  589. width: 320rpx;
  590. height: 88rpx;
  591. color: #999999;
  592. font-weight: 500;
  593. font-size: 30rpx;
  594. text-align: center;
  595. line-height: 88rpx;
  596. border-radius: 44rpx;
  597. border: 2rpx solid #CCCCCC;
  598. }
  599. .btn2 {
  600. width: 320rpx;
  601. height: 88rpx;
  602. color: #333333;
  603. font-weight: 500;
  604. text-align: center;
  605. line-height: 88rpx;
  606. border-radius: 50rpx;
  607. background: #FCD202;
  608. }
  609. /* 结算 */
  610. .settlement {
  611. width: 94%;
  612. background-color: #000000;
  613. line-height: 3.4;
  614. border-radius: 49rpx;
  615. position: fixed;
  616. bottom: 10rpx;
  617. left: 3%;
  618. display: flex;
  619. justify-content: space-between;
  620. }
  621. .settlement_le {
  622. width: 45%;
  623. padding-left: 20%;
  624. color: #FFFFFF;
  625. font-size: 30rpx;
  626. }
  627. .settlement_le text {
  628. font-size: 22rpx;
  629. }
  630. .settlement_ri {
  631. width: 35%;
  632. background-color: #FCD202;
  633. font-family: PingFang SC;
  634. font-weight: 800;
  635. color: #333333;
  636. text-align: center;
  637. border-top-right-radius: 49rpx;
  638. border-bottom-right-radius: 49rpx;
  639. }
  640. .settlement_img {
  641. width: 91rpx;
  642. height: 96rpx;
  643. position: absolute;
  644. // bottom: 30rpx;
  645. left: 5%;
  646. }
  647. .settlement_img image {
  648. width: 74rpx;
  649. height: 81rpx;
  650. }
  651. .settlement_hot {
  652. width: 35rpx;
  653. height: 35rpx;
  654. line-height: 35rpx;
  655. text-align: center;
  656. border-radius: 50%;
  657. position: absolute;
  658. top: -10rpx;
  659. right: 0;
  660. background-color: #FF130A;
  661. color: #FFFFFF;
  662. font-size: 20rpx;
  663. font-weight: bold;
  664. color: #FFFFFF;
  665. }
  666. .sBtn1 {
  667. width: 128rpx;
  668. height: 48rpx;
  669. color: #999999;
  670. text-align: center;
  671. line-height: 48rpx;
  672. border: 2rpx solid #CCCCCC;
  673. border-radius: 24rpx;
  674. }
  675. .sBtn2 {
  676. width: 128rpx;
  677. height: 48rpx;
  678. color: #FF130A;
  679. text-align: center;
  680. line-height: 48rpx;
  681. border: 2rpx solid #FF130A;
  682. border-radius: 24rpx;
  683. margin-left: 20rpx;
  684. }
  685. .sBtn3 {
  686. width: 170rpx;
  687. height: 48rpx;
  688. color: #999999;
  689. text-align: center;
  690. line-height: 48rpx;
  691. border: 2rpx solid #CCCCCC;
  692. border-radius: 24rpx;
  693. }
  694. .popup {
  695. /* height: 500rpx; */
  696. max-height: 500rpx;
  697. /* overflow-y: auto; */
  698. }
  699. .popup {
  700. /* height: 500rpx; */
  701. max-height: 500rpx;
  702. /* overflow-y: auto; */
  703. }
  704. .tabBtn {
  705. /* background-color: #f6f6fa; */
  706. height: 60rpx;
  707. line-height: 60rpx;
  708. color: #999999;
  709. font-size: 38rpx;
  710. }
  711. .Switch {
  712. width: 164rpx;
  713. height: 62rpx;
  714. color: #FFFFFF;
  715. background: #FCD202;
  716. border-radius: 30rpx;
  717. display: flex;
  718. align-items: center;
  719. padding: 2rpx;
  720. }
  721. .Switch>view {
  722. /* flex: 1; */
  723. width: 80rpx;
  724. text-align: center;
  725. line-height: 62rpx;
  726. height: 58rpx;
  727. }
  728. .selSwitch {
  729. color: #333333;
  730. background: #FFFFFF;
  731. border-radius: 30rpx;
  732. }
  733. .hintPopul {
  734. width: 100%;
  735. height: 100vh;
  736. position: absolute;
  737. top: 0;
  738. background: rgba(0, 0, 0, .4);
  739. }
  740. .content {
  741. position: absolute;
  742. left: 0;
  743. right: 0;
  744. top: 0;
  745. bottom: 0;
  746. margin: auto;
  747. text-align: center;
  748. width: 500rpx;
  749. height: 400rpx;
  750. border-radius: 20rpx;
  751. background-color: #fff;
  752. padding-top: 120rpx;
  753. }
  754. .content image {
  755. position: absolute;
  756. top: -50rpx;
  757. left: 0;
  758. right: 0;
  759. margin: auto;
  760. }
  761. .hintText {
  762. font-size: 30rpx;
  763. }
  764. .VerticalNav.nav {
  765. width: 200upx;
  766. white-space: initial;
  767. }
  768. .VerticalNav.nav .cu-item {
  769. width: 100%;
  770. text-align: center;
  771. background-color: #f1f1f1;
  772. margin: 0;
  773. border: none;
  774. height: 50px;
  775. position: relative;
  776. }
  777. .VerticalNav.nav .cu-item.cur {
  778. background-color: #fff;
  779. }
  780. .VerticalBox {
  781. display: flex;
  782. }
  783. .VerticalMain {
  784. background-color: #f1f1f1;
  785. flex: 1;
  786. }
  787. .detail_describe_text2 {
  788. font-weight: 500;
  789. margin-top: 2%;
  790. color: #999999;
  791. }
  792. .detail_account_bottom {
  793. margin-top: 20rpx;
  794. width: 100%;
  795. display: flex;
  796. justify-content: space-between;
  797. /* margin: 4% 0 3%; */
  798. }
  799. .detail_account_bottom_le {
  800. width: 47.5%;
  801. /* margin-right: 5%; */
  802. border-radius: 44rpx;
  803. text-align: center;
  804. line-height: 2.8;
  805. border: 2rpx solid #FCD202;
  806. }
  807. .detail_account_bottom_ri {
  808. width: 47.5%;
  809. border-radius: 44rpx;
  810. text-align: center;
  811. line-height: 2.8;
  812. background-color: #FCD202;
  813. }
  814. .food_all {
  815. position: relative;
  816. }
  817. .text-through {
  818. text-decoration: line-through
  819. }
  820. /* 食物 */
  821. .food {
  822. width: 100%;
  823. overflow: hidden;
  824. // position: absolute;
  825. // top: 350rpx;
  826. background-color: #FFFFFF;
  827. border-top-left-radius: 18rpx;
  828. border-top-right-radius: 18rpx;
  829. }
  830. .food_address {
  831. margin: 3%;
  832. display: flex;
  833. justify-content: space-between;
  834. align-items: center;
  835. margin-top: 120rpx;
  836. }
  837. .food_address_le {
  838. width: 75%;
  839. }
  840. .food_address_le_top {
  841. display: flex;
  842. align-items: center;
  843. justify-content: space-between;
  844. }
  845. .food_address_le_top_le {
  846. width: 40rpx;
  847. height: 37rpx;
  848. }
  849. .food_address_le_top_le image {
  850. width: 40rpx;
  851. height: 37rpx;
  852. }
  853. .food_address_le_top_ce {
  854. line-height: 1.6;
  855. font-size: 38rpx;
  856. font-weight: 600;
  857. color: #333333;
  858. }
  859. .food_address_le_top_ce_ri {
  860. width: 14rpx;
  861. /* margin: 1% 0 0 2%; */
  862. height: 24rpx;
  863. margin-left: 2%;
  864. }
  865. .food_address_le_top_ce_ri image {
  866. width: 14rpx;
  867. height: 24rpx;
  868. }
  869. .food_address_text {
  870. font-weight: 500;
  871. font-size: 24rpx;
  872. color: #999999;
  873. }
  874. .food_address_ri {
  875. width: 24%;
  876. height: 55rpx;
  877. display: flex;
  878. padding: 0.5% 1%;
  879. background-color: #FCD202;
  880. border-radius: 31rpx;
  881. color: #FFFFFF;
  882. }
  883. .food_address_ri_sty {
  884. flex: 1;
  885. text-align: center;
  886. padding-top: 4%;
  887. font-size: 24rpx;
  888. }
  889. .food_address_ri_sty_active {
  890. width: 100%;
  891. overflow: hidden;
  892. background-color: #FFFFFF;
  893. border-radius: 31rpx;
  894. color: #333333;
  895. text-align: center;
  896. }
  897. /* 结算 */
  898. .settlement {
  899. width: 94%;
  900. background-color: #000000;
  901. line-height: 3.4;
  902. border-radius: 49rpx;
  903. position: fixed;
  904. bottom: 10rpx;
  905. left: 3%;
  906. display: flex;
  907. justify-content: space-between;
  908. }
  909. .settlement1 {
  910. width: 94%;
  911. background-color: #000000;
  912. line-height: 2.8;
  913. border-radius: 49rpx;
  914. position: relative;
  915. /* bottom: 10rpx; */
  916. left: 0;
  917. right: 0;
  918. /* left: 3%; */
  919. display: flex;
  920. justify-content: space-between;
  921. margin: 20rpx auto;
  922. }
  923. .settlement_le {
  924. width: 45%;
  925. padding-left: 20%;
  926. color: #FFFFFF;
  927. font-size: 30rpx;
  928. }
  929. .settlement_le text {
  930. font-size: 22rpx;
  931. }
  932. .settlement_ri {
  933. width: 35%;
  934. background-color: #FCD202;
  935. font-family: PingFang SC;
  936. font-weight: 800;
  937. color: #333333;
  938. text-align: center;
  939. border-top-right-radius: 49rpx;
  940. border-bottom-right-radius: 49rpx;
  941. }
  942. .settlement_img {
  943. width: 91rpx;
  944. height: 96rpx;
  945. position: absolute;
  946. // bottom: 30rpx;
  947. left: 5%;
  948. }
  949. .settlement_img image {
  950. width: 74rpx;
  951. height: 81rpx;
  952. }
  953. .settlement_hot {
  954. width: 35rpx;
  955. height: 35rpx;
  956. line-height: 35rpx;
  957. text-align: center;
  958. border-radius: 50%;
  959. position: absolute;
  960. top: -10rpx;
  961. right: 0;
  962. background-color: #FF130A;
  963. color: #FFFFFF;
  964. font-size: 20rpx;
  965. font-weight: bold;
  966. color: #FFFFFF;
  967. }
  968. .select_all {
  969. width: 100%;
  970. position: relative;
  971. }
  972. /* 餐厅 */
  973. .select {
  974. color: #000000;
  975. font-weight: bold;
  976. background-color: #fff;
  977. z-index: 10;
  978. }
  979. .select_line {
  980. width: 15%;
  981. height: 6rpx;
  982. margin: 0 auto 4%;
  983. background: #E6E6E6;
  984. border-radius: 4rpx;
  985. }
  986. .select_search {
  987. width: 100%;
  988. margin: 2% 0;
  989. display: flex;
  990. align-items: center;
  991. }
  992. .select_search_le {
  993. /* width: 10%; */
  994. font-size: 30rpx;
  995. line-height: 2.5;
  996. margin-right: 1%;
  997. }
  998. .select_search_ce {
  999. /* width: 5%; */
  1000. /* margin-top: 1%; */
  1001. margin-right: 20rpx;
  1002. margin-left: 6rpx;
  1003. /* margin: 0 20rpx; */
  1004. width: 20rpx;
  1005. height: 10rpx;
  1006. }
  1007. .select_search_ri {
  1008. /* width: 84%; */
  1009. height: 72rpx;
  1010. flex: 1;
  1011. display: flex;
  1012. }
  1013. .select_search_ri input {
  1014. flex: 1;
  1015. /* width: 100%; */
  1016. height: 72rpx;
  1017. background: #F5F5F5;
  1018. color: #999999;
  1019. border-radius: 36rpx;
  1020. text-decoration: 42rpx;
  1021. text-align: center;
  1022. }
  1023. /* 附近 */
  1024. .nearby {
  1025. width: 100%;
  1026. position: relative;
  1027. }
  1028. .nearby_text {
  1029. width: 18%;
  1030. font-size: 30rpx;
  1031. font-weight: 800;
  1032. color: #333333;
  1033. text-align: center;
  1034. border-bottom: 16rpx solid #FCD202;
  1035. /* line-height: 20rpx; */
  1036. margin-top: 10rpx;
  1037. }
  1038. .nearby_address_active {
  1039. border: 2rpx solid #FCD202;
  1040. width: 100%;
  1041. padding: 3%;
  1042. margin-top: 3%;
  1043. border-radius: 10upx;
  1044. display: flex;
  1045. }
  1046. .nearby_address {
  1047. width: 100%;
  1048. padding: 3%;
  1049. margin-top: 3%;
  1050. border-radius: 10upx;
  1051. display: flex;
  1052. }
  1053. .nearby_address_le {
  1054. flex: 1;
  1055. }
  1056. .nearby_address_ri {
  1057. line-height: 2.5;
  1058. text-align: right;
  1059. /* flex: 1; */
  1060. }
  1061. .nearby_text2 {
  1062. /* line-height: 1.5; */
  1063. display: flex;
  1064. justify-content: space-between;
  1065. align-items: center;
  1066. }
  1067. .nearby_text2_ {
  1068. font-size: 30rpx;
  1069. font-weight: 800;
  1070. color: #333333;
  1071. }
  1072. .nearby_text3 {
  1073. font-size: 24rpx;
  1074. font-weight: 500;
  1075. color: #999999;
  1076. margin-top: 2%;
  1077. }
  1078. /* 添加地址 */
  1079. .goorder {
  1080. width: 100%;
  1081. padding: 2% 3%;
  1082. position: fixed;
  1083. bottom: 0;
  1084. background-color: #FFFFFF;
  1085. border-top: 1rpx solid #999999;
  1086. }
  1087. .goorder_but {
  1088. width: 100%;
  1089. line-height: 2.5;
  1090. text-align: center;
  1091. background: #FCD202;
  1092. border-radius: 36rpx;
  1093. }
  1094. </style>