feat : 对接商城首页接口

This commit is contained in:
赵毅 2025-07-17 18:25:20 +08:00
parent 1d6831a76e
commit fdd5bbfb3b
2 changed files with 463 additions and 331 deletions

View File

@ -6,5 +6,5 @@ export const apiArr = {
getCarCount:"/api/v2/wechat/commodity/cart/all_count",//购物车数量
addCar:"/api/v2/wechat/commodity/cart/add",//添加购物车
deleteCar:"/api/v2/wechat/commodity/cart/delete",//删除购物车
updateCar:"/api/v2/wechat/commodity/cart/update",
updateCar:"/api/v2/wechat/commodity/cart/update",//更新购物车
}

View File

@ -3,22 +3,34 @@
<!-- 顶部展开后的阴影 -->
<div class="boxshadow" v-if="topShow"></div>
<div class="header" :class="topShow ? 'op0' : ''">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<div class="searchBox_left">
<!-- <u-icon name="arrow-left" size="20px" color="#000"></u-icon> -->
</div>
<div class="searchBox_ipt" @click="searchPage">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"></image>
<input disabled type="text" placeholder="输入商品名称">
mode="aspectFill"
></image>
<input disabled type="text" placeholder="输入商品名称" />
</div>
</div>
<div class="slide">
<div class="slide_con">
<div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
<div
v-for="(item, index) in CateList"
:key="index"
class="slide_conBox"
@click="changeCate(item.id)"
>
<view class="slide_item">
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<image
:src="picUrl + item.category_pic"
mode="aspectFill"
></image>
<text>{{ item.category_name }}</text>
</view>
</div>
@ -26,32 +38,44 @@
<div class="open" @click="topOpen" v-if="!topShow">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
mode="aspectFill"></image>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
mode="aspectFill"
></image>
</div>
</div>
</div>
<!-- 整体展开的顶部 -->
<div class="header header2" v-if="topShow">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<div class="searchBox_left">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div>
<div class="searchBox_ipt">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"></image>
<input type="text" placeholder="输入商品名称">
mode="aspectFill"
></image>
<input type="text" placeholder="输入商品名称" />
</div>
</div>
<div class="slide">
<div class="slide_con">
<div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
<div
v-for="(item, index) in CateList"
:key="index"
class="slide_conBox"
>
<view class="slide_item">
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<image
:src="picUrl + item.category_pic"
mode="aspectFill"
></image>
<text>{{ item.category_name }}</text>
</view>
</div>
@ -63,10 +87,14 @@
</div>
</div>
<div class="Con">
<div class="Con_left">
<div class="CateItem" v-for="item in leftCateList" :key="item.id" @click="changeLeftCate(item.id)">
<div
class="CateItem"
v-for="item in leftCateList"
:key="item.id"
@click="changeLeftCate(item.id)"
>
<!-- <image v-if="false" class="hot"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
mode="aspectFill">
@ -80,10 +108,15 @@
<div class="Con_right">
<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
<div class="CateList" ref="cateListRef">
<div class="CateList_Item" v-for="(item, index) in tagList" :key="item.id"
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
<div
class="CateList_Item"
v-for="(item, index) in tagList"
:key="item.id"
:class="index == rightTopActive ? 'CateList_Item_active' : ''"
@click="checkItem(index)"
>
{{ item.tag_name }}
</div>
</div>
<div class="more" @click="changeCateListShow">
<u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
@ -92,8 +125,14 @@
</div>
<!-- 右下展开的内容 -->
<div class="activeCateList" v-if="cateListShow">
<div class="CateList_Item" v-for="(item, index) in tagList" :key="index"
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
<div
class="CateList_Item"
v-for="(item, index) in tagList"
:key="index"
:class="index == rightTopActive ? 'CateList_Item_active' : ''"
@click="checkItem(index)"
>
{{ item.tag_name }}
</div>
</div>
<!-- 右下阴影 -->
@ -103,27 +142,51 @@
<div class="CateInfo_tit">
{{ item.tag_name }}
</div>
<div class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
<div
class="CateInfo_Item"
v-for="items in item.commodity_info_list"
:key="items.id"
>
<div class="CateInfo_Item_Box">
<div class="CateInfo_Item_left" @click="goods(items.id)">
<image
:src="picUrl + items.commodity_pic"
mode="aspectFill"></image>
mode="aspectFill"
></image>
</div>
<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
<div class="CateInfo_Item_right_Tit" @click="goods(items.id)">{{items.commodity_name}}</div>
<div class="CateInfo_Item_right_subtit" @click="goods(items.id)">{{items.commodity_intro}}</div>
<div class="CateInfo_Item_right_Tit" @click="goods(items.id)">
{{ items.commodity_name }}
</div>
<div
class="CateInfo_Item_right_subtit"
@click="goods(items.id)"
>
{{ items.commodity_intro }}
</div>
<div class="CateInfo_Item_Money">
<div class="CateInfo_Item_Money_left">
<span></span>{{ items.commodity_goods_info_list[0].sales_price }}
<span></span
>{{ items.commodity_goods_info_list[0].sales_price }}
</div>
<div class="CateInfo_Item_Money_right">
<u-number-box v-model="value">
<div
class="CateInfo_Item_Money_right"
v-if="!(items.commodity_goods_info_list.length > 1)"
>
<u-number-box
:min="0"
v-model="items.quantity"
@change="handleQuantityChange(items)"
>
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px;text-align: center;" class="input">{{
value }}</text>
<text
slot="input"
style="width: 50px; text-align: center"
class="input"
>{{ items.quantity ? items.quantity : 0 }}</text
>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view>
@ -131,40 +194,73 @@
</div>
</div>
<div class="gg" @click="chooseGG(items)" v-if="items.commodity_goods_info_list.length > 1 && !items.isShow">
选择规格 <u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
<div
class="gg"
@click="chooseGG(items)"
v-if="
items.commodity_goods_info_list.length > 1 && !items.isShow
"
>
选择规格
<u-icon
name="arrow-down"
size="26rpx"
color="#FF370B"
></u-icon>
</div>
<div class="gg" @click="chooseGG(items)" v-if="items.commodity_goods_info_list.length > 1 && items.isShow">
收起 <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
<div
class="gg"
@click="chooseGG(items)"
v-if="
items.commodity_goods_info_list.length > 1 && items.isShow
"
>
收起
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
</div>
</div>
</div>
<div class="GGList" v-if="items.isShow">
<div class="GGItem" v-for="ite in items.commodity_goods_info_list" @click="goods(items.id)">
<div
class="GGItem"
v-for="ite in items.commodity_goods_info_list"
@click="goods(items.id)"
>
<div class="GGItem_Image">
<image
:src="picUrl + ite.commodity_pic"
mode="aspectFill"></image>
mode="aspectFill"
></image>
</div>
<div class="GGItem_Con">
<div class="GGItem_Con_Tit">{{ite.goods_name}}</div>
<div class="GGItem_Con_Tit">{{ ite.goods_name }}</div>
<div class="GGItem_Con_Msg">
<div class="GGItem_Con_Msg_left">
<span></span>{{ ite.sales_price }}
</div>
<div class="GGItem_Con_Msg_right">
<u-number-box v-model="value">
<u-number-box
v-model="ite.quantity"
:min="0"
@change="handleQuantityChange(ite)"
>
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px;text-align: center;"
class="input">{{
value }}</text>
<text
slot="input"
style="width: 50px; text-align: center"
class="input"
>{{ ite.quantity ? ite.quantity : 0 }}</text
>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
<u-icon
name="plus"
color="#FFFFFF"
size="20"
></u-icon>
</view>
</u-number-box>
</div>
@ -174,7 +270,6 @@
</div>
</div>
<!-- 按钮 -->
<!-- <div class="btn">
查看全部商品
@ -183,36 +278,31 @@
</div>
</div> -->
</div>
</div>
</div>
<nav-footer :current="2" />
<div class="shop_car" @click="shopCar">
<u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
<u-badge
numberType="limit"
type="error"
max="99"
:value="carNum"
></u-badge>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
></image>
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
</div>
</div>
</template>
<script>
import {
apiArr
} from '../../../api/shop';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
import { apiArr } from "../../../api/shop";
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
export default {
data() {
return {
picUrl,
flag: false,
@ -222,47 +312,46 @@ export default {
value: "1",
cateListShow: false,
iconList: [
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
name: "休闲零食"
name: "休闲零食",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
name: "肉蛋果蔬"
name: "肉蛋果蔬",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
name: "酒水饮料"
name: "酒水饮料",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
name: "家具电器"
name: "家具电器",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
name: "电脑手机"
name: "电脑手机",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
name: "休闲零食"
name: "休闲零食",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
name: "肉蛋果蔬"
name: "肉蛋果蔬",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
name: "酒水饮料"
name: "酒水饮料",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
name: "家具电器"
name: "家具电器",
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
name: "电脑手机"
name: "电脑手机",
},
],
@ -270,99 +359,142 @@ export default {
topShow: false,
GGshow: false,
CateList:[],//
currentFirstId:"",
leftCateList:[], //
currentSecondId:"",
rightCateList:[], //
currentThirdId:"",
CateList: [], //
currentFirstId: "",
leftCateList: [], //
currentSecondId: "",
rightCateList: [], //
currentThirdId: "",
tagList:[],
carNum:"",
}
tagList: [],
carNum: "",
};
},
methods: {
changeCate(id) {
// id
const category = this.CateList.find((item) => item.id === id);
if (category) {
// leftCateListnull
this.leftCateList = category.level_two_category || [];
this.secondId = this.leftCateList[0]?.id;
this.getGoodsList();
}
},
//
changeCateListShow() {
this.cateListShow = !this.cateListShow
this.cateListShow = !this.cateListShow;
},
//
checkItem(index) {
this.rightTopActive = index
this.rightTopActive = index;
},
//
topOpen() {
this.topShow = !this.topShow
this.topShow = !this.topShow;
},
//
chooseGG(e) {
e.isShow = !e.isShow
e.isShow = !e.isShow;
},
//
searchPage() {
NavgateTo('../search/index')
NavgateTo("../search/index");
},
//
goods(e) {
NavgateTo(`../goods/index?id=${e}`)
NavgateTo(`../goods/index?id=${e}`);
},
//
shopCar(){
NavgateTo("../shopCar/index")
shopCar() {
NavgateTo("../shopCar/index");
},
//
getCateList(){
request(apiArr.goodsCateList,"POST",{}).then(res=>{
getCateList() {
request(apiArr.goodsCateList, "POST", {}).then((res) => {
console.log(res);
this.CateList = res.commodity_category_list
this.firstId = res.commodity_category_list[0].id
this.leftCateList = res.commodity_category_list[0].level_two_category
this.secondId = res.commodity_category_list[0].level_two_category[0].id
this.getGoodsList()
})
},
getGoodsList(){
request(apiArr.getGoodsList,'POST',{
user_id:"",
id:this.secondId
}).then(res=>{
res.commodity_list.forEach(item => {
item.commodity_info_list.forEach(item=>{
item.isShow = false
})
this.CateList = res.commodity_category_list;
this.firstId = res.commodity_category_list[0].id;
this.leftCateList = res.commodity_category_list[0].level_two_category;
this.secondId = res.commodity_category_list[0].level_two_category[0].id;
this.getGoodsList();
});
this.tagList = res.commodity_list
})
},
getShopCarList(){
request(apiArr.getCar,"POST",).then(res=>{
getGoodsList() {
if (!this.secondId) {
this.tagList = [];
return;
}
request(apiArr.getGoodsList, "POST", {
user_id: uni.getStorageSync("userId"),
id: this.secondId,
}).then((res) => {
res.commodity_list.forEach((item) => {
item.commodity_info_list.forEach((item) => {
item.isShow = false;
});
});
this.tagList = res.commodity_list;
});
},
getShopCarList() {
request(apiArr.getCar, "POST").then((res) => {
console.log(res);
this.carNum = res.total
})
this.carNum = res.total;
});
},
changeLeftCate(e){
this.secondId = e
this.getGoodsList()
changeLeftCate(e) {
this.secondId = e;
this.getGoodsList();
},
//
handleQuantityChange(item) {
console.log("🚀 ~ handleQuantityChange ~ value:", item);
const goodsId = "";
if (item.commodity_goods_info_list.length) {
this.goodsId = item.commodity_goods_info_list[0].id;
} else {
this.goodsId = item.id;
}
const params = {
user_id: uni.getStorageSync("userId"),
goods_id_and_count: [
{
goods_id: this.goodsId,
count: item.quantity ? item.quantity + 1 : 1,
},
],
};
console.log("🚀 ~ handleQuantityChange ~ params:", params);
request(apiArr.updateCar, "POST", params).then((res) => {
console.log(res);
uni.showToast({
title: "操作成功!",
success() {
// setTimeout(() => {
// that.getBanlance()
// }, 1500)
},
});
});
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.getCateList()
this.getShopCarList()
this.getCateList();
this.getShopCarList();
},
onReachBottom() {
if (this.flag) {
}
},
}
};
</script>
<style>