templateG.vue 9.4 KB

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