index.vue 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516
  1. <template>
  2. <view class="index-box">
  3. <!-- <image class="bg-img" src="@/static/img/index/index-bg.png" mode="scaleToFill"></image> -->
  4. <view class="nav-z">
  5. <Nav class="" :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
  6. <template>
  7. <view slot="custom" class="align-items-center" @click="toSelectSchool()">
  8. <!-- <uni-icons type="location-filled" size="20"></uni-icons> -->
  9. <image class="wh-40" src="@/static/img/index/dw.png" mode=""></image>
  10. <view class="fs-32 maxw-220 fw-600 ml-10 text-overflow-ellipsis-one">
  11. {{schoolData.school_name||''}}
  12. </view>
  13. <image class="nav-icon ml-10" src="@/static/img/index/index-right.png" mode="aspectFit"></image>
  14. </view>
  15. </template>
  16. </Nav>
  17. </view>
  18. <!-- 搜索 -->
  19. <view class="index-search box-border-box mt-20" @click="toUrl(1)"
  20. :style="[{'top': BarH + 'px','background':bgckgroundSearch}]">
  21. <view class="index-search-box box-border-box align-items-center bgc-f">
  22. <image class="wh27" src="@/static/img/index/ss.png" mode=""></image>
  23. <view class="fs-24 fc-a ml-10">搜索店铺名称或商品名称</view>
  24. <view class="fs-28 fc-f index-search-box-buttom">搜索</view>
  25. </view>
  26. </view>
  27. <view class="index-box-1">
  28. <!-- 轮播 -->
  29. <view class="box-border-box plr-24 mb-32">
  30. <uni-swiper-dot :info="bannerList" mode="dot" :dotsStyles="dotStyle" :current="current">
  31. <swiper class="swiper" @change="change" :autoplay='true' :circular='true' interval="4000">
  32. <swiper-item v-for="(item,i) in bannerList" :key="i">
  33. <image class="swiper-item" :src="item.image" mode="aspectFill" @click="bannerClock(item)">
  34. </image>
  35. </swiper-item>
  36. </swiper>
  37. </uni-swiper-dot>
  38. </view>
  39. <!-- 导航 -->
  40. <view class="box-border-box mb-22 plr-24">
  41. <view class="nav-list align-items-flex-end flex-wrap-wrap box-border-box pt-33 bgc-f b-rad-20">
  42. <view class="nav-list-item" v-for="(item,i) in navList" :key="i" @click="toUrl(item.type)"
  43. v-show="item.appletAudit == 0">
  44. <button v-if="item.type === 9" class="item-box-button" :plain="true" open-type="contact"
  45. :bindcontact="handleContact"></button>
  46. <view class="flex-direction align-items-center title-img-box">
  47. <image class="title-img mb-16" :src="item.img" mode="scaleToFill"></image>
  48. <view class="fs-24 fc-0 text-align-center">{{item.name}}</view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 通知 -->
  54. <view class="box-border-box plrb-24">
  55. <view class="msg-box align-items-center box-border-box">
  56. <image class="rb-bg" src="@/static/img/index/rb-bg.png" mode=""></image>
  57. <image @click="toUrl(7)" class="xyrb-img mr-30 z-2" src="@/static/img/index/xyrb.png" mode=""></image>
  58. <view class="flex-direction flex-justify-space z-2 h-100">
  59. <view class="align-items-center" v-for="(item,i) in noticeList" :key="i"
  60. @click="toNoticeDet(item)">
  61. <view class="serial-num mr-10 fs-18 fc-f text-align-center"
  62. :class="i + 1 === 1?'bgc-F5541E':i + 1 === 2?'bgc-FF5555':'bgc-4db8ff'">
  63. {{ i + 1}}
  64. </view>
  65. <view class="fs-24 fc-0 text-overflow-ellipsis-one max-w-358">
  66. {{item.content}}
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. <!-- 明星店铺 -->
  73. <view class="plr-30 box-border-box mb-20 align-items-center flex-justify-space">
  74. <view class="flex-1 mr-20 b-rad-20 mxdq-box box-border-box">
  75. <image class="tj-bg" src="@/static/img/index/tj-bg.png" mode=""></image>
  76. <image class="mxdp mb-24 z-2" src="@/static/img/index/mxdp.png" mode=""></image>
  77. <view class="align-items-center flex-wrap-wrap z-2">
  78. <image v-for="(item,index) in shopHomeData" class="tj-item mr-12 mb-12 b-rad-12"
  79. :src="item.shop_logo" mode="" @click="toShop(item)"></image>
  80. </view>
  81. </view>
  82. <image class="xzkn-img" src="@/static/img/index/xzkn.png" mode="" @click="toUrl(4)"></image>
  83. </view>
  84. <!-- 限时秒杀 -->
  85. <view class="spike-box box-border-box mb-20" v-if="seckillGoodsList.length > 0">
  86. <view class="xsms-box box-border-box">
  87. <image class="tj-bg" src="@/static/img/index/tj-bg.png" mode=""></image>
  88. <view class="align-items-center flex-justify-space z-2 mb-26 pr-24 box-border-box">
  89. <image class="xsms-img" src="@/static/img/index/xsms.png" mode=""></image>
  90. <view class="align-items-center" @click="goAllSeckill">
  91. <view class="fs-24 fc-9 mr-6">
  92. 更多
  93. </view>
  94. <uni-icons type="right" size="17" color="#999"></uni-icons>
  95. </view>
  96. </view>
  97. <swiper class="ms-swiper" circular :indicator-dots="false" :autoplay="true">
  98. <swiper-item>
  99. <view class="flex-wrap-wrap">
  100. <view class="w-31 mr-14 mb-32" v-for="(item,index) in seckillGoodsList" :key="index"
  101. @click="toShop(item)" v-show="index + 1 < 7">
  102. <view class="" v-if="index + 1 < 7">
  103. <image class="xsms-item-img mb-18 b-rad-12" :src="item.goods_image"
  104. mode="aspectFill"></image>
  105. <view class="max-w-200 fs-24 fc-0 text-overflow-ellipsis-one">
  106. {{item.goods_name}}
  107. </view>
  108. <view class="display-flex flex-justify-space">
  109. <view class="align-items-center">
  110. <view class="fs-24 fc-F43D04 mr-8">
  111. ¥ <text class="fs-28 fc-F43D04">{{item.seckill_money}}</text>
  112. </view>
  113. <view class="fs-20 fc-a text-line-through">
  114. ¥{{item.line_price}}
  115. </view>
  116. </view>
  117. <image class="b-img" src="@/static/img/index/b.png" mode=""></image>
  118. </view>
  119. </view>
  120. </view>
  121. </view>
  122. </swiper-item>
  123. <swiper-item>
  124. <view class="flex-wrap-wrap">
  125. <view class="w-31 mr-14 mb-32" v-for="(item,index) in seckillGoodsList" :key="index"
  126. @click="toShop(item)" v-show="index + 1 > 6">
  127. <view class="" v-if="index + 1 > 6">
  128. <image class="xsms-item-img mb-18 b-rad-12" :src="item.goods_image"
  129. mode="aspectFill"></image>
  130. <view class="max-w-200 fs-24 fc-0 text-overflow-ellipsis-one">
  131. {{item.goods_name}}
  132. </view>
  133. <view class="display-flex flex-justify-space">
  134. <view class="align-items-center">
  135. <view class="fs-24 fc-F43D04 mr-8">
  136. ¥ <text class="fs-28 fc-F43D04">{{item.seckill_money}}</text>
  137. </view>
  138. <view class="fs-20 fc-a text-line-through">
  139. ¥{{item.line_price}}
  140. </view>
  141. </view>
  142. <image class="b-img" src="@/static/img/index/b.png" mode=""></image>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. </swiper-item>
  148. </swiper>
  149. </view>
  150. </view>
  151. <!-- 全网最低/优质团购 -->
  152. <view class="spike-box box-border-box b-rad-20">
  153. <view class="yztg-box p-30 box-border-box">
  154. <image class="tj-bg" src="@/static/img/index/tj-bg.png" mode=""></image>
  155. <image class="qwzd-img z-2" src="@/static/img/index/qwzd.png" mode=""></image>
  156. <view class="z-2 ptp-24 b-b-F0 align-items-center flex-justify-space mb-12"
  157. v-for="(item,index) in group_goods_List" :key="index" @click="goGroup(item)">
  158. <view class="align-items-center">
  159. <image v-show="index === 0" class="pm-img mr-20" src="@/static/img/index/1.png" mode="">
  160. </image>
  161. <image v-show="index === 1" class="pm-img mr-20" src="@/static/img/index/2.png" mode="">
  162. </image>
  163. <image v-show="index === 2" class="pm-img mr-20" src="@/static/img/index/3.png" mode="">
  164. </image>
  165. <view class="zk-box text-align-center mr-10">
  166. <image class="zk-img" src="@/static/img/index/zk-img.png" mode=""></image>
  167. <view class="fs-20 fc-f z-2">
  168. {{((Number(item.seckill_money)/Number(item.line_price))*10).toFixed(1)}}折
  169. </view>
  170. </view>
  171. <view class="fs-24 fc-0 max-w-252 text-overflow-ellipsis-one">
  172. {{item.title}}
  173. </view>
  174. </view>
  175. <view class="align-items-center">
  176. <view class="fs-24 fc-F43D04 fw-b mr-10">
  177. ¥ <text class="fs-28 fc-F43D04 fw-b">{{item.seckill_money}}</text>
  178. </view>
  179. <view class="fs-20 fc-a text-line-through">
  180. ¥{{item.line_price}}
  181. </view>
  182. </view>
  183. </view>
  184. <view class="text-align-center fs-24 fc-9 z-2" @click="goTogrup">
  185. 查看更多
  186. </view>
  187. </view>
  188. </view>
  189. <!-- 类型选择 -->
  190. <view class="type-list-box box-border-box display-flex" :style="{'top': (BarH+indexSearchHeight) + 'px'}">
  191. <view class="type-item-box view-nowrap" v-for="(item,i) in typeList" :key="i"
  192. @click="selectType(item.id)">
  193. <view class="" :class="category_id==item.id?'fs-32 fc-3BB5FE fw-b':'fc-94969A fs-28'">
  194. {{item.name}}
  195. </view>
  196. <view class="type-list-hr" v-show="category_id==item.id"></view>
  197. </view>
  198. </view>
  199. <!-- 商品列表 -->
  200. <view class="" v-if="goodsList.length<=0">
  201. <enBlankVue></enBlankVue>
  202. </view>
  203. <view class="bot-list-box box-border-box" v-else>
  204. <view class="goos-list-box box-border-box" v-for="(item,i) in goodsList" :key="i" @click="toShop(item)">
  205. <view class="display-flex p-b-20 mb-26 b-b-EFF2F5">
  206. <view class="left-img-box mr-24">
  207. <image class="left-img" :src="item.shop_logo" mode="aspectFill"></image>
  208. <view class="status-box fc-f" v-if="item.status != 1">
  209. 休息中
  210. </view>
  211. </view>
  212. <view class="flex-1">
  213. <view class="align-items-center mb-8">
  214. <view class="right-box-title fs-28 fw-b text-overflow-ellipsis-one">{{item.shop_name}}
  215. </view>
  216. <image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
  217. </view>
  218. <view class="align-items-center mb-12">
  219. <image class="img-x mr-8" src="@/static/img/index/index-x.png" mode=""></image>
  220. <view class="fs-24 fw-600 fc-FD5D05 mr-18">{{item.shop_score}}</view>
  221. <view class="fc-0 fs-24 mr-12">预计{{item.delivery_time}}分钟 | </view>
  222. <view class="fc-0 fs-24 mr-12">{{item.shop_sales}}人购买</view>
  223. </view>
  224. <view class="align-items-center flex-wrap-wrap">
  225. <view class="quan-list b-F5541E box-border-box bgc-f align-items-center b-rad-5 mr-10"
  226. v-for="(info1,index1) in item.coupon" :key="index1">
  227. <image class="quan-list-1" src="@/static/img/index/q.png" mode=""></image>
  228. <view class="quan-list-2 fs-24 fc-F5531E">{{info1.money}}元</view>
  229. </view>
  230. </view>
  231. </view>
  232. </view>
  233. <view class="goods-items-list display-flex">
  234. <view class="goods-items-list-box" v-for="(info2,index2) in item.goods" :key="index2">
  235. <view v-show="info2.label === 3" class="label-box text-align-center bgc-F5811E fs-24 fc-f">
  236. 推荐</view>
  237. <view v-show="info2.label === 2" class="label-box text-align-center bgc-FF5555 fs-24 fc-f">
  238. 新品</view>
  239. <view v-show="info2.label === 1" class="label-box text-align-center bgc-48D3C5 fs-24 fc-f">
  240. 折扣</view>
  241. <view v-show="info2.label === 4" class="label-box text-align-center bgc-4db8ff fs-24 fc-f">
  242. 招牌</view>
  243. <image class="mb-18" :src="info2.goods_image" mode="aspectFill"></image>
  244. <view class="mb-12 fw-600 text-overflow-ellipsis-one fs-24">{{info2.goods_name}}</view>
  245. <view class="">
  246. <span class="fs-24 fc-FD5D05 fw-b">¥</span>
  247. <span class="fs-32 fc-FD5D05 fw-b">{{info2.price}}</span>
  248. </view>
  249. </view>
  250. </view>
  251. </view>
  252. <view class="pt-40 flex-direction align-items-center" v-if="goodsList.length === total">
  253. <view class="fs-32 fc-0 fw-b">
  254. 小主都到这里了
  255. </view>
  256. <view class="fs-32 fc-0 fw-b mb-26">
  257. 还没有找到满意的店铺吗?
  258. </view>
  259. <view class="fs-24 fc-0 mb-32">
  260. 可以提交你意见与反馈哟。我们一定尽快努力达成!
  261. </view>
  262. <view class="list-but align-items-center flex-justify-center bgc-5CC2FF" @click="goFeedback">
  263. <view class="fs-28 fc-f mr-10">
  264. 去提交
  265. </view>
  266. <view class="sj-fff"></view>
  267. </view>
  268. </view>
  269. </view>
  270. </view>
  271. <uni-popup ref="popup" type="center" border-radius="10px 10px 10px 10px" :is-mask-click="false">
  272. <view class="roll-pop">
  273. <!-- <image class="lq-bg" src="@/static/img/index/lq-bg.png" mode=""></image> -->
  274. <image class="tc-top" src="@/static/img/index/tc-top.png" mode=""></image>
  275. <view class="coupon-box">
  276. <image class="tc-content" src="@/static/img/index/tc-content.png" mode=""></image>
  277. <view class="item-box display-flex" v-for="(item,index) in couponData" :key="index">
  278. <view class="item-right flex-direction flex-justify-center flex-1 bgc-FCE7E2">
  279. <view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fc-3 fw-600">
  280. {{item.name}}
  281. </view>
  282. <view class="fs-22 fc-6 mb-12">
  283. 有效时间:{{item.time_type_str}}
  284. </view>
  285. <view class="fs-22 fc-6">
  286. 券类型:{{item.scene == 1?'外卖卷':'代取卷'}}
  287. </view>
  288. </view>
  289. <view class="item-hr"></view>
  290. <view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
  291. <view class="align-items-center">
  292. <view class="fs-24 fw-600 fc-FB3D03">¥</view>
  293. <view class="fs-48 fw-600 fc-FB3D03">{{item.money}}</view>
  294. </view>
  295. <view class="fs-22 fc-6 mb-4">
  296. 需满{{item.full_money}}元
  297. </view>
  298. <view class="but-box fs-26 fc-f" @click="receive(item,index)">立即领取</view>
  299. <view class="ball"></view>
  300. <view class="ball-two"></view>
  301. </view>
  302. </view>
  303. </view>
  304. <image class="tc-bot" src="@/static/img/index/tc-bot.png" mode=""></image>
  305. <uni-icons @click="gbPOp" class="pop-gb" color='#fff' type="close" size="30"></uni-icons>
  306. </view>
  307. </uni-popup>
  308. <uni-popup ref="popupNotice" type="center" border-radius="10px 10px 10px 10px" :is-mask-click="false">
  309. <view class="p-20 box-sizing-border bgc-f b-rad-20 w-80-vw h-60-vh flex-direction">
  310. <view class="text-align-center fw-600 fs-30 mb-20">
  311. 公告通知
  312. </view>
  313. <scroll-view :scroll-y="true" class="scroll-view-css mb-24" @scrolltolower="scrolltolower">
  314. <view class="fs-28" v-html="pop_notice.content"></view>
  315. </scroll-view>
  316. <view class="align-items-center">
  317. <view class="flex-1 but mr-24 fs-30 fc-f b-rad-200 text-align-center bgc-41ABF5"
  318. @click="goToNotice">
  319. 查看详情
  320. </view>
  321. <view class="flex-1 but fs-30 fc-3 b-rad-200 text-align-center b-r-ccc" @click="gbNoticePop">
  322. 我知道了
  323. </view>
  324. </view>
  325. </view>
  326. </uni-popup>
  327. </view>
  328. </template>
  329. <script>
  330. import {
  331. alumniHeatList
  332. } from '@/api/alumni.js'
  333. import enBlankVue from "@/components/en-utils/en-blank/en-blank.vue";
  334. import tools from "@/service/tools";
  335. import {
  336. getNotice,
  337. getBanner,
  338. commonApplet,
  339. commonPopNotice
  340. } from '@/api/common.js';
  341. import {
  342. getSeckillGoods,
  343. seckillGroupGoods
  344. } from '@/api/seckill.js'
  345. import {
  346. getTakeaway
  347. } from '@/api/category.js';
  348. import {
  349. getGoodsList
  350. } from '@/api/goods.js';
  351. import {
  352. couponHome,
  353. receiveCoupon
  354. } from '@/api/coupon.js'
  355. import {
  356. shopInfo,
  357. shopHome
  358. } from "@/api/shop.js"
  359. import {
  360. membeRmessage
  361. } from "@/api/member.js"
  362. export default {
  363. components: {
  364. enBlankVue
  365. },
  366. data() {
  367. return {
  368. BarH: 0,
  369. bgckgroundBox: 'transparent',
  370. bgckgroundSearch: '',
  371. bgckgroundType: '',
  372. navList: [{
  373. name: "外卖",
  374. img: require('@/static/img/index/index-wm.png'),
  375. type: 2
  376. },
  377. {
  378. name: "快递代取",
  379. img: require('@/static/img/index/index-dq.png'),
  380. type: 3
  381. },
  382. {
  383. name: "校友圈",
  384. img: require('@/static/img/index/index-xyq.png'),
  385. type: 7
  386. },
  387. {
  388. name: "特价团购",
  389. img: require('@/static/img/index/index-tg.png'),
  390. type: 5
  391. },
  392. {
  393. name: "领券中心",
  394. img: require('@/static/img/index/index-lqzx.png'),
  395. type: 6
  396. },
  397. {
  398. name: "跑腿代拿",
  399. img: require('@/static/img/index/index-ptdn.png'),
  400. type: 10
  401. },
  402. {
  403. name: "实习岗位",
  404. img: require('@/static/img/index/index-sxgw.png'),
  405. type: 8
  406. },
  407. {
  408. name: "平台客服",
  409. img: require('@/static/img/index/index-ptkf.png'),
  410. type: 9
  411. },
  412. ],
  413. schoolData: {
  414. school_name: '',
  415. },
  416. noticeList: [],
  417. bannerList: [],
  418. seckillGoodsList: [], // 秒杀商品
  419. group_goods_List: [], //团购秒杀
  420. typeList: [], //分类数组
  421. category_id: 0, //分类id
  422. goodsList: [],
  423. total: 0,
  424. page: 1,
  425. couponData: [],
  426. indexSearchHeight: '',
  427. dotStyle: {
  428. width: 6,
  429. bottom: 6,
  430. backgroundColor: 'rgba(51, 51, 51,0.3)',
  431. border: '1px rgba(0,0,0,0) solid',
  432. color: '#fff',
  433. selectedBackgroundColor: 'rgba(79, 179, 239,0.9)',
  434. selectedBorder: '1px rgba(0,0,0,0) solid'
  435. },
  436. current: 0,
  437. pop_notice: {
  438. content: '' // 公告通知
  439. },
  440. popType: true,
  441. shopHomeData: {}
  442. }
  443. },
  444. onShow() {
  445. let lon = uni.getStorageSync('lon');
  446. let lat = uni.getStorageSync('lat');
  447. if (!lon || !lat) {
  448. uni.getLocation({
  449. type: "gcj02",
  450. success: (res) => {
  451. if (res.errMsg === 'getLocation:ok') {
  452. uni.setStorageSync('lon', res.longitude);
  453. uni.setStorageSync('lat', res.latitude);
  454. } else {
  455. tools.error('位置授权失败,请检查是否开始授权')
  456. }
  457. },
  458. fail: (res) => {
  459. tools.error('位置授权失败,请检查是否开始授权')
  460. },
  461. })
  462. }
  463. let school_id = uni.getStorageSync('school_id');
  464. let operate_id = uni.getStorageSync('operate_id');
  465. let school_name = uni.getStorageSync('school_name');
  466. if (!school_id || !operate_id) {
  467. setTimeout(() => {
  468. uni.reLaunch({
  469. url: '/pages-address/select-school?type=1'
  470. })
  471. }, 1000)
  472. } else {
  473. this.schoolData.school_name = school_name;
  474. }
  475. this.commonApplet()
  476. this.getBanner();
  477. // this.getNotice();
  478. this.alumniHeatList()
  479. this.getSeckillGoods();
  480. this.seckillGroupGoods()
  481. this.getTakeaway();
  482. let userToken = uni.getStorageSync('token')
  483. if (userToken) {
  484. this.commonPopNotice()
  485. this.membeRmessage()
  486. // this.couponHome()
  487. }
  488. uni.removeStorageSync('orderInfoType')
  489. },
  490. onLoad(data) {
  491. // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
  492. let scene = decodeURIComponent(data.scene)
  493. scene = scene.split('&')
  494. scene.forEach(item => {
  495. let arr = item.split('=')
  496. if (arr.length === 2) {
  497. uni.setStorageSync(arr[0], arr[1])
  498. }
  499. })
  500. this.page = 1;
  501. this.goodsList = [];
  502. this.getGoodsList();
  503. this.shopHome()
  504. },
  505. mounted() {
  506. this.getHeight()
  507. },
  508. onPageScroll(e) {
  509. if (e.scrollTop > 1) {
  510. this.bgckgroundBox = '#fff';
  511. this.bgckgroundSearch = '#fff';
  512. if (e.scrollTop > 500) {
  513. this.bgckgroundType = '#fff';
  514. } else {
  515. this.bgckgroundType = '';
  516. }
  517. } else {
  518. this.bgckgroundBox = 'transparent';
  519. this.bgckgroundSearch = '';
  520. this.bgckgroundType = '';
  521. }
  522. },
  523. onReachBottom() {
  524. if (this.goodsList.length < this.total) {
  525. this.page += 1;
  526. this.getGoodsList();
  527. }
  528. },
  529. created() {
  530. uni.getSystemInfo({
  531. success: (e) => {
  532. let statusBarH = e.statusBarHeight + 10
  533. let custom = 0;
  534. custom = wx.getMenuButtonBoundingClientRect()
  535. let customBarH = custom.height;
  536. this.BarH = statusBarH + customBarH;
  537. }
  538. })
  539. },
  540. methods: {
  541. goGroup(item) {
  542. uni.navigateTo({
  543. url: '/pages-buy/group-goods-info?shop_id=' + item.shop_id + '&goods_id=' + item.goods_id +
  544. '&shop_name=' + item.shop_name
  545. });
  546. },
  547. goFeedback() {
  548. // 问题反馈
  549. uni.navigateTo({
  550. url: '/pages-my/feedback'
  551. })
  552. },
  553. shopHome() {
  554. shopHome().then((res) => {
  555. if (res.code === 1) {
  556. this.shopHomeData = res.data
  557. }
  558. })
  559. },
  560. membeRmessage() {
  561. membeRmessage().then((res) => {
  562. if (res.code === 1) {
  563. if (res.data.msg_count > 0) {
  564. uni.showTabBarRedDot({
  565. index: 2
  566. })
  567. } else {
  568. uni.hideTabBarRedDot({
  569. index: 2
  570. })
  571. }
  572. setInterval(() => {
  573. membeRmessage()
  574. }, 60000)
  575. }
  576. })
  577. },
  578. commonPopNotice() {
  579. let operate_id = uni.getStorageSync('operate_id');
  580. let school_id = uni.getStorageSync('school_id');
  581. commonPopNotice({
  582. operate_id: operate_id,
  583. school_id: school_id
  584. }).then((res) => {
  585. const noticeId = uni.getStorageSync('notice_id');
  586. if (res.code === 1) {
  587. if (res.data.id) {
  588. if (noticeId === res.data.id) {
  589. this.popType = true
  590. this.couponHome()
  591. } else {
  592. uni.hideTabBar()
  593. this.pop_notice = res.data
  594. this.$refs.popupNotice.open()
  595. this.popType = false
  596. }
  597. } else {
  598. this.popType = true
  599. this.couponHome()
  600. }
  601. }
  602. })
  603. },
  604. gbNoticePop() {
  605. uni.showTabBar()
  606. this.$refs.popupNotice.close()
  607. this.popType = true
  608. this.couponHome()
  609. },
  610. goToNotice() {
  611. uni.setStorageSync('notice_id', this.pop_notice.id);
  612. uni.showTabBar()
  613. this.$refs.popupNotice.close()
  614. this.popType = true
  615. uni.navigateTo({
  616. url: '/pages-my/notice/info?id=' + this.pop_notice.id
  617. })
  618. },
  619. commonApplet() {
  620. commonApplet().then((res) => {
  621. if (res.code == 1) {
  622. this.navList.forEach((v, k) => {
  623. v.appletAudit = 0
  624. if (v.type == 8 || v.type == 9 || v.type == 10 || v.type == 11) {
  625. v.appletAudit = res.data
  626. }
  627. })
  628. }
  629. })
  630. },
  631. getHeight() {
  632. // 创建选择器对象
  633. const query = uni.createSelectorQuery().in(this);
  634. // 选择我们想要的元素
  635. query.select('.index-search').boundingClientRect(data => {
  636. // data是选中元素的大小及位置信息
  637. if (data) {
  638. // 元素的高度
  639. this.indexSearchHeight = data.height;
  640. console.log('元素的高度:', this.indexSearchHeight);
  641. }
  642. }).exec(); // 执行选择器查询
  643. },
  644. change(e) {
  645. this.current = e.detail.current
  646. },
  647. bannerClock(item) {
  648. if (item.type == 1) {
  649. // 外卖首页
  650. uni.navigateTo({
  651. url: '/pages-takeout/takeout'
  652. })
  653. } else if (item.type == 2) {
  654. if (item.to_id != 0) {
  655. // 外卖商家
  656. uni.navigateTo({
  657. url: '/pages-takeout/shop?shop_id=' + item.to_id
  658. })
  659. } else {
  660. // 外卖首页
  661. uni.navigateTo({
  662. url: '/pages-takeout/takeout'
  663. })
  664. }
  665. } else if (item.type == 3) {
  666. // 代取页
  667. uni.navigateTo({
  668. url: '/pages-takeout/replace-take'
  669. })
  670. } else if (item.type === 4) {
  671. // 团购页
  672. uni.navigateTo({
  673. url: '/pages-buy/group'
  674. })
  675. } else if (item.type === 5) {
  676. // 票务页
  677. uni.navigateTo({
  678. url: '/pages-buy/ticket'
  679. })
  680. } else if (item.type === 6) {
  681. // 干洗页
  682. uni.navigateTo({
  683. url: '/pages-buy/dry-clean'
  684. })
  685. } else if (item.type === 7) {
  686. // 校友圈
  687. uni.navigateTo({
  688. url: '/pages-school/school-circle'
  689. })
  690. } else if (item.type === 8) {
  691. // 骑手申请页
  692. uni.navigateTo({
  693. url: '/pages-my/rider-recruit'
  694. })
  695. }
  696. },
  697. goSchool() {
  698. uni.navigateTo({
  699. url: '/pages-school/school-circle'
  700. })
  701. },
  702. receive(item, index) {
  703. receiveCoupon({
  704. grant_id: item.grant_id,
  705. coupon_id: item.coupon_id
  706. }).then((res) => {
  707. if (res.code == 1) {
  708. tools.success(res.msg)
  709. this.couponData.splice(index, 1)
  710. if (this.couponData.length <= 0) {
  711. this.gbPOp()
  712. }
  713. } else {
  714. tools.error(res.msg)
  715. this.couponData.splice(index, 1)
  716. }
  717. })
  718. },
  719. couponHome() {
  720. let operate_id = uni.getStorageSync('operate_id');
  721. couponHome({
  722. operate_id: operate_id
  723. }).then((res) => {
  724. if (res.code == 1) {
  725. if (res.data.length > 0) {
  726. uni.hideTabBar()
  727. this.couponData = res.data
  728. this.$refs.popup.open()
  729. }
  730. }
  731. })
  732. },
  733. gbPOp() {
  734. uni.showTabBar()
  735. this.$refs.popup.close()
  736. },
  737. getBanner() {
  738. let operate_id = uni.getStorageSync('operate_id');
  739. let school_id = uni.getStorageSync('school_id');
  740. getBanner({
  741. operate_id: operate_id,
  742. school_id: school_id
  743. }).then((res) => {
  744. if (res.code === 1) {
  745. this.bannerList = res.data;
  746. }
  747. })
  748. },
  749. alumniHeatList() {
  750. let school_id = uni.getStorageSync('school_id');
  751. alumniHeatList({
  752. school_id: school_id
  753. }).then((res) => {
  754. if (res.code === 1) {
  755. this.noticeList = res.data;
  756. }
  757. })
  758. },
  759. getNotice() {
  760. let operate_id = uni.getStorageSync('operate_id');
  761. let school_id = uni.getStorageSync('school_id');
  762. getNotice({
  763. operate_id: operate_id,
  764. school_id: school_id
  765. }).then((res) => {
  766. if (res.code === 1) {
  767. this.noticeList = res.data;
  768. }
  769. })
  770. },
  771. getSeckillGoods() {
  772. let operate_id = uni.getStorageSync('operate_id');
  773. getSeckillGoods({
  774. operate_id: operate_id
  775. }).then((res) => {
  776. if (res.code === 1) {
  777. this.seckillGoodsList = res.data
  778. }
  779. })
  780. },
  781. seckillGroupGoods() {
  782. seckillGroupGoods().then((res) => {
  783. if (res.code === 1) {
  784. if (res.code === 1) {
  785. this.group_goods_List = res.data
  786. }
  787. }
  788. })
  789. },
  790. getTakeaway() {
  791. getTakeaway().then((res) => {
  792. if (res.code === 1) {
  793. this.typeList = res.data;
  794. this.typeList.unshift({
  795. name: "全部",
  796. id: 0
  797. })
  798. }
  799. })
  800. },
  801. getGoodsList() {
  802. let operate_id = uni.getStorageSync('operate_id');
  803. getGoodsList({
  804. page: this.page,
  805. operate_id: operate_id,
  806. category_id: this.category_id
  807. }).then((res) => {
  808. if (res.code === 1) {
  809. this.goodsList = [...this.goodsList, ...res.data.items];
  810. this.total = res.data.total;
  811. console.log(this.total, 'this.total');
  812. }
  813. })
  814. },
  815. selectType(id) {
  816. if (this.category_id != id) {
  817. this.category_id = id;
  818. this.page = 1;
  819. this.goodsList = [];
  820. this.getGoodsList();
  821. }
  822. },
  823. toUrl(type) {
  824. if (type === 1) {
  825. // 去搜索
  826. uni.navigateTo({
  827. url: '/pages/index/search-record'
  828. })
  829. } else if (type === 2) {
  830. // 去外卖
  831. uni.navigateTo({
  832. url: '/pages-takeout/takeout'
  833. })
  834. } else if (type === 3) {
  835. // 去代取
  836. uni.navigateTo({
  837. url: '/pages-takeout/replace-take'
  838. })
  839. } else if (type === 4) {
  840. // 君子帮选
  841. uni.navigateTo({
  842. // url: '/pages-takeout/help-choose'
  843. url: '/pages-takeout/1212'
  844. })
  845. } else if (type === 5) {
  846. // 去团购
  847. uni.navigateTo({
  848. url: '/pages-buy/group'
  849. })
  850. } else if (type === 6) {
  851. // 领券中心
  852. uni.navigateTo({
  853. url: '/pages-my/ticket-centre'
  854. })
  855. } else if (type === 7) {
  856. // 去校友圈
  857. uni.navigateTo({
  858. url: '/pages-school/school-circle'
  859. })
  860. } else if (type === 8) {
  861. // 去实习岗位
  862. uni.navigateTo({
  863. url: '/pages-position/Internship-position'
  864. })
  865. } else if (type === 9) {
  866. // 平台客服
  867. } else if (type === 10) {
  868. // 跑腿代拿
  869. uni.navigateTo({
  870. url: '/pages-takeout/run-errands'
  871. })
  872. } else {
  873. tools.error('暂未开放')
  874. }
  875. },
  876. toSelectSchool() {
  877. uni.navigateTo({
  878. url: '/pages-address/select-school?type=1'
  879. })
  880. },
  881. goTogrup() {
  882. uni.navigateTo({
  883. url: '/pages-takeout/group-goods'
  884. })
  885. },
  886. goAllSeckill() {
  887. uni.navigateTo({
  888. url: '/pages-takeout/seckill'
  889. })
  890. },
  891. toShop(item) {
  892. const operate_id = uni.getStorageSync('operate_id')
  893. shopInfo({
  894. operate_id: operate_id,
  895. shop_id: item.shop_id
  896. }).then((res) => {
  897. if (res.code == 1) {
  898. uni.navigateTo({
  899. url: '/pages-takeout/shop?shop_id=' + item.shop_id + '&category_id=' + item
  900. .category_id + '&goods_id=' + item.goods_id
  901. })
  902. } else {
  903. tools.error(res.msg)
  904. }
  905. })
  906. },
  907. toNoticeDet(item) {
  908. uni.navigateTo({
  909. url: '/pages-school/circle-info?news_id=' + item.news_id
  910. })
  911. },
  912. },
  913. }
  914. </script>
  915. <style lang="scss" scoped>
  916. .list-but {
  917. width: 140rpx;
  918. height: 48rpx;
  919. line-height: 48rpx;
  920. border-radius: 24rpx;
  921. }
  922. .sj-fff {
  923. width: 0;
  924. height: 0;
  925. border-top: 8rpx solid transparent;
  926. border-right: 8rpx solid transparent;
  927. border-left: 8rpx solid #fff;
  928. border-bottom: 8rpx solid transparent;
  929. }
  930. .bot-list-box {
  931. padding: 0 24rpx 24rpx;
  932. }
  933. .zk-box {
  934. width: 67rpx;
  935. height: 31rpx;
  936. line-height: 28rpx;
  937. position: relative;
  938. }
  939. .zk-img {
  940. width: 100%;
  941. height: 100%;
  942. position: absolute;
  943. left: 0;
  944. top: 0;
  945. }
  946. .pm-img {
  947. width: 31rpx;
  948. height: 43rpx;
  949. }
  950. .qwzd-img {
  951. width: 295rpx;
  952. height: 28rpx;
  953. }
  954. .yztg-box {
  955. width: 100%;
  956. height: auto;
  957. position: relative;
  958. }
  959. .b-img {
  960. width: 39rpx;
  961. height: 41rpx;
  962. }
  963. .w-31 {
  964. width: 31%;
  965. }
  966. .max-w-200 {
  967. max-width: 200rpx;
  968. }
  969. .xsms-item-img {
  970. width: 200rpx;
  971. height: 200rpx;
  972. }
  973. .xsms-box {
  974. width: 100%;
  975. height: 730rpx;
  976. padding: 25rpx 0rpx 1rpx 30rpx;
  977. position: relative;
  978. }
  979. .ms-swiper {
  980. width: 100%;
  981. height: 100%;
  982. }
  983. .xsms-img {
  984. width: 139rpx;
  985. height: 31rpx;
  986. }
  987. .tj-item {
  988. width: 108rpx;
  989. height: 108rpx;
  990. }
  991. .mxdp {
  992. width: 317rpx;
  993. height: 31rpx;
  994. }
  995. .mxdq-box {
  996. min-height: 342rpx;
  997. position: relative;
  998. padding: 25rpx 17rpx 18rpx 30rpx;
  999. }
  1000. .tj-bg {
  1001. position: absolute;
  1002. left: 0;
  1003. top: 0;
  1004. width: 100%;
  1005. height: 100%;
  1006. }
  1007. .xzkn-img {
  1008. width: 139rpx;
  1009. height: 343rpx;
  1010. border-radius: 20rpx;
  1011. }
  1012. .h-100 {
  1013. height: 100%;
  1014. }
  1015. .max-w-358 {
  1016. max-width: 358rpx;
  1017. }
  1018. .serial-num {
  1019. width: 25rpx;
  1020. height: 22rpx;
  1021. line-height: 22rpx;
  1022. border-radius: 10rpx 2rpx 10rpx 2rpx;
  1023. }
  1024. .z-2 {
  1025. position: relative;
  1026. z-index: 2;
  1027. }
  1028. .w-10 {
  1029. width: 10rpx;
  1030. }
  1031. .rebang-box {
  1032. width: 160rpx;
  1033. height: 130rpx;
  1034. background: #53C4FD;
  1035. border-radius: 20rpx 0 0 20rpx;
  1036. padding: 0 10rpx 0 0;
  1037. position: relative;
  1038. }
  1039. .sj-box {
  1040. width: 0;
  1041. height: 0;
  1042. border-top: 20rpx solid transparent;
  1043. border-right: 20rpx solid #F3F3F3;
  1044. border-left: 20rpx solid transparent;
  1045. border-bottom: 20rpx solid transparent;
  1046. position: absolute;
  1047. right: -2rpx;
  1048. top: calc(50% - 20rpx);
  1049. }
  1050. .rebang {
  1051. width: 64rpx;
  1052. }
  1053. .h-60-vh {
  1054. max-height: 60vh;
  1055. }
  1056. .w-80-vw {
  1057. width: 80vw;
  1058. }
  1059. .plrb-24 {
  1060. padding: 0 24rpx 24rpx;
  1061. }
  1062. .spike-box {
  1063. padding: 0 24rpx;
  1064. }
  1065. .wh27 {
  1066. width: 27rpx;
  1067. height: 27rpx;
  1068. }
  1069. .nav-z {
  1070. position: relative;
  1071. z-index: 3 !important;
  1072. background: linear-gradient(-90deg, #3BB5FE, #62C4FF);
  1073. }
  1074. .wh-40 {
  1075. width: 40rpx;
  1076. height: 40rpx;
  1077. }
  1078. .item-box {
  1079. margin-bottom: 20rpx;
  1080. }
  1081. .item-box:last-child {
  1082. margin: 0;
  1083. }
  1084. .roll-pop {
  1085. position: relative;
  1086. width: 100vw;
  1087. // height: 1000rpx;
  1088. .tc-top {
  1089. width: 100%;
  1090. height: 202rpx;
  1091. }
  1092. .tc-bot {
  1093. width: 100%;
  1094. height: 178rpx;
  1095. }
  1096. .pop-gb {
  1097. width: 56rpx;
  1098. height: 56rpx;
  1099. position: absolute;
  1100. bottom: -65rpx;
  1101. left: calc((100% - 28rpx) / 2);
  1102. }
  1103. }
  1104. .coupon-box {
  1105. width: 100%;
  1106. // min-height: 590rpx;
  1107. padding: 0 82rpx 0 92rpx;
  1108. box-sizing: border-box;
  1109. position: relative;
  1110. .tc-content {
  1111. position: absolute;
  1112. left: 0;
  1113. top: 0;
  1114. width: 100%;
  1115. height: 100%;
  1116. }
  1117. }
  1118. .index-box {
  1119. .maxw-220 {
  1120. max-width: 220rpx;
  1121. }
  1122. position: relative;
  1123. .bg-img {
  1124. width: 100%;
  1125. height: 930rpx;
  1126. position: absolute;
  1127. top: 0;
  1128. left: 0;
  1129. z-index: -2;
  1130. }
  1131. .nav-icon {
  1132. width: 32rpx;
  1133. height: 32rpx;
  1134. }
  1135. .index-box-1 {
  1136. width: 100%;
  1137. // height: 3000rpx;
  1138. .swiper {
  1139. width: 702rpx;
  1140. height: 280rpx;
  1141. border-radius: 20rpx;
  1142. .swiper-item {
  1143. width: 702rpx;
  1144. height: 280rpx;
  1145. border-radius: 20rpx;
  1146. }
  1147. }
  1148. .nav-list {
  1149. // padding: 0 22rpx;
  1150. .nav-list-item {
  1151. width: 25%;
  1152. margin-bottom: 35rpx;
  1153. position: relative;
  1154. .item-box-button {
  1155. position: absolute;
  1156. width: 100%;
  1157. height: 100%;
  1158. top: 0;
  1159. left: 0;
  1160. z-index: 100;
  1161. background: transparent;
  1162. border-width: 0;
  1163. }
  1164. .title-img-box {
  1165. .title-img {
  1166. width: 80rpx;
  1167. height: 76rpx;
  1168. }
  1169. }
  1170. }
  1171. .nav-list-item:nth-child(3) {
  1172. .title-img-box {
  1173. .title-img {
  1174. width: 92rpx;
  1175. height: 82rpx;
  1176. }
  1177. }
  1178. }
  1179. .nav-list-item:nth-child(4) {
  1180. .title-img-box {
  1181. .title-img {
  1182. width: 82rpx;
  1183. height: 73rpx;
  1184. }
  1185. }
  1186. }
  1187. .nav-list-item:nth-child(5) {
  1188. .title-img-box {
  1189. .title-img {
  1190. width: 79rpx;
  1191. height: 86rpx;
  1192. }
  1193. }
  1194. }
  1195. .nav-list-item:nth-child(6) {
  1196. .title-img-box {
  1197. .title-img {
  1198. width: 93rpx;
  1199. height: 99rpx;
  1200. }
  1201. }
  1202. }
  1203. .nav-list-item:nth-child(7) {
  1204. .title-img-box {
  1205. .title-img {
  1206. width: 106rpx;
  1207. height: 84rpx;
  1208. }
  1209. }
  1210. }
  1211. .nav-list-item:nth-child(8) {
  1212. .title-img-box {
  1213. .title-img {
  1214. width: 81rpx;
  1215. height: 88rpx;
  1216. }
  1217. }
  1218. }
  1219. }
  1220. .msg-box {
  1221. width: 100%;
  1222. height: 180rpx;
  1223. border-radius: 12rpx;
  1224. padding: 30rpx 40rpx;
  1225. position: relative;
  1226. }
  1227. .rb-bg {
  1228. position: absolute;
  1229. left: 0;
  1230. bottom: 0;
  1231. width: 100%;
  1232. height: 100%;
  1233. }
  1234. .xyrb-img {
  1235. width: 108rpx;
  1236. height: 123rpx;
  1237. }
  1238. .type-list-box {
  1239. width: calc(100% - 24rpx);
  1240. position: sticky;
  1241. left: 0;
  1242. // top: calc(var(BarH)px + 93rpx);
  1243. // top: calc(86px + 93rpx);
  1244. padding: 24rpx;
  1245. overflow-x: scroll;
  1246. z-index: 50;
  1247. .type-item-box {
  1248. margin-right: 16rpx;
  1249. padding: 0 24rpx;
  1250. position: relative;
  1251. }
  1252. .type-item-box:last-child {
  1253. margin-right: 0;
  1254. }
  1255. .type-list-hr {
  1256. position: absolute;
  1257. left: 15%;
  1258. bottom: 0;
  1259. width: 70%;
  1260. height: 6rpx;
  1261. background: linear-gradient(-90deg, #ffffff, #3BB5FE);
  1262. border-radius: 3rpx;
  1263. }
  1264. }
  1265. .goos-list-box {
  1266. width: 100%;
  1267. min-height: 100rpx;
  1268. padding: 28rpx 30rpx 35rpx;
  1269. background: #FFFFFF;
  1270. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
  1271. border-radius: 20rpx;
  1272. margin-bottom: 20rpx;
  1273. .goods-items-list {
  1274. width: 100%;
  1275. overflow-y: scroll;
  1276. .goods-items-list-box {
  1277. width: 33.3%;
  1278. margin-right: 13rpx;
  1279. position: relative;
  1280. .label-box {
  1281. position: absolute;
  1282. left: 0;
  1283. top: 0;
  1284. width: 66rpx;
  1285. height: 31rpx;
  1286. line-height: 31rpx;
  1287. border-radius: 10rpx 2rpx 10rpx 2rpx;
  1288. }
  1289. image {
  1290. width: 201rpx;
  1291. height: 200rpx;
  1292. border-radius: 10rpx
  1293. }
  1294. }
  1295. }
  1296. .left-img-box {
  1297. width: 120rpx;
  1298. height: 120rpx;
  1299. position: relative;
  1300. .left-img {
  1301. width: 120rpx;
  1302. height: 120rpx;
  1303. border-radius: 12rpx;
  1304. }
  1305. .status-box {
  1306. position: absolute;
  1307. bottom: 0;
  1308. left: 0;
  1309. width: 100%;
  1310. padding: 4rpx 0;
  1311. text-align: center;
  1312. background: rgba(0, 0, 0, 0.5);
  1313. font-size: 17rpx;
  1314. border-radius: 0 0 12rpx 12rpx;
  1315. }
  1316. }
  1317. .img-x {
  1318. width: 16rpx;
  1319. height: 16rpx;
  1320. }
  1321. .right-box-title {
  1322. width: 438rpx;
  1323. }
  1324. .right-box-title-img {
  1325. width: 32rpx;
  1326. height: 32rpx;
  1327. margin-left: auto;
  1328. }
  1329. .quan-list {
  1330. min-width: 88rpx;
  1331. height: 28rpx;
  1332. line-height: 28rpx;
  1333. .quan-list-1 {
  1334. width: 38rpx;
  1335. height: 28rpx;
  1336. }
  1337. }
  1338. }
  1339. }
  1340. .index-search {
  1341. position: sticky;
  1342. left: 0;
  1343. z-index: 10;
  1344. padding: 0 24rpx 20rpx 24rpx;
  1345. .index-search-box {
  1346. width: 100%;
  1347. height: 72rpx;
  1348. padding: 0 6rpx 0 24rpx;
  1349. border-radius: 200rpx;
  1350. .index-search-box-buttom {
  1351. width: 120rpx;
  1352. height: 60rpx;
  1353. background: linear-gradient(-90deg, #3BB5FE, #62C4FF);
  1354. border-radius: 200rpx;
  1355. margin-left: auto;
  1356. line-height: 60rpx;
  1357. text-align: center;
  1358. }
  1359. }
  1360. }
  1361. }
  1362. .item-hr {
  1363. width: 0px;
  1364. height: auto;
  1365. border-right: 1rpx dashed #FB7850;
  1366. }
  1367. .item-hr-two {
  1368. width: 0px;
  1369. height: auto;
  1370. border-right: 1rpx dashed #999;
  1371. }
  1372. .item-left {
  1373. width: 171rpx;
  1374. height: auto;
  1375. padding: 20rpx 18rpx;
  1376. box-sizing: border-box;
  1377. position: relative;
  1378. border-radius: 0 20rpx 20rpx 0;
  1379. }
  1380. .ball {
  1381. width: 24rpx;
  1382. height: 24rpx;
  1383. border-radius: 50%;
  1384. position: absolute;
  1385. top: -12rpx;
  1386. left: -12rpx;
  1387. background: #fff;
  1388. z-index: 2;
  1389. }
  1390. .ball-two {
  1391. width: 24rpx;
  1392. height: 24rpx;
  1393. border-radius: 50%;
  1394. position: absolute;
  1395. background: #fff;
  1396. z-index: 10;
  1397. bottom: -12rpx;
  1398. left: -12rpx;
  1399. }
  1400. .item-right {
  1401. padding: 24rpx;
  1402. box-sizing: border-box;
  1403. border-radius: 20rpx 0 0 20rpx;
  1404. position: relative;
  1405. }
  1406. .but-box {
  1407. width: 136rpx;
  1408. height: 48rpx;
  1409. line-height: 48rpx;
  1410. text-align: center;
  1411. background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
  1412. border-radius: 200rpx;
  1413. }
  1414. .but {
  1415. width: 100%;
  1416. height: 60rpx;
  1417. line-height: 60rpx;
  1418. }
  1419. .rd-img {
  1420. width: 40rpx;
  1421. height: 40rpx;
  1422. }
  1423. </style>