life1.vue 37 KB

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