Skip to content

Y
yongxinda-h5
提交 4d709ef9 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

修改需求

上级 deeb939f
隐藏空白字符变更
内嵌 并排
正在显示 包含 852 行增加 和 490 行删除
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue
浏览文件 @ 4d709ef9
......@@ -80,7 +80,7 @@
{{ item_value.name }}
</view>
</view>
<view v-if="item.isPlus">
<view v-if="item.isPlus && item.isCustom">
<u-icon
name="plus-circle"
color="#999"
......@@ -88,7 +88,10 @@
@click="onPlus(index1)"
></u-icon>
</view>
<view v-else style="margin-bottom: 12rpx; width: 200rpx;">
<view
v-if="!item.isPlus && item.isCustom"
style="margin-bottom: 12rpx; width: 200rpx;"
>
<u-input
v-model="item.custom"
placeholder="自定义规格"
......@@ -104,7 +107,12 @@
</view>
</view>
</view>
<view v-if="JSON.stringify(goodsInfo.partsData) !== '[]'" class="specification-item">
<view
v-if="
JSON.stringify(goodsInfo.partsData) !== '[]' && goodsInfo.partsData
"
class="specification-item"
>
<view class="item-title">配件(多选)</view>
<view
style="display: flex; justify-content: space-between; align-items: center;"
......
src/pages/category/index.vue
浏览文件 @ 4d709ef9
......@@ -11,26 +11,43 @@
/>
</view>
<view class="u-menu-wrap">
<view class="right-cates">
<u-tabs
name="name"
:list="categoryList"
v-model="current"
@change="tabsChange"
></u-tabs>
<goodsItem
v-for="item in currentSubCategoryData"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="cateGoryGoods(item)"
/>
<view style="padding: 20rpx;">
<u-loadmore :status="status" icon-type="flower" />
<scroll-view
scroll-y
scroll-with-animation
class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop"
>
<view
v-for="(item, index) in categoryList"
:key="item.id"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(index, item.id)"
>
<text class="u-line-1">{{ item.name }}</text>
</view>
<view class="footer"></view>
</scroll-view>
<view class="right-cates">
<block v-for="(item, index) in currentSubCategoryData" :key="item.id">
<view class="item-container" @tap="cateGoryGoods(item)">
<u-image
width="100rpx"
height="100rpx"
:src="
item.picUrl.split('http').length > 1
? item.picUrl
: baseUrl + item.picUrl
"
></u-image>
<view class="content">
<view class="title">
<text>{{ item.name }}</text>
<text style="color: #646566;">{{ item.brief }}</text>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
......@@ -38,17 +55,22 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getCatalogIndex, getGoodsList } from '@/api/category';
import goodsItem from '@/components/goodsItem.vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import config from '@/utils/config';
let baseUrl = config.baseUrl;
const scrollTop = ref(0); //tab标题的滚动条位置
const current = ref(0); // 预设当前项的值
const menuHeight = ref(0); // 左边菜单的高度
const menuItemHeight = ref(0); // 左边菜单item的高度
const categoryList = ref([] as any); //右侧tabber数据
const currentSubCategoryData = ref([] as any); //初始tabber数据
const listQuery = ref({
categoryId: 0,
page: 1,
limit: 10
limit: 10,
});
let status = ref('loadmore');
let total = ref(0);
......@@ -66,14 +88,6 @@ onLoad((options: any) => {
}
});
const search = (val: any) => {
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
const cateGoryGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
......@@ -85,11 +99,49 @@ onReachBottom(() => {
initGoodsList(listQuery.value);
});
const tabsChange = (e: any) => {
const search = (val: any) => {
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
const cateGoryGoods = (row: any) => {
console.log(row, 'ok');
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
// 点击左边的栏目切换
const swichMenu = async (index: any, id: number) => {
currentSubCategoryData.value = [];
current.value = e;
listQuery.value.categoryId = categoryList.value[e].id;
current.value = index;
listQuery.value.categoryId = categoryList.value[index].id;
initGoodsList(listQuery.value);
// 如果为0，意味着尚未初始化
if (menuHeight.value == 0 || menuItemHeight.value == 0) {
await getElRect('menu-scroll-view', 'menuHeight');
await getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
scrollTop.value =
index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
};
// 获取一个目标元素的高度
const getElRect = (elClass?: any, dataVal?: any) => {
new Promise((resolve: any, reject: any) => {
const query = uni.createSelectorQuery().in(this);
query
.select('.' + elClass)
.fields({ size: true }, (res: any) => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
getElRect(elClass);
}, 10);
return;
}
dataVal = res.height;
})
.exec();
});
};
const initIndex = () => {
......@@ -122,6 +174,39 @@ const initGoodsList = (data: any) => {
width: 100%;
height: 100%;
background-color: #fff;
padding: 0 24rpx;
.item-container {
box-sizing: border-box;
width: 100%;
height: 160rpx;
padding: 12rpx 0;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1rpx solid #f5f5f5;
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 20rpx;
.title {
display: flex;
flex-direction: column;
}
.price {
.new-price {
font-size: 32rpx;
}
.old-price {
margin-left: 10rpx;
color: #969799;
font-size: 20rpx;
text-decoration: line-through;
}
}
}
}
}
.u-wrap {
......@@ -137,9 +222,110 @@ const initGoodsList = (data: any) => {
padding: 18rpx 30rpx;
}
.footer {
width: 100%;
height: 108rpx;
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
padding-left: 20rpx;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
padding-left: 20rpx;
}
.u-tab-item-active::before {
content: '';
position: absolute;
border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>
src/pages/category/index1.vue 0 → 100644
浏览文件 @ 4d709ef9
<template>
<view class="u-wrap">
<!-- 搜索 -->
<view>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<view class="u-menu-wrap">
<view class="right-cates">
<u-tabs
name="name"
:list="categoryList"
v-model="current"
@change="tabsChange"
></u-tabs>
<goodsItem
v-for="item in currentSubCategoryData"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="cateGoryGoods(item)"
/>
<view style="padding: 20rpx;">
<u-loadmore :status="status" icon-type="flower" />
</view>
<view class="footer"></view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getCatalogIndex, getGoodsList } from '@/api/category';
import goodsItem from '@/components/goodsItem.vue';
const current = ref(0); // 预设当前项的值
const categoryList = ref([] as any); //右侧tabber数据
const currentSubCategoryData = ref([] as any); //初始tabber数据
const listQuery = ref({
categoryId: 0,
page: 1,
limit: 10
});
let status = ref('loadmore');
let total = ref(0);
onLoad((options: any) => {
if (JSON.stringify(options) === '{}') {
initIndex();
} else {
let data = JSON.parse(options.data);
listQuery.value.categoryId = data.id;
initIndex();
setTimeout(() => {
current.value = data.index;
}, 300);
}
});
const search = (val: any) => {
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
const cateGoryGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
if (listQuery.value.page * listQuery.value.limit >= total.value)
return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
listQuery.value.page += 1;
initGoodsList(listQuery.value);
});
const tabsChange = (e: any) => {
currentSubCategoryData.value = [];
current.value = e;
listQuery.value.categoryId = categoryList.value[e].id;
initGoodsList(listQuery.value);
};
const initIndex = () => {
getCatalogIndex().then((res: any) => {
if (res.data.code === 200) {
categoryList.value = res.data.data.categoryList;
if (listQuery.value.categoryId === 0)
listQuery.value.categoryId = categoryList.value[0].id;
initGoodsList(listQuery.value);
console.log(categoryList.value, '分类数据');
}
});
};
const initGoodsList = (data: any) => {
status.value = 'loading';
getGoodsList(data).then((res: any) => {
if (res.data.code === 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total;
currentSubCategoryData.value = [...currentSubCategoryData.value, ...res.data.data.list];
}
});
};
</script>
<style lang="scss" scoped>
.right-cates {
width: 100%;
height: 100%;
background-color: #fff;
}
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.footer {
width: 100%;
height: 108rpx;
background-color: #fff;
}
</style>
src/pages/category/index2.vue deleted 100644 → 0
浏览文件 @ deeb939f
<template>
<view class="u-wrap">
<!-- 搜索 -->
<view>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<view class="u-menu-wrap">
<scroll-view
scroll-y
scroll-with-animation
class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop"
>
<view
v-for="(item, index) in categoryList"
:key="item.id"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(index, item.id)"
>
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
<view class="right-cates">
<u-tabs
name="name"
:list="categoryList"
v-model="current"
@change="tabsChange"
></u-tabs>
<block v-for="(item, index) in currentSubCategoryData" :key="item.id">
<view class="item-container">
<u-image
width="100rpx"
height="100rpx"
:src="
item.picUrl.split('http').length > 1
? item.picUrl
: baseUrl + item.picUrl
"
></u-image>
<view class="content">
<view class="title">
<text>{{ item.name }}</text>
<text style="color: #646566;">{{ item.brief }}</text>
</view>
<view class="price">
<!-- <text class="new-price">￥{{ item.counterPrice.toFixed(2) }}</text> -->
<!-- <text v-if="counterPrice != 0" class="old-price">
￥{{ item.counterPrice.toFixed(2) }}
</text> -->
</view>
</view>
</view>
</block>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { getCatalogIndex, getCatalogCurrent, getGoodsList } from '@/api/category';
import config from '@/utils/config';
let baseUrl = config.baseUrl;
const scrollTop = ref(0); //tab标题的滚动条位置
const current = ref(0); // 预设当前项的值
const menuHeight = ref(0); // 左边菜单的高度
const menuItemHeight = ref(0); // 左边菜单item的高度
const categoryList = ref([] as any); //右侧tabber数据
const currentSubCategoryData = ref(); //初始tabber数据
const listQuery = ref({
categoryId: 0,
page: 1,
limit: 10,
});
// const tapItems = (id: any) => {
// uni.navigateTo({
// url: `./items?id=${id}`,
// });
// };
const search = (val: any) => {
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
const tabsChange = (e: any) => {
current.value = e;
listQuery.value.categoryId = categoryList.value[e].id;
initGoodsList(listQuery.value);
}
// 点击左边的栏目切换
const swichMenu = async (index: any, id: number) => {
if (index == current) return;
current.value = index;
listQuery.value.categoryId = id;
initGoodsList(listQuery.value);
// 如果为0，意味着尚未初始化
if (menuHeight.value == 0 || menuItemHeight.value == 0) {
await getElRect('menu-scroll-view', 'menuHeight');
await getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
scrollTop.value =
index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
};
// 获取一个目标元素的高度
const getElRect = (elClass?: any, dataVal?: any) => {
new Promise((resolve: any, reject: any) => {
const query = uni.createSelectorQuery().in(this);
query
.select('.' + elClass)
.fields({ size: true }, (res: any) => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
getElRect(elClass);
}, 10);
return;
}
dataVal = res.height;
})
.exec();
});
};
// tabbar单个分类数据
const initCatalogCurrent = (id: number) => {
getCatalogCurrent({ id }).then((res: any) => {
currentSubCategoryData.value = res.data.data.currentSubCategory;
console.log(res, '单个分类数据');
});
};
const initIndex = () => {
getCatalogIndex().then((res: any) => {
if (res.data.code === 200) {
categoryList.value = res.data.data.categoryList;
listQuery.value.categoryId = categoryList.value[0].id;
initGoodsList(listQuery.value);
console.log(categoryList.value, '分类数据');
}
});
};
initIndex();
const initGoodsList = (data: any) => {
getGoodsList(data).then((res: any) => {
if (res.data.code === 200) {
currentSubCategoryData.value = res.data.data.list;
}
});
};
</script>
<style lang="scss" scoped>
.right-cates {
width: 100%;
height: 100%;
background-color: #fff;
padding: 0 24rpx;
.item-container {
box-sizing: border-box;
width: 100%;
height: 160rpx;
padding: 12rpx 0;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1rpx solid #f5f5f5;
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 20rpx;
.title {
display: flex;
flex-direction: column;
}
.price {
.new-price {
font-size: 32rpx;
}
.old-price {
margin-left: 10rpx;
color: #969799;
font-size: 20rpx;
text-decoration: line-through;
}
}
}
}
}
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
}
.u-tab-item-active::before {
content: '';
position: absolute;
border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>
src/pages/goods/goodsSku.vue
浏览文件 @ 4d709ef9
......@@ -59,6 +59,7 @@ let onPlus = (index: number) => {
goodsInfo.value.spec_list[index].isPlus = false
}
// 失去输入自定义规格输入框焦点
let onBlur = (val: string, index: number) => {
goodsInfo.value.spec_list[index].isPlus = true
if(!val) return
......@@ -102,6 +103,7 @@ let init = (data: any, id: number, partsData: any) => {
name: item.name,
isPlus: true, // 控制自定义规格输入框显示
custom: '', // 自定义规格
isCustom: item.valueList[0].customSpec, // 后台是否设置自定义
list: item.valueList.map((res: any) => {
return {
name: res.value,
......@@ -132,13 +134,16 @@ let SkuPopup = (e: any) => {
// 选择自定义规格后的逻辑
let custom = (selectShop: any) => {
let flag = false
let customArr: any = [] // 存储选择的自定义的数组
goodsInfo.value.spec_list.map((item: any, i: number) => {
console.log(item);
if(item.custom) {
selectShop.sku_name_arr[i] = item.custom
customArr.push(item.custom)
flag = true
}
})
return {selectShop, flag }
return { selectShop, flag, customArr }
}
// 加入购物车前的判断
......@@ -147,10 +152,13 @@ let addCartFn = (obj: any) => {
let productId: any = getProductId(selectShop.sku_name_arr)
let shop = custom(selectShop)
let specifications: any = []
let specificationCustom: any = []
// 有自定义会走下面的逻辑
if(shop.flag) {
productId = 0
selectShop = shop.selectShop
specifications = shop.selectShop.sku_name_arr
specificationCustom = shop.customArr
}
addCart({
goodsId: detailId.value,
......@@ -158,10 +166,11 @@ let addCartFn = (obj: any) => {
productId: productId,
type: 0,
specifications,
partsIds: partsIds.value
specificationCustom,
partIds: partsIds.value
}).then((res: any) => {
if(res.data.code === 200) {
uni.showToast({
title: '已添加至购物车',
icon: 'none',
......@@ -189,16 +198,24 @@ let addCarts = (selectShop: any) => {
// 立即购买
let buyNow = (selectShop: any) => {
let productId: any = getProductId(selectShop.sku_name_arr)
if(!productId) return uni.showToast({
title: '没有对应产品',
icon: 'none'
})
let shop = custom(selectShop)
let specifications: any = []
let specificationCustom: any = []
// 有自定义会走下面的逻辑
if(shop.flag) {
productId = 0
selectShop = shop.selectShop
specifications = shop.selectShop.sku_name_arr
specificationCustom = shop.customArr
}
let data: object = {
goodsId: detailId.value,
number: selectShop.buy_num,
productId: productId,
type: 0,
partsIds: partsIds.value
specifications,
specificationCustom,
partIds: partsIds.value
}
fastaddCart(data).then((res: any) => {
if(res.data.code === 200) {
......
src/pages/index/index.vue
浏览文件 @ 4d709ef9
......@@ -15,19 +15,19 @@
</view>
<!-- 宫格布局 -->
<u-grid :col="6" class="grid" @tap="clickGrid">
<u-grid-item
v-for="(item, index) in indexData?.channel"
:key="item.id"
:index="{ id: item.id, index }"
>
<u-icon
:name="
item.iconUrl.split('http').length > 1 ? item.iconUrl : baseUrl + item.iconUrl
"
:size="46"
></u-icon>
<view class="grid-text">{{ item.name }}</view>
</u-grid-item>
<block v-for="(item, index) in indexData?.channel" :key="item.id">
<u-grid-item v-if="item.name !== '客户机器'" :index="{ id: item.id, index }">
<u-icon
:name="
item.iconUrl.split('http').length > 1
? item.iconUrl
: baseUrl + item.iconUrl
"
:size="46"
></u-icon>
<view class="grid-text">{{ item.name }}</view>
</u-grid-item>
</block>
</u-grid>
<view class="goods">
......
src/pages/order/orderList.vue
浏览文件 @ 4d709ef9
......@@ -95,14 +95,14 @@
<view class=""></view>
<view style="display: flex; flex-direction: row;">
<view
v-if="current == 1"
v-if="res.orderStatusText === '待推送'"
class="evaluate btn"
@tap="orderQuotation(res.id)"
>
生成报价
</view>
<view
v-if="current == 1"
v-if="res.orderStatusText === '待推送'"
class="evaluate btn"
@tap="orderPush(res.id)"
>
......
src/pages/productLine/components/categoryPopup.vue
浏览文件 @ 4d709ef9
......@@ -7,77 +7,84 @@
closeable
@close="handleClose"
>
<!-- 搜索 -->
<view
style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<view class="content">
<view class="right-cates">
<u-tabs
name="name"
:list="categoryList"
v-model="current"
@change="tabsChange"
></u-tabs>
<goodsItem
v-for="item in currentSubCategoryData"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="cateGoryGoods(item)"
<view class="u-wrap">
<!-- 搜索 -->
<view
style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
<view style="padding: 20rpx;">
<u-loadmore
:status="status"
icon-type="flower"
:load-text="loadText"
@loadmore="loadmore"
/>
</view>
<view class="u-menu-wrap">
<scroll-view
scroll-y
scroll-with-animation
class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop"
>
<view
v-for="(item, index) in categoryList"
:key="item.id"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(index, item.id)"
>
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
<view class="right-cates">
<block v-for="(item, index) in currentSubCategoryData" :key="item.id">
<view class="item-container" @tap="cateGoryGoods(item)">
<u-image
width="100rpx"
height="100rpx"
:src="
item.picUrl.split('http').length > 1
? item.picUrl
: baseUrl + item.picUrl
"
></u-image>
<view class="content">
<view class="title">
<text>{{ item.name }}</text>
<text style="color: #646566;">{{ item.brief }}</text>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
</u-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getCatalogIndex, getGoodsList } from '@/api/category';
import goodsItem from '@/components/goodsItem.vue';
// 选择tabs的下标
let current = ref(0);
// tabs下的商品数据
let currentSubCategoryData = ref([] as any);
// tabs数据
let categoryList = ref([] as any);
// 查询参数
import config from '@/utils/config';
let baseUrl = config.baseUrl;
const scrollTop = ref(0); //tab标题的滚动条位置
const current = ref(0); // 预设当前项的值
const menuHeight = ref(0); // 左边菜单的高度
const menuItemHeight = ref(0); // 左边菜单item的高度
const categoryList = ref([] as any); //右侧tabber数据
const currentSubCategoryData = ref([] as any); //初始tabber数据
const listQuery = ref({
categoryId: 0,
page: 1,
limit: 10,
});
// 自定义加载状态
let loadText = ref({
loadmore: '点击加载更多',
loading: '努力加载中',
nomore: '实在没有了',
});
let status = ref('loadmore');
let total = ref(0);
let emits = defineEmits(['close', 'categoryData']);
let props = defineProps({
show: {
......@@ -86,80 +93,242 @@ let props = defineProps({
},
});
let emits = defineEmits(['close', 'categoryData']);
const search = (val: any) => {
console.log(categoryList.value);
// uni.navigateTo({ url: '../index/search?keyword=' + val.value });
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
// 开始添加产品线产品
let cateGoryGoods = (data: any) => {
emits('categoryData', data);
const cateGoryGoods = (row: any) => {
emits('categoryData', row);
handleClose();
};
// 监听tabs
let tabsChange = (e: any) => {
// 点击左边的栏目切换
const swichMenu = async (index: any, id: number) => {
currentSubCategoryData.value = [];
current.value = e;
listQuery.value.categoryId = categoryList.value[e].id;
current.value = index;
listQuery.value.categoryId = categoryList.value[index].id;
initGoodsList(listQuery.value);
// 如果为0，意味着尚未初始化
if (menuHeight.value == 0 || menuItemHeight.value == 0) {
await getElRect('menu-scroll-view', 'menuHeight');
await getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
scrollTop.value =
index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
};
// 点击加载数据
let loadmore = () => {
// 判断是否还有下一页数据
if (listQuery.value.page * listQuery.value.limit >= total.value)
return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
listQuery.value.page += 1;
initGoodsList(listQuery.value);
console.log('点击加载');
};
// 获取商品数据
const initGoodsList = (data: any) => {
status.value = 'loading';
getGoodsList(data).then((res: any) => {
if (res.data.code === 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total;
currentSubCategoryData.value = [...currentSubCategoryData.value, ...res.data.data.list];
}
// 获取一个目标元素的高度
const getElRect = (elClass?: any, dataVal?: any) => {
new Promise((resolve: any, reject: any) => {
const query = uni.createSelectorQuery().in(this);
query
.select('.' + elClass)
.fields({ size: true }, (res: any) => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
getElRect(elClass);
}, 10);
return;
}
dataVal = res.height;
})
.exec();
});
};
let initIndex = () => {
const initIndex = () => {
getCatalogIndex().then((res: any) => {
if (res.data.code === 200) {
categoryList.value = res.data.data.categoryList;
if (listQuery.value.categoryId === 0)
listQuery.value.categoryId = categoryList.value[0].id;
initGoodsList(listQuery.value);
console.log(categoryList.value, '分类数据');
}
});
};
const initGoodsList = (data: any) => {
status.value = 'loading';
getGoodsList(data).then((res: any) => {
if (res.data.code === 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total;
currentSubCategoryData.value = [...currentSubCategoryData.value, ...res.data.data.list];
}
});
};
let handleClose = () => {
emits('close', false);
};
defineExpose({
initIndex,
currentSubCategoryData
});
</script>
<style lang="scss" scoped>
.content {
margin-top: 13%;
.right-cates {
.right-cates {
width: 100%;
height: 100%;
background-color: #fff;
padding: 0 24rpx;
.item-container {
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: #fff;
height: 160rpx;
padding: 12rpx 0;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1rpx solid #f5f5f5;
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 20rpx;
.title {
display: flex;
flex-direction: column;
}
.price {
.new-price {
font-size: 32rpx;
}
.old-price {
margin-left: 10rpx;
color: #969799;
font-size: 20rpx;
text-decoration: line-through;
}
}
}
}
}
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
margin-top: 100rpx;
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
padding-left: 20rpx;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
padding-left: 20rpx;
}
.u-tab-item-active::before {
content: '';
position: absolute;
border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>
src/pages/productLine/components/categoryPopup1.vue 0 → 100644
浏览文件 @ 4d709ef9
<template>
<u-popup
v-model="show"
mode="bottom"
length="90%"
:mask-close-able="false"
closeable
@close="handleClose"
>
<!-- 搜索 -->
<view
style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<view class="content">
<view class="right-cates">
<u-tabs
name="name"
:list="categoryList"
v-model="current"
@change="tabsChange"
></u-tabs>
<goodsItem
v-for="item in currentSubCategoryData"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="cateGoryGoods(item)"
/>
<view style="padding: 20rpx;">
<u-loadmore
:status="status"
icon-type="flower"
:load-text="loadText"
@loadmore="loadmore"
/>
</view>
</view>
</view>
</u-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getCatalogIndex, getGoodsList } from '@/api/category';
import goodsItem from '@/components/goodsItem.vue';
// 选择tabs的下标
let current = ref(0);
// tabs下的商品数据
let currentSubCategoryData = ref([] as any);
// tabs数据
let categoryList = ref([] as any);
// 查询参数
const listQuery = ref({
categoryId: 0,
page: 1,
limit: 10,
});
// 自定义加载状态
let loadText = ref({
loadmore: '点击加载更多',
loading: '努力加载中',
nomore: '实在没有了',
});
let status = ref('loadmore');
let total = ref(0);
let props = defineProps({
show: {
type: Boolean,
default: false,
},
});
let emits = defineEmits(['close', 'categoryData']);
const search = (val: any) => {
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
// 开始添加产品线产品
let cateGoryGoods = (data: any) => {
emits('categoryData', data);
handleClose();
};
// 监听tabs
let tabsChange = (e: any) => {
currentSubCategoryData.value = [];
current.value = e;
listQuery.value.categoryId = categoryList.value[e].id;
initGoodsList(listQuery.value);
};
// 点击加载数据
let loadmore = () => {
// 判断是否还有下一页数据
if (listQuery.value.page * listQuery.value.limit >= total.value)
return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
listQuery.value.page += 1;
initGoodsList(listQuery.value);
console.log('点击加载');
};
// 获取商品数据
const initGoodsList = (data: any) => {
status.value = 'loading';
getGoodsList(data).then((res: any) => {
if (res.data.code === 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total;
currentSubCategoryData.value = [...currentSubCategoryData.value, ...res.data.data.list];
}
});
};
let initIndex = () => {
getCatalogIndex().then((res: any) => {
if (res.data.code === 200) {
categoryList.value = res.data.data.categoryList;
if (listQuery.value.categoryId === 0)
listQuery.value.categoryId = categoryList.value[0].id;
initGoodsList(listQuery.value);
}
});
};
let handleClose = () => {
emits('close', false);
};
defineExpose({
initIndex,
});
</script>
<style lang="scss" scoped>
.content {
margin-top: 13%;
.right-cates {
width: 100%;
height: 100%;
background-color: #fff;
}
}
</style>
src/pages/productLine/productLine.vue
浏览文件 @ 4d709ef9
......@@ -98,13 +98,7 @@
import { ref } from 'vue';
import { indexDetails } from '@/api/index';
import { useStore } from '@/store/useStore';
import {
addProductLineCart,
productLineCollect,
delProductLineCollect,
productLineByuNow,
getProductLineByuNowData,
} from '@/api/productLine';
import { addProductLineCart, productLineCollect, delProductLineCollect } from '@/api/productLine';
import config from '@/utils/config';
import dragAndDropSort from './components/drag-and-drop-sort.vue';
import categoryPopup from './components/categoryPopup.vue';
......@@ -152,6 +146,7 @@ let buttonGroup = ref([
]);
let addTabs = () => {
categoryRef.value.currentSubCategoryData = []
showPopup.value = true;
categoryRef.value.initIndex();
};
......
src/pages/profile/setting.vue
浏览文件 @ 4d709ef9
......@@ -35,7 +35,7 @@
></u-cell-item>
<u-cell-item icon="" title="密码设置" :value="userData.pwd" @click="setPwd"></u-cell-item>
<u-cell-item icon="" title="手机号" :value="userData.mobile"></u-cell-item>
<u-cell-item icon="" title="姓名" value="userData"></u-cell-item>
<u-cell-item icon="" title="昵称" value="七妹"></u-cell-item>
<u-cell-item icon="" title="邮箱" value="userData"></u-cell-item>
</u-cell-group>
......
src/utils/config.ts
浏览文件 @ 4d709ef9
const CONFIG: any = {
// 开发环境配置
development: {
assetsPath: 'http://192.168.0.23', // 静态资源路径
baseUrl: 'http://192.168.0.23', // 后台接口请求地址
hostUrl: 'http://192.168.0.23', // H5地址(前端运行地址)
assetsPath: 'http://192.168.60:81', // 静态资源路径
baseUrl: 'http://192.168.0.9:8089', // 后台接口请求地址
// baseUrl: 'http://192.168.0.60:81', // 后台接口请求地址
hostUrl: 'http://192.168.0.60:81', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址
},
// 生产环境配置
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论