index.vue 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090
  1. <template>
  2. <view class="container" :style="{ height: winHeight+ 'px' }">
  3. <!-- #ifdef MP -->
  4. <view class="cart_nav">
  5. <nav-bar iconColor='#fff' ref="navBarRef" :navTitle="merchanInfo.name" backgroundColor="#FF6702" :isBackgroundColor="false">
  6. </nav-bar>
  7. </view>
  8. <!-- #endif -->
  9. <view class="main">
  10. <view class="nav">
  11. <view class="header">
  12. <view class="left">
  13. <view class="flex-y-center">
  14. <image style="width: 96rpx; height: 96rpx;border-radius: 6rpx;" :src="merchanInfo.avatar"></image>
  15. <view style="flex: 1;margin-left: 20rpx;">
  16. <view class="store-name">
  17. <navigator :url="`/pages/merchant/detail/index?merId=${merId}`" hover-class="none">
  18. <view class="flex-center">
  19. <text style="font-weight: 600;font-size: 35rpx;color: #141414;">{{ merchanInfo.name }}</text>
  20. <view class="iconfont icon-jiantou" style="font-size: 24rpx;"></view>
  21. </view>
  22. </navigator>
  23. <button hover-class="none" class="merCollect" :class="!merchanInfo.isCollect ? 'care' : 'bg-color'" @click="followToggle">
  24. <text v-show="merchanInfo.isCollect" class="iconfont icon-guanzhu" style="margin-top: 6rpx;"></text>
  25. {{ merchanInfo.isCollect ? '已关注' : '关注' }}
  26. </button>
  27. </view>
  28. <view class="store-score" style="margin: 7rpx 0;">
  29. <text style="font-weight: 600;font-size: 27rpx;color: #FD6716;">{{ merchanInfo.starLevel }}分</text>
  30. <text style="font-size: 21rpx;color: #999999;margin-left: 6rpx;">月销 {{getFormattedSales(merchanInfo.sales )|| 0 }}</text>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="store-addr">
  35. <text style="font-size: 23rpx;color: #141414;">商家地址:{{ merchanInfo.addressDetail }}</text>
  36. </view>
  37. <!-- 提示 -->
  38. <view v-if="merchanInfo.headline && merchanInfo.headline.length" class="store-tip flex-y-center mt-10 mb-10 pl-32">
  39. <!-- 左侧固定图片 -->
  40. <text class='iconfont icon-laba ' style="font-size: 24rpx;margin-right: 20rpx;"></text>
  41. <!-- 右侧文字轮播区域 -->
  42. <view class="flex-1 h-40 mt-10" style="overflow: hidden;">
  43. <swiper class="swiper" :indicator-dots="false" circular :autoplay="true" :interval="3000" vertical>
  44. <block v-for="(item,index) in merchanInfo.headline" :key='index'>
  45. <swiper-item catchtouchmove='catchTouchMove'>
  46. <view class='newsTitle swiper-item'>
  47. <text>{{item.title}}</text>
  48. </view>
  49. </swiper-item>
  50. </block>
  51. </swiper>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. <view style="width: 100%;height: 10rpx; background-color: #F8F9FD;"></view>
  58. </view>
  59. <view class="let-box">
  60. <view @click="onTabChang(0)" class="let-box1">
  61. <text :class="{ 'actave1': tabindex == 0 }" class="let-txt">下单</text>
  62. <view :class="{ 'actave': tabindex == 0 }" class="let-line"></view>
  63. </view>
  64. <view @click="onTabChang(1)" class="let-box1">
  65. <text :class="{ 'actave1': tabindex == 1 }" class="let-txt">评价</text>
  66. <view :class="{ 'actave': tabindex == 1 }" class="let-line"></view>
  67. </view>
  68. <view @click="getACoupon()" class="let-box1">
  69. <text class="let-txt">去领券</text>
  70. <view class="let-line"></view>
  71. </view>
  72. </view>
  73. <template v-if="tabindex == 0">
  74. <view class="content">
  75. <scroll-view style="height: 950rpx" class="menus" scroll-with-animation scroll-y>
  76. <view class="wrapper">
  77. <view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in goods"
  78. :key="index" @tap="handleMenuTap(item.id)" v-if="item.childList.length">
  79. <text>{{ item.name }}</text>
  80. <view class="dot" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>
  81. </view>
  82. </view>
  83. </scroll-view>
  84. <!-- goods list begin -->
  85. <scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll"
  86. :scroll-into-view="menuScrollIntoView">
  87. <view class="wrapper">
  88. <view class="list">
  89. <!-- category begin -->
  90. <view style="font-weight: 400;font-size: 21rpx;color: #999999;text-align: center;margin-bottom: 19rpx;">————温馨提示:适度选择,避免浪费
  91. ————</view>
  92. <view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`" v-if="item.childList.length">
  93. <view class="title">
  94. <text v-if="item.childList.length">{{ item.name }}</text>
  95. <image :src="item.icon" class="icon"></image>
  96. </view>
  97. <view class="items">
  98. <!-- 商品 begin -->
  99. <!-- <view v-if="!item.goodsList">无商品</view> -->
  100. <view class="good" v-for="(good, key) in item.childList" :key="key">
  101. <image :src="good.icon" class="image" @tap="getOrderdetils(good, item)"></image>
  102. <view class="right">
  103. <text class="name">{{ good.name }}</text>
  104. <view class="tips">
  105. <text>销量 {{getFormattedSales(good.sales)}}</text>
  106. <text style="margin-left: 39rpx;">好评率 {{ good.replyChance*100}}%</text>
  107. </view>
  108. <view class="price_and_action">
  109. <text class="price">¥{{ good.price }}</text>
  110. <view class="btn-group">
  111. <button type="primary" class="btn property_btn bg-color" hover-class="none" size="mini" @tap="Selectpox(item, good)">
  112. 选规格
  113. </button>
  114. <!-- <view class="dot" v-show="goodCartNum(good.id)">{{ goodCartNum(good.id) }}</view> -->
  115. </view>
  116. </view>
  117. </view>
  118. </view>
  119. <!-- 商品 end -->
  120. </view>
  121. </view>
  122. <!-- category end -->
  123. </view>
  124. </view>
  125. </scroll-view>
  126. <!-- goods list end -->
  127. </view>
  128. <!-- content end -->
  129. <!-- 购物车栏 begin -->
  130. <view class="cart-box">
  131. <view class="mark">
  132. <image src="/static/img/ic-shopping-cart.png" class="cart-img" @tap="openCart"></image>
  133. <view class="tag" v-if="cart.length > 0">{{ getCartGoodsNumber }}</view>
  134. </view>
  135. <view style="font-weight: 500;font-size: 27rpx;color: #999999;" class="price" v-if="cart.length === 0">配送费{{merchanInfo.riderDeliveryFee}}元</view>
  136. <view style="font-weight: 600;font-size: 27rpx;color: #FFFFFF;" class="price" v-else>¥{{ getCartGoodsPrice || 0 }}</view>
  137. <button :style="{backgroundColor: disabledPay ? '#000' : ''}" type="primary" class="pay-btn bg-color" @tap="toPay"
  138. :disabled="disabledPay">
  139. {{ disabledPay ? (spread==0?``:`差${spread}元起送`) : '去结算' }}
  140. </button>
  141. </view>
  142. <!-- 购物车栏 end -->
  143. <!-- 打开的购物车 -->
  144. <view class="mode" v-if="cart.length !== 0 && lockcatble" style="z-index: 9;">
  145. <view class="mode-1">
  146. <!-- 判断数量大于0显示 -->
  147. <view class="mode-clear" v-if="getCartGoodsNumber>0">
  148. <view style="display: flex;align-items: center;" >
  149. <text class="mode-txt">数量:<text style="color: #FD6716 ;">({{getCartGoodsNumber}})</text></text>
  150. <!-- class="mode-txt1" -->
  151. <text @tap="clearCart" style="margin-left: 40rpx;">清空购物车</text>
  152. </view>
  153. <view class="close" @click="closeCartModal">
  154. <text style="padding: 10rpx; 20rpx">x</text>
  155. </view>
  156. </view>
  157. <view class="mode-box">
  158. <view class="items">
  159. <!-- 商品 begin -->
  160. <view class="good" v-for="(good, key) in cart" :key="key">
  161. <image :src="good.iconText" class="image" @tap="console.log('点击图片')"></image>
  162. <view class="right" style="margin-left: 50rpx;">
  163. <text class="name">{{ good.name }}</text>
  164. <view class="tips">
  165. <text>{{ good.props_text }}</text>
  166. <text style="margin-left: 39rpx;">销量 {{getFormattedSales(good.sales)}}</text>
  167. <text style="margin-left: 39rpx;">好评率 {{ good.replyChance*100}}%</text>
  168. </view>
  169. <view class="price_and_action">
  170. <text class="price">¥{{ good.price * good.number }}</text>
  171. <view class="btn-group">
  172. <button type="default" plain class="btn reduce_btn" size="mini"
  173. hover-class="none" @tap="handleReduceFromCart(good.category, good)">
  174. <view class="iconfont iconsami-select">-</view>
  175. </button>
  176. <view class="number" >{{ good.number }}</view>
  177. <button type="primary" class="btn add_btn bg-color" size="min" hover-class="none" @tap="handleAddToCart(good.category, good, 1)">
  178. <view class="iconfont iconadd-select">+</view>
  179. </button>
  180. </view>
  181. </view>
  182. </view>
  183. </view>
  184. <!-- 商品 end -->
  185. </view>
  186. <view style="height: 200rpx;">
  187. </view>
  188. </view>
  189. </view>
  190. </view>
  191. <!-- 规格弹窗 -->
  192. <view class="mode" v-if="selectble">
  193. <view class="sel-mode-1">
  194. <view class="good-detail-modal">
  195. <view class="close" @click="Close">
  196. <text style="padding: 10rpx; 20rpx">x</text>
  197. </view>
  198. <view class="sel-2">
  199. <image class="neximg" :src="good.icon" />
  200. <view class="nexbox1">
  201. <view class="name" style="font-size: 28rpx;margin-bottom: 19rpx;color: #000000;">{{good.name}}</view>
  202. <view>
  203. <text>销量 {{good.sales}}</text>
  204. <text style="margin-left: 39rpx;">好评率 {{ good.replyChance*100}}%</text>
  205. <text style="margin-left: 39rpx;" class="nexbox-txt3">¥ {{good.price}}</text>
  206. </view>
  207. </view>
  208. </view>
  209. <!--规格数组 -->
  210. <scroll-view class="detail" scroll-y>
  211. <view class="wrapper">
  212. <view class="properties">
  213. <view class="property" v-for="(item, index) in good.property" :key="index">
  214. <view class="title">
  215. <text class="name">{{ item.attributeName }}</text>
  216. <!-- <view class="desc" v-if="item.desc">({{ item.desc }})</view> -->
  217. </view>
  218. <view class="values">
  219. <view class="value" v-for="(value, key) in item.optionList" :key="key" :class="{'default': value.is_default}"
  220. @tap="changePropertyDefault(index, key)">
  221. {{ value.optionName }}
  222. </view>
  223. </view>
  224. </view>
  225. </view>
  226. </view>
  227. </scroll-view>
  228. <!-- 数量 -->
  229. <view class="sel-6">
  230. <text>数量</text>
  231. <!-- 加入购物车 -->
  232. <view class="btn-group">
  233. <button v-if="!goodCartNum(good.props_text)" type="primary" class="btn property_btn bg-color" size="min"
  234. hover-class="none" @tap="handleAddToCart(good.category, good, 1)">
  235. 加入购物车
  236. </button>
  237. <template v-else>
  238. <button type="default" v-show="goodCartNum(good.props_text)" plain class="btn reduce_btn" size="mini"
  239. hover-class="none" @tap="handleReduceFromCart(good.category, good)">
  240. <view class="iconfont iconsami-select">-</view>
  241. </button>
  242. <view class="number" v-show="goodCartNum(good.props_text)">{{ goodCartNum(good.props_text) }}</view>
  243. <button type="primary" class="btn add_btn bg-color" size="min" hover-class="none" @tap="handleAddToCart(good.category, good, 1)">
  244. <view class="iconfont iconadd-select">+</view>
  245. </button>
  246. </template>
  247. </view>
  248. </view>
  249. </view>
  250. </view>
  251. </view>
  252. </template>
  253. <template v-if="tabindex == 1">
  254. <view style="flex: 1;">
  255. <view class='evaluate-list'>
  256. <view class='generalComment acea-row row-between-wrapper'>
  257. <view class='acea-row row-middle font_color'>
  258. <view class='evaluate'>评分</view>
  259. <view class='start' :class="'star'+ (replyData.replyStar)">
  260. </view>
  261. </view>
  262. <view><text class='font_color'>{{replyData.replyChance ? (replyData.replyChance)*100 : 0}}%</text>好评率</view>
  263. </view>
  264. <view class='nav-tab1 acea-row row-middle'>
  265. <view class='item' :class='type==0 ? "bg-color":""' @click='changeType(0)'>全部({{replyData.sumCount || 0}})
  266. </view>
  267. <view class='item' :class='type==1 ? "bg-color":""' @click='changeType(1)'>好评({{replyData.goodCount || 0}})
  268. </view>
  269. <view class='item' :class='type==2 ? "bg-color":""' @click='changeType(2)'>中评({{replyData.inCount || 0}})
  270. </view>
  271. <view class='item' :class='type==3 ? "bg-color":""' @click='changeType(3)'>差评({{replyData.poorCount || 0}})
  272. </view>
  273. </view>
  274. <user-evaluation :reply="reply"></user-evaluation>
  275. </view>
  276. <view class='loadingicon acea-row row-center-wrapper'>
  277. <text class='loading iconfont icon-jiazai' v-if='loading!=false'></text>{{loadTitle}}
  278. </view>
  279. <view class='noCommodity' v-if="(type==0 && !replyData.sumCount) || (type==1 && !replyData.goodCount) || (type==2 && !replyData.inCount) || (type==3 && !replyData.poorCount)">
  280. <view class='pictrue'>
  281. <image :src="urlDomain+'crmebimage/presets/noEvaluate.png'"></image>
  282. <view class="default_txt">暂无任何评论哦~</view>
  283. </view>
  284. </view>
  285. </view>
  286. </template>
  287. </view>
  288. </template>
  289. <script>
  290. // +----------------------------------------------------------------------
  291. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  292. // +----------------------------------------------------------------------
  293. // | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
  294. // +----------------------------------------------------------------------
  295. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  296. // +----------------------------------------------------------------------
  297. // | Author: CRMEB Team <admin@crmeb.com>
  298. // +----------------------------------------------------------------------
  299. import {
  300. getCategoryCacheTree,
  301. getMerchantInfo,
  302. getMerchantProList,
  303. getMerchantReply,
  304. getMerchantReplyConfig
  305. } from '@/api/merchant.js';
  306. import {
  307. getMerCollectAddApi,
  308. getMerCollectCancelApi
  309. } from '@/api/merchant.js';
  310. import {
  311. getProductDetail
  312. } from '@/api/product.js';
  313. import {
  314. orderCreate,
  315. preOrderApi
  316. } from '@/api/order.js';
  317. import navBar from '@/components/navBar';
  318. import {
  319. getAddressList
  320. } from '@/api/user.js';
  321. import {
  322. postCartAdd,
  323. } from "@/api/product.js";
  324. import userEvaluation from './components/userEvaluation.vue';
  325. let app = getApp();
  326. var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
  327. export default {
  328. components: {
  329. navBar,
  330. userEvaluation
  331. },
  332. data() {
  333. return {
  334. merId: 0,
  335. winHeight: 0,
  336. merchanInfo: {},
  337. statusBarHeight: app.globalData.statusBarHeight,
  338. navigationBarHeight: 112,
  339. goods: [], //所有商品
  340. currentCateId: 1, //默认分类
  341. cateScrollTop: 0,
  342. lastScrollTop: 0,
  343. menuScrollIntoView: '',
  344. cart: [], //购物车
  345. goodDetailModalVisible: false, //是否饮品详情模态框
  346. good: {}, //当前饮品
  347. category: {}, //当前饮品所在分类
  348. cartPopupVisible: false,
  349. sizeCalcState: false,
  350. orderType: 'takeout',
  351. store: {
  352. min_price: 0.01
  353. },
  354. specifications: '', //点击的这一项菜品信息
  355. specificationsList: [], //点击的这一项菜品信息的大类
  356. selectble: false, //规格弹窗
  357. productValue: [], //规格数组
  358. productObj: {}, //规格对象
  359. productid: '', //选中规格的id
  360. lockcatble: false, // 购物车弹窗
  361. tabindex: 0, //点菜评价切换
  362. addressInfo: {},
  363. urlDomain: this.$Cache.get("imgHost"),
  364. replyData: {},
  365. product_id: 0,
  366. reply: [],
  367. type: 0,
  368. loading: false,
  369. loadend: false,
  370. loadTitle: '加载更多',
  371. page: 1,
  372. limit: 20,
  373. orderdetilsOjb: {}
  374. }
  375. },
  376. onShow() {
  377. console.log(this.cart)
  378. console.log(this.orderdetilsOjb)
  379. uni.getStorageSync()
  380. // this.handleAddToCart()
  381. },
  382. onLoad(options) {
  383. let that = this;
  384. uni.getSystemInfo({
  385. success: function(res) {
  386. that.winHeight = res.windowHeight
  387. },
  388. });
  389. if (options.hasOwnProperty('merId') || options.scene) {
  390. if (options.scene) { // 仅仅小程序扫码进入
  391. this.merId = this.globalData.merId ? this.globalData.merId : 0;
  392. } else {
  393. this.merId = options.merId ? parseInt(options.merId) : 0;
  394. }
  395. }
  396. //首页数据加载
  397. // 获取商家信息
  398. this.getMerchantInfoData()
  399. // 获取商品列表
  400. getCategoryCacheTree(this.merId).then(res => {
  401. console.log(res.data)
  402. this.goods = res.data
  403. // this.goods.unshift({
  404. // id: 9999,
  405. // name: '推荐'
  406. // })
  407. this.currentCateId = this.goods[0].id
  408. // this.menuScrollIntoView = `cate-${9999}`
  409. })
  410. // 获取用户默认地址
  411. this.getAddressList()
  412. // this.getIndexConfig();
  413. // #ifdef MP-WEIXIN
  414. // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
  415. const custom = wx.getMenuButtonBoundingClientRect()
  416. // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
  417. // this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
  418. // console.log("导航栏高度:"+this.globalData.navigationBarHeight)
  419. // #endif
  420. },
  421. computed: {
  422. goodCartNum() { //计算单个饮品添加到购物车的数量
  423. // this.good
  424. return (text) => this.cart.reduce((acc, cur) => {
  425. !text ? text = this.getGoodSelectedProps(this.good) : ''
  426. if ((cur.props_text + cur.id) === (text + this.good.id)) {
  427. return acc += cur.number
  428. }
  429. return acc
  430. }, 0)
  431. },
  432. menuCartNum() {
  433. return (id) => this.cart.reduce((acc, cur) => {
  434. if (cur.cate_id === id) {
  435. return acc += cur.number
  436. }
  437. return acc
  438. }, 0)
  439. },
  440. getCartGoodsNumber() { //计算购物车总数
  441. return this.cart.reduce((acc, cur) => acc + cur.number, 0)
  442. },
  443. getCartGoodsPrice() { //计算购物车总价
  444. return this.cart.reduce((acc, cur) =>( acc + cur.number * cur.price).toFixed(2), 0)
  445. },
  446. disabledPay() { //是否达到起送价
  447. return this.orderType == 'takeout' && (this.getCartGoodsPrice==0 || this.getCartGoodsPrice < this.store.min_price) ? true : false
  448. },
  449. spread() { //差多少元起送
  450. if (this.orderType != 'takeout') return
  451. return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
  452. }
  453. },
  454. methods: {
  455. /**
  456. * 去领券
  457. */
  458. getACoupon(){
  459. uni.navigateTo({
  460. url:`/pages/merchant/classify_coupon/index?id=${this.merId}&tabActive=2`
  461. })
  462. },
  463. clearCart(){
  464. this.cart = []
  465. this.lockcatble = false
  466. },
  467. openCart(){
  468. console.log(this.cart,'this.cart')
  469. this.cart.length !== 0 ? this.lockcatble = !this.lockcatble : ''
  470. },
  471. getFormattedSales(value) {
  472. // 转换成字符串,然后截取前三位,并添加“+”
  473. return value.length>3?`${String(value).slice(0, 3)}+`:value;
  474. },
  475. getMerchantInfoData() {
  476. getMerchantInfo(this.merId).then(res => {
  477. this.merchanInfo = res.data
  478. this.store.min_price= res.data.merDeliveryFee;
  479. this.$store.commit('MERCHANTJINFO', res.data);
  480. });
  481. },
  482. // 跳转详情
  483. getOrderdetils(item, val) {
  484. this.orderdetilsOjb = {
  485. good: item,
  486. category: val
  487. }
  488. console.log(this.orderdetilsOjb)
  489. uni.navigateTo({
  490. url: `/pages/goods/goods_details/index?id=${item.id}&mt=0&cart=${JSON.stringify(this.cart)}`
  491. })
  492. },
  493. // 设置是否关注
  494. followToggle: function() {
  495. if (this.isLogin === false) {
  496. toLogin();
  497. } else {
  498. if (this.merchanInfo.isCollect) {
  499. getMerCollectCancelApi(this.merId).then(res => {
  500. console.log()
  501. if (res.code == 200) {
  502. this.$util.Tips({
  503. title: "取消收藏",
  504. });
  505. this.getMerchantInfoData() //商家信息
  506. }
  507. })
  508. } else {
  509. getMerCollectAddApi(this.merId).then(res => {
  510. console.log('收藏', res)
  511. if (res.code == 200) {
  512. this.$util.Tips({
  513. title: "收藏成功",
  514. });
  515. this.getMerchantInfoData() //商家信息
  516. }
  517. })
  518. }
  519. }
  520. },
  521. // 获取地址数据
  522. getAddressList() {
  523. getAddressList().then(res => {
  524. console.log('地址', res)
  525. if (res.code = 200) {
  526. this.addressInfo = res.data.find(item => item.isDefault === true);
  527. console.log('默认地址', this.addressInfo)
  528. }
  529. })
  530. },
  531. handBack() {
  532. uni.navigateBack({
  533. delta: 1
  534. })
  535. },
  536. handleMenuTap(id) { //点击菜单项事件
  537. this.menuScrollIntoView = `cate-${id}`
  538. if (!this.sizeCalcState) {
  539. this.calcSize()
  540. }
  541. this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
  542. },
  543. handleGoodsScroll({
  544. detail
  545. }) { //商品列表滚动事件
  546. if (!this.sizeCalcState) {
  547. this.calcSize()
  548. }
  549. const {
  550. scrollTop
  551. } = detail
  552. let tabs = this.goods.filter(item => item.top <= scrollTop).reverse()
  553. if (tabs.length > 0) {
  554. this.currentCateId = tabs[0].id
  555. }
  556. },
  557. calcSize() {
  558. let h = 10
  559. this.goods.forEach(item => {
  560. let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
  561. view.fields({
  562. size: true
  563. }, data => {
  564. // if (data.goodsList) {
  565. item.top = h
  566. h += data.height
  567. item.bottom = h
  568. // }
  569. }).exec()
  570. })
  571. this.sizeCalcState = true
  572. },
  573. showGoodDetailModal(item, good) {
  574. this.good = JSON.parse(JSON.stringify({ ...good
  575. }))
  576. this.category = JSON.parse(JSON.stringify(item))
  577. this.goodDetailModalVisible = true
  578. },
  579. handlePropertyAdd() {
  580. this.good.number += 1
  581. },
  582. handlePropertyReduce() {
  583. if (this.good.number === 1) return
  584. this.good.number -= 1
  585. },
  586. changePropertyDefault(index, key) { //改变默认属性值
  587. this.good.property[index].optionList.forEach(value => this.$set(value, 'is_default', 0))
  588. this.good.property[index].optionList[key].is_default = 1
  589. this.good.number = 1
  590. this.good = JSON.parse(JSON.stringify(this.good))
  591. },
  592. handleAddToCartInModal() {
  593. const product = Object.assign({}, this.good, {
  594. props_text: this.getGoodSelectedProps(this.good),
  595. props: this.getGoodSelectedProps(this.good, 'id')
  596. })
  597. this.handleAddToCart(this.category, product, this.good.number)
  598. // this.closeGoodDetailModal()
  599. },
  600. getGoodSelectedProps(good, type = 'text') { //计算当前饮品所选属性
  601. // if (good.use_property) {
  602. let props = []
  603. good.property.forEach(({
  604. optionList
  605. }) => {
  606. optionList.forEach(value => {
  607. if (value.is_default) {
  608. props.push(type === 'text' ? value.optionName : value.id)
  609. }
  610. })
  611. })
  612. return type === 'text' ? props.join(',') : props
  613. // }
  614. // return ''
  615. },
  616. handleReduceFromCart(item, good) {
  617. const goodText = this.getGoodSelectedProps(this.good?.id ? this.good : good) // 购物车当前选中的规格
  618. const index = this.cart.findIndex(item => item.id === good.id && item.props_text === goodText)
  619. this.cart[index].number -= 1
  620. if (this.cart[index].number <= 0) {
  621. this.cart.splice(index, 1)
  622. }
  623. },
  624. handleAddToCart(cate, good, num) { //添加到购物车
  625. const goodText = this.getGoodSelectedProps(this.good?.id ? this.good : good) // 购物车当前选中的规格
  626. const index = this.cart.findIndex(item => {
  627. // if (good.use_property) {
  628. // !good.props_text ? good.props_text = this.getGoodSelectedProps(good) : ''
  629. return (item.id === good.id) && (item.props_text === goodText)
  630. // } else {
  631. // return item.id === good.id
  632. // }
  633. })
  634. if (index > -1) {
  635. this.cart[index].number += num
  636. } else {
  637. this.cart.push({
  638. id: good.id,
  639. cate_id: cate.id,
  640. name: good.name,
  641. price: good.price,
  642. number: num,
  643. icon: good.icon,
  644. use_property: good.use_property || goodText,
  645. props_text: this.getGoodSelectedProps(this.good?.id ? this.good : good),
  646. props: this.getGoodSelectedProps(this.good?.id ? this.good : good, 'id'),
  647. productid: this.productObj[goodText].id,
  648. iconText: this.productObj[goodText].image,
  649. ...good
  650. })
  651. }
  652. // let q = {
  653. // productId: parseFloat(good.id),
  654. // cartNum: parseFloat(index > -1 ? num+this.cart[index].number : num),
  655. // isNew: false,
  656. // productAttrUnique: this.productObj[goodText].id,
  657. // };
  658. // let that = this
  659. // postCartAdd(q)
  660. // .then(function(res) {
  661. // that.$util.Tips({
  662. // title: "添加购物车成功",
  663. // success: () => {
  664. // },
  665. // });
  666. // })
  667. // console.log(this.cart, '购物车')
  668. },
  669. toPay() {
  670. // if(!this.isLogin) {
  671. // uni.navigateTo({url: '/pages/login/login'})
  672. // return
  673. // }
  674. uni.showLoading({
  675. title: '加载中'
  676. })
  677. let orderDetails = this.cart.map((item) => {
  678. return {
  679. attrValueId: item.productid, //商品规格属性id(立即购买、活动购买必填)
  680. groupBuyActivityId: null, //拼团活动id(拼团下单时必填)
  681. groupBuyRecordId: 0, // 拼团记录id,营销类型2=拼团 时必填 0=开团 实际
  682. productId: item.id, //商品id
  683. productNum: item.number //商品数量
  684. };
  685. });
  686. preOrderApi({
  687. "preOrderType": 'buyNow',
  688. //类型 预下单类型(“shoppingCart”:购物车下单,“buyNow”:
  689. // 立即购买,“video”: 视频号商品下单,“seckill”:秒杀下单,“group”:拼团下单)
  690. "orderDetails": orderDetails //购物车信息
  691. }).then(res => {
  692. console.log('预下单接口', res)
  693. if (res.code == 200) {
  694. // uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
  695. uni.navigateTo({
  696. // url: `/pages/goods/order_confirm/index?cartList=${cartList}`
  697. url: '/pages/goods/order_confirm/index?is_address=1&orderNo=' + res.data.orderNo +
  698. '&addressId=' + this.addressInfo.id
  699. })
  700. }
  701. }).catch(err => {
  702. uni.showToast({
  703. title: err,
  704. icon: 'none'
  705. })
  706. })
  707. uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
  708. uni.hideLoading()
  709. },
  710. // 选规格打开
  711. Selectpox(item, itemInfo) {
  712. this.specifications = itemInfo //这一项信息
  713. this.specificationsList = item //这一项信息
  714. this.good = {...itemInfo}
  715. this.good.category = item
  716. let that = this
  717. getProductDetail(
  718. itemInfo.id,
  719. 0, 0, ''
  720. ).then((res) => {
  721. console.log('规格', res)
  722. if (res.code == 200) {
  723. that.good.property = res.data.productAttr.map(item => {
  724. item.optionList.forEach((items, index) => {
  725. index === 0 ? items.is_default = true : '' // 规格默认选中
  726. })
  727. return { ...item
  728. }
  729. })
  730. console.log(that.good)
  731. // this.productValue = res.data.productAttr //规格数组
  732. that.productObj = res.data.productValue //默认选择的id
  733. that.selectble = true
  734. }
  735. })
  736. },
  737. // 关闭规格
  738. Close() {
  739. this.specifications = '' //这一项信息
  740. this.specificationsList = [] //这一项信息
  741. this.good = {}
  742. this.selectble = false
  743. },
  744. // 关闭购物车
  745. closeCartModal() {
  746. this.lockcatble = false
  747. },
  748. onTabChang(id) {
  749. if (this.tabindex === id) return
  750. this.tabindex = id
  751. if (id == 1) {
  752. this.getProductReplyList()
  753. this.getProductReplyCount()
  754. }
  755. },
  756. /**
  757. * 分页获取评论
  758. */
  759. getProductReplyList: function() {
  760. let that = this;
  761. if (that.loadend) return;
  762. if (that.loading) return;
  763. that.loading = true;
  764. that.loadTitle = '';
  765. getMerchantReply(that.merId, {
  766. page: that.page,
  767. limit: that.limit,
  768. type: that.type,
  769. }).then(res => {
  770. let list = res.data.list,
  771. loadend = list.length < that.limit;
  772. that.reply = that.$util.SplitArray(list, that.reply);
  773. that.$set(that, 'reply', that.reply);
  774. that.loading = false;
  775. that.loadend = loadend;
  776. if (that.reply.length) {
  777. that.loadTitle = loadend ? "??人家是有底线的~~" : "加载更多";
  778. }
  779. that.page = that.page + 1;
  780. }).catch(err => {
  781. that.loading = false,
  782. that.loadTitle = '加载更多'
  783. });
  784. },
  785. /*
  786. * 点击事件切换
  787. * */
  788. changeType: function(e) {
  789. let type = parseInt(e);
  790. if (type == this.type) return;
  791. this.type = type;
  792. this.page = 1;
  793. this.loadend = false;
  794. this.$set(this, 'reply', []);
  795. this.getProductReplyList();
  796. },
  797. /**
  798. * 获取评论统计数据
  799. *
  800. */
  801. getProductReplyCount: function() {
  802. let that = this;
  803. getMerchantReplyConfig(that.merId).then(res => {
  804. that.$set(that, 'replyData', res.data);
  805. });
  806. },
  807. }
  808. }
  809. </script>
  810. <style lang="scss" scoped>
  811. /* #ifdef H5 */
  812. page {
  813. min-height: 100%;
  814. }
  815. /* #endif */
  816. .bg-color {
  817. background-color: $bg-color-primary;
  818. }
  819. .care {
  820. color: #666666 !important;
  821. border: 1px solid #CCCCCC;
  822. background: inherit !important;
  823. }
  824. .order-nav {
  825. // height: 111rpx;
  826. position: relative;
  827. background-color: #FF6702;
  828. display: flex;
  829. align-items: center;
  830. justify-content: center;
  831. .back-button {
  832. position: absolute;
  833. left: 20rpx;
  834. }
  835. text {
  836. font-weight: 500;
  837. font-size: 35rpx;
  838. color: #FFFFFF;
  839. }
  840. }
  841. .container {
  842. display: flex;
  843. flex-direction: column;
  844. overflow: hidden;
  845. position: relative;
  846. }
  847. .loading {
  848. width: 100%;
  849. height: 100%;
  850. display: flex;
  851. align-items: center;
  852. justify-content: center;
  853. image {
  854. width: 260rpx;
  855. height: 260rpx;
  856. position: relative;
  857. margin-top: -200rpx;
  858. /* #ifdef h5 */
  859. margin-top: 0;
  860. /* #endif */
  861. }
  862. }
  863. .stores {
  864. width: 100%;
  865. display: flex;
  866. flex-direction: column;
  867. justify-content: flex-start;
  868. margin-bottom: -40rpx;
  869. .store {
  870. width: 100%;
  871. background-color: $bg-color-grey;
  872. padding: 20rpx;
  873. display: flex;
  874. align-items: center;
  875. margin-bottom: 20rpx;
  876. border-radius: 6rpx;
  877. .iconfont {
  878. font-size: 50rpx;
  879. margin-right: 15rpx;
  880. &.iconradio-button-off {
  881. color: $text-color-assist;
  882. }
  883. &.iconradio-button-on {
  884. color: $color-primary;
  885. }
  886. }
  887. .infos {
  888. flex: 1;
  889. display: flex;
  890. flex-direction: column;
  891. color: $text-color-base;
  892. overflow: hidden;
  893. .name_and_distance {
  894. width: 100%;
  895. display: flex;
  896. justify-content: space-between;
  897. margin-bottom: 10rpx;
  898. overflow: hidden;
  899. .name {
  900. flex: 1;
  901. flex-shrink: 0;
  902. overflow: hidden;
  903. text-overflow: ellipsis;
  904. white-space: nowrap;
  905. font-size: $font-size-lg;
  906. }
  907. .distance {
  908. flex-shrink: 0;
  909. font-size: $font-size-lg;
  910. font-weight: bold;
  911. margin-left: 20rpx;
  912. }
  913. }
  914. .street {
  915. color: $text-color-assist;
  916. font-size: $font-size-sm;
  917. }
  918. }
  919. }
  920. }
  921. .main {
  922. overflow: hidden;
  923. width: 100%;
  924. display: flex;
  925. flex-direction: column;
  926. }
  927. .nav {
  928. width: 100%;
  929. flex-shrink: 0;
  930. display: flex;
  931. flex-direction: column;
  932. border-radius: 23rpx;
  933. padding: 19rpx 45rpx 38rpx 45rpx;
  934. background-color: #ffffff;
  935. .header {
  936. width: 100%;
  937. display: flex;
  938. align-items: center;
  939. justify-content: space-between;
  940. .left {
  941. flex: 1;
  942. display: flex;
  943. flex-direction: column;
  944. .store-name {
  945. display: flex;
  946. justify-content: space-between;
  947. align-items: center;
  948. font-size: $font-size-lg;
  949. margin-bottom: 10rpx;
  950. .iconfont {
  951. margin-left: 10rpx;
  952. line-height: 100%;
  953. }
  954. .icon-img {
  955. width: 40rpx;
  956. height: 40rpx;
  957. flex-shrink: 0;
  958. }
  959. }
  960. .store-tip {
  961. font-weight: 400;
  962. font-size: 21rpx;
  963. color: #858687;
  964. margin-top: 10rpx;
  965. background: #F8F9FB;
  966. border-radius: 4rpx;
  967. }
  968. }
  969. .right {
  970. background-color: $bg-color-grey;
  971. border-radius: 38rpx;
  972. display: flex;
  973. align-items: center;
  974. font-size: $font-size-sm;
  975. padding: 0 38rpx;
  976. color: $text-color-assist;
  977. .dinein,
  978. .takeout {
  979. position: relative;
  980. display: flex;
  981. align-items: center;
  982. &.active {
  983. padding: 14rpx 38rpx;
  984. color: #ffffff;
  985. background-color: $color-primary;
  986. border-radius: 38rpx;
  987. }
  988. }
  989. .takeout {
  990. margin-left: 20rpx;
  991. height: 100%;
  992. flex: 1;
  993. padding: 14rpx 0;
  994. }
  995. .dinein.active {
  996. margin-left: -38rpx;
  997. }
  998. .takeout.active {
  999. margin-right: -38rpx;
  1000. }
  1001. }
  1002. }
  1003. .coupon {
  1004. flex: 1;
  1005. width: 100%;
  1006. background-color: $bg-color-primary;
  1007. font-size: $font-size-base;
  1008. color: $color-primary;
  1009. padding: 0 20rpx;
  1010. display: flex;
  1011. align-items: center;
  1012. overflow: hidden;
  1013. .title {
  1014. flex: 1;
  1015. margin-left: 10rpx;
  1016. overflow: hidden;
  1017. white-space: nowrap;
  1018. text-overflow: ellipsis;
  1019. }
  1020. .iconfont {
  1021. line-height: 100%;
  1022. }
  1023. }
  1024. }
  1025. .content {
  1026. flex: 1;
  1027. overflow: hidden;
  1028. width: 100%;
  1029. display: flex;
  1030. border-radius: 23rpx 23rpx 0rpx 0rpx;
  1031. .menus {
  1032. width: 200rpx;
  1033. height: 100%;
  1034. overflow: hidden;
  1035. background-color: $bg-color-grey;
  1036. .wrapper {
  1037. width: 100%;
  1038. height: 100%;
  1039. .menu {
  1040. display: flex;
  1041. align-items: center;
  1042. justify-content: flex-start;
  1043. padding: 30rpx 20rpx;
  1044. font-size: 26rpx;
  1045. color: $text-color-assist;
  1046. position: relative;
  1047. display: flex;
  1048. align-items: center;
  1049. justify-content: center;
  1050. &:nth-last-child(1) {
  1051. margin-bottom: 230rpx;
  1052. }
  1053. &.current {
  1054. background-color: #ffffff;
  1055. color: $text-color-base;
  1056. }
  1057. .dot {
  1058. position: absolute;
  1059. width: 34rpx;
  1060. height: 34rpx;
  1061. line-height: 34rpx;
  1062. font-size: 22rpx;
  1063. background-color: $bg-color-primary;
  1064. color: #ffffff;
  1065. top: 16rpx;
  1066. right: 10rpx;
  1067. border-radius: 100%;
  1068. text-align: center;
  1069. }
  1070. }
  1071. }
  1072. }
  1073. .goods {
  1074. flex: 1;
  1075. height: 100%;
  1076. overflow: hidden;
  1077. background-color: #ffffff;
  1078. .wrapper {
  1079. width: 100%;
  1080. height: 100%;
  1081. padding: 20rpx;
  1082. .ads {
  1083. height: calc(300 / 550 * 510rpx);
  1084. image {
  1085. width: 100%;
  1086. height: 100%;
  1087. border-radius: 8rpx;
  1088. }
  1089. }
  1090. .list {
  1091. width: 100%;
  1092. font-size: $font-size-base;
  1093. padding-bottom: 800rpx;
  1094. .category {
  1095. width: 100%;
  1096. .title {
  1097. padding: 30rpx 0;
  1098. display: flex;
  1099. align-items: center;
  1100. color: $text-color-base;
  1101. .icon {
  1102. width: 38rpx;
  1103. height: 38rpx;
  1104. margin-left: 10rpx;
  1105. }
  1106. }
  1107. }
  1108. .items {
  1109. display: flex;
  1110. flex-direction: column;
  1111. padding-bottom: -30rpx;
  1112. .good {
  1113. display: flex;
  1114. align-items: center;
  1115. margin-bottom: 30rpx;
  1116. .image {
  1117. width: 160rpx;
  1118. height: 160rpx;
  1119. margin-right: 20rpx;
  1120. border-radius: 8rpx;
  1121. }
  1122. .right {
  1123. flex: 1;
  1124. // height: 160rpx;
  1125. overflow: hidden;
  1126. display: flex;
  1127. flex-direction: column;
  1128. align-items: flex-start;
  1129. justify-content: space-between;
  1130. padding-right: 14rpx;
  1131. .name {
  1132. font-size: $font-size-base;
  1133. margin-bottom: 10rpx;
  1134. }
  1135. .tips {
  1136. width: 100%;
  1137. height: 40rpx;
  1138. line-height: 40rpx;
  1139. overflow: hidden;
  1140. text-overflow: ellipsis;
  1141. white-space: nowrap;
  1142. font-size: $font-size-sm;
  1143. color: $text-color-assist;
  1144. margin-bottom: 10rpx;
  1145. }
  1146. .price_and_action {
  1147. width: 100%;
  1148. display: flex;
  1149. justify-content: space-between;
  1150. align-items: center;
  1151. .price {
  1152. font-size: $font-size-base;
  1153. font-weight: 600;
  1154. color: $bg-color-primary;
  1155. }
  1156. .btn-group {
  1157. display: flex;
  1158. justify-content: space-between;
  1159. align-items: center;
  1160. position: relative;
  1161. .btn {
  1162. padding: 0 20rpx;
  1163. box-sizing: border-box;
  1164. font-size: $font-size-sm;
  1165. height: 44rpx;
  1166. line-height: 44rpx;
  1167. &.property_btn {
  1168. border-radius: 24rpx;
  1169. }
  1170. &.add_btn,
  1171. &.reduce_btn {
  1172. padding: 0;
  1173. width: 44rpx;
  1174. border-radius: 44rpx;
  1175. }
  1176. }
  1177. .dot {
  1178. position: absolute;
  1179. background-color: #ffffff;
  1180. border: 1px solid $bg-color-primary;
  1181. color: $bg-color-primary;
  1182. font-size: $font-size-sm;
  1183. width: 36rpx;
  1184. height: 36rpx;
  1185. line-height: 36rpx;
  1186. text-align: center;
  1187. border-radius: 100%;
  1188. right: -12rpx;
  1189. top: -10rpx;
  1190. }
  1191. .number {
  1192. width: 44rpx;
  1193. height: 44rpx;
  1194. line-height: 44rpx;
  1195. text-align: center;
  1196. }
  1197. }
  1198. }
  1199. }
  1200. }
  1201. }
  1202. }
  1203. }
  1204. }
  1205. }
  1206. .modal-box {
  1207. max-height: 90vh;
  1208. }
  1209. .good-detail-modal {
  1210. width: 100%;
  1211. height: 100%;
  1212. display: flex;
  1213. flex-direction: column;
  1214. .cover {
  1215. height: 320rpx;
  1216. padding: 30rpx 0;
  1217. display: flex;
  1218. justify-content: center;
  1219. align-items: center;
  1220. position: relative;
  1221. .image {
  1222. width: 260rpx;
  1223. height: 260rpx;
  1224. }
  1225. .btn-group {
  1226. position: absolute;
  1227. right: 10rpx;
  1228. top: 30rpx;
  1229. display: flex;
  1230. align-items: center;
  1231. justify-content: space-around;
  1232. image {
  1233. width: 80rpx;
  1234. height: 80rpx;
  1235. }
  1236. }
  1237. }
  1238. .detail {
  1239. width: 100%;
  1240. min-height: 1vh;
  1241. max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
  1242. .wrapper {
  1243. width: 100%;
  1244. height: 100%;
  1245. overflow: hidden;
  1246. .basic {
  1247. padding: 0 20rpx 30rpx;
  1248. display: flex;
  1249. flex-direction: column;
  1250. .name {
  1251. font-size: $font-size-base;
  1252. color: $text-color-base;
  1253. margin-bottom: 10rpx;
  1254. }
  1255. .tips {
  1256. font-size: $font-size-sm;
  1257. color: $text-color-grey;
  1258. }
  1259. }
  1260. .properties {
  1261. width: 100%;
  1262. border-top: 2rpx solid $bg-color-grey;
  1263. padding: 10rpx 30rpx 0;
  1264. display: flex;
  1265. flex-direction: column;
  1266. .property {
  1267. width: 100%;
  1268. display: flex;
  1269. flex-direction: column;
  1270. margin-bottom: 30rpx;
  1271. padding-bottom: -16rpx;
  1272. .title {
  1273. width: 100%;
  1274. display: flex;
  1275. justify-content: flex-start;
  1276. align-items: center;
  1277. margin-bottom: 20rpx;
  1278. .name {
  1279. font-size: 26rpx;
  1280. color: $text-color-base;
  1281. margin-right: 20rpx;
  1282. }
  1283. .desc {
  1284. flex: 1;
  1285. font-size: $font-size-sm;
  1286. color: $color-primary;
  1287. overflow: hidden;
  1288. text-overflow: ellipsis;
  1289. white-space: nowrap;
  1290. }
  1291. }
  1292. .values {
  1293. width: 100%;
  1294. display: flex;
  1295. flex-wrap: wrap;
  1296. .value {
  1297. border-radius: 8rpx;
  1298. background-color: $bg-color-grey;
  1299. padding: 16rpx 30rpx;
  1300. font-size: 26rpx;
  1301. color: $text-color-assist;
  1302. margin-right: 16rpx;
  1303. margin-bottom: 16rpx;
  1304. &.default {
  1305. background-color: $bg-color-primary;
  1306. color: $text-color-white;
  1307. }
  1308. }
  1309. }
  1310. }
  1311. }
  1312. }
  1313. }
  1314. .action {
  1315. display: flex;
  1316. align-items: center;
  1317. justify-content: space-between;
  1318. background-color: $bg-color-grey;
  1319. height: 120rpx;
  1320. padding: 0 26rpx;
  1321. .left {
  1322. flex: 1;
  1323. display: flex;
  1324. flex-direction: column;
  1325. justify-content: center;
  1326. margin-right: 20rpx;
  1327. overflow: hidden;
  1328. .price {
  1329. font-size: $font-size-lg;
  1330. color: $text-color-base;
  1331. }
  1332. .props {
  1333. color: $text-color-assist;
  1334. font-size: 24rpx;
  1335. width: 100%;
  1336. overflow: hidden;
  1337. text-overflow: ellipsis;
  1338. white-space: nowrap;
  1339. }
  1340. }
  1341. .btn-group {
  1342. display: flex;
  1343. align-items: center;
  1344. justify-content: space-around;
  1345. .number {
  1346. font-size: $font-size-base;
  1347. width: 44rpx;
  1348. height: 44rpx;
  1349. line-height: 44rpx;
  1350. text-align: center;
  1351. }
  1352. .btn {
  1353. padding: 0;
  1354. font-size: $font-size-base;
  1355. width: 44rpx;
  1356. height: 44rpx;
  1357. line-height: 44rpx;
  1358. border-radius: 100%;
  1359. }
  1360. }
  1361. }
  1362. .add-to-cart-btn {
  1363. display: flex;
  1364. justify-content: center;
  1365. align-items: center;
  1366. background-color: $color-primary;
  1367. color: $text-color-white;
  1368. font-size: $font-size-base;
  1369. height: 80rpx;
  1370. border-radius: 0 0 12rpx 12rpx;
  1371. }
  1372. }
  1373. .cart-box {
  1374. // position: absolute;
  1375. // bottom: 30rpx;
  1376. // left: 30rpx;
  1377. // right: 30rpx;
  1378. height: 96rpx;
  1379. border-radius: 48rpx;
  1380. box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
  1381. background-color: #000;
  1382. display: flex;
  1383. align-items: center;
  1384. justify-content: space-between;
  1385. z-index: 9999;
  1386. .cart-img {
  1387. width: 50rpx;
  1388. height: 47rpx;
  1389. position: relative;
  1390. // margin-top: -48rpx;
  1391. }
  1392. .pay-btn {
  1393. height: 100%;
  1394. padding: 0 30rpx;
  1395. color: #FFFFFF;
  1396. border-radius: 0 50rpx 50rpx 0;
  1397. display: flex;
  1398. align-items: center;
  1399. font-size: $font-size-base;
  1400. }
  1401. .mark {
  1402. padding-left: 46rpx;
  1403. margin-right: 30rpx;
  1404. position: relative;
  1405. .tag {
  1406. background-color: $color-warning;
  1407. color: $text-color-white;
  1408. display: flex;
  1409. justify-content: center;
  1410. align-items: center;
  1411. font-size: $font-size-sm;
  1412. position: absolute;
  1413. right: -13rpx;
  1414. top: -20rpx;
  1415. border-radius: 100%;
  1416. padding: 4rpx;
  1417. width: 27rpx;
  1418. height: 27rpx;
  1419. opacity: .9;
  1420. }
  1421. }
  1422. .price {
  1423. flex: 1;
  1424. color: $text-color-base;
  1425. }
  1426. }
  1427. .cart-popup {
  1428. .top {
  1429. background-color: $bg-color-primary;
  1430. color: $color-primary;
  1431. padding: 10rpx 30rpx;
  1432. font-size: 24rpx;
  1433. text-align: right;
  1434. }
  1435. .cart-list {
  1436. background-color: #FFFFFF;
  1437. width: 100%;
  1438. overflow: hidden;
  1439. min-height: 1vh;
  1440. max-height: 60vh;
  1441. .wrapper {
  1442. height: 100%;
  1443. display: flex;
  1444. flex-direction: column;
  1445. padding: 0 30rpx;
  1446. margin-bottom: 156rpx;
  1447. .item {
  1448. display: flex;
  1449. justify-content: space-between;
  1450. align-items: center;
  1451. padding: 30rpx 0;
  1452. position: relative;
  1453. &::after {
  1454. content: ' ';
  1455. position: absolute;
  1456. bottom: 0;
  1457. left: 0;
  1458. width: 100%;
  1459. background-color: $border-color;
  1460. height: 2rpx;
  1461. transform: scaleY(.6);
  1462. }
  1463. .left {
  1464. flex: 1;
  1465. display: flex;
  1466. flex-direction: column;
  1467. overflow: hidden;
  1468. margin-right: 30rpx;
  1469. .name {
  1470. font-size: $font-size-sm;
  1471. color: $text-color-base;
  1472. }
  1473. .props {
  1474. color: $text-color-assist;
  1475. font-size: 24rpx;
  1476. overflow: hidden;
  1477. text-overflow: ellipsis;
  1478. white-space: nowrap;
  1479. }
  1480. }
  1481. .center {
  1482. margin-right: 120rpx;
  1483. font-size: $font-size-base;
  1484. }
  1485. .right {
  1486. display: flex;
  1487. align-items: center;
  1488. justify-content: space-between;
  1489. .btn {
  1490. width: 46rpx;
  1491. height: 46rpx;
  1492. border-radius: 100%;
  1493. padding: 0;
  1494. text-align: center;
  1495. line-height: 46rpx;
  1496. }
  1497. .number {
  1498. font-size: $font-size-base;
  1499. width: 46rpx;
  1500. height: 46rpx;
  1501. text-align: center;
  1502. line-height: 46rpx;
  1503. }
  1504. }
  1505. }
  1506. }
  1507. }
  1508. }
  1509. .back-button {
  1510. width: 30rpx;
  1511. height: 30rpx;
  1512. border-right: 4rpx solid #fff;
  1513. border-bottom: 4rpx solid #fff;
  1514. transform: rotate(135deg);
  1515. margin-left: 10rpx;
  1516. display: inline-block;
  1517. position: relative;
  1518. }
  1519. .newsTitle {
  1520. display: flex;
  1521. align-items: center;
  1522. }
  1523. .mode {
  1524. position: fixed;
  1525. width: 100%;
  1526. height: 100%;
  1527. left: 0;
  1528. top: 0;
  1529. background: rgba(33, 33, 33, 0.8);
  1530. z-index: 99999;
  1531. display: flex;
  1532. align-items: flex-end;
  1533. }
  1534. .mode-1 {
  1535. width: 100%;
  1536. height: 840rpx;
  1537. background: #FFF;
  1538. display: flex;
  1539. flex-direction: column;
  1540. gap: 20rpx;
  1541. // padding: 30rpx;
  1542. box-sizing: border-box;
  1543. overflow: auto;
  1544. /* 添加这个属性使容器可以滚动 */
  1545. }
  1546. // 规格弹窗
  1547. .sel-mode-1 {
  1548. width: 100%;
  1549. // height: 440rpx;
  1550. background: #FFF;
  1551. display: flex;
  1552. flex-direction: column;
  1553. gap: 20rpx;
  1554. box-sizing: border-box;
  1555. overflow: auto;
  1556. z-index: 99999;
  1557. padding: 20rpx 20rpx 60rpx 20rpx;
  1558. box-sizing: border-box;
  1559. position: relative;
  1560. }
  1561. .close {
  1562. text-align: right;
  1563. font-size: 40rpx;
  1564. }
  1565. .sel-2 {
  1566. display: flex;
  1567. align-items: center;
  1568. gap: 20rpx;
  1569. .nexbox1 {
  1570. flex: 1;
  1571. text-overflow: ellipsis;
  1572. white-space: nowrap;
  1573. color: $text-color-assist;
  1574. }
  1575. }
  1576. .sel-3 {
  1577. display: flex;
  1578. flex-direction: column;
  1579. gap: 10rpx;
  1580. }
  1581. .sel-4 {
  1582. display: flex;
  1583. align-items: center;
  1584. gap: 10rpx;
  1585. }
  1586. .sel-5 {
  1587. width: 80rpx;
  1588. height: 40rpx;
  1589. box-sizing: border-box;
  1590. display: flex;
  1591. align-items: center;
  1592. justify-content: center;
  1593. font-size: 24rpx;
  1594. background: #999999;
  1595. color: #FFF;
  1596. padding: 8rpx;
  1597. border-radius: 8rpx;
  1598. }
  1599. .sel-6 {
  1600. display: flex;
  1601. align-items: center;
  1602. justify-content: space-between;
  1603. }
  1604. .sel-btn {
  1605. display: flex;
  1606. align-items: center;
  1607. justify-content: flex-end;
  1608. }
  1609. .sel-btn1 {
  1610. width: 110px;
  1611. height: 60rpx;
  1612. display: flex;
  1613. align-items: center;
  1614. justify-content: center;
  1615. background: rgba(255, 103, 2, 1);
  1616. color: #FFF;
  1617. font-size: 30rpx;
  1618. border-radius: 10rpx;
  1619. }
  1620. .neximg {
  1621. width: 160rpx;
  1622. height: 160rpx;
  1623. margin-right: 20rpx;
  1624. border-radius: 8rpx;
  1625. /* 保持图片等比例缩放,并且不会裁切 */
  1626. }
  1627. .btn-group {
  1628. display: flex;
  1629. justify-content: space-between;
  1630. align-items: center;
  1631. position: relative;
  1632. .btn {
  1633. padding: 0 20rpx;
  1634. box-sizing: border-box;
  1635. font-size: $font-size-sm;
  1636. height: 44rpx;
  1637. line-height: 44rpx;
  1638. &.property_btn {
  1639. border-radius: 24rpx;
  1640. }
  1641. &.add_btn,
  1642. &.reduce_btn {
  1643. padding: 0;
  1644. width: 44rpx;
  1645. border-radius: 44rpx;
  1646. }
  1647. }
  1648. .dot {
  1649. position: absolute;
  1650. background-color: #ffffff;
  1651. border: 1px solid $bg-color-primary;
  1652. color: $bg-color-primary;
  1653. font-size: $font-size-sm;
  1654. width: 36rpx;
  1655. height: 36rpx;
  1656. line-height: 36rpx;
  1657. text-align: center;
  1658. border-radius: 100%;
  1659. right: -12rpx;
  1660. top: -10rpx;
  1661. }
  1662. .number {
  1663. width: 44rpx;
  1664. height: 44rpx;
  1665. line-height: 44rpx;
  1666. text-align: center;
  1667. }
  1668. }
  1669. .nexbox-txt3 {
  1670. color: $bg-color-primary;
  1671. }
  1672. .mode-box {
  1673. width: 100%;
  1674. display: flex;
  1675. flex-direction: column;
  1676. gap: 20rpx;
  1677. padding: 30rpx;
  1678. box-sizing: border-box;
  1679. }
  1680. .items {
  1681. display: flex;
  1682. flex-direction: column;
  1683. padding-bottom: -30rpx;
  1684. .good {
  1685. display: flex;
  1686. align-items: center;
  1687. margin-bottom: 30rpx;
  1688. .image {
  1689. width: 160rpx;
  1690. height: 160rpx;
  1691. margin-right: 20rpx;
  1692. border-radius: 8rpx;
  1693. }
  1694. .right {
  1695. flex: 1;
  1696. // height: 160rpx;
  1697. overflow: hidden;
  1698. display: flex;
  1699. flex-direction: column;
  1700. align-items: flex-start;
  1701. justify-content: space-between;
  1702. padding-right: 14rpx;
  1703. .name {
  1704. font-size: $font-size-base;
  1705. margin-bottom: 10rpx;
  1706. }
  1707. .tips {
  1708. width: 100%;
  1709. height: 40rpx;
  1710. line-height: 40rpx;
  1711. overflow: hidden;
  1712. text-overflow: ellipsis;
  1713. white-space: nowrap;
  1714. font-size: $font-size-sm;
  1715. color: $text-color-assist;
  1716. margin-bottom: 10rpx;
  1717. }
  1718. .price_and_action {
  1719. width: 100%;
  1720. display: flex;
  1721. justify-content: space-between;
  1722. align-items: center;
  1723. .price {
  1724. font-size: $font-size-base;
  1725. font-weight: 600;
  1726. color: $bg-color-primary;
  1727. }
  1728. .btn-group {
  1729. display: flex;
  1730. justify-content: space-between;
  1731. align-items: center;
  1732. position: relative;
  1733. .btn {
  1734. padding: 0 20rpx;
  1735. box-sizing: border-box;
  1736. font-size: $font-size-sm;
  1737. height: 44rpx;
  1738. line-height: 44rpx;
  1739. &.property_btn {
  1740. border-radius: 24rpx;
  1741. }
  1742. &.add_btn,
  1743. &.reduce_btn {
  1744. padding: 0;
  1745. width: 44rpx;
  1746. border-radius: 44rpx;
  1747. }
  1748. }
  1749. .dot {
  1750. position: absolute;
  1751. background-color: #ffffff;
  1752. border: 1px solid $bg-color-primary;
  1753. color: $bg-color-primary;
  1754. font-size: $font-size-sm;
  1755. width: 36rpx;
  1756. height: 36rpx;
  1757. line-height: 36rpx;
  1758. text-align: center;
  1759. border-radius: 100%;
  1760. right: -12rpx;
  1761. top: -10rpx;
  1762. }
  1763. .number {
  1764. width: 44rpx;
  1765. height: 44rpx;
  1766. line-height: 44rpx;
  1767. text-align: center;
  1768. }
  1769. }
  1770. }
  1771. }
  1772. }
  1773. }
  1774. .mode-clear {
  1775. padding: 30rpx;
  1776. box-sizing: border-box;
  1777. position: sticky;
  1778. z-index: 99;
  1779. top: 0;
  1780. display: flex;
  1781. justify-content: space-between;
  1782. align-items: center;
  1783. background: #FFF;
  1784. border-bottom: 1px solid burlywood;
  1785. }
  1786. .mode-txt {
  1787. display: flex;
  1788. align-items: center;
  1789. gap: 8rpx;
  1790. }
  1791. .mode-txt1 {
  1792. font-weight: 500;
  1793. font-size: 32rpx;
  1794. }
  1795. // 点菜评价切换
  1796. .let-box {
  1797. display: flex;
  1798. align-items: center;
  1799. gap: 60rpx;
  1800. padding: 20rpx;
  1801. box-sizing: border-box;
  1802. }
  1803. .let-box1 {
  1804. display: flex;
  1805. flex-direction: column;
  1806. align-items: center;
  1807. justify-content: center;
  1808. gap: 10rpx;
  1809. }
  1810. .let-line {
  1811. border-radius: 6rpx;
  1812. width: 40rpx;
  1813. height: 10rpx;
  1814. }
  1815. .let-txt {
  1816. overflow-wrap: break-word;
  1817. color: rgba(20, 20, 20, 1);
  1818. font-size: 28rpx;
  1819. font-weight: normal;
  1820. text-align: left;
  1821. white-space: nowrap;
  1822. line-height: 40rpx;
  1823. }
  1824. .actave {
  1825. background-color: rgba(255, 103, 2, 1);
  1826. }
  1827. .actave1 {
  1828. color: rgba(255, 103, 2, 1);
  1829. }
  1830. .font_color {
  1831. color: $bg-color-primary;
  1832. }
  1833. .evaluate-list {
  1834. padding: 30rpx 0 0 0;
  1835. background-color: #fff;
  1836. }
  1837. .evaluate-list .nav-tab1 {
  1838. font-size: 24rpx;
  1839. color: #282828;
  1840. padding: 30rpx;
  1841. background-color: #fff;
  1842. border-bottom: 1rpx solid #f5f5f5;
  1843. }
  1844. .evaluate-list .generalComment {
  1845. padding: 0 30rpx;
  1846. margin-top: 1rpx;
  1847. background-color: #fff;
  1848. font-size: 28rpx;
  1849. color: #808080;
  1850. }
  1851. .evaluate-list .generalComment .evaluate {
  1852. margin-right: 7rpx;
  1853. color: #333333;
  1854. font-size: 28rpx;
  1855. }
  1856. .evaluate-list .nav-tab1 .item {
  1857. font-size: 24rpx;
  1858. color: #282828;
  1859. border-radius: 27rpx;
  1860. height: 54rpx;
  1861. padding: 0 20rpx;
  1862. background-color: #f4f4f4;
  1863. line-height: 54rpx;
  1864. margin-right: 17rpx;
  1865. }
  1866. .evaluate-list .nav-tab1 .item.bg-color {
  1867. color: #fff;
  1868. background-color: $bg-color-primary;
  1869. }
  1870. .noCommodity {
  1871. margin-top: 32%;
  1872. }
  1873. .default_txt {
  1874. font-size: 26rpx;
  1875. color: #999;
  1876. text-align: center;
  1877. }
  1878. .swiper {
  1879. display: flex;
  1880. /* 使用flex布局 */
  1881. animation: scrollRight 10s linear infinite;
  1882. /* 应用动画 */
  1883. }
  1884. .swiper-item {
  1885. flex-shrink: 0;
  1886. /* 不允许缩小 */
  1887. width: 100%;
  1888. /* 每个item占满一行 */
  1889. }
  1890. @keyframes scrollRight {
  1891. from {
  1892. transform: translateX(100%);
  1893. }
  1894. /* 从右向左移动 */
  1895. to {
  1896. transform: translateX(-100%);
  1897. }
  1898. /* 移出视图 */
  1899. }
  1900. </style>