uni-app中：点击grid九宫格的单元格，跳转到指定页面

<template>
    <view>
        <!-- header start -->
      <view @click="goData(e)">
          <view data-v-017be5e7="" class="uni-list-cell">
              <view data-v-017be5e7="" class="uni-media-list1">
                  <view data-v-017be5e7="" class="uni-media-list-logo borders">
                      <img src="../../static/images/二级/1首页/头像005.png" class="touxiang"></img>
                  </view>
                  <view data-v-017be5e7="" class="uni-media-list-body">
                      <view data-v-017be5e7="" class="uni-media-list-text-top">温眸</view>
                      <uni-button data-v-53423880="" class="activity" type="warn">活动发布方</uni-button>
                  </view>
              </view>
          </view>
      </view>
      <!-- header end -->
      
      <view class="dian">
          <view class="dian-item0">
              <view class="dian-item1">
                  <view class="num">8.34W</view>
                  <view class="dian-p">粉丝数量</view>
              </view>
              <view class="dian-item1">
                  <view class="num">20.56W</view>
                  <view class="dian-p">赞数</view>
              </view>
              <view class="dian-item1">
                  <view class="num">10.23W</view>
                  <view class="dian-p">评论数</view>
              </view>
          </view>
      </view>
        <!-- 我的服务开始 -->
        <view class="service">
            <view class="service-head">我的服务</view>
            <uni-grid :options="[
    {image:'/static/images/成交列表.png',text:'成交列表'},
    {image:'/static/images/报名列表.png',text:'报名列表'},
    {image:'/static/images/收益列表.png',text:'收益列表'},
    {image:'/static/images/成交列表.png',text:'收货地址管理'},
    {image:'/static/images/帮助与客服.png',text:'帮助与客服'},
    {image:'/static/images/邀请注册.png',text:'邀请注册'},
    {image:'/static/images/我要发活动.png',text:'我要发活动'},
    {image:'/static/images/我的活动.png',text:'我的活动'}]"
                column-num="4" :show-border="false" @click="goService">
            </uni-grid>
        </view>
        <!-- 我的服务结束 -->

        <view class="logo">
            <image src="../../static/images/banner.png"></image>
        </view>
        <view class="selected">
            <image src="../../static/images/精选活动.png"></image>
        </view>

        <!-- container start -->
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
                <view class="uni-media-list">
                    <view class="uni-media-list-logo">
                        <image v-if="showImg" :src="value.img"></image>
                    </view>
                    <view class="uni-media-list-body">
                        <view class="uni-media-titile">{{value.title}}</view>
                        <view class="uni-media-time">{{value.time}}</view>
                        <view class="uni-media-number">{{value.number}}</view>
                        <view class="uni-media-state">{{value.state}}</view>
                        <view class="uni-media-enter">{{value.enter}}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- container end -->
    </view>
</template>

<script>
    import uniGrid from "@/components/uni-grid/uni-grid.vue";
    export default {
        components: {
            uniGrid
        },
        data() {
            return {
                background: ['color1', 'color2', 'color3'],
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500,
                showImg: false,
                title0: "我的服务",
                list: [{
                        title: "智能感应泡沫洗手机  活动招募",
                        time: "报名时间：3月19日00:00至3月21日00:00",
                        number: "报名人数：159/500",
                        state: "美国|黑科技",
                        enter: "我要报名",
                        img: "/static/images/1.png"
                    },
                    {
                        title: "智能感应泡沫洗手机  活动招募",
                        time: "报名时间：3月19日00:00至3月21日00:00",
                        number: "报名人数：159/500",
                        state: "美国|黑科技",
                        enter: "我要报名",
                        img: "/static/images/2.png"
                    },
                    {
                        title: "智能感应泡沫洗手机  活动招募",
                        time: "报名时间：3月19日00:00至3月21日00:00",
                        number: "报名人数：159/500",
                        state: "美国|黑科技",
                        enter: "我要报名",
                        img: "/static/images/3.png"
                    },
                    {
                        title: "智能感应泡沫洗手机  活动招募",
                        time: "报名时间：3月19日00:00至3月21日00:00",
                        number: "报名人数：159/500",
                        state: "美国|黑科技",
                        enter: "我要报名",
                        img: "/static/images/4.png"
                    },
                    {
                        title: "智能感应泡沫洗手机  活动招募",
                        time: "报名时间：3月19日00:00至3月21日00:00",
                        number: "报名人数：159/500",
                        state: "美国|黑科技",
                        enter: "我要报名",
                        img: "/static/images/1.png"
                    }
                ],
                gridList: [{
                        title1: "成交列表",
                        url: "/static/images/成交列表.png"
                    },
                    {
                        title1: "报名列表",
                        url: "/static/images/报名列表.png"
                    },
                    {
                        title1: "收益列表",
                        url: "/static/images/收益列表.png"
                    },
                    {
                        title1: "收货地址管理",
                        url: "/static/images/收益列表.png"
                    },
                    {
                        title1: "帮助与客服",
                        url: "/static/images/帮助与客服.png"
                    },
                    {
                        title1: "邀请注册",
                        url: "/static/images/邀请注册.png"
                    },
                    {
                        title1: "我要发活动",
                        url: "/static/images/我要发活动.png"
                    },
                    {
                        title1: "我的活动",
                        url: "/static/images/我的活动.png"
                    }
                ]
            }
        },

        onLoad() {
            setTimeout(() => {
                this.showImg = true;
            }, 400)
        },
        methods: {
            goData(e){
                uni.navigateTo({
                    url: '../data/data?data=',
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            },
            goService(e){
                console.log(e)
                if(e.index==0){
                  uni.navigateTo({
                      url: "/pages/deal/deal",
                      success: res => {},
                      fail: () => {},
                      complete: () => {}
                  });
                };
                if(e.index==1){
                    uni.navigateTo({
                        url: "../join/join",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                };
                if(e.index==2){
                    uni.navigateTo({
                        url: "../profit/profit",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                };
                if(e.index==3){
                    uni.navigateTo({
                        url: "../address/address",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                };
                if(e.index==4){
                    uni.navigateTo({
                        url: "../help/help",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                };
                if(e.index==5){
                    uni.navigateTo({
                        url: "../register/register",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                };
                if(e.index==6){
                    uni.navigateTo({
                        url: "../publish/publish",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                };
                if(e.index==7){
                    uni.navigateTo({
                        url: "../myactivity/myactivity",
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                }
                
              
             }  
          
          
          }       
    
  }
</script>

<style>
    
     /* header start */
    .touxiang {
        width: 120upx;
        height: 120upx;
        padding-left: 60upx;
        padding-top: 40upx;
    
    
    }
    
    .activity {
        width: 180upx;
        height: 40upx;
        font-family: PingFang-SC-Medium;
        font-size: 24upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40upx;
        letter-spacing: 0upx;
        color: #ffffff;
        position: absolute;
        left: 0upx;
        top: 125upx;
    }
    
    .uni-media-list-body {
        position: relative;
    }
    
    .uni-media-list-text-top {
        position: absolute;
        left: 10upx;
        top: 60upx;
        font-size:32upx;
        fongt-weight:550;
        
    }
    .uni-media-list1 {
        display: flex;
    }
    /* header end */
    
    .dian-item0 {
        display: flex;
        justify-content: space-between;
        padding: 0 50upx 50upx 50upx;
        border-bottom: 1upx solid #ccc;
        width: 600upx;
        margin-bottom: 50upx;
     
    }
    .num {
        font-size: 30upx;
    }
    .dian-p {
        font-size: 24upx;
    }
    .dian-item1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    /* 我的服务开始 */
    .service {
        position: relative;
        padding: 30upx;
    }
    .service-head {
        position: absolute;
        left: 50upx;
        top: 0upx;
        font-size: 30upx;
        font-weight: 550;
       
        
    }

    /* 我的服务结束 */
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo image {
        width: 690upx;
        height: 134upx;
    }

    .swiper-item image {
        width: 750upx;
        height: 308upx;
    }

    .selected {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50upx 0;
    }

    .selected image {
        width: 336upx;
        height: 34upx;
    }

    /* container start */
    .uni-media-list {
        display: flex;
        margin: 50upx 20upx;
    }

    .uni-media-list-logo image {
        width: 220upx;
        height: 220upx;
    }

    .uni-media-list-body {
        width: 426upx;
        height: 249upx;
        margin-left: 50upx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-top: -20upx;

    }

    .uni-media-titile {
        width: 389upx;
        height: 27upx;
        font-family: PingFang-SC-Regular;
        font-size: 28upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 35upx;
        letter-spacing: 0px;
        color: #333333;
    }

    .uni-media-time {
        width: 450upx;
        height: 21upx;
        font-family: PingFang-SC-Regular;
        font-size: 22upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 35upx;
        letter-spacing: 0px;
        color: #666666;
    }

    .uni-media-number {
        width: 250upx;
        height: 21upx;
        font-family: PingFang-SC-Regular;
        font-size: 22upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 35upx;
        letter-spacing: 0px;
        color: #666666;
    }

    .uni-media-state {
        width: 142upx;
        height: 23upx;
        font-family: PingFang-SC-Regular;
        font-size: 24upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 35upx;
        letter-spacing: 0px;
        color: #999999;
    }

    .uni-media-enter {
        width: 128upx;
        height: 35upx;
        font-family: SourceHanSansCN-Light;
        font-size: 24upx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 35upx;
        text-align: center;
        letter-spacing: 0px;
        color: #e90028;
        border: 1upx solid #e90028;
    }

    .uni-media-enter:hover {
        background-color: red;
        color: white;
    }

    /* container end */
</style>