templateK.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. <template>
  2. <view class="section_page_main clearfix">
  3. <view class="floor-item-ad clearfix">
  4. <view class="floor-item-left">
  5. <image
  6. class="item-img-gg"
  7. :src="floorData.floorContent.appletsAdsImage1"
  8. @click="
  9. BannerNavigateTo(
  10. floorData.floorContent.linkType1,
  11. floorData.floorContent.linkParam1.id ? floorData.floorContent.linkParam1.id : '',
  12. floorData.floorContent.adsLink1,
  13. floorData.floorContent.linkParam1.keyword ? floorData.floorContent.linkParam1.keyword : ''
  14. )
  15. "
  16. mode="aspectFill"
  17. >
  18. </image>
  19. </view>
  20. <view class="floor_item_right">
  21. <image
  22. class="item-img-gg"
  23. :src="floorData.floorContent.appletsAdsImage2"
  24. @click="
  25. BannerNavigateTo(
  26. floorData.floorContent.linkType2,
  27. floorData.floorContent.linkParam2.id ? floorData.floorContent.linkParam2.id : '',
  28. floorData.floorContent.adsLink2,
  29. floorData.floorContent.linkParam2.keyword ? floorData.floorContent.linkParam2.keyword : ''
  30. )
  31. "
  32. mode="aspectFill"
  33. >
  34. </image>
  35. <image
  36. class="item-img-gg"
  37. :src="floorData.floorContent.appletsAdsImage3"
  38. @click="
  39. BannerNavigateTo(
  40. floorData.floorContent.linkType3,
  41. floorData.floorContent.linkParam3.id ? floorData.floorContent.linkParam3.id : '',
  42. floorData.floorContent.adsLink3,
  43. floorData.floorContent.linkParam3.keyword ? floorData.floorContent.linkParam3.keyword : ''
  44. )
  45. "
  46. mode="aspectFill"
  47. >
  48. </image>
  49. </view>
  50. </view>
  51. <view class="floor-item-ad ad-row2 clearfix">
  52. <image
  53. class="item-img-gg"
  54. :src="floorData.floorContent.appletsAdsImage2"
  55. @click="
  56. BannerNavigateTo(
  57. floorData.floorContent.linkType2,
  58. floorData.floorContent.linkParam2.id ? floorData.floorContent.linkParam2.id : '',
  59. floorData.floorContent.adsLink2,
  60. floorData.floorContent.linkParam2.keyword ? floorData.floorContent.linkParam2.keyword : ''
  61. )
  62. "
  63. mode="aspectFill"
  64. >
  65. </image>
  66. <image
  67. class="item-img-gg"
  68. :src="floorData.floorContent.appletsAdsImage3"
  69. @click="
  70. BannerNavigateTo(
  71. floorData.floorContent.linkType3,
  72. floorData.floorContent.linkParam3.id ? floorData.floorContent.linkParam3.id : '',
  73. floorData.floorContent.adsLink3,
  74. floorData.floorContent.linkParam3.keyword ? floorData.floorContent.linkParam3.keyword : ''
  75. )
  76. "
  77. mode="aspectFill"
  78. >
  79. </image>
  80. </view>
  81. <view
  82. class="floor-item ad_04 clearfix"
  83. v-for="(item, idx) in floorData.floorImageList"
  84. :key="idx"
  85. @click.stop="navToDetailPage(item)"
  86. >
  87. <image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
  88. <view class="floor-item_tag" v-if="item.listType == 2">
  89. <text>{{ item.label }}</text>
  90. </view>
  91. <view class="floor-item-content">
  92. <view class="title tui-skeleton-rect">
  93. <text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
  94. <text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
  95. >{{ item.name }}
  96. </text>
  97. </view>
  98. <view class="floor-item-price" v-if="item.listType == 1">
  99. <view class="floor-item-act">
  100. <view class="coupon-tags" v-if="item.product.couponsLogo">优惠券</view>
  101. <template v-if="userIdentity === 3">
  102. <template v-if="item.product.actStatus === 1">
  103. <view class="floor-tags" v-if="PromotionsFormat(item.product.promotions)">
  104. {{ item.product.promotions.name }}
  105. <text
  106. v-if="hasLogin && item.product.priceFlag != 1 && item.product.shopID == shopId"
  107. >:¥{{ item.product.price | NumFormat }}</text
  108. >
  109. </view>
  110. <view class="floor-tags" v-else>{{ item.product.promotions.name }}</view>
  111. </template>
  112. <template v-if="item.product.actStatus === 0 && item.product.ladderPriceFlag === 1">
  113. <view class="floor-tags">阶梯价格</view>
  114. </template>
  115. </template>
  116. <template v-else>
  117. <template v-if="item.product.actStatus === 1">
  118. <view class="floor-tags" v-if="PromotionsFormat(item.product.promotions)">
  119. {{ item.product.promotions.name }}
  120. <text v-if="hasLogin && item.product.priceFlag != 1"
  121. >:¥{{ item.product.price | NumFormat }}</text
  122. >
  123. </view>
  124. <view class="floor-tags" v-else>{{ item.product.promotions.name }}</view>
  125. </template>
  126. <template v-if="item.product.actStatus === 0 && item.product.ladderPriceFlag === 1">
  127. <view class="floor-tags">阶梯价格</view>
  128. </template>
  129. </template>
  130. </view>
  131. <view v-if="hasLogin">
  132. <template v-if="item.product.productCategory == 1">
  133. <template v-if="userIdentity == 3">
  134. <template v-if="item.product.shopID == shopId">
  135. <view class="title-none" v-if="item.product.priceFlag === 1">
  136. <text class="p big">¥未公开价格</text>
  137. </view>
  138. <view
  139. class="price tui-skeleton-rect"
  140. v-else
  141. :class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
  142. >
  143. <text class="p sm">¥</text>
  144. <text class="p big">{{
  145. (PromotionsFormat(item.product.promotions)
  146. ? item.product.originalPrice
  147. : item.product.price) | NumFormat
  148. }}</text>
  149. </view>
  150. </template>
  151. <template v-else>
  152. <view class="no-price">
  153. <view class="p-stars">
  154. <text class="p-no">¥</text>
  155. <uni-grader
  156. :grade="Number(item.product.priceGrade)"
  157. :margin="14"
  158. ></uni-grader>
  159. </view>
  160. </view>
  161. </template>
  162. </template>
  163. <template v-else-if="userIdentity === 4">
  164. <view class="title-none" v-if="item.product.priceFlag === 1">
  165. <text class="p big">¥未公开价格</text>
  166. </view>
  167. <view class="title-none" v-if="item.product.priceFlag === 2">
  168. <text class="p big">¥价格仅会员可见</text>
  169. </view>
  170. <view
  171. class="price tui-skeleton-rect"
  172. v-if="item.product.priceFlag === 0"
  173. :class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
  174. >
  175. <text class="p sm">¥</text>
  176. <text class="p big">{{
  177. (PromotionsFormat(item.product.promotions)
  178. ? item.product.originalPrice
  179. : item.product.price) | NumFormat
  180. }}</text>
  181. </view>
  182. </template>
  183. <template v-else>
  184. <view class="title-none" v-if="item.product.priceFlag === 1">
  185. <text class="p big">¥未公开价格</text>
  186. </view>
  187. <view
  188. class="price tui-skeleton-rect"
  189. v-else
  190. :class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
  191. >
  192. <text class="p sm">¥</text>
  193. <text class="p big">{{
  194. (PromotionsFormat(item.product.promotions)
  195. ? item.product.originalPrice
  196. : item.product.price) | NumFormat
  197. }}</text>
  198. </view>
  199. </template>
  200. </template>
  201. <template v-else>
  202. <view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
  203. <text class="p sm">¥</text> <text class="p big">价格详聊</text>
  204. </view>
  205. <view class="price tui-skeleton-rect" v-else>
  206. <text class="p sm">¥</text>
  207. <text class="p big">{{ item.product.price | NumFormat }}</text>
  208. </view>
  209. </template>
  210. </view>
  211. <view v-else class="no-price">
  212. <template v-if="item.product.productCategory == 1">
  213. <view class="p-stars">
  214. <text class="p-no">¥</text>
  215. <uni-grader :grade="Number(item.product.priceGrade)" :margin="14"></uni-grader>
  216. </view>
  217. </template>
  218. <template v-else>
  219. <view class="p-stars"> <text class="p-no">¥登录可见</text> </view>
  220. </template>
  221. </view>
  222. </view>
  223. </view>
  224. </view>
  225. </view>
  226. </template>
  227. <script>
  228. import { mapState, mapMutations } from 'vuex'
  229. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  230. export default {
  231. name: 'templateD',
  232. components: {
  233. uniGrader
  234. },
  235. props: {
  236. pageData: {
  237. type: Object
  238. },
  239. userIdentity: {
  240. type: Number
  241. }
  242. },
  243. data() {
  244. return {
  245. shopId: 0,
  246. floorData: {}
  247. }
  248. },
  249. filters: {
  250. NumFormat: function(text) {
  251. //处理金额
  252. return Number(text).toFixed(2)
  253. }
  254. },
  255. created() {
  256. this.initData(this.pageData)
  257. },
  258. computed: {
  259. ...mapState(['hasLogin', 'userInfo', 'isActivity'])
  260. },
  261. watch: {
  262. pageData: {
  263. handler: function(el) {
  264. //监听对象的变换使用 function,箭头函数容易出现this指向不正确
  265. this.pageData = el
  266. this.initData(this.pageData)
  267. },
  268. deep: true
  269. }
  270. },
  271. methods: {
  272. initData(data) {
  273. this.$api.getStorage().then(resolve => {
  274. this.shopId = resolve.shopId ? resolve.shopId : 0
  275. })
  276. this.floorData = data
  277. // console.log(this.floorData)
  278. },
  279. PromotionsFormat(promo) {
  280. //促销活动类型数据处理
  281. if (promo != null) {
  282. if (promo.type == 1 && promo.mode == 1) {
  283. return true
  284. } else {
  285. return false
  286. }
  287. }
  288. return false
  289. },
  290. navToDetailPage(pros) {
  291. //跳转商品详情页
  292. this.$api.FlooryNavigateTo(pros)
  293. },
  294. BannerNavigateTo(linkType, linkId, linkHref, keyword) {
  295. //跳转商品详情页
  296. this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
  297. }
  298. }
  299. }
  300. </script>
  301. <style lang="scss">
  302. .section_page_main {
  303. width: 100%;
  304. height: auto;
  305. box-sizing: border-box;
  306. .floor-item-ad {
  307. width: 100%;
  308. margin-bottom: 20rpx;
  309. .floor-item-left,
  310. .floor_item_right {
  311. width: 339rpx;
  312. height: 516rpx;
  313. }
  314. .floor-item-left {
  315. margin-right: 20rpx;
  316. float: left;
  317. .item-img-gg {
  318. width: 339rpx;
  319. height: 516rpx;
  320. border-radius: 16rpx;
  321. }
  322. }
  323. .floor_item_right {
  324. float: left;
  325. .item-img-gg {
  326. width: 100%;
  327. height: 246rpx;
  328. display: block;
  329. border-radius: 16rpx;
  330. &:nth-child(1) {
  331. margin-bottom: 24rpx;
  332. }
  333. }
  334. }
  335. &.ad-row2 {
  336. width: 100%;
  337. margin: 24rpx 0;
  338. .item-img-gg {
  339. width: 339rpx;
  340. height: 246rpx;
  341. float: left;
  342. display: block;
  343. border-radius: 16rpx;
  344. &:nth-child(1) {
  345. margin-right: 20rpx;
  346. }
  347. }
  348. }
  349. }
  350. .floor-item {
  351. width: 339rpx;
  352. height: 516rpx;
  353. margin-right: 20rpx;
  354. font-size: $font-size-24;
  355. color: $text-color;
  356. background: #ffffff;
  357. line-height: 36rpx;
  358. border-radius: 16rpx;
  359. margin-bottom: 20rpx;
  360. float: left;
  361. box-sizing: border-box;
  362. position: relative;
  363. &:nth-child(even) {
  364. margin-right: 0;
  365. }
  366. .item-img-gg {
  367. width: 339rpx;
  368. height: 516rpx;
  369. display: block;
  370. border-radius: 16rpx;
  371. }
  372. .item-img {
  373. width: 339rpx;
  374. height: 339rpx;
  375. border-radius: 16rpx 16rpx 0 0;
  376. display: block;
  377. margin-bottom: 8rpx;
  378. }
  379. .floor-item_tag {
  380. width: 100%;
  381. height: 32rpx;
  382. float: left;
  383. margin: 20rpx 0;
  384. padding: 0 20rpx;
  385. box-sizing: border-box;
  386. text {
  387. display: inline-block;
  388. padding: 0 8rpx;
  389. border: 1px solid #e3ebf7;
  390. border-radius: 8rpx;
  391. color: #9aa5b5;
  392. font-size: $font-size-22;
  393. line-height: 32rpx;
  394. text-align: center;
  395. float: left;
  396. }
  397. }
  398. .floor-item-content {
  399. width: 100%;
  400. padding: 0 20rpx;
  401. box-sizing: border-box;
  402. }
  403. .floor-item-act {
  404. display: block;
  405. width: 100%;
  406. height: 32rpx;
  407. text-align: center;
  408. box-sizing: border-box;
  409. .coupon-tags {
  410. height: 32rpx;
  411. box-sizing: border-box;
  412. border-radius: 8rpx;
  413. background-color: #fff1eb;
  414. line-height: 28rpx;
  415. color: #f94b4b;
  416. text-align: center;
  417. display: inline-block;
  418. padding: 0 10rpx;
  419. font-size: $font-size-20;
  420. border: 1px solid #f94b4b;
  421. float: left;
  422. margin-right: 12rpx;
  423. }
  424. .floor-tags {
  425. height: 32rpx;
  426. box-sizing: border-box;
  427. border-radius: 8rpx;
  428. background-color: #ffffff;
  429. line-height: 28rpx;
  430. color: $color-system;
  431. text-align: center;
  432. display: inline-block;
  433. padding: 0 16rpx;
  434. font-size: $font-size-20;
  435. border: 1px solid #e15616;
  436. float: left;
  437. }
  438. }
  439. .title-none {
  440. font-size: $font-size-26;
  441. color: #ff2a2a;
  442. line-height: 54rpx;
  443. }
  444. .title {
  445. width: 100%;
  446. height: 70rpx;
  447. display: flex;
  448. line-height: 35rpx;
  449. flex-direction: column;
  450. margin: 8rpx 0;
  451. padding: 0;
  452. position: relative;
  453. .mclap {
  454. width: 100%;
  455. line-height: 35rpx;
  456. text-overflow: ellipsis;
  457. display: -webkit-box;
  458. word-break: break-all;
  459. -webkit-box-orient: vertical;
  460. -webkit-line-clamp: 2;
  461. overflow: hidden;
  462. font-size: 26rpx;
  463. &.indent {
  464. text-indent: 95rpx;
  465. }
  466. }
  467. .mclap-tag {
  468. display: block;
  469. width: 84rpx;
  470. height: 32rpx;
  471. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  472. border-radius: 4rpx 48rpx 4px 4px;
  473. line-height: 32rpx;
  474. font-size: $font-size-22;
  475. color: #ffffff;
  476. text-align: center;
  477. position: absolute;
  478. left: 0;
  479. top: 0;
  480. }
  481. }
  482. .no-price {
  483. height: 54rpx;
  484. line-height: 54rpx;
  485. display: flex;
  486. box-sizing: border-box;
  487. .p-no {
  488. font-size: $font-size-28;
  489. color: $text-color;
  490. display: block;
  491. float: left;
  492. }
  493. .p-stars {
  494. float: left;
  495. }
  496. }
  497. .price {
  498. color: #ff2a2a;
  499. line-height: 54rpx;
  500. &.none {
  501. text-decoration: line-through;
  502. color: #999999;
  503. }
  504. .sm {
  505. font-size: $font-size-24;
  506. }
  507. .big {
  508. font-size: $font-size-28;
  509. }
  510. }
  511. }
  512. }
  513. </style>