完善商品分类及商品管理
This commit is contained in:
@ -18,33 +18,38 @@
|
||||
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun">
|
||||
<view class="main-wrap">
|
||||
<view class="goods">
|
||||
<view class="u-m-t-32 bold-600">{{cateName}}</view>
|
||||
<view class="u-p-t-32 bold-600">{{cateName}}</view>
|
||||
|
||||
<view class="u-m-t-32">
|
||||
<view class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in 10" :key="index" @click="toShop()">
|
||||
<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="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
|
||||
<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">葱烩海鲜卷边披萨</view>
|
||||
<view class="u-p-t-44 row-between">
|
||||
<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="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
||||
</view>
|
||||
<view class="u-m-l-8">
|
||||
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
|
||||
<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">
|
||||
<view class="column-end" @click.stop="count++">
|
||||
<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
|
||||
</view>
|
||||
</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>
|
||||
@ -54,8 +59,10 @@
|
||||
<view class="buy mx40 px40 br60 row-between">
|
||||
<view class="row">
|
||||
<view class="u-relative">
|
||||
<u-image :src="cloudPath + 'img/icon_cart.png'" width="56" height="56"></u-image>
|
||||
<u-badge type="error" count="7" :absolute="true" offset="[0, 0]"></u-badge>
|
||||
<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>
|
||||
@ -100,6 +107,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
loadingFun
|
||||
} from '@/utils/tools'
|
||||
import {
|
||||
getGoodsSearch,
|
||||
} from '@/api/store';
|
||||
import {
|
||||
loadingType
|
||||
} from '@/utils/type';
|
||||
|
||||
export default {
|
||||
name: "cate-one",
|
||||
props: {
|
||||
@ -110,46 +127,63 @@
|
||||
},
|
||||
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.selectIndex = index
|
||||
const {
|
||||
cateList
|
||||
} = this
|
||||
this.cateName = cateList[index].name
|
||||
// this.onRefresh()
|
||||
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)
|
||||
// if (!data) return
|
||||
// this.page = data.page
|
||||
// this.goodsList = data.dataList
|
||||
// this.status = data.status
|
||||
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() {
|
||||
@ -163,6 +197,15 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buyNumber() {
|
||||
if (this.count > 0) {
|
||||
return this.count > 99 ? '99+' : this.count
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler(val) {
|
||||
@ -172,7 +215,6 @@
|
||||
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()
|
||||
}
|
||||
}
|
||||
@ -232,14 +274,14 @@
|
||||
position: relative;
|
||||
padding: 0 20rpx;
|
||||
.goods {
|
||||
padding-bottom: 200rpx;
|
||||
// padding-bottom: 200rpx;
|
||||
.info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -253,4 +295,12 @@
|
||||
background-color: #212526;
|
||||
}
|
||||
|
||||
.number {
|
||||
background-color: #FF2C3C;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
64
components/loading-footer/loading-footer.vue
Normal file
64
components/loading-footer/loading-footer.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="loading-footer row-center" :style="'color: ' + color">
|
||||
<view v-if="status === 'loading' " class="loading row">
|
||||
<loading :color="color" class="mr20"></loading>
|
||||
<text :style="'color: ' + color">{{loadingText}}</text>
|
||||
</view>
|
||||
<view v-if="status === 'finished'" class="finished">{{ finishedText }}</view>
|
||||
<view v-if="status === 'error'" @click="onRefresh">{{ errorText }}</view>
|
||||
<view v-if="status === 'empty'" class="empty">
|
||||
<text v-if="!slotEmpty">暂无数据</text>
|
||||
<slot name="empty" v-else></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
status: {
|
||||
type: String,
|
||||
default: 'loading'
|
||||
},
|
||||
errorText: {
|
||||
type: String,
|
||||
default: '加载失败，点击重新加载'
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '加载中...'
|
||||
},
|
||||
finishedText: {
|
||||
type: String,
|
||||
default: '我可是有底线的～'
|
||||
},
|
||||
slotEmpty: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#666"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRefresh() {
|
||||
this.$emit('refresh');
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.loading-footer {
|
||||
padding: 30rpx 0;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
203
components/loading/loading.vue
Normal file
203
components/loading/loading.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view :class="'loading ' + ( vertical ? 'loading--vertical' : '' )">
|
||||
<view :class="'loading__spinner loading__spinner--' + type" :style="{color, width: size + 'rpx', height: size + 'rpx'}">
|
||||
<view v-for="(item, index) in array12" :key="index" v-if="type === 'spinner'" class="loading__dot"></view>
|
||||
</view>
|
||||
<view class="loading__text" :style="{'font-size': textSize + 'rpx', color}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: String,
|
||||
vertical: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'spinner'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
textSize: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
array12: Array.from({
|
||||
length: 12
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
|
||||
.loading__spinner {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 45rpx;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: 45rpx;
|
||||
animation: rotate .8s linear infinite;
|
||||
}
|
||||
|
||||
.loading__spinner--spinner {
|
||||
-webkit-animation-timing-function: steps(12);
|
||||
animation-timing-function: steps(12);
|
||||
}
|
||||
|
||||
.loading__spinner--circular {
|
||||
border: 2rpx solid transparent;
|
||||
border-top-color: initial;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.loading__text {
|
||||
margin-left: 16rpx;
|
||||
color: #969799;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.loading__text:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading--vertical {
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loading--vertical .loading__text {
|
||||
margin: 16rpx 0 0;
|
||||
}
|
||||
|
||||
.loading__dot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loading__dot:before {
|
||||
display: block;
|
||||
width: 4rpx;
|
||||
height: 25%;
|
||||
margin: 0 auto;
|
||||
background-color: currentColor;
|
||||
border-radius: 40%;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.loading__dot:first-of-type {
|
||||
-webkit-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(2) {
|
||||
-webkit-transform: rotate(60deg);
|
||||
transform: rotate(60deg);
|
||||
opacity: .9375;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(3) {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
opacity: .875;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(4) {
|
||||
-webkit-transform: rotate(120deg);
|
||||
transform: rotate(120deg);
|
||||
opacity: .8125;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(5) {
|
||||
-webkit-transform: rotate(150deg);
|
||||
transform: rotate(150deg);
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(6) {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
opacity: .6875;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(7) {
|
||||
-webkit-transform: rotate(210deg);
|
||||
transform: rotate(210deg);
|
||||
opacity: .625;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(8) {
|
||||
-webkit-transform: rotate(240deg);
|
||||
transform: rotate(240deg);
|
||||
opacity: .5625;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(9) {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(10) {
|
||||
-webkit-transform: rotate(300deg);
|
||||
transform: rotate(300deg);
|
||||
opacity: .4375;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(11) {
|
||||
-webkit-transform: rotate(330deg);
|
||||
transform: rotate(330deg);
|
||||
opacity: .375;
|
||||
}
|
||||
|
||||
.loading__dot:nth-of-type(12) {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
opacity: .3125;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user