templateA.vue 6.6 KB

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