Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

对接品牌详情页接口

master
邓平艺 4 years ago
parent
1ddc50d8e7
commit
9087b5a866
2 changed files with 121 additions and 252 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      pages/index/onlineMall/onlineMall.vue
  2. 372
      pages/shop/shopdetail.vue

1
pages/index/onlineMall/onlineMall.vue
View File

@ -60,6 +60,7 @@
<scroll-view :style="{height: autoHeight}" :scroll-y="true" @scrolltolower="scrolltolower"> <scroll-view :style="{height: autoHeight}" :scroll-y="true" @scrolltolower="scrolltolower">
<view class="scroll-content"> <view class="scroll-content">
<lf-waterfall :list="list"></lf-waterfall> <lf-waterfall :list="list"></lf-waterfall>
<lf-nocontent src="/static/images/empty.png" v-if="list.length <= 0"></lf-nocontent>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>

372
pages/shop/shopdetail.vue
View File

@ -2,18 +2,18 @@
<view> <view>
<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav> <lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
<view class="shop-head"> <view class="shop-head">
<image class="lf-w-100 lf-h-100" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
<image class="lf-w-100 lf-h-100" :src="detail.logo" mode="aspectFill"></image>
</view> </view>
<view class="shop-title"> <view class="shop-title">
<view class="shop-flex"> <view class="shop-flex">
<view class="shop-img"> <view class="shop-img">
<image class="shop-img" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
<image class="shop-img" :src="detail.logo" mode="aspectFill"></image>
</view> </view>
<view> <view>
<view class="lf-color-black lf-font-36">AIMER MEN爱慕先生</view>
<view class="lf-color-black lf-font-36">{{ detail.name }}</view>
<view class="lf-font-24 lf-color-black"> <view class="lf-font-24 lf-color-black">
<text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text> <text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text>
<text class="lf-m-l-10">L2</text>
<text class="lf-m-l-10">{{ detail.floor }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -35,36 +35,34 @@
<view v-if="title_tab.length"> <view v-if="title_tab.length">
<u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs> <u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs>
</view> </view>
<lf-nocontent v-else></lf-nocontent>
<!-- 推荐 --> <!-- 推荐 -->
<view v-if="title_current==0"> <view v-if="title_current==0">
<view class="lf-row-between lf-p-l-32 lf-p-t-40 lf-p-r-32"> <view class="lf-row-between lf-p-l-32 lf-p-t-40 lf-p-r-32">
<view class="lf-font-32 lf-color-black lf-font-bold">在售商品</view> <view class="lf-font-32 lf-color-black lf-font-bold">在售商品</view>
<view class="lf-font-24 lf-color-555">查看全部 <text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text></view> <view class="lf-font-24 lf-color-555">查看全部 <text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text></view>
</view> </view>
<view class="lf-row-between lf-p-l-32 lf-p-r-32 lf-p-t-30 lf-p-b-30" style="flex-wrap: wrap;">
<view class="goods-rom" v-for="(item,index) of list" :key="index">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
<view class="recommend-box" >
<view class="goods-rom" v-for="(item,index) of detail.goods" :key="index" v-if="detail.goods.length">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.img" :index="index">
<view class="list-label">已售{{item.sale_count}}</view>
</u-lazy-load> </u-lazy-load>
<view class="lf-p-20"> <view class="lf-p-20">
<view class="list-title"> <view class="list-title">
{{item.title}}
{{item.name}}
</view> </view>
<view class="list-price"> <view class="list-price">
<!-- <text>{{item.price}}元</text> --> <!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
<lf-price :price="item.min_price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.min_market_price}}</text>
</view> </view>
</view> </view>
</view> </view>
<lf-nocontent v-else></lf-nocontent>
</view> </view>
<view class="introduct"> <view class="introduct">
<text class="lf-font-32 lf-color-black">品牌故事</text> <text class="lf-font-32 lf-color-black">品牌故事</text>
<view class="lf-font-28 lf-color-333 lf-m-t-20">
在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品
</view>
<view class="lf-font-28 lf-color-333 lf-m-t-20">{{ detail.story }}</view>
</view> </view>
</view> </view>
@ -73,7 +71,7 @@
<view class="lf-p-t-30 lf-p-b-30" v-else> <view class="lf-p-t-30 lf-p-b-30" v-else>
<view class="lf-m-b-30 lf-flex lf-w-100"> <view class="lf-m-b-30 lf-flex lf-w-100">
<u-icon name="search" class="search-icon"></u-icon> <u-icon name="search" class="search-icon"></u-icon>
<input class="rom-search" type="text" placeholder="请输入商品名称" />
<input class="rom-search" v-model="search_val" @confirm="search" type="text" placeholder="请输入商品名称" />
</view> </view>
<view class="special_tab"> <view class="special_tab">
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs> <u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
@ -100,240 +98,39 @@
<script> <script>
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue'; import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
export default { export default {
components: {
lfWaterfall
},
data() { data() {
return { return {
title_tab: [ title_tab: [
{name:'推荐'}, {name:'推荐'},
{name:'商品'} {name:'商品'}
], ],
tab_list: [
{
id: 1,
name: '综合',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
id: 2,
name: '销量',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
id: 3,
name: '上新',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
id: 4,
name: '价格',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
}
],
tab_list: [],
current: 0, current: 0,
title_current:0, title_current:0,
show_count: 0,
windowHeight: 0,
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
]
brand_id: 0,
detail: {},
search_val: ''
} }
}, },
components: {
lfWaterfall
onLoad(options){
this.brand_id = options.id;
this.getShopDetail();
}, },
methods: { methods: {
getShopDetail(){
this.$http.get({
api: 'api/brand/detail',
data: {
brand_id: this.brand_id
}
}).then(res => {
console.log("getShopDetail", res);
this.detail = res.data.data;
})
},
tabChange(index){ tabChange(index){
this.current = index; this.current = index;
this.clearTabItem(); this.clearTabItem();
@ -341,16 +138,84 @@
}, },
titletabChange(index){ titletabChange(index){
this.title_current = index; this.title_current = index;
if(this.tab_list.length <= 0){
this.initGoodsTabs();
this.getData();
}
},
initGoodsTabs(){
let _public = {
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
};
this.tab_list = [{
name: '综合',
list: [],
..._public
},{
name: '销量',
list: [],
..._public
},{
name: '上新',
list: [],
..._public
},{
name: '价格',
list: [],
..._public
}]
}, },
getData() { getData() {
let tab_item = this.tab_list[this.current];
let isPage = false;
tab_item.isPage = isPage;
if(!isPage){
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
let par = {
brand_id: this.brand_id
}
let orderBy = ['','sale_count','updated_at','sell_price'][this.current];
if(orderBy){
par.orderBy = orderBy;
} }
tab_item.isRefresher = false;
if(this.search_val){
par.keyword = this.search_val;
}
this.$http.get({
api: 'api/store/list',
data: par
}).then(res => {
console.log("getDat", res);
let tab_item = this.tab_list[this.current];
let isPage = false; // TODO 默认没有下一页
tab_item.isPage = isPage;
if(!isPage){
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
tab_item.isRefresher = false;
let data_list = res.data.data || [];
let list = data_list.map(item => {
return {
id: item.id,
original_price: item.market_price,
picture: item.img,
pictures: [item.img],
price: item.min_price,
product_id: item.brand_id,
sale: item.sale_count,
title: item.name
}
})
if(tab_item.page == 1){
tab_item.list = list;
}else{
tab_item.list.push(...list);
}
})
},
search(event){
this.clearTabItem();
this.getData();
}, },
// 滑块下标值变化 // 滑块下标值变化
swiperChange(event){ swiperChange(event){
@ -381,12 +246,9 @@
tab_item.loadingText = '正在加载中'; tab_item.loadingText = '正在加载中';
tab_item.list = []; tab_item.list = [];
this.$set(this.tab_list, this.current, tab_item); this.$set(this.tab_list, this.current, tab_item);
// this.$refs.uWaterfallFather[this.current].clear();
this.$refs.uWaterfallFather[this.current].clear();
} }
},
onShow(){
this.windowHeight = getApp().globalData.windowHeight;
},
}
} }
</script> </script>
@ -414,10 +276,16 @@
padding-left: 74rpx; padding-left: 74rpx;
font-size: 28rpx; font-size: 28rpx;
} }
.recommend-box{
display: flex;
justify-content: space-between;
padding: 30rpx 32rpx;
flex-wrap: wrap;
}
.goods-rom { .goods-rom {
border-radius: 20rpx; border-radius: 20rpx;
width: 333rpx; width: 333rpx;
height: 497rpx;
height: max-content;
background-color: white; background-color: white;
box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
&:nth-child(2n) { &:nth-child(2n) {
@ -428,7 +296,7 @@
} }
} }
.introduct { .introduct {
padding: 0 0 30rpx 32rpx;
padding: 30rpx 32rpx;
} }
.com{ .com{
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save