业务员-我的渠道商:样式调整

This commit is contained in:
1378012178@qq.com 2025-02-14 16:56:58 +08:00
parent a710b01583
commit 2303320106
1 changed files with 872 additions and 905 deletions

View File

@ -3,10 +3,10 @@
<view class="liebiao">
<view v-if="orderList.length" class="flex text-center flex-wrap list-view">
<view class="margin-bottom-sm radius touxiang-left">
<view class="flex align-center touxiang-left-view" v-for="(item, index) in orderList" :key='index'
>
<view class="flex align-center touxiang-left-view" v-for="(item, index) in orderList" :key='index'>
<view class="touxiang-left-content">
<image class="touxiang-left-content-img" :src="item.avatar ? item.avatar : '../../static/logo.png'"
<image class="touxiang-left-content-img"
:src="item.avatar ? item.avatar : '../../static/logo.png'"
@click.stop="saveImgs(item.avatar)" mode="aspectFill"></image>
</view>
<view class="list-right">
@ -16,63 +16,32 @@
<view class="list-right-top-name">
{{ item.name?item.name:item.userName }}
</view>
<view class="keyuyue">
{{ item.phone}}
</view>
</view>
</view>
</view>
<view class="therapist-mian">
<view class="therapist-mian-top">
<!-- <view class="therap-pin">
<span>联系电话</span>
<span class="therapist-mian-view-text">
{{ item.phone}}
</span>
</view> -->
<view class="therap-pin" >
<view class="therapist-mian-top" style="display: flex; justify-content: space-between;">
<view class="therap-pin">
<span>邀请码:</span>
<span class="therapist-mian-view-text">
{{ item.invitationCode}}
<span class="therapist-mian-view-text">{{ item.invitationCode }}</span>
</view>
<view class="keyuyue">
<span style="color: #8d500f; font-size: 24rpx;">
<span style="color: #333;">电话</span>{{ item.phone }}
</span>
</view>
</view>
</view>
<view class="therap-pin2">
<view class="" v-for="(qdsCodeItem, qdsCodeIndex) in item.qdsCodeList"> <view class="" > <span>{{ qdsCodeItem.name}}:</span> <span class="therapist-mian-view-text"> {{ qdsCodeItem.rate}}% </span>
</view>
<view class="" >
<span>{{ qdsCodeItem.name}}:</span>
<span class="therapist-mian-view-text">
{{ qdsCodeItem.rate}}%
</span>
<view v-for="(qdsCodeItem, qdsCodeIndex) in item.qdsCodeList" :key="qdsCodeIndex"
:class="[qdsCodeIndex % 2 === 0 ? 'left-align' : 'right-align']">
<span>{{ qdsCodeItem.name }}:</span>
<span class="therapist-mian-view-text" style="color: #333;">{{ qdsCodeItem.rate }}%</span>
</view>
</view>
</view>
</view>
<!-- <view class="therapist-mian" v-for="(qdsCodeItem, qdsCodeIndex) in item.qdsCodeList">
<view class="therapist-mian-top">
<view class="therap-pin" >
<span>{{ qdsCodeItem.name}}:</span>
<span class="therapist-mian-view-text">
{{ qdsCodeItem.rate}}%
</span>
</view>
</view>
</view>
<view style="position: absolute;bottom: 0px;left: 0px;">
<view class="" v-for="(qdsCodeItem, qdsCodeIndex) in item.qdsCodeList">
<view class="">
<view class="therap-pin" >
<span>{{ qdsCodeItem.name}}:</span>
<span class="therapist-mian-view-text">
{{ qdsCodeItem.rate}}%
</span>
</view>
</view>
</view>
</view>-->
</view>
</view>
</view>
<empty v-if="orderList.length == 0"></empty>
@ -93,11 +62,11 @@
limit: 10,
current: 0,
myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
navName:'',
navName: '',
}
},
onLoad(e) {
this.navName=e.navName
this.navName = e.navName
let that = this
that.getlist()
},
@ -125,95 +94,10 @@
let data = {
page: this.page,
limit: this.limit,
// userId:this.$queue.getData('userId')
userId:673
userId:this.$queue.getData('userId')
}
this.$Request.get("/app/commission/ywy/queryQds", data).then(res => {
console.log(res)
res ={
"msg": "success",
"code": 0,
"data": {
"totalCount": 2,
"pageSize": 10,
"totalPage": 1,
"currPage": 1,
"list": [
{
"id": 5,
"userId": 628,
"name": "渠道商1",
"phone": "13844885599",
"lm": "地推",
"avatar": "https://wx.sjajk.com/file/uploadPath/2024/08/30/20240830171934530782.jpeg",
"userName": null,
"invitationCode": "772992",
"remarks": "备注",
"status": 1,
"opinion": "",
"createTime": "2024-11-08 14:04:44",
"approveTime": "2025-01-07 15:40:24",
"approveUser": 17,
"startTime": null,
"endTime": null,
"page": null,
"limit": null,
"userPage": null,
"userLimit": null,
"rate": null,
"qdmc": null,
"qdsCodeList": [
{
"id": null,
"userId": null,
"name": "酒店",
"code": null,
"lm": null,
"rate": 1,
"cost": null,
"startDate": null,
"endDate": null,
"address": null,
"remarks": null,
"codeImage": null,
"createTime": null,
"qdsName": null,
"avatar": null,
"userName": null,
"phone": null,
"page": null,
"limit": null,
"userPage": null,
"userLimit": null
},
{
"id": null,
"userId": null,
"name": "电梯渠道",
"code": null,
"lm": null,
"rate": 0.2,
"cost": null,
"startDate": null,
"endDate": null,
"address": null,
"remarks": null,
"codeImage": null,
"createTime": null,
"qdsName": null,
"avatar": null,
"userName": null,
"phone": null,
"page": null,
"limit": null,
"userPage": null,
"userLimit": null
}
]
}
]
}
}
if (res.code == 0) {
if (this.page == 1) {
this.orderList = res.data.list
@ -239,45 +123,53 @@
</script>
<style lang="scss" scoped>
/deep/.u-drawer,/deep/.u-mask-show{
z-index:11 !important;
/deep/.u-drawer,
/deep/.u-mask-show {
z-index: 11 !important;
}
/deep/.u-drawer-content-visible{
z-index:99 !important;
/deep/.u-drawer-content-visible {
z-index: 99 !important;
}
.item-view-jianjie{
.item-view-jianjie {
font-weight: 400;
font-size: 22rpx;
color: #848484;
margin:5px 0px;
margin: 5px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */
-webkit-line-clamp: 2;
/* 显示的行数,可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.touxiang-frame{
.touxiang-frame {
position: absolute;
width: 100rpx;
height: 38rpx;
left: 44rpx;
top:140rpx;
top: 140rpx;
}
.dituList{
.dituList {
width: 85%;
height: 173px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.liebiao{
.liebiao {
height: 100vh;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.content-head{
.content-head {
position: fixed;
top: 0rpx;
z-index: 999;
@ -290,21 +182,25 @@
background-size: cover;
// overflow: auto;
}
.therapist-bottom-dingwei-text{
.therapist-bottom-dingwei-text {
font-size: 29rpx;
color: #848485;
}
.therapist-bottom-dingwei{
.therapist-bottom-dingwei {
width: 17.36rpx;
height: 20.14rpx;
margin-right:3px;
margin-right: 3px;
}
.therapist-bottom-img{
.therapist-bottom-img {
width: 22.22rpx;
height: 22.22rpx;
margin-right:3px;
margin-right: 3px;
}
.therapist-mian-bottom-text{
.therapist-mian-bottom-text {
font-weight: bold;
font-size: 30rpx;
color: #222222;
@ -313,9 +209,10 @@
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
width:60px;
width: 60px;
}
.therapist-mian-bottom{
.therapist-mian-bottom {
width: 100%;
display: flex;
flex-direction: row;
@ -323,37 +220,43 @@
align-items: center;
margin: 5px 0px 3px 0px;
}
.therapist-mian-view-text span{
.therapist-mian-view-text span {
font-weight: 500;
font-size: 26rpx;
color: #222222;
}
.therapist-mian-view span{
.therapist-mian-view span {
font-weight: 400;
font-size: 26rpx;
color: #7C8187;
margin-right: 10px;
}
.therapist-mian-view image{
.therapist-mian-view image {
width: 28rpx;
height: 28rpx;
margin-right: 2px;
}
.therapist-mian-view{
.therapist-mian-view {
display: flex;
flex-direction:row;
flex-direction: row;
align-items: center;
}
.therapist-mian-top{
width: 100%;
display: flex;
flex-direction:row;
.therapist-mian-top {
display: flex; /* 使用Flexbox布局 */
justify-content: space-between; /* 在两端对齐子元素 */
}
.therapist-mian{
.therapist-mian {
width: 100%;
display: flex;
}
.list-right-top-bottom{
.list-right-top-bottom {
width: 100%;
text-align: left;
font-weight: 400;
@ -361,11 +264,13 @@
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */
-webkit-line-clamp: 2;
/* 显示的行数,可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
}
.list-right-top-name{
.list-right-top-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -374,40 +279,40 @@
font-size: 32rpx;
color: #13141A;
}
.keyuyue{
padding: 0rpx 10rpx;
height: 44rpx;
.keyuyue {
display: flex;
flex-direction: row;
align-items: center;
// background: #eefdf8;
border-radius: 30rpx 20rpx 20rpx 30rpx ;
color:#8d500f;
font-size: 24rpx;
align-items: center; /* 如果需要垂直居中对齐 */
justify-content: flex-end;
width: 149px;
}
.timea-img{
background:#2dbe93 url('../../../static/timea.png') 2rpx 1rpx;
.timea-img {
background: #2dbe93 url('../../../static/timea.png') 2rpx 1rpx;
background-size: 28rpx 28rpx;
background-repeat: no-repeat;
width: 30rpx;
height: 30rpx;
border-radius:8rpx;
border-radius: 8rpx;
margin-top: 8rpx;
}
.timea-fu{
.timea-fu {
font-size: 24rpx;
color: #2dbe93;
line-height: 44rpx;
margin-left: 8rpx;
margin-right: 5rpx;
}
.timea-time{
.timea-time {
font-size: 25rpx;
color: #2dbe93;
line-height: 44rpx;
padding-right: 10rpx;
}
.keyuyue .keyuyue-btn{
.keyuyue .keyuyue-btn {
width: 50%;
height: 100%;
font-weight: 400;
@ -418,37 +323,43 @@
align-items: center;
justify-content: center;
}
.keyuyue-jinri{
.keyuyue-jinri {
border-top-left-radius: 7rpx;
border-bottom-left-radius: 7rpx;
border-radius: 7rpx;
color: #fff;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
}
.keyuyue-time{
.keyuyue-time {
border-top-right-radius: 7rpx;
border-bottom-right-radius: 7rpx;
color: #039E89;
background: #EBEBEB;
}
.list-right-top-view image{
.list-right-top-view image {
width: 168.75rpx;
height: 40.97rpx;
}
.list-right-top-view{
.list-right-top-view {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.list-right-top{
.list-right-top {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.list-right{
.list-right {
width: 72%;
height: 100%;
display: flex;
@ -456,6 +367,7 @@
justify-content: space-evenly;
padding: 16rpx;
}
.zpmore_view {
position: absolute;
bottom: -20rpx;
@ -470,11 +382,13 @@
font-size: 24rpx;
margin-left: 10rpx;
}
.zpmore_view_left{
.zpmore_view_left {
width: 68.75rpx;
height: 29.86rpx;
}
.img-span{
.img-span {
padding: 1px 5px;
font-weight: 400;
font-size: 8px;
@ -487,6 +401,7 @@
margin-bottom: 5px;
margin-right: 5px;
}
// .zpmore_view_left image{
// position: absolute;
// bottom: 0px;
@ -495,24 +410,27 @@
// width: 68.75rpx;
// height: 29.86rpx;
// }
.touxiang{
.touxiang {
width: 202.08rpx;
height: 306.94rpx;
}
.touxiang-left-content{
.touxiang-left-content {
width: 180rpx;
//width: 235.08rpx;
height: auto;
border-radius: 10rpx;
position: relative;
}
.touxiang-left-content-img{
.touxiang-left-content-img {
width: 150rpx;
height: 150rpx;
border-radius:120rpx;
border-radius: 120rpx;
margin: 14rpx 22rpx;
}
.touxiang-left-view{
.touxiang-left-view {
width: 100%;
height: 126px;
border-radius: 18rpx;
@ -526,7 +444,7 @@
position: relative;
}
.touxiang-left{
.touxiang-left {
width: 100%;
/* padding: 10px; */
display: flex;
@ -534,21 +452,23 @@
// justify-content: space-between;
align-items: baseline;
}
.list-view{
.list-view {
// margin-top: 52px;
padding: 0 20rpx;
height: 100%;
justify-content: space-between;
}
/deep/.justify-between{
/deep/.justify-between {
// width: 100px;
// height: 32px;
line-height: 32px;
border-radius: 4px;
margin-left: 10px;
}
.padding-top-sm{
.padding-top-sm {
width: 95%;
margin: 0 auto;
display: flex;
@ -556,13 +476,16 @@
align-items: center;
justify-content: space-between;
}
/deep/.page-box{
/deep/.page-box {
background: none !important;
}
/deep/.u-action{
/deep/.u-action {
display: none;
}
.content{
.content {
width: 100%;
height: 100vh;
background-position: center center;
@ -570,23 +493,28 @@
background-size: cover;
// overflow: auto;
}
/deep/.u-content{
/deep/.u-content {
border-radius: 30px !important;
}
.flex-sub{
.flex-sub {
width: 353rpx;
height: 63rpx !important;
}
.localName{
.localName {
margin-left: 4rpx;
font-weight: bold;
font-size: 33rpx;
color: #333333;
}
.dingwei-img{
width:33.33rpx;
height:37.5rpx;
.dingwei-img {
width: 33.33rpx;
height: 37.5rpx;
}
page {
background-color: #F7F7F7;
}
@ -855,7 +783,8 @@
height: 100%;
border-radius: 50%;
}
.make-now{
.make-now {
background: linear-gradient(90deg, rgb(1, 156, 136), rgb(15, 167, 139), rgb(53, 196, 149));
color: rgb(255, 255, 255);
width: 200rpx;
@ -864,42 +793,80 @@
line-height: 30px;
margin-top: 5px;
}
.therap-pin{
.therap-pin {
display: flex;
align-items: flex-end;
margin-right: 10rpx;
flex-direction: row;
align-items: center;
align-items: center; /* 垂直居中对齐 */
margin-right: 10rpx; /* 根据需要调整间距 */
}
.therap-pin span:nth-child(2){
.therap-pin span:nth-child(2) {
color: #019c88;
}
.therap-pin span:nth-child(1){
.therap-pin span:nth-child(1) {
color: #666;
margin-right: 10rpx;
}
.terap-button{
.terap-button {
background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
color: #ffffff;
width:130rpx;
width: 130rpx;
height: 60rpx;
border-radius: 10upx;
line-height: 58rpx;
}
.therap-title{
.therap-title {
width: 100%;
display: flex;
}
.therap-pin2{
.therap-pin2 {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.therap-pin2 span:nth-child(2){
color: #049E89;;
.therap-pin2 span:nth-child(2) {
color: #049E89;
;
}
.therap-pin2 span:nth-child(1){
.therap-pin2 span:nth-child(1) {
color: #666;
}
.item-left, .item-right {
width: calc(50% - 10px); /* 减去一定的间距,避免完全紧挨着 */
box-sizing: border-box;
margin-bottom: 10px; /* 根据需要调整上下间距 */
}
.left-align {
flex: 1 1 48%; /* 占据大约一半宽度,留有空间避免换行 */
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: 400;
font-size: 26rpx;
color: #7C8187;
margin-right: 10px; /* 给右侧留出一定间距 */
}
.right-align {
flex: 1 1 48%;
display: flex;
align-items: center;
justify-content: flex-end;
font-weight: 400;
font-size: 26rpx;
color: #7C8187;
margin-left: auto; /* 将此项推到最右边 */
}
.phone-text {
color: inherit; /* 使用普通字体颜色 */
}
</style>