sadjv3_user/pages/my/fuwuxiangm.vue

625 lines
13 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="title">{{productTitle}}</view> -->
<view class="item" v-for="(item,index) in dataList" :key="index+'2'" @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-bottom-qian">
<span></span>
<span>¥{{item.price}}</span>
<span>¥{{item.oldPrice}}</span>
</view>
<view class="flex" style="margin-top: 10rpx;">
<view class="shop_label" v-if="item.tagsData!=''">
<span v-for="tag in item.tagsData" :key="tag">{{tag}}</span>
</view>
<view class="shop_label" v-else>
<span>助眠解压</span>
</view>
</view>
<view class="item-view-bottom">
<view class="item-view-xiangmu">
<span>已售</span><span>{{item.sales}} <!-- | 好评{{item.esteemRate}}% --></span>
</view>
<view class="item-view-bottom-btn">
查看
</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()
},
// 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: "服务类型",
remark:'女性专区'
}
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,
by: '3',
status: '1',
classifyId: this.classifyId,
title: this.searchValue
}
this.$Request.get('/app/artificer/selectMassageTypePage', params).then(res => {
for (var i = 0; i < res.data.list.length; i++) {
res.data.list[i].tagsData = res.data.list[i].labels.split(',');
}
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/my/fuwuDateil?id=' + item.massageTypeId + '&limit=' + this.limit + '&page=' + this
.page + '&name=' + 'index' + '&isCanCoupon=' + item.isCanCoupon
})
}
}
}
</script>
<style lang="scss" scoped>
/deep/.zp-empty-view-center{
position: absolute;
margin-top: 106px;
margin-left: 42%;
}
.body {
height: 100vh;
display: flex;
justify-content: end;
.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: 26rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.tabActive {
background: #f2fffb;
color: #019c88;
}
}
}
.rightGoods {
width:80%;
height: 100%;
// padding: 0 16rpx 27rpx;
box-sizing: border-box;
.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>