index.vue 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780
  1. <template>
  2. <view v-if="XCXIsSelect=='是'">
  3. <view>
  4. <view class="food_all">
  5. <!-- banner -->
  6. <swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true"
  7. style="width: 100%;height: 300rpx;">
  8. <swiper-item v-for="(item,index) in shopDet.shopBanner" :key='index'>
  9. <image :src="item" mode="scaleToFill" style="width: 100%;"></image>
  10. </swiper-item>
  11. </swiper>
  12. <view class="shop padding">
  13. <view class="flex justify-between">
  14. <view style="width: 500rpx;">
  15. <view class="text-xl text-bold u-line-1">{{shopDet.shopName}}
  16. </view>
  17. <view class="flex align-center margin-top-xs">
  18. <view style="color: #FD6416;font-weight: bold;font-size: 30rpx;">
  19. <u-icon name="star-fill" color="#FD6416" size="28"></u-icon>
  20. {{shopDet.shopScore?shopDet.shopScore:0}}
  21. </view>
  22. <view class="margin-left-xs text-gray">销量 {{shopDet.shopSales?shopDet.shopSales:0}}</view>
  23. <view class="margin-left-xs text-gray" v-if="shopDet.errandTime">约{{shopDet.errandTime}}分钟
  24. </view>
  25. <view class="margin-left-xs text-gray" v-if="shopDet.minimumDelivery">{{shopDet.minimumDelivery}}元起送</view>
  26. </view>
  27. <view class="flex align-center margin-top-xs">
  28. <!-- <view style="color: #FCD202;margin-right: 8rpx;">{{shopDet.autoSendOrder==1?'商家配送':'平台配送'}}</view> -->
  29. <view style="margin-right: 8rpx;">{{shopDet.autoSendOrder==1?'商家配送:':'平台配送:'}}</view>
  30. <view class="text-gray" style="margin-right: 8rpx;">配送费{{shopDet.errandMoney?shopDet.errandMoney:0}}元</view>
  31. <view class="lable text-gray" v-if="shopDet.exemptMinMoney">满{{shopDet.exemptMinMoney}}元免配送费</view>
  32. </view>
  33. </view>
  34. <view>
  35. <image :src="shopDet.shopCover" class="radius" style="width: 110rpx;height: 110rpx;margin-top: 30rpx;">
  36. </image>
  37. </view>
  38. </view>
  39. <view class="flex align-center margin-top-xs" v-if="shopDet.shopNotice">
  40. <text style="width: 14%;">公告:</text>
  41. <u-notice-bar color="#AAAAAA" :speed="100" border-radius="30" padding="0rpx 0rpx" bg-color="#f5f5f5" style="width: 86%;" type="none" mode="horizontal" :volume-icon="false" :list="shopDet.shopNotice.split(',')"></u-notice-bar>
  42. </view>
  43. <view class="margin-top-xs" style="width: 100%;height: 40rpx;" v-if="couponList.length>0">
  44. <scroll-view scroll-x="true" class="scroll-view_H">
  45. <view class="coupon-item flex align-center" v-for="(item,index) in couponList" :key="index" @click="coupons=true">
  46. <view>¥</view>
  47. <view class="" style="font-weight: bold;font-size: 24rpx;margin-right: 10rpx;">
  48. {{item.money}}
  49. </view>
  50. <view style="margin-right: 20rpx;">满{{item.minMoney}}可用</view>
  51. <view style="font-weight: bold;">领</view>
  52. </view>
  53. <!-- <view class="flex align-center" style="width: 100%;height: 100%;">
  54. </view> -->
  55. </scroll-view>
  56. </view>
  57. </view>
  58. <!-- 食品 -->
  59. <view class="food">
  60. <!-- 店名地址 -->
  61. <view class="food_address">
  62. <view class="flex flex-sub bg justify-between padding-right-xl">
  63. <view @click="switchTab(1)" :class="current==1? 'select':''" class="tabBtn">
  64. <view class="title">全部商品</view>
  65. <view :class="current==1? 'active1':''"></view>
  66. </view>
  67. <view @click="switchTab(2)" :class="current==2? 'select':''" class="tabBtn">
  68. <view class="title">评价</view>
  69. <view :class="current==2? 'active1':''"></view>
  70. </view>
  71. <view @click="switchTab(3)" :class="current==3? 'select':''" class="tabBtn">
  72. <view class="title">商家</view>
  73. <view :class="current==3? 'active1':''"></view>
  74. </view>
  75. </view>
  76. <!-- <view class="flex Switch">
  77. <view @click="tabSwidth(1)" :class="orderType==1?'selSwitch':''">自取</view>
  78. <view @click="tabSwidth(2)" :class="orderType==2?'selSwitch':''">外卖</view>
  79. </view> -->
  80. <view>
  81. <!-- #ifdef MP-WEIXIN -->
  82. <image @click="goPindan()" src="../../../static/images/index/pindan.png"
  83. style="width: 160rpx;height: 64rpx;" mode=""></image>
  84. <!-- #endif -->
  85. </view>
  86. </view>
  87. <view class="VerticalBox" v-if="current==1">
  88. <scroll-view class="VerticalNav nav bg-gray" scroll-y scroll-with-animation
  89. :scroll-top="verticalNavTop" style="height:calc(100vh - 590upx)">
  90. <view style="font-size: 28upx;" class="cu-item text-lg"
  91. :class="index==tabCur?'cur':'text-gray'" v-for="(item,index) in dataList" :key="index"
  92. @tap="TabSelect" :data-id="index">
  93. {{item.classifyName}}
  94. </view>
  95. </scroll-view>
  96. <scroll-view class="VerticalMain" scroll-y scroll-with-animation
  97. style="height:calc(100vh - 590rpx)" :scroll-into-view="'main-'+mainCur"
  98. @scroll="VerticalMain">
  99. <view class="bg-white padding-sm margin-bottom-sm" v-for="(item,index) in dataList"
  100. v-if="item.goodsList.length" :key="index" :id="'main-'+index">
  101. <view class="flex justify-between padding-bottom-sm" @click="goDet(ite.goodsId)"
  102. v-for="(ite,ind) in item.goodsList" :key='ind'>
  103. <image :src="ite.goodsCover" mode=""
  104. style="width: 184rpx;height: 184rpx;border-radius: 10rpx;"></image>
  105. <view
  106. class="flex-sub margin-left-sm padding-tb-xs flex flex-direction justify-between">
  107. <view class="text-black text-lg text-bold" style="font-size: 30upx;">
  108. {{ite.goodsName}}
  109. </view>
  110. <view class="text-gray">
  111. 已售 {{ite.sales?ite.sales:0}}
  112. </view>
  113. <view class="text-gray text-sm u-line-2"
  114. style="overflow: hidden;line-clamp: 2;-webkit-line-clamp: 2;width: 100%;">
  115. {{ite.goodsDescribe?ite.goodsDescribe:''}}
  116. </view>
  117. <view class="flex justify-between">
  118. <view class="text-sm text-red">
  119. ¥ <text class="text-lg">{{ite.goodsMoney}}</text>
  120. </view>
  121. <image @click.stop="selSku(ite)" src="../../../static/images/index/add.png"
  122. mode="" style="width: 40rpx;height: 40rpx"></image>
  123. </view>
  124. </view>
  125. </view>
  126. </view>
  127. </scroll-view>
  128. <empty v-if="!dataList.length"></empty>
  129. </view>
  130. <view class="" v-if="current==2">
  131. <view class="flex margin-lr padding-tb-sm u-border-bottom" v-if="shopDet.shopScore">
  132. <view class="flex padding-right">
  133. <view class="text-sl" style="color: #FD6416;">{{shopDet.shopScore}}</view>
  134. <view class="flex flex-direction justify-around margin-left-sm">
  135. <view>商家评分</view>
  136. <view class="flex">
  137. <u-icon v-for="ite in shopDet.shopScore1" :key='ite' color="#FCD202"
  138. name="star-fill"></u-icon>
  139. </view>
  140. </view>
  141. </view>
  142. <view class="flex-sub flex justify-around u-border-left padding-left">
  143. <view class="flex flex-direction justify-around text-center">
  144. <view>好评</view>
  145. <view>{{EvaluateData.goodReputation?EvaluateData.goodReputation:0}}</view>
  146. </view>
  147. <view class="flex flex-direction justify-around text-center">
  148. <view>中评</view>
  149. <view>{{EvaluateData.mediumReview?EvaluateData.mediumReview:0}}</view>
  150. </view>
  151. <view class="flex flex-direction justify-around text-center">
  152. <view>差评</view>
  153. <view>{{EvaluateData.negativeComment?EvaluateData.negativeComment:0}}</view>
  154. </view>
  155. </view>
  156. </view>
  157. <view class="padding-tb-sm margin-lr">
  158. <u-button hover-class='none' @click="sel(0)" type="primary" shape="circle" size="mini"
  159. :plain="false" :custom-style="count==0?customStyle:customStyle1">全部评论</u-button>
  160. <u-button hover-class='none' @click="sel(1)" type="primary" shape="circle" size="mini"
  161. :plain="false" :custom-style="count==1?customStyle:customStyle1">
  162. 好评({{EvaluateData.goodReputation?EvaluateData.goodReputation:0}})</u-button>
  163. <u-button hover-class='none' @click="sel(2)" type="primary" shape="circle" size="mini"
  164. :plain="false" :custom-style="count==2?customStyle:customStyle1">
  165. 中评({{EvaluateData.mediumReview?EvaluateData.mediumReview:0}})</u-button>
  166. <u-button hover-class='none' @click="sel(3)" type="primary" shape="circle" size="mini"
  167. :plain="false" :custom-style="count==3?customStyle:customStyle1">
  168. 差评({{EvaluateData.negativeComment?EvaluateData.negativeComment:0}})</u-button>
  169. </view>
  170. <view class="padding-tb-sm margin-lr u-border-bottom" v-for="(item, index) in EvaluateList"
  171. :key='index'>
  172. <view class="flex justify-between align-center">
  173. <view class="flex align-center">
  174. <u-avatar :src="item.avatar" size="65"></u-avatar>
  175. <view class=" margin-left-sm" style="line-height: 46upx;">
  176. {{item.userName?item.userName:'匿名'}}
  177. </view>
  178. <view class="flex margin-left-sm">
  179. <u-icon v-for="ite in item.score" :key='ite' color="#FCD202" name="star-fill">
  180. </u-icon>
  181. </view>
  182. </view>
  183. <view>{{item.createTime}}</view>
  184. </view>
  185. <view class="margin-top-sm">{{item.evaluateMessage}}</view>
  186. <view class="pinglunImg" v-if="item.pictures!=undefined && item.pictures">
  187. <view class="pinglunImg-box flex justify-between flex-wrap">
  188. <image style="margin-bottom: 20rpx;" @click="yuanlan(item.pictures==undefined?[]:item.pictures.split(','),index2)" v-for="(item2,index2) in item.pictures==undefined?[]:item.pictures.split(',')" :src="item2" mode=""></image>
  189. <image style="margin-bottom: 20rpx;width: 160rpx;height: 0;" src="" mode=""></image>
  190. <image style="margin-bottom: 20rpx;width: 160rpx;height: 0;" src="" mode=""></image>
  191. </view>
  192. </view>
  193. <view class="margin-top-sm" v-if="item.shopReplyMessage">
  194. <view class="flex align-center">
  195. <view class=" flex align-center text-df" style="color: #999999;">
  196. <view class="text-df">商家回复:</view>{{item.shopReplyMessage}}
  197. </view>
  198. </view>
  199. </view>
  200. </view>
  201. <empty v-if="!EvaluateList.length"></empty>
  202. </view>
  203. <view class="margin-lr padding-bottom" v-if="current==3">
  204. <view class="flex align-center margin-top-sm">
  205. <view class="flex-sub">
  206. <view class="text-black text-lg text-bold">{{shopDet.shopName}}</view>
  207. <view class="margin-top-sm" @click="goMap">
  208. <u-icon name="map" size="28"></u-icon> {{shopDet.detailedAddress}}
  209. </view>
  210. </view>
  211. <image @click="call(shopDet.phone)" src="../../../static/images/index/phone.png"
  212. class="radius" style="width: 38rpx;height: 49rpx;">
  213. </image>
  214. </view>
  215. <image :src="shopDet.shopCover" class="radius margin-top-sm"
  216. style="width: 140rpx;height: 140rpx;">
  217. </image>
  218. <view class="text-black text-lg text-bold margin-top-xs">商家信息</view>
  219. <view class="text-black margin-top-xs text-df">
  220. 营业时间:{{shopDet.businessHours}}-{{shopDet.lockHours}}</view>
  221. <view class="text-black margin-top-xs text-df">商家品类:{{shopDet.shopTypeName}}</view>
  222. <view class="text-black margin-top-xs text-df">配送范围:{{shopDet.distributionDistance}}以内</view>
  223. <view class="text-black margin-top-xs text-df">公告:{{shopDet.shopNotice}}</view>
  224. </view>
  225. </view>
  226. <!-- 结算 -->
  227. <view class="settlement" @click="isPopupShow" v-if="current==1">
  228. <view class="settlement_img">
  229. <image src="../../../static/images/index/diancan.png" mode=""></image>
  230. <view class="settlement_hot">{{goodsNum}}</view>
  231. </view>
  232. <view class="settlement_le">
  233. <text>¥</text>{{totalPrice}}
  234. <text v-if="shopDet.minimumDelivery" style="margin-left: 10rpx;">{{shopDet.minimumDelivery}}元起送</text>
  235. </view>
  236. <view v-if="totalPrice>=shopDet.minimumDelivery" class="settlement_ri" @click.stop="goConfirm()">去结算</view>
  237. <view v-else class="settlement_ri1">去结算</view>
  238. </view>
  239. <!-- 购物车弹窗 -->
  240. <u-popup v-model="popupShow" mode="bottom" border-radius="20">
  241. <view class="padding">
  242. <view class="flex justify-between align-center margin-bottom-sm">
  243. <view class="text-bold text-black text-df">已选餐品</view>
  244. <view class="flex align-center">
  245. <image src="../../../static/images/index/delete.png" style="width: 28rpx;height: 31rpx;"
  246. mode=""></image>
  247. <text class="margin-left-xs" @click="empty">清空购物车</text>
  248. </view>
  249. </view>
  250. <scroll-view scroll-y='true' class="popup">
  251. <view v-for="(item,ind) in goodsList.orderGoodsList[0]" :key='ind'>
  252. <view class="flex align-center margin-tb-sm">
  253. <image :src="item.goodsPicture[0]"
  254. style="width: 96rpx;height: 96rpx;border-radius: 10rpx;">
  255. </image>
  256. <view class="margin-left-sm">
  257. <view>{{item.goodsName}}</view>
  258. <view v-if="item.skuMessage">{{item.skuMessage}}</view>
  259. </view>
  260. </view>
  261. <view class="flex justify-between align-center">
  262. <view class="text-bold text-sm">¥<text class="text-lg">{{item.goodsPrice}}</text>
  263. </view>
  264. <view class="flex align-center justify-between">
  265. <view @click.stop="noAdd(item,ind)">
  266. <image src="../../../static/images/index/jian.png"
  267. style="width: 54rpx;height: 54rpx;"></image>
  268. </view>
  269. <view class="text-center margin-lr-xs">{{item.goodsNum}}</view>
  270. <view @click.stop="add(item,ind)">
  271. <image src="../../../static/images/index/add.png"
  272. style="width: 50rpx;height: 50rpx;"></image>
  273. </view>
  274. </view>
  275. </view>
  276. </view>
  277. </scroll-view>
  278. </view>
  279. <view class="settlement1 margin-top-lg">
  280. <view class="settlement_img">
  281. <image src="../../../static/images/index/diancan.png" mode=""></image>
  282. <view class="settlement_hot">{{goodsNum}}</view>
  283. </view>
  284. <view class="settlement_le">
  285. <text>¥</text>{{totalPrice}}
  286. <text v-if="shopDet.minimumDelivery" style="margin-left: 10rpx;">{{shopDet.minimumDelivery}}元起送</text>
  287. </view>
  288. <view v-if="totalPrice>=shopDet.minimumDelivery" class="settlement_ri" @click.stop="goConfirm()">去结算</view>
  289. <view v-else class="settlement_ri1">去结算</view>
  290. </view>
  291. </u-popup>
  292. <!-- 选择规格弹窗 -->
  293. <u-popup v-model="skuShow" mode="center" :closeable='true' border-radius="20">
  294. <view style="width: 700rpx;">
  295. <view class="text-center text-lg text-bold padding-tb">{{goodsDet.goodsName}}</view>
  296. <view class="margin-top-sm padding-lr" v-for="(item,index) in attrList" :key="index">
  297. <view class="text-bold text-black">{{item.value}}</view>
  298. <view class="flex margin-tb-sm flex-wrap">
  299. <view v-for="(ite, ind) in item.detail" :key="ind" @click="skuSel(ite,index,ind)"
  300. class="margin-bottom-sm">
  301. <view class="skuBtn"
  302. :class="item.goodsId == index && item.attrId == ind?'active': ''">
  303. {{ite.name}}
  304. </view>
  305. </view>
  306. </view>
  307. </view>
  308. <view class="flex justify-between padding-lr padding-top">
  309. <view>
  310. <view class="text-xl text-bold text-black"><text class="text-sm">¥</text>{{price}}
  311. </view>
  312. <view class="detail_describe_text2">{{checkString}}</view>
  313. </view>
  314. <u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
  315. </view>
  316. <view class="detail_account_bottom padding">
  317. <view class="detail_account_bottom_le" @click="payment()">立即购买</view>
  318. <view class="detail_account_bottom_ri" @click="orderSel(2)">加入购物车</view>
  319. </view>
  320. </view>
  321. </u-popup>
  322. <!-- 优惠券弹窗 -->
  323. <!-- coupons -->
  324. <u-popup v-model="coupons" height="520rpx" mode="bottom" :closeable="true">
  325. <view class="yhq flex justify-center align-center">
  326. <view class="yhq-box">
  327. <view class="yhq-box-title">
  328. 优惠券
  329. </view>
  330. <view class="yhq-box-list">
  331. <scroll-view scroll-y="true" style="width: 100%;height: 100%;padding-bottom: 20rpx;">
  332. <view class="yhq-box-list-item flex justify-center align-center" v-for="(item,index) in couponList" :key="index">
  333. <view class="yhq-box-list-item-c flex justify-between align-center">
  334. <view class="yhq-box-list-item-c-l flex align-center">
  335. <image :src="item.couponPicture?item.couponPicture:'../../../static/logo.png'" style="width: 80rpx;height: 80rpx;border-radius: 20rpx;" mode=""></image>
  336. <view class="" style="margin-left: 20rpx;">
  337. <view class="">
  338. <text style="color: red;margin-right: 10rpx;">¥{{item.money}}</text>
  339. <text style="font-weight: bold;margin-right: 10rpx;">优惠券</text>
  340. (满{{item.minMoney}}元可用)
  341. </view>
  342. <view class="" style="font-size: 20rpx;color: gray;">
  343. 领取后{{item.endDate}}天内有效
  344. </view>
  345. </view>
  346. </view>
  347. <view class="yhq-box-list-item-c-r" style="color: red;" @click="lingqv(item.couponId)">
  348. 领取
  349. </view>
  350. </view>
  351. </view>
  352. </scroll-view>
  353. </view>
  354. </view>
  355. </view>
  356. </u-popup>
  357. </view>
  358. <view class="hintPopul" v-if="shopDet&&shopDet.putawayFlag==1">
  359. <view class="content_">
  360. <image src="../../../static/images/index/shop.png" style="width: 200rpx;height: 180rpx;">
  361. </image>
  362. <view class="text-xl text-bold">店铺打烊啦</view>
  363. <view class="hintText margin-top-sm text-gray">现在店铺已经打烊了,营业时间</view>
  364. <view class="margin-top-xs text-gray margin-bottom">{{shopDet.businessHours}}-{{shopDet.lockHours}}
  365. </view>
  366. <view class="Btns" @click="goBack()">知道了</view>
  367. </view>
  368. </view>
  369. </view>
  370. </view>
  371. </template>
  372. <script>
  373. import empty from '@/components/empty.vue'
  374. export default {
  375. components: {
  376. empty
  377. },
  378. data() {
  379. return {
  380. maskCustomStyle:{
  381. background:'rgba(0,0,0,0.1)'
  382. },
  383. hdStyle:{
  384. background: '#F5F5F5',
  385. },
  386. customStyle: {
  387. color: '#333333',
  388. background: '#FCD202',
  389. marginRight: '20rpx',
  390. border: 0
  391. },
  392. customStyle1: {
  393. color: '#333333',
  394. background: '#F2F2F2',
  395. marginRight: '20rpx',
  396. border: 0
  397. },
  398. current: 1,
  399. loading: false, // 是否显示骨架屏组件
  400. tabCur: 0,
  401. mainCur: 0,
  402. verticalNavTop: 0,
  403. load: true,
  404. dataList: [],
  405. shopDet: {},
  406. shopList: [],
  407. city: '西安',
  408. lat: '',
  409. lng: '',
  410. shopName: '',
  411. page: 1,
  412. limit: 10,
  413. evaluatePage: 1,
  414. evaluateLimit: 10,
  415. show: true,
  416. totalPrice: 0,
  417. goodsNum: 0,
  418. goodsList: {
  419. orderGoodsList: [
  420. []
  421. ]
  422. },
  423. popupShow: false,
  424. skuShow: false,
  425. userId: '',
  426. hintShow: true, //
  427. shouquan: 0,
  428. orderType: 2,
  429. value: 1,
  430. goodsDet: {},
  431. skuId: '',
  432. skuMessage: '',
  433. skuList: [],
  434. attrList: [],
  435. checkString: '',
  436. checkStateList: [],
  437. CheckattrValue: false,
  438. price: 0,
  439. echoSkuList: [],
  440. echoSku: [],
  441. isEchoSku: {},
  442. shopId: '',
  443. lng: '',
  444. lat: '',
  445. commentList: [],
  446. EvaluateList: [],
  447. EvaluateData: {},
  448. grade: '',
  449. count: 0,
  450. orderId: '',
  451. isTrue:false,
  452. XCXIsSelect: '否',
  453. couponList:[],//优惠券列表
  454. coupons:false,
  455. }
  456. },
  457. onLoad(option) {
  458. this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
  459. if (this.XCXIsSelect == '否') {
  460. // this.getGuize()
  461. uni.setNavigationBarTitle({
  462. title: '隐私政策'
  463. });
  464. } else {
  465. uni.setNavigationBarTitle({
  466. title: '店铺详情'
  467. });
  468. }
  469. let that = this
  470. that.shopId = option.shopId
  471. uni.showLoading({
  472. title: '加载中'
  473. })
  474. // #ifndef H5
  475. uni.getLocation({
  476. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  477. success: function(res) {
  478. console.log(res, '经纬度')
  479. that.lat = res.latitude;
  480. that.lng = res.longitude;
  481. }
  482. });
  483. that.getData()
  484. // #endif
  485. // #ifdef H5
  486. uni.getLocation({
  487. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  488. success: function(res) {
  489. console.log(res, '经纬度')
  490. that.lat = res.latitude;
  491. that.lng = res.longitude;
  492. that.getData()
  493. }
  494. });
  495. that.getData()
  496. // #endif
  497. that.orderId = uni.getStorageSync('orderId') ? uni.getStorageSync('orderId') : ''
  498. },
  499. onHide() {
  500. uni.removeStorageSync('types')
  501. },
  502. onShow() {
  503. this.orderId = uni.getStorageSync('orderId') ? uni.getStorageSync('orderId') : ''
  504. this.userId = uni.getStorageSync('userId')
  505. this.getOrderList()
  506. this.getcouponList()
  507. },
  508. onShareAppMessage(res) { //发送给朋友
  509. return {
  510. title: this.shopDet.shopName,
  511. path: '/pages/index/index?shopId=' + this.shopDet.shopId,
  512. imageUrl: this.shopDet.shopCover,
  513. }
  514. },
  515. onShareTimeline(res) { //分享到朋友圈
  516. return {
  517. title: this.shopDet.shopName,
  518. path: '/pages/index/index?shopId=' + this.shopDet.shopId,
  519. imageUrl: this.shopDet.shopCover,
  520. }
  521. },
  522. methods: {
  523. //领取优惠券
  524. lingqv(couponId,needIntegral){
  525. let that = this
  526. let data = {
  527. couponId: couponId,
  528. }
  529. that.$Request.postT("/app/coupon/buyCoupon", data).then(res => {
  530. if (res.code == 0) {
  531. uni.showToast({
  532. title:'领取成功'
  533. })
  534. that.coupons = false
  535. }else{
  536. uni.showToast({
  537. title:res.msg,
  538. icon:'none'
  539. })
  540. }
  541. });
  542. },
  543. //获取商家优惠券
  544. getcouponList(){
  545. // couponList
  546. let data = {
  547. shopId: this.shopId,
  548. }
  549. this.$Request.get("/app/coupon/seleteAllCoupon", data).then(res => {
  550. if (res.code == 0 && res.data) {
  551. this.couponList = res.data
  552. }
  553. });
  554. },
  555. // 预览图片
  556. yuanlan(arr,index){
  557. uni.previewImage({
  558. urls:arr,
  559. current:index
  560. })
  561. },
  562. goBack() {
  563. uni.navigateBack({
  564. })
  565. },
  566. goNav(url) {
  567. uni.navigateTo({
  568. url
  569. })
  570. },
  571. switchTab(e) {
  572. // this.page = 1
  573. this.current = e
  574. if (this.current == 1) {
  575. this.getData()
  576. } else if (this.current == 2) {
  577. this.evaluatePage =1;
  578. this.getEvaluateList()
  579. } else if (this.current == 3) {
  580. }
  581. },
  582. sel(e) {
  583. this.grade = e
  584. this.count = e
  585. this.evaluatePage = 1
  586. this.getEvaluateList()
  587. },
  588. // 获取评论列表
  589. getEvaluateList() {
  590. let data = {
  591. shopId: this.shopId,
  592. page: this.evaluatePage,
  593. limit: this.evaluateLimit,
  594. grade: this.grade
  595. }
  596. this.$Request.get("/app/goods/selectEvaluateByShopId", data).then(res => {
  597. if (res.code == 0 && res.data) {
  598. this.EvaluateData = res.data
  599. if (this.evaluatePage == 1) {
  600. this.EvaluateList = res.data.pageUtils.list
  601. } else {
  602. this.EvaluateList = [...this.EvaluateList, ...res.data.pageUtils.list]
  603. }
  604. }
  605. });
  606. },
  607. // 获取店铺信息
  608. getData() {
  609. let data = {
  610. shopId: this.shopId,
  611. lng: this.lng,
  612. lat: this.lat
  613. }
  614. this.$Request.get("/app/goods/selectGoodsList", data).then(res => {
  615. if (res.code == 0 && res.data) {
  616. this.dataList = res.data.list
  617. this.shopDet = res.data.goodsShop
  618. for (var i = 0; i < this.dataList.length; i++) {
  619. this.dataList[i].id = i
  620. }
  621. this.shopDet.shopScore1 = Math.floor(this.shopDet.shopScore)
  622. this.shopDet.errandTime = Math.round(this.shopDet.errandTime)
  623. if (this.shopDet.shopBanner) {
  624. this.shopDet.shopBanner = this.shopDet.shopBanner.split(',')
  625. }
  626. this.shopDet.shopScore = this.shopDet.shopScore.toFixed(2)
  627. if (this.shopDet.distributionDistance < 1000) {
  628. this.shopDet.distributionDistance = '<1000m'
  629. } else {
  630. this.shopDet.distributionDistance = Number(this.shopDet.distributionDistance / 1000) +
  631. 'km'
  632. }
  633. uni.setNavigationBarTitle({
  634. title: this.shopDet.shopName
  635. })
  636. }
  637. uni.hideLoading()
  638. });
  639. },
  640. getEchoOrder() {
  641. let data = {
  642. shopId: this.shopId,
  643. goodsId: this.goodsDet.goodsId
  644. }
  645. this.$Request.get("/app/order/echoOrder", data).then(res => {
  646. if (res.code == 0 && res.data.length) {
  647. this.echoSkuList = res.data
  648. if (res.data[0].skuMessage) {
  649. this.echoSku = res.data[0].skuMessage.split(',')
  650. }
  651. }
  652. });
  653. },
  654. // 弹窗展示商品详情
  655. selSku(item) {
  656. console.log(item)
  657. this.checkStateList = []
  658. this.checkString = ''
  659. this.attrList = [];
  660. this.skuId = '';
  661. this.skuMessage = '';
  662. this.$Request.get("/app/goods/selectGoodsById?goodsId=" + item.goodsId).then(res => {
  663. uni.hideLoading()
  664. if (res.code == 0) {
  665. this.goodsDet = res.data
  666. if (this.goodsDet.goodsLabel) {
  667. this.goodsDet.goodsLabel = this.goodsDet.goodsLabel.split(',')
  668. }
  669. if (this.goodsDet.goodsPicture) {
  670. this.goodsDet.goodsPicture = this.goodsDet.goodsPicture.split(',')
  671. }
  672. this.price = this.goodsDet.goodsMoney
  673. this.skuList = this.goodsDet.sku
  674. this.getEchoOrder()
  675. if (!this.skuList.length) {
  676. let that = this
  677. setTimeout(function() {
  678. that.orderSel(2)
  679. }, 500)
  680. } else {
  681. if (this.goodsDet.attr.length) {
  682. this.attrList = this.goodsDet.attr[0] ? this.goodsDet.attr[0].attrValue : []
  683. } else {
  684. this.skuId = this.goodsDet.sku[0].id
  685. }
  686. this.attrList.forEach(res => {
  687. let data = {
  688. name: ''
  689. }
  690. this.checkStateList.push(data);
  691. let detail = [];
  692. console.log(res.detail)
  693. if (res.detail.length > 0) {
  694. res.detail.split(',').forEach(d => {
  695. let data = {
  696. name: '',
  697. state: ''
  698. }
  699. data.name = d;
  700. detail.push(data);
  701. });
  702. res.detail = detail;
  703. }
  704. })
  705. this.skuShow = true
  706. }
  707. }
  708. });
  709. },
  710. // 选择规格
  711. skuSel(item, index, ind) {
  712. console.log(item, index, ind)
  713. this.attrList[index].goodsId = index
  714. this.attrList[index].attrId = ind
  715. this.checkStateList[index].name = item.name;
  716. this.checkString = '';
  717. this.checkStateList.forEach(d => {
  718. if (d.name) {
  719. if (this.checkString) {
  720. this.checkString = this.checkString + ',' + d.name;
  721. } else {
  722. this.checkString = d.name;
  723. }
  724. }
  725. });
  726. console.log(this.skuList)
  727. for (var i = 0; i < this.skuList.length; i++) {
  728. let d = this.skuList[i];
  729. if (d.detailJson == this.checkString) {
  730. console.log(d.detailJson, this.checkString)
  731. // if (d.stock > 0) {
  732. this.skuId = d.id
  733. this.skuMessage = d.detailJson
  734. this.price = d.skuPrice
  735. this.CheckattrValue = true;
  736. // } else {
  737. // this.$queue.showToast('库存不足请选择其他规格')
  738. // }
  739. break
  740. } else {
  741. this.CheckattrValue = false;
  742. }
  743. }
  744. },
  745. valChange(e) {
  746. console.log('当前值为: ' + e.value)
  747. this.value = e.value
  748. },
  749. // 立即购买
  750. payment() {
  751. if (!this.userId) {
  752. uni.navigateTo({
  753. url: '/pages/public/login'
  754. })
  755. return
  756. }
  757. if (this.attrList.length) {
  758. if (this.checkString == '' || !this.CheckattrValue) {
  759. this.$queue.showToast('请选择正确的商品规格');
  760. return;
  761. }
  762. }
  763. let data = {
  764. goodsId: this.goodsDet.goodsId,
  765. skuMessage: this.skuMessage,
  766. skuId: this.skuId,
  767. num: this.value,
  768. orderType: this.orderType,
  769. shopId: this.shopId,
  770. }
  771. this.$Request.post("/app/order/buyGoods", data).then(res => {
  772. if (res.code == 0) {
  773. this.skuShow = false
  774. uni.navigateTo({
  775. url: '/pages/index/shop/payOrder?orderId=' + res.data + '&orderType=' + this
  776. .orderType
  777. })
  778. } else {
  779. this.$queue.showToast(res.msg);
  780. }
  781. })
  782. },
  783. // 加入购物车
  784. orderSel(e) {
  785. if (!this.userId) {
  786. uni.navigateTo({
  787. url: '/pages/public/login'
  788. })
  789. return
  790. }
  791. if (this.attrList.length) {
  792. if (this.checkString == '' || !this.CheckattrValue) {
  793. this.$queue.showToast('请选择正确的商品规格');
  794. return;
  795. }
  796. }
  797. // if (this.echoSku.length) {
  798. // this.echoSkuList.forEach(res => {
  799. // if (res.skuMessage == this.skuMessage) {
  800. // this.isEchoSku = res
  801. // }
  802. // })
  803. // if (JSON.stringify(this.isEchoSku) != "{}") {
  804. // let data = {
  805. // orderGoodsId: this.isEchoSku.id,
  806. // type: 1,
  807. // num: this.value,
  808. // shopId: this.shopId,
  809. // }
  810. // this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
  811. // if (res.code == 0) {
  812. // // setTimeout(function() {
  813. // this.$queue.showToast('添加成功');
  814. // this.skuShow = false
  815. // this.getOrderList()
  816. // // },1000)
  817. // } else {
  818. // this.$queue.showToast(res.msg);
  819. // }
  820. // });
  821. // return
  822. // }
  823. // }
  824. let data = {
  825. goodsId: this.goodsDet.goodsId,
  826. skuMessage: this.skuMessage,
  827. skuId: this.skuId,
  828. num: this.value,
  829. shopId: this.shopId,
  830. }
  831. let url = ''
  832. if(this.types == 1){
  833. url = '/app/order/joinOrder'
  834. }else{
  835. url ='/app/order/insertOrder'
  836. }
  837. this.$Request.post('/app/order/insertOrder', data).then(res => {
  838. if (res.code == 0) {
  839. this.$queue.showToast('添加成功');
  840. this.skuShow = false
  841. this.getOrderList()
  842. } else {
  843. this.$queue.showToast(res.msg);
  844. }
  845. })
  846. },
  847. // 切换外卖/自提
  848. tabSwidth(e) {
  849. this.orderType = e
  850. this.getOrderList()
  851. },
  852. // 展示购物车弹窗
  853. isPopupShow() {
  854. console.log(this.goodsList, '677')
  855. if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0].length > 0) {
  856. this.popupShow = true
  857. } else {
  858. uni.showToast({
  859. title: '请先添加商品',
  860. icon: "none"
  861. })
  862. }
  863. },
  864. // 添加数量
  865. add(item, index) {
  866. // this.count++;
  867. console.log(item, index)
  868. this.goodsList.orderGoodsList[0][index].goodsNum++
  869. let data = {
  870. orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
  871. type: 1,
  872. num: 1,
  873. shopId: this.shopId
  874. }
  875. this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
  876. if (res.code == 0) {
  877. this.getOrderList()
  878. } else {
  879. this.$queue.showToast(res.msg);
  880. this.goodsList.orderGoodsList[0][index].goodsNum--
  881. }
  882. });
  883. },
  884. // 减少数量
  885. noAdd(item, index) {
  886. console.log(item, index)
  887. this.goodsList.orderGoodsList[0][index].goodsNum--
  888. // this.count--;
  889. let data = {
  890. orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
  891. type: 2,
  892. num: 1,
  893. shopId: this.shopId
  894. }
  895. this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
  896. if (res.code == 0) {
  897. this.getOrderList()
  898. }
  899. });
  900. },
  901. // 清空购物车
  902. empty() {
  903. let data = {
  904. shopId: this.shopId,
  905. }
  906. this.$Request.post("/app/order/emptyShoppingTrolley", data).then(res => {
  907. if (res.code == 0) {
  908. this.totalPrice = 0
  909. this.goodsNum = 0
  910. this.goodsList = {
  911. orderGoodsList: [
  912. []
  913. ]
  914. }
  915. this.echoSkuList = []
  916. this.echoSku = []
  917. this.getOrderList()
  918. this.popupShow = false
  919. this.getEchoOrder()
  920. }
  921. });
  922. },
  923. // 获取购物车商品列表
  924. getOrderList() {
  925. let data = {
  926. shopId: this.shopId,
  927. page: 1,
  928. limit: 1000,
  929. status: 1,
  930. // orderType: this.orderType
  931. }
  932. this.$Request.get("/app/order/selectAllOrderList", data).then(res => {
  933. if (res.code == 0 && res.data.pageUtils.list.length) {
  934. this.goodsList = res.data.pageUtils.list[0]
  935. if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0]) {
  936. this.totalPrice = res.data.money
  937. this.goodsNum = 0
  938. this.goodsList.orderGoodsList[0].forEach(res => {
  939. if (res.goodsPicture) {
  940. res.goodsPicture = res.goodsPicture.split(',')
  941. }
  942. this.goodsNum += res.goodsNum
  943. })
  944. if (!this.goodsList.orderGoodsList[0].length) {
  945. this.popupShow = false
  946. }
  947. }
  948. }
  949. uni.hideLoading()
  950. });
  951. },
  952. // 跳转商品详情
  953. goDet(id) {
  954. uni.navigateTo({
  955. url: '/pages/index/shop/goodsDet?goodsId=' + id + '&shopId=' + this.shopId + '&orderType=' +
  956. this.orderType
  957. })
  958. },
  959. // 去结算
  960. goConfirm() {
  961. if (!this.userId) {
  962. uni.navigateTo({
  963. url: '/pages/public/login'
  964. })
  965. return
  966. }
  967. console.log(this.goodsList)
  968. if (this.goodsList && this.goodsList.orderGoodsList[0].length > 0) {
  969. uni.navigateTo({
  970. url: '/pages/index/shop/confirmOrder?shopId=' + this.shopId + '&orderType=' + this
  971. .orderType
  972. })
  973. } else {
  974. uni.showToast({
  975. title: '请先添加商品',
  976. icon: "none"
  977. })
  978. }
  979. },
  980. TabSelect(e) {
  981. console.log(e.currentTarget.dataset.id)
  982. this.tabCur = e.currentTarget.dataset.id;
  983. this.mainCur = e.currentTarget.dataset.id;
  984. this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
  985. },
  986. VerticalMain(e) {
  987. let that = this;
  988. let tabHeight = 0;
  989. if (this.load) {
  990. for (let i = 0; i < this.dataList.length; i++) {
  991. let view = uni.createSelectorQuery().select("#main-" + this.dataList[i].id);
  992. view.fields({
  993. size: true
  994. }, data => {
  995. console.log(data, 'data 828')
  996. this.dataList[i].top = tabHeight;
  997. tabHeight = tabHeight + data.height;
  998. this.dataList[i].bottom = tabHeight;
  999. }).exec();
  1000. }
  1001. this.load = false
  1002. }
  1003. let scrollTop = e.detail.scrollTop;
  1004. // console.log(scrollTop,'111')
  1005. for (let i = 0; i < this.dataList.length; i++) {
  1006. if (scrollTop > this.dataList[i].top && scrollTop < this.dataList[i].bottom) {
  1007. this.verticalNavTop = (this.dataList[i].id - 1) * 50
  1008. this.tabCur = this.dataList[i].id
  1009. console.log(scrollTop) //不能删除
  1010. return false
  1011. }
  1012. }
  1013. },
  1014. // 打电话
  1015. call(e) {
  1016. uni.makePhoneCall({
  1017. phoneNumber: e
  1018. });
  1019. },
  1020. // 点击调起地图查看位置
  1021. goMap() {
  1022. //查看位置需要传经纬度才能执行
  1023. let that = this
  1024. uni.authorize({
  1025. scope: 'scope.userLocation',
  1026. success(res) {
  1027. uni.openLocation({
  1028. latitude: that.shopDet.shopLat,
  1029. longitude: that.shopDet.shopLng,
  1030. success: function() {}
  1031. });
  1032. },
  1033. fail(err) {
  1034. }
  1035. })
  1036. },
  1037. goPindan() {
  1038. if (!this.userId) {
  1039. uni.navigateTo({
  1040. url: '/pages/public/login'
  1041. })
  1042. return
  1043. }
  1044. if (uni.getStorageSync('orderId')) {
  1045. uni.navigateTo({
  1046. url: '/pages/index/shop/pindanDet?shopId=' + this.shopId + '&orderId=' + uni.getStorageSync('orderId')
  1047. })
  1048. } else {
  1049. let data = {
  1050. shopId: this.shopId,
  1051. }
  1052. this.$Request.post("/app/order/shareTheBill", data).then(res => {
  1053. if (res.code == 0) {
  1054. uni.navigateTo({
  1055. url: '/pages/index/shop/pindanDet?shopId=' + this.shopId + '&orderId=' +
  1056. res.data
  1057. })
  1058. }
  1059. });
  1060. }
  1061. }
  1062. },
  1063. onReachBottom: function() {
  1064. if (this.current == 2) {
  1065. this.evaluatePage = this.evaluatePage + 1;
  1066. this.getEvaluateList()
  1067. }
  1068. },
  1069. }
  1070. </script>
  1071. <style scoped lang="scss">
  1072. page {
  1073. background-color: #FFFFFF;
  1074. }
  1075. .yhq{
  1076. width: 100%;
  1077. height: 520rpx;
  1078. background-color: #F5F5F5;
  1079. overflow-y: hidden;
  1080. .yhq-box{
  1081. width: 686rpx;
  1082. height: 500rpx;
  1083. // background-color: red;
  1084. .yhq-box-title{
  1085. width: 100%;
  1086. text-align: center;
  1087. font-weight: bold;
  1088. }
  1089. .yhq-box-list{
  1090. width: 100%;
  1091. height: auto;
  1092. height: 460rpx;
  1093. margin-top: 30rpx;
  1094. .yhq-box-list-item{
  1095. width: 100%;
  1096. height: 120rpx;
  1097. border-radius: 24rpx;
  1098. background-color: #FFFFFF;
  1099. margin-bottom: 20rpx;
  1100. }
  1101. .yhq-box-list-item-c{
  1102. width: 646rpx;
  1103. height: 100%;
  1104. }
  1105. }
  1106. }
  1107. }
  1108. .scroll-view_H{
  1109. width: 100%;
  1110. white-space: nowrap;
  1111. }
  1112. .coupon-item{
  1113. display: inline-block;
  1114. height: 46rpx;
  1115. margin-right: 20rpx;
  1116. border: 1px solid red;
  1117. border-radius: 10rpx;
  1118. padding: 0rpx 10rpx 0rpx 10rpx;
  1119. font-size: 20rpx;
  1120. color: red;
  1121. line-height: 44rpx;
  1122. view{
  1123. display: inline-block;
  1124. }
  1125. }
  1126. .pinglunImg{
  1127. width: 100%;
  1128. margin-top: 10rpx;
  1129. }
  1130. .pinglunImg-box{
  1131. width: 100%;
  1132. image{
  1133. // margin-left: 10rpx;
  1134. width: 160upx;
  1135. height: 160upx;
  1136. border-radius: 10rpx;
  1137. }
  1138. }
  1139. .hintPopul {
  1140. width: 100%;
  1141. height: 100vh;
  1142. position: fixed;
  1143. top: 0;
  1144. background: rgba(0, 0, 0, .4);
  1145. z-index: 999;
  1146. }
  1147. .content_ {
  1148. position: absolute;
  1149. left: 0;
  1150. right: 0;
  1151. top: 0;
  1152. bottom: 0;
  1153. margin: auto;
  1154. text-align: center;
  1155. width: 500rpx;
  1156. height: 400rpx;
  1157. border-radius: 20rpx;
  1158. background-color: #fff;
  1159. padding-top: 120rpx;
  1160. }
  1161. .content_ image {
  1162. position: absolute;
  1163. top: -50rpx;
  1164. left: 0;
  1165. right: 0;
  1166. margin: auto;
  1167. }
  1168. .hintText {
  1169. font-size: 30rpx;
  1170. }
  1171. .Btns {
  1172. width: 460rpx;
  1173. height: 60rpx;
  1174. line-height: 60rpx;
  1175. text-align: center;
  1176. background: #FCD202;
  1177. font-size: 28rpx;
  1178. border: 2rpx solid #FCD202;
  1179. color: #333333;
  1180. border-radius: 50rpx;
  1181. font-weight: 700;
  1182. margin: auto;
  1183. }
  1184. .bg1 {
  1185. background: #FFFFFF;
  1186. }
  1187. .sticky-tabs {
  1188. z-index: 990;
  1189. position: sticky;
  1190. top: var(--window-top);
  1191. // background-color: #fff;
  1192. }
  1193. /* // 使用mescroll-uni,则top为0 */
  1194. .mescroll-uni,
  1195. /deep/.mescroll-uni {
  1196. .sticky-tabs {
  1197. top: 0;
  1198. }
  1199. }
  1200. .shop {
  1201. position: absolute;
  1202. top: 80rpx;
  1203. left: 0;
  1204. right: 0;
  1205. width: 686rpx;
  1206. margin: auto;
  1207. background: #FFFFFF;
  1208. border-radius: 20rpx;
  1209. box-shadow: 0 0 20rpx #CCCCCC;
  1210. }
  1211. .skuBtn {
  1212. padding: 10rpx 30rpx;
  1213. border-radius: 10rpx;
  1214. text-align: center;
  1215. margin: 10rpx 20rpx;
  1216. font-size: 28rpx;
  1217. color: #333333;
  1218. border: 2px solid #F2F2F2;
  1219. }
  1220. .active {
  1221. background: rgba(252, 210, 2, 0.2) !important;
  1222. border: 2px solid #FCD202 !important;
  1223. opacity: 0.6;
  1224. }
  1225. .active1 {
  1226. /* width: 82rpx; */
  1227. height: 16rpx;
  1228. background: #FCD202;
  1229. position: relative;
  1230. top: -10rpx;
  1231. z-index: 9;
  1232. }
  1233. .popup {
  1234. /* height: 500rpx; */
  1235. max-height: 500rpx;
  1236. /* overflow-y: auto; */
  1237. }
  1238. .tabBtn {
  1239. /* background-color: #f6f6fa; */
  1240. height: 60rpx;
  1241. line-height: 60rpx;
  1242. color: #999999;
  1243. font-size: 38rpx;
  1244. }
  1245. .Switch {
  1246. width: 164rpx;
  1247. height: 62rpx;
  1248. color: #FFFFFF;
  1249. background: #FCD202;
  1250. border-radius: 30rpx;
  1251. display: flex;
  1252. align-items: center;
  1253. padding: 2rpx;
  1254. }
  1255. .Switch>view {
  1256. /* flex: 1; */
  1257. width: 80rpx;
  1258. text-align: center;
  1259. line-height: 62rpx;
  1260. height: 58rpx;
  1261. }
  1262. .selSwitch {
  1263. color: #333333;
  1264. background: #FFFFFF;
  1265. border-radius: 30rpx;
  1266. }
  1267. .hintPopul {
  1268. width: 100%;
  1269. height: 100vh;
  1270. position: absolute;
  1271. top: 0;
  1272. background: rgba(0, 0, 0, .4);
  1273. }
  1274. .content {
  1275. position: absolute;
  1276. left: 0;
  1277. right: 0;
  1278. top: 0;
  1279. bottom: 0;
  1280. margin: auto;
  1281. text-align: center;
  1282. width: 500rpx;
  1283. height: 400rpx;
  1284. border-radius: 20rpx;
  1285. background-color: #fff;
  1286. padding-top: 120rpx;
  1287. }
  1288. .content image {
  1289. position: absolute;
  1290. top: -50rpx;
  1291. left: 0;
  1292. right: 0;
  1293. margin: auto;
  1294. }
  1295. .hintText {
  1296. font-size: 30rpx;
  1297. }
  1298. .VerticalNav.nav {
  1299. width: 200upx;
  1300. white-space: initial;
  1301. }
  1302. .VerticalNav.nav .cu-item {
  1303. width: 100%;
  1304. text-align: center;
  1305. background-color: #f1f1f1;
  1306. margin: 0;
  1307. border: none;
  1308. height: 50px;
  1309. position: relative;
  1310. }
  1311. .VerticalNav.nav .cu-item.cur {
  1312. background-color: #fff;
  1313. }
  1314. .VerticalBox {
  1315. display: flex;
  1316. }
  1317. .VerticalMain {
  1318. background-color: #f1f1f1;
  1319. flex: 1;
  1320. }
  1321. .detail_describe_text2 {
  1322. font-weight: 500;
  1323. margin-top: 2%;
  1324. color: #999999;
  1325. }
  1326. .detail_account_bottom {
  1327. margin-top: 20rpx;
  1328. width: 100%;
  1329. display: flex;
  1330. justify-content: space-between;
  1331. /* margin: 4% 0 3%; */
  1332. }
  1333. .detail_account_bottom_le {
  1334. width: 47.5%;
  1335. /* margin-right: 5%; */
  1336. border-radius: 44rpx;
  1337. text-align: center;
  1338. line-height: 2.8;
  1339. border: 2rpx solid #FCD202;
  1340. }
  1341. .detail_account_bottom_ri {
  1342. width: 47.5%;
  1343. border-radius: 44rpx;
  1344. text-align: center;
  1345. line-height: 2.8;
  1346. background-color: #FCD202;
  1347. }
  1348. .food_all {
  1349. position: relative;
  1350. }
  1351. .text-through {
  1352. text-decoration: line-through
  1353. }
  1354. /* 食物 */
  1355. .food {
  1356. width: 100%;
  1357. overflow: hidden;
  1358. // position: absolute;
  1359. // top: 350rpx;
  1360. // background-color: #FFFFFF;
  1361. border-top-left-radius: 18rpx;
  1362. border-top-right-radius: 18rpx;
  1363. }
  1364. .food_address {
  1365. // margin: 3% 3% 0 3%;
  1366. // margin: 3%;
  1367. display: flex;
  1368. justify-content: space-between;
  1369. align-items: center;
  1370. margin-top: 100rpx;
  1371. background-color: #FFFFFF;
  1372. // padding-bottom: 3%;
  1373. padding: 3%;
  1374. }
  1375. .food_address_le {
  1376. width: 75%;
  1377. }
  1378. .food_address_le_top {
  1379. display: flex;
  1380. align-items: center;
  1381. justify-content: space-between;
  1382. }
  1383. .food_address_le_top_le {
  1384. width: 40rpx;
  1385. height: 37rpx;
  1386. }
  1387. .food_address_le_top_le image {
  1388. width: 40rpx;
  1389. height: 37rpx;
  1390. }
  1391. .food_address_le_top_ce {
  1392. line-height: 1.6;
  1393. font-size: 38rpx;
  1394. font-weight: 600;
  1395. color: #333333;
  1396. }
  1397. .food_address_le_top_ce_ri {
  1398. width: 14rpx;
  1399. /* margin: 1% 0 0 2%; */
  1400. height: 24rpx;
  1401. margin-left: 2%;
  1402. }
  1403. .food_address_le_top_ce_ri image {
  1404. width: 14rpx;
  1405. height: 24rpx;
  1406. }
  1407. .food_address_text {
  1408. font-weight: 500;
  1409. font-size: 24rpx;
  1410. color: #999999;
  1411. }
  1412. .food_address_ri {
  1413. width: 24%;
  1414. height: 55rpx;
  1415. display: flex;
  1416. padding: 0.5% 1%;
  1417. background-color: #FCD202;
  1418. border-radius: 31rpx;
  1419. color: #FFFFFF;
  1420. }
  1421. .food_address_ri_sty {
  1422. flex: 1;
  1423. text-align: center;
  1424. padding-top: 4%;
  1425. font-size: 24rpx;
  1426. }
  1427. .food_address_ri_sty_active {
  1428. width: 100%;
  1429. overflow: hidden;
  1430. background-color: #FFFFFF;
  1431. border-radius: 31rpx;
  1432. color: #333333;
  1433. text-align: center;
  1434. }
  1435. /* 结算 */
  1436. .settlement {
  1437. width: 94%;
  1438. background-color: #000000;
  1439. line-height: 3.4;
  1440. border-radius: 49rpx;
  1441. position: fixed;
  1442. bottom: 10rpx;
  1443. left: 3%;
  1444. display: flex;
  1445. justify-content: space-between;
  1446. }
  1447. .settlement1 {
  1448. width: 94%;
  1449. background-color: #000000;
  1450. line-height: 2.8;
  1451. border-radius: 49rpx;
  1452. position: relative;
  1453. /* bottom: 10rpx; */
  1454. left: 0;
  1455. right: 0;
  1456. /* left: 3%; */
  1457. display: flex;
  1458. justify-content: space-between;
  1459. margin: 20rpx auto;
  1460. }
  1461. .settlement_le {
  1462. width: 48%;
  1463. padding-left: 18%;
  1464. color: #FFFFFF;
  1465. font-size: 30rpx;
  1466. }
  1467. .settlement_le text {
  1468. font-size: 22rpx;
  1469. }
  1470. .settlement_ri {
  1471. width: 35%;
  1472. background-color: #FCD202;
  1473. font-family: PingFang SC;
  1474. font-weight: 800;
  1475. color: #333333;
  1476. text-align: center;
  1477. border-top-right-radius: 49rpx;
  1478. border-bottom-right-radius: 49rpx;
  1479. }
  1480. .settlement_ri1 {
  1481. width: 35%;
  1482. background-color: #333333;
  1483. font-family: PingFang SC;
  1484. font-weight: 800;
  1485. color: #999999;
  1486. text-align: center;
  1487. border-top-right-radius: 49rpx;
  1488. border-bottom-right-radius: 49rpx;
  1489. }
  1490. .settlement_img {
  1491. width: 91rpx;
  1492. height: 96rpx;
  1493. position: absolute;
  1494. // bottom: 30rpx;
  1495. left: 5%;
  1496. }
  1497. .settlement_img image {
  1498. width: 74rpx;
  1499. height: 81rpx;
  1500. }
  1501. .settlement_hot {
  1502. width: 35rpx;
  1503. height: 35rpx;
  1504. line-height: 35rpx;
  1505. text-align: center;
  1506. border-radius: 50%;
  1507. position: absolute;
  1508. top: -10rpx;
  1509. right: 0;
  1510. background-color: #FF130A;
  1511. color: #FFFFFF;
  1512. font-size: 20rpx;
  1513. font-weight: bold;
  1514. color: #FFFFFF;
  1515. }
  1516. .select_all {
  1517. width: 100%;
  1518. position: relative;
  1519. }
  1520. /* 餐厅 */
  1521. .select {
  1522. color: #000000;
  1523. font-weight: bold;
  1524. background-color: #fff;
  1525. z-index: 10;
  1526. }
  1527. .select_line {
  1528. width: 15%;
  1529. height: 6rpx;
  1530. margin: 0 auto 4%;
  1531. background: #E6E6E6;
  1532. border-radius: 4rpx;
  1533. }
  1534. .select_search {
  1535. width: 100%;
  1536. margin: 2% 0;
  1537. display: flex;
  1538. align-items: center;
  1539. }
  1540. .select_search_le {
  1541. /* width: 10%; */
  1542. font-size: 30rpx;
  1543. line-height: 2.5;
  1544. margin-right: 1%;
  1545. }
  1546. .select_search_ce {
  1547. /* width: 5%; */
  1548. /* margin-top: 1%; */
  1549. margin-right: 20rpx;
  1550. margin-left: 6rpx;
  1551. /* margin: 0 20rpx; */
  1552. width: 20rpx;
  1553. height: 10rpx;
  1554. }
  1555. .select_search_ri {
  1556. /* width: 84%; */
  1557. height: 72rpx;
  1558. flex: 1;
  1559. display: flex;
  1560. }
  1561. .select_search_ri input {
  1562. flex: 1;
  1563. /* width: 100%; */
  1564. height: 72rpx;
  1565. background: #F5F5F5;
  1566. color: #999999;
  1567. border-radius: 36rpx;
  1568. text-decoration: 42rpx;
  1569. text-align: center;
  1570. }
  1571. /* 附近 */
  1572. .nearby {
  1573. width: 100%;
  1574. position: relative;
  1575. }
  1576. .nearby_text {
  1577. width: 18%;
  1578. font-size: 30rpx;
  1579. font-weight: 800;
  1580. color: #333333;
  1581. text-align: center;
  1582. border-bottom: 16rpx solid #FCD202;
  1583. /* line-height: 20rpx; */
  1584. margin-top: 10rpx;
  1585. }
  1586. .nearby_address_active {
  1587. border: 2rpx solid #FCD202;
  1588. width: 100%;
  1589. padding: 3%;
  1590. margin-top: 3%;
  1591. border-radius: 10upx;
  1592. display: flex;
  1593. }
  1594. .nearby_address {
  1595. width: 100%;
  1596. padding: 3%;
  1597. margin-top: 3%;
  1598. border-radius: 10upx;
  1599. display: flex;
  1600. }
  1601. .nearby_address_le {
  1602. flex: 1;
  1603. }
  1604. .nearby_address_ri {
  1605. line-height: 2.5;
  1606. text-align: right;
  1607. /* flex: 1; */
  1608. }
  1609. .nearby_text2 {
  1610. /* line-height: 1.5; */
  1611. display: flex;
  1612. justify-content: space-between;
  1613. align-items: center;
  1614. }
  1615. .nearby_text2_ {
  1616. font-size: 30rpx;
  1617. font-weight: 800;
  1618. color: #333333;
  1619. }
  1620. .nearby_text3 {
  1621. font-size: 24rpx;
  1622. font-weight: 500;
  1623. color: #999999;
  1624. margin-top: 2%;
  1625. }
  1626. /* 添加地址 */
  1627. .goorder {
  1628. width: 100%;
  1629. padding: 2% 3%;
  1630. position: fixed;
  1631. bottom: 0;
  1632. background-color: #FFFFFF;
  1633. border-top: 1rpx solid #999999;
  1634. }
  1635. .goorder_but {
  1636. width: 100%;
  1637. line-height: 2.5;
  1638. text-align: center;
  1639. background: #FCD202;
  1640. border-radius: 36rpx;
  1641. }
  1642. </style>