templateC.vue 11 KB

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