index-v1.vue 7.4 KB

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