wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

细节

Browse Source
h5
fanfan 8 months ago
parent 81c6991c43
commit fb8703012f
1 changed files with 459 additions and 381 deletions
  1. 138
      pages/shopList/shopPage.vue

138
pages/shopList/shopPage.vue
Unescape View File

@ -12,7 +12,8 @@
</view>
<view class="page">
<view class="shop-tip">
<image :src="storeInfo.logoImage ? storeInfo.logoImage.preview_url : ''" mode="aspectFill" class="logo"></image>
<image :src="storeInfo.logoImage ? storeInfo.logoImage.preview_url : ''" mode="aspectFill" class="logo">
</image>
<text>{{ storeInfo.store_name }}</text>
<view class="tip">
<image src="/static/shop/t1.png" mode="aspectFill"></image>
@ -28,7 +29,8 @@
</view>
</view>
<view class="shop-info">
<image :src="shopDetail.logoImage && shopDetail.logoImage[0].external_url" mode="aspectFill" class="logo"></image>
<image :src="shopDetail.logoImage && shopDetail.logoImage[0].external_url" mode="aspectFill"
class="logo"></image>
<view class="info-box">
<view class="name">{{ shopDetail.shop_name }}</view>
<view class="intro">
@ -44,7 +46,7 @@
分享
</button>
</view>
<view v-if="firstCate" class="shop-goods">
<view class="shop-goods">
<!-- <view v-if="goodsCate.filter(v => v.category_id === firstCate)[0].children.length > 0" class="second-cate">
<scroll-view class="second-cate-tabs" scroll-x>
<view v-for="(item, index) in goodsCate.filter(v => v.category_id === firstCate)[0].children" :key="index" class="cate-item" :class="{active: secondCate === item.category_id}" @click="secondCate = item.category_id">
@ -55,36 +57,35 @@
<view class="goods-content">
<view class="first-cate">
<scroll-view class="first-cate-tabs" scroll-y>
<view
v-for="(item, index) in goodsCate"
:key="index"
class="cate-item"
:class="{
active: firstCate === item.category_id,
prev: goodsCate[index + 1] && goodsCate[index + 1].category_id === firstCate,
next: goodsCate[index - 1] && goodsCate[index - 1].category_id === firstCate,
}"
@click="firstCate = item.category_id;secondCate = '';"
>
<view v-for="(item, index) in goodsCate" :key="index" class="cate-item" :class="{
active: firstCate === item.category_id
}" @click="firstCate = item.category_id">
{{ item.name }}
</view>
</scroll-view>
</view>
<view class="content">
<view class="filter-box">
<view v-for="(item, index) in filterList" :key="index" class="filter-item" :class="{ active: activeFilter === item.value}" @click="changeFilter(item.value)">
<view v-for="(item, index) in filterList" :key="index" class="filter-item"
:class="{ active: activeFilter === item.value}" @click="changeFilter(item.value)">
{{ item.name }}
<text v-if="item.value === 'price'" class="down" :class="{ on: activeFilter === 'price' && filterDirection === 'DESC'}" style="top: 22rpx;"></text>
<text v-if="item.value === 'price'" class="up" :class="{ on: activeFilter === 'price' && filterDirection === 'ASC'}"></text>
<text v-if="item.value === 'price'" class="down"
:class="{ on: activeFilter === 'price' && filterDirection === 'DESC'}"
style="top: 22rpx;"></text>
<text v-if="item.value === 'price'" class="up"
:class="{ on: activeFilter === 'price' && filterDirection === 'ASC'}"></text>
</view>
</view>
<view class="goods-list">
<view v-for="(item, index) in goods" :key="index" class="good" @click="onGoodDetail(item.goods_id)">
<view v-for="(item, index) in goods" :key="index" class="good"
@click="onGoodDetail(item.goods_id)">
<image :src="item.goods_image" mode="aspectFill"></image>
<view class="name">{{ item.goods_name }}</view>
<view class="price">
<text class="now-price">¥{{ item.goods_price_min>0?Number(item.goods_price_min):0.00 }}</text>
<text v-if="item.line_price_min > 0" class="origin-price">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
<text
class="now-price">¥{{ item.goods_price_min>0?Number(item.goods_price_min):0.00 }}</text>
<text v-if="item.line_price_min > 0"
class="origin-price">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
</view>
</view>
</view>
@ -111,7 +112,9 @@
import * as Api from '@/api/shop/index';
import * as cstegory from '@/api/category'
import * as GoodsApi from '@/api/goods'
import { debounce } from 'lodash';
import {
debounce
} from 'lodash';
export default {
data() {
@ -128,11 +131,20 @@
secondCate: '',
activeFilter: 'all',
filterDirection: 'ASC',
filterList: [
{ name: '综合', value: 'all' },
{ name: '价格', value: 'price' },
filterList: [{
name: '综合',
value: 'all'
},
{
name: '价格',
value: 'price'
},
// { name: '折扣', value: 'discount' },
{ name: '销量', value: 'sales' }],
{
name: '销量',
value: 'sales'
}
],
isTop: false,
page: 1,
limit: 10,
@ -177,7 +189,9 @@
this.isTop = true
}
},
onLoad({ id }) {
onLoad({
id
}) {
this.id = id;
this.getShopDetail()
this.getGoodsTypeList();
@ -243,9 +257,15 @@
})
.then(res => {
// 合并新数据
console.log(res, '分类数据')
if (res.data.list.length > 0) {
let all = {
category_id: 0,
name: '全部'
}
res.data.list.unshift(all)
that.goodsCate = res.data.list;
that.firstCate = res.data.list[0].category_id;
}
})
.catch(reject)
})
@ -262,7 +282,7 @@
const param = {
sortType: this.activeFilter,
sortPrice: this.filterDirection === 'DESC' ? 1 : 0,
categoryId: this.secondCate || this.firstCate,
categoryId: this.firstCate>0?this.firstCate:'',
merchantId: this.id,
page: this.page++,
}
@ -293,7 +313,9 @@
onShareAppMessage() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams({ id: app.id });
const params = app.$getShareUrlParams({
id: app.id
});
return {
title: app.shopDetail.shop_name,
path: "/pages/shopList/shopPage?" + params
@ -307,7 +329,9 @@
onShareTimeline() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams({ id: app.id });
const params = app.$getShareUrlParams({
id: app.id
});
return {
title: app.shopDetail.shop_name,
path: "/pages/shopList/shopPage?" + params
@ -324,16 +348,20 @@
flex-direction: column;
background: url(https://www.royaum.com.cn/static/shop/shop-page-bg.png) center top no-repeat;
background-size: 100% auto;
.navbarContent {
display: flex;
justify-content: flex-start;
align-items: center;
.back {
margin-right: 24rpx;
margin-left: 12rpx;
}
.search-box {
position: relative;
.search-model {
position: absolute;
width: 100%;
@ -348,36 +376,43 @@
position: relative;
margin-right: 0 !important;
display: flex;
.search-box {
width: 442rpx;
}
}
}
.page {
flex: 1;
display: flex;
flex-direction: column;
padding-top: 30rpx;
.shop-tip {
padding: 0 24rpx;
display: flex;
align-items: center;
>text {
font-size: 24rpx;
color: #fff;
margin-right: auto;
}
.logo {
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
}
.tip {
font-size: 22rpx;
color: #fff;
margin-left: 20rpx;
display: flex;
align-items: center;
image {
width: 26rpx;
height: 26rpx;
@ -385,27 +420,33 @@
}
}
}
.shop-info {
display: flex;
align-items: center;
margin-top: 30rpx;
padding: 0 24rpx;
.logo {
width: 90rpx;
height: 90rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
.info-box {
flex: 1;
.name {
font-size: 30rpx;
color: #fff;
margin-bottom: 18rpx;
}
.intro {
display: flex;
align-items: center;
.label {
height: 36rpx;
background: #F34A40;
@ -417,6 +458,7 @@
color: #fff;
margin-right: 20rpx;
}
>view {
width: 90rpx;
height: 36rpx;
@ -427,6 +469,7 @@
align-items: center;
color: #fff;
font-size: 24rpx;
>image {
width: 21rpx;
height: 20rpx;
@ -435,6 +478,7 @@
}
}
}
.share-btn {
width: 130rpx;
height: 60rpx;
@ -446,6 +490,7 @@
background: #F34A40;
border-radius: 30rpx;
padding: 0;
>image {
width: 26rpx;
height: 22rpx;
@ -453,6 +498,7 @@
}
}
}
.shop-goods {
flex: 1;
display: flex;
@ -460,10 +506,12 @@
margin-top: 30rpx;
background: #F0F4F3;
border-radius: 20rpx 20rpx 0 0;
// padding-top: 24rpx;
.second-cate {
padding: 0 24rpx;
margin-bottom: 24rpx;
.second-cate-tabs {
height: 80rpx;
align-items: center;
@ -471,6 +519,7 @@
width: 100%;
overflow-x: auto;
overflow-y: hidden;
.cate-item {
display: inline-block;
height: 80rpx;
@ -481,9 +530,11 @@
margin-right: 20rpx;
color: #333333;
font-size: 28rpx;
&:last-child {
margin-right: 0;
}
&.active {
background: #F34A40;
color: #fff;
@ -491,16 +542,20 @@
}
}
}
.goods-content {
flex: 1;
display: flex;
.first-cate {
height: 100%;
width: 108rpx;
.first-cate-tabs {
overflow-x: hidden;
overflow-y: auto;
background: #fff;
.cate-item {
width: 100%;
padding: 20rpx 30rpx;
@ -508,14 +563,18 @@
font-size: 24rpx;
position: relative;
background: #F0F4F3;
&.prev {
border-radius: 0 0 30rpx 0;
}
&.next {
border-radius: 0 30rpx 0 0;
}
&.active {
background: transparent;
&::before {
content: '';
position: absolute;
@ -530,27 +589,32 @@
}
}
}
.content {
background: #fff;
height: 100%;
width: calc(100% - 108rpx);
display: flex;
flex-direction: column;
.filter-box {
height: 88rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
.filter-item {
color: #333;
font-size: 28rpx;
position: relative;
display: flex;
justify-content: center;
&.active {
color: #F34A40;
}
text {
width: 0;
height: 0;
@ -560,25 +624,30 @@
position: absolute;
left: 60rpx;
top: 15rpx;
&.up {
border-color: transparent transparent #000 transparent;
top: -1rpx;
&.on {
border-color: transparent transparent #F34A40 transparent;
}
}
&.down.on {
border-color: #F34A40 transparent transparent transparent;
}
}
}
}
.goods-list {
padding: 0 20rpx;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.good {
width: 290rpx;
height: 422rpx;
@ -589,13 +658,16 @@
margin-bottom: 20rpx;
border-radius: 10rpx;
border: 1px solid #EAEAEA;
&:nth-child(2n) {
margin-right: 0;
}
>image {
width: 100%;
height: 287rpx;
}
.name {
color: #333333;
font-size: 26rpx;
@ -606,12 +678,15 @@
white-space: nowrap;
padding: 0 24rpx;
}
.price {
padding: 0 24rpx;
.now-price {
color: #E53623;
font-size: 34rpx;
}
.origin-price {
text-decoration: line-through;
color: #999999;
@ -629,6 +704,7 @@
text-align: center;
color: #bbb;
}
.empty {
margin-top: 100rpx;
font-size: 28rpx;
@ -646,6 +722,7 @@
}
}
}
.toCart {
position: fixed;
bottom: 170rpx;
@ -664,6 +741,7 @@
height: 100%;
}
}
.toTop {
position: fixed;
bottom: 65rpx;

Write Preview
Loading…
Cancel
Save