Skip to content

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

测试

上级 2a392919
隐藏空白字符变更
内嵌 并排
正在显示 包含 566 行增加 和 18 行删除
src/pages/category/index2.vue
浏览文件 @ b35a791b
......@@ -11,7 +11,7 @@
/>
</view>
<view class="u-menu-wrap">
<!-- <scroll-view
<scroll-view
scroll-y
scroll-with-animation
class="u-tab-view menu-scroll-view"
......@@ -27,7 +27,7 @@
>
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view> -->
</scroll-view>
<view class="right-cates">
<u-tabs
name="name"
......
src/pages/order/orderList.vue
浏览文件 @ b35a791b
......@@ -61,12 +61,15 @@
<view class="content">
<view class="title u-line-2">{{ item.goodsName }}</view>
<view class="type">{{ item.type }}</view>
<view
v-for="(item1, index1) in item.specifications.length"
:key="index1"
class="delivery-time"
>
{{ item.specifications[index1] }}
<view class="content-item">
<view
v-for="(item1, index1) in item.specifications
.length"
:key="index1"
class="delivery-time"
>
{{ item.specifications[index1] }}
</view>
</view>
</view>
<view class="right">
......@@ -155,6 +158,7 @@ let status = ref('loadmore')
onLoad((options?: any) => {
if(options) {
current.value = options.showType
swiperCurrent.value = options.showType
listQuery.value.showType = options.showType
}
getOrderList()
......@@ -284,16 +288,23 @@ page {
width: 45%;
.title {
font-size: 28rpx;
line-height: 50rpx;
line-height: 72rpx;
}
.type {
margin: 10rpx 0;
font-size: 24rpx;
color: $u-tips-color;
}
.delivery-time {
color: #e5d001;
font-size: 24rpx;
.content-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
.delivery-time {
color: #e5d001;
font-size: 24rpx;
margin-right: 8rpx;
}
}
}
.right {
......
src/pages/productLine/data.ts 0 → 100644
浏览文件 @ b35a791b
export const imgList = [
{
id: 0,
url: '../../static/cpx/line1.png',
show: false
},
{
id: 1,
url: '../../static/cpx/line2.png',
show: false
},
{
id: 2,
url: '../../static/cpx/line3.png',
show: false
},
{
id: 3,
url: '../../static/cpx/line4.png',
show: false
},
{
id: 4,
url: '../../static/cpx/line5.png',
show: false
},
{
id: 5,
url: '../../static/cpx/line6.png',
show: false
},
{
id: 6,
url: '../../static/cpx/line7.png',
show: false
},
{
id: 7,
url: '../../static/cpx/line8.png',
show: false
},
{
id: 8,
url: '../../static/cpx/line9.png',
show: false
},
{
id: 9,
url: '../../static/cpx/line1.png',
show: false
},
];
src/pages/productLine/drag-and-drop-sort.vue 0 → 100644
浏览文件 @ b35a791b
<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: item,
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="handleTouchmove"
@touchend="handleTouchend"
style="width: 100%; height: 100%;"
>
<!-- 自定义内容 -->
<view
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #fff;"
>
<u-section title="今日热门" :right="false" style="margin-left: 20rpx;" :show-line="false"></u-section>
<!-- <view class="">上班级系列</view> -->
<!-- <image :src="item.url" style="width: 80%; height: 80%;" /> -->
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'drag-and-drop-sort',
props: {
// 容器大小
// containerSize: {
// type: Object,
// default: () => ({ wdith: '80px', height: this.systemInfo.windowHeight }),
// },
// 控件的大小
controlsSize: {
type: Object,
default: () => ({ width: 0, height: 0 }),
},
// 数据列表
controlsList: {
type: Array,
default: () => [],
},
},
data() {
return {
// 控件列表
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,
};
},
mounted() {
// 获取系统信息
this.systemInfo = uni.getSystemInfoSync();
this.containerSize.height = this.systemInfo.windowHeight * 2;
console.log(this.systemInfo);
// 获取控件列表
this.controlsArray = this.controlsList;
// 初始化控件的位置
this.controlsPositionArray = this.initControlsPosition();
},
methods: {
/** 初始化各个控件的位置 */
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;
},
/** 处理手指触摸后移动 */
handleTouchmove(event) {
console.log(event);
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.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) {
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;
},
/**
* 处理交换控件位置的方法 -
* @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
];
},
},
};
</script>
<style scoped lang="scss">
.drag-and-drop-sort-B {
position: relative;
._item {
position: absolute;
}
}
</style>
src/pages/productLine/productLine.vue
浏览文件 @ b35a791b
<template>
<view class="">
产品线
<view class="u-wrap">
<!-- 搜索 -->
<view>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<view class="u-menu-wrap">
<view style="position: fixed; left: 0;">
<!-- <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> -->
<drag-and-drop-sort
style="display: flex; justify-content: center;"
:controlsList="imgList"
:controlsSize="{ width: 120, height: 40 }"
>
<template #default="scope">
123
<!-- <u-image width="80" height="80" :src="scope.row.url"></u-image> -->
</template>
</drag-and-drop-sort>
</view>
<!-- :containerSize="{ width: '80px', height: '100%' }" -->
<view class="right-cates">
<view style="width: 80px;">
<!-- <drag-and-drop-sort
style="display: flex; justify-content: center;"
:controlsList="imgList"
:controlsSize="{ width: 80, height: 80 }"
>
<template #default="scope">
<u-image width="80" height="80" :src="scope.row.url"></u-image>
</template>
</drag-and-drop-sort> -->
<!-- <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>
</view>
</view>
</view>
</template>
<script>
<script lang="ts" setup>
import { ref } from 'vue';
import { getCatalogIndex } from '@/api/category';
import config from '@/utils/config';
import dragAndDropSort from './drag-and-drop-sort.vue';
import { imgList } from './data';
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 listQuery = ref({
categoryId: 0,
page: 1,
limit: 10,
});
const search = (val: any) => {
uni.navigateTo({ url: '../index/search?keyword=' + val.value });
};
// 点击左边的栏目切换
const swichMenu = async (index: any, id: number) => {
if (index == current) return;
current.value = index;
listQuery.value.categoryId = id;
// 如果为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;
console.log(categoryList.value, '分类数据');
}
});
};
initIndex();
// 点击滑动到底部
// setTimeout(() => {
// uni.pageScrollTo({scrollTop: 99999, duration: 0});
// }, 500);
</script>
<style>
</style>
\ No newline at end of file
<style lang="scss" scoped>
.right-cates {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
// align-items: center;
}
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
// height: calc(100vh - var(--window-top));
min-height: 100vh;
max-height: 2000px;
/* #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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论