588 lines
16 KiB
Vue
588 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!--店铺切换-->
|
||
<Location v-if="storeInfo" :storeInfo="storeInfo"/>
|
||
|
||
<!-- 搜索框 -->
|
||
<Search tips="请输入搜索关键字..." @event="$navTo('pages/search/index')" />
|
||
|
||
<view class="cate-content dis-flex" v-if="list.length > 0">
|
||
<!-- 左侧 分类 -->
|
||
<scroll-view class="cate-left f-28" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
|
||
<view v-for="(item, index) in list" :key="index">
|
||
<text class="cart-badge" v-if="item.total">{{ item.total }}</text>
|
||
<view class="type-nav" :class="{ selected: curIndex == index }" @click="handleSelectNav(index)">
|
||
<image class="logo" lazy-load :lazy-load-margin="0" v-if="item.logo" :src="item.logo"></image>
|
||
<view class="name">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 右侧 商品 -->
|
||
<scroll-view class="cate-right b-f" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
|
||
<view v-if="list[curIndex]">
|
||
<view class="cate-right-cont">
|
||
<view class="cate-two-box">
|
||
<view v-if="list[curIndex].goodsList.length" class="cate-cont-box">
|
||
<view class="flex-five item" v-for="(item, idx) in list[curIndex].goodsList" :key="idx">
|
||
<view class="cate-img">
|
||
<image v-if="item.logo" lazy-load :lazy-load-margin="0" :src="item.logo" @click="onTargetGoods(item.id)"></image>
|
||
</view>
|
||
<view class="cate-info">
|
||
<view class="base">
|
||
<text class="name text">{{ item.name }}</text>
|
||
<text class="stock text">库存:{{ item.stock ? item.stock : 0 }} 已售:{{ item.initSale ? item.initSale : 0 }}</text>
|
||
</view>
|
||
<view class="action">
|
||
<text class="price">￥{{ item.price ? item.price : 0 }}</text>
|
||
<view class="cart">
|
||
<view v-if="item.isSingleSpec === 'Y'" class="singleSpec">
|
||
<view class="ii do-minus" v-if="item.buyNum" @click="onSaveCart(item.id, '-')"></view>
|
||
<view class="ii num" v-if="item.buyNum">{{ (item.buyNum != undefined) ? item.buyNum : 0 }}</view>
|
||
<view class="ii do-add" v-if="item.stock > 0" @click="onSaveCart(item.id, '+')"></view>
|
||
</view>
|
||
<view v-if="item.isSingleSpec === 'N'" class="multiSpec">
|
||
<text class="num-badge" v-if="item.buyNum">{{ item.buyNum }}</text>
|
||
<view class="select-spec" @click="onShowSkuPopup(2, item.id)">选规格</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<empty v-if="!list[curIndex].goodsList.length" :isLoading="isLoading" tips="暂无商品~"></empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
|
||
<!-- 商品SKU弹窗 -->
|
||
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart"/>
|
||
|
||
<view class="flow-fixed-footer b-f m-top10">
|
||
<view class="dis-flex chackout-box">
|
||
<view class="chackout-left pl-12">
|
||
<view class="col-amount-do">总金额：<text class="amount">￥{{ totalPrice.toFixed(2) }}</text></view>
|
||
<view class="col-amount-view">共计：{{ totalNum }} 件</view>
|
||
</view>
|
||
<view class="chackout-right" @click="doSubmit()">
|
||
<view class="flow-btn f-32">去结算</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<empty v-if="!list.length" :isLoading="isLoading" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { setCartTabBadge, setCartTotalNum } from '@/utils/app'
|
||
import * as CartApi from '@/api/cart'
|
||
import * as GoodsApi from '@/api/goods'
|
||
import * as settingApi from '@/api/setting'
|
||
import Search from '@/components/search'
|
||
import Empty from '@/components/empty'
|
||
import SkuPopup from './components/SkuPopup'
|
||
import Location from '@/components/page/location'
|
||
|
||
const App = getApp()
|
||
|
||
export default {
|
||
components: {
|
||
Search,
|
||
SkuPopup,
|
||
Empty,
|
||
Location
|
||
},
|
||
data() {
|
||
return {
|
||
goodsCart: [],
|
||
totalNum: 0,
|
||
totalPrice: 0.00,
|
||
// 列表高度
|
||
scrollHeight: 500,
|
||
// 一级分类：指针
|
||
curIndex: 0,
|
||
// 内容区竖向滚动条位置
|
||
scrollTop: 0,
|
||
// 分类列表
|
||
list: [],
|
||
// 正在加载中
|
||
isLoading: true,
|
||
showSkuPopup: false,
|
||
skuMode: 1,
|
||
goods: {},
|
||
storeInfo: null
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad() {
|
||
const app = this
|
||
// 设置分类列表高度
|
||
app.setListHeight()
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
const app = this;
|
||
// 获取页面数据
|
||
app.getPageData();
|
||
app.onGetStoreInfo();
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success(res){
|
||
uni.setStorageSync('latitude', res.latitude);
|
||
uni.setStorageSync('longitude', res.longitude);
|
||
app.onGetStoreInfo();
|
||
},
|
||
fail(e) {
|
||
// empty
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 获取页面数据
|
||
*/
|
||
getPageData() {
|
||
const app = this
|
||
app.isLoading = true
|
||
Promise.all([
|
||
// 获取分类列表
|
||
GoodsApi.cateList(),
|
||
// 获取购物车列表
|
||
CartApi.list()
|
||
])
|
||
.then(result => {
|
||
// 初始化分类列表数据
|
||
app.list = result[0].data;
|
||
app.totalNum = result[1].data.totalNum;
|
||
app.goodsCart = result[1].data.list;
|
||
setCartTotalNum(app.totalNum);
|
||
setCartTabBadge();
|
||
})
|
||
.finally(() => {
|
||
app.isLoading = false
|
||
app.totalPrice = 0
|
||
app.list.forEach(function(item, index) {
|
||
let total = 0
|
||
item.goodsList.forEach(function(goods, key) {
|
||
let totalBuyNum = 0
|
||
app.goodsCart.forEach(function(cart){
|
||
if (goods.id == cart.goodsId) {
|
||
total = total + cart.num
|
||
totalBuyNum = totalBuyNum + cart.num
|
||
app.totalPrice = app.totalPrice + (cart.goodsInfo.price * cart.num)
|
||
}
|
||
})
|
||
app.$set(app.list[index].goodsList[key], 'buyNum', totalBuyNum)
|
||
})
|
||
app.$set(app.list[index], 'total', total)
|
||
})
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取默认店铺
|
||
* */
|
||
onGetStoreInfo() {
|
||
const app = this
|
||
settingApi.systemConfig()
|
||
.then(result => {
|
||
app.storeInfo = result.data.storeInfo
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 跳转商品详情
|
||
*/
|
||
onTargetGoods(goodsId) {
|
||
this.$navTo(`pages/goods/detail`, { goodsId })
|
||
},
|
||
|
||
/**
|
||
* 设置分类列表高度
|
||
*/
|
||
setListHeight() {
|
||
const app = this
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
app.scrollHeight = res.windowHeight - 120
|
||
}
|
||
})
|
||
},
|
||
|
||
// 一级分类：选中分类
|
||
handleSelectNav(index) {
|
||
const app = this;
|
||
app.curIndex = index;
|
||
app.scrollTop = 0;
|
||
},
|
||
|
||
// 更新购物车
|
||
onSaveCart(goodsId, action) {
|
||
const app = this
|
||
return new Promise((resolve, reject) => {
|
||
CartApi.save(goodsId, action)
|
||
.then(result => {
|
||
app.getPageData();
|
||
resolve(result);
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
})
|
||
})
|
||
},
|
||
// 更新购物车数量
|
||
onAddCart(total) {
|
||
this.getPageData();
|
||
this.$toast("添加购物车成功");
|
||
},
|
||
// 结算
|
||
doSubmit() {
|
||
if (this.totalPrice > 0) {
|
||
this.$navTo('pages/cart/index')
|
||
} else {
|
||
this.$error("请先选择商品")
|
||
}
|
||
},
|
||
onShowSkuPopup(skuMode, goodsId) {
|
||
const app = this
|
||
app.isLoading = true
|
||
return new Promise((resolve, reject) => {
|
||
GoodsApi.detail(goodsId)
|
||
.then(result => {
|
||
const goodsData = result.data
|
||
|
||
if (goodsData.skuList) {
|
||
goodsData.skuList.forEach(function(sku, index) {
|
||
goodsData.skuList[index].specIds = sku.specIds.split('-')
|
||
goodsData.skuList[index].skuId = sku.id
|
||
})
|
||
}
|
||
|
||
app.goods = goodsData
|
||
app.skuMode = skuMode
|
||
app.showSkuPopup = !app.showSkuPopup
|
||
|
||
console.log(app.skuMode)
|
||
|
||
app.isLoading = false
|
||
|
||
resolve(result)
|
||
})
|
||
.catch(err => reject(err))
|
||
})
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 设置分享内容
|
||
*/
|
||
onShareAppMessage() {
|
||
const app = this
|
||
return {
|
||
title: _this.templet.shareTitle,
|
||
path: '/pages/category/index?' + app.$getShareUrlParams()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 分享到朋友圈
|
||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
||
*/
|
||
onShareTimeline() {
|
||
const app = this
|
||
return {
|
||
title: _this.templet.shareTitle,
|
||
path: '/pages/category/index?' + app.$getShareUrlParams()
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #fff;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.cate-content {
|
||
background: #fff;
|
||
margin-top: 118rpx;
|
||
/* #ifdef H5 */
|
||
margin-top: 124rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.cate-wrapper {
|
||
padding: 0 20rpx 20rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 分类内容 */
|
||
.cate-content {
|
||
width: 100%;
|
||
}
|
||
|
||
.cate-left {
|
||
flex-direction: column;
|
||
display: flex;
|
||
width: 200rpx;
|
||
color: #444;
|
||
height: 100%;
|
||
background: #f8f8f8;
|
||
margin-bottom: 120rpx;
|
||
.cart-badge {
|
||
position: absolute;
|
||
right: 1rpx;
|
||
margin-top: 10rpx;
|
||
margin-right: 5rpx;
|
||
font-size: 18rpx;
|
||
background: #fa5151;
|
||
z-index: 999;
|
||
text-align: center;
|
||
line-height: 28rpx;
|
||
color: #ffffff;
|
||
border-radius: 50%;
|
||
min-width: 32rpx;
|
||
padding: 5rpx 13rpx 5rpx 13rpx;
|
||
}
|
||
}
|
||
|
||
.cate-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
.cate-right-cont {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
align-content: flex-start;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.type-nav {
|
||
position: relative;
|
||
height: 140rpx;
|
||
text-align: center;
|
||
z-index: 10;
|
||
display: block;
|
||
font-size: 26rpx;
|
||
padding: 20rpx 0rpx 126rpx 0rpx;
|
||
.logo {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 60rpx;
|
||
margin: 0rpx;
|
||
padding: 0rpx;
|
||
}
|
||
.name {
|
||
margin-top: 2rpx;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.type-nav.selected {
|
||
color: #666666;
|
||
background: #ffffff;
|
||
border-right: none;
|
||
border-left: solid 10rpx #f03c3c;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.cate-cont-box {
|
||
margin-bottom: 10rpx;
|
||
padding-bottom: 10rpx;
|
||
overflow: hidden;
|
||
height: auto;
|
||
display: block;
|
||
.item {
|
||
height: 220rpx;
|
||
display: block;
|
||
padding-top: 5rpx;
|
||
border-radius: 3rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
}
|
||
|
||
.cate-cont-box .cate-img {
|
||
padding: 13rpx 10rpx 4rpx 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.cate-cont-box .cate-img image {
|
||
width: 160rpx;
|
||
height: 150rpx;
|
||
float: left;
|
||
border-radius: 5rpx;
|
||
display: block;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.cate-cont-box .cate-info {
|
||
text-align: left;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 26rpx;
|
||
margin-left: 168rpx;
|
||
padding-bottom: 14rpx;
|
||
color: #444;
|
||
padding: 0 15rpx 30rpx 15rpx;
|
||
.base {
|
||
height: 100%;
|
||
display: block;
|
||
.text {
|
||
display: block;
|
||
float: left;
|
||
width: 100%;
|
||
}
|
||
.name {
|
||
font-weight: bold;
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.stock {
|
||
margin-top: 10rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.action {
|
||
display: block;
|
||
height: 50rpx;
|
||
.price {
|
||
margin-top: 20rpx;
|
||
color: #f03c3c;
|
||
float: left;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
.cart {
|
||
margin-top: 20rpx;
|
||
float: right;
|
||
font-size: 30rpx;
|
||
height: 60rpx;
|
||
.ii {
|
||
float: left;
|
||
text-align: center;
|
||
width: 60rpx;
|
||
cursor: pointer;
|
||
}
|
||
.do-add {
|
||
background: url('~@/static/icon/add.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.do-minus {
|
||
background-image: url('~@/static/icon/minus.png');
|
||
background-size: 100% 100%;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.multiSpec {
|
||
.num-badge {
|
||
position: absolute;
|
||
margin-top: 10rpx;
|
||
margin-right: 25rpx;
|
||
font-size: 18rpx;
|
||
background: #f03c3c;
|
||
text-align: center;
|
||
line-height: 36rpx;
|
||
color: #ffffff;
|
||
border-radius: 50%;
|
||
min-width: 36rpx;
|
||
padding: 2rpx;
|
||
}
|
||
.select-spec {
|
||
border: solid 1rpx $fuint-theme;
|
||
padding: 10rpx 20rpx 10rpx 36rpx;
|
||
font-size: 25rpx;
|
||
border-radius: 5rpx;
|
||
color: #ffffff;
|
||
background: $fuint-theme;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cate-two-box {
|
||
width: 100%;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
// 底部操作栏
|
||
.flow-fixed-footer {
|
||
position: fixed;
|
||
bottom: var(--window-bottom);
|
||
width: 100%;
|
||
background: #fff;
|
||
border-top: 1px solid #eee;
|
||
z-index: 11;
|
||
padding-top: 8rpx;
|
||
.chackout-left {
|
||
font-size: 28rpx;
|
||
height: 98rpx;
|
||
color: #777;
|
||
flex: 4;
|
||
padding-left: 12px;
|
||
text-align: right;
|
||
padding-right: 40rpx;
|
||
.col-amount-do {
|
||
font-size: 35rpx;
|
||
margin-top: 5rpx;
|
||
margin-bottom:5rpx;
|
||
.amount {
|
||
color: #f03c3c;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chackout-right {
|
||
font-size: 34rpx;
|
||
flex: 2;
|
||
}
|
||
|
||
// 提交按钮
|
||
.flow-btn {
|
||
background: linear-gradient(to right, $fuint-theme, $fuint-theme);
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 92rpx;
|
||
display: block;
|
||
font-size: 28rpx;
|
||
border-radius: 5rpx;
|
||
margin-right: 20rpx;
|
||
// 禁用按钮
|
||
&.disabled {
|
||
background: #ff9779;
|
||
}
|
||
}
|
||
}
|
||
</style>
|