sadjv3_user/pages/my/indextaociliaoList2.vue

512 lines
11 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>{{typeData=='104'?'服务套餐':typeData=='105'?'次卡':'服务疗程'}}</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>
<t-refresh ref="refresh" v-if="dataList.length>0" @refresh="refresh" @loadMore="loadMore" :loadingType="loadingType" :tPadding="0">
<template slot="content">
<view>
<span>主营项目</span>
</view>
<view>
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
<image :src="item.packageImg" mode="" class="item-img"></image>
<view class="item-view">
<view class="view-cata">
<view class="item-view-title">{{item.title}}门店名称</view>
<span class="xiaoer item-view-biao">{{item.classifyName}}</span>
</view>
<!--<view class="item-view-bottom-qian">
<span>¥</span>
<span>{{item.price}}</span>
<span>/ <text v-if="item.type!='104'">{{item.serviceCount}}</text> {{typeData=='104'?'套':typeData=='105'?'次':'次'}}</span>
<span>¥</span>
<span>{{item.oldPrice}}<text v-if="item.type!='104'">/{{item.serviceCount}}</text>{{typeData=='104'?'套':typeData=='105'?'次':'次'}}</span>
</view>
<view class="item-view-jianjie">
{{item.content}}
</view>-->
<!--<view class="item-view-bottom">
<view class="item-view-xiangmu">
<span>已售</span><span>{{item.sales}}</span> | 好评{{item.esteemRate}}%
</view>
<view class="item-view-bottom-btn">
查看
</view>
</view>-->
<view class="flex shop_category">
<view class="shop_category_a">中医理疗</view>
<view>6.7km</view>
</view>
<view class="shop_label">
<span>有包厢</span>
<span>有吸烟区</span>
<span>有淋浴房</span>
<span>有免费wifi</span>
</view>
</view>
</view>
<view class="shop_item">
<view>
<span>¥</span>
<span class="shop_color">980</span>
<span>元</span>
</view>
<view>【冬病夏治】无烟明火艾灸疗</view>
<view class="shop-arrow"></view>
</view>
</view>
<empty v-if="dataList.length==0"></empty>
</template>
</t-refresh>
</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: [],
typeData:'104',
tabIndex: 0,
searchValue:'',
serviceTrue:true,
page:1,
limit:10,
titleNmae:'',
classifyId:'',
getName:'',
}
},
onLoad(e){
this.typeData=e.type
this.getName=e.name;
this.myId = uni.getStorageSync('userId')
this.getData()
},
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)
}
},
input(res) {//搜索 输入框
this.searchValue=res;
console.log('----input:', res)
},
searchBtn(){//搜索按钮
if(this.searchValue!=""){
this.getData()
}
},
getData(){
var that=this;
that.$Request.get("/app/massage/package/findPage", {
type:that.typeData,
page:that.page,
limit:that.limit,
title:that.searchValue
}).then(res => {
if (res.code == 0) {
if (res.data) {
if (this.page == 1) this.dataList = []; //如果是第一页需手动制空列表
this.dataList = [...this.dataList, ...res.data.list]; //追加新数据
uni.stopPullDownRefresh()
}
}
});
},
backImg(){//返回上一页
uni.reLaunch({
url:'/pages/index/index'
})
},
clear(res) {
this.getData()
},
itemClick(item) {
if(this.typeData=='104'){
uni.navigateTo({
url:'/pages/my/serviceOderDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+this.getName+'&isCanCoupon='+item.isCanCoupon
})
}else if(this.typeData=='105'){
uni.navigateTo({
url:'/pages/my/cikarDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+this.getName+'&isCanCoupon='+item.isCanCoupon
})
}else if(this.typeData=='106'){
uni.navigateTo({
url:'/pages/my/fuwuliaochengDetail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+this.getName+'&isCanCoupon='+item.isCanCoupon
})
}
}
}
}
</script>
<style scoped>
.item-view-bottom-qian{
margin-top: 5px;
}
/deep/.refresh-body .content{
background-color: #f7f7f7;
}
/deep/.refresh-body{
height: 100% !important;
border-top: 2px solid #f7f7f7;
margin: 50px 0px;
}
.content-view{
width: 100%;
height: 100vh;
overflow: auto;
background-color: #f7f7f7;
position: relative;
}
.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(4){
font-size: 28rpx;
color: #848484;
text-decoration-line: line-through;
margin-left: 5px;
}
.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(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-size: 25rpx;
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: #999999;
margin:5px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示的行数,可以根据需要修改 */
overflow: hidden;
text-overflow: ellipsis;
}
.item-view-biao{
padding: 1px 5px;
border-radius: 15rpx 3rpx 15rpx 3rpx;
}
.tuina{
background-color:#d1f2df;
color: #17984d;
}
.xiaoer{
background-color:#f1f8d7;
color: #58b314;
}
.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 span:nth-child(1){
font-weight: normal;
color: #999;
margin-right: 5rpx;
}
.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: 55%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.item-img{
width: 285rpx;
height: 120px;
border-radius: 14rpx;
position: relative;
}
.item-img img{
border-radius: 14rpx;
}
.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: 0 2% ;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 140px;
background: #FFFFFF;
border-radius: 21rpx;
margin-top:10px;
align-items: center;
padding: 0px 10px;
}
.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: 31px;
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: 150rpx;
height: 60rpx;
background: #18A689;
border-radius: 31rpx;
}
/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: 34rpx;
color: #171717;
}
.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;
position: fixed;
z-index: 999;
}
.view-cata{
display: flex;
flex-direction: row;
align-items: center;
}
.shop_category{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
font-size: 26rpx;
padding: 8rpx 0;
margin-top:40rpx ;
}
.shop_category_a{
color: #019c88;
}
.shop_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 15rpx auto;
}
.shop_color{
color:#fb672b;
font-weight: bold;
font-size: 38rpx;
}
.shop_label{
display: flex;
flex-wrap: wrap;
}
.shop-arrow{
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 7px;
height: 7px;
border-color: #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 7px;
}
.shop_label span{
background: #e5e5e5;
border-radius: 8rpx;
padding: 2rpx 8rpx;
font-size: 20rpx;
margin-right: 8rpx;
margin-bottom: 8rpx;
}
</style>