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

pages/my/applySalesperson/channelMerchants.vue

@@ -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="therapist-mian-top" style="display: flex; justify-content: space-between;">
-									<!-- <view class="therap-pin">
-										<span>联系电话</span>
-										<span class="therapist-mian-view-text">
-											{{ item.phone}}
-										</span>
-									</view> -->
 							        <view class="therap-pin">
 							            <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>
 							        </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 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 class="therapist-mian-view-text">
+							        <span class="therapist-mian-view-text" style="color: #333;">{{ qdsCodeItem.rate }}%</span>
-											{{ 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>
@@ -125,95 +94,10 @@
 				let data = {
 					page: this.page,
 					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 => {
 					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,12 +123,15 @@
 </script>
 
 <style lang="scss" scoped>
-	/deep/.u-drawer,/deep/.u-mask-show{
+	/deep/.u-drawer,
+	/deep/.u-mask-show {
 		z-index: 11 !important;
 	}
+
 	/deep/.u-drawer-content-visible {
 		z-index: 99 !important;
 	}
+
 	.item-view-jianjie {
 		font-weight: 400;
 		font-size: 22rpx;
@@ -252,11 +139,13 @@
 		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 {
 		position: absolute;
 		width: 100rpx;
@@ -264,6 +153,7 @@
 		left: 44rpx;
 		top: 140rpx;
 	}
+
 	.dituList {
 		width: 85%;
 		height: 173px;
@@ -271,12 +161,14 @@
 		flex-direction: column;
 		justify-content: space-around;
 	}
+
 	.liebiao {
 		height: 100vh;
 		margin-top: 20px;
 		display: flex;
 		flex-direction: column;
 	}
+
 	.content-head {
 		position: fixed;
 		top: 0rpx;
@@ -290,20 +182,24 @@
 		background-size: cover;
 		// overflow: auto;
 	}
+
 	.therapist-bottom-dingwei-text {
 		font-size: 29rpx;
 		color: #848485;
 	}
+
 	.therapist-bottom-dingwei {
 		width: 17.36rpx;
 		height: 20.14rpx;
 		margin-right: 3px;
 	}
+
 	.therapist-bottom-img {
 		width: 22.22rpx;
 		height: 22.22rpx;
 		margin-right: 3px;
 	}
+
 	.therapist-mian-bottom-text {
 		font-weight: bold;
 		font-size: 30rpx;
@@ -315,6 +211,7 @@
 		overflow: hidden;
 		width: 60px;
 	}
+
 	.therapist-mian-bottom {
 		width: 100%;
 		display: flex;
@@ -323,36 +220,42 @@
 		align-items: center;
 		margin: 5px 0px 3px 0px;
 	}
+
 	.therapist-mian-view-text span {
 		font-weight: 500;
 		font-size: 26rpx;
 		color: #222222;
 	}
+
 	.therapist-mian-view span {
 		font-weight: 400;
 		font-size: 26rpx;
 		color: #7C8187;
 		margin-right: 10px;
 	}
+
 	.therapist-mian-view image {
 		width: 28rpx;
 		height: 28rpx;
 		margin-right: 2px;
 	}
+
 	.therapist-mian-view {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
+
 	.therapist-mian-top {
-		width: 100%;
+	    display: flex; /* 使用Flexbox布局 */
-		display: flex;
+	    justify-content: space-between; /* 在两端对齐子元素 */
-		flex-direction:row;
 	}
+
 	.therapist-mian {
 		width: 100%;
 		display: flex;
 	}
+
 	.list-right-top-bottom {
 		width: 100%;
 		text-align: left;
@@ -361,10 +264,12 @@
 		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 {
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -374,17 +279,14 @@
 		font-size: 32rpx;
 		color: #13141A;
 	}
+
 	.keyuyue {
-		padding: 0rpx 10rpx;
-		height: 44rpx;
 	    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;
 		background-size: 28rpx 28rpx;
@@ -394,6 +296,7 @@
 		border-radius: 8rpx;
 		margin-top: 8rpx;
 	}
+
 	.timea-fu {
 		font-size: 24rpx;
 		color: #2dbe93;
@@ -401,12 +304,14 @@
 		margin-left: 8rpx;
 		margin-right: 5rpx;
 	}
+
 	.timea-time {
 		font-size: 25rpx;
 		color: #2dbe93;
 		line-height: 44rpx;
 		padding-right: 10rpx;
 	}
+
 	.keyuyue .keyuyue-btn {
 		width: 50%;
 		height: 100%;
@@ -418,6 +323,7 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.keyuyue-jinri {
 		border-top-left-radius: 7rpx;
 		border-bottom-left-radius: 7rpx;
@@ -425,16 +331,19 @@
 		color: #fff;
 		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
 	}
+
 	.keyuyue-time {
 		border-top-right-radius: 7rpx;
 		border-bottom-right-radius: 7rpx;
 		color: #039E89;
 		background: #EBEBEB;
 	}
+
 	.list-right-top-view image {
 		width: 168.75rpx;
 		height: 40.97rpx;
 	}
+
 	.list-right-top-view {
 		width: 100%;
 		display: flex;
@@ -442,12 +351,14 @@
 		align-items: center;
 		justify-content: space-between;
 	}
+
 	.list-right-top {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}
+
 	.list-right {
 		width: 72%;
 		height: 100%;
@@ -456,6 +367,7 @@
 		justify-content: space-evenly;
 		padding: 16rpx;
 	}
+
 	.zpmore_view {
 		position: absolute;
 		bottom: -20rpx;
@@ -470,10 +382,12 @@
 		font-size: 24rpx;
 		margin-left: 10rpx;
 	}
+
 	.zpmore_view_left {
 		width: 68.75rpx;
 		height: 29.86rpx;
 	}
+
 	.img-span {
 		padding: 1px 5px;
 		font-weight: 400;
@@ -487,6 +401,7 @@
 		margin-bottom: 5px;
 		margin-right: 5px;
 	}
+
 	// .zpmore_view_left image{
 	// 	position: absolute;
 	// 	bottom: 0px;
@@ -499,6 +414,7 @@
 		width: 202.08rpx;
 		height: 306.94rpx;
 	}
+
 	.touxiang-left-content {
 		width: 180rpx;
 		//width: 235.08rpx;
@@ -506,12 +422,14 @@
 		border-radius: 10rpx;
 		position: relative;
 	}
+
 	.touxiang-left-content-img {
 		width: 150rpx;
 		height: 150rpx;
 		border-radius: 120rpx;
 		margin: 14rpx 22rpx;
 	}
+
 	.touxiang-left-view {
 		width: 100%;
 		height: 126px;
@@ -534,6 +452,7 @@
 		// justify-content: space-between;
 		align-items: baseline;
 	}
+
 	.list-view {
 		// margin-top: 52px;
 		padding: 0 20rpx;
@@ -548,6 +467,7 @@
 		border-radius: 4px;
 		margin-left: 10px;
 	}
+
 	.padding-top-sm {
 		width: 95%;
 		margin: 0 auto;
@@ -556,12 +476,15 @@
 		align-items: center;
 		justify-content: space-between;
 	}
+
 	/deep/.page-box {
 		background: none !important;
 	}
+
 	/deep/.u-action {
 		display: none;
 	}
+
 	.content {
 		width: 100%;
 		height: 100vh;
@@ -570,23 +493,28 @@
 		background-size: cover;
 		// overflow: auto;
 	}
+
 	/deep/.u-content {
 		border-radius: 30px !important;
 	}
+
 	.flex-sub {
 		width: 353rpx;
 		height: 63rpx !important;
 	}
+
 	.localName {
 		margin-left: 4rpx;
 		font-weight: bold;
 		font-size: 33rpx;
 		color: #333333;
 	}
+
 	.dingwei-img {
 		width: 33.33rpx;
 		height: 37.5rpx;
 	}
+
 	page {
 		background-color: #F7F7F7;
 	}
@@ -855,6 +783,7 @@
 		height: 100%;
 		border-radius: 50%;
 	}
+
 	.make-now {
 		background: linear-gradient(90deg, rgb(1, 156, 136), rgb(15, 167, 139), rgb(53, 196, 149));
 		color: rgb(255, 255, 255);
@@ -864,20 +793,23 @@
 		line-height: 30px;
 		margin-top: 5px;
 	}
+
+	
 	.therap-pin {
 	    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) {
 	    color: #019c88;
 	}
+	
 	.therap-pin span:nth-child(1) {
 	    color: #666;
 	    margin-right: 10rpx;
 	}
+
 	.terap-button {
 		background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
 		color: #ffffff;
@@ -886,20 +818,55 @@
 		border-radius: 10upx;
 		line-height: 58rpx;
 	}
+
 	.therap-title {
 		width: 100%;
 		display: flex;
 	}
+
 	.therap-pin2 {
 	    width: 100%;
 	    display: flex;
-		justify-content: space-between;
+	    flex-wrap: wrap;
 	}
+
 	.therap-pin2 span:nth-child(2) {
-	color: #049E89;;
+		color: #049E89;
+		;
 	}
+
 	.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>