index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. <template>
  2. <view v-if="pageShow" class="page"
  3. :class="bgTabVal==2?'fullsize noRepeat':bgTabVal==1?'repeat ysize':'noRepeat ysize'"
  4. :style="'background-color:'+bgColor+';background-image: url('+bgPic+');min-height:'+windowHeight+'px;'">
  5. <view>
  6. <!-- #ifdef H5 -->
  7. <view v-for="(item, index) in styleConfig" :key="index">
  8. <component :is="item.name" :index="index" :dataConfig="item" :isSortType="isSortType" @changeBarg="changeBarg"
  9. @detail="goDetail" @bindSortId="bindSortId" :isScrolled="isScrolled"></component>
  10. </view>
  11. <!-- #endif -->
  12. <!-- #ifdef MP || APP-PLUS-->
  13. <block v-for="(item, index) in styleConfig" :key="index">
  14. <homeComb v-if="item.name == 'homeComb'" :dataConfig="item" @bindSortId="bindSortId" :isScrolled="isScrolled" :special="1"></homeComb>
  15. <shortVideo v-if="item.name == 'shortVideo'" :dataConfig="item" :isSortType="isSortType">
  16. </shortVideo>
  17. <userInfor v-if="item.name == 'userInfor'" :dataConfig="item" :isSortType="isSortType">
  18. </userInfor>
  19. <newVip v-if="item.name == 'newVip'" :dataConfig="item" :isSortType="isSortType">
  20. </newVip>
  21. <activeParty v-if="item.name == 'activeParty'" :dataConfig="item" :isSortType="isSortType"></activeParty>
  22. <articleList v-if="item.name == 'articleList'" :dataConfig="item" :isSortType="isSortType"></articleList>
  23. <bargain v-if="item.name == 'bargain'" :dataConfig="item" @changeBarg="changeBarg" :isSortType="isSortType"></bargain>
  24. <blankPage v-if="item.name == 'blankPage'" :dataConfig="item" :isSortType="isSortType"></blankPage>
  25. <combination v-if="item.name == 'combination'" :dataConfig="item" :isSortType="isSortType"></combination>
  26. <coupon v-if="item.name == 'coupon'" :dataConfig="item" :isSortType="isSortType"></coupon>
  27. <customerService v-if="item.name == 'customerService'" :dataConfig="item" :isSortType="isSortType"></customerService>
  28. <goodList v-if="item.name == 'goodList'" :dataConfig="item" @detail="goDetail" :isSortType="isSortType"></goodList>
  29. <guide v-if="item.name == 'guide'" :dataConfig="item" :isSortType="isSortType"></guide>
  30. <headerSerch v-if="item.name == 'headerSerch'" :dataConfig="item" :special="1"></headerSerch>
  31. <liveBroadcast v-if="item.name == 'liveBroadcast'" :dataConfig="item" :isSortType="isSortType"></liveBroadcast>
  32. <menus v-if="item.name == 'menus'" :dataConfig="item" :isSortType="isSortType"></menus>
  33. <news v-if="item.name == 'news'" :dataConfig="item" :isSortType="isSortType"></news>
  34. <pictureCube v-if="item.name == 'pictureCube'" :dataConfig="item" :isSortType="isSortType">
  35. </pictureCube>
  36. <promotionList v-if="item.name == 'promotionList'" :dataConfig="item" @detail="goDetail" :isSortType="isSortType"></promotionList>
  37. <richText v-if="item.name == 'richText'" :dataConfig="item" :isSortType="isSortType"></richText>
  38. <seckill v-if="item.name == 'seckill'" :dataConfig="item" :isSortType="isSortType"></seckill>
  39. <swiperBg v-if="item.name == 'swiperBg'" :dataConfig="item" :isSortType="isSortType"></swiperBg>
  40. <swipers v-if="item.name == 'swipers'" :dataConfig="item" :isSortType="isSortType"></swipers>
  41. <tabNav v-if="item.name == 'tabNav'" :dataConfig="item" @bindSortId="bindSortId" :fromType="1"></tabNav>
  42. <titles v-if="item.name == 'titles'" :dataConfig="item" :isSortType="isSortType"></titles>
  43. </block>
  44. <!-- #endif -->
  45. <view class="sort-product" v-if="isSortType == 1" style="margin-top: 0;">
  46. <scroll-view scroll-x="true" class="sort-scroll">
  47. <view class="sort-box" v-if="sortList.children && sortList.children.length">
  48. <view class="sort-item" v-for="(item, index) in sortList.children" :key="index"
  49. @click="changeSort(item, index)" :class="{ on: curSort == index }">
  50. <image :src="item.pic" mode="" v-if="item.pic"></image>
  51. <image src="/static/images/sort-img.png" mode="" v-else></image>
  52. <view class="txt">{{ item.cate_name }}</view>
  53. </view>
  54. </view>
  55. </scroll-view>
  56. <!-- 首页商品列表 -->
  57. <view class="product-list" v-if="goodList.length">
  58. <view class="product-item" v-for="(item, index) in goodList" @click="goGoodsDetail(item)">
  59. <image :src="item.image" mode="aspectFill"></image>
  60. <span class="pictrue_log_big pictrue_log_class"
  61. v-if="item.activity && item.activity.type === '1'">秒杀</span>
  62. <span class="pictrue_log_big pictrue_log_class"
  63. v-if="item.activity && item.activity.type === '2'">砍价</span>
  64. <span class="pictrue_log_big pictrue_log_class"
  65. v-if="item.activity && item.activity.type === '3'">拼团</span>
  66. <view class="info">
  67. <view class="title line1">{{ item.store_name }}</view>
  68. <view class="price-box">
  69. <text></text>
  70. {{ item.price }}
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. <Loading :loaded="loaded" :loading="loading"></Loading>
  76. <view v-if="goodList.length == 0 && loaded" class="sort-scroll">
  77. <view class="empty-box">
  78. <image :src="imgHost + '/statics/images/no-thing.png'"></image>
  79. <view class="tips">暂无商品,去看点别的吧</view>
  80. </view>
  81. <!-- <recommend :hostProduct="hostProduct"></recommend> -->
  82. </view>
  83. </view>
  84. <!-- <view class="loadingicon acea-row row-center-wrapper"
  85. v-if="tempArr.length && styleConfig[styleConfig.length - 1].name == 'promotionList'">
  86. <text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
  87. {{ loadTitle }}
  88. </view> -->
  89. <view class="uni-p-b-98"></view>
  90. <pageFooter></pageFooter>
  91. <!-- #ifdef MP -->
  92. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  93. <!-- #endif -->
  94. </view>
  95. </view>
  96. </template>
  97. <script>
  98. const app = getApp();
  99. import couponWindow from '@/components/couponWindow/index'
  100. import {
  101. getCouponV2,
  102. getCouponNewUser
  103. } from '@/api/api.js'
  104. import {
  105. getShare
  106. } from '@/api/public.js';
  107. // #ifdef H5
  108. import mConfig from '@/pages/index/components/index.js';
  109. import {
  110. silenceAuth
  111. } from '@/api/public.js';
  112. // #endif
  113. // #ifdef MP || APP-PLUS
  114. import homeComb from '@/pages/index/components/homeComb';
  115. import userInfor from '@/pages/index/components/userInfor';
  116. import newVip from '@/pages/index/components/newVip';
  117. import shortVideo from '@/pages/index/components/shortVideo';
  118. import activeParty from '@/pages/index/components/activeParty';
  119. import headerSerch from '@/pages/index/components/headerSerch';
  120. import swipers from '@/pages/index/components/swipers';
  121. import coupon from '@/pages/index/components/coupon';
  122. import articleList from '@/pages/index/components/articleList';
  123. import bargain from '@/pages/index/components/bargain';
  124. import blankPage from '@/pages/index/components/blankPage';
  125. import combination from '@/pages/index/components/combination';
  126. import customerService from '@/pages/index/components/customerService';
  127. import goodList from '@/pages/index/components/goodList';
  128. import guide from '@/pages/index/components/guide';
  129. import liveBroadcast from '@/pages/index/components/liveBroadcast';
  130. import menus from '@/pages/index/components/menus';
  131. import news from '@/pages/index/components/news';
  132. import promotionList from '@/pages/index/components/promotionList';
  133. import richText from '@/pages/index/components/richText';
  134. import seckill from '@/pages/index/components/seckill';
  135. import swiperBg from '@/pages/index/components/swiperBg';
  136. import tabNav from '@/pages/index/components/tabNav';
  137. import titles from '@/pages/index/components/titles';
  138. import pictureCube from '@/pages/index/components/pictureCube';
  139. import {
  140. getTemlIds
  141. } from '@/api/api.js';
  142. import {
  143. SUBSCRIBE_MESSAGE,
  144. TIPS_KEY
  145. } from '@/config/cache';
  146. // #endif
  147. import {
  148. mapGetters
  149. } from 'vuex';
  150. import {
  151. getDiy,
  152. getIndexData,
  153. getDiyVersion
  154. } from '@/api/api.js';
  155. import {
  156. getCategoryList,
  157. getProductslist,
  158. getProductHot,
  159. } from '@/api/store.js';
  160. import {
  161. goShopDetail
  162. } from '@/libs/order.js';
  163. import {
  164. toLogin
  165. } from '@/libs/login.js';
  166. import {HTTP_REQUEST_URL} from '@/config/app';
  167. import pageFooter from '@/components/pageFooter/index.vue'
  168. import recommend from '@/components/recommend';
  169. import Loading from '@/components/Loading/index.vue';
  170. export default {
  171. computed: mapGetters(['isLogin', 'uid']),
  172. components: {
  173. Loading,
  174. recommend,
  175. pageFooter,
  176. couponWindow,
  177. // #ifdef H5
  178. ...mConfig,
  179. // #endif
  180. // #ifdef MP || APP-PLUS
  181. homeComb,
  182. newVip,
  183. userInfor,
  184. shortVideo,
  185. activeParty,
  186. headerSerch,
  187. swipers,
  188. coupon,
  189. articleList,
  190. bargain,
  191. blankPage,
  192. combination,
  193. customerService,
  194. goodList,
  195. guide,
  196. liveBroadcast,
  197. menus,
  198. news,
  199. promotionList,
  200. richText,
  201. seckill,
  202. swiperBg,
  203. tabNav,
  204. titles,
  205. pictureCube
  206. // #endif
  207. },
  208. data() {
  209. return {
  210. styleConfig: [],
  211. loading: false,
  212. loadend: false,
  213. loadTitle: '加载更多', //提示语
  214. page: 1,
  215. limit: this.$config.LIMIT,
  216. numConfig: 0,
  217. code: '',
  218. isCouponShow: false,
  219. couponObj: {},
  220. couponObjs: {},
  221. shareInfo: {},
  222. footConfig: {},
  223. pageId: '',
  224. sortMpTop: 0,
  225. bgColor: '',
  226. bgPic: '',
  227. bgTabVal: '',
  228. pageShow: true,
  229. windowHeight: 0,
  230. isShowAuth: false,
  231. isScrolled: false,
  232. sortList: '',
  233. sortAll: [],
  234. isSortType: 0,
  235. hostProduct: [],
  236. hotScroll: false,
  237. hotPage: 1,
  238. hotLimit: 10,
  239. curSort: 0,
  240. loaded: false,
  241. goodPage: 1,
  242. goodList: [],
  243. sid: 0,
  244. imgHost:HTTP_REQUEST_URL,
  245. };
  246. },
  247. onLoad(options) {
  248. let that = this
  249. this.$nextTick(function() {
  250. uni.getSystemInfo({
  251. success: function(res) {
  252. that.windowHeight = res.windowHeight;
  253. }
  254. });
  255. })
  256. const {
  257. state,
  258. scope
  259. } = options;
  260. this.pageId = options.id
  261. // #ifdef MP
  262. if (options.scene) {
  263. let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
  264. this.pageId = value.id
  265. }
  266. // #endif
  267. uni.setNavigationBarTitle({
  268. title: '专题栏'
  269. });
  270. // #ifdef APP-PLUS
  271. this.sortMpTop = -50
  272. // #endif
  273. this.diyData();
  274. this.getIndexData();
  275. // #ifdef H5
  276. this.setOpenShare();
  277. // #endif
  278. // #ifdef MP || APP-PLUS
  279. this.getTemlIds();
  280. // #endif
  281. getShare().then(res => {
  282. this.shareInfo = res.data;
  283. })
  284. },
  285. onUnload(){
  286. // 清除监听
  287. uni.$off('activeFn');
  288. },
  289. watch: {
  290. isLogin: {
  291. deep: true, //深度监听设置为 true
  292. handler: function(newV, oldV) {
  293. // 优惠券弹窗
  294. var newDates = new Date().toLocaleDateString();
  295. if (newV) {
  296. try {
  297. var oldDate = uni.getStorageSync('oldDate') || ''
  298. } catch {}
  299. if (oldDate != newDates) {
  300. this.getCoupon();
  301. }
  302. }
  303. }
  304. }
  305. },
  306. onShow() {
  307. uni.removeStorageSync('form_type_cart');
  308. // 优惠券弹窗
  309. var newDates = new Date().toLocaleDateString();
  310. if (this.isLogin) {
  311. try {
  312. var oldDate = uni.getStorageSync('oldDate') || ''
  313. } catch {}
  314. if (oldDate != newDates) {
  315. this.getCoupon();
  316. }
  317. let oldUser = uni.getStorageSync('oldUser') || 0;
  318. if (!oldUser) {
  319. this.getCouponOnce();
  320. }
  321. }
  322. },
  323. mounted() {},
  324. methods: {
  325. // 分类点击
  326. changeSort(item, index) {
  327. if (this.curSort == index) return;
  328. this.curSort = index;
  329. this.sid = item.id;
  330. this.goodList = [];
  331. this.goodPage = 1;
  332. this.loaded = false;
  333. this.getGoodsList();
  334. },
  335. // 获取分类id
  336. bindSortId(data) {
  337. this.isSortType = data == -99 ? 0 : 1;
  338. this.getProductList(data);
  339. if (this.hostProduct.length == 0) {
  340. this.get_host_product();
  341. }
  342. },
  343. getProductList(data) {
  344. this.curSort = 0;
  345. this.loaded = false;
  346. if (this.sortAll.length > 0) {
  347. this.sortAll.forEach((el, index) => {
  348. if (el.id == data) {
  349. this.$set(this, 'sortList', el);
  350. this.sid = el.children.length ? el.children[0].id : '';
  351. }
  352. });
  353. this.goodList = [];
  354. this.goodPage = 1;
  355. this.$nextTick(() => {
  356. if (this.sortList != '') this.getGoodsList();
  357. });
  358. } else {
  359. getCategoryList().then(res => {
  360. this.sortAll = res.data;
  361. res.data.forEach((el, index) => {
  362. if (el.id == data) {
  363. this.sortList = el;
  364. this.sid = el.children.length ? el.children[0].id : '';
  365. }
  366. });
  367. this.goodList = [];
  368. this.goodPage = 1;
  369. this.$nextTick(() => {
  370. if (this.sortList != '') this.getGoodsList();
  371. });
  372. });
  373. }
  374. },
  375. // 商品列表
  376. getGoodsList() {
  377. if (this.loading || this.loaded) return;
  378. this.loading = true;
  379. getProductslist({
  380. sid: this.sid,
  381. keyword: '',
  382. priceOrder: '',
  383. salesOrder: '',
  384. news: 0,
  385. page: this.goodPage,
  386. limit: 10,
  387. cid: this.sortList.id
  388. }).then(res => {
  389. this.loading = false;
  390. this.loaded = res.data.length < 10;
  391. this.goodPage++;
  392. this.goodList = this.goodList.concat(res.data);
  393. });
  394. },
  395. /**
  396. * 获取我的推荐
  397. */
  398. get_host_product: function() {
  399. let that = this;
  400. if (that.hotScroll) return;
  401. getProductHot(that.hotPage, that.hotLimit).then(res => {
  402. that.hotPage++;
  403. that.hotScroll = res.data.length < that.hotLimit;
  404. that.hostProduct = that.hostProduct.concat(res.data);
  405. });
  406. },
  407. onLoadFun() {
  408. this.isShowAuth = false
  409. },
  410. authColse: function(e) {
  411. this.isShowAuth = e
  412. },
  413. // 新用户优惠券
  414. getCouponOnce() {
  415. getCouponNewUser().then(res => {
  416. this.couponObjs = res.data;
  417. });
  418. },
  419. couponCloses() {
  420. this.couponObjs.show = false;
  421. try {
  422. uni.setStorageSync('oldUser', 1);
  423. } catch (e) {
  424. }
  425. },
  426. // 优惠券弹窗
  427. getCoupon() {
  428. getCouponV2().then(res => {
  429. this.couponObj = res.data
  430. if (res.data.list.length > 0) {
  431. this.isCouponShow = true
  432. }
  433. })
  434. },
  435. // 优惠券弹窗关闭
  436. couponClose() {
  437. this.isCouponShow = false
  438. try {
  439. uni.setStorageSync('oldDate', new Date().toLocaleDateString());
  440. } catch {}
  441. },
  442. // #ifdef H5
  443. // 获取url后面的参数
  444. getQueryString(name) {
  445. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  446. var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
  447. var r = window.location.search.substr(1).match(reg);
  448. var q = window.location.pathname.substr(1).match(reg_rewrite);
  449. if (r != null) {
  450. return unescape(r[2]);
  451. } else if (q != null) {
  452. return unescape(q[2]);
  453. } else {
  454. return null;
  455. }
  456. },
  457. // #endif
  458. // #ifdef MP || APP-PLUS
  459. getTemlIds() {
  460. let messageTmplIds = wx.getStorageSync(SUBSCRIBE_MESSAGE);
  461. if (!messageTmplIds) {
  462. getTemlIds().then(res => {
  463. if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
  464. });
  465. }
  466. },
  467. // #endif
  468. // 对象转数组
  469. objToArr(data) {
  470. const keys = Object.keys(data)
  471. keys.sort((a, b) => a - b)
  472. const m = keys.map(key => data[key]);
  473. return m;
  474. },
  475. setDiyData(data) {
  476. // let data = res.data;
  477. if (data.length == 0) {
  478. return this.$util.Tips({
  479. title: '暂无数据'
  480. }, {
  481. tab: 3
  482. })
  483. }
  484. if (data.is_bg_color) {
  485. this.bgColor = data.color_picker
  486. }
  487. if (data.is_bg_pic) {
  488. this.bgPic = data.bg_pic
  489. this.bgTabVal = data.bg_tab_val
  490. }
  491. this.pageShow = data.is_show
  492. uni.setNavigationBarTitle({
  493. title: data.title
  494. })
  495. let temp = []
  496. let lastArr = this.objToArr(data.value)
  497. lastArr.forEach((item, index, arr) => {
  498. if (item.name == 'pageFoot') {
  499. uni.setStorageSync('pageFoot', item)
  500. this.$store.commit('FOOT_UPLOAD', item)
  501. arr.splice(index, 1)
  502. }
  503. temp = arr
  504. });
  505. this.styleConfig = temp;
  506. },
  507. getDiyData() {
  508. getDiy(this.pageId).then(res => {
  509. uni.setStorageSync('specialDiyData', JSON.stringify(res.data));
  510. this.setDiyData(res.data);
  511. });
  512. },
  513. diyData() {
  514. let that = this;
  515. let diyData = uni.getStorageSync('specialDiyData');
  516. if (diyData) {
  517. getDiyVersion(this.pageId).then(res => {
  518. let diyVersion = uni.getStorageSync('specialDiyVersion');
  519. if ((res.data.version + this.pageId) === diyVersion) {
  520. this.setDiyData(JSON.parse(diyData));
  521. } else{
  522. uni.setStorageSync('specialDiyVersion', (res.data.version + this.pageId));
  523. this.getDiyData();
  524. }
  525. });
  526. } else{
  527. this.getDiyData();
  528. }
  529. // getDiy(this.pageId).then(res => {
  530. // let data = res.data;
  531. // if (res.data.length == 0) {
  532. // return this.$util.Tips({
  533. // title: '暂无数据'
  534. // }, {
  535. // tab: 3
  536. // })
  537. // }
  538. // if (data.is_bg_color) {
  539. // this.bgColor = data.color_picker
  540. // }
  541. // if (data.is_bg_pic) {
  542. // this.bgPic = data.bg_pic
  543. // this.bgTabVal = data.bg_tab_val
  544. // }
  545. // this.pageShow = data.is_show
  546. // uni.setNavigationBarTitle({
  547. // title: res.data.title
  548. // })
  549. // let temp = []
  550. // let lastArr = that.objToArr(res.data.value)
  551. // lastArr.forEach((item, index, arr) => {
  552. // if (item.name == 'pageFoot') {
  553. // uni.setStorageSync('pageFoot', item)
  554. // that.$store.commit('FOOT_UPLOAD', item)
  555. // arr.splice(index, 1)
  556. // }
  557. // temp = arr
  558. // });
  559. // that.styleConfig = temp;
  560. // });
  561. },
  562. getIndexData() {
  563. },
  564. changeBarg(item) {
  565. if (!this.isLogin) {
  566. toLogin()
  567. } else {
  568. uni.navigateTo({
  569. url: `/pages/activity/goods_bargain_details/index?id=${item.id}&spid=${this.uid}`
  570. });
  571. }
  572. },
  573. goDetail(item) {
  574. goShopDetail(item, this.uid).then(res => {
  575. uni.navigateTo({
  576. url: `/pages/goods_details/index?id=${item.id}`
  577. });
  578. });
  579. },
  580. // #ifdef H5
  581. // 微信分享;
  582. setOpenShare: function() {
  583. let that = this;
  584. if (that.$wechat.isWeixin()) {
  585. getShare().then(res => {
  586. let data = res.data.data;
  587. let configAppMessage = {
  588. desc: data.synopsis,
  589. title: data.title,
  590. link: location.href,
  591. imgUrl: data.img
  592. };
  593. that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData'],
  594. configAppMessage);
  595. });
  596. }
  597. }
  598. // #endif
  599. },
  600. onReachBottom: function() {
  601. },
  602. onPageScroll(e) {
  603. if(e.scrollTop>10){
  604. this.isScrolled = true;
  605. }else{
  606. this.isScrolled = false;
  607. }
  608. },
  609. //#ifdef MP || APP-PLUS
  610. onShareAppMessage() {
  611. return {
  612. title: this.shareInfo.title,
  613. path: '/pages/index/index',
  614. imageUrl: this.storeInfo.img,
  615. };
  616. },
  617. //#endif
  618. };
  619. </script>
  620. <style lang="scss">
  621. .sort-scroll {
  622. background-color: #fff;
  623. }
  624. .empty-box {
  625. text-align: center;
  626. padding-top: 50rpx;
  627. .tips{
  628. color: #aaa;
  629. font-size: 26rpx;
  630. }
  631. image {
  632. width: 414rpx;
  633. height: 304rpx;
  634. }
  635. }
  636. .sort-product {
  637. margin-top: 20rpx;
  638. .sort-box {
  639. display: flex;
  640. width: 100%;
  641. border-radius: 16rpx;
  642. padding: 30rpx 0;
  643. .sort-item {
  644. width: 20%;
  645. display: flex;
  646. flex-direction: column;
  647. align-items: center;
  648. justify-content: center;
  649. flex-shrink: 0;
  650. image {
  651. width: 90rpx;
  652. height: 90rpx;
  653. border-radius: 50%;
  654. }
  655. .txt {
  656. color: #272727;
  657. font-size: 24rpx;
  658. margin-top: 10rpx;
  659. overflow: hidden;
  660. white-space: nowrap;
  661. text-overflow: ellipsis;
  662. width: 140rpx;
  663. text-align: center;
  664. }
  665. .pictrues {
  666. width: 90rpx;
  667. height: 90rpx;
  668. background: #f8f8f8;
  669. border-radius: 50%;
  670. margin: 0 auto;
  671. }
  672. .icon-gengduo1 {
  673. color: #333;
  674. }
  675. &.on {
  676. .txt {
  677. color: #fc4141;
  678. }
  679. image {
  680. border: 1px solid #fc4141;
  681. }
  682. }
  683. }
  684. }
  685. .product-list {
  686. display: flex;
  687. flex-wrap: wrap;
  688. justify-content: space-between;
  689. margin-top: 30rpx;
  690. padding: 0 20rpx;
  691. .product-item {
  692. position: relative;
  693. width: 344rpx;
  694. background: #fff;
  695. border-radius: 10rpx;
  696. margin-bottom: 20rpx;
  697. overflow: hidden;
  698. .pictrue{
  699. position: relative;
  700. }
  701. image {
  702. width: 100%;
  703. height: 344rpx;
  704. border-radius: 10rpx 10rpx 0 0;
  705. }
  706. .info {
  707. padding: 14rpx 16rpx;
  708. .title {
  709. font-size: 28rpx;
  710. }
  711. .price-box {
  712. font-size: 34rpx;
  713. font-weight: 700;
  714. margin-top: 8px;
  715. color: #fc4141;
  716. text {
  717. font-size: 26rpx;
  718. }
  719. }
  720. }
  721. }
  722. }
  723. }
  724. .page {
  725. padding-bottom: 50px;
  726. }
  727. .ysize {
  728. background-size: 100%;
  729. }
  730. .fullsize {
  731. background-size: 100% 100%;
  732. }
  733. .repeat {
  734. background-repeat: repeat;
  735. }
  736. .noRepeat {
  737. background-repeat: no-repeat;
  738. }
  739. </style>