sadjv3_user/pages/my/fuwuxiangm.vue

466 lines
10 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">
<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">
搜索
</view>
</view>
</view>
<view class="fenlei">
<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
</view>
<t-refresh ref="refresh" v-if="dataList.length>0" @refresh="refresh" @loadMore="loadMore" :loadingType="loadingType" :tPadding="0">
<template slot="content">
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
<view class="item-img">
<image :src="item.massageImg" mode=""></image>
</view>
<view class="item-view">
<view class="view-cata">
<span class="item-view-title">{{item.title}}</span>
<span class="xiaoer item-view-biao">{{item.classifyName}}</span>
</view>
<view class="item-view-xiangmu">
<view class="item-view-bottom-qian">
<span>¥</span>
<span style="color: #F95900;">{{item.price}}</span>
<!-- <span>元/套</span> -->
<span style="text-decoration: line-through; color: #999;margin-left: 5px;">¥{{item.oldPrice}}</span>
</view>
</view>
<view class="shop_label" v-if="tagsData">
<span v-for="tag in tagsData" :key="tag">{{tag}}</span>
</view>
<view class="item-view-bottom">
<view class="item-view-xiangmu" style="align-items: flex-end; ">
<span style="font-size: 26rpx; color: #999; margin-right: 8rpx;">已售</span><span style="font-size: 26rpx; color: #333;">{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span>
</view>
<view class="item-view-bottom-btn">
查看
</view>
</view>
</view>
</view>
</template>
</t-refresh>
<empty v-if="dataList.length==0"></empty>
</view>
</template>
<script>
import empty from '@/components/empty.vue'
import tRefresh from "@/components/t-refresh/t-refresh.vue"
export default {
components:{tRefresh,empty},
data() {
return {
loadingType:0,
myId: '',
// v-model绑定的这个变量不要在分页请求结束中自己赋值
dataList: [],
tabList: [],
typeData:'105',
tabIndex: 0,
searchValue:'',
serviceTrue:true,
page:1,
limit:10,
titleNmae:'',
classifyId:'',
tagsData:[]
}
},
onLoad(){
this.myId = uni.getStorageSync('userId')
this.tabNav()
},
onPullDownRefresh: function() {
this.page = 1;
this.getData()
},
methods: {
// 加载更多
loadMore: async function() {
//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
if(this.loadingType==0){
this.loadingType=2
//模拟数据请求
setTimeout(()=>{
this.page++;
this.loadingType=0;
this.getData()
},1000)
}
},
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.page = 1;
this.dataList = []
this.getData()
}
})
},
input(res) {//搜索 输入框
this.searchValue=res;
console.log('----input:', res)
},
searchBtn(){//搜索按钮
if(this.searchValue!=""){
this.getData()
}
},
getData(){
this.$Request.get("/app/artificer/selectMassageTypePage", {
by: '3',
status:'1',
classifyId:this.classifyId,
page:this.page,
limit:this.limit,
title:this.searchValue
}).then(res => {
if (res.code == 0) {
if (res.data) {
if (this.page == 1) this.dataList = []; //如果是第一页需手动制空列表
this.dataList = [...this.dataList, ...res.data.list]; //追加新数据
for(var i=0;i<this.dataList.length;i++){
this.tagsData=this.dataList[i].labels.split(',');
}
uni.stopPullDownRefresh()
}
}
});
},
changeClick(index,item){
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/my/fuwuDateil?id='+item.massageTypeId+'&limit='+this.limit+'&page='+this.page+'&name='+'index'+'&isCanCoupon='+item.isCanCoupon
})
}
}
}
</script>
<style scoped>
.shop_label{
display: flex;
flex-wrap: wrap;
}
.shop_label span{
background: #e5e5e5;
border-radius: 8rpx;
padding: 2rpx 8rpx;
font-size: 20rpx;
margin-right: 8rpx;
margin-bottom: 8rpx;
}
/deep/.z-tabs-item-title{
font-size: 30rpx;
color: #222;
}
/deep/.refresh-body .content{
background-color: #f7f7f7;
}
/deep/.refresh-body{
height: 100% !important;
border-top: 2px solid #f7f7f7;
}
.content-view{
width: 100%;
height: 100vh;
padding-bottom: 100px;
overflow: hidden;
background-color: #f7f7f7;
}
.item-view-bottom-btn{
text-align: center;
width: 160rpx;
height: 55rpx;
line-height: 55rpx;
background: linear-gradient(90deg, #019c88, #0FA78B, #35C495);
border-radius: 30rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
margin-top: 5px;
}
.item-view-bottom-qian span:nth-child(4){
font-size: 26rpx;
color: #848484;
text-decoration-line: line-through;
}
.item-view-bottom-qian span:nth-child(5){
font-size: 26rpx;
color: #848484;
text-decoration-line: line-through;
}
.item-view-bottom-qian span:nth-child(1){
font-weight: 400;
font-size: 25rpx;
color: #F95900;
}
.item-view-bottom-qian span:nth-child(2){
font-weight: bold;
font-size: 36.81rpx;
color: #F95900;
}
.item-view-bottom-qian span:nth-child(3){
font-weight: 400;
font-size: 26rpx;
color: #F95900;
}
.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: #666666;
}
.item-view-xiangmu{
width: 100%;
display: flex;
flex-direction: row;
font-weight: 400;
font-size: 21rpx;
margin-top: 5px;
}
.item-view-title{
width: 76%;
font-weight: bold;
font-size: 32rpx;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-view{
width: 55%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.item-img{
width: 285rpx;
height: 120px;
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%;
}
.item {
width: 96%;
margin: 2% auto;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 140px;
background: #FFFFFF;
border-radius: 21rpx;
margin-top:10px;
align-items: center;
padding: 12px;
}
.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;
line-height: 32px;
color: #fff;
position: absolute;
right: 0;
top: 0;
margin-top:9.4px;
margin-right: 11px;
height: 32px !important;
}
/deep/.uni-searchbar__box-icon-search,.search-btn{
width: 120rpx;
height: 60rpx;
background: #019c88;
border-radius: 31rpx;
font-size: 14px;
}
/deep/.uni-searchbar__box{
height: 31px;
border-radius: 15px !important;
background-color: #fff !important;
border: 1px solid #E5E5E5;
padding: 0px;
display: flex;
flex-direction: row;
flex-flow: row-reverse;
position: relative;
}
/deep/.uni-searchbar{
width: 240px;
border-radius: 31rpx;
}
.service-head-top-left image{
width: 25px;
height: 30rpx;
margin-right: 10px;
}
.service-head-top-left span{
font-weight: bold;
font-size: 32rpx;
color: #333;
}
.service-head-top-left{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.service-head-top{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #fff;
}
.view-cata{
display: flex;
flex-direction: row;
align-items: center;
}
</style>