goodsList.vue 45 KB

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