templateI.vue 12 KB

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