peopleNumber.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <template>
  2. <view class="switch-roles">
  3. <nav-bar title="选择公司规模" color="#000"></nav-bar>
  4. <view class="roles-content">
  5. <view class="content">
  6. <view class="title">公司规模</view>
  7. <view class="desc">“{{ companyName || '当前公司' }}”的人员规模</view>
  8. <view class="check-box">
  9. <view
  10. class="check-item"
  11. :class="{ 'is-check': check == index }"
  12. v-for="(item, index) in peopleList"
  13. :key="index"
  14. @click="checkPeople(index)"
  15. >{{ item }}</view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="submit-btn" @click="submitCompany">确定</view>
  20. </view>
  21. </template>
  22. <script>
  23. import navBar from "@/components/nav-bar/index.vue";
  24. export default {
  25. data() {
  26. return {
  27. peopleList: [
  28. "0-20人",
  29. "20-99人",
  30. "100-499人",
  31. "500-999人",
  32. "1000-9999人",
  33. "10000人以上",
  34. ],
  35. check: 0, // 默认选中第一个选项
  36. companyName: '' ,// 接收上个页面传递的公司名称
  37. companyId:""
  38. };
  39. },
  40. components: {
  41. navBar,
  42. },
  43. onLoad(options) {
  44. // 接收上个页面传递的公司名称参数
  45. if (options.companyName) {
  46. this.companyName = decodeURIComponent(options.companyName);
  47. console.log('接收的公司名称:', this.companyName);
  48. }
  49. if (options.companyId) {
  50. this.companyId = decodeURIComponent(options.companyId);
  51. console.log('接收的公司ID:', this.companyId);
  52. }
  53. },
  54. methods: {
  55. // 选择公司规模
  56. checkPeople(index) {
  57. this.check = index;
  58. },
  59. // 提交企业数据
  60. submitCompany() {
  61. // 表单验证
  62. if (!this.companyName) {
  63. uni.showToast({
  64. title: '请先填写公司名称',
  65. icon: 'none'
  66. });
  67. // 可跳回上一页重新填写
  68. setTimeout(() => {
  69. uni.navigateBack();
  70. }, 1500);
  71. return;
  72. }
  73. // 获取选中的公司规模
  74. //const selectedPeople = this.peopleList[this.check];
  75. const selectedPeople = this.check
  76. // 显示加载中
  77. uni.showLoading({
  78. title: '提交中...'
  79. });
  80. // 准备提交的数据
  81. const data = {
  82. companyAllName: this.companyName,
  83. companyPeople: selectedPeople, // 选中的公司规模
  84. // 可根据接口需求添加其他字段
  85. };
  86. // 发送请求
  87. this.$Request.postJson("/app/company/insertCompany", data)
  88. .then((res) => {
  89. uni.hideLoading();
  90. if (res.code === 0) {
  91. uni.showToast({
  92. title: '提交成功',
  93. icon: 'success'
  94. });
  95. // 提交成功后跳转到职位发布页面
  96. setTimeout(() => {
  97. this.goJobPosting(res.data);
  98. }, 1500);
  99. } else {
  100. uni.showToast({
  101. title: res.msg || '提交失败,请重试',
  102. icon: 'none'
  103. });
  104. }
  105. })
  106. .catch((err) => {
  107. uni.hideLoading();
  108. console.error('请求失败:', err);
  109. uni.showToast({
  110. title: '网络异常,请稍后重试',
  111. icon: 'none'
  112. });
  113. });
  114. },
  115. // 跳转到职位发布页面
  116. goJobPosting(companyId) {
  117. uni.navigateTo({
  118. url: '/pages/my/jobPosting?companyName='+this.companyName+'&companyId='+companyId
  119. });
  120. }
  121. },
  122. };
  123. </script>
  124. <style lang="scss" scoped>
  125. /* 原有样式保持不变 */
  126. .switch-roles {
  127. background-color: #fff;
  128. position: absolute;
  129. left: 0;
  130. right: 0;
  131. top: 0;
  132. bottom: 0;
  133. display: flex;
  134. flex-direction: column;
  135. .roles-content {
  136. width: 100%;
  137. flex: 1;
  138. overflow: hidden;
  139. overflow-y: auto;
  140. .content {
  141. padding: 40rpx;
  142. box-sizing: border-box;
  143. display: flex;
  144. flex-direction: column;
  145. align-items: center;
  146. justify-content: center;
  147. .title {
  148. color: #333;
  149. width: 100%;
  150. font-family: DM Sans;
  151. font-size: 40rpx;
  152. font-weight: 600;
  153. }
  154. .desc {
  155. color: rgba(102, 102, 102, 1);
  156. width: 100%;
  157. font-family: DM Sans;
  158. font-size: 24rpx;
  159. font-weight: 400;
  160. line-height: 32rpx;
  161. letter-spacing: 0.5%;
  162. text-align: left;
  163. padding: 20rpx 0;
  164. box-sizing: border-box;
  165. }
  166. .check-box {
  167. width: 100%;
  168. display: grid;
  169. grid-template-columns: repeat(2, 1fr);
  170. gap: 24rpx;
  171. .check-item {
  172. border-radius: 16rpx;
  173. background: rgba(245, 248, 254, 1);
  174. color: rgba(153, 153, 153, 1);
  175. font-family: DM Sans;
  176. font-size: 28rpx;
  177. font-weight: 400;
  178. line-height: 44rpx;
  179. text-align: center;
  180. padding: 12rpx 48rpx;
  181. box-sizing: border-box;
  182. transition: all 0.3s ease;
  183. }
  184. .is-check {
  185. box-sizing: border-box;
  186. border: 1rpx solid #016bf6;
  187. border-radius: 16rpx;
  188. background: rgba(252, 233, 220, 1);
  189. color: #016bf6;
  190. }
  191. }
  192. }
  193. }
  194. .submit-btn {
  195. flex-shrink: 0;
  196. border-radius: 999px;
  197. box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
  198. background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  199. color: rgba(255, 255, 255, 1);
  200. font-family: DM Sans;
  201. font-size: 32rpx;
  202. font-weight: 400;
  203. line-height: 48rpx;
  204. display: flex;
  205. justify-content: center;
  206. align-items: center;
  207. padding: 16rpx 32rpx;
  208. box-sizing: border-box;
  209. margin: 60rpx 20rpx;
  210. cursor: pointer;
  211. }
  212. }
  213. </style>