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

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 class="liebiao">
<view v-if="orderList.length" class="flex text-center flex-wrap list-view"> <view v-if="orderList.length" class="flex text-center flex-wrap list-view">
<view class="margin-bottom-sm radius touxiang-left"> <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"> <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> @click.stop="saveImgs(item.avatar)" mode="aspectFill"></image>
</view> </view>
<view class="list-right"> <view class="list-right">
@ -16,63 +16,32 @@
<view class="list-right-top-name"> <view class="list-right-top-name">
{{ item.name?item.name:item.userName }} {{ item.name?item.name:item.userName }}
</view> </view>
<view class="keyuyue">
{{ item.phone}}
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="therapist-mian"> <view class="therapist-mian">
<view class="therapist-mian-top"> <view class="therapist-mian-top" style="display: flex; justify-content: space-between;">
<!-- <view class="therap-pin"> <view class="therap-pin">
<span>联系电话</span>
<span class="therapist-mian-view-text">
{{ item.phone}}
</span>
</view> -->
<view class="therap-pin" >
<span>邀请码:</span> <span>邀请码:</span>
<span class="therapist-mian-view-text"> <span class="therapist-mian-view-text">{{ item.invitationCode }}</span>
{{ item.invitationCode}} </view>
<view class="keyuyue">
<span style="color: #8d500f; font-size: 24rpx;">
<span style="color: #333;">电话</span>{{ item.phone }}
</span> </span>
</view> </view>
</view> </view>
</view> </view>
<view class="therap-pin2"> <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 v-for="(qdsCodeItem, qdsCodeIndex) in item.qdsCodeList" :key="qdsCodeIndex"
</view> :class="[qdsCodeIndex % 2 === 0 ? 'left-align' : 'right-align']">
<view class="" > <span>{{ qdsCodeItem.name }}:</span>
<span>{{ qdsCodeItem.name}}:</span> <span class="therapist-mian-view-text" style="color: #333;">{{ qdsCodeItem.rate }}%</span>
<span class="therapist-mian-view-text">
{{ qdsCodeItem.rate}}%
</span>
</view> </view>
</view> </view>
</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>
</view> </view>
<empty v-if="orderList.length == 0"></empty> <empty v-if="orderList.length == 0"></empty>
@ -93,11 +62,11 @@
limit: 10, limit: 10,
current: 0, current: 0,
myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '', myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
navName:'', navName: '',
} }
}, },
onLoad(e) { onLoad(e) {
this.navName=e.navName this.navName = e.navName
let that = this let that = this
that.getlist() that.getlist()
}, },
@ -125,95 +94,10 @@
let data = { let data = {
page: this.page, page: this.page,
limit: this.limit, limit: this.limit,
// userId:this.$queue.getData('userId') userId:this.$queue.getData('userId')
userId:673
} }
this.$Request.get("/app/commission/ywy/queryQds", data).then(res => { this.$Request.get("/app/commission/ywy/queryQds", data).then(res => {
console.log(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 (res.code == 0) {
if (this.page == 1) { if (this.page == 1) {
this.orderList = res.data.list this.orderList = res.data.list
@ -239,45 +123,53 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/.u-drawer,/deep/.u-mask-show{ /deep/.u-drawer,
z-index:11 !important; /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-weight: 400;
font-size: 22rpx; font-size: 22rpx;
color: #848484; color: #848484;
margin:5px 0px; margin: 5px 0px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */ -webkit-line-clamp: 2;
/* 显示的行数,可以根据需要修改 */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: left; text-align: left;
} }
.touxiang-frame{
.touxiang-frame {
position: absolute; position: absolute;
width: 100rpx; width: 100rpx;
height: 38rpx; height: 38rpx;
left: 44rpx; left: 44rpx;
top:140rpx; top: 140rpx;
} }
.dituList{
.dituList {
width: 85%; width: 85%;
height: 173px; height: 173px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.liebiao{
.liebiao {
height: 100vh; height: 100vh;
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content-head{
.content-head {
position: fixed; position: fixed;
top: 0rpx; top: 0rpx;
z-index: 999; z-index: 999;
@ -290,21 +182,25 @@
background-size: cover; background-size: cover;
// overflow: auto; // overflow: auto;
} }
.therapist-bottom-dingwei-text{
.therapist-bottom-dingwei-text {
font-size: 29rpx; font-size: 29rpx;
color: #848485; color: #848485;
} }
.therapist-bottom-dingwei{
.therapist-bottom-dingwei {
width: 17.36rpx; width: 17.36rpx;
height: 20.14rpx; height: 20.14rpx;
margin-right:3px; margin-right: 3px;
} }
.therapist-bottom-img{
.therapist-bottom-img {
width: 22.22rpx; width: 22.22rpx;
height: 22.22rpx; height: 22.22rpx;
margin-right:3px; margin-right: 3px;
} }
.therapist-mian-bottom-text{
.therapist-mian-bottom-text {
font-weight: bold; font-weight: bold;
font-size: 30rpx; font-size: 30rpx;
color: #222222; color: #222222;
@ -313,9 +209,10 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
width:60px; width: 60px;
} }
.therapist-mian-bottom{
.therapist-mian-bottom {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -323,37 +220,43 @@
align-items: center; align-items: center;
margin: 5px 0px 3px 0px; margin: 5px 0px 3px 0px;
} }
.therapist-mian-view-text span{
.therapist-mian-view-text span {
font-weight: 500; font-weight: 500;
font-size: 26rpx; font-size: 26rpx;
color: #222222; color: #222222;
} }
.therapist-mian-view span{
.therapist-mian-view span {
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #7C8187; color: #7C8187;
margin-right: 10px; margin-right: 10px;
} }
.therapist-mian-view image{
.therapist-mian-view image {
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
margin-right: 2px; margin-right: 2px;
} }
.therapist-mian-view{
.therapist-mian-view {
display: flex; display: flex;
flex-direction:row; flex-direction: row;
align-items: center; align-items: center;
} }
.therapist-mian-top{
width: 100%; .therapist-mian-top {
display: flex; display: flex; /* 使用Flexbox布局 */
flex-direction:row; justify-content: space-between; /* 在两端对齐子元素 */
} }
.therapist-mian{
.therapist-mian {
width: 100%; width: 100%;
display: flex; display: flex;
} }
.list-right-top-bottom{
.list-right-top-bottom {
width: 100%; width: 100%;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
@ -361,11 +264,13 @@
color: #333333; color: #333333;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */ -webkit-line-clamp: 2;
/* 显示的行数,可以根据需要修改 */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.list-right-top-name{
.list-right-top-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -374,40 +279,40 @@
font-size: 32rpx; font-size: 32rpx;
color: #13141A; color: #13141A;
} }
.keyuyue{
padding: 0rpx 10rpx; .keyuyue {
height: 44rpx;
display: flex; display: flex;
flex-direction: row; align-items: center; /* 如果需要垂直居中对齐 */
align-items: center; justify-content: flex-end;
// background: #eefdf8; width: 149px;
border-radius: 30rpx 20rpx 20rpx 30rpx ;
color:#8d500f;
font-size: 24rpx;
} }
.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-size: 28rpx 28rpx;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 30rpx; width: 30rpx;
height: 30rpx; height: 30rpx;
border-radius:8rpx; border-radius: 8rpx;
margin-top: 8rpx; margin-top: 8rpx;
} }
.timea-fu{
.timea-fu {
font-size: 24rpx; font-size: 24rpx;
color: #2dbe93; color: #2dbe93;
line-height: 44rpx; line-height: 44rpx;
margin-left: 8rpx; margin-left: 8rpx;
margin-right: 5rpx; margin-right: 5rpx;
} }
.timea-time{
.timea-time {
font-size: 25rpx; font-size: 25rpx;
color: #2dbe93; color: #2dbe93;
line-height: 44rpx; line-height: 44rpx;
padding-right: 10rpx; padding-right: 10rpx;
} }
.keyuyue .keyuyue-btn{
.keyuyue .keyuyue-btn {
width: 50%; width: 50%;
height: 100%; height: 100%;
font-weight: 400; font-weight: 400;
@ -418,37 +323,43 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.keyuyue-jinri{
.keyuyue-jinri {
border-top-left-radius: 7rpx; border-top-left-radius: 7rpx;
border-bottom-left-radius: 7rpx; border-bottom-left-radius: 7rpx;
border-radius: 7rpx; border-radius: 7rpx;
color: #fff; color: #fff;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495); background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
} }
.keyuyue-time{
.keyuyue-time {
border-top-right-radius: 7rpx; border-top-right-radius: 7rpx;
border-bottom-right-radius: 7rpx; border-bottom-right-radius: 7rpx;
color: #039E89; color: #039E89;
background: #EBEBEB; background: #EBEBEB;
} }
.list-right-top-view image{
.list-right-top-view image {
width: 168.75rpx; width: 168.75rpx;
height: 40.97rpx; height: 40.97rpx;
} }
.list-right-top-view{
.list-right-top-view {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.list-right-top{
.list-right-top {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.list-right{
.list-right {
width: 72%; width: 72%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -456,6 +367,7 @@
justify-content: space-evenly; justify-content: space-evenly;
padding: 16rpx; padding: 16rpx;
} }
.zpmore_view { .zpmore_view {
position: absolute; position: absolute;
bottom: -20rpx; bottom: -20rpx;
@ -470,11 +382,13 @@
font-size: 24rpx; font-size: 24rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
.zpmore_view_left{
.zpmore_view_left {
width: 68.75rpx; width: 68.75rpx;
height: 29.86rpx; height: 29.86rpx;
} }
.img-span{
.img-span {
padding: 1px 5px; padding: 1px 5px;
font-weight: 400; font-weight: 400;
font-size: 8px; font-size: 8px;
@ -487,6 +401,7 @@
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
} }
// .zpmore_view_left image{ // .zpmore_view_left image{
// position: absolute; // position: absolute;
// bottom: 0px; // bottom: 0px;
@ -495,24 +410,27 @@
// width: 68.75rpx; // width: 68.75rpx;
// height: 29.86rpx; // height: 29.86rpx;
// } // }
.touxiang{ .touxiang {
width: 202.08rpx; width: 202.08rpx;
height: 306.94rpx; height: 306.94rpx;
} }
.touxiang-left-content{
.touxiang-left-content {
width: 180rpx; width: 180rpx;
//width: 235.08rpx; //width: 235.08rpx;
height: auto; height: auto;
border-radius: 10rpx; border-radius: 10rpx;
position: relative; position: relative;
} }
.touxiang-left-content-img{
.touxiang-left-content-img {
width: 150rpx; width: 150rpx;
height: 150rpx; height: 150rpx;
border-radius:120rpx; border-radius: 120rpx;
margin: 14rpx 22rpx; margin: 14rpx 22rpx;
} }
.touxiang-left-view{
.touxiang-left-view {
width: 100%; width: 100%;
height: 126px; height: 126px;
border-radius: 18rpx; border-radius: 18rpx;
@ -526,7 +444,7 @@
position: relative; position: relative;
} }
.touxiang-left{ .touxiang-left {
width: 100%; width: 100%;
/* padding: 10px; */ /* padding: 10px; */
display: flex; display: flex;
@ -534,21 +452,23 @@
// justify-content: space-between; // justify-content: space-between;
align-items: baseline; align-items: baseline;
} }
.list-view{
.list-view {
// margin-top: 52px; // margin-top: 52px;
padding: 0 20rpx; padding: 0 20rpx;
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
} }
/deep/.justify-between{ /deep/.justify-between {
// width: 100px; // width: 100px;
// height: 32px; // height: 32px;
line-height: 32px; line-height: 32px;
border-radius: 4px; border-radius: 4px;
margin-left: 10px; margin-left: 10px;
} }
.padding-top-sm{
.padding-top-sm {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
@ -556,13 +476,16 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
/deep/.page-box{
/deep/.page-box {
background: none !important; background: none !important;
} }
/deep/.u-action{
/deep/.u-action {
display: none; display: none;
} }
.content{
.content {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-position: center center; background-position: center center;
@ -570,23 +493,28 @@
background-size: cover; background-size: cover;
// overflow: auto; // overflow: auto;
} }
/deep/.u-content{
/deep/.u-content {
border-radius: 30px !important; border-radius: 30px !important;
} }
.flex-sub{
.flex-sub {
width: 353rpx; width: 353rpx;
height: 63rpx !important; height: 63rpx !important;
} }
.localName{
.localName {
margin-left: 4rpx; margin-left: 4rpx;
font-weight: bold; font-weight: bold;
font-size: 33rpx; font-size: 33rpx;
color: #333333; color: #333333;
} }
.dingwei-img{
width:33.33rpx; .dingwei-img {
height:37.5rpx; width: 33.33rpx;
height: 37.5rpx;
} }
page { page {
background-color: #F7F7F7; background-color: #F7F7F7;
} }
@ -855,7 +783,8 @@
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
} }
.make-now{
.make-now {
background: linear-gradient(90deg, rgb(1, 156, 136), rgb(15, 167, 139), rgb(53, 196, 149)); background: linear-gradient(90deg, rgb(1, 156, 136), rgb(15, 167, 139), rgb(53, 196, 149));
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
width: 200rpx; width: 200rpx;
@ -864,42 +793,80 @@
line-height: 30px; line-height: 30px;
margin-top: 5px; margin-top: 5px;
} }
.therap-pin{
.therap-pin {
display: flex; display: flex;
align-items: flex-end; align-items: center; /* 垂直居中对齐 */
margin-right: 10rpx; margin-right: 10rpx; /* 根据需要调整间距 */
flex-direction: row;
align-items: center;
} }
.therap-pin span:nth-child(2){
.therap-pin span:nth-child(2) {
color: #019c88; color: #019c88;
} }
.therap-pin span:nth-child(1){
.therap-pin span:nth-child(1) {
color: #666; color: #666;
margin-right: 10rpx; margin-right: 10rpx;
} }
.terap-button{
.terap-button {
background: linear-gradient(90deg, #019C88, #0FA78B, #35C495); background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
color: #ffffff; color: #ffffff;
width:130rpx; width: 130rpx;
height: 60rpx; height: 60rpx;
border-radius: 10upx; border-radius: 10upx;
line-height: 58rpx; line-height: 58rpx;
} }
.therap-title{
.therap-title {
width: 100%; width: 100%;
display: flex; display: flex;
} }
.therap-pin2{
.therap-pin2 {
width: 100%; width: 100%;
display: flex; 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; 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> </style>