优化界面
This commit is contained in:
zpc
parent
592c17c903
commit
93e75199c8
|
|
@ -13,36 +13,52 @@
|
|||
v-if="innerTipTitle">{{ innerTipTitle }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 背面：赏品列表 -->
|
||||
<view class="back">
|
||||
<view class="list" @click="toggleList">
|
||||
<scroll-view :scroll-y="true">
|
||||
<view class="res-list">
|
||||
<view class="res-item" v-for="(item, i) in dataItem.children" :key="i">
|
||||
<view class="pic center">
|
||||
<image :src="item.imgurl" lazy-load></image>
|
||||
<view class="tag center"
|
||||
:style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">{{ item.shang_info ?
|
||||
<scroll-view class="list" :scroll-y="true">
|
||||
<!-- 加载中状态 -->
|
||||
<view class="loading-container center" v-if="loading">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
<!-- 赏品列表内容 -->
|
||||
<view class="res-list" v-else>
|
||||
<view class="res-item" v-for="(item, i) in children" :key="i" @click.stop="handleItemClick(item)">
|
||||
<view class="pic center">
|
||||
<image :src="item.imgurl" lazy-load></image>
|
||||
<view class="tag center"
|
||||
:style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">{{
|
||||
item.shang_info ?
|
||||
item.shang_info.title : "" }}</view>
|
||||
<view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||||
<view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||||
<!-- 售罄遮罩 -->
|
||||
<view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
|
||||
<text>售罄</text>
|
||||
</view>
|
||||
<view class="title hang1 flex center " style="padding: 0px;margin: 0px;text-align: center;width: 100%;">
|
||||
</view>
|
||||
<view>
|
||||
<view class="item-title hang1" style="margin-top:5rpx;">
|
||||
<text> {{ item.title }}</text>
|
||||
</view>
|
||||
<view class="item-title hang1">
|
||||
<text style="color: #f39205;"> {{ item.pro }}</text>
|
||||
</view>
|
||||
<view class="item-title hang1">
|
||||
<text>售价：{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 商品标题 -->
|
||||
<view class="title" @click="toggleList">
|
||||
<text class="hang1">{{ !showList?innerTitle:'抽中宝箱后，会在奖品列表中随机抽取一个奖品' }}</text>
|
||||
<text class="hang1">{{ !showList ? innerTitle : '抽中宝箱后，会在奖品列表中随机抽取一个奖品' }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 商品信息列表 -->
|
||||
<view class="info-list">
|
||||
<view class="info-item" v-if="innerProbability">{{ innerProbability }}</view>
|
||||
|
|
@ -50,7 +66,7 @@
|
|||
<view class="info-item" v-if="innerProductType">产品类型: {{ innerProductType }}</view>
|
||||
<view class="info-item" v-for="(item, index) in innerExtraInfo" :key="index">{{ item }}</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view class="close icon" @click="closePopup">
|
||||
<image :src="$img('/static/img/close.png')" lazy-load></image>
|
||||
|
|
@ -109,7 +125,10 @@ export default {
|
|||
innerExtraInfo: [],
|
||||
dataItem: {},
|
||||
showList: false,
|
||||
isTips: false
|
||||
isTips: false,
|
||||
children: [],
|
||||
goods: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -150,19 +169,28 @@ export default {
|
|||
uni.$off('global-preview-event', this.handleGlobalEvent);
|
||||
},
|
||||
methods: {
|
||||
handleItemClick(item) {
|
||||
console.log('点击了', item);
|
||||
this.$emit('itemClick', item);
|
||||
|
||||
|
||||
},
|
||||
// 处理全局预览事件
|
||||
handleGlobalEvent(options) {
|
||||
console.log('收到全局预览事件', options);
|
||||
this.setPreviewData(options);
|
||||
},
|
||||
|
||||
|
||||
// 切换列表显示状态，添加动画效果
|
||||
toggleList() {
|
||||
if(this.isTips){
|
||||
if (this.isTips) {
|
||||
if (this.children.length == 0) {
|
||||
this.loadChildren();
|
||||
}
|
||||
this.showList = !this.showList;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 设置预览数据并打开弹窗
|
||||
setPreviewData(data) {
|
||||
console.log('设置预览数据', data);
|
||||
|
|
@ -177,12 +205,15 @@ export default {
|
|||
if (data.extraInfo !== undefined) this.innerExtraInfo = data.extraInfo;
|
||||
this.showList = false;
|
||||
this.isTips = false;
|
||||
if (data.dataItem !== undefined) {
|
||||
this.dataItem = data.dataItem;
|
||||
if (data.dataItem != null && data.dataItem.children != null && data.dataItem.children.length > 0) {
|
||||
this.showList = false;
|
||||
if (data.dataItem !== undefined && data.goods != null) {
|
||||
console.log(data.dataItem, data.goods);
|
||||
if (data.dataItem.goods_type == 4) {
|
||||
this.goods = data.goods;
|
||||
this.dataItem = data.dataItem;
|
||||
this.isTips = true;
|
||||
this.children.splice(0, this.children.length);
|
||||
}
|
||||
|
||||
}
|
||||
// 打开弹窗
|
||||
this.open();
|
||||
|
|
@ -190,10 +221,9 @@ export default {
|
|||
|
||||
// 打开弹窗
|
||||
open() {
|
||||
console.log('尝试打开弹窗', this.$refs.popup);
|
||||
// console.log('尝试打开弹窗', this.$refs.popup);
|
||||
this.visible = true;
|
||||
console.log('打开弹窗', this.dataItem);
|
||||
|
||||
// console.log('打开弹窗', this.dataItem);
|
||||
// 使用nextTick确保DOM更新后再打开弹窗
|
||||
this.$nextTick(() => {
|
||||
console.log(' ');
|
||||
|
|
@ -214,6 +244,7 @@ export default {
|
|||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
|
|
@ -223,7 +254,26 @@ export default {
|
|||
this.$refs.popup.close();
|
||||
}
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
async loadChildren() {
|
||||
this.loading = true;
|
||||
var res = await this.req({
|
||||
url: "goods_children",
|
||||
method: "POST",
|
||||
Loading:true,
|
||||
data: {
|
||||
goods_id: this.goods.id,
|
||||
goods_num: this.goods.num,
|
||||
goods_list_id: this.dataItem.id
|
||||
}
|
||||
});
|
||||
if (res == null || res.status !== 1) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.children = res.data;
|
||||
this.loading = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -234,17 +284,17 @@ export default {
|
|||
width: 80vw;
|
||||
box-sizing: border-box;
|
||||
height: 850rpx;
|
||||
|
||||
|
||||
// 翻转卡片相关样式
|
||||
.flip-container {
|
||||
perspective: 1000px;
|
||||
width: 100%;
|
||||
height: 598rpx;
|
||||
|
||||
|
||||
&.flipped .flipper {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
|
||||
.flipper {
|
||||
transition: 0.8s;
|
||||
transform-style: preserve-3d;
|
||||
|
|
@ -252,8 +302,9 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.front, .back {
|
||||
|
||||
.front,
|
||||
.back {
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -263,12 +314,12 @@ export default {
|
|||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.front {
|
||||
z-index: 2;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
|
@ -276,6 +327,7 @@ export default {
|
|||
|
||||
.list {
|
||||
width: 100%;
|
||||
padding-top: 5rpx;
|
||||
height: 598rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
|
|
@ -285,11 +337,11 @@ export default {
|
|||
padding: 20rpx 10rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33%);
|
||||
gap: 24rpx 10rpx;
|
||||
gap: 20rpx 8rpx;
|
||||
|
||||
.res-item {
|
||||
width: 180rpx;
|
||||
height: 240rpx;
|
||||
// height: 240rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 16rpx;
|
||||
|
||||
|
|
@ -411,7 +463,7 @@ export default {
|
|||
// 关闭按钮
|
||||
.close {
|
||||
width: 100%;
|
||||
margin-top:40rpx;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -436,5 +488,57 @@ export default {
|
|||
padding: 5rpx 15rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
// 售罄遮罩
|
||||
.sold-out-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
z-index: 10;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
text-align: left;
|
||||
padding-left: 2%;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
// 加载中样式
|
||||
.loading-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
padding: 20rpx 40rpx;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -323,8 +323,7 @@
|
|||
|
||||
methods: {
|
||||
previewDetail(item) {
|
||||
console.log(item);
|
||||
|
||||
console.log(item,this.pageData);
|
||||
// 使用全局方法调用预览弹窗
|
||||
this.$preview({
|
||||
title: item.title,
|
||||
|
|
@ -332,7 +331,8 @@
|
|||
tipTitle: item.shang_info ? item.shang_info.title : '',
|
||||
productType: this.optData.type_text,
|
||||
probability: item.pro,
|
||||
dataItem: item
|
||||
dataItem: item,
|
||||
goods: this.pageData.goods
|
||||
}).then(() => {
|
||||
console.log('预览弹窗打开成功');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user