templateR.vue 11 KB

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