352 lines
8.9 KiB
Vue
352 lines
8.9 KiB
Vue
<template>
|
||
<view class="commonPageBox">
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="我的湖分" bgColor="#3ab3ae" fontColor="#fff">
|
||
<!-- <uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')" size="22"></uni-icons> -->
|
||
</z-nav-bar>
|
||
<view class="xiugai">
|
||
<common-list
|
||
:dataList="tabList"
|
||
@hancleClick="handleClickTab"
|
||
label="name"
|
||
>
|
||
<template slot="rightSlot" slot-scope="slotProps">
|
||
<text
|
||
class="fdButtonBox aui-text-success"
|
||
style="
|
||
line-height: 40rpx;
|
||
font-size: 36rpx;
|
||
float: right;
|
||
color: #3AB3AE !important;
|
||
font-weight: bold;
|
||
"
|
||
>{{ slotProps.row.score }}<text style="font-size: 30rpx;margin-left: 4rpx;">湖分</text></text
|
||
>
|
||
</template>
|
||
</common-list>
|
||
</view>
|
||
<u-popup mode="bottom" :show="show" border-radius="10" @close="show=false">
|
||
<view class="content" style="height: 50vh">
|
||
<p style="height: 90rpx" class="popupTitle">
|
||
{{ currentData.name }} 湖分记录
|
||
</p>
|
||
<scroll-view scroll-y="true" style="height: calc(100% - 210rpx)">
|
||
<view style="padding: 20rpx; box-sizing: border-box">
|
||
<!-- <view v-for="index in 20" :key="index"> 第{{ index }}个Item </view> -->
|
||
<view class="AC_con">
|
||
<!-- <view class="AC_jilu PM_font">湖分记录</view> -->
|
||
<common-list
|
||
:dataList="MoneyRecord"
|
||
isCondition="true"
|
||
isNoIcon="true"
|
||
label="orderType"
|
||
>
|
||
<template slot="labelSlot" slot-scope="slotProps">
|
||
<view class="label_content AC_List">
|
||
<view class="left">
|
||
<view class="title"
|
||
><view class="AC_time"
|
||
>{{ slotProps.row.createTime }}
|
||
</view></view
|
||
>
|
||
</view>
|
||
<view
|
||
:class="`right ${slotProps.row.score > 0 ? 'Hot' : ''}`"
|
||
>
|
||
<text
|
||
v-if="slotProps.row.score > 0"
|
||
style="color: #3ab3ae"
|
||
>+</text
|
||
>
|
||
<text style="color: #3ab3ae">{{
|
||
slotProps.row.score
|
||
}}</text> </view
|
||
><view class="AC_mark" v-if="slotProps.row.detail">{{
|
||
slotProps.row.detail
|
||
}}</view>
|
||
</view>
|
||
<!-- <text class="order" style="font-size: 12px;" v-if="slotProps.row.relationId" @click="goClick(slotProps.row.relationId)">订单详情</text> -->
|
||
</template>
|
||
</common-list>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="confrim-btn">
|
||
<u-button
|
||
style="
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
margin-top: 20rpx;
|
||
color: #1d1d1d;
|
||
border: 1rpx solid #a0a0a0;
|
||
"
|
||
@click="show = false"
|
||
>关闭</u-button
|
||
>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var clear;
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList: [],
|
||
MoneyRecord: [],
|
||
pageList: [],
|
||
show: false,
|
||
currentData: {},
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
videoHTML() {
|
||
return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}" enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`;
|
||
},
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
this.getData();
|
||
},
|
||
onUnload() {
|
||
// #ifdef APP-PLUS
|
||
plus.screen.lockOrientation("portrait-primary"); // 清除横屏
|
||
// #endif
|
||
this.showTemp = true;
|
||
this.videoContext = null;
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
components: {
|
||
// curriculumVideo,
|
||
},
|
||
//方法
|
||
methods: {
|
||
async handleClickTab(e) {
|
||
this.currentData = e;
|
||
console.log("e at line 78:", e);
|
||
await this.gethufenData();
|
||
this.show = true;
|
||
console.log(e);
|
||
this.$forceUpdate();
|
||
|
||
// this.tabList = e;
|
||
},
|
||
getPointsType(type) {
|
||
var str = "";
|
||
|
||
switch (type) {
|
||
case "01":
|
||
return "在线教学";
|
||
|
||
case "03":
|
||
return "学术期刊";
|
||
|
||
case "05":
|
||
return "太湖讲堂";
|
||
|
||
case "07":
|
||
return "创作技术";
|
||
|
||
case "11":
|
||
return "注册邀请";
|
||
|
||
case "13":
|
||
return "课程邀请";
|
||
}
|
||
},
|
||
async gethufenData(type) {
|
||
await this.$http
|
||
.request({
|
||
url: "common/userContribution/getUserContributionByType",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
current: 1,
|
||
limit: 999999,
|
||
type: this.currentData.type,
|
||
},
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log("res at line 296:", res.list);
|
||
if (res.code == 0 && res.list.records.length > 0) {
|
||
this.MoneyRecord = [];
|
||
this.MoneyRecord = res.list.records;
|
||
} else {
|
||
this.MoneyRecord = [];
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e, "报错");
|
||
});
|
||
},
|
||
async getData() {
|
||
await this.$http
|
||
.post("common/userContribution/getUserContribution")
|
||
.then((res) => {
|
||
console.log("res at line 296:", res.list);
|
||
if (res.code == 0 && res.list.length > 0) {
|
||
this.tabList = [];
|
||
this.tabList = res.list.map((e) => {
|
||
return { ...e, name: e.dict_value };
|
||
});
|
||
} else {
|
||
this.tabList = [];
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e, "报错");
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.AC_List {
|
||
overflow: hidden;
|
||
|
||
.left {
|
||
width: calc(100% - 200rpx) !important;
|
||
// font-weight: 700;
|
||
float: left;
|
||
color: #333;
|
||
font-size: 38rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.right {
|
||
display: block;
|
||
width: 200rpx !important;
|
||
float: right;
|
||
text-align: right;
|
||
font-size: 38rpx;
|
||
// font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
// border-bottom: 1px solid #eee;
|
||
// padding: 40rpx 10rpx;
|
||
|
||
.AC_title {
|
||
font-size: 32rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
view {
|
||
float: right;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.AC_mark {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 15rpx;
|
||
// white-space: nowrap;
|
||
color: #343434;
|
||
float: left;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.AC_time {
|
||
// width: 100%;
|
||
color: #909090;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.popupTitle {
|
||
padding-top: 10rpx;
|
||
|
||
box-sizing: border-box;
|
||
font-size: 42rpx;
|
||
// font-weight: bold;
|
||
text-align: center;
|
||
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
|
||
line-height: 60rpx;
|
||
color: #3ab3ae;
|
||
}
|
||
.grid-text {
|
||
font-size: 28rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
.commonPageBox {
|
||
height: 100vh;
|
||
// background-image: url("@/static/icon/mine_bg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
background-image: linear-gradient(
|
||
-60deg,
|
||
#f4fcf6 0%, /* 极浅的绿白色 */
|
||
#e8f7f0 40%, /* 轻微绿色调的浅色 */
|
||
#d8f3e6 60%, /* 非常浅的绿色 */
|
||
#f0fdf9 80%, /* 淡绿色与白色的混合 */
|
||
#f9fffb 100% /* 接近白色的极浅绿色 */
|
||
);
|
||
|
||
|
||
// background-color: #d8f8e4 !important;
|
||
}
|
||
.xiugai {
|
||
border-radius: 20rpx !important;
|
||
margin: 20rpx;
|
||
// padding:0 40rpx;
|
||
background: #fff;
|
||
|
||
.nav_list {
|
||
background-color: #b7e0e2;
|
||
padding: 15rpx 0 15rpx 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
position: relative;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
|
||
&:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
text {
|
||
color: #333;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-image: url("@/static/icon/icon_right.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.nav_list:nth-last-child(1) {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
</style>
|