hotProduct.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <template name="hotProduct">
  2. <view>
  3. <view class="container clearfix">
  4. <view class="title-header">推荐专区</view>
  5. <view class="recommend-list">
  6. <swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
  7. <swiper-item v-for="(product,index) in hotProductList" :key="index">
  8. <view class="floor-item clearfix" v-for="(item, idx) in product" :key="idx" @click.stop="navToDetailPage(item.id)">
  9. <image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
  10. <image class="item-icon-type" :src="iconNew" mode="" v-if="item.actType === 2"></image>
  11. <image class="item-icon-type" :src="iconHot" mode="" v-if="item.actType === 1"></image>
  12. <view class="floor-item-content">
  13. <view class="title tui-skeleton-rect">
  14. <text class="mclap">{{item.name}}</text>
  15. </view>
  16. <view class="floor-item-act">
  17. <template v-if="userIdentity === 3">
  18. <template v-if="item.actStatus===1">
  19. <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
  20. {{item.promotions.name}}
  21. <text v-if="hasLogin && item.priceFlag != 1 && item.supplierId == shopId">:¥{{item.price | NumFormat}}</text>
  22. </view>
  23. <view class="floor-tags" v-else>{{item.promotions.name}}</view>
  24. </template>
  25. <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
  26. <view class="floor-tags">阶梯价格</view>
  27. </template>
  28. </template>
  29. <template v-else>
  30. <template v-if="item.actStatus===1">
  31. <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
  32. {{item.promotions.name}}
  33. <text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}}</text>
  34. </view>
  35. <view class="floor-tags" v-else>{{item.promotions.name}}</view>
  36. </template>
  37. <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
  38. <view class="floor-tags">阶梯价格</view>
  39. </template>
  40. </template>
  41. </view>
  42. <view v-if="hasLogin">
  43. <template v-if="userIdentity == 3">
  44. <template v-if="item.supplierId == shopId">
  45. <view class="title-none" v-if="item.priceFlag === '1'">
  46. <text class="p big">¥未公开价格</text>
  47. </view>
  48. <view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
  49. <text class="p sm">¥</text>
  50. <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
  51. </view>
  52. </template>
  53. <template v-else>
  54. <view class="no-price">
  55. <view class="p-stars">
  56. <text class="p-no">¥</text>
  57. <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
  58. </view>
  59. </view>
  60. </template>
  61. </template>
  62. <template v-else-if="userIdentity ===4">
  63. <view class="title-none" v-if="item.priceFlag === '1'">
  64. <text class="p big">¥未公开价格</text>
  65. </view>
  66. <view class="title-none" v-if="item.priceFlag === '2'">
  67. <text class="p big">¥价格仅会员可见</text>
  68. </view>
  69. <view class="price tui-skeleton-rect" v-if="item.priceFlag === '0'" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
  70. <text class="p sm">¥</text>
  71. <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
  72. </view>
  73. </template>
  74. <template v-else>
  75. <view class="title-none" v-if="item.priceFlag === '1'">
  76. <text class="p big">¥未公开价格</text>
  77. </view>
  78. <view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
  79. <text class="p sm">¥</text>
  80. <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
  81. </view>
  82. </template>
  83. </view>
  84. <view v-else class="no-price">
  85. <view class="p-stars">
  86. <text class="p-no">¥</text>
  87. <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. </swiper-item>
  93. </swiper>
  94. <view class="swiper__recommenddots-box" v-if="hotProductList.length > 1">
  95. <view v-for="(item,idx) in hotProductList"
  96. :key="idx"
  97. :class="[idx===swiperCurrent?'swiper__dots-long':'none']"
  98. :data-index="swiperCurrent" class="swiper__dots-item">
  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:"hotProduct",
  110. components:{
  111. uniGrader
  112. },
  113. props:{
  114. list:{
  115. type:Array
  116. },
  117. userIdentity:{
  118. type:Number
  119. }
  120. },
  121. data() {
  122. return{
  123. current:100,
  124. swiperCurrent:0,
  125. hotProductList:[],
  126. pageSize:4,
  127. shopId:0,
  128. iconNew:'https://static.caimei365.com/app/img/icon/icon-new.png',
  129. iconHot:'https://static.caimei365.com/app/img/icon/icon-hot.png',
  130. }
  131. },
  132. filters: {
  133. NumFormat:function(text) {//处理金额
  134. return Number(text).toFixed(2);
  135. },
  136. },
  137. created(){
  138. this.initData(this.list)
  139. },
  140. watch: {
  141. list: {
  142. handler: function (el) {//监听对象的变换使用 function,箭头函数容易出现this指向不正确
  143. this.list = el
  144. this.initData(this.list)
  145. },
  146. deep: true
  147. }
  148. },
  149. computed: {
  150. ...mapState(['hasLogin','userInfo','isActivity'])
  151. },
  152. methods:{
  153. initData(res){
  154. this.$api.getStorage().then((resolve) =>{
  155. this.shopId = resolve.shopID
  156. })
  157. if(res.length>0){
  158. this.hotProductList.splice(0,this.hotProductList.length);
  159. for (var i = 0, j = res.length; i < j; i += this.pageSize) {
  160. this.hotProductList.push(res.slice(i, i + this.pageSize));
  161. }
  162. }
  163. },
  164. PromotionsFormat(promo){//促销活动类型数据处理
  165. if(promo!=null){
  166. if(promo.type == 1 && promo.mode == 1){
  167. return true
  168. }else{
  169. return false
  170. }
  171. }
  172. return false
  173. },
  174. tabClick(index) {//轮播图切换
  175. this.current = index;
  176. },
  177. swiperChange(e) {//轮播切换
  178. const index = e.detail.current;
  179. this.swiperCurrent = index;
  180. },
  181. navToDetailPage(id) {//跳转商品详情页
  182. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="scss">
  188. .container{
  189. width: 100%;
  190. height: auto;
  191. box-sizing: border-box;
  192. .title-header{
  193. width: 100%;
  194. height: 80rpx;
  195. line-height: 80rpx;
  196. text-align: left;
  197. font-weight: bold;
  198. font-size: $font-size-34;
  199. color: $text-color;
  200. padding: 0 24rpx;
  201. box-sizing: border-box;
  202. }
  203. .recommend-list{
  204. width: 100%;
  205. height: 1160rpx;
  206. position: relative;
  207. padding-bottom: 20rpx;
  208. .tui-banner-swiper {
  209. width: 702rpx;
  210. margin: 0 auto;
  211. background: #F7F7F7;
  212. padding: 0 24rpx 0 24rpx;
  213. height: 1160rpx;
  214. overflow: hidden;
  215. transform: translateY(0);
  216. .floor-item{
  217. width: 341rpx;
  218. height: auto;
  219. margin-right: 20rpx;
  220. font-size: $font-size-24;
  221. color: $text-color;
  222. background: #FFFFFF;
  223. line-height: 36rpx;
  224. border-radius: 2rpx;
  225. margin-bottom: 20rpx;
  226. float: left;
  227. box-sizing: border-box;
  228. position: relative;
  229. &:nth-child(2n){
  230. margin-right: 0;
  231. }
  232. .item-icon-type{
  233. width: 48rpx;
  234. height: 62rpx;
  235. display: block;
  236. position: absolute;
  237. top: 20rpx;
  238. right: 20rpx;
  239. }
  240. .item-img{
  241. width: 341rpx;
  242. height: 341rpx;
  243. border-radius: 2rpx 2rpx 0 0;
  244. display: block;
  245. margin-bottom: 20rpx;
  246. }
  247. .floor-item-content{
  248. width: 311rpx;
  249. padding: 0 20rpx;
  250. }
  251. .floor-item-act{
  252. display: block;
  253. width: 100%;
  254. height: 32rpx;
  255. text-align: center;
  256. box-sizing: border-box;
  257. }
  258. .floor-tags{
  259. height: 28rpx;
  260. border-radius: 6rpx;
  261. background-color: #FFFFFF;
  262. line-height: 28rpx;
  263. color: $color-system;
  264. text-align: center;
  265. display: inline-block;
  266. padding:0 16rpx;
  267. font-size: $font-size-20;
  268. border: 1px solid #E15616;
  269. float: left;
  270. }
  271. .title-none{
  272. font-size: $font-size-26;
  273. color: #FF2A2A;
  274. line-height: 70rpx;
  275. .btn{
  276. display: inline-block;
  277. float: right;
  278. width: 112rpx;
  279. height: 44rpx;
  280. background: $btn-confirm;
  281. line-height: 44rpx;
  282. font-size: $font-size-24;
  283. color: #FFFFFF;
  284. text-align: center;
  285. border-radius: 22rpx;
  286. margin-top: 17rpx;
  287. }
  288. }
  289. .title{
  290. width: 100%;
  291. height: 72rpx;
  292. display: flex;
  293. line-height: 36rpx;
  294. flex-direction: column;
  295. margin-bottom: 15rpx;
  296. padding: 0;
  297. .mclap{
  298. width: 100%;
  299. line-height:40rpx;
  300. text-overflow:ellipsis;
  301. display: -webkit-box;
  302. word-break: break-all;
  303. -webkit-box-orient: vertical;
  304. -webkit-line-clamp: 2;
  305. overflow: hidden;
  306. font-size: 26rpx;
  307. }
  308. }
  309. .no-price{
  310. height: 70rpx;
  311. line-height: 70rpx;
  312. display: flex;
  313. box-sizing: border-box;
  314. .p-no{
  315. font-size: $font-size-30;
  316. color: $text-color;
  317. display: block;
  318. float: left;
  319. }
  320. .p-stars{
  321. float: left;
  322. }
  323. }
  324. .price{
  325. color: #FF2A2A;
  326. line-height:70rpx;
  327. &.none{
  328. text-decoration: line-through;
  329. color: #999999;
  330. }
  331. .sm{
  332. font-size: $font-size-24;
  333. }
  334. .big{
  335. font-size: $font-size-28;
  336. }
  337. }
  338. }
  339. }
  340. }
  341. .swiper__recommenddots-box{
  342. position: absolute;
  343. bottom: 0;
  344. left: 0;
  345. right: 0;
  346. /* #ifndef APP-NVUE */
  347. display: flex;
  348. /* #endif */
  349. flex: 1;
  350. flex-direction: row;
  351. justify-content: center;
  352. align-items: center;
  353. height: 60rpx;
  354. .swiper__dots-item{
  355. width: 8rpx;
  356. height: 8rpx;
  357. border-radius: 100%;
  358. margin-left: 6px;
  359. background-color:rgba(225,86,22,.3);
  360. }
  361. .swiper__dots-long{
  362. width: 32rpx;
  363. height: 8rpx;
  364. border-radius: 4rpx;
  365. background-color: #e15616;
  366. transition: all 0.4s;
  367. }
  368. }
  369. }
  370. </style>