life.vue 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234
  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. console.log(item)
  356. if (!item) {
  357. uni.navigateTo({
  358. url: "/pagesM/pages/search"
  359. })
  360. } else {
  361. let params = {
  362. keyword: item.name,
  363. productCategoryId: item.id
  364. }
  365. uni.navigateTo({
  366. url: "/pagesM/pages/search?" + this.$util.serialize(params)
  367. })
  368. }
  369. },
  370. switchColor(e){
  371. switch(e.detail.current){
  372. case 0:this.headColor = '#D43A39';
  373. break;
  374. case 1:this.headColor = '#98cb5b';
  375. break;
  376. case 2:this.headColor = '#4f85b2';
  377. }
  378. },
  379. claimGoods(){
  380. uni.navigateTo({
  381. url: "claim_goods"
  382. })
  383. },
  384. openNearbyTeam(){
  385. uni.navigateTo({
  386. url: "/pagesM/pages/nearby_team"
  387. })
  388. },
  389. jumpGoodsDes(id) {
  390. uni.navigateTo({
  391. url: "/pagesM/pages/goods_des?id=" + id
  392. })
  393. },
  394. //动态设置height
  395. getSwiperHeight(){
  396. const query = uni.createSelectorQuery().in(this);
  397. query.selectAll(".bottom_goods_list").boundingClientRect();
  398. query.exec((res) => {
  399. this.product_unit_height =res[0][this.menu_index].height+'px'
  400. })
  401. },
  402. switchTab(e){
  403. // //判断吸顶之后才返回到滚动起始位置
  404. if(this.isTop == 1){
  405. uni.pageScrollTo({
  406.       duration:0,//过渡时间必须为0,uniapp bug,否则运行到手机会报错
  407.       scrollTop:this.myScroll,
  408.     })
  409. }
  410. // if(e.detail.current>4){
  411. // this.scrollLeft = 300
  412. // }else{
  413. // this.scrollLeft = 0
  414. // }
  415. this.menu_index = e.detail.current
  416. this.getSwiperHeight();
  417. },
  418. tapNav(item){
  419. let type = item.type; //0:文本广告,1:图片广告 2:会场广告
  420. if([0,"0"].includes(type)&&item.content){
  421. uni.navigateTo({
  422. url: '/pagesM/pages/common/ad_textView?content=' + item.content
  423. });
  424. }else if([1,"1"].includes(type)&&item.productId){
  425. uni.navigateTo({
  426. url: '/pagesM/pages/goods_des?id=' + item.productId
  427. });
  428. }else if([2,'2'].includes(type)&&item.url){
  429. let url = item.url;
  430. if (this.memberId){
  431. url = url + this.memberId;
  432. console.log('banner 链接 = ' + url)
  433. uni.navigateTo({
  434. url: '/pagesM/pages/common/webview?url=' + encodeURIComponent(url)
  435. });
  436. }
  437. }
  438. },
  439. jumpPromotion(item,specialType){
  440. let type = item.type; //0:文本广告,1:图片广告 2:会场广告
  441. if([0,"0"].includes(type)&&item.content){
  442. uni.navigateTo({
  443. url: '/pagesM/pages/common/ad_textView?content=' + item.content
  444. });
  445. }else if([1,"1"].includes(type)&&item.productId){
  446. uni.navigateTo({
  447. url: '/pagesM/pages/goods_des?id=' + item.productId
  448. });
  449. }else if([2,'2'].includes(type)&&item.url){
  450. // uni.navigateTo({
  451. // url: "../comps/dt_special?url="+item.url+"&title="+item.title+"&style="+type
  452. // })
  453. uni.navigateTo({
  454. url: "/pagesM/comps/promotion_detail?url="+item.url+"&title="+item.title+"&style="+specialType
  455. })
  456. }
  457. },
  458. tapTocategory(){
  459. uni.navigateTo({
  460. url:"/pagseM/pages/category"
  461. })
  462. },
  463. showLogin() {
  464. this.$refs.dialogLogin.show()
  465. },
  466. // 登录成功响应事件
  467. onSignIn(resp) {
  468. // console.log(143, resp)
  469. this.$util.refreshPage(['pages/home', 'pages/shop_car'])
  470. this.onPullDownRefreshPage()
  471. },
  472. onMore(item,name,theme) {
  473. let params = item.param;
  474. if(name){
  475. uni.navigateTo({
  476. url: "/pagesM/pages/goods_list?params=" + JSON.stringify(params) + '&name=' + name + '&hideTop=true' + '&theme=' + theme + '&path=' + item.path1
  477. })
  478. }else{
  479. uni.navigateTo({
  480. url: "/pagesM/pages/goods_list?params=" + JSON.stringify(params)
  481. })
  482. }
  483. },
  484. close_coupon(){
  485. this.couponShow = false;
  486. },
  487. // 领取优惠券
  488. async tapDrawCoupon(item, index) {
  489. // 领取优惠券需要登录
  490. if (!this.isLogin) {
  491. this.showLogin()
  492. return
  493. }
  494. console.log('get Voucher', item)
  495. try {
  496. let resp = await this.$api.couponExchange({
  497. _isShowLoading: true,
  498. _isReject: true,
  499. memberId: this.memberId,
  500. couponId: item.id
  501. })
  502. if (resp.result) {
  503. this.$dialog.success('领取成功')
  504. item.isReceive = true
  505. this.$set(this.couponList, index, item)
  506. } else {
  507. this.$dialog.error('领取失败')
  508. }
  509. } catch (err) {
  510. // if(err.sysflag === '4010' && err.errmsg === '您已经领取过了'){
  511. // this.$dialog.success('领取成功')
  512. // item.isReceive = true
  513. // this.$set(this.couponList, index, item)
  514. // }else{
  515. this.$dialog.alert({
  516. content: err.errmsg || '领取失败'
  517. })
  518. // }
  519. }
  520. this.close_coupon();
  521. },
  522. // 跳转优惠券
  523. tapToCoupon() {
  524. uni.navigateTo({
  525. url: "/pagesM/pages/coupon_center"
  526. })
  527. },
  528. // 商品列表
  529. tapGoodsList(item,idx) {
  530. this.menu_index = idx;
  531. // var list = [];
  532. // for(let i in this.indexProduct){
  533. // if(item.name==this.indexProduct[i].name){
  534. // list.push(this.indexProduct[i]);
  535. // }
  536. // }
  537. // if(this.product.length>0){
  538. // this.product.splice(0,this.product.length)
  539. // }
  540. // if(list){
  541. // this.product = list.concat()
  542. // }
  543. // if(item.id == null){
  544. // if(item.type == "customerService"){
  545. // }
  546. // }else{
  547. // // let idx =
  548. // // console.log(170,item)
  549. // let params = ''
  550. // if (item.param) {
  551. // // console.log(176,[item.param])
  552. // // params = JSON.stringify([item.param])
  553. // params = JSON.stringify(item.param);
  554. // }
  555. // uni.navigateTo({
  556. // url: '/pages/goods_list?params=' + params
  557. // })
  558. // }
  559. },
  560. // async homeNavAds(){
  561. // let resp = await this.$api.homeNavAds();
  562. // // this.homeNavAds = resp;
  563. // return resp
  564. // },
  565. //获取公司介绍 地址
  566. async lookIntroduction() {
  567. let company = await this.$api.lookIntroduction();
  568. this.companyAddress = company.intelligence.companyAddress;
  569. return company
  570. },
  571. // //查找店铺商品分类
  572. // async getStoreProductCategorys() {
  573. // let productCategoryList = await this.$api.getStoreProductCategorys();
  574. // if(productCategoryList){
  575. // let plen = productCategoryList.length
  576. // if(plen<=2 && plen>0){
  577. // this.getProductChildrenCategorys();
  578. // }else if(plen > 2){
  579. // this.tabList = productCategoryList;
  580. // }else{
  581. // this.tabList = [];
  582. // }
  583. // }else{
  584. // this.tabList = [];
  585. // }
  586. // },
  587. // // 查找子分类
  588. // async getProductChildrenCategorys() {
  589. // let data = {};
  590. // data.id = this.tabList[0].id;
  591. // let childrenCategorys = await this.$api.getProductChildrenCategorys(data);
  592. // this.tabList = childrenCategorys || [];
  593. // },
  594. //店铺首页 广告、导航菜单、公司信息
  595. async storeHomeNavAds() {
  596. let index = await this.$api.storeHomeNavAds();
  597. this.adsList = index.carousel;
  598. this.navList = index.navigation;
  599. this.twoAds.splice(0,this.twoAds.length);
  600. index.twoAds.map((item,index)=>{
  601. if(index!==0){
  602. this.twoAds.push(item)
  603. }
  604. })
  605. this.centerAd.splice(0,this.centerAd.length);
  606. this.centerAd.push(index.twoAds[0]);
  607. this.topAds.splice(0,this.topAds.length);
  608. this.topAds.push(index.ads[0])
  609. return index;
  610. },
  611. // 获取可兑换优惠券,前端隐藏已领取的优惠券
  612. async getCouponByStoreId() {
  613. let resp = await this.$api.getHasExchangeCoupons({
  614. memberId: this.memberId
  615. });
  616. let list = resp || []
  617. list = list.slice(0, 3)
  618. if (this.isLogin) {
  619. list = list.filter((item) => {
  620. return !item.isReceive
  621. })
  622. } else { // 未登录全部显示未领取
  623. list.map((item) => {
  624. item.isReceive = false
  625. return item
  626. })
  627. }
  628. this.couponList = list
  629. return resp
  630. },
  631. async getStoreHomeNavTags(){
  632. let resp = await this.$api.storeHomeNavTags();
  633. // this.navTabsList = resp;
  634. if(resp.length>0){
  635. this.headNavList.splice(0,this.headNavList.length);
  636. resp.map((item)=>{
  637. if(item.name=="中部导航-社区自取"){
  638. this.headNavList.push(item)
  639. }
  640. })
  641. if(this.headNavList[0].tagGroups.length>9){
  642. let obj = {}
  643. let tagGroups = []
  644. this.headNavList[0].tagGroups.map((item,index)=>{
  645. if(index>9){
  646. tagGroups.push(item)
  647. }
  648. })
  649. obj['tagGroups'] = tagGroups
  650. this.headNavList.push(obj)
  651. this.headNavList[0].tagGroups.length = 11
  652. }
  653. }
  654. return resp
  655. },
  656. //首页产品-店铺热卖-店铺推荐
  657. async storeHomeProducts() {
  658. let indexProduct = await this.$api.storeHomeProducts();
  659. if(indexProduct.length>0){
  660. this.indexProduct.splice(0,this.indexProduct.length);
  661. this.bottomNavList.splice(0,this.bottomNavList.length);
  662. this.indexProduct = indexProduct;
  663. this.bottomNavList = indexProduct;
  664. }
  665. return indexProduct
  666. },
  667. async touristLogin() {
  668. // 检查是否登录
  669. this.isLogin = this.$auth.isAuth
  670. if (!this.$auth.isAuth) { // 就算是游客,也重新登录
  671. console.log('需要使用游客身份,执行游客登录!')
  672. let resp = await this.$api.touristLogin()
  673. let userType = this.$global.userType.tourist
  674. this.$auth.login(userType, resp.sessionId, resp.userId, resp)
  675. console.log('游客登录成功!', resp)
  676. } else {
  677. console.log(`已登录!`)
  678. this.$refs.dialogLogin.hide();
  679. }
  680. },
  681. async getProductCategorys() {
  682. let resp = await this.$api.getProductCategorys();
  683. console.log(resp)
  684. if(resp.length>0){
  685. this.headNavList.splice(0,this.headNavList.length);
  686. let obj = {};
  687. let tagGroups = [];
  688. resp.map((item,index)=>{
  689. let childObj = {
  690. path1:item.icon,
  691. name:item.name,
  692. id:item.id
  693. }
  694. tagGroups.push(childObj)
  695. obj['tagGroups'] = tagGroups
  696. })
  697. this.headNavList.push(obj)
  698. if(this.headNavList[0].tagGroups.length>10){
  699. let obj = {}
  700. let tagGroups = []
  701. this.headNavList[0].tagGroups.map((item,index)=>{
  702. if(index>9){
  703. tagGroups.push(item)
  704. }
  705. })
  706. obj['tagGroups'] = tagGroups
  707. this.headNavList.push(obj)
  708. this.headNavList[0].tagGroups.length = 10
  709. }
  710. }
  711. console.log(this.headNavList)
  712. return resp;
  713. },
  714. async loadData() {
  715. // wx.hideShareMenu();
  716. this.$dialog.showLoading('加载中...')
  717. await this.$nextTick(function(){
  718. this.touristLogin()
  719. })
  720. this.memberId = this.$auth.getMemberId();
  721. console.log(this.memberId)
  722. //从缓存中获取小区信息
  723. this.plotName=uni.getStorageSync("plotName") || '暂无小区信息'
  724. let list = []
  725. // list.push(this.getOrganizationList());//附近团
  726. // list.push(this.homeNavAds()); //广告位
  727. list.push(this.lookIntroduction()); // 获取定位地址
  728. // list.push(this.getStoreProductCategorys()); // 分类
  729. list.push(this.getProductCategorys());//产品分类
  730. list.push(this.storeHomeNavAds()); // 轮播广告导航
  731. list.push(this.getCouponByStoreId()); // 优惠券
  732. list.push(this.storeHomeProducts()); // 产品
  733. // list.push(this.getStoreHomeNavTags()); //店铺首页 导航标签组
  734. Promise.race(list).then((resList) => {
  735. console.log(255, resList)
  736. }).catch(err => {
  737. consle.log(err)
  738. }).finally(() => {
  739. this.emptyType = 0
  740. if(this.emptyType==0){
  741. this.show = 'block'
  742. }else{
  743. this.show = 'none'
  744. }
  745. this.$dialog.hideLoading()
  746. })
  747. },
  748. getParam(e){
  749. // 用来保存所有的属性名称和值
  750. let param = "";
  751. // 开始遍历
  752. for(let p in e){
  753. // 方法
  754. if(typeof(e[p])!="function" && p != 'type'){
  755. // p 为属性名称,e[p]为对应属性的值
  756. param += (param.length > 1 ? '&' : '') + p + "=" + e[p];
  757. }
  758. }
  759. // 最后显示所有的属性
  760. return param;
  761. },
  762. execParam(){
  763. let _this = this;
  764. if(this.e != null){
  765. setTimeout(function(){
  766. if(_this.e == null) return;
  767. if(_this.e.type == "share"){
  768. let path = _this.e.path == null || _this.e.path.length <= 0 ? 'pagesM/pages/goods_des' : '/' + _this.e.path;
  769. let param = _this.getParam(_this.e);
  770. let url = `${path}?${param}`;
  771. console.error("url = " + url);
  772. _this.e = null;
  773. uni.navigateTo({url: url});
  774. }
  775. }, 1000);
  776. }
  777. },
  778. async getOrganizationList(){
  779. let resp = await this.$api.getOrganizationList({
  780. _isPull: this.isPull,
  781. pageNo: 1,
  782. pageSize: 1
  783. });
  784. this.organizationList = resp[0];
  785. },
  786. },
  787. onShow() {
  788. this.execParam();
  789. this.onShowPage();
  790. this.loadData();
  791. },
  792. onLoad(e) {
  793. this.e = e;
  794. console.log(e)
  795. //二维码扫描链接 start
  796. if(e != null && e.q != null){
  797. let url = decodeURIComponent(e.q);
  798. let param = {};
  799. // 把参数按&拆分成数组
  800. let index = url.indexOf("?");
  801. let query = url.substring(index+1,index.length);
  802. var param_arr = query.split("&");
  803. for (var i = 0; i < param_arr.length; i++) {
  804. var pair = param_arr[i].split("=");
  805. param[pair[0]]=pair[1];
  806. }
  807. if(param['type'] == "share"){
  808. let path = 'pagesM/pages/goods_des';
  809. let params = `id=${param['id']}&storeId=${param['storeId']}&inviteCode=${param['inviteCode']}`
  810. let url = `${path}?${params}`;
  811. console.error("url = " + url);
  812. this.e = null;
  813. uni.navigateTo({url: url});
  814. }
  815. }
  816. //二维码扫描链接 end
  817. this.execParam();
  818. wx.showShareMenu({
  819. withShareTicket: true
  820. })
  821. },
  822. }
  823. </script>
  824. <style lang="scss" scoped>
  825. .search-wrap {
  826. margin: 0 20rpx;
  827. display: flex;
  828. }
  829. .home{
  830. // background-color: #fff;
  831. // background-image: url(/static/image/home_bg.jpg);
  832. // background-size: contain;
  833. // background-repeat-y: repeat;
  834. }
  835. .head {
  836. padding: 0 20upx;
  837. // height:300upx;
  838. height: 250upx;
  839. border-bottom-left-radius: 10%;
  840. border-bottom-right-radius: 10%;
  841. // transition: 0.5s linear all;
  842. .address {
  843. display: flex;
  844. flex-direction: row;
  845. align-items: center;
  846. padding: 24upx 0;
  847. image {
  848. width: 27upx;
  849. height: 35upx;
  850. padding-right: 20upx;
  851. }
  852. .address_text {
  853. flex: 1;
  854. font-size: 28upx;
  855. color: #fff;
  856. letter-spacing: 2upx;
  857. }
  858. }
  859. .search{
  860. height: 60upx;
  861. display: flex;
  862. flex-direction: row;
  863. align-items: center;
  864. .icon{
  865. width: 32upx;
  866. height: 32upx;
  867. }
  868. .icon_message{
  869. width: 40upx;
  870. height: 40upx;
  871. // background-image: url(/static/image/ic_message.png);
  872. background-size: 100%;
  873. background-color: transparent;
  874. }
  875. .search_content{
  876. height: 60upx;
  877. border-radius: 35upx;
  878. display: flex;
  879. flex-direction: row;
  880. align-items: center;
  881. background: #fff;
  882. font-size: 24upx;
  883. flex: 1;
  884. .search_icon {
  885. width: 24upx;
  886. height: 24upx;
  887. margin: 0 30upx;
  888. }
  889. .search_input {
  890. flex: 1;
  891. height: 60upx;
  892. }
  893. }
  894. }
  895. }
  896. .banner {
  897. height: 380upx;
  898. overflow: hidden;
  899. .swiper {
  900. height: 100%;
  901. width: 100%;
  902. image {
  903. width: 100%;
  904. height: 100%;
  905. }
  906. }
  907. }
  908. .ad_banner{
  909. image{
  910. width: 100%;
  911. display: block;
  912. margin-bottom: 34upx;
  913. }
  914. }
  915. .ad_goods_content{
  916. margin: 0 20upx;
  917. display: flex;
  918. .ad_goods_left{
  919. flex:1;
  920. height:340upx;
  921. margin-right: 20upx;
  922. // background-color:#fff;
  923. // border-radius:10px;
  924. position: relative;
  925. background-repeat: no-repeat;
  926. background-size: 100% 100%;
  927. }
  928. .ad_goods_right{
  929. flex:1;
  930. height:340upx;
  931. display: flex;
  932. flex-direction: column;
  933. justify-content: space-between;
  934. .ad_goods_right_item{
  935. height:160upx;
  936. // background-color:#fff;
  937. // border-radius:10px;
  938. position: relative;
  939. background-repeat: no-repeat;
  940. background-size: 100% 100%;
  941. }
  942. }
  943. .ad_goods_name{
  944. font-size:36upx;
  945. font-weight:800;
  946. color:rgba(51,51,51,1);
  947. position: absolute;
  948. top:20upx;
  949. left:20upx;
  950. }
  951. .ad_goods_caption{
  952. font-size:22upx;
  953. font-weight:400;
  954. color:rgba(153,153,153,1);
  955. margin-top: 10upx;
  956. position: absolute;
  957. top:60upx;
  958. left:20upx;
  959. }
  960. .gotosee{
  961. border-radius: 25upx;
  962. height:50upx;
  963. width:100upx;
  964. font-size: 24upx;
  965. text-align: center;
  966. line-height: 50upx;
  967. background-color: $dt-color-primary;
  968. position: absolute;
  969. bottom:20upx;
  970. left:20upx;
  971. color:#fff
  972. }
  973. }
  974. .enIcon {
  975. display: flex;
  976. flex-direction: row;
  977. flex-wrap: wrap;
  978. align-items: center;
  979. padding: 30upx 0upx;
  980. .item {
  981. width: 25%;
  982. display: flex;
  983. flex-direction: column;
  984. align-items: center;
  985. padding-top: 30upx;
  986. .item2{
  987. display: flex;
  988. justify-items: center;
  989. align-items: center;
  990. flex-direction: column;
  991. }
  992. // 客服按钮
  993. .customer-service{
  994. display: flex;
  995. flex-direction: column;
  996. justify-content: center;
  997. align-items: center;
  998. background-color:transparent;
  999. border:0;
  1000. }
  1001. image {
  1002. width: 80upx;
  1003. height: 80upx;
  1004. // border-radius: 50%;
  1005. }
  1006. .enIcon-btn-text{
  1007. font-size: 0.7rem;
  1008. margin-top: 10upx;
  1009. line-height: 40upx;
  1010. color: #353535;
  1011. }
  1012. .enIcon-text {
  1013. margin-top: 10upx;
  1014. font-size: 0.7rem;
  1015. color: #353535;
  1016. }
  1017. }
  1018. }
  1019. .menu_scroll{
  1020. position:sticky;
  1021. z-index:9;
  1022. white-space: nowrap;
  1023. background-color: #f2f2f2;
  1024. width: 100%;
  1025. .menu_type{
  1026. display: flex;
  1027. height:110upx;
  1028. padding-top: 20upx;
  1029. align-items: center;
  1030. .type_item{
  1031. text-align: center;
  1032. flex:1;
  1033. font-size:28upx;
  1034. }
  1035. .type_item_active{
  1036. text-align: center;
  1037. flex:1;
  1038. font-size:28upx;
  1039. color:#DB4444;
  1040. }
  1041. .type_item_active_line{
  1042. width:95upx;
  1043. height:5upx;
  1044. background: $dt-color-primary;
  1045. margin: 0 auto;
  1046. }
  1047. }
  1048. }
  1049. .coupon_mengban{
  1050. transition: all 3s ease;
  1051. position: fixed;
  1052. top: 0;
  1053. bottom: 0;
  1054. right:0;
  1055. left:0;
  1056. background-color: rgba(0,0,0,0.7);
  1057. z-index: 1;
  1058. display: flex;
  1059. align-items: center;
  1060. justify-content: center;
  1061. z-index: 9;
  1062. .coupon {
  1063. width: 650upx;
  1064. position: relative;
  1065. display: flex;
  1066. flex-direction: column;
  1067. justify-content: center;
  1068. align-items: center;
  1069. .scroll {
  1070. width: 425upx;
  1071. top: 60upx;
  1072. bottom: 250upx;
  1073. position: absolute;
  1074. .coupon_box {
  1075. .coupon_item {
  1076. position: relative;
  1077. height: 120upx;
  1078. margin-bottom: 5upx;
  1079. // padding: 0 15upx;
  1080. .coupon_img {
  1081. width: 420upx;
  1082. height: 120upx;
  1083. }
  1084. .coupon_info {
  1085. position: absolute;
  1086. top: 50%;
  1087. right: 0upx;
  1088. text-align: center;
  1089. width: 150upx;
  1090. text-align: center;
  1091. transform: translate(0, -50%);
  1092. color: #d73024;
  1093. font-weight: bold;
  1094. .coupon_amount {
  1095. font-size: 40upx;
  1096. }
  1097. .coupon_unit {
  1098. font-size: 20upx;
  1099. }
  1100. }
  1101. .coupon_name {
  1102. color: #d73024;
  1103. font-size: 30upx;
  1104. font-weight: bold;
  1105. margin-bottom: 20upx;
  1106. }
  1107. }
  1108. .coupon_more {
  1109. display: flex;
  1110. flex-direction: row;
  1111. align-items: center;
  1112. padding: 0 30upx;
  1113. .more_text {
  1114. font-size: 22upx;
  1115. color: #999;
  1116. width: 60upx;
  1117. text-align: center;
  1118. margin-right: 10upx;
  1119. }
  1120. image {
  1121. width: 10upx;
  1122. height: 18upx;
  1123. }
  1124. }
  1125. }
  1126. }
  1127. .ic_off{
  1128. width: 50upx;
  1129. height: 50upx;
  1130. position: absolute;
  1131. bottom: -100upx;
  1132. z-index:10
  1133. }
  1134. }
  1135. }
  1136. .line {
  1137. width: 100%;
  1138. height: 20upx;
  1139. background: #f2f2f2;
  1140. }
  1141. .everyDay{
  1142. height:210upx;
  1143. border-radius: 20upx;
  1144. background-repeat: no-repeat;
  1145. background-size: 100% 100%;
  1146. padding-top: 80upx;
  1147. }
  1148. .bubble{
  1149. position: absolute;
  1150. top: -28upx;
  1151. right: 20upx;
  1152. width: 50upx;
  1153. height: 28upx;
  1154. background-size: 100% 100%;
  1155. background-repeat: no-repeat;
  1156. color: #fff;
  1157. font-size: 16upx;
  1158. text-align: center;
  1159. line-height: 28upx;
  1160. float: right;
  1161. }
  1162. .bubble-red{
  1163. background-image: url("http://139.9.103.171:1888/img/image/bubble_red.png");
  1164. }
  1165. .bubble-yellow{
  1166. background-image: url("http://139.9.103.171:1888/img/image/bubble_yellow.png");
  1167. }
  1168. </style>