templateB.vue 7.0 KB

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