649 lines
16 KiB
Vue
649 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 领主信息展示区域 - 显示当前领主的头像、昵称和占领信息 -->
|
||
<view class="lingzhu center" v-if="localBossCardData && localBossCardData.king_user">
|
||
<view class="lingzhu-img relative ml30">
|
||
<image :src="localBossCardData.king_user.headimg" mode="aspectFill"></image>
|
||
<image :src="$img1('index/king.png')"></image>
|
||
</view>
|
||
<view class="lingzhu-content ml30 flex-1">
|
||
<view class="">{{ localBossCardData.king_user.nickname }}</view>
|
||
<view class="">
|
||
第
|
||
<text>{{ localBossCardData.king_user.count }}</text>
|
||
发晋升领主
|
||
已占领
|
||
<text>{{ localBossCardData.king_user.z_nums }}</text>
|
||
发
|
||
</view>
|
||
<view class="" v-if="localBossCardData.king_user == null">
|
||
虚位以待
|
||
</view>
|
||
</view>
|
||
<view class="flex ml40 mr30" @click="openBossPop">
|
||
<text style="font-size: 20rpx; color: #999999;">查看更多 ></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 领主弹窗 - 显示领主详细信息和挑战人数/领主记录 -->
|
||
<uni-popup ref="bossPop" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view v-if="localBossCardData" class="boss-pop relative">
|
||
<!-- 弹窗标题 -->
|
||
<view class="boss-pop-title">
|
||
<text>领主接力</text>
|
||
</view>
|
||
|
||
<!-- 关闭按钮 -->
|
||
<view @click="close('bossPop')" class="close flex">
|
||
<image class="img100" :src="$img1('index/close.png')"></image>
|
||
</view>
|
||
|
||
<!-- 领主头像和皇冠 -->
|
||
<view class="boss-avatar relative">
|
||
<image :src="localBossCardData.king_user.headimg"></image>
|
||
<image :src="$img1('index/king.png')"></image>
|
||
|
||
<view class="boss-name hang1">
|
||
{{ (localBossCardData.king_user == null ? "虚位以待" : localBossCardData.king_user.nickname) }}
|
||
</view>
|
||
|
||
<!-- 规则按钮 -->
|
||
<view class="boss-pop-guize align-center" @click="open('playPop')">
|
||
<image :src="$img1('common/ic_rule.png')" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 奖励说明 -->
|
||
<view class="flex row center" style="font-size: 20rpx; color: #999999; margin-top: 24rpx;">
|
||
<text>挑战领主获得UU币奖励</text>
|
||
<text class="get-money-one">玩家每挑战一发,领主可获得</text>
|
||
<text class="get-money-three">{{ localBossCardData.goods.lingzhu_fan }}UU币</text>
|
||
</view>
|
||
|
||
<!-- 标签页切换 -->
|
||
<view class="boss-tab">
|
||
<view class="boss-tab-item" v-for="(item, i) in bossTab" :key="i" :class="{
|
||
act: bossTabCur == i
|
||
}" @click="bossTabChange(i)">
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 滚动列表区域 - 显示挑战人数或领主记录 -->
|
||
<child-scroll class="list-wrap" height="350rpx" ref="bossScroll" :fixed="false" :size="20" @up="getBossData">
|
||
<view class="boss-list">
|
||
<template v-for="(item, i) in bossList">
|
||
<!-- 挑战人数列表项 -->
|
||
<view v-if="bossTab[bossTabCur].id == 1" class="people-item mt30" :key="i">
|
||
<view class="avatar flex">
|
||
<image class="img100" :src="item.headimg"></image>
|
||
</view>
|
||
<view class="name hang1">{{ item.nickname }}</view>
|
||
</view>
|
||
|
||
<!-- 领主记录列表项 -->
|
||
<view v-if="bossTab[bossTabCur].id == 2" class="boss-log" :key="i">
|
||
<view class="flex center">
|
||
<view class="avatar flex" style="width: 52rpx; height: 52rpx;">
|
||
<image class="img100" :src="item.headimg"></image>
|
||
</view>
|
||
<view class="name hang1">{{ item.nickname }}</view>
|
||
</view>
|
||
|
||
<view class="place">
|
||
<text>占领领主{{ item.time }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</child-scroll>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 玩法规则弹窗 - 显示领主玩法的详细规则说明 -->
|
||
<uni-popup ref="playPop" type="center">
|
||
<view v-if="localBossCardData" class="play-pop common_bg">
|
||
<!-- 弹窗标题和关闭按钮 -->
|
||
<view class="close align-center justify-between">
|
||
<view class="close-icon"></view>
|
||
<view class="close-title">玩法规则</view>
|
||
<view class="close-icon flex" @click="close('playPop')">
|
||
<image class="img100" :src="$img1('index/close.png')"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 轮播图展示领主可获得的物品 -->
|
||
<swiper class="p-swiper">
|
||
<swiper-item class="p-item" v-for="(item, i) in localBossCardData.ling_goods_list" :key="i">
|
||
<view class="play-pic flex">
|
||
<image class="img100" :src="item.imgurl"></image>
|
||
</view>
|
||
<view class="play-name hang1">
|
||
{{ item.title }}
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 规则文本区域 -->
|
||
<view class="pd30 br20" style="background: #D8D8D8;">
|
||
<scroll-view class="rule-text" scroll-y>
|
||
<!-- 注意：使用v-html可能有XSS风险，但这里的内容来自服务器后台配置，相对可控 -->
|
||
<view v-html="playRuleData"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 领主功能组件
|
||
*
|
||
* 功能描述：
|
||
* 1. 显示当前领主信息
|
||
* 2. 提供领主弹窗展示挑战人数和领主记录
|
||
* 3. 提供玩法规则弹窗说明领主玩法
|
||
*
|
||
* 使用方式：
|
||
* <detail-wuxian-lingzhu :goods="goods" :goods-num="0"></detail-wuxian-lingzhu>
|
||
*/
|
||
export default {
|
||
name: 'DetailWuxianLingzhu',
|
||
props: {
|
||
// 商品信息对象
|
||
goods: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
// 商品数量
|
||
goodsNum: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 领主数据，包含king_user、goods等信息
|
||
localBossCardData: null,
|
||
// 标签页配置
|
||
bossTab: [{
|
||
id: 1,
|
||
title: '挑战人数'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '领主记录'
|
||
}
|
||
],
|
||
// 当前选中的标签页索引
|
||
bossTabCur: 0,
|
||
// 挑战人数/领主记录列表数据
|
||
bossList: [],
|
||
// 玩法规则HTML内容
|
||
playRuleData: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载时自动获取领主数据
|
||
this.fetchBossData();
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取领主数据
|
||
* 请求接口获取领主信息并存储到localBossCardData
|
||
*/
|
||
fetchBossData() {
|
||
this.req({
|
||
url: 'ling_zhu_king',
|
||
data: {
|
||
page: 1,
|
||
goods_id: this.goods.id,
|
||
type: 1 // 默认只请求挑战人数类型
|
||
},
|
||
Loading: true,
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.localBossCardData = res.data;
|
||
this.bossList = this.bossList.concat(res.data.list.data);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 打开领主弹窗
|
||
*/
|
||
openBossPop() {
|
||
this.$refs.bossPop.open();
|
||
|
||
// // 打开弹窗的同时加载挑战人数数据
|
||
// this.$nextTick(() => {
|
||
// // 确保bossList是空的，避免重复加载
|
||
// this.bossList = [];
|
||
// // 重置滚动区域
|
||
// if (this.$refs.bossScroll) {
|
||
// this.$refs.bossScroll.mescroll.resetUpScroll();
|
||
// this.$refs.bossScroll.mescroll.scrollTo(0, 0);
|
||
// }
|
||
|
||
// // 主动获取挑战人数数据
|
||
// this.getBossData({ num: 1, init: false });
|
||
// });
|
||
},
|
||
|
||
/**
|
||
* 打开指定弹窗
|
||
* @param {String} popName - 弹窗引用名称
|
||
*/
|
||
open(popName) {
|
||
this.$refs[popName].open();
|
||
|
||
// 如果是玩法规则弹窗，需要获取规则数据
|
||
if (popName === 'playPop') {
|
||
this.$c.getRule(14).then(res => {
|
||
if (res.status == 1) {
|
||
this.playRuleData = res.data;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 关闭指定弹窗
|
||
* @param {String} popName - 弹窗引用名称
|
||
*/
|
||
close(popName) {
|
||
this.$refs[popName].close();
|
||
},
|
||
|
||
/**
|
||
* 切换标签页
|
||
* @param {Number} i - 标签页索引
|
||
*/
|
||
bossTabChange(i) {
|
||
this.bossTabCur = i;
|
||
this.bossList = [];
|
||
|
||
// 重置滚动区域
|
||
this.$refs.bossScroll.mescroll.resetUpScroll();
|
||
this.$refs.bossScroll.mescroll.scrollTo(0, 0);
|
||
},
|
||
|
||
/**
|
||
* 获取挑战人数/领主记录列表数据
|
||
* @param {Object} params - 参数对象
|
||
* @param {Number} params.num - 页码
|
||
* @param {Boolean} params.init - 是否初始化
|
||
*/
|
||
getBossData({ num, init }) {
|
||
this.req({
|
||
url: 'ling_zhu_king',
|
||
data: {
|
||
page: num,
|
||
goods_id: this.goods.id,
|
||
type: this.bossTab[this.bossTabCur].id
|
||
},
|
||
Loading: true,
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
// 只更新列表数据，不改变整个localBossCardData
|
||
if (!init) {
|
||
if (num == 1) {
|
||
this.bossList = [];
|
||
}
|
||
|
||
this.bossList = this.bossList.concat(res.data.list.data);
|
||
this.$refs.bossScroll.mescroll.endByPage(
|
||
res.data.list.data.length,
|
||
res.data.list.last_page
|
||
);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 领主信息展示区域样式 */
|
||
.lingzhu {
|
||
width: 686rpx;
|
||
height: 158rpx;
|
||
margin: 0rpx auto;
|
||
background: #F8F8F8;
|
||
|
||
&-img {
|
||
width: 122rpx;
|
||
height: 106rpx;
|
||
|
||
/* 领主头像 */
|
||
>image:nth-child(1) {
|
||
width: 75rpx;
|
||
height: 76rpx;
|
||
position: absolute;
|
||
bottom: 4rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 1;
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
/* 皇冠图标 */
|
||
>image:nth-child(2) {
|
||
width: 122rpx;
|
||
height: 120rpx;
|
||
position: absolute;
|
||
top: 5rpx;
|
||
left: 0;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
|
||
/* 领主昵称 */
|
||
>view:nth-child(1) {
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 领主信息文本 */
|
||
>view:nth-child(2) {
|
||
margin-top: 6rpx;
|
||
font-weight: normal;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
|
||
/* 高亮数字 */
|
||
>text {
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 领主弹窗样式 */
|
||
.boss-pop {
|
||
width: 750rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 46rpx 40rpx;
|
||
position: relative;
|
||
background: #F7F7F7;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
/* 弹窗顶部装饰 */
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -62rpx;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 62rpx;
|
||
}
|
||
|
||
/* 弹窗标题 */
|
||
.boss-pop-title {
|
||
padding: 40rpx 0;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 规则按钮 */
|
||
.boss-pop-guize {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
right: 24rpx;
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
|
||
>image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
/* 关闭按钮 */
|
||
.close {
|
||
position: absolute;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
top: 50rpx;
|
||
right: 36rpx;
|
||
}
|
||
|
||
/* 领主头像区域 */
|
||
.boss-avatar {
|
||
margin: 20rpx auto 0;
|
||
width: 686rpx;
|
||
height: 264rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
/* 领主头像 */
|
||
>image:nth-child(1) {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 112rpx;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 皇冠图标 */
|
||
>image:nth-child(2) {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 181rpx;
|
||
height: 173rpx;
|
||
bottom: 80rpx;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
/* 领主昵称 */
|
||
.boss-name {
|
||
margin: 30rpx auto 0;
|
||
width: 200rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
position: absolute;
|
||
bottom: 32rpx;
|
||
}
|
||
|
||
/* 奖励文本样式 */
|
||
.get-money-one {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.get-money-three {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
/* 标签页样式 */
|
||
.boss-tab {
|
||
padding: 30rpx 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.boss-tab-item {
|
||
width: 33%;
|
||
height: 60rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #8A8A8A;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
text-align: center;
|
||
background-color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
|
||
/* 激活状态 */
|
||
&.act {
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
background-color: #E6F791;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 列表区域样式 */
|
||
.list-wrap {
|
||
.boss-list {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
|
||
/* 挑战人数列表项 */
|
||
.people-item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 30%;
|
||
|
||
.avatar {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
background: #9d9d9d;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.name {
|
||
width: calc(100% - 70rpx);
|
||
box-sizing: border-box;
|
||
padding-left: 10rpx;
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
/* 领主记录列表项 */
|
||
.boss-log {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx;
|
||
|
||
.avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: #9d9d9d;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.name {
|
||
width: 100rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.place {
|
||
margin-left: 30rpx;
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
text {
|
||
padding-left: 4rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 玩法规则弹窗样式 */
|
||
.play-pop {
|
||
width: 680rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 46rpx 40rpx;
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
|
||
/* 弹窗标题栏 */
|
||
.close {
|
||
padding: 30rpx 0;
|
||
|
||
.close-title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
/* 轮播图区域 */
|
||
.p-swiper {
|
||
margin-top: 10rpx;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
|
||
.p-item {
|
||
|
||
/* 物品图片 */
|
||
.play-pic {
|
||
margin: 0 auto 0;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
position: relative;
|
||
}
|
||
|
||
/* 物品名称 */
|
||
.play-name {
|
||
width: 310rpx;
|
||
margin: 16rpx auto 0;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 规则文本区域 */
|
||
.rule-text {
|
||
width: 560rpx;
|
||
height: 200rpx;
|
||
margin: 20rpx auto 0;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #8A8A8A;
|
||
}
|
||
}
|
||
</style> |