Skip to content

C
CFFP-HB
Commit 1ed67652 by yuzhenWang
Options

画到产品中心了

parent 061a51a6
Showing with 396 additions and 29 deletions
pages/courselist/courselist.vue
<template>
<view class="pad">
<view class="container">
<view class="homeHeader">
<view class="one">
<text style="font-size: 80rpx;">01</text>
<view class="titleTxt">
<text >分享商品</text>
<text class="iconfont icon-shuangyoujiantou iconOne" ></text>
</view>
</view>
<view class="two">
<text>02</text>
<view class="titleTxt">
<text >好友购买</text>
<text class="iconfont icon-shuangyoujiantou iconOne" ></text>
</view>
</view>
<view class="three">
<text>03</text>
<view class="titleTxt lastTxt">
<text>个人中心</text>
<text>查看收益</text>
</view>
</view>
</view>
<view class="productBox">
<view class="productList">
<view class="productItem" v-for="item in cffpCourseInfos" :key="item.fileId">
<view class="top">
<view class="left">
<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
</view>
<view class="right">
<view class="one">
{{item.fileTitle}}
</view>
<view class="two">
{{item.fileSynopsis}}
</view>
<view class="three">
<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text>
</view>
</view>
</view>
<view class="bottom">
<view class="bottomCon">
<view class="left">
最高可赚￥1.98
</view>
<view class="right">
去分享
</view>
</view>
</view>
</view>
</view>
</view>
<!--搜索组件-->
<search
<!-- <search
:isSearch="1"
:userId = "userId"
@send="getCourseList"
:initialQuery="queryName"
></search>
></search> -->
<!--轮播组件-->
<view class="banner">
<!-- <view class="banner">
<view class="uni-margin-wrap">
<carousel :carouselList="fileUploadItemCFFPList"></carousel>
</view>
</view>
<h4 v-if="cffpCourseInfos.length<=0" class="noListTip">暂无产品列表</h4>
</view> -->
<!-- <h4 v-if="cffpCourseInfos.length<=0" class="noListTip">暂无产品列表</h4>
<view class="ulBox" v-if="cffpCourseInfos.length>0">
<view class="liBox" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<!-- :tagList="{v1:item.fileLecturerRanks,v2:item.fileLecturerName}" -->
<course-item
:thumbnailPath="item.displayImage"
:title="item.fileTitle"
......@@ -25,7 +79,7 @@
></course-item>
</view>
</view>
</view> -->
</view>
<!-- <tabBar :currentPage="currentPage" v-if="onlyShowList!=0"></tabBar> -->
</template>
......@@ -128,6 +182,145 @@
</script>
<style lang="scss" scoped>
.container{
background-color: rgba(235, 239, 247, 1);
display: flex;
flex-direction: column;
.homeHeader{
box-sizing: border-box;
width: 100%;
background: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
padding: 30rpx 0 100rpx 0;
color: rgba(255,255,255,.3);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 80rpx;
height: 300rpx;
view{
width: 33%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.titleTxt{
box-sizing: border-box;
position: absolute;
width: 100%;
left: 50%;
transform: translate(-50%);
bottom: 3%;
font-size: 28rpx;
color: #fff;
.icon-shuangyoujiantou{
font-size: 26rpx;
position: absolute;
right:0;
}
}
.lastTxt{
display: flex;
align-items: center;
flex-direction: column;
bottom: -15%;
line-height: 1.3;
}
}
}
.productBox{
flex: 1;
width: 100%;
padding: 0rpx 15rpx;
box-sizing: border-box;
.productList{
width: 100%;
box-sizing: border-box;
margin-top: -5%;
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
.productItem{
padding-bottom: 15rpx;
border-bottom: 1rpx solid rgba(238, 238, 240, 1);
margin-bottom: 20rpx;
.top{
display: flex;
justify-content: flex-start;
.left {
width: 220rpx;
flex-shrink: 0; /* 防止左侧被压缩 */
margin-right: 20rpx;
.productImg {
border-radius: 20rpx;
width: 100%;
height: 180rpx; /* 固定图片高度 */
display: block;
}
}
.right{
flex: 1; /* 右侧占据剩余空间 */
min-width: 0; /* 允许文本截断 */
display: flex;
flex-direction: column;
.one{
font-size: 30rpx;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
}
.two{
font-size: 24rpx;
margin: 10rpx 0;
}
.three{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
margin-top: auto; /* 关键代码：自动顶部边距，推到底部 */
}
}
}
.bottom{
box-sizing: border-box;
margin: 10rpx 0;
width: 100%;
padding-left: 240rpx;
.bottomCon{
box-sizing: border-box;
width: 100%;
background: rgba(54, 57, 169, 0.05);
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
.left{
padding: 15rpx 0rpx 15rpx 20rpx;
font-size: 26rpx;
color: rgba(34, 35, 133, 1);
}
.right{
// display: flex;
// align-items: center;
padding: 15rpx 10rpx 15rpx 15rpx;
background: rgba(36, 37, 137, 1);
width: 20%;
font-size: 27rpx;
color: #fff;
border-radius: 0 10rpx 10rpx 0rpx; /* 左上 右上 右下 左下 */
}
}
}
}
}
}
}
.ulBox,.liBox{
padding-bottom: 30rpx;
display: flex;
......
pages/index/index.vue
......@@ -58,7 +58,7 @@
<view class="productTitle">
<view class="titleTxt">
<text style="font-size: 30rpx;font-weight: 500;">推荐产品</text>
<text class="more">更多 <text class="iconfont icon-youjiantou"></text> </text>
<text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text>
</view>
</view>
<view class="productList" v-if="cffpCourseInfos.length>0">
......@@ -66,18 +66,45 @@
<view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<view class="top">
<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
<view class="productDes">
111111
<view class="productDesBox">
{{item.fileSynopsis}}
</view>
</view>
<view class="bottom">
<view class="bottom" style="text-align: left !important;">
<view class="one">
{{item.fileTitle}}
</view>
<view class="two">
<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" style="font-size: 24rpx;color: rgba(166, 166, 166, 1);">已售{{item.salesNumber}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="productEmpty" v-else>
暂无数据
</view>
</view>
<uni-popup ref="joinPopup" type="center" background-color="#fff">
<view class="joinContent">
<view class="joinHeader">
<view class="iconfont icon-hezuo" style="font-size: 35rpx;color: #fff;"></view>
</view>
<view class="joinCon">
<view class="one">
您还未加盟为合伙人
</view>
<view class="two">
成为合伙人后，分享商品，好友购物得收益
</view>
</view>
<view class="joinFotter" @click="gotoApply">
去加盟拿收益
</view>
</view>
</uni-popup>
<!-- 以前的代码 -->
<view class="top">
<!-- <view class="compony">
......@@ -291,6 +318,13 @@
uni.$off('loginUpdate', this.queryAreaCenterInfo);
},
methods: {
gotoApply(){
uni.navigateTo({
url: '/pages/application-process/basic-info'
})
this.$refs.joinPopup.close()
},
jumpUrl(url) {
if (!url) {
return false
......@@ -371,6 +405,11 @@
api.courseList(param).then(res => {
if (res['success']) {
this.cffpCourseInfos = res['data']['data'];
if(this.cffpCourseInfos.length>0){
this.cffpCourseInfos.forEach(item=>{
item.coursePrice =Number(item.coursePrice).toFixed(2) || '0.00'
})
}
}
})
},
......@@ -414,11 +453,12 @@
}
}
if (this.cffpUserInfo.partnerType == null && featureItem.name == '邀请加盟') {
uni.showToast({
title: "您本人尚未加盟，您加盟后可邀请加盟",
duration: 2000,
icon: 'none'
});
this.$refs.joinPopup.open()
// uni.showToast({
// title: "您本人尚未加盟，您加盟后可邀请加盟",
// duration: 2000,
// icon: 'none'
// });
return false
} else if (featureItem.isOpen && featureItem.link) {
if (featureItem.key == '07') {
......@@ -497,7 +537,7 @@
height: auto;
overflow-y: auto; /* 关键属性 */
-webkit-overflow-scrolling: touch; /* 优化移动端滚动 */
background-color: rgba(238, 238, 238, 1);
background-color: rgba(235, 239, 247, 1);
.homeHeader{
box-sizing: border-box;
width: 100%;
......@@ -590,6 +630,7 @@
background-color: #fff;
margin-top: 15rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
.productTitle{
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx;
......@@ -602,6 +643,9 @@
.more{
font-size: 26rpx;
color: rgba(84, 84, 84, 1);
.icon-youjiantou{
font-size: 26rpx;
}
}
}
.productList{
......@@ -616,25 +660,120 @@
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
.top{
// background-color: pink;
width: 290rpx;
position: relative;
.productDes{
overflow: hidden;
.productDesBox{
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
background-color: ;
bottom: 0%;
background: rgba(0, 0, 0, 0.1);
width: 100%;
border-radius: 0 0 20rpx 20rpx; /* 左上 右上 右下 左下 */
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
}
.productImg{
border-radius: 20rpx;
display: block;
}
}
.bottom{
box-sizing: border-box;
padding: 10rpx 15rpx;
text-align: left;
width: 100%;
.one{
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
}
.two{
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10rpx;
}
}
}
}
}
.productEmpty{
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
}
.joinContent{
width: 500rpx;
// height: 300rpx;
border-radius: 30rpx;
background-color: #ffff;
padding: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
.joinHeader{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: rgba(54, 57, 169, 1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
}
.joinCon{
// padding: 20rpx 0;
.one{
font-size: 30rpx;
color: rgba(38, 41, 44, 1);
font-weight: 600;
text-align: center;
}
.two{
color: rgba(145, 144, 148, 1);
font-size: 26rpx;
text-align: center;
margin-top: 10rpx;
margin-bottom: 20rpx;
}
}
.joinFotter{
width: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 10rpx 0;
background: rgba(54, 57, 169, 1);
border-radius: 60rpx;
font-size: 28rpx;
}
}
// 之前的样式
// .top {
......
pages/personalCenter/personalCenter.vue
......@@ -590,6 +590,7 @@
padding: 10rpx 0;
background: rgba(54, 57, 169, 1);
border-radius: 60rpx;
font-size: 28rpx;
}
}
}
......
static/font1/demo_index.html
......@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xecc0;</span>
<div class="name">双右箭头</div>
<div class="code-name">&amp;#xecc0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">雷电</div>
<div class="code-name">&amp;#xe641;</div>
......@@ -258,9 +264,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1750063346486') format('woff2'),
url('iconfont.woff?t=1750063346486') format('woff'),
url('iconfont.ttf?t=1750063346486') format('truetype');
src: url('iconfont.woff2?t=1750144165277') format('woff2'),
url('iconfont.woff?t=1750144165277') format('woff'),
url('iconfont.ttf?t=1750144165277') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -287,6 +293,15 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-shuangyoujiantou"></span>
<div class="name">
双右箭头
</div>
<div class="code-name">.icon-shuangyoujiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-leidian"></span>
<div class="name">
雷电
......@@ -594,6 +609,14 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuangyoujiantou"></use>
</svg>
<div class="name">双右箭头</div>
<div class="code-name">#icon-shuangyoujiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-leidian"></use>
</svg>
<div class="name">雷电</div>
......
static/font1/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 4933433 */
src: url('iconfont.woff2?t=1750063346486') format('woff2'),
url('iconfont.woff?t=1750063346486') format('woff'),
url('iconfont.ttf?t=1750063346486') format('truetype');
src: url('iconfont.woff2?t=1750144165277') format('woff2'),
url('iconfont.woff?t=1750144165277') format('woff'),
url('iconfont.ttf?t=1750144165277') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-shuangyoujiantou:before {
content: "\ecc0";
}
.icon-leidian:before {
content: "\e641";
}
......
static/font1/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/font1/iconfont.json
......@@ -6,6 +6,13 @@
"description": "",
"glyphs": [
{
"icon_id": "6999657",
"name": "双右箭头",
"font_class": "shuangyoujiantou",
"unicode": "ecc0",
"unicode_decimal": 60608
},
{
"icon_id": "39934155",
"name": "雷电",
"font_class": "leidian",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment