templateA.vue 10.0 KB

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