index.vue 37 KB

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