templateE.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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
  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: 'templateE',
  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. &.ad_01 {
  172. width: 100%;
  173. height: 240rpx;
  174. .item-img-gg {
  175. width: 100%;
  176. height: 240rpx;
  177. display: block;
  178. border-radius: 16rpx;
  179. }
  180. }
  181. &.ad_02 {
  182. margin-right: 20rpx;
  183. }
  184. &:nth-child(odd) {
  185. margin-right: 0;
  186. }
  187. .item-img-gg {
  188. width: 339rpx;
  189. height: 516rpx;
  190. display: block;
  191. border-radius: 16rpx;
  192. }
  193. .item-img {
  194. width: 339rpx;
  195. height: 339rpx;
  196. border-radius: 16rpx 16rpx 0 0;
  197. display: block;
  198. margin-bottom: 8rpx;
  199. }
  200. .floor-item_tag {
  201. width: 100%;
  202. height: 32rpx;
  203. float: left;
  204. margin: 20rpx 0;
  205. padding: 0 20rpx;
  206. box-sizing: border-box;
  207. text {
  208. display: inline-block;
  209. padding: 0 8rpx;
  210. border: 1px solid #e3ebf7;
  211. border-radius: 8rpx;
  212. color: #9aa5b5;
  213. font-size: $font-size-22;
  214. line-height: 32rpx;
  215. text-align: center;
  216. float: left;
  217. }
  218. }
  219. .floor-item-content {
  220. width: 100%;
  221. padding: 0 20rpx;
  222. box-sizing: border-box;
  223. }
  224. .floor-item-act {
  225. display: block;
  226. width: 100%;
  227. height: 32rpx;
  228. text-align: center;
  229. box-sizing: border-box;
  230. }
  231. .title-none {
  232. font-size: $font-size-26;
  233. color: #ff2a2a;
  234. line-height: 54rpx;
  235. }
  236. .title {
  237. width: 100%;
  238. height: 70rpx;
  239. display: flex;
  240. line-height: 35rpx;
  241. flex-direction: column;
  242. margin: 8rpx 0;
  243. padding: 0;
  244. position: relative;
  245. .mclap {
  246. width: 100%;
  247. line-height: 35rpx;
  248. text-overflow: ellipsis;
  249. display: -webkit-box;
  250. word-break: break-all;
  251. -webkit-box-orient: vertical;
  252. -webkit-line-clamp: 2;
  253. overflow: hidden;
  254. font-size: 26rpx;
  255. &.indent {
  256. text-indent: 95rpx;
  257. }
  258. }
  259. .mclap-tag {
  260. display: block;
  261. width: 84rpx;
  262. height: 32rpx;
  263. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  264. border-radius: 4rpx 48rpx 4px 4px;
  265. line-height: 32rpx;
  266. font-size: $font-size-22;
  267. color: #ffffff;
  268. text-align: center;
  269. position: absolute;
  270. left: 0;
  271. top: 0;
  272. }
  273. }
  274. .no-price {
  275. height: 54rpx;
  276. line-height: 54rpx;
  277. display: flex;
  278. box-sizing: border-box;
  279. .p-no {
  280. font-size: $font-size-28;
  281. color: $text-color;
  282. display: block;
  283. float: left;
  284. }
  285. .p-stars {
  286. float: left;
  287. }
  288. }
  289. .price {
  290. color: #ff2a2a;
  291. line-height: 54rpx;
  292. &.none {
  293. text-decoration: line-through;
  294. color: #999999;
  295. }
  296. .sm {
  297. font-size: $font-size-24;
  298. }
  299. .big {
  300. font-size: $font-size-28;
  301. }
  302. }
  303. }
  304. }
  305. </style>