maker/src/pages/details/index.vue

<template>
  <div class="page p-details">
    <div class="main">
      <!-- 详情卡片 -->
      <div class="sec-1">
        <div class="wrap">
          <div class="title">
            <span>测试</span>
            <span>题目</span>
          </div>
          <div class="card">
            <div class="card-hd">{{maker.title}}</div>
            <div class="card-bd">
              <div class="card-cont">{{maker.desc}}</div>
              <div class="card-ipt-wrap">
                <input class="card-ipt" placeholder="点击输入你的名字" type="text" v-model="users" />
              </div>
              <div @click="getResult" class="card-btn">GO</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表、热门 -->
      <div class="sec-2">
        <div class="title">
          <div class="l">
            大家都在测
          </div>
          <div @click="goList" class="r color-yellow more">更多>></div>
        </div>
        <div class="list">
          <div class="list-bd">
            <list-item :data="item" :key="index" v-for="(item, index) in hotList"></list-item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'
import search from '@/components/search'
import listItem from '@/components/list-item'
import tag from '@/components/tag'
import requestUtil from '@/utils/request'

export default {
  data() {
    return {
      _id: '',
      maker: {},
      users: '',
      hotList: []
    }
  },

  components: {
    search,
    listItem,
    tag
  },
  onLoad(options) {
    this._id = options._id
  },
  onShow() {
    let tmpData = this.$mp.page.data['$root'];
    if (tmpData && tmpData[0]) {
      this._id = tmpData[0]._id;
      this.maker = tmpData[0].maker;
      this.hotList = tmpData[0].hotList;
      this.users = tmpData[0].users;
    }
    wx.pageScrollTo({scrollTop: 0});
  },
  mounted() {
    this.getData()
    this.getHot()
  },
  onUnload() {
    this.maker = {};
    this.users = '';
    this.hotList.length = 0;
  },
  methods: {
    async getData() {
      try {
        const data = await requestUtil.getData('/details', { _id: this._id })
        this.maker = data.result
      } catch (err) {
        console.log(err)
      }
    },
    async getHot() {
      try {
        const data = await requestUtil.getData('/list', { type: 'hot' })
        this.hotList = data.result
      } catch (err) {
        console.log(err)
      }
    },
    goList() {
      wx.switchTab({
        url: `/pages/list/main`
      })
    },
    getResult() {
      if (!this.users) {
        wx.showToast({
          title: '请先填写名字', //提示的内容,
          icon: 'none',
          duration: 2000, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => {}
        })

        return
      }
      wx.navigateTo({
        url: `/pages/result/main?_id=${this._id}&users=${this.users}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.p-details {
  .main {
    padding: 48rpx 32rpx 60rpx;
  }
  .sec-1 {
    .wrap {
      position: relative;
      margin: 0 auto;
      padding: 60rpx 32rpx;
      background-color: #fffdf5;
      border: 8rpx solid #ffdc34;
    }
    .title {
      position: absolute;
      transform: translateX(0%);
      top: -2rpx;
      left: -2rpx;
      height: 64rpx;
      padding: 0 32rpx;
      font-size: 32rpx;
      line-height: 64rpx;
      font-weight: 700;
      background-color: #ffdc34;
      color: #B8860B;
    }

    .card {
      padding-bottom: 120rpx;
      .card-hd {
        margin-bottom: 16rpx;
        text-align: center;
        font-size: 48rpx;
        font-weight: 700;
      }
      .card-bd {
        color: #999;
        line-height: 1.5;
        font-size: 32rpx;

        .card-cont {
          margin-bottom: 32rpx;
          text-indent: 1em;
          font-size: 42rpx;
        }
      }
      .card-ipt-wrap {
        width: 80%;
        margin: 24rpx auto;
        .card-ipt {
          margin-bottom: 10rpx;
          height: 60rpx;
          color: #333;
          border-bottom: 1px solid #ffdc34;
          font-size: 48rpx;
          line-height: 60rpx;

        }

        .card-ipt-tip {
          font-size: 24rpx;
        }
      }

      .card-btn {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 36rpx;
        width: 140rpx;
        height: 140rpx;
        color: #fff;
        font-size: 48rpx;
        font-weight: 700;
        line-height: 140rpx;
        text-align: center;
        background: linear-gradient(
          0deg,
          rgba(255, 214, 53, 1) 0%,
          rgba(255, 237, 154, 1) 100%
        );
        box-shadow: 0px 2px 4px 0px rgba(94, 94, 94, 0.35);
        border-radius: 50%;
      }
    }
  }

  .sec-2 {
    margin-top: 48rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .l {
        font-size: 28rpx;
        font-weight: 700;
        background-color:#ffdc34;
        height:56rpx;
        padding:0rpx 32rpx;
        line-height:56rpx;
        color:#FAFAD2;
        padding-left: 20rpx;
      }
      .r {
      }
    }
    .list {
      background-color: #fff;
      border: 6rpx solid #ffdc34;
      .list-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 64rpx;
        padding: 0 32rpx;
        line-height: 64rpx;
        border-bottom: 1px solid #f0f0f0;
        .l {
          font-weight: 700;
          color: #ffdc34;
          font-size: 28rpx;
        }
        .r {
          font-size: 28rpx;
          color: #ffdc34;
        }
      }
    }
  }

  .more {
    font-weight: 700;
    font-size:28rpx;
  }
}
</style>