templateD.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  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 ? floorData.floorContent.linkParam1.id : '',
  11. floorData.floorContent.adsLink1,
  12. floorData.floorContent.linkParam1.keyword ? floorData.floorContent.linkParam1.keyword : ''
  13. )
  14. "
  15. mode="aspectFill"
  16. >
  17. </image>
  18. </view>
  19. <view class="floor-item ad_02">
  20. <image
  21. class="item-img-gg"
  22. :src="floorData.floorContent.appletsAdsImage2"
  23. @click="
  24. BannerNavigateTo(
  25. floorData.floorContent.linkType2,
  26. floorData.floorContent.linkParam2.id ? floorData.floorContent.linkParam2.id : '',
  27. floorData.floorContent.adsLink2,
  28. floorData.floorContent.linkParam2.keyword ? floorData.floorContent.linkParam2.keyword : ''
  29. )
  30. "
  31. mode="aspectFill"
  32. >
  33. </image>
  34. </view>
  35. <view class="floor-item ad_03">
  36. <image
  37. class="item-img-gg"
  38. :src="floorData.floorContent.appletsAdsImage3"
  39. @click="
  40. BannerNavigateTo(
  41. floorData.floorContent.linkType3,
  42. floorData.floorContent.linkParam3.id ? floorData.floorContent.linkParam3.id : '',
  43. floorData.floorContent.adsLink3,
  44. floorData.floorContent.linkParam3.keyword ? floorData.floorContent.linkParam3.keyword : ''
  45. )
  46. "
  47. mode="aspectFill"
  48. >
  49. </image>
  50. </view>
  51. <view
  52. class="floor-item ad_04 clearfix"
  53. v-for="(item, idx) in floorData.floorImageList"
  54. :key="idx"
  55. @click.stop="navToDetailPage(item)"
  56. >
  57. <image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
  58. <view class="floor-item_tag" v-if="item.listType == 2">
  59. <text>{{ item.label }}</text>
  60. </view>
  61. <view class="floor-item-content">
  62. <view class="title tui-skeleton-rect">
  63. <text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
  64. <text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
  65. >{{ item.name }}
  66. </text>
  67. </view>
  68. <view class="floor-item-price" v-if="item.listType == 1">
  69. <template>
  70. <template-Tags :product="item.product"></template-Tags>
  71. </template>
  72. <view v-if="hasLogin">
  73. <template v-if="item.product.productCategory == 1">
  74. <template-Price :product="item.product"></template-Price>
  75. </template>
  76. <template v-else>
  77. <view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
  78. <text class="p sm">¥</text> <text class="p big">价格详聊</text>
  79. </view>
  80. <view class="price tui-skeleton-rect" v-else>
  81. <text class="p sm">¥</text>
  82. <text class="p big">{{ item.product.price | NumFormat }}</text>
  83. </view>
  84. </template>
  85. </view>
  86. <view v-else class="no-price">
  87. <template v-if="item.product.productCategory == 1">
  88. <view class="p-stars">
  89. <text class="p-no">¥</text>
  90. <uni-grader :grade="Number(item.product.priceGrade)" :margin="14"></uni-grader>
  91. </view>
  92. </template>
  93. <template v-else>
  94. <view class="p-stars"> <text class="p-no">¥登录可见</text> </view>
  95. </template>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. </template>
  102. <script>
  103. import { mapState, mapMutations } from 'vuex'
  104. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  105. import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
  106. import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
  107. export default {
  108. name: 'templateD',
  109. components: {
  110. uniGrader,
  111. templateTags,
  112. templatePrice
  113. },
  114. props: {
  115. pageData: {
  116. type: Object
  117. },
  118. userIdentity: {
  119. type: Number
  120. }
  121. },
  122. data() {
  123. return {
  124. shopId: 0,
  125. floorData: {}
  126. }
  127. },
  128. filters: {
  129. NumFormat: function(text) {
  130. //处理金额
  131. return Number(text).toFixed(2)
  132. }
  133. },
  134. created() {
  135. this.initData(this.pageData)
  136. },
  137. computed: {
  138. ...mapState(['hasLogin', 'userInfo', 'isActivity'])
  139. },
  140. watch: {
  141. pageData: {
  142. handler: function(el) {
  143. //监听对象的变换使用 function,箭头函数容易出现this指向不正确
  144. this.pageData = el
  145. this.initData(this.pageData)
  146. },
  147. deep: true
  148. }
  149. },
  150. methods: {
  151. initData(data) {
  152. this.floorData = data
  153. // console.log(this.floorData)
  154. this.$api
  155. .getStorage()
  156. .then(resolve => {
  157. this.shopId = resolve.shopId ? resolve.shopId : 0
  158. })
  159. .catch(err => {
  160. console.log('err', err)
  161. })
  162. },
  163. PromotionsFormat(promo) {
  164. //促销活动类型数据处理
  165. if (promo != null) {
  166. if (promo.type == 1 && promo.mode == 1) {
  167. return true
  168. } else {
  169. return false
  170. }
  171. }
  172. return false
  173. },
  174. navToDetailPage(pros) {
  175. //跳转商品详情页
  176. this.$api.FlooryNavigateTo(pros)
  177. },
  178. BannerNavigateTo(linkType, linkId, linkHref, keyword) {
  179. //跳转商品详情页
  180. this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
  181. }
  182. }
  183. }
  184. </script>
  185. <style lang="scss">
  186. .section_page_main {
  187. width: 100%;
  188. height: auto;
  189. box-sizing: border-box;
  190. .floor-item {
  191. width: 339rpx;
  192. height: 516rpx;
  193. margin-right: 20rpx;
  194. font-size: $font-size-24;
  195. color: $text-color;
  196. background: #ffffff;
  197. line-height: 36rpx;
  198. border-radius: 16rpx;
  199. margin-bottom: 20rpx;
  200. float: left;
  201. box-sizing: border-box;
  202. position: relative;
  203. &.ad_01 {
  204. width: 100%;
  205. height: 240rpx;
  206. margin-right: 0;
  207. .item-img-gg {
  208. width: 100%;
  209. height: 240rpx;
  210. display: block;
  211. border-radius: 16rpx;
  212. }
  213. }
  214. &:nth-child(odd) {
  215. margin-right: 0;
  216. }
  217. .item-img-gg {
  218. width: 339rpx;
  219. height: 516rpx;
  220. display: block;
  221. border-radius: 16rpx;
  222. }
  223. .item-img {
  224. width: 339rpx;
  225. height: 339rpx;
  226. border-radius: 16rpx 16rpx 0 0;
  227. display: block;
  228. margin-bottom: 8rpx;
  229. }
  230. .floor-item_tag {
  231. width: 100%;
  232. height: 32rpx;
  233. float: left;
  234. margin: 20rpx 0;
  235. padding: 0 20rpx;
  236. box-sizing: border-box;
  237. text {
  238. display: inline-block;
  239. padding: 0 8rpx;
  240. border: 1px solid #e3ebf7;
  241. border-radius: 8rpx;
  242. color: #9aa5b5;
  243. font-size: $font-size-22;
  244. line-height: 32rpx;
  245. text-align: center;
  246. float: left;
  247. }
  248. }
  249. .floor-item-content {
  250. width: 100%;
  251. padding: 0 20rpx;
  252. box-sizing: border-box;
  253. }
  254. .floor-item-act {
  255. display: block;
  256. width: 100%;
  257. height: 32rpx;
  258. text-align: center;
  259. box-sizing: border-box;
  260. }
  261. .title-none {
  262. font-size: $font-size-26;
  263. color: #ff2a2a;
  264. line-height: 54rpx;
  265. }
  266. .title {
  267. width: 100%;
  268. height: 70rpx;
  269. display: flex;
  270. line-height: 35rpx;
  271. flex-direction: column;
  272. margin: 8rpx 0;
  273. padding: 0;
  274. position: relative;
  275. .mclap {
  276. width: 100%;
  277. line-height: 35rpx;
  278. text-overflow: ellipsis;
  279. display: -webkit-box;
  280. word-break: break-all;
  281. -webkit-box-orient: vertical;
  282. -webkit-line-clamp: 2;
  283. overflow: hidden;
  284. font-size: 26rpx;
  285. &.indent {
  286. text-indent: 95rpx;
  287. }
  288. }
  289. .mclap-tag {
  290. display: block;
  291. width: 84rpx;
  292. height: 32rpx;
  293. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  294. border-radius: 4rpx 48rpx 4px 4px;
  295. line-height: 32rpx;
  296. font-size: $font-size-22;
  297. color: #ffffff;
  298. text-align: center;
  299. position: absolute;
  300. left: 0;
  301. top: 0;
  302. }
  303. }
  304. .no-price {
  305. height: 54rpx;
  306. line-height: 54rpx;
  307. display: flex;
  308. box-sizing: border-box;
  309. .p-no {
  310. font-size: $font-size-28;
  311. color: $text-color;
  312. display: block;
  313. float: left;
  314. }
  315. .p-stars {
  316. float: left;
  317. }
  318. }
  319. .price {
  320. color: #ff2a2a;
  321. line-height: 54rpx;
  322. &.none {
  323. text-decoration: line-through;
  324. color: #999999;
  325. }
  326. .sm {
  327. font-size: $font-size-24;
  328. }
  329. .big {
  330. font-size: $font-size-28;
  331. }
  332. }
  333. }
  334. }
  335. </style>