|
|
@@ -31,7 +31,7 @@
|
|
|
<view class="cell" v-if="radioValue == 1">
|
|
|
<view class="cell-label">面试方式</view>
|
|
|
<view class="cell-input" hover-class="cell-hover" @click="method = true">
|
|
|
- <view class="m-ellipsis">请选择面试方式</view>
|
|
|
+ <view class="m-ellipsis">{{selecteMethodText || '请选择面试方式'}}</view>
|
|
|
<image class="cell-icon" src="/static/images/msg/down_arrow.svg" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -73,9 +73,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-button class="btn">发送面试邀请</u-button>
|
|
|
+ <u-button class="btn" @click="rules = true">发送面试邀请</u-button>
|
|
|
+
|
|
|
<!-- 面试职位 -->
|
|
|
- <u-popup v-model="position" mode="bottom" border-radius="20">
|
|
|
+ <u-popup v-model="position" mode="bottom" border-radius="40">
|
|
|
<view class="pop-content">
|
|
|
<view class="pop-title">选择面试职位</view>
|
|
|
<view class="pop-card">
|
|
|
@@ -96,7 +97,7 @@
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<!-- 选择联系人 -->
|
|
|
- <u-popup v-model="person" mode="bottom" border-radius="20">
|
|
|
+ <u-popup v-model="person" mode="bottom" border-radius="40">
|
|
|
<view class="pop-content">
|
|
|
<view class="pop-title">
|
|
|
<view>选择联系人</view>
|
|
|
@@ -115,21 +116,26 @@
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<!-- 选择面试方式 -->
|
|
|
- <u-popup v-model="method" mode="bottom" border-radius="20">
|
|
|
+ <u-popup v-model="method" mode="bottom" border-radius="40">
|
|
|
<view class="pop-content">
|
|
|
<view class="pop-title">选择面试方式</view>
|
|
|
- <!-- <view class="pop-card">
|
|
|
- <view class="person-item" v-for="(item,index) in personList" :key="item.id" @click="selectPerson(item)">
|
|
|
- <view>{{item.name}}</view>
|
|
|
- <view class="pop-phone">{{item.phone}}</view>
|
|
|
- <image class="pop-icon" src="/static/images/msg/edit.svg" mode="aspectFit" @click="goPage('editPerson',item)"></image>
|
|
|
+ <view class="pop-method">
|
|
|
+ <view
|
|
|
+ v-for="(item,i) in methodList"
|
|
|
+ :key="i"
|
|
|
+ class="method-item"
|
|
|
+ :class="methodActiveIndex == i?'active-item':''" @click="changeMethod(i,item)">{{ item }}
|
|
|
+ </view>
|
|
|
+ <view class="method-text">
|
|
|
+ <textarea placeholder-class="pop-placeholder-text" placeholder="粘贴会议邀请信息">
|
|
|
+ </textarea>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
- <u-button class="pop-btn">确定</u-button>
|
|
|
+ </view>
|
|
|
+ <u-button class="btn btn-m" @click="method = false">确定</u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<!-- 选择时间 -->
|
|
|
- <u-popup v-model="isShowTime" mode="bottom" border-radius="20">
|
|
|
+ <u-popup v-model="isShowTime" mode="bottom" border-radius="40">
|
|
|
<view class="pop-content">
|
|
|
<view class="pop-title">请选择面试开始时间</view>
|
|
|
<picker-view :value="timeValue" @change="bindChange" class="picker-view">
|
|
|
@@ -146,6 +152,27 @@
|
|
|
<u-button class="pop-time-btn" @click="changeBtn">确定</u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
+ <!-- 原则 -->
|
|
|
+ <u-popup v-model="rules" mode="center" border-radius="40">
|
|
|
+ <view class="pop-rules">
|
|
|
+ <view class="pop-text">
|
|
|
+ <view class="pop-rules-title">约面试诚信原则</view>
|
|
|
+ <view v-if="isCancel">1.面试前3小时，双方可以申请取消<br />
|
|
|
+ 2.如不取消，请按时出席，不要爽约<br />
|
|
|
+ 3.对方爽约，可在平台内投诉<br />
|
|
|
+ 4.为了方便联系，约面试后上双方自动交换手机联系方式
|
|
|
+ </view>
|
|
|
+ <view v-else>请及时关注面试时间，以免忘记面试</view>
|
|
|
+ </view>
|
|
|
+ <view class="rules-btn" v-if="isCancel">
|
|
|
+ <u-button class="cancel" @click="rules = false">思考片刻再决定</u-button>
|
|
|
+ <u-button class="guarantee" @click="isCancel = false">保证不爽约</u-button>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <u-button class="confirm" @click="confirmRules">确认</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -219,7 +246,12 @@
|
|
|
timeValue: [0, 0, 0],
|
|
|
hours: Array.from({length: 12}, (_, i) => i + 1),
|
|
|
minutes: Array.from({length: 60}, (_, i) => i),
|
|
|
- meridiem: ['AM', 'PM']
|
|
|
+ meridiem: ['AM', 'PM'],
|
|
|
+ methodList:['腾讯会议','钉钉','微信视频','电话面试'],
|
|
|
+ methodActiveIndex:0,
|
|
|
+ selecteMethodText:'',
|
|
|
+ rules:false,
|
|
|
+ isCancel:true
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
@@ -278,341 +310,21 @@
|
|
|
const ampm = this.meridiem[val[2]]
|
|
|
this.selectedTime = `${hour}:${minute < 10 ? '0' + minute : minute} ${ampm}`
|
|
|
this.isShowTime = false;
|
|
|
- }
|
|
|
+ },
|
|
|
+ changeMethod(i,val){
|
|
|
+ this.methodActiveIndex = i
|
|
|
+ this.selecteMethodText = val
|
|
|
+ },
|
|
|
+ confirmRules(){
|
|
|
+ this.rules = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isCancel = true;
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100vh;
|
|
|
-
|
|
|
- .detail-bg {
|
|
|
- height: 327px;
|
|
|
- width: 100%;
|
|
|
- background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- z-index: 0;
|
|
|
- padding: 40rpx 40rpx 0;
|
|
|
-
|
|
|
- .detail-title {
|
|
|
- color: #fff;
|
|
|
- font-size: 50rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-family: DM Sans;
|
|
|
- }
|
|
|
-
|
|
|
- .card-box {
|
|
|
- margin: 20rpx 0;
|
|
|
- padding: 36rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1rpx solid rgba(227, 231, 236, 1);
|
|
|
- border-radius: 12rpx;
|
|
|
- background: rgba(253, 253, 253, 1);
|
|
|
-
|
|
|
- .cell {
|
|
|
- height: 56rpx;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .cell-label {
|
|
|
- width: 120rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-radio__icon-wrap {
|
|
|
- width: 32rpx !important;
|
|
|
- height: 32rpx !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-radio__label {
|
|
|
- color: rgba(23, 23, 37, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 48rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- margin-left: 8rpx !important;
|
|
|
- margin-right: 74rpx !important;
|
|
|
- }
|
|
|
-
|
|
|
- .cell-input {
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
- border-radius: 12rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 400;
|
|
|
- letter-spacing: 0px;
|
|
|
-
|
|
|
- .cell-icon {
|
|
|
- width: 20rpx;
|
|
|
- height: 14rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .flex-end {
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- .cell-hover {
|
|
|
- background-color: rgba(0, 0, 0, 0.02);
|
|
|
- transition: background-color 0.1s ease;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .explanation {
|
|
|
- color: rgba(158, 158, 158, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 26rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- .note {
|
|
|
- .note-label {
|
|
|
- color: rgba(29, 33, 41, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- margin-bottom: 22rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .note-time {
|
|
|
- padding: 36rpx 36rpx 0;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-calendar--hook {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- ::v-deep .uni-calendar__content {
|
|
|
- background-color: initial;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .uni-calendar-item__weeks-box-item {
|
|
|
- width: initial !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .textarea-wrapper {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .word-count {
|
|
|
- position: absolute;
|
|
|
- bottom: 20rpx;
|
|
|
- right: 20rpx;
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 26rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep uni-textarea {
|
|
|
- width: 100% !important;
|
|
|
- height: 170rpx;
|
|
|
- padding: 28rpx;
|
|
|
- background: rgba(240, 240, 240, 1);
|
|
|
- border-radius: 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #000;
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .placeholder-text {
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- height: 58rpx;
|
|
|
- padding: 16rpx 32rpx;
|
|
|
- border-radius: 999px;
|
|
|
- background: rgba(1, 107, 246, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 48rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- text-align: center;
|
|
|
- margin: 28rpx 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- // 弹框
|
|
|
- .pop-content {
|
|
|
- height: 333px;
|
|
|
- padding: 24rpx 34rpx 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- box-sizing: border-box;
|
|
|
- background: rgba(253, 253, 253, 1);
|
|
|
-
|
|
|
- .pop-title {
|
|
|
- padding: 16rpx 0;
|
|
|
- border-bottom: 1px solid rgba(153, 153, 153, 0.25);
|
|
|
- color: rgba(34, 37, 42, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 500;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .note {
|
|
|
- margin: 16rpx 30rpx 0;
|
|
|
- color: rgba(34, 37, 42, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .picker-view {
|
|
|
- flex: 1;
|
|
|
- ::v-deep uni-picker-view-column {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pop-card {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .pop-card-item {
|
|
|
- margin: 33rpx 0;
|
|
|
- box-sizing: border-box;
|
|
|
- height: 96rpx;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgba(227, 231, 236, 1);
|
|
|
- border-radius: 48rpx;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(23, 23, 37, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- letter-spacing: 0.5%;
|
|
|
-
|
|
|
- .pop-tag {
|
|
|
- margin-left: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 400;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .person-item {
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgba(227, 231, 236, 1);
|
|
|
- border-radius: 48rpx;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- height: 96rpx;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- margin: 24rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(1, 107, 246, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 48rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
-
|
|
|
- .pop-phone {
|
|
|
- margin: 0 32rpx;
|
|
|
- flex: 1;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .pop-icon {
|
|
|
- width: 24.57px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pop-btn {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- padding: 16rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgba(255, 102, 0, 1);
|
|
|
- border-radius: 999px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- margin-bottom: 60rpx;
|
|
|
- color: rgba(1, 107, 246, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 48rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- }
|
|
|
- .pop-time-btn{
|
|
|
- margin-bottom: 22rpx;
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- background: rgba(1, 107, 246, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 44rpx;
|
|
|
- letter-spacing: -0.41px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-hairline-border:after {
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
+ @import "./css/interviewInvitation.scss";
|
|
|
</style>
|
wkw