Skip to content

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

重构需求

上级 5986ea5a
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 972 行增加 和 178 行删除
package.json
浏览文件 @ aa2028b1
......@@ -19,7 +19,8 @@
"lodash": "^4.17.21",
"node-sass": "^7.0.1",
"pinia": "^2.0.21",
"vue": "^3.2.37",
"vue": "^3.2.45",
"vue-draggable-next": "^2.1.1",
"vue-i18n": "^9.1.9",
"vuex": "^4.0.2"
},
......
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue
浏览文件 @ aa2028b1
......@@ -377,6 +377,10 @@ export default {
defaultSelect: {
Type: Object,
},
// 默认选中不全的SKU
defaultNotAllSelect: {
Type: Object,
},
// 是否使用缓存
useCache: {
Type: Boolean,
......@@ -614,6 +618,7 @@ export default {
);
Object.assign(that.selectShop, select_sku_info);
that.defaultSelectSku();
that.notAllSelected()
that.complete = true;
},
async open() {
......@@ -670,7 +675,7 @@ export default {
that.updateGoodsInfo(goodsInfo);
that.updateValue(true);
} else {
console.log(goodsInfo, 'goodsInfo111');
// console.log(goodsInfo, 'goodsInfo111');
that.toast('未获取到商品信息', 'none');
that.$emit('input', false);
return false;
......@@ -973,10 +978,46 @@ export default {
let color = that[name] ? that[name] : themeColor[theme][name];
return color;
},
// 选中不全的规格
notAllSelected() {
let that = this
let { defaultNotAllSelect } = that
if (defaultNotAllSelect && defaultNotAllSelect.sku && defaultNotAllSelect.sku.length > 0) {
that.selectNotAllSku(defaultNotAllSelect);
}
},
selectNotAllSku(obj = {}) {
let that = this;
let { sku: skuArr, num: selectNum } = obj;
let specListArr = that.goodsInfo[that.specListName];
if (skuArr && specListArr.length === skuArr.length) {
// 先清空
let skuClickArr = [];
for (let index = 0; index < skuArr.length; index++) {
let skuName = skuArr[index];
let specList = specListArr[index].list;
let index1 = index;
let index2 = that.getListIndex(specList, 'name', skuName);
if (index2 != -1) {
skuClickArr.push({
spec: specList[index2],
index1: index1,
index2: index2,
});
}
}
if (skuClickArr.length != 0) {
that.init(true);
skuClickArr.map(item => {
that.skuClick(item.spec, item.index1, item.index2);
});
}
}
if (selectNum > 0) that.selectNum = selectNum;
},
defaultSelectSku() {
let that = this;
let { defaultSelect } = that;
// console.log(defaultSelect, 'defaultSelect');
if (defaultSelect && defaultSelect.sku && defaultSelect.sku.length > 0) {
that.selectSku(defaultSelect);
}
......@@ -997,6 +1038,7 @@ export default {
let skuClickArr = [];
let clickKey = true;
for (let index = 0; index < skuArr.length; index++) {
// console.log(skuArr.length[index]);
let skuName = skuArr[index];
let specList = specListArr[index].list;
let index1 = index;
......
src/pages.json
浏览文件 @ aa2028b1
差异被折叠。
src/pages/cart/index.vue
浏览文件 @ aa2028b1
......@@ -279,7 +279,7 @@ let togoods = (data: any) => {
});
else
uni.reLaunch({
url: '../productLine/productLine?id=' + data.goodsId + '&cartId=' + data.id,
url: '../productLine1/index?id=' + data.goodsId + '&cartId=' + data.id,
});
};
......
src/pages/goods/goodsSku.vue
浏览文件 @ aa2028b1
......@@ -2,10 +2,10 @@
<template>
<view class="app">
<vk-data-goods-sku-popup v-if="flag" ref="skuPopupRef" v-model="skuKey" border-radius="20"
:localdata="goodsInfo" :mode="skuMode" :defaultSelect="defaultSelect" @open="onOpenSkuPopup"
@close="SkuPopup" @add-cart="addCarts" @buy-now="buyNow" @change="onChange" @num-change="numChange"
@add-product="addProduct" @plus="onPlus" @confirm="onConfirm" @blur="onBlur" @select-parts="selectParts"
@selectAll="selectAll">
:localdata="goodsInfo" :mode="skuMode" :defaultSelect="defaultSelect"
:defaultNotAllSelect="defaultNotAllSelect" @open="onOpenSkuPopup" @close="SkuPopup" @add-cart="addCarts"
@buy-now="buyNow" @change="onChange" @num-change="numChange" @add-product="addProduct" @plus="onPlus"
@confirm="onConfirm" @blur="onBlur" @select-parts="selectParts" @selectAll="selectAll">
</vk-data-goods-sku-popup>
</view>
</template>
......@@ -37,7 +37,8 @@ let props = defineProps({
}
})
let flag = ref(true)
let defaultSelect = ref()
let defaultSelect = ref() //默认选中规格
let defaultNotAllSelect = ref() // 默认选中但不全的规格
let goodsInfoCopy = ref() // 规格全选后避免丢失所填的自定义规格
watch([selectedGoodsItem, selectedGoodsSum], (newVal) => {
......@@ -96,6 +97,7 @@ let selectAll = (data: any) => {
})
if (arr.length === 1) {
skuKey.value = false
defaultNotAllSelect.value = {}
defaultSelect.value = { sku: goodsInfo.value.sku_list[arr[0]].sku_name_arr, num: 1 }
setTimeout(() => skuKey.value = true);
}
......@@ -328,7 +330,6 @@ const addProduct = (selectShop: any) => {
detailId.value = undefined
}
// 获取分组id
const getProductId = (specText: any) => {
let productId;
......@@ -355,6 +356,7 @@ const handleClose = () => {
specStore.$reset()
emits('selected', '')
defaultSelect.value = {}
defaultNotAllSelect.value = {}
goodsInfo.value = {}
skuPopupRef.value.init()
}
......@@ -374,6 +376,7 @@ defineExpose({
partsIds,
goodsInfoCopy,
defaultSelect,
defaultNotAllSelect,
init,
handleClose,
onPlus
......
src/pages/productLine/components/categoryPopup1.vue deleted 100644 → 0
浏览文件 @ 5986ea5a
<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/importProductLine.vue
浏览文件 @ aa2028b1
......@@ -5,11 +5,7 @@
<view class="right-cates">
<view class="right-cates-list">
<u-cell-group>
<u-cell-item icon="" :title="item.goodsName" :arrow="false"
v-for="(item, index) in lineList">
<!-- <template #title>
{{ item.goodsName }}
</template> -->
<u-cell-item icon="" :title="item.goodsName" :arrow="false" v-for="item in lineList">
<template #right-icon>
<view style="margin-left: 30rpx;">
<u-tag v-show="item.size" :text="item.size" type="info" size="mini"
......@@ -18,7 +14,6 @@
style="margin-right: 10rpx;" />
<u-tag v-show="item.Segs" :text="item.Segs" type="info" size="mini" />
</view>
</template>
</u-cell-item>
</u-cell-group>
......@@ -98,6 +93,7 @@ onReady(() => {
lineList.value = []
setTitleRef.value.title = ''
uni.$on('importProductLineData', (res: any) => {
console.log(res.data, 'res.data');
if (res.data.lineId) {
if (res.data.userHasCollect === 1) {
collectData.value = {
......@@ -150,6 +146,7 @@ let matchSpecifications = () => {
}
}
})
console.log(lineList.value);
}
// 处理要修改的数据
......
src/pages/productLine/productLine.vue
浏览文件 @ aa2028b1
......@@ -321,7 +321,6 @@ let sheetEdit = (index: number) => {
if (lineId.value) {
data.updateTime = null;
lineEdit.value = data;
// console.log(lineEdit.value, 'xiugaua');
if (lineEdit.value.deleted && !lineEdit.value.isSubmit)
return uni.showToast({
title: '请勿修改失效商品',
......@@ -592,6 +591,8 @@ let initCategory = (data: any) => {
// 保存到产品线
let addProduct = (data: any, productId: number, specifications: any, specificationCustom: any) => {
let index = lineList.value.length - 1;
console.log(index, 'sada');
lineList.value.splice(index, 0, {
name: data.goods_name,
url: data.image,
......@@ -629,8 +630,6 @@ let initDetails = (id: number) => {
else specStore.$reset() // 重置数据
goodsSkuRef.value.skuKey = true;
goodsSkuRef.value.skuMode = 5;
// 设置自定义规格的
// console.log(res.data.data, '商品详情数据');
}
});
......
src/pages/productLine1/components/categoryPopup.vue 0 → 100644
浏览文件 @ aa2028b1
<template>
<u-popup v-model="show" mode="bottom" length="80%" :mask-close-able="false" closeable @close="handleClose">
<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>
<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>
<search-popup ref="searchPopupRef" :show="showSearchPopup" @search-close="searchClose"
@cateGoryGoods="cateGoryGoods" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getCatalogIndex, getGoodsList } from '@/api/category';
import config from '@/utils/config';
import searchPopup from './searchPopup.vue';
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 status = ref('loadmore');
let total = ref(0);
let emits = defineEmits(['close', 'categoryData']);
const showSearchPopup = ref(false);
const searchPopupRef = ref();
let props = defineProps({
show: {
type: Boolean,
default: false,
},
});
const search = (val: any) => {
// if (!val.value) return;
searchPopupRef.value.searchQuery.keyword = val.value;
searchPopupRef.value.initList();
showSearchPopup.value = true;
};
const cateGoryGoods = (row: any) => {
emits('categoryData', row);
handleClose();
};
// 点击左边的栏目切换
const swichMenu = async (index: any, id: number) => {
currentSubCategoryData.value = [];
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 = () => {
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);
};
const searchClose = () => {
showSearchPopup.value = false;
};
defineExpose({
initIndex,
currentSubCategoryData,
});
</script>
<style lang="scss" scoped>
// :deep(.uni-scroll-view-content) {
// background-color: #f6f6f6;
// }
.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;
border-left: #f6f6f6 solid 1px;
border-right: #f6f6f6 solid 1px;
}
.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/productLine1/components/drag-and-drop-sort.vue 0 → 100644
浏览文件 @ aa2028b1
<template>
<view class="drag-and-drop-sort-B" :style="[containerSize]">
<template v-if="controlsPositionArray.length !== 0">
<view v-for="(item, index) in controlsArray" :key="index" class="_item" :style="{
background: '#fff',
transition: curretnControlsIndex === index ? 'initial' : '.3s',
'z-index': curretnControlsIndex === index ? 1 : 0,
width: controlsSize.width + 'px',
height: controlsSize.height + 'px',
top: controlsPositionArray[index].top + 'px',
left: controlsPositionArray[index].left + 'px',
}">
<view @touchstart="handleTouchstart($event, index)" @touchmove.prevent="handleTouchmove($event, index)"
@touchend="handleTouchend" @tap="handleTap(index, item)" style="width: 100%; height: 100%;">
<!-- 自定义内容 -->
<view class="item"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
:style="{ backgroundColor: item.show ? '#fff' : '#f5f5f5' }">
<slot :row="item" :index="index"></slot>
</view>
</view>
</view>
</template>
<!-- <u-action-sheet
:list="sheetList"
v-model="sheetShow"
:cancel-btn="false"
class="action-sheet"
@click="sheetChange"
></u-action-sheet> -->
</view>
</template>
<script>
export default {
name: 'drag-and-drop-sort',
props: {
// 容器大小
// containerSize: {
// type: Object,
// default: () => ({ wdith: '120px', height: '40px' }),
// },
// 控件的大小
controlsSize: {
type: Object,
default: () => ({ width: 0, height: 0 }),
},
// 数据列表
controlsList: {
type: Array,
default: () => [],
},
// 是否为导入方式进入
isUpload: {
type: Boolean,
default: false,
},
},
emits: ['sheet-del', 'sheet-edit', 'sheet-copy', 'height-change'],
data() {
return {
sheetShow: false,
sheetList: [
{
text: '修改规格',
},
{
text: '复制',
},
{
text: '删除',
},
],
// 控件列表
controlsArray: [],
// 每行最大存放的个数
maxWidthCount: 1,
// 控件的间距
margin: {
margin_x: 0,
margin_y: 2,
},
// 记录所有控件的初始位置
recordInitControlsPoisitonList: [],
// 控件的数据
controlsPositionArray: [],
// 记录当前手指的位置
recordPosition: {
x: 0,
y: 0,
},
// 记录当前操作的控件数据
recordControlsPositionItem: {},
// 当前操作的控件的下标
curretnControlsIndex: -1,
containerSize: {
wdith: '80px',
height: '',
},
systemInfo: undefined,
sheetIndex: 0,
};
},
mounted() {
this.init();
},
methods: {
init() {
// 获取系统信息
this.systemInfo = uni.getSystemInfoSync();
// 获取控件列表
this.controlsArray = this.controlsList;
// 初始化控件的位置
this.controlsPositionArray = this.initControlsPosition();
},
/** 初始化各个控件的位置 */
initControlsPosition() {
// 用于返回出去的新数组
let tempArray = [];
// 设置控件位置
for (let i = 0, j = 0; i < this.controlsList.length; i++, j++) {
tempArray[i] = {
left: this.margin.margin_x,
top:
j * (this.controlsSize.height + this.margin.margin_y) +
this.margin.margin_y,
};
}
// 记录数据 - 进行深拷贝
this.recordInitControlsPoisitonList = [...tempArray];
// 返回数据
// console.log(tempArray, 'tempArray');
return tempArray;
},
// 点击操作
handleTap(index, item) {
let that = this;
if (that.isUpload) return
// console.log(that.controlsArray, index);
if (index == that.controlsArray.length - 1) return;
that.controlsArray.forEach((item, i) => {
if (i !== index) item.show = false;
});
that.controlsArray[index].show = true;
// that.sheetShow = true;
that.sheetIndex = index;
uni.showActionSheet({
itemList: ['修改规格', '复制', '删除'],
success: function (res) {
that.sheetChange(res.tapIndex, item);
},
fail: function (res) {
console.log(res.errMsg);
},
});
},
// 点击选择操作
sheetChange(index, item) {
let that = this;
switch (index) {
case 0:
that.$emit('sheet-edit', that.sheetIndex);
break;
case 1:
that.$emit('sheet-copy', that.sheetIndex);
break;
case 2:
that.$emit('sheet-del', that.sheetIndex, item);
break;
}
},
/** 处理手指触摸后移动 */
handleTouchmove(event, index) {
if (this.isUpload) return
if (index == this.controlsArray.length - 1) return;
const { pageX, pageY } = event.touches[0];
// 获取移动的差
this.controlsPositionArray[this.curretnControlsIndex] = {
left:
this.controlsPositionArray[this.curretnControlsIndex].left +
(pageX - this.recordPosition.x),
top:
this.controlsPositionArray[this.curretnControlsIndex].top +
(pageY - this.recordPosition.y),
};
// 记录位置
this.recordPosition = { x: pageX, y: pageY };
// 判断当前移动的位置是否需要进行排序
if (
this.controlsPositionArray[this.curretnControlsIndex].top >=
this.recordInitControlsPoisitonList[this.recordInitControlsPoisitonList.length - 1]
.top
)
return;
if (
this.curretnControlsIndex !== this.controlsPositionArray.length - 1 &&
this.controlsPositionArray[this.curretnControlsIndex].top >
this.controlsPositionArray[this.curretnControlsIndex + 1].top
) {
// 向下移动
// 交换位置
this._handleChangeControlsPosition(0, this.curretnControlsIndex + 1);
}
// 向上移动
else if (
this.curretnControlsIndex !== 0 &&
this.controlsPositionArray[this.curretnControlsIndex].top <
this.controlsPositionArray[this.curretnControlsIndex - 1].top
) {
// 交换位置
this._handleChangeControlsPosition(0, this.curretnControlsIndex - 1);
}
},
/** 处理手指触摸开始事件 */
handleTouchstart(event, index) {
if (this.isUpload) return
if (index == this.controlsArray.length - 1) return;
const { pageX, pageY } = event.touches[0];
// 记录一些数据
this.curretnControlsIndex = index;
this.recordPosition = { x: pageX, y: pageY };
this.recordControlsPositionItem = this.controlsPositionArray[index];
},
/** 处理手指松开事件 */
handleTouchend(event) {
// 将操控的控件归位
this.controlsPositionArray[
this.curretnControlsIndex
] = this.recordInitControlsPoisitonList[this.curretnControlsIndex];
this.curretnControlsIndex = -1;
},
// 达到最后一个返回原位
handleReturn(index) {
let i = this.controlsArray.length - 2;
let arr = this.controlsArray[index];
this.controlsArray.splice(i, 1);
this.controlsArray.splice(index, 0, arr);
},
/**
* 处理交换控件位置的方法 -
* @param {number} index 需要与第几个下标交换位置
* */
_handleChangeControlsPosition(type, index) {
// 记录当前操控的控件数据
let tempControls = this.controlsArray[this.curretnControlsIndex];
// 设置原来位置的数据
this.controlsArray[this.curretnControlsIndex] = this.controlsArray[index];
// 将临时存放的数据设置好
this.controlsArray[index] = tempControls;
// 调整控件位置数据
this.controlsPositionArray[index] = this.controlsPositionArray[
this.curretnControlsIndex
];
this.controlsPositionArray[this.curretnControlsIndex] = this.recordControlsPositionItem;
// 改变当前选中的位置
this.curretnControlsIndex = index;
// 记录新位置的数据
this.recordControlsPositionItem = this.recordInitControlsPoisitonList[
this.curretnControlsIndex
];
},
},
watch: {
controlsArray: {
handler: function () {
let that = this;
this.controlsPositionArray = that.initControlsPosition();
},
deep: true,
immediate: true,
},
// 监听数组， 大于15条时，增加高度
controlsList: {
handler: function () {
let that = this;
// that.$emit('height-change');
// if (that.controlsPositionArray.length > 17) that.$emit('height-change', 28);
// else that.$emit('height-change', 40);
},
deep: true,
immediate: true,
},
},
};
</script>
<style scoped lang="scss">
$sheet-heigth: var(--window-bottom);
.drag-and-drop-sort-B {
position: relative;
._item {
position: absolute;
}
}
// .action-sheet {
// position: fixed;
// bottom: 50px;
// z-index: 99;
// overflow-y: scroll;
// -webkit-overflow-scrolling: touch;
// }
</style>
src/pages/productLine1/components/searchPopup.vue 0 → 100644
浏览文件 @ aa2028b1
<template>
<u-popup
v-model="show"
mode="bottom"
length="90%"
:mask-close-able="false"
closeable
@close="handleClose"
>
<view>
<view
style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
>
<uni-search-bar
v-model="searchQuery.keyword"
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<view style="height: 120rpx"></view>
<view v-if="searchList.length !== 0">
<goodsItem
v-for="item in searchList"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="searchGoods(item)"
/>
<view style="padding-bottom: 40rpx;">
<u-loadmore :status="status" icon-type="flower" @loadmore="loadMore" />
</view>
</view>
<view v-else><u-loadmore status="nomore" icon-type="flower" /></view>
</view>
</u-popup>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getGoodsList } from '@/api/category';
import goodsItem from '@/components/goodsItem.vue';
let props = defineProps({
show: {
type: Boolean,
default: false,
},
});
let emits = defineEmits(['search-close', 'cateGoryGoods']);
let searchQuery = reactive({
keyword: '',
page: 1,
limit: 10,
categoryId: 0,
});
let status = ref('loadmore');
let total = ref(0);
let searchList = ref([] as any);
let search = (val: any) => {
searchList.value = [];
searchQuery.page = 1;
searchQuery.keyword = val.value;
initList();
};
let searchGoods = (item: any) => {
emits('search-close', false);
emits('cateGoryGoods', item);
};
// 点击加载更多 status = loadmore 时生效
let loadMore = () => {
// 判断是否还有下一页数据
if (searchQuery.page * searchQuery.limit >= total.value) return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
searchQuery.page += 1;
initList();
};
let initList = () => {
status.value = 'loading';
getGoodsList(searchQuery).then((res: any) => {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
if (res.data.code === 200) {
total.value = res.data.data.total;
searchList.value = [...searchList.value, ...res.data.data.list];
}
});
};
let handleClose = () => {
searchList.value = [];
emits('search-close', false);
};
defineExpose({
searchQuery,
initList,
});
</script>
<style></style>
src/pages/productLine1/components/setTitle.vue 0 → 100644
浏览文件 @ aa2028b1
<template>
<u-popup v-model="showTitle" mode="center" height="380rpx" width="80%">
<view style="padding: 30rpx 30rpx 0 30rpx; height: 100%;">
<view style="font-size: 34rpx; width: 100%; text-align: center; margin-bottom: 20rpx;">
设置产品线名称
</view>
<u-form label-width="110">
<u-form-item label="名称:">
<u-input v-model="title" :type="type" :border="true" clearable placeholder="请输入名称" />
</u-form-item>
</u-form>
<u-button :maxlength="11" type="error" style="margin-top: 40rpx;" @tap="saveTitle">
保存
</u-button>
</view>
</u-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useStore, useLineStore } from '@/store/useStore';
let store = useStore();
let store1 = useLineStore();
let showTitle = ref(false);
// let title = ref(store.title);
let title = ref(store1.title);
let type = ref('text');
let saveTitle = () => {
if (title.value) {
store1.$patch({
title: title.value,
});
uni.showToast({
title: '设置成功',
icon: 'none',
});
showTitle.value = false;
} else {
uni.showToast({
title: '设置失败',
icon: 'none',
});
}
};
defineExpose({
showTitle,
title
});
</script>
<style>
</style>
src/pages/productLine1/index.vue 0 → 100644
浏览文件 @ aa2028b1
差异被折叠。
src/pages/profile/collection.vue
浏览文件 @ aa2028b1
......@@ -107,7 +107,7 @@ let toGoods = (data: any) => {
let toProductLine = (id: any) => {
uni.reLaunch({
url: '../productLine/productLine?id=' + id + '&collectionId=0',
url: '../productLine1/index?id=' + id + '&collectionId=0',
});
};
......
src/store/useStore.ts
浏览文件 @ aa2028b1
......@@ -2,36 +2,46 @@ import { defineStore, createPinia } from 'pinia'
// 产品线数据管理
export let useStore = defineStore('productLine', {
state: () => {
return {
lineData: [{ show: false, status: 0 }],
title: '',
star: false,
collectData: {} // 收藏返回数据
}
}
state: () => {
return {
lineData: [{ show: false, status: 0 }],
title: '',
star: false,
collectData: {}, // 收藏返回数据
}
},
})
// 产品线数据管理
export let useLineStore = defineStore('productLine1', {
state: () => {
return {
lineData: [],
title: '',
star: false,
collectData: {}, // 收藏返回数据
}
},
})
// 订单管理页面
export let useCurrentStore = defineStore('current', {
state: () => {
return {
current: 0
}
}
state: () => {
return {
current: 0,
}
},
})
// 默认规格数据
export let useSpecStore = defineStore('specData', {
state: () => {
return {
defaultSelect: {} as any, // 数据
isDefaultSku: false, // 是否存在默认值
partIds: [] as any,
partList: [],
specificationCustom: []
}
}
state: () => {
return {
defaultSelect: {} as any, // 数据
isDefaultSku: false, // 是否存在默认值
partIds: [] as any,
partList: [],
specificationCustom: [],
}
},
})
src/utils/isObject.ts 0 → 100644
浏览文件 @ aa2028b1
//判断两个对象是否相同（包含绝对相等和他们是否有相同的形状）
function looseEqual(a: any, b: any): any {
if (a === b) {
//如果是绝对相等就直接返回true
return true
}
//如果不是绝对相等就哦按的他们是否有相同的形状
var isObjectA = isObject(a)
var isObjectB = isObject(b)
if (isObjectA && isObjectB) {
//两个均是对象
try {
var isArrayA = Array.isArray(a)
var isArrayB = Array.isArray(b)
if (isArrayA && isArrayB) {
//如果都是数组
if (a.length === b.length) {
//如果长度相等
return a.every(function (e: any, i: any) {
//用every和递归来比对a数组和b数组的每个元素，并返回
return looseEqual(e, b[i])
})
}
//长度都不等直接返回false
return false
} else if (a instanceof Date && b instanceof Date) {
//如果是Date 则直接getTime 比较
return a.getTime() === b.getTime()
} else if (!isArrayA && !isArrayB) {
//对象的比较
//拿到两个对象的key
var keysA = Object.keys(a)
var keysB = Object.keys(b)
if (keysA.length === keysB.length) {
//如果keys相等
return keysA.every(function (key: any) {
//用every和递归来比对a对象和b对象的每个元素值，并返回
return looseEqual(a[key], b[key])
})
}
//长度都不等直接返回false
return false
} else {
return false
}
} catch (e) {
return false
}
} else if (!isObjectA && !isObjectB) {
//如果都不是对象则按String来处理
return String(a) === String(b)
} else {
return false
}
}
function isObject(obj: any) {
return obj !== null && typeof obj === 'object'
}
export { looseEqual }
yarn.lock
浏览文件 @ aa2028b1
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论