index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <template>
  2. <!--
  3. @copyright CYZ
  4. @time 2022/8/5
  5. 商品列表(公益福利购、免费领、做公益等页面)
  6. -->
  7. <view class="main">
  8. <view v-if="hasFilter" class="tab-box" :style="`top: calc(${statusBarHeight}px + 44px)`">
  9. <view @click="tabClick(index)" class="tab" :class="tabActiveIndex==index?'active':''" v-for="(item,index) in tabList" :key="index">{{item.text}}<text v-if="item.hasIcon" class="iconfont2">&#xe6a7;</text></view>
  10. </view>
  11. <view v-if="hasFilter" class="split"></view>
  12. <view>
  13. <view class="list-box">
  14. <view class="list" v-for="(item,index) in listData" :key="index">
  15. <view class="item" @click="toDetail(item)">
  16. <image class="cover" mode="aspectFill" :src="item.cover"></image>
  17. <view class="content">
  18. <view class="title-box">
  19. <image v-if="item.area_feature==2" class="tag" mode="aspectFit" src="/static/common/tag6.png"></image>
  20. <image v-if="item.area_feature==3" class="tag" mode="aspectFit" src="/static/common/tag2.png"></image>
  21. <text class="title">{{item.title}}</text>
  22. </view>
  23. <view class="desc-box">
  24. <view class="left">
  25. <template v-if="!item.free">
  26. <template v-if="!item.point_goods">
  27. <text class="new-price">
  28. <text class="company">¥</text>
  29. <text class="integer">{{formatPrice(item.min_sale_price,'int')}}.</text>
  30. <text class="float">{{formatPrice(item.min_sale_price,'float')}}</text>
  31. </text>
  32. <text class="old-price">¥{{item.min_market_price}}</text>
  33. </template>
  34. <template v-else>
  35. <text class="iconfont2 integral-icon">&#xe669;</text>
  36. <text class="integral-num">{{item.min_exchange_point}}</text>
  37. </template>
  38. </template>
  39. <template v-if="item.free">
  40. <image class="tag2" mode="aspectFit" src="/static/common/tag3.png"></image>
  41. </template>
  42. </view>
  43. <text v-if="item.free || item.point_goods" class="have">{{item.result_sale_num}}件已{{item.free?'申领':'出售'}}</text>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. //area_feature 区域类型: 0服务体系礼包 1新人专区 2公益申领专区
  54. export default{
  55. props: {
  56. //是否有过滤条件
  57. hasFilter:{
  58. type: Boolean,
  59. default: true
  60. },
  61. //是否有分页
  62. hasPage:{
  63. type: Boolean,
  64. default: true
  65. },
  66. listData:{
  67. type: Array,
  68. default: ()=>{
  69. return []
  70. }
  71. }
  72. },
  73. data(){
  74. return {
  75. //手机状态栏高度
  76. statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
  77. tabList: [{
  78. text: '综合',
  79. hasIcon: false,
  80. sort: ''
  81. },{
  82. text: '最新',
  83. hasIcon: false,
  84. sort: ''
  85. },{
  86. text: '价格',
  87. hasIcon: true,
  88. sort: '' // asc或desc
  89. },{
  90. text: '销量',
  91. hasIcon: true,
  92. sort: '' // asc或desc
  93. }],
  94. tabActiveIndex: 0
  95. }
  96. },
  97. created() {},
  98. methods:{
  99. /**
  100. * @param {Object} type int或float
  101. * description 格式化价格
  102. */
  103. formatPrice(price,type){
  104. let str = ''
  105. if(type=='int'){
  106. str = String(price).split('.')[0]
  107. }
  108. if(type=='float'){
  109. str = String(price).split('.').length <= 1?'00':(String(price).split('.')[1])
  110. }
  111. return str;
  112. },
  113. tabClick(index){
  114. let that = this;
  115. this.tabActiveIndex=index;
  116. if(index != 0 && index != 1){
  117. if(this.tabList[index].sort == ''){
  118. if(index == 2){
  119. this.tabList[index].sort = 'asc';
  120. }else if(index == 3){
  121. this.tabList[index].sort = 'desc';
  122. }
  123. }else{
  124. this.tabList[index].sort = this.tabList[index].sort =='asc'?'desc':'asc'
  125. }
  126. }
  127. this.$emit('tabChange',{
  128. index,
  129. sort: this.tabList[index].sort
  130. })
  131. },
  132. toDetail(item){
  133. uni.navigateTo({
  134. url: `/pages/product/goods/goods?id=${item.goods_id}`
  135. })
  136. // 积分商品
  137. // if(item.point_goods){
  138. // uni.navigateTo({
  139. // url: `/pages/product/goods/IntegralGood?id=${item.goods_id}`
  140. // })
  141. // // 免费商品
  142. // }else if(item.free){
  143. // uni.navigateTo({
  144. // url: `/pages/product/goods/freeGoods?id=${item.goods_id}`
  145. // })
  146. // // 普通商品
  147. // }else{
  148. // uni.navigateTo({
  149. // url: `/pages/product/goods/goods?id=${item.goods_id}`
  150. // })
  151. // }
  152. }
  153. }
  154. }
  155. </script>
  156. <style lang="scss" scoped>
  157. .main{
  158. .split{
  159. width: 100%;
  160. height: 20rpx;
  161. background-color: #f7f7f7;
  162. }
  163. .tab-box{
  164. position: sticky;
  165. top: 0;
  166. left: 0;
  167. background-color: white;
  168. z-index: 50;
  169. height: 86rpx;
  170. width: 100%;
  171. display: flex;
  172. justify-content: space-between;
  173. align-items: center;
  174. padding: 0 42rpx;
  175. box-sizing: border-box;
  176. border-bottom: none;
  177. .tab{
  178. height: 86rpx;
  179. line-height: 86rpx;
  180. font-size: 30rpx;
  181. font-family: PingFang SC, PingFang SC-Regular;
  182. font-weight: 400;
  183. text-align: left;
  184. color: #666666;
  185. &.active{
  186. font-weight: 700;
  187. color: #FA6138;
  188. }
  189. }
  190. }
  191. .list-box{
  192. display: flex;
  193. flex-direction: row;
  194. flex-wrap: wrap;
  195. justify-content: space-between;
  196. box-sizing: border-box;
  197. padding: 40rpx 30rpx;
  198. .list{
  199. display: flex;
  200. flex-direction: column;
  201. // flex: 1;
  202. width: 336rpx;
  203. .item{
  204. background-color: white;
  205. width: 100%;
  206. box-sizing: border-box;
  207. margin-bottom: 30rpx;
  208. border-radius: 18rpx;
  209. padding-bottom: 28rpx;
  210. filter: drop-shadow(1px 2px 4px rgba(26,58,70,0.1));
  211. height: 506rpx;
  212. .cover{
  213. height: 337rpx;
  214. width: 100%;
  215. background-color: #f7f7f7;
  216. display: block;
  217. margin-bottom: 10rpx;
  218. border-radius: 18rpx 18rpx 0 0;
  219. }
  220. .content{
  221. padding: 0 15rpx;
  222. .title-box{
  223. height: 75rpx;
  224. overflow: hidden;
  225. text-overflow: ellipsis;
  226. display: -webkit-box;
  227. -webkit-line-clamp: 2;
  228. -webkit-box-orient: vertical;
  229. .tag{
  230. vertical-align: middle;
  231. margin-right: 15rpx;
  232. width: 112rpx;
  233. height: 30rpx;
  234. line-height: 28rpx;
  235. }
  236. .title{
  237. font-size: 28rpx;
  238. line-height: 28rpx;
  239. color: #191919;
  240. }
  241. }
  242. .tag2{
  243. vertical-align: middle;
  244. margin-right: 15rpx;
  245. width: 101rpx;
  246. height: 33rpx;
  247. }
  248. .desc-box{
  249. margin-top: 22rpx;
  250. display: flex;
  251. justify-content: space-between;
  252. align-items: center;
  253. .left{
  254. line-height: 24rpx;
  255. .integral-icon{
  256. font-size: 50rpx;
  257. color: #22a736;
  258. vertical-align: middle;
  259. }
  260. .integral-num{
  261. font-size: 24rpx;
  262. font-family: PingFang SC, PingFang SC-Medium;
  263. font-weight: 500;
  264. text-align: left;
  265. color: #808080;
  266. line-height: 24rpx;
  267. }
  268. .new-price{
  269. font-family: PingFang SC, PingFang SC-Medium;
  270. font-weight: bold;
  271. text-align: left;
  272. color: #FF6600;
  273. line-height: 24rpx;
  274. .company{
  275. font-size: 20rpx;
  276. font-weight: 400;
  277. }
  278. .integer{
  279. font-size: 36rpx;
  280. }
  281. .float{
  282. font-size: 20rpx;
  283. font-weight: 400;
  284. }
  285. }
  286. .old-price{
  287. font-size: 22rpx;
  288. font-family: PingFang SC, PingFang SC-Medium;
  289. font-weight: 500;
  290. text-align: left;
  291. color: #999999;
  292. line-height: 24rpx;
  293. margin-left: 16rpx;
  294. text-decoration:line-through;
  295. }
  296. }
  297. .have{
  298. font-size: 24rpx;
  299. font-family: PingFang SC, PingFang SC-Regular;
  300. font-weight: 400;
  301. text-align: left;
  302. color: #999999;
  303. }
  304. }
  305. }
  306. }
  307. &:nth-child(1){
  308. margin-right: 9rpx;
  309. }
  310. &:nth-child(2){
  311. margin-left: 9rpx;
  312. }
  313. }
  314. }
  315. }
  316. </style>