templateK.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  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. <template>
  100. <cm-acttags :product="item.product"></cm-acttags>
  101. </template>
  102. <view v-if="hasLogin">
  103. <template v-if="item.product.productCategory == 1">
  104. <template v-if="userIdentity == 3">
  105. <template v-if="item.product.shopID == shopId">
  106. <view class="title-none" v-if="item.product.priceFlag === 1">
  107. <text class="p big">¥未公开价格</text>
  108. </view>
  109. <view
  110. class="price tui-skeleton-rect"
  111. v-else
  112. :class="
  113. PromotionsFormat(item.product.promotions) ||
  114. item.product.svipProductFlag == 1
  115. ? 'none'
  116. : ''
  117. "
  118. >
  119. <text class="p sm">¥</text>
  120. <text class="p big">{{
  121. (PromotionsFormat(item.product.promotions)
  122. ? item.product.originalPrice
  123. : item.product.price) | NumFormat
  124. }}</text>
  125. </view>
  126. </template>
  127. <template v-else>
  128. <view class="no-price">
  129. <view class="p-stars">
  130. <text class="p-no">¥</text>
  131. <uni-grader
  132. :grade="Number(item.product.priceGrade)"
  133. :margin="14"
  134. ></uni-grader>
  135. </view>
  136. </view>
  137. </template>
  138. </template>
  139. <template v-else-if="userIdentity === 4">
  140. <view class="title-none" v-if="item.product.priceFlag === 1">
  141. <text class="p big">¥未公开价格</text>
  142. </view>
  143. <view class="title-none" v-if="item.product.priceFlag === 2">
  144. <text class="p big">¥价格仅会员可见</text>
  145. </view>
  146. <view
  147. class="price tui-skeleton-rect"
  148. v-if="item.product.priceFlag === 0"
  149. :class="
  150. PromotionsFormat(item.product.promotions) || item.product.svipProductFlag == 1
  151. ? 'none'
  152. : ''
  153. "
  154. >
  155. <text class="p sm">¥</text>
  156. <text class="p big">{{
  157. (PromotionsFormat(item.product.promotions)
  158. ? item.product.originalPrice
  159. : item.product.price) | NumFormat
  160. }}</text>
  161. </view>
  162. </template>
  163. <template v-else>
  164. <view class="title-none" v-if="item.product.priceFlag === 1">
  165. <text class="p big">¥未公开价格</text>
  166. </view>
  167. <view
  168. class="price tui-skeleton-rect"
  169. v-else
  170. :class="
  171. PromotionsFormat(item.product.promotions) || item.product.svipProductFlag == 1
  172. ? 'none'
  173. : ''
  174. "
  175. >
  176. <text class="p sm">¥</text>
  177. <text class="p big">{{
  178. (PromotionsFormat(item.product.promotions)
  179. ? item.product.originalPrice
  180. : item.product.price) | NumFormat
  181. }}</text>
  182. </view>
  183. </template>
  184. </template>
  185. <template v-else>
  186. <view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
  187. <text class="p sm">¥</text> <text class="p big">价格详聊</text>
  188. </view>
  189. <view class="price tui-skeleton-rect" v-else>
  190. <text class="p sm">¥</text>
  191. <text class="p big">{{ item.product.price | NumFormat }}</text>
  192. </view>
  193. </template>
  194. </view>
  195. <view v-else class="no-price">
  196. <template v-if="item.product.productCategory == 1">
  197. <view class="p-stars">
  198. <text class="p-no">¥</text>
  199. <uni-grader :grade="Number(item.product.priceGrade)" :margin="14"></uni-grader>
  200. </view>
  201. </template>
  202. <template v-else>
  203. <view class="p-stars"> <text class="p-no">¥登录可见</text> </view>
  204. </template>
  205. </view>
  206. </view>
  207. </view>
  208. </view>
  209. </view>
  210. </template>
  211. <script>
  212. import { mapState, mapMutations } from 'vuex'
  213. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  214. import cmActtags from '@/components/cm-module/productDetails/cm-acttags.vue'
  215. export default {
  216. name: 'templateD',
  217. components: {
  218. uniGrader,
  219. cmActtags
  220. },
  221. props: {
  222. pageData: {
  223. type: Object
  224. },
  225. userIdentity: {
  226. type: Number
  227. }
  228. },
  229. data() {
  230. return {
  231. shopId: 0,
  232. floorData: {}
  233. }
  234. },
  235. filters: {
  236. NumFormat: function(text) {
  237. //处理金额
  238. return Number(text).toFixed(2)
  239. }
  240. },
  241. created() {
  242. this.initData(this.pageData)
  243. },
  244. computed: {
  245. ...mapState(['hasLogin', 'userInfo', 'isActivity'])
  246. },
  247. watch: {
  248. pageData: {
  249. handler: function(el) {
  250. //监听对象的变换使用 function,箭头函数容易出现this指向不正确
  251. this.pageData = el
  252. this.initData(this.pageData)
  253. },
  254. deep: true
  255. }
  256. },
  257. methods: {
  258. initData(data) {
  259. this.$api.getStorage().then(resolve => {
  260. this.shopId = resolve.shopId ? resolve.shopId : 0
  261. })
  262. this.floorData = data
  263. // console.log(this.floorData)
  264. },
  265. PromotionsFormat(promo) {
  266. //促销活动类型数据处理
  267. if (promo != null) {
  268. if (promo.type == 1 && promo.mode == 1) {
  269. return true
  270. } else {
  271. return false
  272. }
  273. }
  274. return false
  275. },
  276. navToDetailPage(pros) {
  277. //跳转商品详情页
  278. this.$api.FlooryNavigateTo(pros)
  279. },
  280. BannerNavigateTo(linkType, linkId, linkHref, keyword) {
  281. //跳转商品详情页
  282. this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
  283. }
  284. }
  285. }
  286. </script>
  287. <style lang="scss">
  288. .section_page_main {
  289. width: 100%;
  290. height: auto;
  291. box-sizing: border-box;
  292. .floor-item-ad {
  293. width: 100%;
  294. margin-bottom: 20rpx;
  295. .floor-item-left,
  296. .floor_item_right {
  297. width: 339rpx;
  298. height: 516rpx;
  299. }
  300. .floor-item-left {
  301. margin-right: 20rpx;
  302. float: left;
  303. .item-img-gg {
  304. width: 339rpx;
  305. height: 516rpx;
  306. border-radius: 16rpx;
  307. }
  308. }
  309. .floor_item_right {
  310. float: left;
  311. .item-img-gg {
  312. width: 100%;
  313. height: 246rpx;
  314. display: block;
  315. border-radius: 16rpx;
  316. &:nth-child(1) {
  317. margin-bottom: 24rpx;
  318. }
  319. }
  320. }
  321. &.ad-row2 {
  322. width: 100%;
  323. margin: 24rpx 0;
  324. .item-img-gg {
  325. width: 339rpx;
  326. height: 246rpx;
  327. float: left;
  328. display: block;
  329. border-radius: 16rpx;
  330. &:nth-child(1) {
  331. margin-right: 20rpx;
  332. }
  333. }
  334. }
  335. }
  336. .floor-item {
  337. width: 339rpx;
  338. height: 516rpx;
  339. margin-right: 20rpx;
  340. font-size: $font-size-24;
  341. color: $text-color;
  342. background: #ffffff;
  343. line-height: 36rpx;
  344. border-radius: 16rpx;
  345. margin-bottom: 20rpx;
  346. float: left;
  347. box-sizing: border-box;
  348. position: relative;
  349. &:nth-child(even) {
  350. margin-right: 0;
  351. }
  352. .item-img-gg {
  353. width: 339rpx;
  354. height: 516rpx;
  355. display: block;
  356. border-radius: 16rpx;
  357. }
  358. .item-img {
  359. width: 339rpx;
  360. height: 339rpx;
  361. border-radius: 16rpx 16rpx 0 0;
  362. display: block;
  363. margin-bottom: 8rpx;
  364. }
  365. .floor-item_tag {
  366. width: 100%;
  367. height: 32rpx;
  368. float: left;
  369. margin: 20rpx 0;
  370. padding: 0 20rpx;
  371. box-sizing: border-box;
  372. text {
  373. display: inline-block;
  374. padding: 0 8rpx;
  375. border: 1px solid #e3ebf7;
  376. border-radius: 8rpx;
  377. color: #9aa5b5;
  378. font-size: $font-size-22;
  379. line-height: 32rpx;
  380. text-align: center;
  381. float: left;
  382. }
  383. }
  384. .floor-item-content {
  385. width: 100%;
  386. padding: 0 20rpx;
  387. box-sizing: border-box;
  388. }
  389. .floor-item-act {
  390. display: block;
  391. width: 100%;
  392. height: 32rpx;
  393. text-align: center;
  394. box-sizing: border-box;
  395. }
  396. .title-none {
  397. font-size: $font-size-26;
  398. color: #ff2a2a;
  399. line-height: 54rpx;
  400. }
  401. .title {
  402. width: 100%;
  403. height: 70rpx;
  404. display: flex;
  405. line-height: 35rpx;
  406. flex-direction: column;
  407. margin: 8rpx 0;
  408. padding: 0;
  409. position: relative;
  410. .mclap {
  411. width: 100%;
  412. line-height: 35rpx;
  413. text-overflow: ellipsis;
  414. display: -webkit-box;
  415. word-break: break-all;
  416. -webkit-box-orient: vertical;
  417. -webkit-line-clamp: 2;
  418. overflow: hidden;
  419. font-size: 26rpx;
  420. &.indent {
  421. text-indent: 95rpx;
  422. }
  423. }
  424. .mclap-tag {
  425. display: block;
  426. width: 84rpx;
  427. height: 32rpx;
  428. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  429. border-radius: 4rpx 48rpx 4px 4px;
  430. line-height: 32rpx;
  431. font-size: $font-size-22;
  432. color: #ffffff;
  433. text-align: center;
  434. position: absolute;
  435. left: 0;
  436. top: 0;
  437. }
  438. }
  439. .no-price {
  440. height: 54rpx;
  441. line-height: 54rpx;
  442. display: flex;
  443. box-sizing: border-box;
  444. .p-no {
  445. font-size: $font-size-28;
  446. color: $text-color;
  447. display: block;
  448. float: left;
  449. }
  450. .p-stars {
  451. float: left;
  452. }
  453. }
  454. .price {
  455. color: #ff2a2a;
  456. line-height: 54rpx;
  457. &.none {
  458. text-decoration: line-through;
  459. color: #999999;
  460. }
  461. .sm {
  462. font-size: $font-size-24;
  463. }
  464. .big {
  465. font-size: $font-size-28;
  466. }
  467. }
  468. }
  469. }
  470. </style>