You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
462 lines
10 KiB
462 lines
10 KiB
<template>
|
|
<view class="intimate">
|
|
<view class="intimate-navbar">
|
|
<u-navbar title="贴心服务" :border-bottom="false" :background="isScroll?background:background1"></u-navbar>
|
|
</view>
|
|
<view class="intimate-hd" @click="openPage(1)">
|
|
<image :src="storeInfo.imageList?storeInfo.imageList[0]:''"></image>
|
|
<view class="a">{{storeInfo.shop_name}}<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon></view>
|
|
<view class="b">{{storeInfo.summary}}</view>
|
|
</view>
|
|
<!-- <scroll-view scroll-x class="intimate-menu">
|
|
<view class="item" @click="tabItem1(i)" v-for="i in 10" :key="i" :class="tabIndex1==i?'item-on':''">
|
|
<image src="@/static/home/phone.jpg"></image>
|
|
<view class="p">手机</view>
|
|
</view>
|
|
</scroll-view> -->
|
|
<view class="intimate-bd">
|
|
<scroll-view scroll-y class="a">
|
|
<view class="item" @click="tabItem(-1)" :class="tabIndex==-1?'item-on':''">全部商品</view>
|
|
<view class="item" @click="tabItem(i)" v-for="(a,i) in list" :key="i" :class="tabIndex==i?'item-on':''">{{a.name}}</view>
|
|
</scroll-view>
|
|
<view class="b">
|
|
<view class="t">
|
|
<view class="item" @click="tabFilter(0)" :class="filterIndex==0?'item-on':''">价格</view>
|
|
<view class="item" @click="tabFilter(1)" :class="filterIndex==1?'item-on':''">折扣</view>
|
|
<view class="item" @click="tabFilter(2)" :class="filterIndex==2?'item-on':''">销量</view>
|
|
<view class="item" @click="tabFilter(3)" :class="filterIndex==3?'item-on':''">综合</view>
|
|
</view>
|
|
<scroll-view scroll-y class="l">
|
|
<view class="item" v-for="(a,i) in list1" :key="i" @click="openPage(2,a)">
|
|
<image :src="a.server_image"></image>
|
|
<view class="title">
|
|
<!-- <text>自营</text> -->
|
|
{{a.server_name}}
|
|
</view>
|
|
<view class="price">
|
|
<view class="n">￥<text>{{a.server_price}}</text></view>
|
|
<view class="o">￥{{a.line_price}}</view>
|
|
</view>
|
|
<view class="desc">
|
|
{{a.comment_num}}条评论 {{a.comment_rate}}好评率
|
|
</view>
|
|
</view>
|
|
<u-empty v-if="isShow" text="暂无信息" mode="list"></u-empty>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as newFunApi from '@/api/newFun'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isScroll: true,
|
|
background1: {
|
|
background: '#fff',
|
|
},
|
|
background: {
|
|
background: 'transparent',
|
|
backgroundSize: '100%',
|
|
},
|
|
isShow: false,
|
|
tabIndex1: 1,
|
|
tabIndex: -1,
|
|
filterIndex: 0,
|
|
storeInfo: {},
|
|
keyword: "",
|
|
list: [],
|
|
list1: [],
|
|
filterFlag: true,
|
|
}
|
|
},
|
|
onLoad(o) {
|
|
this.tabIndex = o.index?(o.index): -1
|
|
this.getList();
|
|
this.storeInfo = uni.getStorageSync("cityInfo")
|
|
},
|
|
onPageScroll(e){
|
|
if(e.scrollTop <= 44){
|
|
this.isScroll = true;
|
|
}else{
|
|
this.isScroll = false;
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取列表
|
|
*/
|
|
async getList() {
|
|
let {status, message, data} = await newFunApi.serverCategoryList({});
|
|
if(status == 200){
|
|
this.list = data.list
|
|
this.getGoodsList();
|
|
}
|
|
},
|
|
/**
|
|
* 获取商品列表
|
|
*/
|
|
async getGoodsList() {
|
|
let {status, message, data} = await newFunApi.serverList({
|
|
server_name: "",
|
|
category_id: this.tabIndex == -1?"":(this.list.length > 0?this.list[this.tabIndex].category_id:""),
|
|
order_field: this.filterIndex == 0?"server_price":this.filterIndex == 1?"line_price":this.filterIndex == 2?"sold":"",
|
|
order_sort: this.filterFlag?"desc":"asc"
|
|
});
|
|
if(status == 200){
|
|
this.list1 = data.list
|
|
this.isShow = data.total == 0?true:false
|
|
}
|
|
},
|
|
openPage(index,a){
|
|
if(index == 1){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}else if(index == 2){
|
|
uni.setStorageSync("getInfo",a)
|
|
uni.navigateTo({
|
|
url: "/pages/news/recycling/detail?type=1"
|
|
})
|
|
}
|
|
},
|
|
tabItem(index){
|
|
this.tabIndex = index;
|
|
this.filterIndex = 0;
|
|
this.getGoodsList();
|
|
},
|
|
tabFilter(index){
|
|
if(index == this.filterIndex){
|
|
this.filterFlag = !this.filterFlag
|
|
}else{
|
|
this.filterFlag = true
|
|
}
|
|
this.filterIndex = index;
|
|
this.getGoodsList();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.intimate{
|
|
background: url(https://www.saas.njrenzhou.com/static/news/refund-bg1.png) center 1 no-repeat;
|
|
background-size: 100% auto;
|
|
&-hd{
|
|
width: 686rpx;
|
|
height: 170rpx;
|
|
background: rgba(255,255,255,0.86);
|
|
border-radius: 12rpx;
|
|
margin: 0 auto;
|
|
padding-top: 40rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
image{
|
|
position: absolute;
|
|
width: 162rpx;
|
|
height: 162rpx;
|
|
border-radius: 162rpx;
|
|
left: 18rpx;
|
|
top: -20rpx;
|
|
}
|
|
.a{
|
|
font-size: 32rpx;
|
|
color: #212121;
|
|
margin-left: 220rpx;
|
|
}
|
|
.b{
|
|
margin-left: 220rpx;
|
|
font-size: 28rpx;
|
|
color: #646464;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
&-menu{
|
|
height: 180rpx;
|
|
white-space: nowrap;
|
|
margin-top: 30rpx;
|
|
padding: 0 20rpx;
|
|
.item{
|
|
width: 150rpx;
|
|
height: 180rpx;
|
|
background: #FFFFFF;
|
|
display: inline-block;
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #FFFFFF;
|
|
text-align: center;
|
|
margin-left: 12rpx;
|
|
border-radius: 8rpx;
|
|
image{
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
.p{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
}
|
|
&-on{
|
|
border: 1px solid #F21A1C;
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
padding: 30rpx 0 0;
|
|
display: flex;
|
|
height: calc(100vh - 280rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
.a{
|
|
width: 150rpx;
|
|
height: 100%;
|
|
.item{
|
|
padding: 20rpx 35rpx;
|
|
border-left: 3px solid #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
box-sizing: border-box;
|
|
&-on{
|
|
background-color: #FFFFFF;
|
|
border-left-color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
.b{
|
|
width: 600rpx;
|
|
height: 100%;
|
|
background-color: #FFFFFF;
|
|
.t{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
line-height: 100rpx;
|
|
.item{
|
|
flex: 1;
|
|
text-align: center;
|
|
&-on{
|
|
color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
.l{
|
|
height: calc(100% - 120rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
.item{
|
|
width: 270rpx;
|
|
height: 389rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 15rpx;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
image{
|
|
width: 230rpx;
|
|
height: 230rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.title{
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text{
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.price{
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
.n{
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
text{
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
.o{
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
.desc{
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-share{
|
|
width: 548rpx;
|
|
height: 810rpx;
|
|
overflow: hidden;
|
|
.l{
|
|
width: 548rpx;
|
|
background: #FFFFFF;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.a{
|
|
width: 490rpx;
|
|
height: 243rpx;
|
|
margin: 0 auto;
|
|
padding-top: 24rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.b{
|
|
padding: 20rpx 20rpx;
|
|
overflow: hidden;
|
|
.item{
|
|
width: 220rpx;
|
|
height: 369rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 0;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
image{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.title{
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text{
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.price{
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 0 5rpx;
|
|
.n{
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
text{
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
.o{
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
.desc{
|
|
padding: 0 5rpx;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;overflow: hidden;
|
|
}
|
|
}
|
|
|
|
}
|
|
.c{
|
|
background-color: #F1F1F1;
|
|
height: 150rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
image{
|
|
width: 140rpx;
|
|
height: 122rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
width: 640rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #F34A40;
|
|
position: fixed;
|
|
left: 50%;
|
|
margin-left: -320rpx;
|
|
top: 50%;
|
|
z-index: 2;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-top: 450rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.goods .uni-scroll-view .uni-scroll-view{
|
|
overflow: auto!important;
|
|
}
|
|
</style> |