173 lines
3.3 KiB
Vue
173 lines
3.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 手机号输入区 -->
|
||
<view class="input-row">
|
||
<input
|
||
v-model="phone"
|
||
class="phone-input"
|
||
type="number"
|
||
placeholder="请输入正确的手机号"
|
||
maxlength="11"
|
||
@input="onPhoneInput"
|
||
/>
|
||
<button class="next-btn" :disabled="!phoneValid" @click="goNext">下一步</button>
|
||
</view>
|
||
<view class="hint-row">
|
||
<text class="hint-icon">ⓘ</text>
|
||
<text class="hint-text">您正在尝试将视频分享至其他人</text>
|
||
</view>
|
||
|
||
<!-- 最近分享 -->
|
||
<view class="section-title">最近分享</view>
|
||
<view class="recent-list">
|
||
<view
|
||
v-for="item in recentList"
|
||
:key="item.id"
|
||
class="recent-item"
|
||
@click="selectRecent(item)"
|
||
>
|
||
<text class="recent-phone">{{ item.phone }}</text>
|
||
<view class="arrow">›</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
phone: '',
|
||
// 最近分享记录（实际对接API）
|
||
recentList: [
|
||
{ id: 1, phone: '132*****131' },
|
||
{ id: 2, phone: '156*****228' },
|
||
{ id: 3, phone: '183*****326' },
|
||
{ id: 4, phone: '155*****330' },
|
||
{ id: 5, phone: '150*****639' }
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
phoneValid() {
|
||
return /^1\d{10}$/.test(this.phone)
|
||
}
|
||
},
|
||
methods: {
|
||
onPhoneInput(e) {
|
||
this.phone = e.detail.value
|
||
},
|
||
selectRecent(item) {
|
||
this.phone = item.phone
|
||
this.goNext()
|
||
},
|
||
goNext() {
|
||
if (!this.phoneValid) {
|
||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pages/home/invite/selectDevice/index?phone=${this.phone}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: radial-gradient(circle at top, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
|
||
}
|
||
|
||
.page {
|
||
padding: 30rpx;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 输入行 */
|
||
.input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #3d7ff5;
|
||
|
||
.phone-input {
|
||
flex: 1;
|
||
height: 90rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
background: transparent;
|
||
}
|
||
|
||
.next-btn {
|
||
width: 180rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
background: #3d7ff5;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 0;
|
||
border: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* 提示 */
|
||
.hint-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
padding-left: 4rpx;
|
||
|
||
.hint-icon {
|
||
color: #aaa;
|
||
font-size: 26rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.hint-text {
|
||
font-size: 24rpx;
|
||
color: #aaa;
|
||
}
|
||
}
|
||
|
||
/* 最近分享 */
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin: 36rpx 0 16rpx;
|
||
}
|
||
|
||
.recent-list {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.recent-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 28rpx;
|
||
border-bottom: 1rpx solid #f2f2f2;
|
||
|
||
&:last-child { border-bottom: none; }
|
||
|
||
.recent-phone {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.arrow {
|
||
color: #ccc;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|