templateF.vue 6.0 KB

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