index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <view class="pages">
  3. <view class="page-bg">
  4. <img class="img" :src="staticUrl+'/img/index-bg.png'" alt="">
  5. </view>
  6. <view class="page-wrap">
  7. <view class="search-out">
  8. <u-search
  9. placeholder="请输入搜索的商品"
  10. :clearabled="true"
  11. :showAction="false"
  12. height="80rpx"
  13. @search="topSearch"
  14. bgColor="transparent"
  15. v-model="goodsName">
  16. </u-search>
  17. </view>
  18. <u-swiper
  19. :list="bannerList"
  20. indicator
  21. height="130"
  22. keyName="sliderImg"
  23. indicatorMode="dot"
  24. @click="bannerClick()"
  25. ></u-swiper>
  26. <view class="advantage u-flex u-row-around">
  27. <view class="u-flex">
  28. <u-icon :size="advantageSize" class="icon" :name="staticUrl+'/img/zheng.png'"></u-icon>
  29. 正品保证
  30. </view>
  31. <view class="u-flex">
  32. <u-icon :size="advantageSize" class="icon" :name="staticUrl+'/img/memberservice.png'"></u-icon>
  33. 会员服务
  34. </view>
  35. <view class="u-flex">
  36. <u-icon :size="advantageSize" class="icon" :name="staticUrl+'/img/rmb.png'"></u-icon>
  37. 性价比高
  38. </view>
  39. </view>
  40. <view class="icon-nav u-flex u-row-around">
  41. <!-- <view class="nav-item" @click="$u.route('/center/mybalance')">
  42. <u--image class="image" :src="staticUrl+'/img/index-nav-4.png'" width="101rpx" height="101rpx"></u--image>
  43. 需要删除
  44. </view> -->
  45. <view class="nav-item" @click="$u.route('/shopping/productList',{typeId:1,typeName:'特价专区',type:'reLaunch'})">
  46. <u--image class="image" :src="staticUrl+'/img/index-nav-1.png'" width="101rpx" height="101rpx"></u--image>
  47. 特价专区
  48. </view>
  49. <view class="nav-item" @click="$u.route('/shopping/productList',{typeId:2,typeName:'爆款专区',type:'reLaunch'})">
  50. <u--image class="image" :src="staticUrl+'/img/index-nav-2.png'" width="101rpx" height="101rpx"></u--image>
  51. 爆款专区
  52. </view>
  53. <view class="nav-item" @click="$u.route('/credits/credits',{type:'reLaunch'})">
  54. <u--image class="image" :src="staticUrl+'/img/index-nav-3.png'" width="101rpx" height="101rpx"></u--image>
  55. 积分商城
  56. </view>
  57. <view class="nav-item" @click="$u.route('/center/recharge',{type:'reLaunch'})">
  58. <u--image class="image" :src="staticUrl+'/img/index-nav-4.png'" width="101rpx" height="101rpx"></u--image>
  59. 充值中心
  60. </view>
  61. </view>
  62. <view class="index-img">
  63. <u-swiper
  64. :list="centerImg"
  65. :indicator="centerImg.length>1"
  66. keyName="sliderImg"
  67. indicatorMode="dot"
  68. height="161rpx"
  69. @click="centerImgClick()"
  70. ></u-swiper>
  71. </view>
  72. <view class="hot-product">
  73. <view class="single-til u-flex u-row-between">
  74. <text class="text">热销产品</text>
  75. <!-- <view class="u-flex" @click="$u.route('/shopping/productList',{typeId:1,typeName:'热销产品',type:'redirectTo'})">
  76. <text class="more-text">更多</text>
  77. <u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
  78. </view> -->
  79. </view>
  80. <view class="product u-flex" @click="$u.route('/shopping/productdetails',{id:item.id})" v-for="item in hotGoods" :key="item.id">
  81. <u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
  82. <view class="text">
  83. <view class="name ellipsis-2">{{item.goodsName}}</view>
  84. <view class="u-flex u-row-between">
  85. <view class="left">
  86. <view class="up">
  87. <view class="" v-if="vuex_member_info.priceType>1">
  88. <text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
  89. <text class="vip-icon">VIP</text>
  90. </view>
  91. <view class="" v-else>
  92. <text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
  93. </view>
  94. </view>
  95. <view class="down">
  96. <!-- <text class="discount">8.8折</text> -->
  97. <text v-if="vuex_member_info.priceType>1" class="original-price gray line-through">¥ {{item.salePrice}}</text>
  98. <!-- <text class="sales gray">销量 {{item.salePrice}}</text> -->
  99. </view>
  100. </view>
  101. <u--image :showLoading="false" @click.native.stop="addCart(item.id)" :src="staticUrl+'/img/add.png'" width="48rpx" height="48rpx"></u--image>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. <tabbar :tabbarIndexProps='0' />
  107. <cartfixed ref="cartfixed" @getCartList="getCartList" />
  108. </view>
  109. <u-toast ref="uToast"></u-toast>
  110. </view>
  111. </template>
  112. <script>
  113. import tabbar from "../../components/tabbar.vue";
  114. import cartfixed from "../../components/cartfixed.vue"
  115. export default {
  116. components:{
  117. tabbar,
  118. cartfixed
  119. },
  120. data() {
  121. return {
  122. goodsName:'',
  123. staticUrl:this.$commonConfig.staticUrl,
  124. advantageSize:20,
  125. bannerList: [],
  126. centerImg:[],
  127. hotGoods:[]
  128. }
  129. },
  130. onLoad() {
  131. // let userInfo = uni.getStorageSync('userInfo');
  132. // console.log('userInfo',userInfo);
  133. let that = this;
  134. this.swiperList();
  135. setTimeout(()=>{
  136. that.getCenterImg();
  137. },200);
  138. },
  139. onShow() {
  140. this.$refs.cartfixed.getCartList();
  141. this.getHotGoods();
  142. },
  143. methods: {
  144. swiperList(){
  145. this.$u.api.swiperList({postion:1}).then(res=>{
  146. this.bannerList = res.data.rows;
  147. // console.log('res',res.data.rows);
  148. }).catch(err=>{
  149. console.log('swiperList',err.data);
  150. })
  151. },
  152. getCenterImg(){
  153. this.$u.api.swiperList({postion:2}).then(res=>{
  154. this.centerImg = res.data.rows;
  155. // console.log('res',res.data.rows);
  156. }).catch(err=>{
  157. console.log('swiperList',err.data);
  158. })
  159. },
  160. bannerClick(e){
  161. // console.log('e',e);
  162. // console.log('bannerClick',this.bannerList[e]);
  163. let item = this.bannerList[e];
  164. uni.$u.route('/xushuo/dynamicdetails', {
  165. type: 'swiperDetail',
  166. id: item.id
  167. });
  168. },
  169. centerImgClick(e){
  170. let item = this.centerImg[e];
  171. uni.$u.route('/xushuo/dynamicdetails', {
  172. type: 'swiperDetail',
  173. id: item.id
  174. });
  175. },
  176. getHotGoods(){
  177. this.$u.api.topGoodList({pageNum:1,pageSize:20}).then(res=>{
  178. this.hotGoods = res.data.rows;
  179. console.log('res',res);
  180. }).catch(err=>{
  181. console.log('getHotGoods',err.data);
  182. })
  183. },
  184. addCart(id){
  185. // console.log('addCart',id);
  186. this.$u.api.addCart({goodsId:id}).then(res=>{
  187. this.$refs.cartfixed.getCartList('isAdd');
  188. console.log('res',res);
  189. }).catch(err=>{
  190. console.log('addCart',err.data);
  191. })
  192. },
  193. topSearch(){
  194. uni.$u.route('/shopping/productsearch', {
  195. goodsName: this.goodsName
  196. });
  197. // console.log('topSearch',this.goodsName);
  198. }
  199. }
  200. }
  201. </script>
  202. <style>
  203. page{
  204. background-color: #F9F9F9;
  205. padding-top: 60px;
  206. }
  207. </style>
  208. <style lang="scss" scoped>
  209. .page-bg{
  210. .img{
  211. height: 100vh;
  212. }
  213. }
  214. .search-out{
  215. background-color: rgba(0,0,0,0.04);
  216. border-radius: 100rpx;
  217. margin-bottom: 20rpx;
  218. }
  219. .advantage{
  220. margin-top: 20rpx;
  221. margin-bottom: 50rpx;
  222. font-size: 20rpx;
  223. color: #ccc;
  224. /deep/ .u-icon{
  225. margin-right: 10rpx;
  226. }
  227. }
  228. .index-img{
  229. margin-bottom: 56rpx;
  230. }
  231. .hot-product{
  232. .product{
  233. padding: 30rpx;
  234. background-color: #fff;
  235. border: 0;
  236. }
  237. }
  238. </style>