Skip to content

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

产品线中途测试

上级 1f0d50eb
隐藏空白字符变更
内嵌 并排
正在显示 包含 406 行增加 和 296 行删除
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue
浏览文件 @ 1c7d3811
...@@ -152,6 +152,18 @@ ...@@ -152,6 +152,18 @@
{{ buyNowText }} {{ buyNowText }}
</view> </view>
</view> </view>
<view class="btn-wrapper" v-else-if="mode == 5">
<view
class="sure"
:style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}"
@click="addProduct"
>
{{ addProductLine }}
</view>
</view>
</view> </view>
<!-- 页面内容结束 --> <!-- 页面内容结束 -->
</view> </view>
...@@ -170,10 +182,13 @@ export default { ...@@ -170,10 +182,13 @@ export default {
'close', 'close',
'add-cart', 'add-cart',
'buy-now', 'buy-now',
'add-product',
'cart', 'cart',
'buy', 'buy',
'product',
'num-change', 'num-change',
'change', 'change',
'clear',
], ],
props: { props: {
// true 组件显示 false 组件隐藏 // true 组件显示 false 组件隐藏
...@@ -318,6 +333,11 @@ export default { ...@@ -318,6 +333,11 @@ export default {
Type: String, Type: String,
default: '加入购物车', default: '加入购物车',
}, },
// 加入产品线
addProductLine: {
Type: String,
default: '加入产品线',
},
// 加入购物车按钮的字体颜色 // 加入购物车按钮的字体颜色
addCartColor: { addCartColor: {
Type: String, Type: String,
...@@ -885,6 +905,16 @@ export default { ...@@ -885,6 +905,16 @@ export default {
}, },
}); });
}, },
addProduct() {
let that = this;
that.checkSelectComplete({
success: function(selectShop) {
selectShop.buy_num = that.selectNum;
that.$emit('add-product', selectShop);
that.$emit('product', selectShop);
},
});
},
// 弹窗 // 弹窗
toast(title, icon) { toast(title, icon) {
uni.showToast({ uni.showToast({
...@@ -1043,6 +1073,11 @@ export default { ...@@ -1043,6 +1073,11 @@ export default {
numChange(e) { numChange(e) {
this.$emit('num-change', e.value); this.$emit('num-change', e.value);
}, },
handClose() {
let that = this
that.selectShop = {};
that.goodsInfo = {}
},
}, },
// 计算属性 // 计算属性
computed: { computed: {
...@@ -1158,7 +1193,7 @@ export default { ...@@ -1158,7 +1193,7 @@ export default {
immediate: true, immediate: true,
handler: function(newVal, oldValue) { handler: function(newVal, oldValue) {
let that = this; let that = this;
that.$emit('change', newVal) that.$emit('change', newVal);
}, },
}, },
}, },
......
src/pages/goods/goodsSku.vue
浏览文件 @ 1c7d3811
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<view class="app"> <view class="app">
<vk-data-goods-sku-popup <vk-data-goods-sku-popup
ref="skuPopup" ref="skuPopupRef"
v-model="skuKey" v-model="skuKey"
border-radius="20" border-radius="20"
:localdata="goodsInfo" :localdata="goodsInfo"
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
@buy-now="buyNow" @buy-now="buyNow"
@change="onChange" @change="onChange"
@num-change="numChange" @num-change="numChange"
@add-product="addProduct"
></vk-data-goods-sku-popup> ></vk-data-goods-sku-popup>
</view> </view>
</template> </template>
...@@ -27,12 +28,13 @@ let skuMode = ref(1); ...@@ -27,12 +28,13 @@ let skuMode = ref(1);
let skuKey = ref(false); let skuKey = ref(false);
// 后端返回的商品信息 // 后端返回的商品信息
let goodsInfo = ref({}); let goodsInfo = ref({});
let skuPopupRef = ref();
let detailData = ref() let detailData = ref()
let detailId = ref() let detailId = ref()
let selectedGoodsItem = ref('') let selectedGoodsItem = ref('')
let selectedGoodsSum = ref(1) let selectedGoodsSum = ref(1)
let emits = defineEmits(['selected']) let emits = defineEmits(['selected', 'addProduct'])
let onChange = (e: any) => { let onChange = (e: any) => {
selectedGoodsItem.value = e.sku_name_arr selectedGoodsItem.value = e.sku_name_arr
...@@ -43,23 +45,25 @@ let numChange = (e: any) => { ...@@ -43,23 +45,25 @@ let numChange = (e: any) => {
} }
watch([selectedGoodsItem, selectedGoodsSum],(newVal)=> { watch([selectedGoodsItem, selectedGoodsSum],(newVal)=> {
// console.log(newVal);
emits('selected', newVal) emits('selected', newVal)
},{immediate:true}) },{immediate:true})
// 初始化 把请求数据变成组件需要的格式 // 初始化 把请求数据变成组件需要的格式
let init = (data: any, id: number) => { let init = (data: any, id: number) => {
// console.log(data, id);
detailData.value = data detailData.value = data
detailId.value = id detailId.value = id
let productList: any = []; let productList: any = [];
productList = data.productList.map((item: any) => { productList = data.productList.map((item: any) => {
return { return {
image: item.url, image: data.info.picUrl,
sku_name_arr: item.specifications, sku_name_arr: item.specifications,
_id: item.id, _id: item.id,
goods_id: item.goodsId, goods_id: item.goodsId,
price: item.price, price: item.price,
stock: 1000, stock: 1000,
goods_name: '', goods_name: data.info.name,
}; };
}); });
// console.log(productList, 'productList'); // console.log(productList, 'productList');
...@@ -82,6 +86,8 @@ let init = (data: any, id: number) => { ...@@ -82,6 +86,8 @@ let init = (data: any, id: number) => {
sku_list: productList, sku_list: productList,
spec_list: specificationList, spec_list: specificationList,
}; };
productList = []
specificationList = []
}; };
// sku组件 开始----------------------------------------------------------- // sku组件 开始-----------------------------------------------------------
let onOpenSkuPopup = () => {}; let onOpenSkuPopup = () => {};
...@@ -177,6 +183,16 @@ let buyNow = (selectShop: any) => { ...@@ -177,6 +183,16 @@ let buyNow = (selectShop: any) => {
}) })
}; };
// 加入产品线
const addProduct = (selectShop: any) => {
skuPopupRef.value.handClose()
// console.log(selectShop, '加入产品线');
emits('addProduct', selectShop)
goodsInfo.value = {}
detailData.value = undefined
detailId.value = undefined
console.log(goodsInfo.value, 'goodsInfo.value');
}
// 获取分组id // 获取分组id
...@@ -198,6 +214,7 @@ const getProductId = (specText: any) => { ...@@ -198,6 +214,7 @@ const getProductId = (specText: any) => {
defineExpose({ defineExpose({
skuKey, skuKey,
skuMode,
init, init,
}); });
</script> </script>
......
src/pages/goods/index.vue
浏览文件 @ 1c7d3811
...@@ -128,11 +128,8 @@ import { ...@@ -128,11 +128,8 @@ import {
indexDetails, indexDetails,
collectAddordelete collectAddordelete
} from '@/api/index'; } from '@/api/index';
import config from '@/utils/config';
import goodsSku from './goodsSku' import goodsSku from './goodsSku'
let baseUrl = config.baseUrl;
const goodsSkuRef = ref() const goodsSkuRef = ref()
const attrPopup = ref(false); const attrPopup = ref(false);
const detailData: any = ref(); const detailData: any = ref();
...@@ -222,6 +219,7 @@ const onClick = (e: any) => { ...@@ -222,6 +219,7 @@ const onClick = (e: any) => {
const buttonClick = () => { const buttonClick = () => {
console.log(detailData.value, detailId.value, '加入');
goodsSkuRef.value.init(detailData.value, detailId.value) goodsSkuRef.value.init(detailData.value, detailId.value)
goodsSkuRef.value.skuKey = true goodsSkuRef.value.skuKey = true
}; };
......
src/pages/productLine/components/categoryPopup.vue 0 → 100644
浏览文件 @ 1c7d3811
<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) => {
console.log(categoryList.value);
// 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);
console.log(categoryList.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/data.ts
浏览文件 @ 1c7d3811
export const imgList = [ export const imgList = [
{ {
id: 0,
url: '../../static/cpx/line1.png',
show: false
},
{
id: 1, id: 1,
url: '../../static/cpx/line2.png', url: '../../static/cpx/line2.png',
show: false show: false,
}, },
{ {
id: 2, id: 2,
url: '../../static/cpx/line3.png', url: '../../static/cpx/line3.png',
show: false show: false
}, },
{ // {
id: 3, // id: 3,
url: '../../static/cpx/line4.png', // url: '../../static/cpx/line4.png',
show: false // show: false
}, // },
{ // {
id: 4, // id: 4,
url: '../../static/cpx/line5.png', // url: '../../static/cpx/line5.png',
show: false // show: false
}, // },
{ // {
id: 5, // id: 5,
url: '../../static/cpx/line6.png', // url: '../../static/cpx/line6.png',
show: false // show: false
}, // },
{ // {
id: 6, // id: 6,
url: '../../static/cpx/line7.png', // url: '../../static/cpx/line7.png',
show: false // show: false
}, // },
{ // {
id: 7, // id: 7,
url: '../../static/cpx/line8.png', // url: '../../static/cpx/line8.png',
show: false // show: false
}, // },
{ // {
id: 8, // id: 8,
url: '../../static/cpx/line9.png', // url: '../../static/cpx/line9.png',
show: false // show: false
}, // },
{ // {
id: 9, // id: 9,
url: '../../static/cpx/line1.png', // url: '../../static/cpx/line1.png',
show: false // show: false
}, // }
{},
]; ];
src/pages/productLine/drag-and-drop-sort.vue
浏览文件 @ 1c7d3811
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:key="index" :key="index"
class="_item" class="_item"
:style="{ :style="{
background: item, background: '#fff',
transition: curretnControlsIndex === index ? 'initial' : '.3s', transition: curretnControlsIndex === index ? 'initial' : '.3s',
'z-index': curretnControlsIndex === index ? 1 : 0, 'z-index': curretnControlsIndex === index ? 1 : 0,
width: controlsSize.width + 'px', width: controlsSize.width + 'px',
...@@ -17,22 +17,18 @@ ...@@ -17,22 +17,18 @@
> >
<view <view
@touchstart="handleTouchstart($event, index)" @touchstart="handleTouchstart($event, index)"
@touchmove.prevent="handleTouchmove" @touchmove.prevent="handleTouchmove($event, index)"
@touchend="handleTouchend" @touchend="handleTouchend"
@tap="handleTap(index)"
style="width: 100%; height: 100%;" style="width: 100%; height: 100%;"
> >
<!-- 自定义内容 --> <!-- 自定义内容 -->
<view <view
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #fff;" class="item"
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
:style="{ backgroundColor: item.show ? '#fff' : '#f5f5f5' }"
> >
<u-section <slot :row="item" :index="index"></slot>
:title="'今日热门' + index"
: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> </view>
</view> </view>
...@@ -47,7 +43,7 @@ export default { ...@@ -47,7 +43,7 @@ export default {
// 容器大小 // 容器大小
// containerSize: { // containerSize: {
// type: Object, // type: Object,
// default: () => ({ wdith: '80px', height: this.systemInfo.windowHeight }), // default: () => ({ wdith: '120px', height: '40px' }),
// }, // },
// 控件的大小 // 控件的大小
controlsSize: { controlsSize: {
...@@ -95,7 +91,6 @@ export default { ...@@ -95,7 +91,6 @@ export default {
// 获取系统信息 // 获取系统信息
this.systemInfo = uni.getSystemInfoSync(); this.systemInfo = uni.getSystemInfoSync();
this.containerSize.height = this.systemInfo.windowHeight * 2; this.containerSize.height = this.systemInfo.windowHeight * 2;
console.log(this.systemInfo);
// 获取控件列表 // 获取控件列表
this.controlsArray = this.controlsList; this.controlsArray = this.controlsList;
// 初始化控件的位置 // 初始化控件的位置
...@@ -120,12 +115,21 @@ export default { ...@@ -120,12 +115,21 @@ export default {
// 记录数据 - 进行深拷贝 // 记录数据 - 进行深拷贝
this.recordInitControlsPoisitonList = [...tempArray]; this.recordInitControlsPoisitonList = [...tempArray];
// 返回数据 // 返回数据
console.log(tempArray, 'tempArray'); // console.log(tempArray, 'tempArray');
return tempArray; return tempArray;
}, },
handleTap(index) {
if (index == this.controlsArray.length - 1) return;
for (let s in this.controlsArray) {
if (s === index) return;
this.controlsArray[s].show = false;
// console.log(s);
}
this.controlsArray[index].show = true;
},
/** 处理手指触摸后移动 */ /** 处理手指触摸后移动 */
handleTouchmove(event) { handleTouchmove(event, index) {
if (index == this.controlsArray.length - 1) return;
const { pageX, pageY } = event.touches[0]; const { pageX, pageY } = event.touches[0];
// 获取移动的差 // 获取移动的差
...@@ -140,12 +144,23 @@ export default { ...@@ -140,12 +144,23 @@ export default {
// 记录位置 // 记录位置
this.recordPosition = { x: pageX, y: pageY }; this.recordPosition = { x: pageX, y: pageY };
// 判断当前移动的位置是否需要进行排序 // 判断当前移动的位置是否需要进行排序
// 向下移动
// console.log(
// this.curretnControlsIndex,
// this.recordPosition
// );
if (
this.controlsPositionArray[this.curretnControlsIndex].top >=
this.recordInitControlsPoisitonList[this.recordInitControlsPoisitonList.length - 1]
.top
)
return;
if ( if (
this.curretnControlsIndex !== this.controlsPositionArray.length - 1 && this.curretnControlsIndex !== this.controlsPositionArray.length - 1 &&
this.controlsPositionArray[this.curretnControlsIndex].top > this.controlsPositionArray[this.curretnControlsIndex].top >
this.controlsPositionArray[this.curretnControlsIndex + 1].top this.controlsPositionArray[this.curretnControlsIndex + 1].top
) { ) {
// 向下移动
// 交换位置 // 交换位置
this._handleChangeControlsPosition(0, this.curretnControlsIndex + 1); this._handleChangeControlsPosition(0, this.curretnControlsIndex + 1);
} }
...@@ -162,6 +177,7 @@ export default { ...@@ -162,6 +177,7 @@ export default {
/** 处理手指触摸开始事件 */ /** 处理手指触摸开始事件 */
handleTouchstart(event, index) { handleTouchstart(event, index) {
if (index == this.controlsArray.length - 1) return;
const { pageX, pageY } = event.touches[0]; const { pageX, pageY } = event.touches[0];
// 记录一些数据 // 记录一些数据
...@@ -179,6 +195,14 @@ export default { ...@@ -179,6 +195,14 @@ export default {
this.curretnControlsIndex = -1; 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 需要与第几个下标交换位置 * @param {number} index 需要与第几个下标交换位置
...@@ -207,6 +231,15 @@ export default { ...@@ -207,6 +231,15 @@ export default {
]; ];
}, },
}, },
watch: {
controlsArray: {
handler: function() {
let that = this;
this.controlsPositionArray = that.initControlsPosition();
},
deep: true,
},
},
}; };
</script> </script>
......
src/pages/productLine/productLine.vue
浏览文件 @ 1c7d3811
<template> <template>
<view class="u-wrap"> <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="u-menu-wrap">
<view style="position: fixed; left: 2%; top: 15%;"> <view style="position: fixed; left: 8rpx; top: 8%;">
<!-- <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 <drag-and-drop-sort
style="display: flex; justify-content: center;" style="display: flex; justify-content: center;"
:controlsList="imgList" :controlsList="lineList"
:controlsSize="{ width: 120, height: 40 }" :controlsSize="{ width: 120, height: 40 }"
> >
<template #default="scope"> <template #default="scope">
123 <u-section
<!-- <u-image width="80" height="80" :src="scope.row.url"></u-image> --> v-if="lineList[scope.index].name !== undefined"
:title="scope.row.name"
:right="false"
:show-line="scope.row.show"
:line-color="scope.row.show ? '#0000f0' : ''"
style="margin-left: 20rpx;"
></u-section>
<view v-else class="add">
<u-icon name="plus" color="#c6c6c6" size="50" @tap="addTabs"></u-icon>
</view>
</template> </template>
</drag-and-drop-sort> </drag-and-drop-sort>
</view> </view>
<!-- :containerSize="{ width: '80px', height: '100%' }" --> <view class="left-cates" />
<view class="right-cates"> <view class="right-cates">
<view style="width: 80px;"> <view style="width: 80px;">
<!-- <drag-and-drop-sort <block v-for="(item, index) in lineList">
style="display: flex; justify-content: center;" <u-image
:controlsList="imgList" v-if="index != lineList.length - 1"
:controlsSize="{ width: 80, height: 80 }" width="160rpx"
> mode="widthFix"
<template #default="scope"> :src="item.url.split('http').length > 1 ? item.url : baseUrl + item.url"
<u-image width="80" height="80" :src="scope.row.url"></u-image> ></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> -->
<block v-for="item in 15">
<view class="">
<image
style="width: 80px; height: 80px;"
src="../../static/logo.png"
mode=""
></image>
</view>
</block> </block>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<category-popup
ref="categoryRef"
:show="showPopup"
@close="handleClose"
@categoryData="initCategory"
/>
<goodsSku ref="goodsSkuRef" @selected="selected" @add-product="addProduct"></goodsSku>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { getCatalogIndex } from '@/api/category';
import config from '@/utils/config'; import config from '@/utils/config';
import dragAndDropSort from './drag-and-drop-sort.vue'; import dragAndDropSort from './drag-and-drop-sort.vue';
import { imgList } from './data'; import categoryPopup from './components/categoryPopup.vue';
import goodsSku from '@/pages/goods/goodsSku';
import { indexDetails } from '@/api/index';
let baseUrl = config.baseUrl; let baseUrl = config.baseUrl;
const scrollTop = ref(0); //tab标题的滚动条位置 let lineList = ref([{}] as any); //右侧tabber数据
const current = ref(0); // 预设当前项的值 let showPopup = ref(false as Boolean);
const menuHeight = ref(0); // 左边菜单的高度 let categoryRef = ref();
const menuItemHeight = ref(0); // 左边菜单item的高度 let goodsSkuRef = ref();
const categoryList = ref([] as any); //右侧tabber数据 let detailData = ref();
const listQuery = ref({
categoryId: 0, let addTabs = () => {
page: 1, showPopup.value = true;
limit: 10, categoryRef.value.initIndex();
}); };
const search = (val: any) => { // 添加产品线产品
uni.navigateTo({ url: '../index/search?keyword=' + val.value }); let initCategory = (data: any) => {
initDetails(data.id);
uni.showLoading({
title: '加载中...',
});
setTimeout(() => {
goodsSkuRef.value.init(detailData.value, data.id);
goodsSkuRef.value.skuKey = true;
goodsSkuRef.value.skuMode = 5;
uni.hideLoading();
}, 500);
}; };
// 点击左边的栏目切换 // 监听选择规格，及数量
const swichMenu = async (index: any, id: number) => { const selected = (data: any) => {
if (index == current) return; // console.log(data);
current.value = index; // selectedGoodsItem.value = data[0];
listQuery.value.categoryId = id; // selectedGoodsSum.value = data[1];
// 如果为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) => { let addProduct = (data: any) => {
new Promise((resolve: any, reject: any) => { console.log(data, '加入产品线');
const query = uni.createSelectorQuery().in(this); let index = lineList.value.length - 1;
query lineList.value.splice(index, 0, {
.select('.' + elClass) name: data.goods_name,
.fields({ size: true }, (res: any) => { url: data.image,
// 如果节点尚未生成，res值为null，循环调用执行 show: false,
if (!res) {
setTimeout(() => {
getElRect(elClass);
}, 10);
return;
}
dataVal = res.height;
})
.exec();
}); });
goodsSkuRef.value.skuKey = false;
}; };
const initIndex = () => { // 退出popup
getCatalogIndex().then((res: any) => { let handleClose = (val: Boolean) => (showPopup.value = val);
// 根据id获取商品信息
const initDetails = (id: number) => {
indexDetails({
id,
}).then((res: any) => {
if (res.data.code === 200) { if (res.data.code === 200) {
categoryList.value = res.data.data.categoryList; detailData.value = res.data.data;
console.log(categoryList.value, '分类数据'); console.log(res.data.data, '商品详情数据');
} }
}); });
}; };
initIndex();
// 点击滑动到底部
// setTimeout(() => {
// uni.pageScrollTo({scrollTop: 99999, duration: 0});
// }, 500);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
* { * {
-webkit-touch-callout: none; /*系统默认菜单被禁用*/ -webkit-touch-callout: none; /*系统默认菜单被禁用*/
-webkit-user-select: none; /*webkit浏览器*/ -webkit-user-select: none; /*webkit浏览器*/
-khtml-user-select: none; /*早期浏览器*/ -khtml-user-select: none; /*早期浏览器*/
-moz-user-select: none; /*火狐*/ -moz-user-select: none; /*火狐*/
-ms-user-select: none; /*IE10*/ -ms-user-select: none; /*IE10*/
user-select: none; user-select: none;
} }
.add {
position: absolute;
width: 120px;
height: 40px;
background-color: #fff;
z-index: 0;
text-align: center;
line-height: 45px;
margin-top: 20rpx;
}
.left-cates {
width: 124px;
}
.right-cates { .right-cates {
width: 100%; flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
// align-items: center; // align-items: center;
background-color: #fff;
min-height: 100vh;
max-height: 200vh;
} }
.u-wrap { .u-wrap {
...@@ -192,112 +159,10 @@ initIndex(); ...@@ -192,112 +159,10 @@ initIndex();
flex-direction: column; flex-direction: column;
} }
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap { .u-menu-wrap {
flex: 1; flex: 1;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} justify-content: space-between;
.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> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论