templateF.vue 8.3 KB

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