life.vue 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232
  1. <template>
  2. <view style="background-color: #f2f2f2;">
  3. <u-navbar :is-back="false" title=" ">
  4. <view class="slot-wrap">
  5. <view class="search-wrap" >
  6. <view style="flex: 30%;" class="flex text-bold padding-right-20 justify-center align-center">
  7. 周边商城
  8. </view>
  9. <view class="">
  10. <u-search @click="jumpSearch()" disabled :show-action="false" height="56" ></u-search>
  11. </view>
  12. </view>
  13. </view>
  14. </u-navbar>
  15. <view :style="{display:show}">
  16. <!-- <ScrollMenu></ScrollMenu> -->
  17. <view class="banner">
  18. <swiper
  19. class="swiper"
  20. interval="5000"
  21. duration="500"
  22. autoplay="true"
  23. circular="true"
  24. :indicator-dots="adsList.length>1"
  25. indicator-color="rgba(153,153,153,1)"
  26. indicator-active-color="#FFF"
  27. @change="switchColor">
  28. <swiper-item v-for="(item,index) in adsList" :key="index">
  29. <image class="image" mode="heightFix" :src="item.path" @tap="tapNav(item)"></image>
  30. </swiper-item>
  31. </swiper>
  32. <!-- <view style="width: 100%;position: absolute;top: 10rpx;display: flex;justify-content: center;">
  33. <view style="width: 90%;">
  34. <u-search @click="jumpSearch()" disabled input-align="center" :show-action="false" placeholder="请输入要搜索的商品" ></u-search>
  35. </view>
  36. </view> -->
  37. </view>
  38. <!-- 小区信息 -->
  39. <!-- <view class="head" >
  40. <view style="display: flex;align-items: center;margin-bottom: 20upx;padding-top: 10rpx;">
  41. <image src="/static/icon/location.png" style="width: 38upx;height: 38upx;" mode="widthFix"></image>
  42. <text style="color: #fff;font-size: 30upx;margin-left: 10upx;">{{plotName}}</text>
  43. </view>
  44. </view> -->
  45. <view style="padding: 10upx 20upx;background-color: #FFFFFF;" >
  46. <!-- <view>
  47. <image class="imgs" v-for="(item,index) in topAds" :key="index" :src="item.path" mode="widthFix" style="width: 100%;display: block;margin-top: 30upx;" @tap="jumpPromotion(item,index)"></image>
  48. </view> -->
  49. <ls-swiper :lists="headNavList" :swiperType="nav" imgKey="imgUrl" :loop="false" :dots="false" :autoplay='false' :height="380" />
  50. <view style="flex:1;position: relative;">
  51. <!-- <view style="position: absolute;left: 50%;top: 18upx;transform: translateX(-50%);font-size: 32upx;color: #653C00;font-weight: bold;">每日爆款</view> -->
  52. <view v-if="index==0" v-for="(item,index) in indexProduct" :key="index" @tap="onMore(item)" class="everyDay" :style="{backgroundImage: 'url('+(item.path1?item.path1:'')+')'}">
  53. <scroll-view scroll-x="true" >
  54. <view style="display: flex;width: 100%;margin-left: 20upx;">
  55. <view style="display: flex;">
  56. <view v-for="(child,idx) in item.products" :key="idx" @tap.stop="jumpGoodsDes(child.id)" style="padding: 6upx 14upx;height: 158upx;border-radius: 20upx;background-color: #fff;margin-right: 8upx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
  57. <image :src="child.thumbnail" mode="aspectFit" style="width:136upx;height:136upx;"></image>
  58. <view style="min-width: 76upx;font-size: 28upx;font-weight: bold;color:#fff;text-align: center;border-radius: 25px;background-color: #E42F2F;padding: 0 4upx;">
  59. <view style="display: inline-block;font-size: 16upx;margin-top: 8upx;">¥</view>{{child.price}}</view>
  60. </view>
  61. <view style="width: 12upx;"></view>
  62. </view>
  63. </view>
  64. </scroll-view>
  65. </view>
  66. </view>
  67. <view style="display: flex;border-bottom: 2upx solid #f7f7f7;">
  68. <view v-if="index==1||index==2" v-for="(item,index) in indexProduct" :key="index" @tap="onMore(item,item.name,index)" style="width: 314upx;padding: 40upx 20upx 20upx;background-color: #fff;border-right: 2upx solid #f7f7f7;">
  69. <view style="font-size: 28upx;font-weight: bold;">{{item.name}}</view>
  70. <view style="font-size: 20upx;color:#999999;margin-top: 10upx;">{{item.memo}}</view>
  71. <scroll-view scroll-x="true">
  72. <view style="display: flex;width: 100%;">
  73. <view v-for="(child,idx) in item.products" :key="idx" >
  74. <image :src="child.thumbnail" style="width:148upx;height:148upx;margin:20upx 0;background-color:#f7f7f7"></image>
  75. <view style="font-size: 28upx;font-weight: bold;color:#E42F2F;text-align: center;">
  76. <view style="display: inline-block;font-size: 16upx;margin-top: 8upx;">¥</view>{{child.price}}</view>
  77. </view>
  78. </view>
  79. </scroll-view>
  80. </view>
  81. </view>
  82. <!-- <view style="display: flex;border-bottom: 2upx solid #f7f7f7;">
  83. <view v-if="index==1||index==2" v-for="(item,index) in indexProduct" :key="index" @tap="onMore(item,item.name,index)" style="width: 360upx;padding: 40upx 20upx 20upx;background-color: #fff;border-right: 2upx solid #f7f7f7;">
  84. <view style="font-size: 28upx;font-weight: bold;">{{item.name}}</view>
  85. <view style="font-size: 20upx;color:#999999;margin-top: 10upx;">{{item.memo}}</view>
  86. <scroll-view scroll-x="true">
  87. <view style="display: flex;width: 100%;">
  88. <view v-for="(child,idx) in item.products" :key="idx" >
  89. <image :src="child.thumbnail" style="width:148upx;height:148upx;margin:20upx 0;background-color:#f7f7f7"></image>
  90. <view style="font-size: 28upx;font-weight: bold;color:#E42F2F;text-align: center;">
  91. <view style="display: inline-block;font-size: 16upx;margin-top: 8upx;">¥</view>{{child.price}}</view>
  92. </view>
  93. </view>
  94. </scroll-view>
  95. </view>
  96. </view> -->
  97. <!-- <view>
  98. <view v-for="(item,index) in centerAd" :key="index" @tap="jumpPromotion(item,index)" style="margin-top: 20upx;">
  99. <image :src="item.path" mode="widthFix" style="width: 100%;display: block;"></image>
  100. </view>
  101. <view style="display: flex;justify-content: space-between;">
  102. <view v-for="(item,index) in twoAds" :key="index" @tap="jumpPromotion(item,index)" style="flex:1">
  103. <image :src="item.path" mode="widthFix" style="width: 100%;display: block;"></image>
  104. </view>
  105. </view>
  106. </view> -->
  107. <view style="display: block;margin-bottom: 20upx;">
  108. <view v-if="index==3" v-for="(item,index) in indexProduct" :key="index" style="background-color: #fff;padding: 40upx 20upx 25upx;border-bottom-left-radius: 20upx;border-bottom-right-radius: 20upx;">
  109. <view style="display: flex;justify-content: space-between;">
  110. <view>
  111. <view style="font-size: 28upx;font-weight: bold;">{{item.name}}</view>
  112. <view style="font-size: 20upx;margin-top: 10upx;color: #999;">{{item.memo}}</view>
  113. </view>
  114. <view @tap="onMore(item)" style="display: flex;align-items: center;height: 35upx;">
  115. <view style="font-size: 20upx;">查看更多</view>
  116. <image src="http://139.9.103.171:1888/img/image/ic_more.png" mode="aspectFit" style="width: 16upx;height: 16upx;margin-left: 5upx;"></image>
  117. </view>
  118. </view>
  119. <scroll-view scroll-x="true">
  120. <view style="width: 100%;display: flex;">
  121. <view v-for="(child,idx) in item.products" :key="idx" @tap="jumpGoodsDes(child.id)" style="padding: 0 3upx;height: 232upx;border-radius: 20upx;background-color: #fff;margin-top:20upx;margin-right: 20upx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
  122. <view :style="idx==0||idx==1?'backgroundColor:#FFE6E6;border-radius:10upx':'backgroundColor:#FFF3E6;border-radius:10upx'" >
  123. <image :src="child.thumbnail" mode="widthFix" style="width:148upx;height:148upx;display: block;"></image>
  124. </view>
  125. <view v-if="idx==0||idx==1" style="min-width: 76upx;font-size: 28upx;font-weight: bold;color:#fff;text-align: center;margin-top: 20upx;border-radius: 25px;background-color: #E42F2F;padding: 0 4upx;">
  126. <view style="display: inline-block;font-size: 16upx;margin-top: 8upx;">¥</view>{{child.price}}</view>
  127. <view v-else style="min-width: 76upx;font-size: 28upx;font-weight: bold;color:#fff;text-align: center;margin-top: 20upx;border-radius: 25px;background-color: #FFD062;padding: 0 4upx;">
  128. <view style="display: inline-block;font-size: 16upx;margin-top: 8upx;">¥</view>{{child.price}}</view>
  129. </view>
  130. </view>
  131. </scroll-view>
  132. </view>
  133. </view>
  134. </view>
  135. <scroll-view id="scrollView" class="menu_scroll" scroll-x="true" :scroll-left="scrollLeft" :style="{top:DtCustomBarHeight+'px'}">
  136. <view class="menu_type" >
  137. <view v-for="(item,index) in bottomNavList" :key="index" :class="index==menu_index?'type_item_active':'type_item'" @tap="tapGoodsList(item,index)" >
  138. <view style="font-weight:bold;position: relative">
  139. <view
  140. v-if="index==0||index==1"
  141. class="bubble bubble-red">自提</view>
  142. <view
  143. v-if="index==2||index==3"
  144. class="bubble bubble-yellow">包邮</view>
  145. {{item.name}}
  146. </view>
  147. <view style="font-size: 20upx;color: #999999;margin-top: 10upx;">{{item.memo}}</view>
  148. <!-- <view :class="index==menu_index?'type_item_active_line':''"></view> -->
  149. </view>
  150. </view>
  151. </scroll-view>
  152. <!-- <view :style="isTop==1? 'display: block':'display:none'" class="topHeight"></view> -->
  153. <swiper :current="menu_index" duration="300" @change="switchTab" :style="{height:product_unit_height}">
  154. <swiper-item v-for="(item,index) in bottomNavList" :key="index">
  155. <view class="bottom_goods_list">
  156. <!-- <DtGoodsListHome :dataList="item.products"/> -->
  157. <DtGoodsListHome02 :dataList="item.products"/>
  158. </view>
  159. </swiper-item>
  160. </swiper>
  161. <!-- <view class="enIcon">
  162. <view v-for="(item,idx) in navList" :key="idx" class="item">
  163. <button v-if="item.funcType == 8" class="customer-service" open-type="contact" session-from="weapp">
  164. <image :src="item.path"></image>
  165. <text class="enIcon-btn-text">{{item.name}}</text>
  166. </button>
  167. <view class="item2" v-else @tap="tapGoodsList(item)">
  168. <image :src="item.path"></image>
  169. <view class="enIcon-text">{{item.name}}</view>
  170. </view>
  171. </view>
  172. </view> -->
  173. <!-- <view class="ad_banner" v-for="(item,index) in adsList" :key="index">
  174. <image mode="widthFix" :src="item.path" @tap="tapNav(item)"></image>
  175. </view> -->
  176. <!-- <view v-for="(item,idx) in indexProduct" :key="idx">
  177. <view class="goods_list">
  178. <DtUnitHead :title="item.name" :memo="item.memo" @more="onMore(item)" />
  179. <DtGoodsListH :dataList="item.products" :dataItem="item" @more="onMore(item)"/>
  180. </view>
  181. </view>
  182. <view v-for="(item,idx) in navTabsList" :key="idx">
  183. <view v-if="item.layout==0" class="goods_list">
  184. <DtUnitHead :title="item.name" :memo="item.memo" @more="onMore(item)" />
  185. <view class="ad_goods_content">
  186. <view v-if="cidx==0" class="ad_goods_left" v-for="(citem,cidx) in item.tagGroups" :key="cidx" :style="{backgroundImage: 'url('+(citem.path1?citem.path1:'')+')'}" @tap="onMore(citem)">
  187. </view>
  188. <view class="ad_goods_right">
  189. <view v-if="cidx==1||cidx==2" v-for="(citem,cidx) in item.tagGroups" :key="cidx" class="ad_goods_right_item" :style="{backgroundImage: 'url('+(citem.path1?citem.path1:'')+')'}" @tap="onMore(citem)">
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. <view v-if="item.layout==1" class="goods_list">
  195. <DtUnitHead :title="item.name" :memo="item.memo" @more="onMore(item)" />
  196. <DtGoodsListH v-if="item.tagGroups" :dataList="item.tagGroups" :dataItem="item" @more="onMore(item)"/>
  197. </view>
  198. </view> -->
  199. <!-- <view v-if="idx==0" v-for="(item,idx) in indexProduct" :key="idx">
  200. <view class="goods_list">
  201. <DtUnitHead :title="item.name" @more="onMore(item)" />
  202. <view class="ad_goods_content">
  203. <view v-if="cidx==0" class="ad_goods_left" v-for="(citem,cidx) in item.products" :key="cidx" :style="{backgroundImage: 'url('+citem.thumbnail+')'}" @tap="jumpGoodsDes(citem.id)">
  204. <view class="ad_goods_name">{{citem.name}}</view>
  205. <view class="ad_goods_caption">{{citem.caption}}</view>
  206. <view class="gotosee">去看看</view>
  207. </view>
  208. <view class="ad_goods_right">
  209. <view v-if="cidx==1||cidx==2" v-for="(citem,cidx) in item.products" :key="cidx" class="ad_goods_right_item" :style="{backgroundImage: 'url('+citem.thumbnail+')'}" @tap="jumpGoodsDes(citem.id)">
  210. <view class="ad_goods_name">{{citem.name}}</view>
  211. <view class="gotosee">去看看</view>
  212. </view>
  213. </view>
  214. </view>
  215. </view>
  216. </view>-->
  217. <view v-if="couponList.length>0&&couponShow" class="coupon_mengban">
  218. <view class="coupon" @tap="tapToCoupon">
  219. <image src="http://139.9.103.171:1888/img/image/coupon_bg.png" mode="widthFix" style="width: 650upx;height: 680upx;" ></image>
  220. <image class="ic_off" src="http://139.9.103.171:1888/img/image/ic_coupon_off.png" mode="widthFix" @tap.stop="close_coupon"></image>
  221. <scroll-view class="scroll" scroll-y="true">
  222. <view class="coupon_box">
  223. <!-- @tap="tapDrawCoupon(item,index)" -->
  224. <view class="coupon_item" v-if="index<2" v-for="(item,index) in couponList" :key="index">
  225. <image class="coupon_img" src="http://139.9.103.171:1888/img/image/coupon_img_white.png"></image>
  226. <view class="coupon_info">
  227. <text class="coupon_unit">¥</text>
  228. <text class="coupon_amount">{{item.amt}}</text>
  229. </view>
  230. <view style="position: absolute;width: 255upx;top: 0;bottom:0;left: 10upx;display: flex;flex-direction: column;justify-content: center;">
  231. <view class="coupon_name dt-text-row-one">{{item.name}}</view>
  232. <view class="dt-text-row-one" style="font-size: 16upx;color: #999999;">
  233. 有效日期:{{item.beginDate}}至{{item.endDate}}
  234. </view>
  235. </view>
  236. </view>
  237. <!-- <view v-if="couponList.length>2" class="coupon_more" @tap="tapToCoupon">
  238. <view class="more_text">查看更多</view>
  239. <image src="/static/image/arrow.png"></image>
  240. </view> -->
  241. </view>
  242. </scroll-view>
  243. </view>
  244. </view>
  245. <image
  246. v-if="couponList.length>0"
  247. src="http://139.9.103.171:1888/img/image/ic_hongbao.png"
  248. mode="widthFix"
  249. @tap="tapToCoupon"
  250. style="position: fixed;right: 0;bottom: 50upx;width: 150upx;"></image>
  251. <!-- 商品单元列表 -->
  252. <!-- <view v-for="(item,idx) in product" :key="idx"
  253. class="product-unit">
  254. <DtUnitHead :title="item.name" @more="onMore(item)" />
  255. <DtGoodsListH :dataList="item.products" />
  256. <view class="line"></view>
  257. </view> -->
  258. <!-- 微信客服 -->
  259. <!-- <DtService /> -->
  260. </view>
  261. <DtEmpty :type="emptyType" />
  262. <DtLogin ref="dialogLogin" @signIn="onSignIn" />
  263. <!-- <view style="display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 16px;height: 100vh;">
  264. <view style="font-weight: bold;margin-bottom: 18rpx;">小程序已迁移</view>
  265. <navigator style="padding: 10rpx 20rpx;background-color: green;border-radius: 6rpx;color: #fff;" target="miniProgram" open-type="navigate" app-id="wx90680ffd54c3b96c" path="/pagesM/pages/home" extra-data="" version="release">点我前往新的小程序</navigator>
  266. </view> -->
  267. <view style="height: 80rpx;background-color: #F1F1F1;display: flex;justify-content: center;color: #909399;align-items: center;">
  268. <text>没有更多了</text>
  269. </view>
  270. <!-- <view class="text-center margin-top-10" style="font-size: 26rpx;color: #909399;background-color: #FFFFFF;padding: 22rpx;" >
  271. <text>到底了</text>
  272. </view> -->
  273. </view>
  274. </template>
  275. <script>
  276. import ScrollMenu from "@/comps/scroll_menu.vue"
  277. import DtLogin from '@/comps/dt_login.vue'
  278. import DtEmpty from '@/comps/dt_empty.vue'
  279. import DtUnitHead from '@/comps/dt_unit_head_v2.vue'
  280. import DtGoodsListH from '@/comps/dt_goods_list_h.vue'
  281. import lsSwiper from '@/comps/mosowe-swiper.vue'
  282. // import DtService from '@/comps/dt_service.vue'
  283. import DtGoodsListHome from '@/comps/dt_goods_list_home.vue'
  284. import DtGoodsListHome02 from '@/comps/dt_goods_list_home02.vue'
  285. import DtCustomBar from '@/comps/dt_custom_bar.vue'
  286. export default {
  287. components: {
  288. DtLogin,
  289. DtEmpty,
  290. DtUnitHead,
  291. // DtService,
  292. DtGoodsListH,
  293. lsSwiper,
  294. DtGoodsListHome,
  295. ScrollMenu,
  296. DtCustomBar,
  297. DtGoodsListHome02
  298. },
  299. data() {
  300. return {
  301. keyword:'',
  302. plotName:'暂无小区信息',
  303. nav:'nav',
  304. companyAddress: '',
  305. adsList: [], //广告动态
  306. indexProduct:[], // 店铺热卖,店铺推荐....
  307. couponList: [],
  308. navList: [], // 导航列表
  309. memberId: '',
  310. navTabsList:[],
  311. menu_index:0, //tab index
  312. scrollLeft:0,
  313. isTop:0,
  314. myScroll:0,
  315. product_unit_height:1000 + 'px',
  316. show:'block',
  317. headNavList:[],
  318. bottomNavList:[],
  319. headColor:'#D43A39',
  320. startSwitchColor:true,
  321. organizationList:{},
  322. twoAds:[], //中部会场(两行一列)
  323. centerAd:[],
  324. topAds:[], //顶部会场
  325. DtCustomBarHeight:0,
  326. couponShow:true
  327. }
  328. },
  329. mounted(){
  330. },
  331. // 判断是否吸顶
  332. onPageScroll:function(e){
  333. this.getSwiperHeight();
  334. // if(e.scrollTop>=this.myScroll){
  335. // this.isTop = 1;
  336. // }else{
  337. // this.isTop = 0;
  338. // }
  339. const query = uni.createSelectorQuery().in(this);
  340. query.select('#scrollView').boundingClientRect(data => {
  341. if(data.top==this.DtCustomBarHeight){
  342. this.isTop = 1
  343. }else{
  344. this.isTop = 0;
  345. this.myScroll = 0;
  346. }
  347. }).exec();
  348. if(this.isTop==1&&this.myScroll==0){
  349. this.myScroll = e.scrollTop;
  350. }
  351. },
  352. methods: {
  353. // 跳转搜索
  354. jumpSearch(item) {
  355. if (!item) {
  356. uni.navigateTo({
  357. url: "/pagesM/pages/search"
  358. })
  359. } else {
  360. let params = {
  361. keyword: item.name,
  362. productCategoryId: item.id
  363. }
  364. uni.navigateTo({
  365. url: "/pagesM/pages/search?" + this.$util.serialize(params)
  366. })
  367. }
  368. },
  369. switchColor(e){
  370. switch(e.detail.current){
  371. case 0:this.headColor = '#D43A39';
  372. break;
  373. case 1:this.headColor = '#98cb5b';
  374. break;
  375. case 2:this.headColor = '#4f85b2';
  376. }
  377. },
  378. claimGoods(){
  379. uni.navigateTo({
  380. url: "claim_goods"
  381. })
  382. },
  383. openNearbyTeam(){
  384. uni.navigateTo({
  385. url: "/pagesM/pages/nearby_team"
  386. })
  387. },
  388. jumpGoodsDes(id) {
  389. uni.navigateTo({
  390. url: "/pagesM/pages/goods_des?id=" + id
  391. })
  392. },
  393. //动态设置height
  394. getSwiperHeight(){
  395. const query = uni.createSelectorQuery().in(this);
  396. query.selectAll(".bottom_goods_list").boundingClientRect();
  397. query.exec((res) => {
  398. this.product_unit_height =res[0][this.menu_index].height+'px'
  399. })
  400. },
  401. switchTab(e){
  402. // //判断吸顶之后才返回到滚动起始位置
  403. if(this.isTop == 1){
  404. uni.pageScrollTo({
  405.       duration:0,//过渡时间必须为0,uniapp bug,否则运行到手机会报错
  406.       scrollTop:this.myScroll,
  407.     })
  408. }
  409. // if(e.detail.current>4){
  410. // this.scrollLeft = 300
  411. // }else{
  412. // this.scrollLeft = 0
  413. // }
  414. this.menu_index = e.detail.current
  415. this.getSwiperHeight();
  416. },
  417. tapNav(item){
  418. let type = item.type; //0:文本广告,1:图片广告 2:会场广告
  419. if([0,"0"].includes(type)&&item.content){
  420. uni.navigateTo({
  421. url: '/pagesM/pages/common/ad_textView?content=' + item.content
  422. });
  423. }else if([1,"1"].includes(type)&&item.productId){
  424. uni.navigateTo({
  425. url: '/pagesM/pages/goods_des?id=' + item.productId
  426. });
  427. }else if([2,'2'].includes(type)&&item.url){
  428. let url = item.url;
  429. if (this.memberId){
  430. url = url + this.memberId;
  431. console.log('banner 链接 = ' + url)
  432. uni.navigateTo({
  433. url: '/pagesM/pages/common/webview?url=' + encodeURIComponent(url)
  434. });
  435. }
  436. }
  437. },
  438. jumpPromotion(item,specialType){
  439. let type = item.type; //0:文本广告,1:图片广告 2:会场广告
  440. if([0,"0"].includes(type)&&item.content){
  441. uni.navigateTo({
  442. url: '/pagesM/pages/common/ad_textView?content=' + item.content
  443. });
  444. }else if([1,"1"].includes(type)&&item.productId){
  445. uni.navigateTo({
  446. url: '/pagesM/pages/goods_des?id=' + item.productId
  447. });
  448. }else if([2,'2'].includes(type)&&item.url){
  449. // uni.navigateTo({
  450. // url: "../comps/dt_special?url="+item.url+"&title="+item.title+"&style="+type
  451. // })
  452. uni.navigateTo({
  453. url: "/pagesM/comps/promotion_detail?url="+item.url+"&title="+item.title+"&style="+specialType
  454. })
  455. }
  456. },
  457. tapTocategory(){
  458. uni.navigateTo({
  459. url:"/pagseM/pages/category"
  460. })
  461. },
  462. showLogin() {
  463. this.$refs.dialogLogin.show()
  464. },
  465. // 登录成功响应事件
  466. onSignIn(resp) {
  467. this.$util.refreshPage(['pages/home', 'pages/shop_car'])
  468. this.onPullDownRefreshPage()
  469. },
  470. onMore(item,name,theme) {
  471. let params = item.param;
  472. if(name){
  473. uni.navigateTo({
  474. url: "/pagesM/pages/goods_list?params=" + JSON.stringify(params) + '&name=' + name + '&hideTop=true' + '&theme=' + theme + '&path=' + item.path1
  475. })
  476. }else{
  477. uni.navigateTo({
  478. url: "/pagesM/pages/goods_list?params=" + JSON.stringify(params)
  479. })
  480. }
  481. },
  482. close_coupon(){
  483. this.couponShow = false;
  484. },
  485. // 领取优惠券
  486. async tapDrawCoupon(item, index) {
  487. // 领取优惠券需要登录
  488. if (!this.isLogin) {
  489. this.showLogin()
  490. return
  491. }
  492. console.log('get Voucher', item)
  493. try {
  494. let resp = await this.$api.couponExchange({
  495. _isShowLoading: true,
  496. _isReject: true,
  497. memberId: this.memberId,
  498. couponId: item.id
  499. })
  500. if (resp.result) {
  501. this.$dialog.success('领取成功')
  502. item.isReceive = true
  503. this.$set(this.couponList, index, item)
  504. } else {
  505. this.$dialog.error('领取失败')
  506. }
  507. } catch (err) {
  508. // if(err.sysflag === '4010' && err.errmsg === '您已经领取过了'){
  509. // this.$dialog.success('领取成功')
  510. // item.isReceive = true
  511. // this.$set(this.couponList, index, item)
  512. // }else{
  513. this.$dialog.alert({
  514. content: err.errmsg || '领取失败'
  515. })
  516. // }
  517. }
  518. this.close_coupon();
  519. },
  520. // 跳转优惠券
  521. tapToCoupon() {
  522. uni.navigateTo({
  523. url: "/pagesM/pages/coupon_center"
  524. })
  525. },
  526. // 商品列表
  527. tapGoodsList(item,idx) {
  528. this.menu_index = idx;
  529. // var list = [];
  530. // for(let i in this.indexProduct){
  531. // if(item.name==this.indexProduct[i].name){
  532. // list.push(this.indexProduct[i]);
  533. // }
  534. // }
  535. // if(this.product.length>0){
  536. // this.product.splice(0,this.product.length)
  537. // }
  538. // if(list){
  539. // this.product = list.concat()
  540. // }
  541. // if(item.id == null){
  542. // if(item.type == "customerService"){
  543. // }
  544. // }else{
  545. // // let idx =
  546. // // console.log(170,item)
  547. // let params = ''
  548. // if (item.param) {
  549. // // console.log(176,[item.param])
  550. // // params = JSON.stringify([item.param])
  551. // params = JSON.stringify(item.param);
  552. // }
  553. // uni.navigateTo({
  554. // url: '/pages/goods_list?params=' + params
  555. // })
  556. // }
  557. },
  558. // async homeNavAds(){
  559. // let resp = await this.$api.homeNavAds();
  560. // // this.homeNavAds = resp;
  561. // return resp
  562. // },
  563. //获取公司介绍 地址
  564. async lookIntroduction() {
  565. let company = await this.$api.lookIntroduction();
  566. this.companyAddress = company.intelligence.companyAddress;
  567. return company
  568. },
  569. // //查找店铺商品分类
  570. // async getStoreProductCategorys() {
  571. // let productCategoryList = await this.$api.getStoreProductCategorys();
  572. // if(productCategoryList){
  573. // let plen = productCategoryList.length
  574. // if(plen<=2 && plen>0){
  575. // this.getProductChildrenCategorys();
  576. // }else if(plen > 2){
  577. // this.tabList = productCategoryList;
  578. // }else{
  579. // this.tabList = [];
  580. // }
  581. // }else{
  582. // this.tabList = [];
  583. // }
  584. // },
  585. // // 查找子分类
  586. // async getProductChildrenCategorys() {
  587. // let data = {};
  588. // data.id = this.tabList[0].id;
  589. // let childrenCategorys = await this.$api.getProductChildrenCategorys(data);
  590. // this.tabList = childrenCategorys || [];
  591. // },
  592. //店铺首页 广告、导航菜单、公司信息
  593. async storeHomeNavAds() {
  594. let index = await this.$api.storeHomeNavAds();
  595. this.adsList = index.carousel;
  596. this.navList = index.navigation;
  597. this.twoAds.splice(0,this.twoAds.length);
  598. index.twoAds.map((item,index)=>{
  599. if(index!==0){
  600. this.twoAds.push(item)
  601. }
  602. })
  603. this.centerAd.splice(0,this.centerAd.length);
  604. this.centerAd.push(index.twoAds[0]);
  605. this.topAds.splice(0,this.topAds.length);
  606. this.topAds.push(index.ads[0])
  607. return index;
  608. },
  609. // 获取可兑换优惠券,前端隐藏已领取的优惠券
  610. async getCouponByStoreId() {
  611. let resp = await this.$api.getHasExchangeCoupons({
  612. memberId: this.memberId
  613. });
  614. let list = resp || []
  615. list = list.slice(0, 3)
  616. if (this.isLogin) {
  617. list = list.filter((item) => {
  618. return !item.isReceive
  619. })
  620. } else { // 未登录全部显示未领取
  621. list.map((item) => {
  622. item.isReceive = false
  623. return item
  624. })
  625. }
  626. this.couponList = list
  627. return resp
  628. },
  629. async getStoreHomeNavTags(){
  630. let resp = await this.$api.storeHomeNavTags();
  631. // this.navTabsList = resp;
  632. if(resp.length>0){
  633. this.headNavList.splice(0,this.headNavList.length);
  634. resp.map((item)=>{
  635. if(item.name=="中部导航-社区自取"){
  636. this.headNavList.push(item)
  637. }
  638. })
  639. if(this.headNavList[0].tagGroups.length>9){
  640. let obj = {}
  641. let tagGroups = []
  642. this.headNavList[0].tagGroups.map((item,index)=>{
  643. if(index>9){
  644. tagGroups.push(item)
  645. }
  646. })
  647. obj['tagGroups'] = tagGroups
  648. this.headNavList.push(obj)
  649. this.headNavList[0].tagGroups.length = 11
  650. }
  651. }
  652. return resp
  653. },
  654. //首页产品-店铺热卖-店铺推荐
  655. async storeHomeProducts() {
  656. let indexProduct = await this.$api.storeHomeProducts();
  657. if(indexProduct.length>0){
  658. this.indexProduct.splice(0,this.indexProduct.length);
  659. this.bottomNavList.splice(0,this.bottomNavList.length);
  660. this.indexProduct = indexProduct;
  661. this.bottomNavList = indexProduct;
  662. }
  663. return indexProduct
  664. },
  665. async touristLogin() {
  666. // 检查是否登录
  667. this.isLogin = this.$auth.isAuth
  668. if (!this.$auth.isAuth) { // 就算是游客,也重新登录
  669. console.log('需要使用游客身份,执行游客登录!')
  670. let resp = await this.$api.touristLogin()
  671. let userType = this.$global.userType.tourist
  672. this.$auth.login(userType, resp.sessionId, resp.userId, resp)
  673. console.log('游客登录成功!', resp)
  674. } else {
  675. console.log(`已登录!`)
  676. this.$refs.dialogLogin.hide();
  677. }
  678. },
  679. async getProductCategorys() {
  680. let resp = await this.$api.getProductCategorys();
  681. console.log(resp)
  682. if(resp.length>0){
  683. this.headNavList.splice(0,this.headNavList.length);
  684. let obj = {};
  685. let tagGroups = [];
  686. resp.map((item,index)=>{
  687. let childObj = {
  688. path1:item.icon,
  689. name:item.name,
  690. id:item.id
  691. }
  692. tagGroups.push(childObj)
  693. obj['tagGroups'] = tagGroups
  694. })
  695. this.headNavList.push(obj)
  696. if(this.headNavList[0].tagGroups.length>10){
  697. let obj = {}
  698. let tagGroups = []
  699. this.headNavList[0].tagGroups.map((item,index)=>{
  700. if(index>9){
  701. tagGroups.push(item)
  702. }
  703. })
  704. obj['tagGroups'] = tagGroups
  705. this.headNavList.push(obj)
  706. this.headNavList[0].tagGroups.length = 10
  707. }
  708. }
  709. console.log(this.headNavList)
  710. return resp;
  711. },
  712. async loadData() {
  713. // wx.hideShareMenu();
  714. this.$dialog.showLoading('加载中...')
  715. await this.$nextTick(function(){
  716. this.touristLogin()
  717. })
  718. this.memberId = this.$auth.getMemberId();
  719. console.log(this.memberId)
  720. //从缓存中获取小区信息
  721. this.plotName=uni.getStorageSync("plotName") || '暂无小区信息'
  722. let list = []
  723. // list.push(this.getOrganizationList());//附近团
  724. // list.push(this.homeNavAds()); //广告位
  725. list.push(this.lookIntroduction()); // 获取定位地址
  726. // list.push(this.getStoreProductCategorys()); // 分类
  727. list.push(this.getProductCategorys());//产品分类
  728. list.push(this.storeHomeNavAds()); // 轮播广告导航
  729. list.push(this.getCouponByStoreId()); // 优惠券
  730. list.push(this.storeHomeProducts()); // 产品
  731. // list.push(this.getStoreHomeNavTags()); //店铺首页 导航标签组
  732. Promise.race(list).then((resList) => {
  733. console.log(255, resList)
  734. }).catch(err => {
  735. consle.log(err)
  736. }).finally(() => {
  737. this.emptyType = 0
  738. if(this.emptyType==0){
  739. this.show = 'block'
  740. }else{
  741. this.show = 'none'
  742. }
  743. this.$dialog.hideLoading()
  744. })
  745. },
  746. getParam(e){
  747. // 用来保存所有的属性名称和值
  748. let param = "";
  749. // 开始遍历
  750. for(let p in e){
  751. // 方法
  752. if(typeof(e[p])!="function" && p != 'type'){
  753. // p 为属性名称,e[p]为对应属性的值
  754. param += (param.length > 1 ? '&' : '') + p + "=" + e[p];
  755. }
  756. }
  757. // 最后显示所有的属性
  758. return param;
  759. },
  760. execParam(){
  761. let _this = this;
  762. if(this.e != null){
  763. setTimeout(function(){
  764. if(_this.e == null) return;
  765. if(_this.e.type == "share"){
  766. let path = _this.e.path == null || _this.e.path.length <= 0 ? 'pagesM/pages/goods_des' : '/' + _this.e.path;
  767. let param = _this.getParam(_this.e);
  768. let url = `${path}?${param}`;
  769. console.error("url = " + url);
  770. _this.e = null;
  771. uni.navigateTo({url: url});
  772. }
  773. }, 1000);
  774. }
  775. },
  776. async getOrganizationList(){
  777. let resp = await this.$api.getOrganizationList({
  778. _isPull: this.isPull,
  779. pageNo: 1,
  780. pageSize: 1
  781. });
  782. this.organizationList = resp[0];
  783. },
  784. },
  785. onShow() {
  786. this.execParam();
  787. this.onShowPage();
  788. this.loadData();
  789. },
  790. onLoad(e) {
  791. this.e = e;
  792. console.log(e)
  793. //二维码扫描链接 start
  794. if(e != null && e.q != null){
  795. let url = decodeURIComponent(e.q);
  796. let param = {};
  797. // 把参数按&拆分成数组
  798. let index = url.indexOf("?");
  799. let query = url.substring(index+1,index.length);
  800. var param_arr = query.split("&");
  801. for (var i = 0; i < param_arr.length; i++) {
  802. var pair = param_arr[i].split("=");
  803. param[pair[0]]=pair[1];
  804. }
  805. if(param['type'] == "share"){
  806. let path = 'pagesM/pages/goods_des';
  807. let params = `id=${param['id']}&storeId=${param['storeId']}&inviteCode=${param['inviteCode']}`
  808. let url = `${path}?${params}`;
  809. console.error("url = " + url);
  810. this.e = null;
  811. uni.navigateTo({url: url});
  812. }
  813. }
  814. //二维码扫描链接 end
  815. this.execParam();
  816. wx.showShareMenu({
  817. withShareTicket: true
  818. })
  819. },
  820. }
  821. </script>
  822. <style lang="scss" scoped>
  823. .search-wrap {
  824. margin: 0 20rpx;
  825. display: flex;
  826. }
  827. .home{
  828. // background-color: #fff;
  829. // background-image: url(/static/image/home_bg.jpg);
  830. // background-size: contain;
  831. // background-repeat-y: repeat;
  832. }
  833. .head {
  834. padding: 0 20upx;
  835. // height:300upx;
  836. height: 250upx;
  837. border-bottom-left-radius: 10%;
  838. border-bottom-right-radius: 10%;
  839. // transition: 0.5s linear all;
  840. .address {
  841. display: flex;
  842. flex-direction: row;
  843. align-items: center;
  844. padding: 24upx 0;
  845. image {
  846. width: 27upx;
  847. height: 35upx;
  848. padding-right: 20upx;
  849. }
  850. .address_text {
  851. flex: 1;
  852. font-size: 28upx;
  853. color: #fff;
  854. letter-spacing: 2upx;
  855. }
  856. }
  857. .search{
  858. height: 60upx;
  859. display: flex;
  860. flex-direction: row;
  861. align-items: center;
  862. .icon{
  863. width: 32upx;
  864. height: 32upx;
  865. }
  866. .icon_message{
  867. width: 40upx;
  868. height: 40upx;
  869. // background-image: url(/static/image/ic_message.png);
  870. background-size: 100%;
  871. background-color: transparent;
  872. }
  873. .search_content{
  874. height: 60upx;
  875. border-radius: 35upx;
  876. display: flex;
  877. flex-direction: row;
  878. align-items: center;
  879. background: #fff;
  880. font-size: 24upx;
  881. flex: 1;
  882. .search_icon {
  883. width: 24upx;
  884. height: 24upx;
  885. margin: 0 30upx;
  886. }
  887. .search_input {
  888. flex: 1;
  889. height: 60upx;
  890. }
  891. }
  892. }
  893. }
  894. .banner {
  895. height: 380upx;
  896. overflow: hidden;
  897. .swiper {
  898. height: 100%;
  899. width: 100%;
  900. image {
  901. width: 100%;
  902. height: 100%;
  903. }
  904. }
  905. }
  906. .ad_banner{
  907. image{
  908. width: 100%;
  909. display: block;
  910. margin-bottom: 34upx;
  911. }
  912. }
  913. .ad_goods_content{
  914. margin: 0 20upx;
  915. display: flex;
  916. .ad_goods_left{
  917. flex:1;
  918. height:340upx;
  919. margin-right: 20upx;
  920. // background-color:#fff;
  921. // border-radius:10px;
  922. position: relative;
  923. background-repeat: no-repeat;
  924. background-size: 100% 100%;
  925. }
  926. .ad_goods_right{
  927. flex:1;
  928. height:340upx;
  929. display: flex;
  930. flex-direction: column;
  931. justify-content: space-between;
  932. .ad_goods_right_item{
  933. height:160upx;
  934. // background-color:#fff;
  935. // border-radius:10px;
  936. position: relative;
  937. background-repeat: no-repeat;
  938. background-size: 100% 100%;
  939. }
  940. }
  941. .ad_goods_name{
  942. font-size:36upx;
  943. font-weight:800;
  944. color:rgba(51,51,51,1);
  945. position: absolute;
  946. top:20upx;
  947. left:20upx;
  948. }
  949. .ad_goods_caption{
  950. font-size:22upx;
  951. font-weight:400;
  952. color:rgba(153,153,153,1);
  953. margin-top: 10upx;
  954. position: absolute;
  955. top:60upx;
  956. left:20upx;
  957. }
  958. .gotosee{
  959. border-radius: 25upx;
  960. height:50upx;
  961. width:100upx;
  962. font-size: 24upx;
  963. text-align: center;
  964. line-height: 50upx;
  965. background-color: $dt-color-primary;
  966. position: absolute;
  967. bottom:20upx;
  968. left:20upx;
  969. color:#fff
  970. }
  971. }
  972. .enIcon {
  973. display: flex;
  974. flex-direction: row;
  975. flex-wrap: wrap;
  976. align-items: center;
  977. padding: 30upx 0upx;
  978. .item {
  979. width: 25%;
  980. display: flex;
  981. flex-direction: column;
  982. align-items: center;
  983. padding-top: 30upx;
  984. .item2{
  985. display: flex;
  986. justify-items: center;
  987. align-items: center;
  988. flex-direction: column;
  989. }
  990. // 客服按钮
  991. .customer-service{
  992. display: flex;
  993. flex-direction: column;
  994. justify-content: center;
  995. align-items: center;
  996. background-color:transparent;
  997. border:0;
  998. }
  999. image {
  1000. width: 80upx;
  1001. height: 80upx;
  1002. // border-radius: 50%;
  1003. }
  1004. .enIcon-btn-text{
  1005. font-size: 0.7rem;
  1006. margin-top: 10upx;
  1007. line-height: 40upx;
  1008. color: #353535;
  1009. }
  1010. .enIcon-text {
  1011. margin-top: 10upx;
  1012. font-size: 0.7rem;
  1013. color: #353535;
  1014. }
  1015. }
  1016. }
  1017. .menu_scroll{
  1018. position:sticky;
  1019. z-index:9;
  1020. white-space: nowrap;
  1021. background-color: #f2f2f2;
  1022. width: 100%;
  1023. .menu_type{
  1024. display: flex;
  1025. height:110upx;
  1026. padding-top: 20upx;
  1027. align-items: center;
  1028. .type_item{
  1029. text-align: center;
  1030. flex:1;
  1031. font-size:28upx;
  1032. }
  1033. .type_item_active{
  1034. text-align: center;
  1035. flex:1;
  1036. font-size:28upx;
  1037. color:#DB4444;
  1038. }
  1039. .type_item_active_line{
  1040. width:95upx;
  1041. height:5upx;
  1042. background: $dt-color-primary;
  1043. margin: 0 auto;
  1044. }
  1045. }
  1046. }
  1047. .coupon_mengban{
  1048. transition: all 3s ease;
  1049. position: fixed;
  1050. top: 0;
  1051. bottom: 0;
  1052. right:0;
  1053. left:0;
  1054. background-color: rgba(0,0,0,0.7);
  1055. z-index: 1;
  1056. display: flex;
  1057. align-items: center;
  1058. justify-content: center;
  1059. z-index: 9;
  1060. .coupon {
  1061. width: 650upx;
  1062. position: relative;
  1063. display: flex;
  1064. flex-direction: column;
  1065. justify-content: center;
  1066. align-items: center;
  1067. .scroll {
  1068. width: 425upx;
  1069. top: 60upx;
  1070. bottom: 250upx;
  1071. position: absolute;
  1072. .coupon_box {
  1073. .coupon_item {
  1074. position: relative;
  1075. height: 120upx;
  1076. margin-bottom: 5upx;
  1077. // padding: 0 15upx;
  1078. .coupon_img {
  1079. width: 420upx;
  1080. height: 120upx;
  1081. }
  1082. .coupon_info {
  1083. position: absolute;
  1084. top: 50%;
  1085. right: 0upx;
  1086. text-align: center;
  1087. width: 150upx;
  1088. text-align: center;
  1089. transform: translate(0, -50%);
  1090. color: #d73024;
  1091. font-weight: bold;
  1092. .coupon_amount {
  1093. font-size: 40upx;
  1094. }
  1095. .coupon_unit {
  1096. font-size: 20upx;
  1097. }
  1098. }
  1099. .coupon_name {
  1100. color: #d73024;
  1101. font-size: 30upx;
  1102. font-weight: bold;
  1103. margin-bottom: 20upx;
  1104. }
  1105. }
  1106. .coupon_more {
  1107. display: flex;
  1108. flex-direction: row;
  1109. align-items: center;
  1110. padding: 0 30upx;
  1111. .more_text {
  1112. font-size: 22upx;
  1113. color: #999;
  1114. width: 60upx;
  1115. text-align: center;
  1116. margin-right: 10upx;
  1117. }
  1118. image {
  1119. width: 10upx;
  1120. height: 18upx;
  1121. }
  1122. }
  1123. }
  1124. }
  1125. .ic_off{
  1126. width: 50upx;
  1127. height: 50upx;
  1128. position: absolute;
  1129. bottom: -100upx;
  1130. z-index:10
  1131. }
  1132. }
  1133. }
  1134. .line {
  1135. width: 100%;
  1136. height: 20upx;
  1137. background: #f2f2f2;
  1138. }
  1139. .everyDay{
  1140. height:210upx;
  1141. border-radius: 20upx;
  1142. background-repeat: no-repeat;
  1143. background-size: 100% 100%;
  1144. padding-top: 80upx;
  1145. }
  1146. .bubble{
  1147. position: absolute;
  1148. top: -28upx;
  1149. right: 20upx;
  1150. width: 50upx;
  1151. height: 28upx;
  1152. background-size: 100% 100%;
  1153. background-repeat: no-repeat;
  1154. color: #fff;
  1155. font-size: 16upx;
  1156. text-align: center;
  1157. line-height: 28upx;
  1158. float: right;
  1159. }
  1160. .bubble-red{
  1161. background-image: url("http://139.9.103.171:1888/img/image/bubble_red.png");
  1162. }
  1163. .bubble-yellow{
  1164. background-image: url("http://139.9.103.171:1888/img/image/bubble_yellow.png");
  1165. }
  1166. </style>