sadjv3_user/pages/my/hangyedana.vue

827 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 自定义下拉刷新与上拉加载演示(vue) -->
<template>
<view class="content-view">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<template #top>
<view class="service-head-top">
<view class="service-head-top-left">
<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
<span>行业大拿</span>
</view>
<view>
<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue"
@input="input" @clear="clear">
</uni-search-bar>
<view class="search-btn" @click="searchBtn">
<image style="width:30rpx; height:30rpx; margin-right: 10rpx;"
src="../../static/search.png"></image>
搜索
</view>
</view>
</view>
</template>
<template #loadingMoreNoMore>
<custom-nomore />
</template>
<!-- 右侧商品 -->
<!-- 主体部分 -->
<view class="body">
<!-- 左侧分类 -->
<view class="leftTab">
<scroll-view scroll-y="true" class="tabBox">
<block v-for="(item,index) in tabList" :key="index">
<view class="tabItem" :class="tabCurrent == index?'tabActive':''" @click="changeTab(index,item)">
{{item.value}}
</view>
</block>
</scroll-view>
</view>
<!-- 右侧商品 -->
<view class="rightGoods">
<view class="margin-bottom-sm radius touxiang-left">
<view class="flex align-center touxiang-left-view" v-for="(item, index) in dataList" :key='index' @click="itemClick(item)">
<view class="touxiang-left-content">
<image style="border: 2px solid #e2e2e2;" class="touxiang-left-content-img" :src="item.artificerImg ? item.artificerImg : '../../static/logo.png'" @click.stop="saveImgs(item.artificerImg)" mode="aspectFill"></image>
<!-- <image class="touxiang-frame" :src="item.technicianType=='3'?'../../static/vip/grade1-1.gif':item.technicianType=='4'?'../../static/vip/grade2-1.gif':'../../static/vip/grade3-1.gif'"></image> -->
<image class="touxiang-frame" :src="item.technicianType=='3'?'../../static/vip/grade4.png':item.technicianType=='4'?'../../static/vip/grade6.png':'../../static/vip/grade5.png'"></image>
</view>
<view class="list-right">
<view class="flex align-center" style="justify-content: start;">
<view class="flex align-center list-right-top">
<view class="list-right-top-view">
<view class="list-right-top-name">
{{ item.artificerName }}
</view>
<view class="keyuyue keyuyue-lan" v-if="item.status == 1">
<view class="flex">
<view class="timea-fu">可服务</view>
<view class="timea-time">{{item.time}}</view>
</view>
</view>
<view class="keyuyue keyuyue-hui" v-else>
<view class="flex">
<view class="timea-hui">休息中</view>
</view>
</view>
</view>
</view>
</view>
<view class="item-view-jianjie">
{{item.content}}
</view>
<view class="therapist-mian-top">
<view class="therap-pin">
<span>评论</span>
<span class="therapist-mian-view-text">
{{ item.commentCount ? item.commentCount : 0 }}
</span>
</view>
<view class="therap-pin">
<span>收藏</span>
<span class="therapist-mian-view-text">
{{ item.collectCount ? item.collectCount : 0 }}
</span>
</view>
</view>
<view class="flex thera-lin thera-bottom">
<!-- <view class="flex align-center" v-if="item.distance">
<image class="therapist-bottom-dingwei" src="../../static/dituzhaoren6.png"></image>
<view class="therapist-bottom-dingwei-text">
{{ item.distance }}
</view>
</view> -->
<view class="flex" v-if="item.consortiaName">
<image class="therapist-bottom-img" src="../../static/dituzhaoren5.png"></image>
<view v-if="item.consortiaName" class="therapist-mian-bottom-text">{{item.consortiaName}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
loadingType: 0,
myId: '',
// v-model绑定的这个变量不要在分页请求结束中自己赋值
dataList: [],
tabList: [],
typeData: '105',
tabIndex: 0,
searchValue: '',
serviceTrue: true,
page: 1,
limit: 10,
titleNmae: '',
classifyId: '',
tagsData: [],
// 分类列表
tabCurrent: 0,
productTitle: '氧气罐',
}
},
onLoad() {
this.myId = uni.getStorageSync('userId')
this.tabNav()
this.getData()
},
methods: {
tabNav() {
let data = {
type: "服务类型",
}
this.$Request.get('/app/dict/list', data).then(res => {
if (res.code == 0) {
this.tabList = res.data;
this.classifyId=res.data[0].id,
this.productTitle = this.tabList[0].value
this.page = 1;
this.dataList = []
this.getData()
}
})
},
input(res) { //搜索 输入框
this.searchValue = res;
},
searchBtn() { //搜索按钮
if (this.searchValue != "") {
this.getData()
}
},
getData() {
this.$refs.paging.reload(true);
},
queryList(pageNo, pageSize) {
const params = {
page: pageNo,
limit: pageSize,
isGoods: '1',
classifyId: this.classifyId,
artificerName: this.searchValue,
by: 1,
status:-1
}
this.$Request.get('/app/artificer/selectArtificerList', params).then(res => {
this.$refs.paging.complete(res.data.list);
}).catch(res => {
this.$refs.paging.complete(false);
})
},
changeTab(index,item) {
this.tabCurrent = index
this.productTitle = this.tabList[index].value
this.classifyId = item.id
this.searchValue = ''
this.page = 1;
this.dataList = []
this.getData()
},
backImg() { //返回上一页
uni.reLaunch({
url: '/pages/index/index'
})
},
clear(res) {
this.getData()
},
itemClick(item) {
uni.navigateTo({
url: '/pages/therapist/orderDetail?artificerId=' + item.artificerId + "&classifyId=" + this
.tabIndex
});
}
}
}
</script>
<style lang="scss" scoped>
.therapist-bottom-img{
width: 26rpx;
height: 26rpx;
margin-right:3px;
margin-top: 5rpx
}
.therapist-mian-bottom-text{
font-weight: bold;
font-size: 26rpx;
color: #222222;
}
.therapist-bottom-dingwei-text{
font-size: 24rpx;
color: #848485;
}
.therapist-bottom-dingwei{
width: 26rpx;
height: 30rpx;
margin-right:3px;
}
.thera-lin{
display: flex;
justify-content: space-between;
}
.thera-bottom{
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.therapist-mian-view-text span{
font-weight: 500;
font-size: 26rpx;
color: #222222;
}
.therap-pin{
font-size: 26rpx;
display: flex;
align-items: flex-end;
margin-right: 10rpx;
}
.therap-pin span:nth-child(2){
color: #019c88;
}
.therap-pin span:nth-child(1){
color: #666;
margin-right: 10rpx;
}
.therapist-mian-top{
width: 100%;
display: flex;
flex-direction:row;
}
.timea-fu{
color: #2dbe93;
font-size: 24rpx;
line-height: 44rpx;
margin-left: 8rpx;
margin-right: 5rpx;
}
.timea-hui{
color: #ffffff;
font-size: 24rpx;
line-height: 44rpx;
margin-left: 8rpx;
margin-right: 5rpx;
}
.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;
margin-top: 8rpx;
}
.timea-time{
font-size: 25rpx;
color: #2dbe93;
line-height: 44rpx;
padding-right: 10rpx;
}
.keyuyue{
padding: 0rpx 10rpx;
height: 44rpx;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 30rpx 20rpx 20rpx 30rpx ;
font-size: 24rpx;
}
.keyuyue-lan{
background: #eefdf8;
}
.keyuyue-hui{
background: #d9d9d9;
}
.list-right-top-bottom{
width: 100%;
text-align: left;
font-weight: 400;
font-size: 25rpx;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
}
.list-right-top-name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
font-weight: bold;
font-size: 32rpx;
color: #13141A;
}
.list-right-top-view image{
//width: 168.75rpx;
height: 40.97rpx;
}
.list-right-top-view{
width: 100%;
display: flex;
flex-direction: row;
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%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 5px;
}
.touxiang-frame{
position: absolute;
width: 240rpx;
height:220rpx;
top:5rpx;
left:5rpx;
}
.touxiang-left-content{
width:190rpx;
height: auto;
border-radius: 10rpx;
position: relative;
}
.touxiang-left-content-img-ditu{
width: 150rpx;
height: 150rpx;
border-radius:120rpx;
// margin: 0px 10px 0px 12px;
}
.touxiang-left-content-img{
width: 160rpx;
height: 190rpx;
border-radius:30rpx;
margin: 14rpx 22rpx;
}
.touxiang-left-view{
width: 100%;
height: 130px;
border-radius: 18rpx;
align-items: flex-start;
background: #fff;
margin-bottom: 12px;
padding-bottom: 10px;
justify-content: space-between;
padding: 10rpx;
}
.touxiang-left{
width: 100%;
/* padding: 10px; */
display: flex;
flex-direction: column;
align-items: baseline;
}
/deep/.zp-empty-view-center{
position: absolute;
margin-top: 106px;
margin-left: 42%;
}
.body {
// height: 100vh;
display: flex;
justify-content: end;
// overflow: hidden;
.leftTab {
width:19%;
height: 100%;
background: #fff;
// border-radius: 0px 15rpx 0px 0px;
// padding: 24rpx 11rpx;
box-sizing: border-box;
border-top: 1px solid #f7f7f7;
// margin-top: 10px;
position: fixed;
left: 0;
.tabBox {
height: 100%;
.tabItem {
text-align: center;
padding: 14rpx 0;
// border-radius: 60rpx;
color: #333;
font-size: 14px;
font-weight: bold;
margin-bottom: 20rpx;
}
.tabActive {
background: #f2fffb;
color: #019c88;
}
}
}
.rightGoods {
width:76%;
height: 100%;
// padding: 0 16rpx 27rpx;
box-sizing: border-box;
position: absolute;
right:20rpx;
margin-top:20rpx;
.whiteBox {
height: 100%;
background: #ffffff;
border-radius: 15rpx;
padding: 0 25rpx;
box-sizing: border-box;
.title {
height: 77rpx;
line-height: 77rpx;
color: #2D2D2D;
font-size: 26rpx;
font-weight: bold;
}
}
}
}
.tab-view {
width: 100%;
display: flex;
flex-direction: column;
position: fixed;
z-index: 999;
background: #fff linear-gradient(60deg, rgba(115, 212, 183, 0.2), rgba(227, 251, 244, 0.1), rgba(193, 236, 223, 0.35));
border-bottom: 1rpx solid #c4ede1;
padding-top: 6rpx;
}
.shop_label {
display: flex;
flex-wrap: wrap;
margin-top: 4rpx;
}
.shop_label span {
background: linear-gradient(90deg, #ffefde, #fff7ef);
height: 34rpx;
line-height: 34rpx;
border-radius: 8rpx;
padding: 0 10rpx;
font-size: 22rpx;
margin-right: 8rpx;
margin-bottom: 8rpx;
color: #f68607;
}
/deep/.z-tabs-item-title {
color: #222;
}
/deep/.refresh-body .content {}
/deep/.refresh-body {
height: 100% !important;
border-top: 2px solid #f7f7f7;
margin: 80px 0px;
}
.content-view {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #f7f7f7;
}
.item-view-bottom-btn {
text-align: center;
width: 131rpx;
height: 55rpx;
line-height: 55rpx;
background: linear-gradient(90deg, #019c88, #0FA78B, #35C495);
border-radius: 10rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
}
.item-view-bottom-qian span:nth-child(5) {
font-size: 28rpx;
color: #848484;
text-decoration-line: line-through;
}
.item-view-bottom-qian span:nth-child(4) {
font-size: 28rpx;
color: #848484;
text-decoration-line: line-through;
}
.item-view-bottom-qian span:nth-child(3) {
font-size: 28rpx;
color: #848484;
text-decoration-line: line-through;
margin-left: 5px;
}
.item-view-bottom-qian span:nth-child(2) {
font-weight: bold !important;
font-size: 36.81rpx !important;
color: #FF6000 !important;
}
.item-view-bottom-qian span:nth-child(1) {
font-weight: 400;
font-size: 28rpx;
color: #FF6000;
}
.item-view-bottom-qian {
margin-top: 2px;
}
.item-view-bottom {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item-view-jianjie {
font-weight: 400;
font-size: 24rpx;
color: #999;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 显示的行数,可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
}
.item-view-biao {
border-radius: 15rpx 3rpx 15rpx 3rpx;
}
.tuina {
background-color: #d1f2df;
color: #17984d;
}
.xiaoer {
width: 120rpx;
height: 35rpx;
line-height: 35rpx;
text-align: center;
background-color: #f1f8d7;
color: #58b314;
font-size: 20rpx;
}
.taishi {
background-color: #e5d5c6;
color: #805d39;
}
.kangfu {
background-color: #fcf3da;
color: #ff8600;
}
.item-view-xiangmu span:nth-child(2) {
font-weight: normal;
color: #333333;
font-size: 30rpx;
}
.item-view-xiangmu span:nth-child(1) {
font-weight: normal;
color: #666666;
margin-right: 5rpx;
font-size: 30rpx;
}
.item-view-xiangmu {
width: 100%;
display: flex;
flex-direction: row;
font-weight: 400;
font-size: 25rpx;
align-items: flex-end;
}
.item-view-title {
width: 76%;
font-weight: bold;
font-size: 32rpx;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-view {
width:69%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
padding: 5rpx 0;
}
.item-img {
width:70px;
height:70px;
border-radius: 14rpx;
position: relative;
}
.img-span {
padding: 2px 5px;
font-weight: 400;
font-size: 8px;
color: #FFFFFF;
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
border-radius: 7px 0px 7px 0px;
position: absolute;
bottom: 0px;
right: 0;
margin-bottom: 5px;
margin-right: 5px;
}
.item-img image {
width: 100%;
height: 100%;
border-radius: 14rpx;
}
.item {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
/*height: 140px;*/
background: #FFFFFF;
border-radius: 21rpx;
margin-top: 10px;
// align-items: center;
padding: 20rpx;
}
.item-detail {
padding: 5rpx 15rpx;
border-radius: 10rpx;
font-size: 28rpx;
color: white;
background-color: #007AFF;
}
.item-line {
position: absolute;
bottom: 0rpx;
left: 0rpx;
height: 1px;
width: 100%;
background-color: #eeeeee;
}
/deep/.zp-paging-container {
background-color: #f7f7f7;
width: 100%;
}
/deep/.zp-paging-container-content {
width: 95%;
margin: 0 auto;
}
.fenlei {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.index-fenl-title {
width: 81rpx;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
font-weight: bold;
font-size: 34rpx;
color: #019C88;
}
.index-fenl-title-bottom {
position: absolute;
bottom: 0;
margin-bottom: 0px;
width: 81rpx;
height: 14rpx;
border-radius: 7rpx;
background: linear-gradient(-48deg, rgba(1, 156, 136, 0.35), rgba(45, 196, 142, 0.35));
}
/deep/.uni-searchbar__cancel {
display: none;
}
.search-btn {
text-align: center;
color: #019c88;
font-weight: bold;
position: absolute;
right: 40rpx;
top: 20rpx;
font-size: 30rpx;
display: flex;
align-items: center;
}
/deep/.uni-searchbar__box-icon-search,
.search-btn {
width: 110rpx;
height: 50rpx;
}
/deep/.uni-searchbar__box {
height: 34px;
border-radius: 30px !important;
background-color: #fff !important;
border: 1px solid #09a28a;
display: flex;
flex-direction: row;
flex-flow: row-reverse;
position: relative;
}
/deep/.uni-searchbar {
width: 250px;
border-radius: 31rpx;
padding-right: 24rpx;
}
.service-head-top-left image {
width: 20px;
height: 20rpx;
margin-right: 5px;
margin-left: 10rpx;
}
.service-head-top-left span {
width: 180rpx;
height: 60rpx;
background: url('../../static/images/headline.png') 0rpx 26rpx;
background-repeat: no-repeat;
font-weight: bold;
font-size: 34rpx;
color: #171717;
margin-top: 14rpx;
}
.service-head-top-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.service-head-top {
height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
}
.view-cata {
display: flex;
flex-direction: row;
align-items: center;
}
</style>