添加门店选购商品页面
This commit is contained in:
194
components/cate-one/cate-one.vue
Normal file
194
components/cate-one/cate-one.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<view class="cate">
|
||||
<view class="cate-one row">
|
||||
<view class="aside">
|
||||
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
|
||||
<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>
|
||||
</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-margin-top-32 bold-600">{{cateName}}</view>
|
||||
|
||||
<view class="u-margin-top-32">
|
||||
<view class="bg-white br16 row u-col-top u-margin-bottom-24" v-for="(item, index) in 10" :key="index">
|
||||
<view>
|
||||
<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view>
|
||||
<view class="u-line-2 u-padding-top-10">葱烩海鲜卷边披萨--{{index}}</view>
|
||||
<view class="u-padding-top-44 row-between">
|
||||
<view class="row">
|
||||
<view class="primary">
|
||||
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
<view class="u-margin-left-8">
|
||||
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="column-end">
|
||||
<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy mx40 px40 br60 row-between">
|
||||
<view class="row">
|
||||
<u-image :src="cloudPath + 'img/icon_cart.png'" width="56" height="56"></u-image>
|
||||
<view class="text-fff u-margin-left-32">未选购商品</view>
|
||||
</view>
|
||||
<view class="text-999">去结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "cate-one",
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectIndex: 0,
|
||||
cateList: [],
|
||||
cateName: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeActive(index) {
|
||||
const {cateList} = this
|
||||
this.selectIndex = index
|
||||
this.cateName = cateList[index].name
|
||||
// this.onRefresh()
|
||||
},
|
||||
|
||||
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)
|
||||
// if (!data) return
|
||||
// this.page = data.page
|
||||
// this.goodsList = data.dataList
|
||||
// this.status = data.status
|
||||
},
|
||||
},
|
||||
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.cateTwoList = val[this.selectIndex] ? val[this.selectIndex].sons : []
|
||||
this.getGoodsSearchFun()
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$header-height: 94rpx;
|
||||
|
||||
.cate {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cate-one {
|
||||
height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
|
||||
|
||||
.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 120rpx;
|
||||
.info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buy {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc( 20rpx + env(safe-area-inset-bottom));
|
||||
height: 100rpx;
|
||||
background-color: #212526;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user