【愚公系列】2022年04月 微信小程序-项目篇(祝福语)-01 首页页面设计

/**app.wxss**/
page{
  font-family: "PingFang SC", "PingFang-SC-Light", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 28rpx;
  color: #676767;
  height: 100%;
  -webkit-font-smoothing:antialiased;
}
input{
  font-family: "PingFang SC", "PingFang-SC-Light", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.flex-container{
  display:flex;
  flex-direction:column;
}

<view class="container">
  <view class="inner">
    <form bindsubmit="generate" >
      <!-- 称呼 -->
      <view class="named {{isMore ? 'more' : ''}}">
        <input bindinput="changeToName" name="toname" placeholder="怎么称呼TA?(不超过10个字)" input-placeholder="i-named"/>
      </view>
    </form>
  </view>
</view>

/**index.wxss**/
.container{
  background-color: #f7f4ee;
  color: #424242;
}
.inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60rpx;
}
form{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.named input{
  text-align: center;
  height: 78rpx;
  border-radius: 10rpx;
  border: 2rpx solid #d9ba6a;
  background-color: #fff;
  line-height: 78rpx;
  font-size:32rpx;
}
.more input{
  border: 2rpx solid #e7404d;
  box-shadow: 0 0 5px #e7404d;
}

changeToName(e) {
  let name = e.detail.value
  if (name.length > 10) {
    this.setData({
      isMore: true
    })
  } else {
    this.setData({
      isMore: false
    })
  }
}

<template name="realtionAvatar">
  <view class="item">
    <!-- tap_relation 的数据绑定之后可以考虑通过 radio[checked] 的 css 方式来实现-->
    <radio value="{{item.id}}" hidden checked="{{item.id == 1}}"id="{{'r'+item.id}}"/>
    <label class="labeled" for="{{'r'+item.id}}">
      <view class="head {{item.id == query.relationID ? 'select' : ''}}" data-id="{{item.id}}" bindtap="tap_relation">
         <image class="avatar" src="../../images/{{item.img}}.png"></image>
      </view>
      <text class="call">{{item.name}}</text>
    </label>
  </view>
</template>
<view class="container">
  <view class="inner">
    <form bindsubmit="generate" >
      <!-- 称呼 -->
      <view class="named {{isMore ? 'more' : ''}}">
        <input bindinput="changeToName" name="toname" placeholder="怎么称呼TA?(不超过10个字)" input-placeholder="i-named"/>
      </view>
       <!-- 类别 -->
      <view class="cate" >
        <div class="hd">
          <text>TA是你的</text>
        </div>
        <div class="bd">
          <radio-group name="relationID">
            <view class="row r1">
              <block wx:for="{{relation1}}">
                <template is="realtionAvatar" data="{{query,item}}"/>
              </block>
            </view>
            <view class="row r2" >
              <block wx:for="{{relation2}}">
                <template is="realtionAvatar" data="{{query,item}}"/>
              </block>
            </view>
          </radio-group>
        </div>
      </view>
    </form>
  </view>
</view>

.hd{
  display: flex;
  justify-content: center;
  font-size: 36rpx;
  padding-top: 60rpx;
}
.row{
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
}
.item{
  width: 120rpx;
}
.item .labeled{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head{
  display: block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  opacity: 0.6;
}
.select{
  background-color: #d9ba6a;
  opacity: 1;
}
.avatar{
  width: 120rpx;
  height: 120rpx;
}
.call{
  margin-top: 12rpx;
}
.cate .hd{
  padding: 60rpx 0 10rpx;
  font-size: 34rpx;
  color: #777;
}

"tap_relation": function (e) {
  this.setData({
    "query.relationID": e.currentTarget.dataset.id
  });
},

<template name="genderAvatar">
  <view class="item">
    <radio value="{{item.id}}" hidden checked="{{item.id == 1}}" id="{{'g'+item.id}}"/>
    <label class="labeled" for="{{'g'+item.id}}">
      <view class="head {{item.id == query.genderID ? 'select' : ''}}" data-id="{{item.id}}" bindtap="tap_gender">
         <image class="avatar" src="../../images/{{item.img}}.png"></image>
      </view>
      <text class="call">{{item.name}}</text>
    </label>
  </view>
</template>
<!-- 性别 -->
<view class="sex">
  <div class="hd">
    <text>TA的性别</text>
  </div>
  <div class="bd">
    <radio-group name="genderID">
      <view class="row">
        <block wx:for="{{gender}}">
          <template is="genderAvatar" data="{{query,item,index}}"/>
        </block>
      </view>
    </radio-group>
  </div>
</view>

.sex .hd{
  padding-top: 30rpx;
  font-size: 34rpx;
  color: #777;
}
.sex .row{
  padding: 20rpx 170rpx 0;
}

"tap_gender": function (e) {
  this.setData({
    "query.genderID": e.currentTarget.dataset.id
  });
},

<!-- 生成 -->
<view>
  <button form-type="submit" hover-class="navigator-hover" class="submit-btn" >捎句祝福话</button>
</view>

.submit-btn{
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  background-color: #d9ba6a;
  border-radius: 10rpx;
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  margin-top: 100rpx;
  text-align: center;
}
.submit-btn::after{
  display: none;
}

//事件处理函数
generate: function (e) {
  app.clearWishes();
  let data = e.detail.value;
  if (data.toname) {
    app.setToName(data.toname);
  }
  wx.navigateTo({
    url: `/pages/preview/preview?state=0&relation=${data.relationID}&sex=${data.genderID}`
  })
},