classify.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <view class="container">
  3. <!-- 头部轮播 -->
  4. <!-- <view class="carousel-section">
  5. <swiper class="carousel" autoplay="true" duration="400" interval="5000">
  6. <swiper-item v-for="(item, index) in bannerImg" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
  7. <image :src="item.img" mode=" scaleToFill" />
  8. </swiper-item>
  9. </swiper>
  10. </view> -->
  11. <view class="top">
  12. <view class="bg"></view>
  13. <view class="title-box">
  14. <view class="title-one">
  15. <text>555</text>
  16. <text>推销得分</text>
  17. </view>
  18. <view class="title-one">
  19. <text>555</text>
  20. <text>推荐得分</text>
  21. </view>
  22. <view class="title-one">
  23. <text>555</text>
  24. <text>购买得分</text>
  25. </view>
  26. </view>
  27. <view class="title-box1" @click="navTo()">
  28. <view class="title-bg">
  29. <image src="../../static/img/libao.jpg" mode=""></image>
  30. </view>
  31. <view class="title-between">
  32. <text>邀请有礼</text>
  33. <text>转发海报邀请好友获得更多奖励</text>
  34. </view>
  35. <view class="title-right">
  36. <image src="../../static/user/right01.png" mode=""></image>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="goodsList-box">
  41. <view class="goodsList-item flex" :key="ind" v-for="(ls, ind) in list">
  42. <image :src="ls.image" mode=" scaleToFill"></image>
  43. <view class="goodsList-content">
  44. <view class="title">
  45. <text class="clamp2">{{ ls.store_name }}</text>
  46. </view>
  47. <view class="goods-money flex">
  48. <view class="money-box">
  49. <text class="otMoney">¥{{ ls.ot_price }}</text>
  50. <image src="../../static/icon/in2.png"></image>
  51. <!-- <image src="../../static/error/errorImage.jpg"></image> -->
  52. <text class="decline">直降{{ ls.ot_price - ls.price}}元</text>
  53. <!-- <view class="otMoney-box"> -->
  54. <view class="money">¥{{ ls.price }}</view>
  55. <!-- <text class="sales">已售{{ ls.sales }}件</text> -->
  56. <!-- </view> -->
  57. </view>
  58. <view class="button" @click="navTo(ls)">立即购买</view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import { loadIndexs,groom } from '@/api/index.js';
  67. export default {
  68. data() {
  69. return {
  70. list: [],
  71. bannerImg: [],
  72. title: '',
  73. goods: [],
  74. page: 1,
  75. limit: 10
  76. };
  77. },
  78. onLoad(option) {
  79. // 获取查询对象
  80. this.type = option.type;
  81. // 加载基础数据
  82. // this.loadData();
  83. },
  84. methods: {
  85. //动态改变标头
  86. getTitle() {
  87. let title = ''
  88. if(this.type == 1) {
  89. title = "精选好货"
  90. // this.list = this.goods.bastList
  91. }else if(this.type == 2) {
  92. title = "热销专区"
  93. // this.list = this.goods.likeInfo
  94. }else if(this.type == 3) {
  95. title = "收藏夹"
  96. }else {
  97. title = "促销单品"
  98. }
  99. uni.setNavigationBarTitle({
  100. title: title
  101. });
  102. },
  103. navTo: function(ls) {
  104. uni.navigateTo({
  105. url: '/pages/product/product?id=' + ls.id
  106. });
  107. },
  108. // 请求载入数据
  109. async loadData() {
  110. // loadIndexs({})
  111. // .then(({ data }) => {
  112. // let goods = data.info;
  113. // console.log(data)
  114. // this.goods = goods
  115. // this.goods.likeInfo = data.likeInfo
  116. // // this.goodsList = goods.firstList; //最新商品
  117. // // this.bastList = goods.bastList; //精品推荐
  118. // this.getTitle()
  119. // uni.stopPullDownRefresh();
  120. // })
  121. // .catch(e => {
  122. // uni.stopPullDownRefresh();
  123. // });
  124. let data = {
  125. page: this.page,
  126. limit: this.limit
  127. }
  128. let type = this.type
  129. groom(data,type).then(res => {
  130. this.list = res.data.list
  131. this.getTitle()
  132. console.log(res.data)
  133. })
  134. },
  135. // 轮播图跳转
  136. // bannerNavToUrl(item) {
  137. // // #ifdef H5
  138. // if (item.wap_link.indexOf('http') > 0) {
  139. // window.location.href = item.wap_link;
  140. // }
  141. // // #endif
  142. // if (item.wap_link) {
  143. // uni.navigateTo({
  144. // url: item.wap_link
  145. // });
  146. // }
  147. // }
  148. }
  149. };
  150. </script>
  151. <style lang="scss">
  152. page {
  153. background: $page-color-base;
  154. }
  155. .top{
  156. .bg{
  157. width: 1000rpx;
  158. height: 200rpx;
  159. background: #52C696;
  160. overflow: hidden;
  161. text-align: center;
  162. border-bottom-left-radius: 50%;
  163. border-bottom-right-radius: 50%;
  164. margin-left: -125rpx;
  165. }
  166. .title-box{
  167. position: relative;
  168. z-index: 999;
  169. margin: -100rpx auto;
  170. display: flex;
  171. justify-content: space-around;
  172. align-items: center;
  173. width: 702rpx;
  174. height: 137rpx;
  175. background: #FFFFFF;
  176. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  177. border-radius: 10rpx;
  178. .title-one{
  179. display: flex;
  180. flex-direction: column;
  181. align-items: center;
  182. text:nth-child(2){
  183. font-size: 26rpx;
  184. font-family: PingFang SC;
  185. font-weight: 500;
  186. color: #666666;
  187. }
  188. }
  189. }
  190. .title-box1{
  191. margin: 120rpx auto;
  192. display: flex;
  193. justify-content: space-around;
  194. align-items: center;
  195. width: 702rpx;
  196. height: 137rpx;
  197. background: #FFFFFF;
  198. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  199. border-radius: 10rpx;
  200. .title-bg{
  201. width: 123rpx;
  202. height: 123rpx;
  203. image{
  204. width: 100%;
  205. height: 100%;
  206. }
  207. }
  208. .title-between{
  209. display: flex;
  210. flex-direction: column;
  211. text:nth-child(1){
  212. width: 131rpx;
  213. font-size: 33rpx;
  214. font-family: PingFang SC;
  215. font-weight: bold;
  216. color: #333333;
  217. line-height: 34rpx;
  218. }
  219. text:nth-child(2){
  220. width: 350rpx;
  221. font-size: 24rpx;
  222. font-family: PingFang SC;
  223. font-weight: 500;
  224. color: #999999;
  225. line-height: 44rpx;
  226. }
  227. }
  228. .title-right{
  229. width: 16rpx;
  230. height: 30rpx;
  231. image{
  232. width: 100%;
  233. height: 100%;
  234. }
  235. }
  236. }
  237. }
  238. .carousel-section {
  239. padding: 0;
  240. .titleNview-placing {
  241. padding-top: 0;
  242. height: 0;
  243. }
  244. .swiper-dots {
  245. left: 45rpx;
  246. bottom: 40rpx;
  247. }
  248. .carousel {
  249. width: 100%;
  250. height: 360rpx;
  251. .carousel-item {
  252. width: 100%;
  253. height: 100%;
  254. overflow: hidden;
  255. }
  256. image {
  257. width: 100%;
  258. height: 100%;
  259. }
  260. }
  261. }
  262. // 中间标题样式
  263. .type-title-box {
  264. padding: 40rpx;
  265. .title-content {
  266. height: 100%;
  267. width: 200rpx;
  268. text-align: center;
  269. font-size: $font-lg;
  270. font-weight: 500;
  271. color: $font-color-dark;
  272. }
  273. .title-border {
  274. width: 250rpx;
  275. height: 2rpx;
  276. background-color: #e9e9e9;
  277. }
  278. }
  279. // 商品列表
  280. .goodsList-box {
  281. padding: 30rpx;
  282. .goodsList-item {
  283. box-shadow:0 0 20rpx 6rpx #f1f1f1;
  284. border-radius: 10rpx;
  285. margin-bottom: 30rpx;
  286. background-color: #ffffff;
  287. padding: 30rpx;
  288. image {
  289. flex-shrink: 0;
  290. border-radius: $border-radius-sm;
  291. height: 180rpx;
  292. width: 180rpx;
  293. }
  294. .goodsList-content {
  295. margin-left: 20rpx;
  296. flex-grow: 1;
  297. height: 180rpx;
  298. position: relative;
  299. .title {
  300. font-size: $font-base;
  301. color: $font-color-dark;
  302. font-weight: bold;
  303. }
  304. .goods-money {
  305. position: absolute;
  306. left: 0;
  307. bottom: 0;
  308. width:100%;
  309. .money-box {
  310. .otMoney {
  311. color: #999999;
  312. text-decoration: line-through;
  313. margin-right: 15rpx;
  314. font-size: 20rpx;
  315. }
  316. .money {
  317. color: #FF6F0F;
  318. font-weight: bold;
  319. font-size: 35rpx;
  320. }
  321. image {
  322. width: 20rpx;
  323. height: 20rpx;
  324. margin-right: 5rpx;
  325. }
  326. .decline {
  327. color: #B59467;
  328. font-size: 20rpx;
  329. }
  330. .sales {
  331. color: $font-color-light;
  332. }
  333. }
  334. .button {
  335. background: #52C696;
  336. height: 50rpx;
  337. border-radius: 20rpx;
  338. padding: 10rpx 15rpx;
  339. color: #fff;
  340. font-size: 25rpx;
  341. position: relative;
  342. top: 20rpx;
  343. }
  344. .cart {
  345. border: 1px solid $color-red;
  346. color: $color-red;
  347. font-size: $font-base;
  348. font-weight: bold;
  349. border-radius: 99px;
  350. width: 55rpx;
  351. height: 55rpx;
  352. display: flex;
  353. justify-content: center;
  354. align-items: center;
  355. }
  356. }
  357. }
  358. }
  359. }
  360. </style>