576 lines
14 KiB
Vue
576 lines
14 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="拼桌" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
||
title-size='36' height='36' id="navbar">
|
||
</u-navbar>
|
||
<view class="tab">
|
||
<view class="top">
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uGaLZEBgL84ajaRfZ3Ja" mode=""></image>深度酒吧
|
||
</view>
|
||
<view class="" style="color: #B8B8B8;text-decoration: underline;" @click="btnjilu">
|
||
我的记录
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view :class="tabindex == 1 ? 'active' : ''" @click="btntab(1)">
|
||
现场拼桌
|
||
<view class="" v-if="tabindex == 1"></view>
|
||
</view>
|
||
<view :class="tabindex == 2 ? 'active' : ''" @click="btntab(2)">
|
||
预约拼桌
|
||
<view class="" v-if="tabindex == 2"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bd" v-if="dateflag" @click="btnchaxun">
|
||
<view class="bdtop">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uFfH3gMS0VJVIvFPFzRR" class="bj" mode=""></image>
|
||
<view class="fabu">
|
||
发布拼桌，找人一起玩
|
||
</view>
|
||
<view class="myxx">
|
||
<view class="myimg">
|
||
<image class="tx" :src="teamobj.sponsorAvatar == null ? 'https://api.ccttiot.com/smartmeter/img/static/uykK7yDBpbUQoLZFZlXo' : teamobj.sponsorAvatar" mode=""></image>
|
||
<image class="xb" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
|
||
<image class="xb" src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
|
||
</view>
|
||
<view class="myname">
|
||
<view class="wo">
|
||
<text v-if="teamtwoobj.userId == teamobj.sponsorId">我</text> {{teamobj.name}}
|
||
</view>
|
||
<view class="zhuohao">
|
||
当前桌号：{{teamobj.boothName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bdbot">
|
||
<view class="lt">
|
||
正在拼 : {{ dots }}
|
||
</view>
|
||
<view class="cen">
|
||
（ <text>{{teamobj.currentNum}}</text> / {{teamobj.limitNum == null ? 0 : teamobj.limitNum}} · <text>拼桌成功</text> ）
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uYtfNn24hW5c7V1upB2T" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="yuyue" v-else @click="btnfabu">
|
||
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uKUaflogbDvZoaRlGXhL" mode=""></image>
|
||
<view class="wenzi">
|
||
<view class="top">
|
||
发布拼桌，找人一起玩
|
||
</view>
|
||
<view class="duoshao">
|
||
<view class="img">
|
||
<image v-for="(img, index) in randomImages" :key="index" :src="img" mode=""></image>
|
||
</view>
|
||
<text style="margin-left: 30rpx;">快来一起发起拼桌吧</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="xzname">
|
||
{{tabindex == 1 ? '现成拼桌池' : '预约拼桌池'}}
|
||
</view>
|
||
<view class="list">
|
||
<view class="item_list" v-for="(item,index) in pinzhuolist" :key="index">
|
||
<view class="top">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="myxx">
|
||
<view class="myimg">
|
||
<image class="tx" :src="item.sponsorAvatar" mode=""></image>
|
||
<image v-if="item.sponsorSex == 1" class="xb" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
|
||
<image v-if="item.sponsorSex == 0" class="xb" src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
|
||
</view>
|
||
<view class="myname">
|
||
<view class="wo" v-if="user.userId == item.sponsorId">
|
||
<text>我</text> {{item.sponsorName}}
|
||
</view>
|
||
<view class="zhuohao">
|
||
桌号：{{item.boothName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="jairu">
|
||
<image :src="i" mode=""></image>
|
||
已加{{item.currentNum == null ? '0' : item.currentNum}}人 | 剩余<text style="color: #FF8998;">{{Number(item.limitNum == null ? 0 : item.limitNum) - Number(item.currentNum == null ? 0 : item.currentNum)}}</text>人
|
||
</view>
|
||
<view class="jairu">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uQJLuuCQzeAGrFQ995Nm" mode=""></image>
|
||
{{item.prefer == 1 ? '偏好男性' : item.prefer == 2 ? '偏好女性' : '男女不限'}}
|
||
</view>
|
||
<!-- <view class="anniu">
|
||
进入群聊
|
||
</view> -->
|
||
<view class="anniu" v-if="dateflag" style="background-color: #ccc;color: #fff;" @click="btnjrpz(item)">
|
||
加入拼桌
|
||
</view>
|
||
<view class="anniu" v-else style="background-color: #FF8998;color: #fff;" @click="btnjrpz(item)">
|
||
加入拼桌
|
||
</view>
|
||
</view>
|
||
<view class="wu" style="width: 480rpx;height: 370rpx;margin: auto;margin-top: 80rpx;" v-if="pinzhuolist.length == 0">
|
||
<image style="width: 480rpx;height: 370rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uQziwcKvCYhaHoaw5u93" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#010000",
|
||
},
|
||
tabindex:1,
|
||
pinzhuolist:[],
|
||
user:'',
|
||
teamobj:{},
|
||
teamtwoobj:{},
|
||
dateflag:false,
|
||
dots: '.',
|
||
timer: null,
|
||
// 添加所有可选的图片数组
|
||
allImages: [
|
||
'https://api.ccttiot.com/smartmeter/img/static/uW6Nsdsbk3cm0JZcYdZ3',
|
||
'https://api.ccttiot.com/smartmeter/img/static/u7ZMnMLrVfVloU1aQqlk',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uL3sR8uy6FQGX1WJlcuc',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uXnB3jfIGCwoAIGcNPsC',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uMo03QdTdngUdZXCXZLx',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uVbSWjNqRhZPiho4AIiJ',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uac9z9s7LPIMjidGwEUU',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uJPWutuFYeOejOAXn8FI',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uc95pV4gpCPfacUT56Sb',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uw3LumlMvIFxoR46Nk2M',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uWWUYfXUOpWsDGKO2cXT',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uuMZ9EM9dNIxvJJQ8PyG',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uAgBadpkh4G5w2ICo3Ri',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uQbjOPxJQsghlY79wutq',
|
||
'https://api.ccttiot.com/smartmeter/img/static/u2ZFV9n4icW2oQr3rXPj',
|
||
'https://api.ccttiot.com/smartmeter/img/static/ulR8mk1SEOghBK40NV6a',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uJpyxbAjX1iI0qRfXxHj',
|
||
'https://api.ccttiot.com/smartmeter/img/static/uoxy6mhPIFyO2ojpEPNW',
|
||
],
|
||
// 随机选择的4张图片
|
||
randomImages: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getdangqian()
|
||
this.getinfo()
|
||
this.getlist()
|
||
this.getRandomImages() // 添加获取随机图片的调用
|
||
},
|
||
mounted() {
|
||
this.timer = setInterval(() => {
|
||
this.dots = this.dots.length >= 3 ? '.' : this.dots + '.'
|
||
}, 500)
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
// 查询是否有拼桌
|
||
getdangqian(){
|
||
this.$u.get(`/app/team/myTeam`).then(res => {
|
||
if (res.code == 200) {
|
||
this.teamtwoobj = res.data
|
||
if (res.data) {
|
||
this.teamobj = res.data.team
|
||
this.dateflag = true
|
||
}else{
|
||
this.dateflag = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取个人信息
|
||
getinfo(){
|
||
this.$u.get(`/getInfo`).then(res => {
|
||
if (res.code == 200) {
|
||
this.user = res.user
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转到发布拼桌
|
||
btnfabu(){
|
||
uni.navigateTo({
|
||
url:'/page_user/pingzhuo/cjpinzhuo?type=' + this.tabindex
|
||
})
|
||
},
|
||
// 请求拼桌列表
|
||
getlist(){
|
||
this.$u.get(`/app/team/getTeamList?pageNum=1&pageSize=99&type=${this.tabindex}`).then(res =>{
|
||
if(res.code == 200){
|
||
this.pinzhuolist = res.rows
|
||
}
|
||
})
|
||
},
|
||
// 点击切换tab
|
||
btntab(num){
|
||
this.tabindex = num
|
||
this.getlist()
|
||
},
|
||
// 点击我的记录
|
||
btnjilu(){
|
||
uni.navigateTo({
|
||
url:'/page_user/pingzhuo/jilu?userid=' + this.user.userId
|
||
})
|
||
},
|
||
// 点击进入我的拼桌详情
|
||
btnchaxun(){
|
||
uni.navigateTo({
|
||
url:'/page_user/pingzhuo/zhuozixq?teamId=' + this.teamobj.id
|
||
})
|
||
},
|
||
// 点击加入拼桌
|
||
btnjrpz(item){
|
||
this.$u.post(`/app/team/joinTeam?teamId=${item.id}`).then(res =>{
|
||
if(res.code == 200){
|
||
uni.navigateTo({
|
||
url:'/page_user/pingzhuo/zhuozixq?teamId=' + item.id
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取随机图片
|
||
getRandomImages() {
|
||
// 复制原数组
|
||
let tempArray = [...this.allImages]
|
||
// 随机选择4张图片
|
||
this.randomImages = []
|
||
for(let i = 0; i < 4; i++) {
|
||
if(tempArray.length > 0) {
|
||
const randomIndex = Math.floor(Math.random() * tempArray.length)
|
||
this.randomImages.push(tempArray[randomIndex])
|
||
tempArray.splice(randomIndex, 1)
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #010000;
|
||
padding-bottom: 50rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.active{
|
||
font-weight: 600;
|
||
font-size: 32rpx !important;
|
||
color: #FFFFFF !important;
|
||
}
|
||
.yuyue{
|
||
width: 700rpx;
|
||
height: 202rpx;
|
||
position: relative;
|
||
margin: auto;
|
||
margin-top: 42rpx;
|
||
.wenzi{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 36rpx 32rpx;
|
||
box-sizing: border-box;
|
||
.top{
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.duoshao{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 44rpx;
|
||
.img{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
border-radius: 50%;
|
||
margin-left: -10rpx;
|
||
filter: blur(10px);
|
||
-webkit-filter: blur(1px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bj{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 700rpx;
|
||
height: 202rpx;
|
||
}
|
||
}
|
||
.list{
|
||
width: 100%;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.item_list{
|
||
width: 340rpx;
|
||
height: 344rpx;
|
||
background: #1C1C1E;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
padding: 26rpx 22rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 22rpx;
|
||
.anniu{
|
||
width: 296rpx;
|
||
height: 56rpx;
|
||
background: #322C2D;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #FF8998;
|
||
text-align: center;
|
||
line-height: 56rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
.top{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.jairu{
|
||
margin-top: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
font-size: 22rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.myxx{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 26rpx;
|
||
.myname{
|
||
.zhuohao{
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.wo{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: linear-gradient( 135deg, #76FF8E 0%, #BAFFE5 100%);
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
font-size: 16rpx;
|
||
color: #1D5013;
|
||
text-align: center;
|
||
line-height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.myimg{
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
.tx{
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.xb{
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.xzname{
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
width: 700rpx;
|
||
margin: auto;
|
||
margin-top: 42rpx;
|
||
}
|
||
.bd{
|
||
width: 700rpx;
|
||
height: 284rpx;
|
||
margin: auto;
|
||
margin-top: 42rpx;
|
||
position: relative;
|
||
.bdbot{
|
||
position: absolute;
|
||
bottom:0;
|
||
left: 0;
|
||
width: 700rpx;
|
||
height: 82rpx;
|
||
background: #1C1C1E;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items:center;
|
||
padding: 26rpx 40rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 0 0 24rpx 24rpx;
|
||
.lt{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
width: 200rpx;
|
||
}
|
||
.cen{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text{
|
||
color: #FF8998;
|
||
}
|
||
}
|
||
.rt{
|
||
image{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.bdtop{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 36rpx 32rpx;
|
||
box-sizing: border-box;
|
||
.myxx{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 26rpx;
|
||
.myname{
|
||
.zhuohao{
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.wo{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: linear-gradient( 135deg, #76FF8E 0%, #BAFFE5 100%);
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
font-size: 16rpx;
|
||
color: #1D5013;
|
||
text-align: center;
|
||
line-height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.myimg{
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
.tx{
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.xb{
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
.fabu{
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.bj{
|
||
width: 700rpx;
|
||
height: 202rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
}
|
||
.tab{
|
||
width: 750rpx;
|
||
height: 180rpx;
|
||
background: #1C1C1E;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
padding-top: 24rpx;
|
||
padding-left: 52rpx;
|
||
padding-right: 52rpx;
|
||
padding-bottom: 28rpx;
|
||
margin-top: 28rpx;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
.bot{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 140rpx;
|
||
box-sizing: border-box;
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
margin-top: 38rpx;
|
||
view{
|
||
view{
|
||
width: 40rpx;
|
||
height: 6rpx;
|
||
background: #FF8998;
|
||
border-radius: 5rpx 5rpx 5rpx 5rpx;
|
||
margin: auto;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
view{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |