select_product
parent
61fddda672
commit
f4d8058fce
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="rounded-xs box-show" @tap.stop="$u.route('/pages/product_details/index', { skuId: goods.id,showShrough:showShrough })">
|
||||
<view class="rounded-xs box-show" @tap.stop="handleDetail(goods)">
|
||||
<!-- <u-image width="100%" height="345rpx" :src="goods.cover" :lazy-load="true"></u-image> -->
|
||||
<cu-image :borderTopLeftRadius="24" :borderTopRightRadius="24" width="100%" height="345rpx" :src="`${goods.cover}?x-oss-process=image/resize,h_375,m_lfit`" :lazy-load="true"></cu-image>
|
||||
<view class="px-base">
|
||||
|
|
@ -50,6 +50,10 @@ export default {
|
|||
cart:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
detail: {
|
||||
type: Boolean | String,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -58,6 +62,18 @@ export default {
|
|||
methods: {
|
||||
onCart(){
|
||||
this.$emit('cartClick',this.goods)
|
||||
},
|
||||
handleDetail(goods) {
|
||||
if (this.detail === false) {
|
||||
this.onCart()
|
||||
return;
|
||||
}
|
||||
let url = '/pages/product_details/index'
|
||||
let params = { skuId: goods.id, showShrough: this.showShrough }
|
||||
if (this.detail !== true) {
|
||||
url = this.detail
|
||||
}
|
||||
this.$u.route(url, params)
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,41 +21,54 @@
|
|||
</scroll-view>
|
||||
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
|
||||
<view class="page-view">
|
||||
<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
|
||||
<view class="item-title">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="item-container">
|
||||
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @tap="$u.route('/pageB/select_product/search?category=20')">
|
||||
<image class="item-menu-image" :src="item1.icon" mode=""></image>
|
||||
<view class="item-menu-name">{{ item1.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in tabbar" :key="index">
|
||||
<view class="classSel" :id="'item' + index">
|
||||
<view class="class-item" v-for="(item1, index1) in item.children" :key="index1">
|
||||
<view class="item-title">
|
||||
<text>{{ item1.name }}</text>
|
||||
</view>
|
||||
<!-- 广告位 -->
|
||||
<view class="my-20rpx shdow2 h-200rpx" v-if="item1.icon">
|
||||
<image class="w-full h-full rounded-15rpx " :src="item1.icon" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item-container">
|
||||
<view @click="navigateToList(item2.id)" class="thumb-box" v-for="(item2, index2) in item1.children" :key="index2">
|
||||
<image v-if="item2.icon" class="item-menu-image" :src="item2.icon" mode=""></image>
|
||||
<view class="item-menu-name">{{ item2.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import classifyData from './classify.data.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mid: '',
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
oldScrollTop: 0,
|
||||
current: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
itemId: '', // 栏目右边scroll-view用于滚动的id
|
||||
tabbar: classifyData,
|
||||
tabbar: [],
|
||||
menuItemPos: [],
|
||||
arr: [],
|
||||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||||
timer: null, // 定时器
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
onLoad(e) {
|
||||
this.mid = e.mid
|
||||
this.$api.get('/v1/product/categories').then(res => {
|
||||
this.tabbar = res
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.getMenuItemTop();
|
||||
},
|
||||
|
|
@ -176,6 +189,9 @@ export default {
|
|||
}
|
||||
}, 10);
|
||||
},
|
||||
navigateToList(cid) {
|
||||
this.$u.route('/pageB/select_product/search', { mid: this.mid, cid: cid })
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@
|
|||
<u-waterfall v-model="dataList" ref="uWaterfall">
|
||||
<template v-slot:left="{ leftList }">
|
||||
<view v-for="(item, index) in leftList" :key="index" class="px-rowSm mb-base">
|
||||
<goods-item :goods="item" cart @cartClick="cartClick"></goods-item>
|
||||
<goods-item :goods="item" :detail="false" cart @cartClick="cartClick"></goods-item>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{ rightList }">
|
||||
<view v-for="(item, index) in rightList" :key="index" class="px-rowSm mb-base">
|
||||
<goods-item :goods="item" cart @cartClick="cartClick"></goods-item>
|
||||
<goods-item :goods="item" :detail="false" cart @cartClick="cartClick"></goods-item>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
:key="productId"
|
||||
:loading="loading"
|
||||
:specs="specs"
|
||||
:sku="detail"
|
||||
:sku="sku"
|
||||
v-model="show"
|
||||
:quota-used="number"
|
||||
:show-cart="popupType == 1 || popupType == 0"
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
:show-confirm="popupType == 3"
|
||||
@add-cart="onAddCart"
|
||||
@stepper-change="onChangeNumber"
|
||||
@sku-selected="handleSkuSelect"
|
||||
>
|
||||
</spec-popup>
|
||||
|
||||
|
|
@ -84,10 +85,12 @@ export default {
|
|||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
mid: '',// 店铺 id
|
||||
category: '',// 分类 id
|
||||
searchText: '',// 搜索关键字
|
||||
sku: {},// 当前选择的sku
|
||||
key: 0,
|
||||
sort: '', //price 价格，sales 销量，release_at 上架时间。示例：price 按价格升序，-price 按价格降序
|
||||
searchText: '',
|
||||
category: '',
|
||||
loading: false,
|
||||
popupType: 1,
|
||||
number: 1,
|
||||
|
|
@ -111,17 +114,15 @@ export default {
|
|||
specs() {
|
||||
return this.products?.spu_specs ?? [];
|
||||
},
|
||||
detail() {
|
||||
return this.products?.sku ?? {};
|
||||
},
|
||||
height() {
|
||||
const { windowHeight, statusBarHeight } = this.$u.sys();
|
||||
return windowHeight - statusBarHeight - 44 + 'px';
|
||||
},
|
||||
},
|
||||
onLoad({ searchText, category }) {
|
||||
this.searchText = searchText;
|
||||
this.category = category;
|
||||
onLoad(e) {
|
||||
this.searchText = e.keywords;
|
||||
this.category = e.cid;
|
||||
this.mid = e.mid;
|
||||
},
|
||||
methods: {
|
||||
Change(e) {
|
||||
|
|
@ -154,6 +155,7 @@ export default {
|
|||
const resData = await this.$api.get(`/v1/product/products/${this.productId}`);
|
||||
this.products = resData;
|
||||
this.skuId = this.products?.sku.id;
|
||||
this.sku = this.products?.sku
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
|
|
@ -169,17 +171,15 @@ export default {
|
|||
this.loadData(page);
|
||||
},
|
||||
loadData(page) {
|
||||
let obj = {
|
||||
let params = {
|
||||
page: page.num,
|
||||
per_page: page.size,
|
||||
category: this.category,
|
||||
keyword: this.searchText,
|
||||
sort: this.sort,
|
||||
};
|
||||
this.$api
|
||||
.get(`/v1/product/products`, {
|
||||
params: obj,
|
||||
})
|
||||
let url = this.mid ? `/v1/store/${this.mid}/product-spus` : `/v1/product/products`
|
||||
this.$api.get(url, { params })
|
||||
.then((res) => {
|
||||
this.mescroll.endSuccess(res.data.length);
|
||||
if (page.num == 1) this.dataList = [];
|
||||
|
|
@ -215,6 +215,12 @@ export default {
|
|||
this.key++;
|
||||
});
|
||||
},
|
||||
// 选择sku, 更新价格
|
||||
handleSkuSelect(e) {
|
||||
this.$api.get(`/v1/store/${this.mid}/product-sku/${e.sku_id}`).then(res => {
|
||||
this.sku = res
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
线上预约店
|
||||
</view>
|
||||
<view class="my-20rpx px-20rpx">
|
||||
<image @click="$u.route('/pageB/select_product/index', { id: 0 })" mode="widtFix" class="w-full h-250rpx rounded-15rpx" src="/static/images/user/u=2313295534,3451005153&fm=253&fmt=auto&app=138&f=JPEG.webp"></image>
|
||||
<image mode="widtFix" class="w-full h-250rpx rounded-15rpx" src="/static/images/user/u=2313295534,3451005153&fm=253&fmt=auto&app=138&f=JPEG.webp"></image>
|
||||
</view>
|
||||
<view class="my-20rpx px-20rpx">
|
||||
<u-line></u-line>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
||||
<view class="grid grid-cols-2 gap-x-80rpx pt-20rpx px-80rpx">
|
||||
<view
|
||||
@click="$u.route('/pageB/select_product/index', { id: item.id })"
|
||||
@click="$u.route('/pageB/select_product/index', { mid: item.id })"
|
||||
class="flex items-center justify-center flex-col mt-40rpx text-30rpx font-extrabold"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
|
|
|
|||
Loading…
Reference in New Issue