pageSpecial.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. <template name="pagesProduct">
  2. <view>
  3. <view class="container-pages">
  4. <scroll-view scroll-x class="tui-goods__scroll-view">
  5. <view class="tui-goods__list">
  6. <view class="tui-goods__item ross" v-if="shopAdvert.length>0">
  7. <swiper class="tui-goods__ross"
  8. circular
  9. @change="swiperChange"
  10. :indicator-dots="false"
  11. :autoplay="true"
  12. :interval="5000"
  13. :duration="500"
  14. >
  15. <swiper-item v-for="(item, index) in shopAdvert" :key="item">
  16. <view class="tui-goods__ross" @click="NavToDetailPage(item)">
  17. <image class="ross-image" :src="item.appImage" mode=""></image>
  18. </view>
  19. </swiper-item>
  20. </swiper>
  21. <view class="swiper__dots-box">
  22. <view
  23. v-for="(item, idx) in shopAdvert"
  24. :key="idx"
  25. :class="[idx === current ? 'swiper__dots-long' : 'none']"
  26. :data-index="current"
  27. class="swiper__dots-item"
  28. ></view>
  29. </view>
  30. </view>
  31. <view class="tui-goods__item" v-if="tempData.liveList != ''">
  32. <view class="tui-group-name" @click="LiveGoPath">
  33. <view class="tui-group-title"><text>采美LIVE</text></view>
  34. <view class="iconfont icon-xiayibu"></view>
  35. </view>
  36. <view
  37. class="tui-goods__main"
  38. :class="flIndex == 0 ? 'one' : ''"
  39. v-for="(live, flIndex) in tempData.liveList"
  40. :key="flIndex"
  41. @click="LiveGoPathPros(live)"
  42. >
  43. <view class="tui-goods__imgbox" v-if="flIndex === 0">
  44. <image :src="live.homePageImage" mode="" class="tui-goods__img"></image>
  45. <view class="tui-goods__name">{{ live.liveTitle }}</view>
  46. <view class="tui-goods__statu">
  47. <text class="iconfont icon-weikaishi" v-if="live.liveStatus == 1"></text>
  48. <image
  49. :src="iconLive"
  50. mode="widthFix"
  51. class="icon-live"
  52. v-if="live.liveStatus == 2"
  53. ></image>
  54. <text class="iconfont icon-jieshu" v-if="live.liveStatus == 3"></text>
  55. <text>{{ live.liveStatus | statusType }}</text>
  56. </view>
  57. </view>
  58. <view class="tui-goods__text" v-if="flIndex > 0">{{ live.liveTitle }}</view>
  59. </view>
  60. </view>
  61. <view class="tui-goods__item" v-if="tempData.cmImageList != ''">
  62. <view class="tui-group-name" @click="NewActivityList">
  63. <view class="tui-group-title"><text>最新活动</text></view>
  64. <view class="iconfont icon-xiayibu"></view>
  65. </view>
  66. <view
  67. class="tui-goods__main"
  68. :class="flIndex == 0 ? 'one' : ''"
  69. v-for="(cmImage, flIndex) in tempData.cmImageList"
  70. :key="flIndex"
  71. @click="NewActivityListPath(cmImage)"
  72. >
  73. <view class="tui-goods__imgbox" v-if="flIndex === 0">
  74. <image :src="cmImage.homePageImage" mode="" class="tui-goods__img"></image>
  75. <view class="tui-goods__name">{{ cmImage.title }}</view>
  76. </view>
  77. <view class="tui-goods__text" v-if="flIndex > 0">{{ cmImage.title }}</view>
  78. </view>
  79. </view>
  80. <view class="tui-goods__item" v-if="tempData.infoList != ''">
  81. <view
  82. class="tui-group-name"
  83. @click="NavArticlePath('https://www.caimei365.com/info/center-3-1.html')"
  84. >
  85. <view class="tui-group-title"><text>热门文章</text></view>
  86. <view class="iconfont icon-xiayibu"></view>
  87. </view>
  88. <view
  89. class="tui-goods__main"
  90. :class="flIndex == 0 ? 'one' : ''"
  91. v-for="(info, flIndex) in tempData.infoList"
  92. :key="flIndex"
  93. @click="NavArticlePath(info.link)"
  94. >
  95. <view class="tui-goods__imgbox" v-if="flIndex === 0">
  96. <image :src="info.homePageImage" mode="" class="tui-goods__img"></image>
  97. <view class="tui-goods__name">{{ info.title }}</view>
  98. </view>
  99. <view class="tui-goods__text" v-if="flIndex > 0">{{ info.title }}</view>
  100. </view>
  101. </view>
  102. <!-- 采美百科 -->
  103. <view class="tui-goods__item" v-if="tempData.baikeList.length > 0">
  104. <view
  105. class="tui-group-name"
  106. @click="NavArticlePath('https://www.caimei365.com/encyclopedia/product.html')"
  107. >
  108. <view class="tui-group-title"><text>热门百科</text></view>
  109. <view class="iconfont icon-xiayibu"></view>
  110. </view>
  111. <view
  112. class="tui-goods__main"
  113. :class="flIndex == 0 ? 'one' : ''"
  114. v-for="(item, flIndex) in tempData.baikeList"
  115. :key="flIndex"
  116. @click="NavArticlePath(item.link)"
  117. >
  118. <view class="tui-goods__imgbox" v-if="flIndex === 0">
  119. <image :src="item.image" mode="" class="tui-goods__img"></image>
  120. <view class="tui-goods__name">{{ item.name }}</view>
  121. </view>
  122. <view class="tui-goods__text" v-if="flIndex > 0">{{ item.name }}</view>
  123. </view>
  124. </view>
  125. </view>
  126. </scroll-view>
  127. </view>
  128. </view>
  129. </template>
  130. <script>
  131. import { mapState, mapMutations } from 'vuex'
  132. import cmsMixins from '@/mixins/cmsMixins.js'
  133. export default {
  134. mixins: [cmsMixins],
  135. name: 'pagesProduct',
  136. props: {
  137. templateData: {
  138. type: Object
  139. }
  140. },
  141. data() {
  142. return {
  143. tempData: {},
  144. current: 0 ,// 切换轮播
  145. iconLive: 'https://static.caimei365.com/app/img/icon/icon-live.gif'
  146. }
  147. },
  148. filters: {
  149. statusType: function(value) {
  150. switch (value) {
  151. case 1:
  152. return '未开始'
  153. break
  154. case 2:
  155. return '直播中'
  156. break
  157. case 3:
  158. return '看回放'
  159. break
  160. }
  161. },
  162. NumFormat: function(value) {
  163. //处理金额
  164. return Number(value).toFixed(2)
  165. }
  166. },
  167. created() {
  168. this.initData(this.templateData)
  169. },
  170. computed: {
  171. ...mapState(['shopAdvert'])
  172. },
  173. methods: {
  174. initData(data) {
  175. this.tempData = data
  176. },
  177. swiperChange(e) {//轮播图切换
  178. this.current = e.detail.current
  179. },
  180. NavToDetailPage(item) {
  181. console.log(item)
  182. // 采美供应商广告图点击量统计
  183. this.cmsMoudleHits(5, item.id)
  184. //跳转
  185. this.$api.FlooryNavigateTo(item)
  186. },
  187. NavArticlePath(LINK) {
  188. // 友盟埋点首页文章模块点击
  189. if (process.env.NODE_ENV != 'development') {
  190. this.$uma.trackEvent('Um_Event_HomeArticleTemplateClick', {
  191. Um_Key_ArticleLink: `${LINK}`,
  192. Um_Key_PageName: '首页文章模块',
  193. Um_Key_SourcePage: '商城首页'
  194. })
  195. }
  196. // 采美埋点首页文章模块数据统计
  197. this.cmsSysStatistics(4)
  198. this.$api.navigateTo(`/pages/h5/article/path?link=${LINK}`)
  199. },
  200. NewActivityList() {
  201. this.$api.navigateTo('/pages/h5/activity/activity-list')
  202. },
  203. NewActivityListPath(pros) {
  204. // 友盟埋点首页活动模块点击
  205. if (process.env.NODE_ENV != 'development') {
  206. this.$uma.trackEvent('Um_Event_HomeActivityTemplateClick', {
  207. Um_Key_ActivityName: `${pros.title}`,
  208. Um_Key_PageName: '首页活动模块',
  209. Um_Key_SourcePage: '商城首页'
  210. })
  211. }
  212. // 采美埋点首页活动模块数据统计
  213. this.cmsSysStatistics(3)
  214. /**
  215. * 页面跳转类型
  216. * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
  217. * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
  218. * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
  219. **/
  220. if (pros.linkType) {
  221. console.log(pros.linkType)
  222. const typeMap = {
  223. 1: `/pages/goods/goods-instrument?linkId=${pros.linkParam.id}&title=${pros.name}`,
  224. 2: `/pages/goods/instrument-details?id=${pros.linkParam.id}`,
  225. 4:`/pages/h5/activity/activity?link=${pros.appletsLink}&linkId=${pros.linkParam.id}`,
  226. 5: `/pages/goods/product?id=${pros.linkParam.id}`,
  227. // 7:`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`,
  228. 8: '/pages/h5/activity/activity-list',
  229. 9: '/pages/second/form/introduce',
  230. 10: '/pages/second/product/product-list',
  231. 11: '/pages/second/form/form',
  232. 12: `/pages/search/search?keyWord=${pros.linkParam.keyword}`,
  233. 13: `/pages/h5/article/path?link=${pros.link}`,
  234. 14: `/pages/h5/article/path?link=${pros.link}`,
  235. 15: `/pages/h5/article/path?link=${pros.link}`,
  236. 17: '/pages/login/register-select',
  237. 18: `/pages/h5/article/path?link=${pros.link}`,
  238. 19: `/pages/search/search-supplier?keyWord=${pros.linkParam.keyword}`,
  239. 20: `/pages/goods/good-floor?linkId=${pros.linkParam.id}&title=${pros.name}`,
  240. 21: '/pages/h5/activity/meobohui',
  241. 22: `/pages/goods/good-floor-temp?linkId=${pros.linkParam.id}&title=${pros.name}`,
  242. 23: `/pages/h5/activity/activity-topic?linkId=${pros.linkParam.id}`, //活动专题页面
  243. 25: '/pages/goods/goods-doc-list', //美业资料
  244. 28: `/pages/h5/article/path?link=${pros.link}`, // 采美认证通
  245. 29: '/pages/user/coupon/coupon-collection' //领券中心
  246. }
  247. const url = typeMap[pros.linkType]
  248. uni.navigateTo({
  249. url: url
  250. })
  251. }
  252. // 采美活动点击量统计
  253. this.cmsMoudleHits(3, pros.id)
  254. },
  255. LiveGoPath() {
  256. //查看直播
  257. this.$api.navigateTo('/pages/h5/article/path-live')
  258. // uni.navigateToMiniProgram({
  259. // appId: 'wx92d650b253f8f2e3',
  260. // path: '/pages/index/index',
  261. // extraData: {
  262. // 'data1': 'test'
  263. // },
  264. // envVersion: 'develop',
  265. // success(res) {
  266. // // 打开成功
  267. // console.log(res)
  268. // }
  269. // })
  270. },
  271. LiveGoPathPros(live) {
  272. // 友盟埋点首页直播模块点击
  273. if (process.env.NODE_ENV != 'development') {
  274. this.$uma.trackEvent('Um_Event_HomeLiveTemplateClick', {
  275. Um_Key_LiveName: `${live.liveTitle}`,
  276. Um_Key_PageName: '首页直播模块',
  277. Um_Key_SourcePage: '商城首页'
  278. })
  279. }
  280. // 采美埋点首页直播模块数据统计
  281. this.cmsSysStatistics(2)
  282. this.$api.navigateTo(`/pages/h5/article/page-image?title=${live.liveTitle}&image=${live.advertisingImage}`)
  283. }
  284. }
  285. }
  286. </script>
  287. <style lang="scss">
  288. .container-pages {
  289. width: 100%;
  290. height: 476rpx;
  291. padding:16rpx 24rpx 0 24rpx;
  292. float: left;
  293. background-color: #f7f7f7;
  294. box-sizing: border-box;
  295. background-color: #f7f7f7;
  296. overflow: hidden;
  297. display: flex;
  298. align-items: center;
  299. .tui-goods__scroll-view{
  300. width: 100%;
  301. border-radius: 16rpx;
  302. overflow: hidden;
  303. }
  304. .tui-goods__list {
  305. width: 100%;
  306. display: flex;
  307. align-items: center;
  308. margin-top: 2px;
  309. }
  310. .tui-goods__item {
  311. background-color: #fff;
  312. width: 307rpx;
  313. height: 460rpx;
  314. border-radius: 16rpx;
  315. box-sizing: border-box;
  316. margin-right: 16rpx;
  317. padding: 17rpx;
  318. &.ross{
  319. padding: 0;
  320. position: relative;
  321. .swiper__dots-box{
  322. position: absolute;
  323. bottom: 30rpx;
  324. left: 0;
  325. right: 0;
  326. /* #ifndef APP-NVUE */
  327. display: flex;
  328. /* #endif */
  329. flex: 1;
  330. flex-direction: row;
  331. justify-content: center;
  332. align-items: center;
  333. .swiper__dots-item{
  334. width: 8rpx;
  335. height: 8rpx;
  336. border-radius: 100%;
  337. margin-left: 6px;
  338. background-color:rgba(255,255,255,.7);
  339. }
  340. .swiper__dots-long{
  341. width: 35rpx;
  342. height: 8rpx;
  343. border-radius: 4rpx;
  344. background-color: #ffff;
  345. transition: all 0.4s;
  346. }
  347. }
  348. }
  349. .tui-goods__ross{
  350. width: 307rpx;
  351. height: 460rpx;
  352. text-align: center;
  353. line-height: 460rpx;
  354. color: #fff;
  355. font-size: 40rpx;
  356. float: left;
  357. border-radius: 16rpx;
  358. overflow: hidden;
  359. .ross-image{
  360. width: 100%;
  361. height: 100%;
  362. display: block;
  363. }
  364. }
  365. }
  366. .tui-group-name {
  367. width: 100%;
  368. height: 36rpx;
  369. float: left;
  370. margin-bottom: 13rpx;
  371. .tui-group-title {
  372. font-size: 24rpx;
  373. line-height: 36rpx;
  374. float: left;
  375. color: #333333;
  376. }
  377. .icon-xiayibu {
  378. font-size: 26rpx;
  379. line-height: 36rpx;
  380. float: right;
  381. color: #909090;
  382. }
  383. }
  384. .tui-goods__main {
  385. width: 100%;
  386. height: auto;
  387. float: left;
  388. position: relative;
  389. &.one {
  390. margin-bottom: 14rpx;
  391. }
  392. }
  393. .tui-goods__imgbox {
  394. width: 273rpx;
  395. height: 273rpx;
  396. box-sizing: border-box;
  397. border-radius: 8rpx;
  398. }
  399. .tui-goods__img {
  400. max-width: 273rpx;
  401. max-height: 273rpx;
  402. border-radius: 8rpx;
  403. display: block;
  404. }
  405. .tui-goods__name {
  406. width: 100%;
  407. height: 48rpx;
  408. float: left;
  409. line-height: 48rpx;
  410. box-sizing: border-box;
  411. padding-left: 12rpx;
  412. font-size: $font-size-24;
  413. color: #ffffff;
  414. background-color: rgba(0, 0, 0, 0.4);
  415. position: absolute;
  416. bottom: 0;
  417. left: 0;
  418. white-space: nowrap;
  419. text-overflow: ellipsis;
  420. overflow: hidden;
  421. border-radius: 0 0 8rpx 8rpx;
  422. }
  423. .tui-goods__statu {
  424. padding-left: 45rpx;
  425. padding-right: 10rpx;
  426. height: 35rpx;
  427. position: absolute;
  428. top: 17rpx;
  429. left: 17rpx;
  430. background-color: rgba(0, 0, 0, 0.4);
  431. border-radius: 18rpx;
  432. line-height: 35rpx;
  433. color: #ffffff;
  434. text-align: right;
  435. font-size: $font-size-20;
  436. .icon-live {
  437. width: 17rpx;
  438. height: 17rpx;
  439. display: block;
  440. margin: 0 auto;
  441. position: absolute;
  442. left: 15rpx;
  443. top: 9rpx;
  444. }
  445. .iconfont {
  446. width: 35rpx;
  447. height: 35rpx;
  448. line-height: 35rpx;
  449. display: block;
  450. position: absolute;
  451. left: 10rpx;
  452. font-size: $font-size-26;
  453. &.icon-weikaishi {
  454. color: #e56d00;
  455. left: 0;
  456. }
  457. &.icon-jieshu {
  458. color: #ffffff;
  459. left: 0;
  460. font-size: 22rpx;
  461. }
  462. }
  463. }
  464. .tui-goods__text {
  465. width: 100%;
  466. height: 44rpx;
  467. float: left;
  468. line-height: 44rpx;
  469. box-sizing: border-box;
  470. padding-left: 12rpx;
  471. font-size: $font-size-24;
  472. color: #666666;
  473. white-space: nowrap;
  474. text-overflow: ellipsis;
  475. overflow: hidden;
  476. position: relative;
  477. &::before {
  478. content: '';
  479. width: 8rpx;
  480. height: 8rpx;
  481. border-radius: 50%;
  482. background-color: #cccccc;
  483. position: absolute;
  484. left: 0;
  485. top: 18rpx;
  486. }
  487. }
  488. }
  489. </style>