index.wxml 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <!--index.wxml-->
  2. <view class="container" style="padding-top: {{pageTopHeight}}px;padding-bottom: 400rpx;">
  3. <navbar>
  4. <view class="top-navbar-box" wx:if="{{gapTop==1}}" style="opacity: {{titleOpacity}};">
  5. <!-- <view class="shop-title">星闪豹</view> -->
  6. <view class="shop-info">
  7. <!-- <view>百货超市</view>| -->
  8. <view bindtap="toLocationPage" class="shop-address-info">
  9. <!-- <van-icon name="location-o" /> -->
  10. <image class="position-icon" src="../../images/icon/position.png" mode=""/>
  11. <!-- {{select_address||'选择定位'}} -->
  12. {{shopName||'附近暂无可配送门店'}}
  13. </view>
  14. </view>
  15. </view>
  16. <view wx:else>
  17. <view class="top-search-input">
  18. <swiper vertical="true" circular="true" autoplay="true" interval="3000" class="top-search-swiper" bindtap="toSearchPage" bindchange="topSwiperChange">
  19. <swiper-item wx:for="{{hotList}}" wx:key="index">{{item.name}}</swiper-item>
  20. </swiper>
  21. <view class="top-search-line">|</view>
  22. <view class="top-search-text" bindtap="topHotSearch">搜索</view>
  23. </view>
  24. </view>
  25. </navbar>
  26. <!-- 搜索框 -->
  27. <view class="search-box" id="my-element">
  28. <view class="search-input">
  29. <swiper vertical="true" circular="true" autoplay="true" interval="3000" class="search-swiper" bindtap="toSearchPage" bindchange="swiperChange">
  30. <swiper-item wx:for="{{hotList}}" wx:key="index">{{item.searchName}}</swiper-item>
  31. </swiper>
  32. <!-- <view class="search-line">|</view> -->
  33. <view class="search-text" bindtap="inputSearch">搜索</view>
  34. </view>
  35. <!-- <view class="top-share">
  36. <van-icon name="share" color="#fff" />
  37. <view class="share-text">分享</view>
  38. <button class="share-btn" open-type="share"></button>
  39. </view> -->
  40. </view>
  41. <view class="recommended-box">
  42. <scroll-view class="recommended-swiper" enhanced="true" show-scrollbar="false" scroll-x="true">
  43. <view class="recommended-text" wx:for="{{recommendedList}}" bindtap="recommendedSearch" data-name="{{item.searchName}}">
  44. {{item.searchName}}
  45. </view>
  46. </scroll-view>
  47. </view>
  48. <!-- 搜索框end -->
  49. <view class="bg-box">
  50. <image class="bg" src="{{imgUrl+swiperList[swiperCurrent].advertBack}}" mode=""/>
  51. <swiper indicator-dots="true" class="swiper-box" interval="3000" circular="true" indicator-active-color="#006CE8" autoplay="true" bindchange="changeIndex">
  52. <swiper-item wx:for="{{swiperList}}" wx:key="index" bindtap="goToLevelPage" data-name="{{item}}">
  53. <image class="block" src="{{imgUrl+item.advertImg}}" mode=""/>
  54. </swiper-item>
  55. </swiper>
  56. <!-- <view class="white-block"></view> -->
  57. </view>
  58. <!-- 板块 -->
  59. <!-- <view class="swiper-grid-box" wx:if="{{categoryList1.length>0}}"> -->
  60. <view class="swiper-grid-box" wx:if="{{categoryList.length>0}}">
  61. <view class="grid-box">
  62. <!-- <van-grid border="{{false}}" column-num="5">
  63. <van-grid-item class="my-grid-item" use-slot bind:click="selectMenu" wx:for="{{categoryList}}" wx:key="categoryId" data-pic="{{item.pic}}" data-itemid="{{item.categoryId}}" data-index="{{index}}" data-categories="{{item.categories}}" data-categoryName="{{item.categoryName}}" badge="应季水果">
  64. <image class="swiper-grid-image" src="{{item.icon}}" />
  65. <text class="swiper-grid-text">{{item.categoryName}}</text>
  66. <view class="label" wx:if="{{item.label}}">{{'应季果蔬'||item.label}}</view>
  67. </van-grid-item>
  68. </van-grid> -->
  69. <view class="my-grid-item" use-slot bind:tap="selectMenu" wx:for="{{categoryList}}" wx:key="categoryId" data-pic="{{item.pic}}" data-hassecond="{{item.hasSecond}}" data-itemid="{{item.categoryId}}" data-index="{{index}}" data-categories="{{item.categories}}" data-categoryName="{{item.categoryName}}">
  70. <view class='pic-box {{selIndex==index?"active":""}}'>
  71. <!-- <view wx:if="{{!item.hasSecond}}" class='sell-out-box'>
  72. <view class="sell-out-text">敬请期待</view>
  73. </view> -->
  74. <image class="swiper-grid-image" src="{{item.icon}}" />
  75. </view>
  76. <view class="swiper-grid-text">{{item.categoryName}}</view>
  77. <view class="label" wx:if="{{item.label}}">{{item.label}}</view>
  78. </view>
  79. </view>
  80. <swiper class="swiper-grid" wx-if="{{categoryList1.length>0}}" display-multiple-items="5" indicator-dots="true" indicator-active-color="#006CE8" bindchange="menuSwiper">
  81. <swiper-item wx:for="{{categoryList1}}" wx:key="index" class="my-grid-item" bind:tap="selectMenu" data-hassecond="{{item.hasSecond}}" data-pic="{{item.pic}}" data-itemid="{{item.categoryId}}" data-index="{{index}}" data-categories="{{item.categories}}" data-categoryName="{{item.categoryName}}">
  82. <view class='pic-box {{selIndex==index?"active":""}}'>
  83. <!-- <view wx:if="{{!item.hasSecond}}" class='sell-out-box'>
  84. <view class="sell-out-text">敬请期待</view>
  85. </view> -->
  86. <image class="swiper-grid-image" src="{{item.icon}}" />
  87. </view>
  88. <view class="swiper-grid-text">{{item.categoryName}}</view>
  89. <!-- <van-grid border="{{false}}" column-num="5">
  90. <van-grid-item class="my-grid-item" use-slot bind:click="selectMenu" wx:for="{{item}}" wx:key="categoryId" data-pic="{{item.pic}}" data-itemid="{{item.categoryId}}" data-index="{{index}}" data-categories="{{item.categories}}" data-categoryName="{{item.categoryName}}">
  91. <image class="swiper-grid-image" src="{{item.icon}}" />
  92. <text class="swiper-grid-text">{{item.categoryName}}</text>
  93. </van-grid-item>
  94. </van-grid> -->
  95. </swiper-item>
  96. </swiper>
  97. </view>
  98. <!-- 板块end -->
  99. <view style="height: 250rpx;" wx:if="{{categoryList.length == 0}}" ></view>
  100. <!-- 通知广告end -->
  101. <!-- <view class="bonus-box" wx:if="{{hotSalesList.length>0}}">
  102. <view class="content-bonus" bindtap="toRedPackage">
  103. <image style="width:36rpx;height: 36rpx;" src="/images/icon/redPack.png" mode="" />
  104. <view class="bonus-text">天天领红包</view>
  105. </view>
  106. <view class="content-bonus" bindtap='toCouponCenter'>
  107. <image style="width:36rpx;height: 36rpx;" src="/images/icon/ticket.png" mode="" />
  108. <view class="bonus-text">领券中心</view>
  109. </view>
  110. </view> -->
  111. <view class="seckill-box" wx:if="{{snapUpList.length>0}}">
  112. <!-- 秒杀 -->
  113. <view class="seckill-time">
  114. <view class="seckill-title">秒杀特卖</view>
  115. <view class="times">
  116. {{days<10?'0'+days:days}}天/{{hours<10?'0'+hours:hours}}:{{minutes<10?'0'+minutes:minutes}}:{{seconds<10?'0'+seconds:seconds}} </view>
  117. <image style="width:60rpx;height:60rpx;" src="/images/icon/seckill.png" mode="" />
  118. </view>
  119. <view class="seckill-content" wx:for="{{snapUpList}}" wx:key="index" bindtap="toSnapUpListPage" data-seckillid='{{item.seckillId}}'>
  120. <view class="seckill-product-box">
  121. <image style="width: 100rpx;height:100rpx;" src="{{item.pic}}" mode="widthFix" />
  122. <view class="seckill-Price">
  123. <image class="price-bg" style="width: 100rpx;" src="/images/icon/price_bg.png" mode="widthFix" />
  124. <view class="price-num">¥{{wxs.toPrice(item.seckillPrice)}}</view>
  125. </view>
  126. </view>
  127. </view>
  128. <view class="more-icon" bindtap="toSnapUpPage">
  129. <van-icon name="arrow" />
  130. </view>
  131. </view>
  132. <!-- 推荐 -->
  133. <!-- <view class="recommended-card" wx:if="{{newList.length>0}}">
  134. <view class="new-text">
  135. <view class="seckill-title new-text-two">新品推荐</view>
  136. <view class="times">鲜品速荐</view>
  137. <image style="width:60rpx;height:60rpx;" src="/images/icon/new.png" mode="" />
  138. </view>
  139. <view class="seckill-content" wx:for="{{newList}}" wx:key="index">
  140. <view class="seckill-product-box" bindtap="newToProdPage" data-prod="{{item.prodId}}">
  141. <image style="width: 100rpx;height:100rpx;" src="{{item.pic}}" />
  142. <view class="recommended-Price">¥{{item.price}}</view>
  143. </view>
  144. </view>
  145. <view class="more-icon" bindtap="toClassifyPage" data-sts="1">
  146. <van-icon name="arrow" />
  147. </view>
  148. </view> -->
  149. <!-- 推荐end -->
  150. <!-- 通知 -->
  151. <view class="notice-box">
  152. <image class="icon" src="../../images/icon/notice.png" alt=""/>
  153. <view class="text">因订单高峰期,配送可能延迟,请提前下单</view>
  154. </view>
  155. <image class="adv" src="../../images/imgs/adv.png" mode=""/>
  156. <!-- 分类分页 -->
  157. <view wx:if="{{hotSalesList.length>0}}" class="tab-box" scroll-x="true" bounces="true" enhanced="true" show-scrollbar="false" style="width: 100%">
  158. <view id="demo1" class="tab {{active==1?'active':''}}" bindtap="handleTab" data-active="1">为你推荐</view>
  159. <view id="demo1" class="tab {{active==2?'active':''}}" bindtap="handleTab" data-active="2">疯狂折扣</view>
  160. <view id="demo1" class="tab {{active==3?'active':''}}" bindtap="handleTab" data-active="3">
  161. <image class="icon" src="../../images/imgs/chaozhi.png" alt=""/>
  162. </view>
  163. <view id="demo1" class="tab {{active==4?'active':''}}" bindtap="handleTab" data-active="4">地道特产</view>
  164. <view id="demo1" class="tab {{active==5?'active':''}}" bindtap="handleTab" data-active="5">预售</view>
  165. </view>
  166. <!-- 商城热卖 -->
  167. <view class="content" wx:if="{{hotSalesList.length>0}}">
  168. <view class="left">
  169. <view class="swiper-card-box" wx:if="{{banner_img.length>0}}">
  170. <!-- 轮播卡片 -->
  171. <swiper indicator-dots="true" class="swiper-card" circular="true" indicator-active-color="#006CE8" autoplay="true">
  172. <swiper-item wx:for="{{banner_img}}" wx:key="index" bindtap="goToLevelPage" data-name="{{item.name}}">
  173. <image class="swiper-card-img" src="{{item.img}}" mode="" />
  174. </swiper-item>
  175. </swiper>
  176. </view>
  177. <block wx:for="{{hotSalesList}}" wx:key="index">
  178. <view wx:if="{{index%2==1}}">
  179. <view class="item" bindtap='toProdPage' data-prodid="{{item.prodId}}" data-shopid="{{item.shopId}}">
  180. <view wx:if="{{item.stocks == 0}}" class="sell-out-box">
  181. <view class="sell-out-text">商品已售罄</view>
  182. </view>
  183. <image lazy-load class="item-img" src="{{item.pic}}" mode="widthFix"></image>
  184. <view class="item-title-box">
  185. <view class="item-title">{{item.prodName}}</view>
  186. </view>
  187. <view class="name">
  188. <!-- <view class="name-title">{{'已售'+item.salesVolume}}</view> -->
  189. <!-- <view class="tag-box">
  190. <view class="tag">自营</view>
  191. <view class="text">月回头客5999+人</view>
  192. </view> -->
  193. <view class="heart">
  194. <view class="name-price">
  195. <view style="font-size:26rpx;color: #FF4D3A;">¥</view>{{wxs.toPrice(item.price)}}
  196. </view>
  197. <image style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode=""/>
  198. <!-- <view class="stepper-box" wx:if="{{item.notData}}">
  199. <view class="stepper-minus" catchtap="minusButton" data-item="{{item}}">-</view>
  200. <view class="stepper-num">{{totalNum}}</view>
  201. <view class="stepper-add" catchtap="addButton" data-item="{{item}}">+</view>
  202. </view>
  203. <image wx:else catchtap="addShopCar" data-shop="{{item}}" style="width: 50rpx;height: 50rpx;" src="/images/icon/shop-car.png" mode="" /> -->
  204. </view>
  205. <!-- <view class="rank-box">
  206. <image src="/images/icon/top-icon.png" mode="" class="icon"/>
  207. <view class="text">粮油调味热卖榜</view>
  208. <image src="/images/icon/top1.png" mode="" class="top"/>
  209. </view> -->
  210. </view>
  211. </view>
  212. </view>
  213. </block>
  214. </view>
  215. <view class="right">
  216. <block wx:for="{{hotSalesList}}" wx:key="index">
  217. <view wx:if="{{index%2==0}}">
  218. <view class="item" bindtap='toProdPage' data-prodid="{{item.prodId}}" data-shopid="{{item.shopId}}">
  219. <view wx:if="{{item.stocks == 0}}" class="sell-out-box">
  220. <view class="sell-out-text">商品已售罄</view>
  221. </view>
  222. <image class="item-img" lazy-load src="{{item.pic}}" mode="widthFix"></image>
  223. <view class="item-title-box">
  224. <view class="item-title">{{item.prodName}}</view>
  225. </view>
  226. <view class="name">
  227. <!-- <view class="name-title">{{'已售'+item.salesVolume}}</view> -->
  228. <!-- <view class="tag-box">
  229. <view class="tag">自营</view>
  230. <view class="text">月回头客5999+人</view>
  231. </view> -->
  232. <view class="heart">
  233. <view class="name-price">
  234. <view style="font-size:26rpx;color: #FF4D3A;">¥</view>{{wxs.toPrice(item.price)}}
  235. </view>
  236. <image style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode=""/>
  237. <!-- <view class="stepper-box" wx:if="{{item.notData}}">
  238. <view class="stepper-minus" catchtap="minusButton">-</view>
  239. <view class="stepper-num">1</view>
  240. <view class="stepper-add" catchtap="addButton">+</view>
  241. </view>
  242. <image wx:else catchtap="addShopCar" data-shop="{{item}}" style="width: 50rpx;height: 50rpx;" src="/images/icon/shop-car.png" mode="" /> -->
  243. </view>
  244. <!-- <view class="rank-box">
  245. <image src="/images/icon/top-icon.png" mode="" class="icon"/>
  246. <view class="text">粮油调味热卖榜</view>
  247. <image src="/images/icon/top1.png" mode="" class="top"/>
  248. </view> -->
  249. </view>
  250. </view>
  251. </view>
  252. </block>
  253. </view>
  254. </view>
  255. <block wx:else>
  256. <view style="height: 500rpx;">
  257. <van-empty image="search" description="附近暂无可配送门店" />
  258. </view>
  259. <!-- <view class="reset-localization" bindtap="toLocationPage">定位不准确?<text style="color: rgb(40,120,255);">点击手动定位</text></view> -->
  260. </block>
  261. <block wx:if="{{hotSalesList.length>0}}">
  262. <view class="tips" wx:if="{{isAll}}">已经到底咯~</view>
  263. <view class="loading-box" wx:else>
  264. <van-loading size="20px" type="spinner" color="#006CE8">加载中...</van-loading>
  265. </view>
  266. </block>
  267. <van-popup show="{{ addCarshow }}" closeable round position="bottom" custom-style="height: 43%" bind:close="onClose">
  268. <view class="popup-box">
  269. <view class="popup-detail">
  270. <view class="popup-img-box">
  271. <image style="width: 200rpx;height: 200rpx;" src="{{shopDetail.pic}}" mode="" />
  272. </view>
  273. <view class="popup-shop-detail">
  274. <view class="shop-price"><text style="font-size:26rpx;">¥</text>{{wxs.toPrice(shopDetail.price)}}</view>
  275. <view class="shop-detail">
  276. <view class="shop-isselect">已选</view>
  277. <view class="shop-info">黑色,1件</view>
  278. </view>
  279. </view>
  280. </view>
  281. <view class="popup-line"></view>
  282. <view class="shop-color">
  283. <view class="color-text">颜色</view>
  284. <view class="color-btn-box">
  285. <view class="color-btn">黑色</view>
  286. <view class="color-btn">黑色</view>
  287. <view class="color-btn">黑色</view>
  288. </view>
  289. </view>
  290. <view class="popup-num-box">
  291. <view class="color-text">数量</view>
  292. <view class="stepper-box">
  293. <view class="stepper-minus">-</view>
  294. <view class="stepper-num">1</view>
  295. <view class="stepper-add">+</view>
  296. </view>
  297. </view>
  298. </view>
  299. <view class="bottom-button-box">
  300. <view class="bottom-button">选好了</view>
  301. </view>
  302. </van-popup>
  303. <tabbar active="0" isScroll="{{isScroll}}"></tabbar>
  304. </view>
  305. <wxs module="wxs" src="../../wxs/number.wxs" />