09_心理咨询_微信小程序项目实战_咨询师详情页静态效果实现

我是波哩个波

已于 2022-03-10 13:25:57 修改

阅读量782

点赞数 6

分类专栏： # 从零构建微信小程序项目文章标签：小程序微信微信小程序前端

于 2021-09-23 14:34:31 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/120434023

版权

从零构建微信小程序项目专栏收录该内容

19 篇文章 48 订阅

订阅专栏

一、咨询师信息

1.1 页面结构

在app.json里面的pages里面定义"pages/consultDetails/consultDetails"

1、定义一个view，给其添加id：consultInfoView；

2、在consultInfoView定义4个view，分别承载咨询师头像、名称、等级、证书等；

3、在第四个view里面定义两个view，分别承载已认证和查看证书的文本；给第四个view添加一个id：ccieView，是为了方便我们后续的样式添加；

<!-- 咨询师信息 -->
<view id="consultInfoView">
  <view>
    <image src="/images/zxs01.jpg"></image>
  </view>
  <view>
    张婧
  </view>
  <view>
    郑州市  国家二级心理咨询师
  </view>
  <view id="ccieView">
    <view>已认证</view>
    <view>查看证书</view>
  </view>
</view>

1.2 样式实现

        1、给consultInfoView设置背景色；

        2、给consultInfoView里面的第一个子view设置宽、高、外边距居中、上下外边距、背景色、圆角、文本居中；给第一个子view里面的图片设置大小、圆角、上外边距；
       注意：当我们给父元素的第一个子元素设置上外边距的时候，应用到了父元素，这叫上外边距的塌陷，给父元素设置overflow:hidden;

3、给consultInfoView里面的第二个子view上设置文字大小、颜色、文本居中、加粗；

4、给consultInfoView里面的第三个子view上设置文字大小、颜色、文本居中、下边框、上下内边距、宽度、居中；

5、给ccieView设置上下左右内边距、flex布局、上下内边距；

6、给ccieView里面的子view添加背景颜色、文字颜色、圆角、宽高、行高；

/* 咨询师信息样式 */
#consultInfoView{
  background: #87cefa;
  /* 解决上外边距的塌陷 */
  overflow: hidden;
  color: white;
}

#consultInfoView > view:nth-child(1){
  width: 200rpx;
  height: 200rpx;
  margin: 40rpx auto;
  border-radius: 100rpx;
  background: #fff;
  text-align: center;
}

#consultInfoView image{
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  margin-top: 20rpx;
}

#consultInfoView > view:nth-child(2){
    font-size: 36rpx;
    text-align: center;
    font-weight: bold;
}

#consultInfoView > view:nth-child(3){
  font-size: 30rpx;
  text-align: center;
  padding: 28rpx 0;
  border-bottom: 2rpx solid #fff;
  width: 690rpx;
  margin: 0 auto;
}

#ccieView {
  padding: 20rpx 76rpx;
  display: flex;
  justify-content: space-between;
}

#ccieView > view{
  width: 200rpx;
  height: 60rpx;
  height: 60rpx;
  background: #29AFF4;
  text-align: center;
  line-height: 60rpx;
  border-radius: 30rpx;
}

二、擅长领域

2.1 页面结构

1、定义一个view，给其添加id：domainView；

2、在domainView定义三个子view，分别来承载不同的文本；

<!-- 擅长领域 -->
<view id="domainView">
  <view>恋爱关系</view>
  <view>婚姻家庭</view>
  <view>情绪管理</view>
</view>

2.2 样式实现

1、给domainView设置上下左右内边距、flex布局、水平排版、背景色；

2、给domainView的三个子view设置背景色、宽、高、文字颜色、文本居中、行高、圆角、字体大小；

/* 擅长领域 */
#domainView{
  padding: 30rpx 76rpx;
  display: flex;
  justify-content: space-between;
  background: #fff;
}

#domainView > view{
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #87cefa;
  color: #fff;
  font-size: 24rpx;
  border-radius: 6rpx;
}

三、收费标准

3.1 页面结构

1、定义view，给其添加class：consultItemView；

2、在consultItemView里面定义view，给其添加class：titleView，用来承载标题；

3、在consultItemView定义三个子view，给其添加class：chargeItemView；

4、在chargeItemView里面定义三个子view，分别用来承载收费类型、收费金额、咨询人数等文本；

5、在consultItemView定义一个view，用来承载查看更多和右箭头；

<!-- 收费标准 -->
<view class="consultItemView">
  <!-- 标题 -->
  <view class="titleView">
    收费标准
  </view>
  <!-- 收费项 -->
  <view class="chargeItemView">
    <view>语音咨询</view>
    <view>18人已咨询</view>
    <view>
      <text>500</text>/次（1小时）
    </view>
  </view>

  <view class="chargeItemView">
    <view>视频咨询</view>
    <view>18人已咨询</view>
    <view>
      <text>500</text>/次（1小时）
    </view>
  </view>

  <view class="chargeItemView">
    <view>倾诉咨询</view>
    <view>18人已咨询</view>
    <view>
      <text>500</text>/次（1小时）
    </view>
  </view>

  <!-- 查看更多 -->
  <view id="moreView" bindtap="goHotArticlePage"> 
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>

3.2 样式实现

1、给页面设置整体背景色；

2、给consultItemView设置左右内边距和上下外边距、背景颜色；

3、给titleView设置上下内边距、字体大小、粗细、下边框；

4、给chargeItemView设置下边框、上下内边距、相对定位；

5、给chargeItemView里面的三个子view分别设置字体大小、颜色；

6、给chargeItemView第二个子view，设置绝对定位改变其位置；

7、给chargeItemView第三个子view，设置上内边距；给它里面的text设置字体大小和颜色；

/* 收费标准 */
.consultItemView{
  margin: 24rpx 0;
  padding: 0 30rpx;
  background: #fff;
}

.titleView{
  padding: 30rpx 0;
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #F1F1F1;
}

.chargeItemView{
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
  color: #9F9F9F;
}

.chargeItemView > view:nth-child(1){
  font-size: 30rpx;
}

.chargeItemView > view:nth-child(2){
  font-size: 24rpx;
  position: absolute;
  top: 20rpx;
  right: 30rpx;
}

.chargeItemView > view:nth-child(3){
  font-size: 30rpx;
}

.chargeItemView > view:nth-child(3) text{
  color: #fe3000;
  font-size: 30rpx;
  font-weight: bold;
  padding-top: 20rpx;
}

四、回复留言

4.1 页面结构

1、定义view，给其添加class：consultItemView；

2、在consultItemView里面定义view，给其添加class：titleView，用来承载标题；

3、在consultItemView定义三个子view，给其添加class：replyItemView；

4、在replyItemView里面定义两个子view，分别用来承载问、答；

5、在consultItemView定义一个view，用来承载查看更多和右箭头；

<!-- 回复留言 -->
<view class="consultItemView">
  <!-- 标题 -->
  <view class="titleView">
    回复留言
  </view>
  <!-- 收费项 -->
  <view class="replyItemView">
    <view>问: 家庭矛盾,情绪抑郁,社交恐惧症,自卑,时长心慌不安,巴拉拉巴拉</view>
    <view>
      答: 这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
      这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
      这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
    </view>
  </view>

  <view class="replyItemView">
    <view>问: 家庭矛盾,情绪抑郁,社交恐惧症,自卑,时长心慌不安,巴拉拉巴拉</view>
    <view>
      答: 这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
      这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
      这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
    </view>
  </view>

  <view class="replyItemView">
    <view>问: 家庭矛盾,情绪抑郁,社交恐惧症,自卑,时长心慌不安,巴拉拉巴拉</view>
    <view>
      答: 这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
      这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
      这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。
    </view>
  </view>

  <!-- 查看更多 -->
  <view id="moreView" bindtap="goHotArticlePage"> 
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>

4.2 样式实现

1、给replyItemView设置下边框、上下内边距；

2、给replyItemView里面的两个子view分别设置字体大小、颜色；

3、给replyItemView里面的第一个子view，设置文本不换行，超出部分隐藏，用省略号替代、宽、高、行高、文本加粗；

        4、给replyItemView里面的第二个子view，设置高度、超出部分隐藏，用省略号替代、两行文本显示、多余的内容省略号隐藏、宽、高；
        参考文档：https://blog.csdn.net/weixin_33910759/article/details/89760530
        注：一行省略和两行省略实现方式不太一样；

/* 回复留言 */
.replyItemView{
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F1F1F1;
}

.replyItemView > view:nth-child(1){
  font-size: 30rpx;
  width: 690rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-weight: bold;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文本不换行 */
  white-space: nowrap;
  /* 多余文本使用省略号替代 */
  text-overflow: ellipsis;
}

.replyItemView > view:nth-child(2){
  font-size: 24rpx;
  color: #9F9F9F;
  height: 80rpx;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-content: center;
}

五、用户评价

用户评价和收费标准结构类似，样式稍微有一定的差异，根据效果图和标注图进行简单的修改即可；

五角星实现：参考文档：https://blog.csdn.net/sxs161028/article/details/107512671

<!-- 用户评价 -->
<view class="consultItemView">
  <!-- 标题 -->
  <view class="titleView">
    用户评价
  </view>
  <!-- 用户评论项 -->
  <view class="reviewItemView">
    <view class="userNameView">
      匿名用户
      <view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star half_star">
          <view class="icon icon_gray">
            <view class="icon icon_gray"></view>
          </view>
        </view>
      </view>
    </view>
    <view>昨天</view>
    <view>
      老师很细心,主要声音好听,长得美!
    </view>
  </view>

  <view class="reviewItemView">
    <view class="userNameView">
      匿名用户
      <view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star half_star">
          <view class="icon icon_gray">
            <view class="icon icon_yellow"></view>
          </view>
        </view>
      </view>
    </view>
    <view>昨天</view>
    <view>
      老师很细心,主要声音好听,长得美!
    </view>
  </view>

  <view class="reviewItemView">
    <view class="userNameView">
      匿名用户
      <view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_yellow"></view>
        </view>
        <view class="star">
          <view class="icon icon_gray"></view>
        </view>
        <view class="star half_star">
          <view class="icon icon_gray">
            <view class="icon icon_gray"></view>
          </view>
        </view>
      </view>
    </view>
    <view>昨天</view>
    <view>
      老师很细心,主要声音好听,长得美!
    </view>
  </view>


  <!-- 查看更多 -->
  <view id="moreView" bindtap="goHotArticlePage">
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>

/* 用户评价 */
.reviewItemView {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

.reviewItemView>view:nth-child(1) {
  font-size: 24rpx;
  color: #9F9F9F;
}

.reviewItemView>view:nth-child(2) {
  font-size: 24rpx;
  position: absolute;
  top: 20rpx;
  right: 30rpx;
  color: #9F9F9F;
}

.reviewItemView>view:nth-child(3) {
  font-size: 30rpx;
  padding-top: 20rpx;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff');
}

.userNameView {
  position: relative;
}

.userNameView > view{
  display:flex;
  position: absolute;
  left: 130rpx;
  top: 6rpx;
}

/*五角星之间的间距*/
.star {
  margin-right: 4rpx;
}

/*五角星*/
.star .icon:before {
  content: '\f005';
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
}

.star .icon {
  display: block;
  font-size: 24rpx;
  text-align: center;
  width: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  position: relative;
  white-space: pre;
}

/*灰色五角星*/
.star .icon_gray {
  color: #DDDDDD;
}

/*黄色五角星*/
.star .icon_yellow:before {
  color: #FED300;
}

六、底部区域

6.1 页面结构

        1、定义一个view，然后给其添加id：bottomView；

        2、在bottomView定义两个子view，分成承载发私信和咨询；

<!-- 底部 -->
<view id="bottomView">
  <view>发私信</view>
  <view>咨询</view>
</view>

6.2 样式实现

        1、给bottomView使用flex布局；

        2、给bottomView里面的子view设置高度、等比放大、设置背景、设置文字大小颜色；

/* 底部样式 */
#bottomView{
  display: flex;
  text-align: center;
  border-top: 2rpx solid #F1F1F1;
}

#bottomView > view{
  flex-grow: 1;
  height: 98rpx;
  font-size: 36rpx;
  line-height: 98rpx;
}

#bottomView > view:nth-child(1){
  background: #F7F7FA;
  color: #979798;
  
}

#bottomView > view:nth-child(2){
  background: #87cefa;
  color: #fff;
}

注：点击咨询师列表中咨询师，跳转到对应的咨询师详情页，咨询师详情页就这一个页面，这是该页面中展示不同的动态数据，我们在后面结合数据的时候讲解；

我是波哩个波

关注

6
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
09_心理咨询_微信小程序项目实战_咨询师详情页静态效果实现

一、咨询师信息页面结构在app.json里面的pages里面定义"pages/consultDetails/consultDetails"1、定义一个view，给其添加id：consultInfoView；2、在consultInfoView定义4个view，分别承载咨询师头像、名称、等级、证书等；3、在第四个view里面定义两个view，分别承载已认证和查看证书的文本；给第四个view添加一个id：ccieView...
复制链接

扫一扫