306 lines
7.2 KiB
Vue
306 lines
7.2 KiB
Vue
<template>
|
|
<view class="cate">
|
|
<view class="cate-one row">
|
|
<view class="aside">
|
|
<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
|
|
<view style="padding-bottom: 200rpx;">
|
|
<block v-for="(item, index) in cateList" :key="index">
|
|
<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
|
|
<text class="name">{{ item.name }}</text>
|
|
<view v-if="index == selectIndex" class="active-line bg-default"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="main">
|
|
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun">
|
|
<view class="main-wrap">
|
|
<view class="goods">
|
|
<view class="u-p-t-32 bold-600">{{cateName}}</view>
|
|
|
|
<view class="u-p-t-32">
|
|
<navigator hover-class="none" class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in goodsList" :key="index" @click="toShop()">
|
|
<view>
|
|
<u-image :src="item.image" width="136" height="136" border-radius="16"></u-image>
|
|
</view>
|
|
<view class="info">
|
|
<view>
|
|
<view class="u-line-2 u-p-t-10">{{item.name}}</view>
|
|
<view class="u-p-t-20 row-between">
|
|
<view class="row">
|
|
<view class="primary">
|
|
<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
|
</view>
|
|
<view class="u-m-l-8">
|
|
<price-format :price="item.market_price" :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22"></price-format>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="column-end" @click.stop="count++">
|
|
<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
|
|
<loading-footer :status="status" :slot-empty="true">
|
|
<view slot="empty" class="column-center" style="padding: 200rpx 0 0">
|
|
<text class="lighter sm">暂无商品</text>
|
|
</view>
|
|
</loading-footer>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="buy mx40 px40 br60 row-between">
|
|
<view class="row">
|
|
<view class="u-relative">
|
|
<u-image :src="cloudPath + 'img/icon_cart.png'" width="80" height="80"></u-image>
|
|
<view class="u-absolute top-0 right-0 text-fff number u-text-center xxs" v-if="buyNumber">
|
|
{{ buyNumber }}
|
|
</view>
|
|
</view>
|
|
<view class="text-fff u-m-l-32">未选购商品</view>
|
|
</view>
|
|
<view class="text-999">去结算</view>
|
|
</view>
|
|
|
|
<!-- 购物车 -->
|
|
<u-popup v-model="showCart" mode="bottom" :border-radius="16">
|
|
<view style="max-height: 800rpx;">
|
|
<view class="px20 text-999 mt20">
|
|
温馨提示：请适量点餐
|
|
</view>
|
|
<view>
|
|
<scroll-view style="height: 700rpx;" scroll-y="true" scroll-with-animation="true">
|
|
<view class="row-start u-row-between u-p-t-20 u-padding-bottom-20 px20" v-for="(item, index) in 20" :key="index">
|
|
<view class="row-start">
|
|
<view>
|
|
<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
|
|
</view>
|
|
<view class="ml20">
|
|
<view class="u-line-2 u-p-t-10">葱烩海鲜卷边披萨</view>
|
|
<view class="primary u-p-t-40">
|
|
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="u-text-right">
|
|
<u-icon class="u-p-t-10" name="trash" size="32"></u-icon>
|
|
</view>
|
|
<view class="u-p-t-30">
|
|
<u-number-box min="1" v-model="numberVal" @change="changeNumber"></u-number-box>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
loadingFun
|
|
} from '@/utils/tools'
|
|
import {
|
|
getGoodsSearch,
|
|
} from '@/api/store';
|
|
import {
|
|
loadingType
|
|
} from '@/utils/type';
|
|
|
|
export default {
|
|
name: "cate-one",
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => ([])
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
page:1,
|
|
status: loadingType.LOADING,
|
|
selectIndex: 0,
|
|
cateList: [],
|
|
goodsList: [],
|
|
cateName: '',
|
|
numberVal: 1,
|
|
showCart: false,
|
|
showSpec: false,
|
|
count: 0
|
|
}
|
|
},
|
|
methods: {
|
|
changeActive(index) {
|
|
const {
|
|
cateList
|
|
} = this
|
|
this.cateName = cateList[index].name
|
|
this.selectIndex = index
|
|
this.onRefresh()
|
|
},
|
|
|
|
onRefresh() {
|
|
this.page = 1
|
|
this.goodsList = []
|
|
this.status = loadingType.LOADING
|
|
this.$nextTick(() => {
|
|
this.getGoodsSearchFun();
|
|
});
|
|
},
|
|
|
|
async getGoodsSearchFun() {
|
|
let {
|
|
page,
|
|
goodsList,
|
|
priceSort,
|
|
saleSort,
|
|
status,
|
|
cateList,
|
|
selectIndex
|
|
} = this;
|
|
const item = cateList[selectIndex]
|
|
if(item.type == 0) return
|
|
if (status == loadingType.FINISHED) return;
|
|
const params = {
|
|
category_id: item.id,
|
|
page_no: page,
|
|
price: priceSort,
|
|
sales_sum: saleSort
|
|
}
|
|
const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
|
|
console.log(data);
|
|
|
|
if (!data) return
|
|
this.page = data.page
|
|
this.goodsList = data.dataList
|
|
this.status = data.status
|
|
},
|
|
|
|
changeNumber() {
|
|
|
|
},
|
|
|
|
// 跳转商品详情页
|
|
toShop() {
|
|
uni.navigateTo({
|
|
url: '/pages/shop/shop'
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
buyNumber() {
|
|
if (this.count > 0) {
|
|
return this.count > 99 ? '99+' : this.count
|
|
}
|
|
|
|
return ''
|
|
}
|
|
},
|
|
watch: {
|
|
list: {
|
|
handler(val) {
|
|
if(!val.length) return
|
|
let index = val.findIndex((item) => item.type == 1)
|
|
|
|
this.selectIndex = index == -1 ? 0 : index
|
|
this.cateName = val[this.selectIndex].name
|
|
this.cateList = val
|
|
this.getGoodsSearchFun()
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
$header-height: 94rpx;
|
|
|
|
.cate {
|
|
position: relative;
|
|
}
|
|
|
|
.cate-one {
|
|
height: 100vh;
|
|
|
|
.aside {
|
|
width: 180rpx;
|
|
flex: none;
|
|
height: 100%;
|
|
background-color: #F7F8FA;
|
|
|
|
.one-item {
|
|
position: relative;
|
|
text-align: center;
|
|
height: 108rpx;
|
|
line-height: 108rpx;
|
|
|
|
&.active {
|
|
color: $-color-theme;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
width: 6rpx;
|
|
height: 30rpx;
|
|
left: 4rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
background-color: #FFFAFB;
|
|
height: 100%;
|
|
flex: 1;
|
|
|
|
.main-wrap {
|
|
position: relative;
|
|
padding: 0 20rpx;
|
|
.goods {
|
|
// padding-bottom: 200rpx;
|
|
.info {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: env(safe-area-inset-bottom);
|
|
height: 100rpx;
|
|
background-color: #212526;
|
|
}
|
|
|
|
.number {
|
|
background-color: #FF2C3C;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
</style> |