类似于boss的简历刷新（未调用接口）

最新推荐文章于 2024-06-17 13:56:54 发布

一个前端程序猿

最新推荐文章于 2024-06-17 13:56:54 发布

阅读量54

点赞数

分类专栏：小程序文章标签：数学建模 java python

本文链接：https://blog.csdn.net/zhang157111/article/details/131280577

版权

小程序专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<view class="box">
    <scroll-view scroll-y="true" style="height: 100vh;">
        <view class="in_box">
            <view class="top_refresh">
                <view class="top_refresh_left">
                    <view class="top_refresh_left_top">今日未刷新</view>
                    <view class="top_refresh_left_bot">刷新后，简历优先展示，曝光翻倍</view>
                </view>
                <view class="top_refresh_right">
                    <view class="right_btns" bindtap="refresh">立即刷新</view>
                </view>
            </view>
            <view class="resume_hide">
                <view class="resume_hide_left">您的简历已隐藏，暂时无法进行简历刷新</view>
                <view class="resume_hide_right">
                    <view class="resume_hide_right_left">取消隐藏</view>
                    <view class="resume_hide_right_right"><van-icon name="arrow" color="#F42F2F"/></view>
                </view>
            </view>
            <view class="echarts_box">
                <view class="top_tabs">
                    <view class="top_tabs_item" wx:for="{{topTabs}}" wx:key="index" bindtap="changeTopTabs" data-index="{{index}}">
                        <view class="top_tabs_item_top {{item.selected ? 'isSelected' : ''}} ">{{item.name}}</view>
                        <view class="top_tabs_item_bot" hidden="{{item.selected == false}}"></view>
                    </view>
                </view>
                <view class="top_tabs_info" wx:if="{{topTabsAvtive == 0}}">
                    <view class="top_tabs_info_left">2023.06.12</view>
                    <view class="top_tabs_info_right">
                        <view class="dian"></view>
                        <view class="right_text">刷新前 0 人</view>
                    </view>
                </view>
                <view class="top_tabs_info" wx:if="{{topTabsAvtive == 2}}">
                    <view class="top_tabs_info_left">2023.06.12</view>
                    <view class="right_info_resume">
                        <view class="top_tabs_info_right">
                            <view class="dian1"></view>
                            <view class="right_text">我 0 人</view>
                        </view>
                        <view class="top_tabs_info_right marl">
                            <view class="dian"></view>
                            <view class="right_text">同行 0 人</view>
                        </view>
                    </view>
                
                </view>
                <view class="top_echarts">
                        <ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{{ ec }}"></ec-canvas>
                </view>
            </view>
            <view class="resumeRefresh_box" >
                <view class="title">简历刷新效果</view>
                <view class="bot_tabs_box">
                    <view class="bot_tabs_item" wx:for="{{botTabs}}" wx:key="index" bindtap="changeBotTabs" data-index="{{index}}">
                        <view class="bot_tabs_top {{item.selected ? 'bot_tabs_selected' : ''}}">{{item.name}}</view>
                        <view class="bot_tabs_bot" hidden="{{!item.selected}}"></view>
                    </view>
                </view>
                <view class="resume_content" wx:if="{{botList.length > 0}}">
                    <view class="resume_item" wx:for="{{botList}}" wx:key="index">
                        <view class="item_top">
                            <view class="item_top_left">{{item.position}}</view>
                            <view class="item_top_right">{{item.salary}}</view>
                        </view>
                        <view class="item_compony">
                            <view class="small_compony" wx:for="{{item.componyInfo}}" wx:for-item="items" wx:for-index="idx" wx:key="idx">{{items}}</view>
                        </view>
                        <view class="item_tags">
                            <view class="small_tags" wx:for="{{item.tags}}" wx:for-item="items" wx:for-index="idx" wx:key="idx">{{items}}</view>
                        </view>
                        <view class="item_bot">
                            <view class="bot_left">
                                <view class="left_img">
                                    <image src="{{item.avant}}" mode=""/>
                                </view>
                                <view class="left_name">{{item.name}}</view>
                            </view>
                            <view class="bot_right">{{item.city}}</view>
                        </view>
                    </view>
                </view>
                <view class="resume_content_nodata" wx:else>
                    <view class="no_date">
                        <view class="no_date_img"><image src="/images/my/no_collect.png" mode=""/></view>
                        <view class="no_data_content">暂无数据</view>
                    </view>
                </view>
            </view>
        </view>
        <van-popup show="{{ popShow }}" round z-index="200">
            <view class="pop_box">
                <view class="pop_box_top">
                    暂时无法使用
                </view>
                <view class="pop_box_middle">
                    您已隐藏简历,请您取消隐藏后刷新简历
                </view>
                <view class="pop_box_bot">
                    <view class="pop_box_bot_left" bindtap="cloneShow">稍后处理</view>
                    <view class="pop_box_bot_right"  bindtap="cloneShow">取消隐藏</view>
                </view>
            </view>
        </van-popup>
    </scroll-view>
</view>

import * as echarts from "../../ec-canvas/echarts"
import Dialog from '../../../miniprogram_npm/@vant/weapp/dialog/dialog';
function setOption(chart, xlist, ylist1, ylist2) {
   var option = {
        tooltip: {
          trigger: 'axis',
          
        },
        grid: {
            top:'0',
          left: 'auto',
          right: '8%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            offset: 5,
            splitLine:{
                show: true, //让网格显示
                lineStyle: {//网格样式
                  color:['#e2e2e2'], //网格的颜色
                  width:1, //网格的宽度
                  type:'dotted' //网格是实实线，可以修改成虚线以及其他的类型
                }
            },
            axisLine: {                                    //坐标轴轴线设置
                onZero: false,
                show: true,                                  //是否显示坐标轴轴线
                lineStyle: {                                //坐标轴的线
                  color: '#f42f2f',                            //线的颜色
                  width: 4,                                //线的粗细程度    (用数字表示)
                  type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
                }
              },
              axisLabel: {                                //坐标轴刻度文字的设置
                show: true,                                 //是否显示
                inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                margin: 4,                                 //坐标轴刻度文字与轴线之间的距离
                color: '#333333',                              //坐标轴刻度文字的颜色
                fontSize:11,                                //坐标轴刻度文字的大小         (用数字表示)
                fontWeight:'bolder',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
                fontFamily:'宋体',                            //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
                padding: [8, 0, 0, 0]                    //坐标轴刻度文字的边距        (上右下左)          
              },
              axisTick: {
                length: 1,
                lineStyle: {
                  type: 'dotted',
                  color: '#F42F2F',
                  width: 10,
                  cap: 'round',
                  padding: [6, 4, 0, 4]                    //坐标轴刻度文字的边距        (上右下左) 
                }
              },
            boundaryGap: false,
            data: xlist
          }
        ],
        yAxis: [
          {
            type: 'value',
            show:false
          }
        ],
        series: [
          {
            center: ['30%', '50%'],
            name: '我',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            smooth:true,
            symbol: "none",
            emphasis: {
              focus: 'series'
            },
            lineStyle:{
                normal:{
                    color:'#3391ff',
                    width:3
                }
            },
            areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#9ccbff' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#fff' // 100% 处的颜色
                  }]
                  ),  //背景渐变色 
                }
            },
            data: ylist1
          },
          {
            center: ['80%', '50%'],
            name: '同行',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            smooth:true,
            symbol: "none",
            emphasis: {
              focus: 'series'
            },
            lineStyle:{
                normal:{
                    color:'#e64f54',
                    width:3
                }
            },
            data: ylist2,
            areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#e95054' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#fff' // 100% 处的颜色
                  }]
                  ),  //背景渐变色 
                }
            },
          },
          
        ]
      };
  chart.setOption(option);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
      popShow:false,
      topTabs:[
          {
              name:'今日未刷新',
              selected:true
          },
          {
            name:'与我联系',
            selected:false
        },
        {
            name:'简历曝光度',
            selected:false
        },
      ],
      topTabsAvtive:0,
      ec: {
        lazyLoad: true
      },
      botTabs:[
          {
              name:'查看我',
              selected:true
          },{
              name:'与我联系',
              selected:false
          }
      ],
      botTabsAvtive:0,
      botList:[]
    //   botList:[
    //       {
    //           position:'产品经理产品经理产品经理产品经理产品经理',
    //           salary:'6-8K',
    //           componyInfo:['点动科技','天使轮','0-20人'],
    //           tags:['3-5年','产品老发','阿斯顿撒多'],
    //           avant:'/images/about.png',
    //           name:'王先生 招聘者',
    //           city:'河北 廊坊'
    //       },
    //       {
    //         position:'产品经理',
    //         salary:'6-8K',
    //         componyInfo:['点动科技','天使轮','0-20人'],
    //         tags:['3-5年','产品老发','阿斯顿撒多'],
    //         avant:'/images/about.png',
    //         name:'王先生 招聘者',
    //         city:'河北 廊坊'
    //     },
    //     {
    //         position:'产品经理',
    //         salary:'6-8K',
    //         componyInfo:['点动科技','天使轮','0-20人'],
    //         tags:['3-5年','产品老发','阿斯顿撒多'],
    //         avant:'/images/about.png',
    //         name:'王先生 招聘者',
    //         city:'河北 廊坊'
    //     },
    //   ]
  },
  cloneShow(){
      this.setData({
        popShow:false
      })
  },
  refresh(){
      this.setData({
        popShow:true
      })
  },
  getOneOption:function(){
    this.setData({
      xlist: ['07日', '08日', '昨天', '今日',],
      ylist: [10, 22, 0, 8],
      ylist2:[60, 22, 18, 64]
    })
    this.init_one(this.data.xlist, this.data.ylist, this.data.ylist2)
  },
  init_one: function (xdata, ylist1, ylist2) {           //初始化第一个图表
    console.log(this.oneComponent)
    this.oneComponent.init((canvas, width, height,dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setOption(chart, xdata, ylist1, ylist2)  //赋值给echart图表
      this.chart = chart;
      return chart;
    });
  },
  changeTopTabs(e){
      let index = e.currentTarget.dataset.index
      let list = this.data.topTabs
      for (let i = 0; i < list.length; i++) {
        list[i].selected = false
      }
      list[index].selected = true
      this.setData({
        topTabs:list,
        topTabsAvtive:index
      })
  },
  changeBotTabs(e){
    let index = e.currentTarget.dataset.index
    let list = this.data.botTabs
    for (let i = 0; i < list.length; i++) {
      list[i].selected = false
    }
    list[index].selected = true
    this.setData({
      botTabs:list,
      botTabsAvtive:index
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.oneComponent = this.selectComponent('#mychart-one');
    this.getOneOption();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
    
  },

})

.in_box {
    padding: 0 32rpx;
}
.top_refresh {
    height: 208rpx;
    background: linear-gradient(133deg, #FFFFFF 0%, #FFF5EB 28%, #FAFFED 63%, #FFDDDD 100%);
    border-radius: 16rpx;
    border: 2rpx solid;
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 239, 239, 1)) 2 2;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 48rpx 32rpx 62rpx 32rpx;
    box-sizing: border-box;
}
.top_refresh_left_top {
    font-size: 36rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
}
.top_refresh_left_bot {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-top: 8rpx;
}
.right_btns {
    width: 146rpx;
    height: 64rpx;
    background: #D8D8D8 linear-gradient(270deg, #FF7979 0%, #F32E2E 100%);
    border-radius: 40rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 64rpx;
    text-align: center;
}
.resume_hide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12rpx 32rpx;
    background-color: #f4e8e8;
    color: #F42F2F;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 30rpx;
    opacity: 0.9;
    margin: 32rpx 0;
}
.resume_hide_right {
    display: flex;
    align-items: center;
}
.resume_hide_right_right {
    margin-left: 8rpx;
}
.top_tabs {
    padding:32rpx ;
    box-sizing: border-box;
    display: flex;
    margin-left: -38rpx;
}
.top_tabs_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 38rpx;
}
.top_tabs_item_bot {
    width: 44rpx;
    height: 6rpx;
    background: #F42F2F;
    border-radius: 6rpx;
    margin-top: 4rpx;
}
.top_tabs_item_top {
    font-size: 30rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #666666;
}
.isSelected {
    font-size: 30rpx !important;
    font-weight: 600 !important;
    color: #333333 !important;
}
.echarts_box {
    background-color: #fff;    
    border-radius: 16rpx;
    padding-bottom: 38rpx;
    margin-bottom: 40rpx;
}
.top_tabs_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 34rpx;
    box-sizing: border-box;
    background: #f7f7f7;
    border-radius: 12rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #838383;
    padding: 12rpx 24rpx;
    box-sizing: border-box;
}
.dian {
    width: 10rpx;
    height: 10rpx;
    background: #F42F2F;
    border-radius: 50%;
    margin-right: 10rpx;
}
.top_tabs_info_right {
    display: flex;
    align-items: center;
}
.top_echarts {
    height: 382rpx;
    width: 100%;
}
ec-canvas {
    width: 100%;
    height: 100%;
}
.dian1 {
    width: 10rpx;
    height: 10rpx;
    background: #3391FF;
    border-radius: 50%;
    margin-right: 10rpx;
}
.right_info_resume {
    display: flex;
}
.marl {
    margin-left: 20rpx;
}
.resumeRefresh_box {
    padding: 26rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FFF2EE 0%, #FFFBF4 33%, #FFFFFF 100%, #FFE6E6 100%);
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    border: 2rpx solid;
    border-image: linear-gradient(128deg, rgba(255, 255, 255, 1), rgba(255, 249, 249, 0.47)) 2 2;
}
.title {
    font-size: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16rpx;
}
.bot_tabs_box {
    display: flex;
    align-items: center;
    margin-left: -82rpx;
}
.bot_tabs_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 82rpx;
}
.bot_tabs_bot {
    width: 44rpx;
    height: 6rpx;
    background: #F42F2F;
    border-radius: 6rpx;
    margin-top: 4rpx;
}
.bot_tabs_top {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
}
.bot_tabs_selected{
    font-size: 28rpx !important;
    color: #F42F2F  !important;
}
.resume_item {
    padding: 28rpx 34rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
}
.item_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item_top_right {
    font-size: 29rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #F42F2F;
}
.item_top_left {
    width: 450rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 33rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}
.item_compony {
    display: flex;
    align-items: center;
    margin-left: -10rpx;
    margin-top: 20rpx;
    margin-bottom: 8rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.small_compony {
    margin-left: 10rpx;
}
.item_tags {
    display: flex;
    align-items: center;
    margin-left: -20rpx;
}
.small_tags {
    margin-left: 20rpx;
    padding: 9rpx 22rpx;
    background: #F1F1F1;
    border-radius: 7rpx;
    opacity: 0.6;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.item_bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22rpx;
}
.bot_left {
    display: flex;
    align-items: center;
}
.left_img {
    width: 39rpx;
    height: 39rpx;
    border-radius: 50%;
    margin-right: 12rpx;
}
.left_name {
    font-size: 16rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}
.bot_right {
    font-size: 16rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.no_data {
    margin-top: 10rpx;
}
.no_data_top {
    width: 500rpx;
    height: 350rpx;
}
.pop_box {
    padding-top: 62rpx;
    width: 576rpx;
    background: #FFFFFF;
}
.pop_box_top {
    width: 254rpx;
    height: 58rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 56rpx;
    padding-left: 50rpx;
    margin-bottom: 8rpx;
}
.pop_box_middle {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    padding-left: 50rpx;
    margin-bottom: 58rpx;
}
.pop_box_bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pop_box_bot_left,.pop_box_bot_right{
    width: 49%;
    height: 102rpx;
    line-height: 102rpx;
    text-align: center;
}
.pop_box_bot {
    border-top: 1rpx solid #979797;
    opacity: 0.9;
}
.pop_box_bot_left {
    border-right: 1rpx solid #979797;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.pop_box_bot_right {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #037AFF;
}
.no_date {
    margin-top: 20rpx;
    margin-left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.no_date_img {
    width: 400rpx;
    height: 200rpx;
}
.no_data_content {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 36rpx;
}