why_in_h5/pages/index/index.vue

<template>
  <view class="container">
	  <!-- 搜索 -->
	  <view class="sozone">
	  	<Search/>
	  </view>
	  <!-- 轮播图 -->
	  <view class="lbzone">
		  <Banner :dataList="imglist"/>
	  </view>
	  <!-- 标签和导航区 -->
	  <view class="linkzone">
		  <view class="lkbox">
			  <view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
			  <view class="lktxt">公共数据专区</view>
		  </view>
		  <view class="lkbox">
		  		<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
		  		<view class="lktxt">数据超市</view>
		  </view>
		  <view class="lkbox">
		  		<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
		  		<view class="lktxt">文化资源数据</view>
		  </view>
		  <view class="lkbox">
		  		<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
		  		<view class="lktxt">文化数字内容</view>
		  </view>
	  </view>
	  <!-- 商品列表 -->
	  <view class="glistzone">
		  <Goods :dataList="gdlist" />
	  </view>
	
  </view>
</template>

<script>
  import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  // import Page from '@/components/page'
  import Banner from './components/banner'
  import Search from './components/search'
  import Goods from './components/goods'
  
  import * as Gapi from '@/api/goods'

  const App = getApp()

  export default {
    components: {
      Banner,
	  Search,
	  Goods
    },
    data() {
      return {
        // 页面参数
        options: {},
		// 图片列表
		imglist:[],
		// 商品列表
		gdlist:[]
		
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 更新购物车角标
      setCartTabBadge()
    },
	mounted() {
		this.getBannerList();
		
		this.getHomeList();
	},

    methods: {
		// 轮播图片
		getBannerList(){
			// for demo
			for(let i=0;i<3;i++){
				const obj = {
					"imgUrl": "http://192.168.66.16:8089/assets/store/img/diy/banner/01.png",
					"link": null
				}
				this.imglist.push(obj)
			}
			// this.imglist.push(simg)
		},
		//商品列表
		getHomeList(){
			let rqdata={pay_type: 1,record_type: 2,goods_status: 1,page: 1,limit: 6}
			Gapi.soglist(rqdata).then(res=>{
				console.log("sgres:",res)
			}).catch(reject);
			//
			for(let i=0;i<5;i++){
				const obj = {
				  "goods_id": 10002,
				  "goods_name": "00A02",
				  "selling_point": "",
				  "goods_image": "http://192.168.66.16:8089/uploads/10001/20231021/be65b065b633bf469cb7bcfc15385936.jpg",
				  "goods_price_min": "100.00",
				  "goods_price_max": "100.00",
				  "line_price_min": "120.00",
				  "line_price_max": "120.00",
				  "goods_sales": 0
				}
				this.gdlist.push(obj)
			}
		}
		
    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取首页数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
  .container {
     background: #1C223B;
	 position: relative;
	 min-height: 100vh;
	 
	 // 搜索
	.sozone{
		position: relative;
		z-index: 70;
	}
	// swiper
	.lbzone{
		padding-bottom: 20rpx;
		z-index: 80;;
	}
	// navbar
	.linkzone{
		padding: 10rpx 10rpx 20rpx;
		display: flex;
		
		.lkbox{
			background-color: #fff;
			margin-left: 30rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 20%;
			color: #fff;
			font-weight: 600;
			
			.lkimg{
				width: 130rpx;
				height: 130rpx;
				margin: 10rpx auto;
				// padding: 10rpx;
				
				// display: flex;
				// text-align: center;
				image{
					width: 130rpx;
				}
			}
			.lktxt{
				// word-break: break-all;
				white-space: nowrap;
				margin-top: 22rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
			}
		}
	}
	// goods
	.glistzone{
		margin-top: 46rpx;
		padding: 4rpx;
	}
  }
  
</style>