goodsList.vue 48 KB

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