index.vue 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160
  1. <template>
  2. <!-- 首页 -->
  3. <view v-if="pageShow" class="page"
  4. :class="bgTabVal==2?'fullsize noRepeat':bgTabVal==1?'repeat ysize':'noRepeat ysize'" :style="[pageStyle]">
  5. <view v-if="!errorNetwork" :style="colorStyle">
  6. <!-- 轮播搜索 -->
  7. <homeComb v-if="showHomeComb" :dataConfig="homeCombData" @bindSortId="bindSortId" :isScrolled="isScrolled">
  8. </homeComb>
  9. <!-- 顶部搜索框 -->
  10. <headerSerch v-if="isHeaderSerch" :dataConfig="headerSerchCombData"></headerSerch>
  11. <tabNav v-if="showCateNav" :dataConfig="cateNavData" @bindHeight="bindHeighta" @bindSortId="bindSortId"
  12. :isFixed="isFixed && !cateNavData.stickyConfig.tabVal"></tabNav>
  13. <view class="index">
  14. <!-- 自定义样式 -->
  15. <block v-for="(item, index) in styleConfig" :key="index">
  16. <shortVideo v-if="item.name == 'shortVideo'" :dataConfig="item">
  17. </shortVideo>
  18. <userInfor v-if="item.name == 'userInfor'" :dataConfig="item" @changeLogin="changeLogin">
  19. </userInfor>
  20. <newVip v-if="item.name == 'newVip'" :dataConfig="item"></newVip>
  21. <!-- 文章列表 -->
  22. <articleList v-if="item.name == 'articleList'" :dataConfig="item">
  23. </articleList>
  24. <bargain v-if="item.name == 'bargain'" :dataConfig="item" @changeBarg="changeBarg"></bargain>
  25. <blankPage v-if="item.name == 'blankPage'" :dataConfig="item"></blankPage>
  26. <combination v-if="item.name == 'combination'" :dataConfig="item">
  27. </combination>
  28. <!-- 优惠券 -->
  29. <coupon v-if="item.name == 'coupon'" :dataConfig="item" @changeLogin="changeLogin"></coupon>
  30. <!-- 客户服务 -->
  31. <customerService v-if="item.name == 'customerService'" :dataConfig="item">
  32. </customerService>
  33. <!-- 商品列表 -->
  34. <guide v-if="item.name == 'guide'" :dataConfig="item"></guide>
  35. <!-- 直播模块 -->
  36. <!-- #ifdef MP-WEIXIN -->
  37. <liveBroadcast v-if="item.name == 'liveBroadcast'" :dataConfig="item"></liveBroadcast>
  38. <!-- #endif -->
  39. <menus v-if="item.name == 'menus'" :dataConfig="item"></menus>
  40. <!-- 实时消息 -->
  41. <news v-if="item.name == 'news'" :dataConfig="item"></news>
  42. <!-- 图片库 -->
  43. <pictureCube v-if="item.name == 'pictureCube'" :dataConfig="item"></pictureCube>
  44. <!-- 促销列表 -->
  45. <promotionList v-if="item.name == 'promotionList'" :dataConfig="item"
  46. :productVideoStatus='product_video_status' :positionTop="positionTop">
  47. </promotionList>
  48. <richText v-if="item.name == 'richText'" :dataConfig="item"></richText>
  49. <seckill v-if="item.name == 'seckill'" :dataConfig="item"></seckill>
  50. <!-- 轮播图-->
  51. <swiperBg v-if="item.name == 'swiperBg'" :dataConfig="item"></swiperBg>
  52. <swipers v-if="item.name == 'swipers'" :dataConfig="item"></swipers>
  53. <!-- 顶部选项卡 -->
  54. <!-- 标题 -->
  55. <titles v-if="item.name == 'titles'" :dataConfig="item"></titles>
  56. <ranking v-if="item.name == 'ranking'" :dataConfig="item"></ranking>
  57. <presale v-if="item.name == 'presale'" :dataConfig="item"></presale>
  58. <pointsMall v-if="item.name == 'pointsMall'" :dataConfig="item"></pointsMall>
  59. <videos v-if="item.name == 'videos'" :dataConfig="item"></videos>
  60. <signIn v-if="item.name == 'signIn'" :dataConfig="item"></signIn>
  61. <hotspot v-if="item.name == 'hotspot'" :dataConfig="item"></hotspot>
  62. <follow v-if="item.name == 'follow'" :dataConfig="item"></follow>
  63. </block>
  64. <view class="goodsTitle" v-if="joinList.length>0">
  65. <!-- <text class='borderBottom'>
  66. 抢购商品
  67. </text> -->
  68. <image class="bannerImg" src="../../static/img/indexGoods1.png" mode="aspectFill"></image>
  69. </view>
  70. <view class="goodsItem" v-if="joinList.length>0">
  71. <view class="itemList" @click="addCartChange(item)" v-for="(item,index) in joinList">
  72. <view class="itemImage">
  73. <image class="imageBanner" :src="item.image" mode="aspectFill"></image>
  74. </view>
  75. <view class="itemContent">
  76. <view class="itemTitle">
  77. {{item.store_name}}
  78. </view>
  79. <view class="itemMoney">
  80. <baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
  81. ></baseMoney>
  82. </view>
  83. <view class="bottomCart">
  84. <view class="flex-center cart-btn">
  85. <text class="iconfont icon-ic_increase fs-26"></text>
  86. </view>
  87. </view>
  88. </view>
  89. </view>
  90. </view>
  91. <view class="goodsTitle" v-if="giveList.length>0">
  92. <!-- <text class='borderBottom'>
  93. 爆单商品
  94. </text> -->
  95. <image class="bannerImg2" src="../../static/img/indexGoods2.png" mode="scaleToFill"></image>
  96. </view>
  97. <view class="goodsItem" v-if="giveList.length>0">
  98. <view class="itemList" @click="addCartChange(item)" v-for="(item,index) in giveList">
  99. <view class="itemImage">
  100. <image class="imageBanner" :src="item.image" mode="aspectFill"></image>
  101. </view>
  102. <view class="itemContent">
  103. <view class="itemTitle">
  104. {{item.store_name}}
  105. </view>
  106. <view class="itemMoney">
  107. <baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
  108. ></baseMoney>
  109. </view>
  110. <view class="greenIn" v-if="item.green_integral">
  111. <text class="greenText">
  112. {{item.green_integral}}
  113. </text>
  114. 绿积分
  115. </view>
  116. <view class="bottomCart">
  117. <view class="flex-center cart-btn">
  118. <text class="iconfont icon-ic_increase fs-26"></text>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. <view class="goodsTitle" v-if="pjList.length>0">
  125. <image class="bannerImg2" src="../../static/img/indexGoods3.png" mode="scaleToFill"></image>
  126. </view>
  127. <view class="goodsItem" v-if="pjList.length>0">
  128. <view class="itemList" @click="addCartChange(item)" v-for="(item,index) in pjList">
  129. <view class="itemImage">
  130. <image class="imageBanner" :src="item.image" mode="aspectFill"></image>
  131. </view>
  132. <view class="itemContent">
  133. <view class="itemTitle">
  134. {{item.store_name}}
  135. </view>
  136. <view class="itemMoney">
  137. <baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
  138. ></baseMoney>
  139. </view>
  140. <!-- <view class="greenIn" v-if="item.green_integral">
  141. <text class="greenText">
  142. {{item.green_integral}}
  143. </text>
  144. 绿积分
  145. </view> -->
  146. <view class="bottomCart">
  147. <view class="flex-center cart-btn">
  148. <text class="iconfont icon-ic_increase fs-26"></text>
  149. </view>
  150. </view>
  151. </view>
  152. </view>
  153. </view>
  154. <!-- 分类商品模块 -->
  155. <!-- #ifndef APP-PLUS -->
  156. <view class="sort-product px-20" v-if="sortList.children && sortList.children.length">
  157. <!-- #endif -->
  158. <!-- #ifdef APP-PLUS -->
  159. <!-- 商品排序 -->
  160. <view class="sort-product px-20" :style="{ marginTop: sortMpTop + 'px' }"
  161. v-if="sortList.children && sortList.children.length">
  162. <!-- #endif -->
  163. <view class="rd-24rpx bg--w111-fff p-24 mb-24"
  164. v-if="sortList.children && sortList.children.length">
  165. <scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full"
  166. show-scrollbar="false">
  167. <view class="inline-block mr-24" v-for="(item, index) in sortList.children"
  168. :key="index">
  169. <view class="flex-col flex-center" @tap="changeSort(item, index)">
  170. <view class="picture w-90 h-90 rd-50-p111-" :class="{select: curSort == index}">
  171. <image :src="item.pic" class="w-full h-full rd-50-p111-"></image>
  172. </view>
  173. <text class="fs-24 pt-14"
  174. :class="{'font-num': curSort == index}">{{item.cate_name}}</text>
  175. </view>
  176. </view>
  177. </scroll-view>
  178. </view>
  179. <waterfallsFlow ref="waterfallsFlow" :wfList="goodList" @itemTap="goDetail"></waterfallsFlow>
  180. <Loading :loaded="loaded" :loading="loading"></Loading>
  181. <view v-if="goodList.length == 0 && loaded">
  182. <emptyPage title="暂无商品,去看点别的吧~"></emptyPage>
  183. </view>
  184. </view>
  185. <couponWindow :window="isCouponShow" @onColse="couponClose" :couponImage="couponObj.image"
  186. :couponList="couponObj.list"></couponWindow>
  187. <!-- #ifdef H5 -->
  188. <view v-if="site_config" class="site-config" @click="goICP">{{ site_config }}</view>
  189. <!-- #endif -->
  190. <view class="pb-safe" :style="[pdHeights]" v-if="isFooter"></view>
  191. <pageFooter @newDataStatus="newDataStatus"></pageFooter>
  192. </view>
  193. </view>
  194. <view v-else>
  195. <view class="error-network">
  196. <image :src="imgHost + '/statics/images/error-network.gif'"></image>
  197. <view class="title">网络连接断开</view>
  198. <view class="con">
  199. <view class="label">请检查情况:</view>
  200. <view class="item">· 在设置中是否已开启网络权限</view>
  201. <view class="item">· 当前是否处于弱网环境</view>
  202. <view class="item">· 版本是否过低,升级试试吧</view>
  203. </view>
  204. <view class="btn" @click="reconnect">重新连接</view>
  205. </view>
  206. </view>
  207. </view>
  208. </template>
  209. <script>
  210. const app = getApp();
  211. import colors from "@/mixins/color";
  212. import couponWindow from '@/components/couponWindow/index';
  213. import permision from "@/js_sdk/wa-permission/permission.js";
  214. import {
  215. getCouponV2,
  216. getCouponNewUser,
  217. copyRight
  218. } from '@/api/api.js';
  219. import {
  220. getShare
  221. } from '@/api/public.js';
  222. // #ifdef H5
  223. import {
  224. silenceAuth
  225. } from '@/api/public.js';
  226. // #endif
  227. import userInfor from './components/userInfor';
  228. import homeComb from './components/homeComb';
  229. import newVip from './components/newVip';
  230. import shortVideo from './components/shortVideo';
  231. import headerSerch from './components/headerSerch';
  232. import swipers from './components/swipers';
  233. import coupon from './components/coupon';
  234. import articleList from './components/articleList';
  235. import bargain from './components/bargain';
  236. import blankPage from './components/blankPage';
  237. import combination from './components/combination';
  238. import customerService from './components/customerService';
  239. import goodList from './components/goodList';
  240. import guide from './components/guide';
  241. import liveBroadcast from './components/liveBroadcast';
  242. import menus from './components/menus';
  243. import news from './components/news';
  244. import pictureCube from './components/pictureCube';
  245. import promotionList from './components/promotionList';
  246. import richText from './components/richText';
  247. import seckill from './components/seckill';
  248. import swiperBg from './components/swiperBg';
  249. import tabNav from './components/tabNav';
  250. import titles from './components/titles';
  251. import ranking from './components/ranking';
  252. import presale from './components/presale'
  253. import pointsMall from './components/pointsMall';
  254. import videos from './components/videos';
  255. import signIn from './components/signIn';
  256. import hotspot from './components/hotspot';
  257. import follow from './components/follow';
  258. import waterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
  259. import emptyPage from '@/components/emptyPage.vue';
  260. // #ifdef MP
  261. import {
  262. getTemlIds
  263. } from '@/api/api.js';
  264. import {
  265. SUBSCRIBE_MESSAGE,
  266. TIPS_KEY
  267. } from '@/config/cache';
  268. // #endif
  269. import {
  270. mapGetters,
  271. mapMutations
  272. } from 'vuex';
  273. import {
  274. getDiy,
  275. getDiyVersion
  276. } from '@/api/api.js';
  277. import {
  278. getCategoryList,
  279. getProductslist,
  280. getProductHot,
  281. diyProductApi
  282. } from '@/api/store.js';
  283. import {
  284. goShopDetail
  285. } from '@/libs/order.js';
  286. import {
  287. toLogin
  288. } from '@/libs/login.js';
  289. import {
  290. HTTP_REQUEST_URL
  291. } from '@/config/app';
  292. import pageFooter from '@/components/pageFooter/index.vue';
  293. import Loading from '@/components/Loading/index.vue';
  294. import recommend from '@/components/recommend';
  295. export default {
  296. computed: {
  297. pageStyle() {
  298. return {
  299. backgroundColor: this.bgColor,
  300. backgroundImage: this.bgPic ? `url(${this.bgPic})` : '',
  301. minHeight: this.windowHeight + 'px'
  302. }
  303. },
  304. pdHeights() {
  305. let H = `${this.pdHeight*2 + 100}rpx`
  306. return {
  307. height: this.isFooter ? H : '100rpx'
  308. }
  309. },
  310. ...mapGetters(['isLogin', 'uid', 'cartNum']),
  311. },
  312. mixins: [colors],
  313. components: {
  314. recommend,
  315. Loading,
  316. pageFooter,
  317. couponWindow,
  318. homeComb,
  319. newVip,
  320. userInfor,
  321. shortVideo,
  322. headerSerch,
  323. swipers,
  324. coupon,
  325. articleList,
  326. bargain,
  327. blankPage,
  328. combination,
  329. customerService,
  330. goodList,
  331. guide,
  332. liveBroadcast,
  333. menus,
  334. pictureCube,
  335. news,
  336. promotionList,
  337. richText,
  338. seckill,
  339. swiperBg,
  340. tabNav,
  341. titles,
  342. ranking,
  343. presale,
  344. pointsMall,
  345. videos,
  346. signIn,
  347. hotspot,
  348. follow,
  349. waterfallsFlow,
  350. emptyPage
  351. },
  352. data() {
  353. return {
  354. styleConfig: [],
  355. loading: false,
  356. loadend: false,
  357. loadTitle: '下拉加载更多', //提示语
  358. page: 1,
  359. limit: this.$config.LIMIT,
  360. numConfig: 0,
  361. code: '',
  362. isCouponShow: false,
  363. couponObj: {},
  364. couponObjs: {
  365. show: false
  366. },
  367. shareInfo: {},
  368. sortList: '',
  369. sortAll: [],
  370. goodPage: 1,
  371. goodList: [],
  372. sid: 0,
  373. curSort: 0,
  374. sortMpTop: 0,
  375. loaded: false,
  376. loading: false,
  377. domOffsetTop: 50,
  378. // #ifdef APP-PLUS || MP
  379. isFixed: true,
  380. // #endif
  381. // #ifdef H5
  382. isFixed: false,
  383. // #endif
  384. site_config: '',
  385. errorNetwork: false, // 是否断网
  386. isHeaderSerch: false,
  387. showHomeComb: false,
  388. showCateNav: false,
  389. homeCombData: {},
  390. headerSerchCombData: {},
  391. cateNavData: {},
  392. bgColor: '',
  393. bgPic: '',
  394. bgTabVal: '',
  395. pageShow: true,
  396. windowHeight: 0,
  397. imgHost: HTTP_REQUEST_URL,
  398. isShowAuth: false,
  399. isScrolled: false,
  400. product_video_status: false,
  401. confirm_video_status: false,
  402. positionTop: 0,
  403. isFooter: false,
  404. pdHeight: 0, //自定义底部导航上下边距和
  405. giveList: [], //爆单商品
  406. joinList: [], //抢购商品
  407. pjList: [], //平价商品
  408. };
  409. },
  410. onLoad(options) {
  411. let that = this;
  412. uni.hideTabBar();
  413. that.getOptions(options);
  414. this.$nextTick(function() {
  415. uni.getSystemInfo({
  416. success: function(res) {
  417. that.windowHeight = res.windowHeight;
  418. }
  419. });
  420. })
  421. const {
  422. state,
  423. scope
  424. } = options;
  425. this.diyData();
  426. // #ifdef H5
  427. this.setOpenShare();
  428. // #endif
  429. // #ifdef MP
  430. this.getTemlIds();
  431. // #endif
  432. getShare().then(res => {
  433. this.shareInfo = res.data;
  434. });
  435. this.getCopyRight();
  436. this.$eventHub.$on('confirm_video_status', () => {
  437. if (this.confirm_video_status) {
  438. return;
  439. }
  440. this.confirm_video_status = true;
  441. let flag = true;
  442. // #ifdef H5
  443. flag = window.self == window.top;
  444. // #endif
  445. if (!flag) {
  446. return;
  447. }
  448. uni.showModal({
  449. content: '当前使用移动网络,是否继续播放视频?',
  450. success: (res) => {
  451. if (res.confirm) {
  452. // 监听
  453. this.SET_AUTOPLAY(true);
  454. this.$eventHub.$emit('product_video_observe');
  455. }
  456. }
  457. });
  458. });
  459. this.getInitGoods();
  460. },
  461. onUnload() {
  462. // 清除监听
  463. uni.$off('activeFn');
  464. },
  465. watch: {
  466. isLogin: {
  467. deep: true, //深度监听设置为 true
  468. handler: function(newV, oldV) {
  469. // 优惠券弹窗
  470. var newDates = new Date().toLocaleDateString();
  471. if (newV) {
  472. try {
  473. var oldDate = uni.getStorageSync('oldDate') || '';
  474. } catch {}
  475. if (oldDate != newDates) {
  476. this.getCoupon();
  477. }
  478. }
  479. }
  480. }
  481. },
  482. onShow() {
  483. if (this.cartNum > 0) {
  484. uni.setTabBarBadge({
  485. index: 3,
  486. text: this.cartNum > 99 ? '99+' : this.cartNum + ''
  487. })
  488. } else {
  489. uni.hideTabBarRedDot({
  490. index: 3
  491. })
  492. }
  493. uni.removeStorageSync('form_type_cart');
  494. // 优惠券弹窗
  495. if (this.isLogin) {
  496. this.getCoupon();
  497. }
  498. },
  499. onReady() {},
  500. methods: {
  501. ...mapMutations(['SET_AUTOPLAY']),
  502. addCartChange(item){
  503. uni.navigateTo({
  504. url: `/pages/goods_details/index?id=${item.id}`
  505. });
  506. },
  507. getInitGoods() {
  508. getProductslist({
  509. page: 1,
  510. limit: 10,
  511. give_award_range: 1,
  512. }).then(res => {
  513. this.giveList = res.data
  514. });
  515. getProductslist({
  516. page: 1,
  517. limit: 10,
  518. join_games: 1,
  519. }).then(res => {
  520. this.joinList = res.data
  521. });
  522. getProductslist({
  523. page: 1,
  524. limit: 10,
  525. give_award_range: 0,
  526. join_games: 0,
  527. }).then(res => {
  528. this.pjList = res.data
  529. });
  530. },
  531. getCopyRight() {
  532. copyRight().then(res => {
  533. let data = res.data;
  534. uni.setStorageSync('wechatStatus', data.wechat_status)
  535. // #ifndef APP-PLUS
  536. this.site_config = data.record_No;
  537. // #endif
  538. if (!data.copyrightContext && !data.copyrightImage) {
  539. data.copyrightImage = '/static/images/support.png'
  540. }
  541. uni.setStorageSync('copyNameInfo', data.copyrightContext);
  542. uni.setStorageSync('copyImageInfo', data.copyrightImage);
  543. // #ifdef MP
  544. uni.setStorageSync('MPSiteData', JSON.stringify({
  545. site_logo: data.site_logo,
  546. site_name: data.site_name
  547. }));
  548. // #endif
  549. }).catch(err => {
  550. return this.$util.Tips({
  551. title: err.msg
  552. });
  553. });
  554. },
  555. getOptions(options) {
  556. let that = this;
  557. // #ifdef MP
  558. if (options.scene) {
  559. let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
  560. //记录推广人uid
  561. if (value.spid) app.globalData.spid = value.spid;
  562. }
  563. // #endif
  564. if (options.spid) app.globalData.spid = options.spid;
  565. },
  566. // 重新链接
  567. reconnect() {
  568. this.diyData();
  569. getShare().then(res => {
  570. this.shareInfo = res.data;
  571. });
  572. },
  573. goICP() {
  574. // #ifdef H5
  575. window.open('http://beian.miit.gov.cn/');
  576. // #endif
  577. // #ifdef MP
  578. uni.navigateTo({
  579. url: `/pages/annex/web_view/index?url=https://beian.miit.gov.cn/`
  580. });
  581. // #endif
  582. },
  583. bindHeighta(data) {
  584. // #ifdef APP-PLUS
  585. this.sortMpTop = data.top + data.height;
  586. // #endif
  587. },
  588. bindHeight(data) {
  589. uni.hideLoading();
  590. this.domOffsetTop = data.top;
  591. },
  592. // 去商品详情
  593. goGoodsDetail(item) {
  594. goShopDetail(item, this.uid).catch(res => {
  595. uni.navigateTo({
  596. url: `/pages/goods_details/index?id=${item.id}`
  597. });
  598. });
  599. },
  600. // 分类点击
  601. changeSort(item, index) {
  602. if (this.curSort == index) return;
  603. this.curSort = index;
  604. this.sid = item.id;
  605. this.goodList = [];
  606. this.goodPage = 1;
  607. this.loaded = false;
  608. this.getGoodsList();
  609. },
  610. /**
  611. * @param data {
  612. classPage: 0 分类id
  613. microPage: 0 微页面id
  614. type: 1 0 微页面 1 商品分类
  615. }*/
  616. bindSortId(data) {
  617. this.styleConfig = [];
  618. if (data.type == 1) {
  619. this.getProductList(data.classPage);
  620. } else {
  621. this.sortList = [];
  622. this.getMicroPage(data.microPage, true);
  623. }
  624. },
  625. /**
  626. * 获取DIY
  627. * @param {number} id
  628. * @param {boolean} type 区分是否是微页面
  629. */
  630. getMicroPage(id, type) {
  631. let that = this;
  632. that.styleConfig = []
  633. uni.showLoading({
  634. title: '加载中...'
  635. });
  636. getDiy(id).then(res => {
  637. uni.hideLoading();
  638. let data = res.data;
  639. let diyArr = that.objToArr(res.data.value);
  640. diyArr = diyArr.filter(item => item.isHide !== '1');
  641. diyArr.forEach((item, index) => {
  642. if (['headerSerch', 'homeComb'].includes(item.name)) {
  643. diyArr.splice(index, 1);
  644. }
  645. });
  646. this.styleConfig = diyArr;
  647. }).catch(err => {
  648. return that.$util.Tips({
  649. title: err
  650. });
  651. uni.hideLoading();
  652. });
  653. },
  654. getProductList(data) {
  655. let tempObj = '';
  656. this.curSort = 0;
  657. this.loaded = false;
  658. if (this.sortAll.length > 0) {
  659. this.sortAll.forEach((el, index) => {
  660. if (el.id == data) {
  661. this.$set(this, 'sortList', el);
  662. this.sid = el.children.length ? el.children[0].id : '';
  663. }
  664. });
  665. this.goodList = [];
  666. this.goodPage = 1;
  667. this.$nextTick(() => {
  668. if (this.sortList != '') this.getGoodsList();
  669. });
  670. } else {
  671. getCategoryList().then(res => {
  672. this.sortAll = res.data;
  673. res.data.forEach((el, index) => {
  674. if (el.id == data) {
  675. this.sortList = el;
  676. this.sid = el.children.length ? el.children[0].id : '';
  677. }
  678. });
  679. this.goodList = [];
  680. this.goodPage = 1;
  681. this.$nextTick(() => {
  682. if (this.sortList != '') this.getGoodsList();
  683. });
  684. });
  685. }
  686. },
  687. // 商品列表
  688. getGoodsList() {
  689. if (this.loading || this.loaded) return;
  690. this.loading = true;
  691. getProductslist({
  692. sid: this.sid,
  693. keyword: '',
  694. priceOrder: '',
  695. salesOrder: '',
  696. news: 0,
  697. page: this.goodPage,
  698. limit: 10,
  699. cid: this.sortList.id
  700. }).then(res => {
  701. this.loading = false;
  702. this.loaded = res.data.length < 10;
  703. this.goodPage++;
  704. this.goodList = this.goodList.concat(res.data);
  705. });
  706. },
  707. // 新用户优惠券
  708. getNewCoupon() {
  709. const oldUser = uni.getStorageSync('oldUser') || 0;
  710. if (!oldUser) {
  711. getCouponNewUser().then(res => {
  712. const {
  713. data
  714. } = res;
  715. if (data.show) {
  716. if (data.list.length) {
  717. this.isCouponShow = true;
  718. this.couponObj = data;
  719. uni.setStorageSync('oldUser', 1);
  720. }
  721. } else {
  722. uni.setStorageSync('oldUser', 1);
  723. }
  724. });
  725. }
  726. },
  727. // 优惠券弹窗
  728. getCoupon() {
  729. const tagDate = uni.getStorageSync('tagDate') || '',
  730. nowDate = new Date().toLocaleDateString();
  731. if (tagDate === nowDate) {
  732. this.getNewCoupon();
  733. } else {
  734. getCouponV2().then(res => {
  735. const {
  736. data
  737. } = res;
  738. if (data.list.length) {
  739. this.isCouponShow = true;
  740. this.couponObj = data;
  741. uni.setStorageSync('tagDate', new Date().toLocaleDateString());
  742. } else {
  743. this.getNewCoupon();
  744. }
  745. });
  746. }
  747. },
  748. // 优惠券弹窗关闭
  749. couponClose() {
  750. this.isCouponShow = false;
  751. if (!uni.getStorageSync('oldUser')) {
  752. this.getNewCoupon();
  753. }
  754. },
  755. onLoadFun() {
  756. this.isShowAuth = false
  757. },
  758. // #ifdef H5
  759. // 获取url后面的参数
  760. getQueryString(name) {
  761. var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  762. var reg_rewrite = new RegExp('(^|/)' + name + '/([^/]*)(/|$)', 'i');
  763. var r = window.location.search.substr(1).match(reg);
  764. var q = window.location.pathname.substr(1).match(reg_rewrite);
  765. if (r != null) {
  766. return unescape(r[2]);
  767. } else if (q != null) {
  768. return unescape(q[2]);
  769. } else {
  770. return null;
  771. }
  772. },
  773. // #endif
  774. // #ifdef MP
  775. getTemlIds() {
  776. let messageTmplIds = wx.getStorageSync(SUBSCRIBE_MESSAGE);
  777. if (!messageTmplIds) {
  778. getTemlIds().then(res => {
  779. if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
  780. });
  781. }
  782. },
  783. // #endif
  784. // 对象转数组
  785. objToArr(data) {
  786. let obj = Object.keys(data).sort();
  787. let m = obj.map(key => data[key]);
  788. return m;
  789. },
  790. setDiyData(data) {
  791. this.errorNetwork = false
  792. if (data.is_bg_color) {
  793. this.bgColor = data.color_picker
  794. }
  795. if (data.is_bg_pic) {
  796. this.bgPic = data.bg_pic
  797. this.bgTabVal = data.bg_tab_val
  798. }
  799. this.pageShow = data.is_show
  800. uni.setNavigationBarTitle({
  801. title: data.title
  802. });
  803. let temp = [];
  804. let lastArr = this.objToArr(data.value);
  805. lastArr.forEach((item, index, arr) => {
  806. if (item.name === 'homeComb') {
  807. this.showHomeComb = true
  808. this.homeCombData = item;
  809. if (item.searchConfig.tabVal) {
  810. this.positionTop = uni.getSystemInfoSync().statusBarHeight + 43
  811. }
  812. }
  813. if (item.name == 'headerSerch') {
  814. this.isHeaderSerch = true;
  815. this.headerSerchCombData = item;
  816. }
  817. if (item.name == 'tabNav') {
  818. this.showCateNav = true;
  819. this.cateNavData = item;
  820. }
  821. if (item.isHide !== '1') {
  822. temp.push(item);
  823. }
  824. });
  825. function sortNumber(a, b) {
  826. return a.timestamp - b.timestamp;
  827. }
  828. temp.sort(sortNumber)
  829. this.styleConfig = temp;
  830. },
  831. getDiyData() {
  832. getDiy(0).then(res => {
  833. uni.setStorageSync('diyData', JSON.stringify(res.data));
  834. this.setDiyData(res.data);
  835. }).catch(error => {
  836. // #ifdef APP-PLUS
  837. if (error.status) {
  838. uni.hideLoading()
  839. if (this.errorNetwork) {
  840. uni.showToast({
  841. title: '请开启网络连接',
  842. icon: 'none',
  843. duration: 2000
  844. })
  845. }
  846. this.errorNetwork = true;
  847. }
  848. // #endif
  849. });
  850. },
  851. diyData() {
  852. let diyData = uni.getStorageSync('diyData');
  853. if (diyData) {
  854. getDiyVersion(0).then(res => {
  855. let diyVersion = uni.getStorageSync('diyVersion');
  856. if ((res.data.version + '0') === diyVersion) {
  857. this.setDiyData(JSON.parse(diyData));
  858. } else {
  859. uni.setStorageSync('diyVersion', (res.data.version + '0'));
  860. this.getDiyData();
  861. }
  862. });
  863. } else {
  864. this.getDiyData();
  865. }
  866. },
  867. changeLogin() {
  868. this.getIsLogin();
  869. },
  870. getIsLogin() {
  871. toLogin()
  872. },
  873. changeBarg(item) {
  874. if (!this.isLogin) {
  875. this.getIsLogin();
  876. } else {
  877. uni.navigateTo({
  878. url: `/pages/activity/goods_bargain_details/index?id=${item.id}&spid=${this.$store.state.app.uid}`
  879. });
  880. }
  881. },
  882. goDetail(item) {
  883. goShopDetail(item, this.$store.state.app.uid).catch(res => {
  884. uni.navigateTo({
  885. url: `/pages/goods_details/index?id=${item.id}`
  886. });
  887. });
  888. },
  889. newDataStatus(val, num) {
  890. this.isFooter = val ? true : false;
  891. this.pdHeight = num;
  892. },
  893. // #ifdef H5
  894. // 微信分享;
  895. setOpenShare: function() {
  896. let that = this;
  897. let uid = this.uid ? this.uid : 0;
  898. if (that.$wechat.isWeixin()) {
  899. getShare().then(res => {
  900. let data = res.data;
  901. let configAppMessage = {
  902. desc: data.synopsis,
  903. title: data.title,
  904. link: location.href + '?spid=' + uid,
  905. imgUrl: data.img
  906. };
  907. that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
  908. 'onMenuShareAppMessage', 'onMenuShareTimeline'
  909. ],
  910. configAppMessage);
  911. });
  912. }
  913. }
  914. // #endif
  915. },
  916. onReachBottom() {
  917. this.getGoodsList();
  918. },
  919. onPageScroll(e) {
  920. // #ifdef H5
  921. if (this.isHeaderSerch) {
  922. if (e.scrollTop > this.domOffsetTop) {
  923. this.isFixed = true;
  924. }
  925. if (e.scrollTop < this.domOffsetTop) {
  926. this.$nextTick(() => {
  927. this.isFixed = false;
  928. });
  929. }
  930. } else {
  931. this.isFixed = false
  932. }
  933. // #endif
  934. if (e.scrollTop > 10) {
  935. this.isScrolled = true;
  936. } else {
  937. this.isScrolled = false;
  938. }
  939. uni.$emit('scroll');
  940. uni.$emit('onPageScroll', e.scrollTop);
  941. },
  942. //#ifdef MP
  943. onShareAppMessage() {
  944. let uid = this.uid ? this.uid : 0;
  945. if (this.shareInfo.img) {
  946. return {
  947. title: this.shareInfo.title,
  948. path: '/pages/index/index?spid=' + uid,
  949. imageUrl: this.shareInfo.img,
  950. desc: this.shareInfo.synopsis
  951. };
  952. } else {
  953. return {
  954. title: this.shareInfo.title,
  955. path: '/pages/index/index?spid=' + uid
  956. // imageUrl: this.shareInfo.img,
  957. // desc: this.shareInfo.synopsis
  958. };
  959. }
  960. },
  961. //分享到朋友圈
  962. onShareTimeline: function() {
  963. return {
  964. title: this.shareInfo.title,
  965. path: '/pages/index/index',
  966. imageUrl: this.shareInfo.img,
  967. desc: this.shareInfo.synopsis
  968. };
  969. }
  970. //#endif
  971. };
  972. </script>
  973. <style lang="scss">
  974. // page {
  975. // padding-bottom: 50px;
  976. // }
  977. .pictrue_log_class {
  978. background-color: var(--view-theme);
  979. }
  980. .ysize {
  981. background-size: 100%;
  982. }
  983. .fullsize {
  984. background-size: 100% 100%;
  985. }
  986. .repeat {
  987. background-repeat: repeat;
  988. }
  989. .noRepeat {
  990. background-repeat: no-repeat;
  991. }
  992. .error-network {
  993. position: fixed;
  994. left: 0;
  995. top: 0;
  996. display: flex;
  997. flex-direction: column;
  998. align-items: center;
  999. width: 100%;
  1000. height: 100%;
  1001. padding-top: 40rpx;
  1002. background: #fff;
  1003. image {
  1004. width: 414rpx;
  1005. height: 336rpx;
  1006. }
  1007. .title {
  1008. position: relative;
  1009. top: -40rpx;
  1010. font-size: 32rpx;
  1011. color: #666;
  1012. }
  1013. .con {
  1014. font-size: 24rpx;
  1015. color: #999;
  1016. .label {
  1017. margin-bottom: 20rpx;
  1018. }
  1019. .item {
  1020. margin-bottom: 20rpx;
  1021. }
  1022. }
  1023. .btn {
  1024. display: flex;
  1025. align-items: center;
  1026. justify-content: center;
  1027. width: 508rpx;
  1028. height: 86rpx;
  1029. margin-top: 100rpx;
  1030. border: 1px solid #D74432;
  1031. color: #E93323;
  1032. font-size: 30rpx;
  1033. border-radius: 120rpx;
  1034. }
  1035. }
  1036. .sort-scroll {
  1037. background-color: #fff;
  1038. }
  1039. .sort-product {
  1040. margin-top: 20rpx;
  1041. }
  1042. .site-config {
  1043. margin: 40rpx 0;
  1044. font-size: 24rpx;
  1045. text-align: center;
  1046. color: #666;
  1047. &.fixed {
  1048. position: fixed;
  1049. bottom: 69px;
  1050. left: 0;
  1051. width: 100%;
  1052. }
  1053. }
  1054. .select {
  1055. border: 1px solid var(--view-theme);
  1056. }
  1057. .goodsTitle {
  1058. font-size: 30rpx;
  1059. // padding: 0rpx 30rpx;
  1060. line-height: 0;
  1061. text-align: center;
  1062. .bannerImg{
  1063. width: 100%;
  1064. height: 175rpx;
  1065. }
  1066. .bannerImg2{
  1067. width: 400rpx;
  1068. height: 36rpx;
  1069. }
  1070. .borderBottom {
  1071. border-bottom: 4px solid #e93323;
  1072. }
  1073. }
  1074. .goodsItem {
  1075. display: flex;
  1076. justify-content: space-between;
  1077. flex-wrap: wrap;
  1078. padding: 30rpx;
  1079. .itemList {
  1080. width: 330rpx;
  1081. border-radius: 20rpx;
  1082. overflow: hidden;
  1083. background-color: #FFF;
  1084. margin-bottom: 30rpx;
  1085. }
  1086. .itemContent{
  1087. padding: 20rpx;
  1088. line-height: 1;
  1089. position: relative;
  1090. .itemTitle{
  1091. font-size: 28rpx;
  1092. text-overflow: ellipsis;
  1093. white-space: nowrap;
  1094. overflow: hidden;
  1095. }
  1096. .itemMoney{
  1097. color: var(--view-theme);
  1098. font-weight: bold;
  1099. padding: 10rpx 0;
  1100. }
  1101. .greenIn{
  1102. font-size: 20rpx;
  1103. .greenText{
  1104. font-size: 32rpx;
  1105. color: $uni-color-success;
  1106. }
  1107. }
  1108. .bottomCart{
  1109. position: absolute;
  1110. right: 20rpx;
  1111. bottom: 20rpx;
  1112. background:linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%); ;
  1113. border-radius: 100%;
  1114. width: 44rpx;
  1115. height: 44rpx;
  1116. color:#FFF;
  1117. line-height: 44rpx;
  1118. }
  1119. }
  1120. .itemImage {
  1121. line-height: 0;
  1122. .imageBanner {
  1123. width: 330rpx;
  1124. height: 330rpx;
  1125. }
  1126. }
  1127. }
  1128. </style>