root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 3 weeks ago
parent
e97204839a
commit
da8736b52a
1 changed files with 241 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 253
      pages/index/index.vue

253
pages/index/index.vue
View File

@ -103,7 +103,7 @@
<view class="world-dot world-dot-a"></view> <view class="world-dot world-dot-a"></view>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png" <img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png"
alt="" /> alt="" />
<view class="menu-name">跑腿星环</view> <view class="menu-name">跑腿星球</view>
<view class="menu-desc">小事接力</view> <view class="menu-desc">小事接力</view>
</view> </view>
<view class="menu-list world-food" @tap="goDetail('2')" style="position: relative;"> <view class="menu-list world-food" @tap="goDetail('2')" style="position: relative;">
@ -128,24 +128,24 @@
<view class="world-dot world-dot-c"></view> <view class="world-dot world-dot-c"></view>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png" <img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png"
alt="" /> alt="" />
<view class="menu-name">幸运研究所</view> <view class="menu-name">白嫖星球</view>
<view class="menu-desc">抽点惊喜</view> <view class="menu-desc">抽点惊喜</view>
</view> </view>
<view class="menu-list world-fish" @tap="goDetail('5')"> <view class="menu-list world-fish" @tap="goDetail('5')">
<view class="world-light"></view> <view class="world-light"></view>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png" <img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png"
alt="" /> alt="" />
<view class="menu-name">i/e基地</view> <view class="menu-name">i/e星球</view>
<view class="menu-desc">思想漂流</view> <view class="menu-desc">思想漂流</view>
</view> </view>
</view> </view>
<view class="like-box"> <view class="like-box">
<view class="like-head" style="position: relative;"> <view class="like-head" style="position: relative;">
<view class="like-title"> <view class="like-title">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png" <img @tap="pageshow" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png"
alt="" /> alt="" />
</view> </view>
<view class="seckill-entry" @tap="goSeckillGroup" style="top: 4rpx;"> <view class="seckill-entry" @tap="goSeckillGroup">
<view class="heat-dot heat-dot-a"></view> <view class="heat-dot heat-dot-a"></view>
<view class="heat-dot heat-dot-b"></view> <view class="heat-dot heat-dot-b"></view>
<view class="seckill-entry-light"></view> <view class="seckill-entry-light"></view>
@ -502,15 +502,34 @@
</view> </view>
</view> </view>
<!-- 弹出区域选择 --> <!-- 弹出区域选择 -->
<uni-popup ref="areaPopup" :is-mask-click="false" background-color="#fff"> <uni-popup ref="areaPopup" :is-mask-click="false" background-color="transparent">
<view class="popup-area-content"> <view class="campus-area-popup">
<view class="popup-area-title"> <view class="area-popup-glow area-popup-glow-a"></view>
<text>请选择 所属区域</text> <view class="area-popup-glow area-popup-glow-b"></view>
<view class="campus-area-header">
<view class="campus-area-kicker">选择你的校园半径</view>
<view class="campus-area-title">你现在在哪个校区？</view>
<view class="campus-area-subtitle">选定后，会优先展示附近同学正在拼的内容。</view>
</view> </view>
<view class="popup-area-container" v-for="(item,index) in areaList" :key="index" <view class="campus-area-search">
@tap="onClickArea(item)"> <text class="area-search-icon">⌕</text>
<text style="display: inline-block">{{item.title}}</text> <input v-model="areaKeyword" confirm-type="search" placeholder="搜索学校 / 校区 / 区域"
placeholder-class="area-search-placeholder" />
</view> </view>
<scroll-view scroll-y class="campus-area-list">
<view class="campus-area-item" v-for="(item,index) in filteredAreaList" :key="index"
@tap="onClickArea(item)">
<view class="area-item-main">
<view class="area-item-dot"></view>
<text>{{item.title}}</text>
</view>
<view class="area-item-action">进入</view>
</view>
<view class="campus-area-empty" v-if="filteredAreaList.length === 0">
<view class="area-empty-title">没找到这个校区</view>
<view class="area-empty-desc">换个关键词试试，比如学校简称或区域名</view>
</view>
</scroll-view>
</view> </view>
</uni-popup> </uni-popup>
<!-- 弹出区域选择 --> <!-- 弹出区域选择 -->
@ -709,6 +728,7 @@
}], }],
dataList: [], dataList: [],
areaList: [], areaList: [],
areaKeyword: '',
orderLists: [], orderLists: [],
waimaiCount: 0, waimaiCount: 0,
kuaidiCount: 0, kuaidiCount: 0,
@ -772,6 +792,16 @@
postList, postList,
myCenter myCenter
}, },
computed: {
filteredAreaList() {
const keyword = this.areaKeyword.trim().toLowerCase()
if (!keyword) return this.areaList
return this.areaList.filter((item) => {
const title = item.title ? String(item.title).toLowerCase() : ''
return title.indexOf(keyword) > -1
})
}
},
filters: { filters: {
formatHourMinute(value) { formatHourMinute(value) {
if (!value) return ''; if (!value) return '';
@ -1005,6 +1035,9 @@
this.swipeOrder.thumbStyle = 'left: ' + progressValue + '; transform: translateX(-' + progressValue + ');' this.swipeOrder.thumbStyle = 'left: ' + progressValue + '; transform: translateX(-' + progressValue + ');'
}, },
noop() {}, noop() {},
pageshow(){
this.$refs.pagesPopup.open()
},
getOrder(item, index) { getOrder(item, index) {
let that = this let that = this
@ -1196,6 +1229,8 @@
}, },
onClickArea(item) { onClickArea(item) {
uni.setStorageSync('area', JSON.stringify(item)) uni.setStorageSync('area', JSON.stringify(item))
this.areaName = item.title
this.areaKeyword = ''
this.searchForm.regionId = item.id this.searchForm.regionId = item.id
this.getDelivery(); this.getDelivery();
this.getShopArea(); this.getShopArea();
@ -1221,6 +1256,7 @@
this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => { this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.areaList = res.result this.areaList = res.result
this.areaKeyword = ''
this.$refs.areaPopup.open(); this.$refs.areaPopup.open();
} else { } else {
this.tui.toast(res.message) this.tui.toast(res.message)
@ -3149,6 +3185,199 @@
padding: 0 10px; padding: 0 10px;
} }
.campus-area-popup {
position: relative;
box-sizing: border-box;
width: 650rpx;
min-height: 620rpx;
max-height: 78vh;
overflow: hidden;
padding: 38rpx 30rpx 30rpx;
border: 1rpx solid rgba(255, 255, 255, 0.78);
border-radius: 42rpx;
background:
radial-gradient(circle at 16% 8%, rgba(227, 255, 150, 0.34), rgba(227, 255, 150, 0) 220rpx),
radial-gradient(circle at 92% 18%, rgba(166, 255, 234, 0.44), rgba(166, 255, 234, 0) 260rpx),
rgba(255, 255, 255, 0.92);
box-shadow: 0 30rpx 86rpx rgba(7, 61, 51, 0.18);
backdrop-filter: blur(24rpx);
}
.area-popup-glow {
position: absolute;
border-radius: 999rpx;
pointer-events: none;
}
.area-popup-glow-a {
top: -82rpx;
right: -68rpx;
width: 230rpx;
height: 230rpx;
background: rgba(166, 255, 234, 0.46);
filter: blur(10rpx);
}
.area-popup-glow-b {
left: -56rpx;
bottom: 82rpx;
width: 180rpx;
height: 180rpx;
background: rgba(227, 255, 150, 0.34);
filter: blur(14rpx);
}
.campus-area-header {
position: relative;
z-index: 1;
text-align: center;
}
.campus-area-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44rpx;
padding: 0 22rpx;
border: 1rpx solid rgba(255, 255, 255, 0.82);
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 0.72), rgba(166, 255, 234, 0.72));
box-shadow: 0 10rpx 26rpx rgba(13, 114, 82, 0.1);
color: #073d33;
font-size: 22rpx;
font-weight: 700;
}
.campus-area-title {
margin-top: 22rpx;
color: #073d33;
font-size: 38rpx;
font-weight: 900;
line-height: 1.25;
}
.campus-area-subtitle {
width: 500rpx;
margin: 12rpx auto 0;
color: rgba(7, 61, 51, 0.52);
font-size: 23rpx;
line-height: 1.5;
}
.campus-area-search {
position: relative;
z-index: 1;
display: flex;
align-items: center;
height: 82rpx;
margin-top: 30rpx;
padding: 0 26rpx;
border: 1rpx solid rgba(7, 61, 51, 0.06);
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.72);
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92), 0 14rpx 34rpx rgba(7, 61, 51, 0.08);
}
.area-search-icon {
margin-right: 14rpx;
color: rgba(7, 61, 51, 0.5);
font-size: 34rpx;
font-weight: 700;
}
.campus-area-search input {
flex: 1;
height: 82rpx;
color: #073d33;
font-size: 27rpx;
}
.area-search-placeholder {
color: rgba(7, 61, 51, 0.34);
}
.campus-area-list {
position: relative;
z-index: 1;
height: 360rpx;
max-height: 610rpx;
margin-top: 24rpx;
}
.campus-area-item {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 92rpx;
margin-bottom: 16rpx;
padding: 0 18rpx 0 24rpx;
border: 1rpx solid rgba(255, 255, 255, 0.78);
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.66);
box-shadow: 0 12rpx 30rpx rgba(7, 61, 51, 0.07);
color: #073d33;
}
.campus-area-item:active {
transform: scale(0.985);
opacity: 0.9;
}
.area-item-main {
display: flex;
align-items: center;
min-width: 0;
font-size: 28rpx;
font-weight: 800;
}
.area-item-main text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.area-item-dot {
flex-shrink: 0;
width: 16rpx;
height: 16rpx;
margin-right: 16rpx;
border-radius: 50%;
background: linear-gradient(135deg, #e3ff96, #a6ffea);
box-shadow: 0 0 18rpx rgba(13, 114, 82, 0.22);
}
.area-item-action {
flex-shrink: 0;
height: 50rpx;
margin-left: 18rpx;
padding: 0 22rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 0.95), rgba(166, 255, 234, 0.95));
box-shadow: 0 10rpx 24rpx rgba(13, 114, 82, 0.14), 0 0 22rpx rgba(166, 255, 234, 0.42);
color: #073d33;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
}
.campus-area-empty {
padding: 70rpx 0 56rpx;
text-align: center;
}
.area-empty-title {
color: #073d33;
font-size: 28rpx;
font-weight: 800;
}
.area-empty-desc {
margin-top: 12rpx;
color: rgba(7, 61, 51, 0.45);
font-size: 23rpx;
}
.chaoda { .chaoda {
height: 30rpx; height: 30rpx;
line-height: 30rpx; line-height: 30rpx;

Write Preview
Loading…
Cancel
Save