konggang-city-miniprogram/pages/service/index.vue

<template>
  <view class="content">
    <view class="banner">
      <image :src="bannerSrc" alt="banner" mode="aspectFill"/>
    </view>
	<view class="cross-line"></view>
    <view class="menus">
      <view class="menu" v-for="(item,index) in miniProgramList" :key="index" @click="toDetail(item)">
		<text>{{item.title}}</text>  
        <image :src="item.pic_url" mode="aspectFill"/>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";	
export default {
  data() {
    return {
      bannerSrc: "",
	  miniProgramList:[
		  // {
			 //  appId:'wxec4343871c957260',
			 //  path:'pages/index/index',
			 //  src:'/static/service/1.png'
		  // },
		  // {
			 //  appId:'',
			 //  path:'',
			 //  src:'/static/service/2.png'
		  // },
	  ],
    };
  },
  onLoad() {
	  this.getPageImg();
	  this.getPageMiniProgram();
  },
  methods: {
	  getPageImg() {
	    let md5Sign = md5(
	      "method=" +
	        "common" +
	        "&timestamp=" +
	        getApp().globalData.globalTimestamp +
	        "&secret=" +
	        getApp().globalData.secret
	    );
	    let url =
	      getApp().globalData.shareUrl +
	      "api/api.php" +
	      "?method=common&source=service_pics&action=list&timestamp=" +
	      getApp().globalData.globalTimestamp +
	      "&sign=" +
	      md5Sign;
	    uni.request({
	      url: url,
	      method: "POST",
	      header: {
	        "content-type": "application/x-www-form-urlencoded",
	      },
	      data: {
	      },
	      success: (res) => {
	        if (res.data.code === 200) {
				this.bannerSrc =  res.data.data.list.length ? getApp().globalData.shareUrl + res.data.data.list[0].pic_url : '/static/nodata.svg'
	        }
	      },
	      fail: () => {
	        console.log("连接失败");
	      },
	    });
	  },
	  getPageMiniProgram(){
		  let md5Sign = md5(
		    "method=" +
		      "common" +
		      "&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&secret=" +
		      getApp().globalData.secret
		  );
		  let url =
		    getApp().globalData.shareUrl +
		    "api/api.php" +
		    "?method=common&source=service&action=list&timestamp=" +
		    getApp().globalData.globalTimestamp +
		    "&sign=" +
		    md5Sign;
		  uni.request({
		    url: url,
		    method: "POST",
		    header: {
		      "content-type": "application/x-www-form-urlencoded",
		    },
		    data: {
		      s_show:1,
		    },
		    success: (res) => {
		      if (res.data.code === 200) {
				  res.data.data.list.forEach((item) => {
				    item.pic_url = getApp().globalData.shareUrl + item.pic_url;
				  });
				  this.miniProgramList = (res.data.data.list).sort((a,b)=>{return Number(b.weight) - Number(a.weight)});
		      }
		    },
		    fail: () => {
		      console.log("连接失败");
		    },
		  });
	  },
	  toDetail(item) {
		  uni.navigateToMiniProgram({
		  	appId:item.app_id,
			path:item.app_path,
			success(res) {
				console.log(res,'打开成功')
			},
			fail(err) {
				console.log(err)
			}
		  })
	  },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.content {
    height:100%;
  .banner {
    height: 25%;
	margin-bottom:20rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .cross-line {
	  width: 100%;
	  height: 10rpx;
	  background-color: #F2F2F2;
  }
  .menus {
    // height: 100%;
	display: flex;
	flex-wrap: wrap;
	// justify-content: center;
	margin-bottom:20rpx;
    .menu {
		margin: 2%;
		height: 14%;
		border-radius: 20rpx;
		width: 45%;
      // box-shadow: 0rpx 10rpx 5rpx rgb(212, 212, 212);
	  text {
		  font-size: 28rpx;
	  }
      image {
        width: 100%;
        height: 140rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
      }
    }
  }
}
</style>