Browse Source
feat: 添加幸运大转盘功能并优化招聘租房模块
- 新增幸运大转盘营销功能，包含抽奖动画和奖品展示 - 优化招聘模块，支持编辑和删除功能 - 优化租房模块，支持编辑和删除功能 - 调整环境配置为开发模式 - 重构组件路径引用方式 - 更新页面路由配置master
12 changed files with 1117 additions and 42 deletions
Split View
Diff Options
-
+43 -1api/api.js
-
+0 -0components/list/renting/rentingItem.vue
-
+195 -0components/list/work/workItem.vue
-
+1 -1config.js
-
+8 -0pages.json
-
+21 -2pages/index/center.vue
-
+107 -0pages/index/index.vue
-
+1 -1pages_order/auth/wxLogin.vue
-
+447 -0pages_order/marketing/turntable.vue
-
+152 -12pages_order/renting/addRenting.vue
-
+1 -1pages_order/renting/rentingList.vue
-
+141 -24pages_order/work/addWork.vue
+ 43
- 1
api/api.js
View File
pages_order/components/list/renting/rentingItem.vue → components/list/renting/rentingItem.vue
View File
+ 195
- 0
components/list/work/workItem.vue
View File
| @ -0,0 +1,195 @@ | |||
| <template> | |||
| <view class="work-item" @click="$emit('click', item)"> | |||
| <view class="top"> | |||
| <view class="hire"> | |||
| <view class="Position"> | |||
| {{ item.title }} | |||
| </view> | |||
| </view> | |||
| <view class="index"> | |||
| <view class="Salary"> | |||
| <text v-if="item.minPrice">{{item.minPrice}}</text> | |||
| <!-- - --> | |||
| <!-- <text v-if="item.maxPrice">{{item.maxPrice}}元</text> --> | |||
| </view> | |||
| <!-- <view class="gang" | |||
| v-if="item.school"> | |||
| | | |||
| </view> --> | |||
| <!-- <view class="Cashregister" | |||
| v-if="item.school"> | |||
| {{item.school}} | |||
| </view> --> | |||
| <view class="gang" | |||
| v-if="item.workYear"> | |||
| | | |||
| </view> | |||
| <view class="Cashregister" | |||
| v-if="item.workYear"> | |||
| {{item.workYear}} | |||
| </view> | |||
| <template | |||
| v-for="(t, i) in item.iconText && item.iconText.split(',')"> | |||
| <view class="gang"> | |||
| | | |||
| </view> | |||
| <view class="Cashregister"> | |||
| {{t}} | |||
| </view> | |||
| </template> | |||
| </view> | |||
| <addressSpot | |||
| :address="item.address" | |||
| :latitude="item.latitude" | |||
| :longitude="item.longitude" | |||
| /> | |||
| <view class="address"> | |||
| <view class="shop"> | |||
| {{ item.company }} | |||
| </view> | |||
| <view class="authentication" | |||
| v-if="item.isCardOpen"> | |||
| <!-- 已认证 --> | |||
| {{ item.isCardOpen }} | |||
| </view> | |||
| </view> | |||
| <view class="bottom"> | |||
| <view class="festival" | |||
| v-if="item.iconTitle"> | |||
| <!-- 节假日福利 --> | |||
| {{ item.iconTitle }} | |||
| </view> | |||
| <!-- <view class="Apply" | |||
| @click.stop="callPhone"> | |||
| 应聘 | |||
| </view> --> | |||
| <callPhone | |||
| style="margin-left: auto;" | |||
| :phone="item.userPhone" | |||
| type="2" | |||
| :phoneTitle="item.title" | |||
| :pid="item.id" | |||
| title="应聘"/> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| props: { | |||
| item: { | |||
| default: {} | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| methods: { | |||
| callPhone() { | |||
| uni.makePhoneCall({ | |||
| phoneNumber: this.item.userPhone, | |||
| success() { | |||
| console.log('安卓拨打成功'); | |||
| }, | |||
| fail() { | |||
| console.log('安卓拨打失败'); | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .work-item { | |||
| background-color: #fff; | |||
| padding: 20rpx; | |||
| border-radius: 20rpx; | |||
| box-shadow: 0 0 6rpx 6rpx #00000011; | |||
| margin: 24rpx; | |||
| position: relative; | |||
| } | |||
| .hire { | |||
| display: flex; | |||
| align-items: center; | |||
| margin: 10rpx 0rpx; | |||
| } | |||
| .index { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| .Salary { | |||
| color: red; | |||
| } | |||
| .gang { | |||
| margin: 0rpx 25rpx 0rpx 25rpx; | |||
| color: $uni-color; | |||
| } | |||
| .Cashregister { | |||
| color: #888; | |||
| } | |||
| } | |||
| .address { | |||
| display: flex; | |||
| margin-top: 10rpx; | |||
| color: #fff; | |||
| .shop { | |||
| color: #888; | |||
| } | |||
| .authentication { | |||
| background-color: $uni-color; | |||
| margin-left: 10rpx; | |||
| padding: 5rpx 10rpx; | |||
| font-size: 25rpx; | |||
| flex-shrink: 0; | |||
| border-radius: 10rpx; | |||
| } | |||
| } | |||
| .bottom { | |||
| display: flex; | |||
| margin-top: 10rpx; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .festival { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| background-color: white; | |||
| color: $uni-color; | |||
| border: 1px solid $uni-color; | |||
| padding: 5rpx 10rpx; | |||
| border-radius: 10rpx; | |||
| font-size: 23rpx; | |||
| } | |||
| .Apply { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| padding: 10rpx 30rpx; | |||
| background-color: $uni-color; | |||
| color: #fff; | |||
| border-radius: 10rpx; | |||
| margin-left: auto; | |||
| } | |||
| } | |||
| </style> | |||
+ 1
- 1
config.js
View File
+ 8
- 0
pages.json
View File
+ 21
- 2
pages/index/center.vue
View File
+ 107
- 0
pages/index/index.vue
View File
+ 1
- 1
pages_order/auth/wxLogin.vue
View File
+ 447
- 0
pages_order/marketing/turntable.vue
View File
| @ -0,0 +1,447 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar leftClick | |||
| color="#fff" | |||
| bgColor="#667eea" | |||
| @leftClick="$utils.navigateBack" /> | |||
| <view class="turntable-container"> | |||
| <!-- 头部标题 --> | |||
| <view class="header"> | |||
| <text class="title">幸运大转盘</text> | |||
| <text class="subtitle">转一转，好运来！</text> | |||
| </view> | |||
| <!-- 转盘区域 --> | |||
| <view class="turntable-wrapper"> | |||
| <view class="turntable" :class="{ 'spinning': isSpinning }" :style="{ transform: `rotate(${rotateAngle}deg)` }"> | |||
| <!-- 使用纯CSS创建转盘 --> | |||
| <view class="wheel-bg"> | |||
| <!-- 8个扇形区域 --> | |||
| <view | |||
| v-for="(prize, index) in prizes" | |||
| :key="index" | |||
| class="wheel-sector" | |||
| :style="{ | |||
| backgroundColor: sectorColors[index], | |||
| transform: `rotate(${index * 45}deg)` | |||
| }" | |||
| > | |||
| </view> | |||
| </view> | |||
| <!-- 奖品文字覆盖层 --> | |||
| <view class="prizes-overlay"> | |||
| <view | |||
| v-for="(prize, index) in prizes" | |||
| :key="index" | |||
| class="prize-item" | |||
| :style="prizeStyles[index]" | |||
| > | |||
| <view class="prize-content"> | |||
| <text class="prize-icon">{{ prize.icon }}</text> | |||
| <text class="prize-name">{{ prize.name }}</text> | |||
| <text class="prize-value">{{ prize.value }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 中心指针 --> | |||
| <view class="pointer"> | |||
| <view class="pointer-triangle"></view> | |||
| </view> | |||
| <!-- 中心按钮 --> | |||
| <view class="center-button" @click="startSpin" :class="{ disabled: isSpinning }"> | |||
| <text class="button-text">{{ isSpinning ? '抽奖中...' : '开始抽奖' }}</text> | |||
| </view> | |||
| </view> | |||
| <!-- 抽奖结果弹窗 --> | |||
| <view class="result-modal" v-if="showResult" @click="closeResult"> | |||
| <view class="modal-content" @click.stop> | |||
| <text class="result-title">🎉 恭喜您 🎉</text> | |||
| <view class="result-prize"> | |||
| <text class="result-icon">{{ currentPrize.icon }}</text> | |||
| <text class="result-name">{{ currentPrize.name }}</text> | |||
| <text class="result-value">{{ currentPrize.value }}</text> | |||
| </view> | |||
| <view class="result-actions"> | |||
| <button class="confirm-btn" @click="closeResult">确定</button> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 抽奖次数提示 --> | |||
| <view class="spin-info"> | |||
| <text>今日剩余抽奖次数: {{ remainingSpins }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| // 奖品配置 | |||
| prizes: [ | |||
| { name: '现金奖励', value: '¥10', icon: '💰', type: 'money', amount: 10 }, | |||
| { name: '精美礼品', value: '小熊', icon: '🧸', type: 'gift', item: 'teddy_bear' }, | |||
| { name: '现金奖励', value: '¥5', icon: '💰', type: 'money', amount: 5 }, | |||
| { name: '精美礼品', value: '花束', icon: '💐', type: 'gift', item: 'flowers' }, | |||
| { name: '现金奖励', value: '¥20', icon: '💰', type: 'money', amount: 20 }, | |||
| { name: '精美礼品', value: '巧克力', icon: '🍫', type: 'gift', item: 'chocolate' }, | |||
| { name: '现金奖励', value: '¥2', icon: '💰', type: 'money', amount: 2 }, | |||
| { name: '精美礼品', value: '香水', icon: '🌸', type: 'gift', item: 'perfume' } | |||
| ], | |||
| sectorColors: [ | |||
| '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', | |||
| '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F' | |||
| ], | |||
| isSpinning: false, // 是否正在旋转 | |||
| rotateAngle: 0, // 旋转角度 | |||
| showResult: false, // 显示结果弹窗 | |||
| currentPrize: null, // 当前中奖奖品 | |||
| remainingSpins: 3, // 剩余抽奖次数 | |||
| sectorAngle: 45, // 每个扇形的角度 (360/8) | |||
| // 预计算奖品位置样式 | |||
| prizeStyles: [] | |||
| } | |||
| }, | |||
| onLoad() { | |||
| this.calculatePrizeStyles() | |||
| }, | |||
| methods: { | |||
| // 计算奖品位置样式 | |||
| calculatePrizeStyles() { | |||
| this.prizeStyles = this.prizes.map((prize, index) => { | |||
| // 计算奖品在圆形中的位置 | |||
| const angle = (index * 45 + 22.5) * Math.PI / 180; // 转换为弧度，22.5是偏移到扇形中心 | |||
| const radius = 150; // 奖品距离中心的距离 | |||
| const x = Math.cos(angle - Math.PI/2) * radius; // 减去90度，因为我们希望0度在顶部 | |||
| const y = Math.sin(angle - Math.PI/2) * radius; | |||
| return `left: calc(50% + ${x}rpx); top: calc(50% + ${y}rpx); transform: translate(-50%, -50%);` | |||
| }) | |||
| }, | |||
| // 开始抽奖 | |||
| startSpin() { | |||
| if (this.isSpinning || this.remainingSpins <= 0) { | |||
| if (this.remainingSpins <= 0) { | |||
| uni.showToast({ | |||
| title: '今日抽奖次数已用完', | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| return | |||
| } | |||
| this.isSpinning = true | |||
| this.remainingSpins-- | |||
| // 随机选择奖品 | |||
| const prizeIndex = Math.floor(Math.random() * this.prizes.length) | |||
| this.currentPrize = this.prizes[prizeIndex] | |||
| // 计算旋转角度 | |||
| // 每个扇形45度，指针指向扇形中心需要额外旋转22.5度 | |||
| const targetAngle = 360 - (prizeIndex * this.sectorAngle + this.sectorAngle / 2) | |||
| const spinRounds = 5 // 转5圈 | |||
| const finalAngle = this.rotateAngle + spinRounds * 360 + targetAngle | |||
| this.rotateAngle = finalAngle | |||
| // 动画结束后显示结果 | |||
| setTimeout(() => { | |||
| this.isSpinning = false | |||
| this.showResult = true | |||
| this.handlePrizeResult() | |||
| }, 3000) | |||
| }, | |||
| // 处理中奖结果 | |||
| handlePrizeResult() { | |||
| if (this.currentPrize.type === 'money') { | |||
| // 处理现金奖励 | |||
| console.log(`获得现金奖励: ${this.currentPrize.amount}元`) | |||
| // 这里可以调用API增加用户余额 | |||
| } else if (this.currentPrize.type === 'gift') { | |||
| // 处理礼品奖励 | |||
| console.log(`获得礼品: ${this.currentPrize.item}`) | |||
| // 这里可以调用API添加礼品到用户背包 | |||
| } | |||
| }, | |||
| // 关闭结果弹窗 | |||
| closeResult() { | |||
| this.showResult = false | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .turntable-container { | |||
| min-height: 100vh; | |||
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |||
| padding: 40rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| } | |||
| .header { | |||
| text-align: center; | |||
| margin-bottom: 60rpx; | |||
| color: white; | |||
| .title { | |||
| font-size: 48rpx; | |||
| font-weight: bold; | |||
| display: block; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .subtitle { | |||
| font-size: 28rpx; | |||
| opacity: 0.9; | |||
| } | |||
| } | |||
| .turntable-wrapper { | |||
| position: relative; | |||
| width: 600rpx; | |||
| height: 600rpx; | |||
| margin-bottom: 60rpx; | |||
| } | |||
| .turntable { | |||
| width: 100%; | |||
| height: 100%; | |||
| border-radius: 50%; | |||
| position: relative; | |||
| transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1); | |||
| box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.3); | |||
| overflow: hidden; | |||
| &.spinning { | |||
| transition-duration: 3s; | |||
| } | |||
| } | |||
| .wheel-bg { | |||
| position: absolute; | |||
| width: 100%; | |||
| height: 100%; | |||
| border-radius: 50%; | |||
| overflow: hidden; | |||
| } | |||
| .wheel-sector { | |||
| position: absolute; | |||
| width: 50%; | |||
| height: 50%; | |||
| top: 0%; | |||
| left: 50%; | |||
| transform-origin: 0% 100%; | |||
| &::before { | |||
| content: ''; | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| background: inherit; | |||
| clip-path: polygon(0% 100%, 50% 0%, 100% 100%); | |||
| } | |||
| // 添加边框线 | |||
| &::after { | |||
| content: ''; | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| border-right: 2rpx solid rgba(255,255,255,0.3); | |||
| transform-origin: 0% 100%; | |||
| } | |||
| } | |||
| .prizes-overlay { | |||
| position: absolute; | |||
| width: 100%; | |||
| height: 100%; | |||
| top: 0; | |||
| left: 0; | |||
| z-index: 990; | |||
| } | |||
| .prize-item { | |||
| position: absolute; | |||
| width: 120rpx; | |||
| height: 80rpx; | |||
| z-index: 10; | |||
| } | |||
| .prize-content { | |||
| width: 100%; | |||
| height: 100%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| text-align: center; | |||
| color: white; | |||
| text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.8); | |||
| .prize-icon { | |||
| font-size: 32rpx; | |||
| display: block; | |||
| margin-bottom: 4rpx; | |||
| } | |||
| .prize-name { | |||
| font-size: 18rpx; | |||
| display: block; | |||
| font-weight: bold; | |||
| margin-bottom: 2rpx; | |||
| line-height: 1.2; | |||
| } | |||
| .prize-value { | |||
| font-size: 20rpx; | |||
| display: block; | |||
| font-weight: bold; | |||
| line-height: 1.2; | |||
| } | |||
| } | |||
| .pointer { | |||
| position: absolute; | |||
| top: -20rpx; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| z-index: 100; | |||
| .pointer-triangle { | |||
| width: 0; | |||
| height: 0; | |||
| border-left: 20rpx solid transparent; | |||
| border-right: 20rpx solid transparent; | |||
| border-top: 60rpx solid #FF4757; | |||
| filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3)); | |||
| } | |||
| } | |||
| .center-button { | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| width: 160rpx; | |||
| height: 160rpx; | |||
| border-radius: 50%; | |||
| background: linear-gradient(145deg, #FF6B6B, #FF4757); | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| box-shadow: 0 8rpx 20rpx rgba(255, 71, 87, 0.4); | |||
| z-index: 50; | |||
| transition: transform 0.2s; | |||
| &:active:not(.disabled) { | |||
| transform: translate(-50%, -50%) scale(0.95); | |||
| } | |||
| &.disabled { | |||
| opacity: 0.6; | |||
| cursor: not-allowed; | |||
| } | |||
| .button-text { | |||
| color: white; | |||
| font-size: 24rpx; | |||
| font-weight: bold; | |||
| text-align: center; | |||
| } | |||
| } | |||
| .result-modal { | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100vw; | |||
| height: 100vh; | |||
| background: rgba(0, 0, 0, 0.7); | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| z-index: 1000; | |||
| .modal-content { | |||
| background: white; | |||
| border-radius: 20rpx; | |||
| padding: 60rpx 40rpx; | |||
| text-align: center; | |||
| box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3); | |||
| min-width: 500rpx; | |||
| .result-title { | |||
| font-size: 36rpx; | |||
| font-weight: bold; | |||
| color: #FF6B6B; | |||
| margin-bottom: 40rpx; | |||
| } | |||
| .result-prize { | |||
| margin-bottom: 40rpx; | |||
| .result-icon { | |||
| font-size: 60rpx; | |||
| display: block; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .result-name { | |||
| font-size: 32rpx; | |||
| color: #333; | |||
| display: block; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .result-value { | |||
| font-size: 36rpx; | |||
| color: #FF6B6B; | |||
| font-weight: bold; | |||
| } | |||
| } | |||
| .confirm-btn { | |||
| background: linear-gradient(45deg, #FF6B6B, #FF4757); | |||
| color: white; | |||
| border: none; | |||
| border-radius: 40rpx; | |||
| padding: 20rpx 60rpx; | |||
| font-size: 28rpx; | |||
| font-weight: bold; | |||
| } | |||
| } | |||
| } | |||
| .spin-info { | |||
| text-align: center; | |||
| color: white; | |||
| font-size: 28rpx; | |||
| background: rgba(255, 255, 255, 0.2); | |||
| padding: 20rpx 40rpx; | |||
| border-radius: 40rpx; | |||
| backdrop-filter: blur(10rpx); | |||
| } | |||
| </style> | |||