templateB.vue 11 KB

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