临时提交
This commit is contained in:
zpc
parent
7512cb366b
commit
d7d879e71e
11
App.vue
11
App.vue
|
|
@ -184,4 +184,13 @@ button.hide {
|
|||
.uni-tabbar__icon {
|
||||
height: 50px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 主应用容器 -->
|
||||
<view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -36,6 +36,7 @@ class ConfigManager {
|
|||
if (res.status === 1 && res.data) {
|
||||
configData = res.data;
|
||||
console.log('全局配置数据加载成功');
|
||||
uni.setStorageSync('configData', configData);
|
||||
resolve(configData);
|
||||
} else {
|
||||
console.error('加载配置数据失败:', res.msg || '未知错误');
|
||||
|
|
|
|||
240
components/detail-preview-popup/detail-preview-popup.vue
Normal file
240
components/detail-preview-popup/detail-preview-popup.vue
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<uni-popup ref="popup" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
|
||||
<view v-if="visible" class="preview-popup">
|
||||
<!-- 商品图片 -->
|
||||
<view class="pic center relative">
|
||||
<image :src="innerImgUrl" lazy-load></image>
|
||||
<view class="type-tag justify-center" v-if="innerTipTitle">{{ innerTipTitle }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品标题 -->
|
||||
<view class="title">
|
||||
<text class="hang1">{{ innerTitle }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息列表 -->
|
||||
<view class="info-list">
|
||||
<view class="info-item" v-if="innerProbability">{{ innerProbability }}</view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DetailPreviewPopup',
|
||||
props: {
|
||||
// 商品标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品图片地址
|
||||
imgUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品提示标签标题
|
||||
tipTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品类型
|
||||
productType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品概率
|
||||
probability: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 额外信息(可选)
|
||||
extraInfo: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
// 内部数据，用于显示
|
||||
innerTitle: '',
|
||||
innerImgUrl: '',
|
||||
innerTipTitle: '',
|
||||
innerProductType: '',
|
||||
innerProbability: '',
|
||||
innerExtraInfo: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听props变化，更新内部数据
|
||||
title(val) {
|
||||
this.innerTitle = val;
|
||||
},
|
||||
imgUrl(val) {
|
||||
this.innerImgUrl = val;
|
||||
},
|
||||
tipTitle(val) {
|
||||
this.innerTipTitle = val;
|
||||
},
|
||||
productType(val) {
|
||||
this.innerProductType = val;
|
||||
},
|
||||
probability(val) {
|
||||
this.innerProbability = val;
|
||||
},
|
||||
extraInfo(val) {
|
||||
this.innerExtraInfo = val;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化内部数据
|
||||
this.innerTitle = this.title;
|
||||
this.innerImgUrl = this.imgUrl;
|
||||
this.innerTipTitle = this.tipTitle;
|
||||
this.innerProductType = this.productType;
|
||||
this.innerProbability = this.probability;
|
||||
this.innerExtraInfo = this.extraInfo;
|
||||
},
|
||||
methods: {
|
||||
// 设置预览数据并打开弹窗
|
||||
setPreviewData(data) {
|
||||
if (!data) return;
|
||||
|
||||
// 更新内部数据
|
||||
if (data.title !== undefined) this.innerTitle = data.title;
|
||||
if (data.imgUrl !== undefined) this.innerImgUrl = data.imgUrl;
|
||||
if (data.tipTitle !== undefined) this.innerTipTitle = data.tipTitle;
|
||||
if (data.productType !== undefined) this.innerProductType = data.productType;
|
||||
if (data.probability !== undefined) this.innerProbability = data.probability;
|
||||
if (data.extraInfo !== undefined) this.innerExtraInfo = data.extraInfo;
|
||||
|
||||
// 打开弹窗
|
||||
this.open();
|
||||
},
|
||||
|
||||
// 打开弹窗
|
||||
open() {
|
||||
console.log('尝试打开弹窗');
|
||||
this.visible = true;
|
||||
|
||||
// 使用nextTick确保DOM更新后再打开弹窗
|
||||
this.$nextTick(() => {
|
||||
console.log('DOM已更新，准备打开弹窗');
|
||||
if (this.$refs.popup) {
|
||||
this.$refs.popup.open();
|
||||
console.log('弹窗已打开');
|
||||
} else {
|
||||
console.error('popup ref不存在，请检查组件是否正确挂载');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
closePopup() {
|
||||
this.visible = false;
|
||||
if (this.$refs.popup) {
|
||||
this.$refs.popup.close();
|
||||
}
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preview-popup {
|
||||
position: relative;
|
||||
width: 570rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
// 商品图片区域
|
||||
.pic {
|
||||
width: 570rpx;
|
||||
height: 598rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 548rpx;
|
||||
height: 549rpx;
|
||||
}
|
||||
|
||||
// 商品标签
|
||||
.type-tag {
|
||||
width: 68rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 12rpx;
|
||||
left: 24rpx;
|
||||
font-weight: 400;
|
||||
font-size: 14rpx;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
background: url($imgurl + 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 商品标题
|
||||
.title {
|
||||
margin: 40rpx auto 0;
|
||||
width: 564rpx;
|
||||
height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F5F5F5;
|
||||
|
||||
text {
|
||||
font-weight: 600;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
// 商品信息列表
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0 0;
|
||||
|
||||
.info-item {
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭按钮
|
||||
.close {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 160%);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
233
components/detail-prize-log/detail-prize-log.vue
Normal file
233
components/detail-prize-log/detail-prize-log.vue
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<view class="prize-log-wrapper">
|
||||
<!-- 分类标签 -->
|
||||
<scroll-view class="sub-tab" scroll-x>
|
||||
<view
|
||||
v-for="(item, i) in subTab"
|
||||
:key="i"
|
||||
class="sub-tab-item"
|
||||
:class="{ act: currentSubTab === i, unact: currentSubTab !== i }"
|
||||
@click="onSubTabChange(i)"
|
||||
>
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 中奖记录列表 -->
|
||||
<view v-if="logList.length > 0" class="log-list">
|
||||
<view v-for="(item, i) in logList" :key="i" class="log-item br20">
|
||||
<!-- 用户头像 -->
|
||||
<view class="avatar">
|
||||
<image :src="item.user_info.headimg" lazy-load></image>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<view class="info">
|
||||
<view class="name hang1">{{ item.user_info.nickname }}</view>
|
||||
<view class="time">{{ item.addtime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 中奖信息 -->
|
||||
<view class="prize">
|
||||
<view class="pic flex">
|
||||
<image
|
||||
class="img100"
|
||||
:src="item.goodslist_imgurl"
|
||||
lazy-load
|
||||
></image>
|
||||
</view>
|
||||
<view class="column align-end">
|
||||
<view
|
||||
class="prize-shang center"
|
||||
:style="{ background: item.shang_color }"
|
||||
>
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
<view class="flex mt10">
|
||||
<view class="title hang1">{{ item.goodslist_title }}</view>
|
||||
<view class="num">×{{ item.prize_num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<view v-else class="empty-tip">暂无中奖记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DetailPrizeLog",
|
||||
props: {
|
||||
// 分类标签列表
|
||||
subTab: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 中奖记录列表
|
||||
logList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 当前选中的分类
|
||||
currentSubTab: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 切换分类
|
||||
onSubTabChange(index) {
|
||||
if (index === this.currentSubTab) return;
|
||||
this.$emit("sub-tab-change", index);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.prize-log-wrapper {
|
||||
width: 100%;
|
||||
|
||||
// 分类标签栏
|
||||
.sub-tab {
|
||||
white-space: nowrap;
|
||||
padding: 30rpx 0 10rpx;
|
||||
|
||||
.sub-tab-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.2s;
|
||||
|
||||
// 活跃状态
|
||||
&.act {
|
||||
color: #333333;
|
||||
background: #e6f791;
|
||||
}
|
||||
|
||||
// 非活跃状态
|
||||
&.unact {
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 中奖记录列表
|
||||
.log-list {
|
||||
padding: 1rpx 30rpx 30rpx;
|
||||
|
||||
.log-item {
|
||||
height: 144rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
background: #f8f8f8;
|
||||
|
||||
// 用户头像
|
||||
.avatar {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
background: #9d9d9d;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
.info {
|
||||
width: 230rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.name {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-top: 10rpx;
|
||||
white-space: nowrap;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
// 中奖物品信息
|
||||
.prize {
|
||||
flex: 1;
|
||||
padding-left: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.prize-shang {
|
||||
height: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空数据提示
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
components/detail-toolbar/detail-toolbar.vue
Normal file
90
components/detail-toolbar/detail-toolbar.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<view class="detail-toolbar" :style="customStyle">
|
||||
<!-- 购买说明按钮 -->
|
||||
<view class="toolbar-item">
|
||||
<image class="toolbar-img"
|
||||
:src="$img1('common/gzsm.png')"
|
||||
@click="onRuleClick(getRuleId)">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<!-- 商品预览按钮 -->
|
||||
<view class="toolbar-item" @tap="onTabChange(1)">
|
||||
<image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/spyl1.png' : 'common/spyl2.png')"></image>
|
||||
</view>
|
||||
|
||||
<!-- 中赏记录按钮 -->
|
||||
<view class="toolbar-item" @tap="onTabChange(2)">
|
||||
<image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/zsjl2.png' : 'common/zsjl1.png')"></image>
|
||||
</view>
|
||||
|
||||
<!-- 换箱按钮 -->
|
||||
<view class="toolbar-item" @click="onChangeBox">
|
||||
<image class="toolbar-img" :src="$img1('common/huanxiang.png')"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DetailToolbar',
|
||||
props: {
|
||||
goodsType: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
currentTab: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getRuleId() {
|
||||
// 根据商品类型返回对应的规则ID
|
||||
const typeRuleMap = {
|
||||
5: 13,
|
||||
6: 18
|
||||
};
|
||||
return typeRuleMap[this.goodsType] || 7;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRuleClick(ruleId) {
|
||||
this.$emit('rule-click', ruleId, '购买说明');
|
||||
},
|
||||
onTabChange(tabId) {
|
||||
this.$emit('tab-change', tabId);
|
||||
},
|
||||
onChangeBox() {
|
||||
this.$emit('change-box');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.detail-toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 32rpx;
|
||||
margin-top: 56rpx;
|
||||
|
||||
.toolbar-item {
|
||||
width: 160rpx;
|
||||
height: 92rpx;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.toolbar-img {
|
||||
width: 160rpx;
|
||||
height: 92rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
4
main.js
4
main.js
|
|
@ -7,6 +7,10 @@ import ConfigManager from '@/common/config.js'
|
|||
import RequestManager from '@/common/request.js'
|
||||
import EnvConfig from '@/common/env.js'
|
||||
|
||||
// 全局注册uni-popup组件
|
||||
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
||||
Vue.component('uni-popup', uniPopup)
|
||||
|
||||
// 全局变量配置
|
||||
Vue.prototype.siteBaseUrl = EnvConfig.apiBaseUrl
|
||||
Vue.prototype.$baseUrl = EnvConfig.baseUrl
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
{
|
||||
"easycom": {
|
||||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
|
||||
"^collect-btn$": "@/components/collect-btn/collect-btn.vue"
|
||||
"^collect-btn$": "@/components/collect-btn/collect-btn.vue",
|
||||
"^detail-toolbar$": "@/components/detail-toolbar/detail-toolbar.vue",
|
||||
"^detail-prize-log$": "@/components/detail-prize-log/detail-prize-log.vue",
|
||||
"^detail-preview-popup$": "@/components/detail-preview-popup/detail-preview-popup.vue"
|
||||
},
|
||||
"pages": [{
|
||||
"path": "pages/shouye/index",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user