maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 合并代码

Browse Source
This commit is contained in:
赵毅 2025-07-17 14:52:32 +08:00
commit 28bcacc096
6 changed files with 308 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
api/shop.js Normal file
View File

@ -0,0 +1,9 @@
export const apiArr = {
goodsCateList: "/api/v2/wechat/commodity/cate",//商品分类列表
getGoodsList:"/api/v2/wechat/commodity", //商品分类
getGoodsInfo:"/api/v2/wechat/commodity/info", //商品详情
getCar:"/api/v2/wechat/commodity/cart",//购物车
getCarCount:"/api/v2/wechat/commodity/cart/all_count",//购物车数量
addCar:"/api/v2/wechat/commodity/cart/add",//添加购物车
deleteCar:"/api/v2/wechat/commodity/cart/delete",//删除购物车
}

5
packages/shop/goods/index.css
View File

@ -363,4 +363,9 @@ image {
.shadowboxInfo_right_2 { .shadowboxInfo_right_2 {
font-size: 26rpx; font-size: 26rpx;
color: #999999; color: #999999;
}
.active{
background: #FF370B;
color: #fff;
} }

173
packages/shop/goods/index.vue
View File

@ -8,83 +8,90 @@
</div> </div>
</div> </div>
<div class="swiper"> <div class="swiper">
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"> <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="changeIndex">
<swiper-item> <swiper-item v-for="(item, index) in currentGG.goods_carousel" :key="index">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_goodsImg.png"></image> <image :src="picUrl + item"></image>
</swiper-item>
<swiper-item>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_goodsImg.png"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
<div class="NumDot"> <div class="NumDot">
1/5 {{ currentIndex }} /{{ currentGG.goods_carousel.length }}
</div> </div>
</div> </div>
<div class="Money"> <div class="Money">
<div class="MoneyMark">￥</div>25.9 <div class="MoneyUnit">/箱</div> <div class="MoneyMark">￥</div>{{ currentGG.sales_price }} <div class="MoneyUnit">/{{ currentGG.goods_unit }}
</div>
<div class="oldMoney">￥45.00</div> <div class="oldMoney">￥{{ currentGG.market_price }}</div>
</div> </div>
<!-- 规格 --> <!-- 规格 -->
<div class="GGBox"> <div class="GGBox">
<div class="GG_left"> <div class="GG_left">
<div class="GG_Item" v-for="item in 9">3KG/箱</div> <div class="GG_Item" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'active' : ''">
{{ item.goods_spec }} / {{ item.goods_unit }}
</div>
</div> </div>
<div class="GG_rigth">共8款<u-icon size="26rpx" name="arrow-right"></u-icon></div> <div class="GG_rigth">共{{ info.commodity_goods_info_list.length }}款<u-icon size="26rpx"
name="arrow-right"></u-icon></div>
</div> </div>
<div class="Tit">新疆库尔勒香梨全母梨子新鲜孕妇水果整箱小10斤精选旗舰店包邮直发</div> <div class="Tit">{{ currentGG.goods_name }}</div>
<div class="Msg">新疆库尔勒香梨全母梨子新鲜孕妇水果整箱小10斤精选旗舰店包邮直发</div> <div class="Msg">{{ currentGG.commodity_brief }}</div>
<div class="GoodsMsg"> <div class="GoodsMsg">
商品详情 商品详情
</div> </div>
<div class="Msg_Item"> <div class="Msg_Item">
<div class="Msg_ItemTit">商品编号</div> <div class="Msg_ItemTit">商品编号</div>
<div class="Msg_ItemCon">008475709 <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"></image> <div class="Msg_ItemCon" @click="copys(currentGG.goods_no)">{{ currentGG.goods_no }} <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"></image>
</div> </div>
</div> </div>
<div class="Msg_Item"> <div class="Msg_Item">
<div class="Msg_ItemTit">规格说明</div> <div class="Msg_ItemTit">规格说明</div>
<div class="Msg_ItemCon">23*10*10箱</div> <div class="Msg_ItemCon">{{ currentGG.goods_spec }}</div>
</div> </div>
<div class="Msg_Item"> <div class="Msg_Item">
<div class="Msg_ItemTit">商品编号</div> <div class="Msg_ItemTit">售卖单位</div>
<div class="Msg_ItemCon">箱</div> <div class="Msg_ItemCon">{{ currentGG.goods_unit }}</div>
</div> </div>
<div class="GoosMsg"> <div class="GoosMsg">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/Goods_MsgImg.png" mode="widthFix"></image> <image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" mode="widthFix"></image>
</div> </div>
<!-- 底部购物车 --> <!-- 底部购物车 -->
<div class="Car"> <div class="Car">
<div class="car_left"> <div class="car_left">
<div class="share" @click="share"> <div class="share" @click="share">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
mode="widthFix"></image>
分享 分享
</div> </div>
<div class="cars"> <div class="cars" @click="car">
<u-badge numberType="limit" :type="type" max="99" :value="value"></u-badge> <u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
mode="widthFix"></image>
购物车 购物车
</div> </div>
</div> </div>
<div class="car_right" v-if="false"> <div class="car_right" v-if="!info[currentGGIndex].cart_count || info[currentGGIndex].cart_count.count == 0"
@click="addCar">
加入购物车 加入购物车
</div> </div>
<div class="car_right"> <div class="car_right" v-if="info[currentGGIndex].cart_count.count > 0">
<u-number-box v-model="value"> <u-number-box v-model="info[currentGGIndex].cart_count.count" @change="changeCar">
<view slot="minus" class="minus"> <view slot="minus" class="minus">
<u-icon name="minus" size="36" bold></u-icon> <u-icon name="minus" size="36" bold></u-icon>
</view> </view>
<text slot="input" style="width: 200rpx;text-align: center;" class="input">{{ value }}</text> <text slot="input" style="width: 200rpx;text-align: center;" class="input">{{
info[currentGGIndex].cart_count.count }}</text>
<view slot="plus" class="plus"> <view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon> <u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
</view> </view>
@ -96,11 +103,13 @@
<div class="shadow" @click.stop="changeShadow" v-if="boxshadow1"> <div class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
<div class="shadowBox1"> <div class="shadowBox1">
<div class="shadowBox1Item" @click="shareFriend"> <div class="shadowBox1Item" @click="shareFriend">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
mode="aspectFill"></image>
微信好友 微信好友
</div> </div>
<div class="shadowBox1Item" @click="openSave"> <div class="shadowBox1Item" @click="openSave">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
mode="aspectFill"></image>
生成海报 生成海报
</div> </div>
</div> </div>
@ -111,7 +120,9 @@
<div class="shadowBox_img"> <div class="shadowBox_img">
<div class="boxshadow_tit">今日商品推荐</div> <div class="boxshadow_tit">今日商品推荐</div>
<div class="boxshadow_img"> <div class="boxshadow_img">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
</image>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="shadowBoxInfo"> <div class="shadowBoxInfo">
@ -132,9 +143,10 @@
</template> </template>
<script> <script>
import { info } from 'sass';
import { import {
apiArr apiArr
} from '../../../api/doorToDoor'; } from '../../../api/shop';
import { import {
picUrl, picUrl,
menuButtonInfo, menuButtonInfo,
@ -144,15 +156,29 @@ import {
export default { export default {
data() { data() {
return { return {
picUrl,
top: "", top: "",
localHeight: "", localHeight: "",
value: 3, carNum: '',
prevCarNum: "",
currentNum: "0",//当前商品的数量
type: "error", type: "error",
boxshadow1: false, boxshadow1: false,
boxshadow2: false boxshadow2: false,
id: "",
info: "",
currentIndex: "1",//当前轮播图
currentGG: "", //当前选中规格
currentGGIndex: "", //当前规格index
} }
}, },
methods: { methods: {
changeIndex(e) {
this.currentIndex = e.detail.current + 1
},
back() { back() {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
@ -187,7 +213,7 @@ export default {
changeShadow() { changeShadow() {
this.boxshadow1 = false this.boxshadow1 = false
}, },
openSave(){ openSave() {
this.boxshadow1 = false this.boxshadow1 = false
this.boxshadow2 = true this.boxshadow2 = true
}, },
@ -224,18 +250,97 @@ export default {
}, },
// 点分享按钮 // 点分享按钮
share(){ share() {
this.boxshadow1 = true this.boxshadow1 = true
}, },
//商品详情
getGoodsInfo() {
request(apiArr.getGoodsInfo, "POST", {
id: this.id
}).then(res => {
console.log(res);
this.info = res
res.commodity_goods_info_list.forEach(item => {
item.goods_detail_pic = item.goods_detail_pic.split(',')
item.goods_carousel = item.goods_carousel.split(',')
item.commodity_pic = item.commodity_pic.split(',')
});
this.currentGG = res.commodity_goods_info_list[0]
})
},
copys(e) {
uni.setClipboardData({
data: e,
success: (res) => {
uni.showToast({
title: '复制成功',
icon: 'success',
duration: 2000
});
}
});
},
changeGG(item, index) {
this.currentGG = item
this.currentGGIndex = index
this.currentGG.cart_count = { count: 0 }
},
car() {
NavgateTo('../shopCar/index')
},
//获取购物车数量
getShopCar() {
request(apiArr.getCarCount, 'POST', {}).then(res => {
this.carNum = res.total
this.prevCarNum = res.total
})
},
addCar() {
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count.count = 1
},
changeCar(newValue) {
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count.count = newValue.value
},
}, },
onLoad(options) { onLoad(options) {
const meun = menuButtonInfo(); const meun = menuButtonInfo();
this.top = meun.top; this.top = meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.id = options.id
this.getGoodsInfo()
this.getShopCar()
}, },
onReachBottom() { onReachBottom() {
}, },
onHide() {
},
// watch() {
// return {
// 'info.commodity_goods_info_list': {
// handler(newList) {
// // 计算购物车总数
// this.carNum = newList.reduce((total, item) => {
// if (item.cart_count && item.cart_count.count) {
// return total + item.cart_count.count;
// }
// return total;
// }, 0);
// },
// deep: true,
// immediate: true
// }
// }
// }
} }
</script> </script>

11
packages/shop/index/index.css
View File

@ -87,7 +87,12 @@ page {
margin-right: 40rpx; margin-right: 40rpx;
} }
.slide_item {} .slide_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slide_item image { .slide_item image {
width: 100rpx; width: 100rpx;
@ -299,10 +304,10 @@ page {
.CateList_Item { .CateList_Item {
min-width: 110rpx; min-width: 110rpx;
width: 100rpx;
height: 40rpx; height: 40rpx;
background: #F6F7FB; background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx; border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 5rpx 30rpx;
font-size: 26rpx; font-size: 26rpx;
color: #222222; color: #222222;
display: flex; display: flex;
@ -401,6 +406,7 @@ page {
padding-right: 0; padding-right: 0;
position: absolute; position: absolute;
z-index: 9; z-index: 9;
width: 100%;
} }
.activeCateList .CateList_Item { .activeCateList .CateList_Item {
@ -469,6 +475,7 @@ page {
.GGItem { .GGItem {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10rpx;
} }
.GGItem_Image { .GGItem_Image {

125
packages/shop/index/index.vue
View File

@ -2,7 +2,6 @@
<div class="container"> <div class="container">
<!-- 顶部展开后的阴影 --> <!-- 顶部展开后的阴影 -->
<div class="boxshadow" v-if="topShow"></div> <div class="boxshadow" v-if="topShow"></div>
<div class="header" :class="topShow ? 'op0' : ''"> <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"> <div class="searchBox_left">
@ -15,14 +14,12 @@
<input disabled type="text" placeholder="输入商品名称"> <input disabled type="text" placeholder="输入商品名称">
</div> </div>
</div> </div>
<div class="slide"> <div class="slide">
<div class="slide_con"> <div class="slide_con">
<div v-for="(item, index) in iconList" :key="index" class="slide_conBox"> <div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
<view class="slide_item"> <view class="slide_item">
<image :src="item.icon" mode="aspectFill"></image> <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.name }}</text> <text>{{ item.category_name }}</text>
</view> </view>
</div> </div>
</div> </div>
@ -52,10 +49,10 @@
<div class="slide"> <div class="slide">
<div class="slide_con"> <div class="slide_con">
<div v-for="(item, index) in iconList" :key="index" class="slide_conBox"> <div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
<view class="slide_item"> <view class="slide_item">
<image :src="item.icon" mode="aspectFill"></image> <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.name }}</text> <text>{{ item.category_name }}</text>
</view> </view>
</div> </div>
</div> </div>
@ -69,23 +66,22 @@
<div class="Con"> <div class="Con">
<div class="Con_left"> <div class="Con_left">
<div class="CateItem" v-for="item in 10" :key="index"> <div class="CateItem" v-for="item in leftCateList" :key="item.id" @click="changeLeftCate(item.id)">
<image v-if="false" class="hot" <!-- <image v-if="false" class="hot"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
mode="aspectFill"> mode="aspectFill">
</image> </image> -->
<image class="bao" <!-- <image class="bao"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
mode="aspectFill"></image> mode="aspectFill"></image> -->
猪肉 {{ item.category_name }}
</div> </div>
</div> </div>
<div class="Con_right"> <div class="Con_right">
<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''"> <div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
<div class="CateList" ref="cateListRef"> <div class="CateList" ref="cateListRef">
<div class="CateList_Item" v-for="(item, index) in 9" :key="index" <div class="CateList_Item" v-for="(item, index) in tagList" :key="item.id"
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">梨 :class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
</div> </div>
</div> </div>
@ -96,31 +92,30 @@
</div> </div>
<!-- 右下展开的内容 --> <!-- 右下展开的内容 -->
<div class="activeCateList" v-if="cateListShow"> <div class="activeCateList" v-if="cateListShow">
<div class="CateList_Item" v-for="(item, index) in 9" :key="index" <div class="CateList_Item" v-for="(item, index) in tagList" :key="index"
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">梨 :class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
</div> </div>
</div> </div>
<!-- 右下阴影 --> <!-- 右下阴影 -->
<div class="boxshadow2" v-if="cateListShow"></div> <div class="boxshadow2" v-if="cateListShow"></div>
<div class="CateInfo" v-for="(item, index) in tagList" :key="item.id">
<div class="CateInfo" v-for="items in 2">
<div class="CateInfo_tit"> <div class="CateInfo_tit">
梨 {{ item.tag_name }}
</div> </div>
<div class="CateInfo_Item" v-for="item in 3" :key="index"> <div class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
<div class="CateInfo_Item_Box"> <div class="CateInfo_Item_Box">
<div class="CateInfo_Item_left"> <div class="CateInfo_Item_left" @click="goods(items.id)">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png" :src="picUrl + items.commodity_pic"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''"> <div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
<div class="CateInfo_Item_right_Tit" @click="goods">库尔勒香梨</div> <div class="CateInfo_Item_right_Tit" @click="goods(items.id)">{{items.commodity_name}}</div>
<div class="CateInfo_Item_right_subtit" @click="goods">商品介绍商品介绍</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">
<div class="CateInfo_Item_Money_left"> <div class="CateInfo_Item_Money_left">
<span>￥</span>10.1 <span>￥</span>{{ items.commodity_goods_info_list[0].sales_price }}
</div> </div>
<div class="CateInfo_Item_Money_right"> <div class="CateInfo_Item_Money_right">
<u-number-box v-model="value"> <u-number-box v-model="value">
@ -136,31 +131,29 @@
</div> </div>
</div> </div>
<div class="gg" @click="chooseGG" v-if="!GGshow"> <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> 选择规格 <u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
</div> </div>
<div class="gg" @click="chooseGG" v-if="GGshow"> <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> 收起 <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
</div> </div>
</div> </div>
</div> </div>
<div class="GGList" v-if="GGshow"> <div class="GGList" v-if="items.isShow">
<div class="GGItem"> <div class="GGItem" v-for="ite in items.commodity_goods_info_list" @click="goods(items.id)">
<div class="GGItem_Image"> <div class="GGItem_Image">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png" :src="picUrl + ite.commodity_pic"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
<div class="GGItem_Con"> <div class="GGItem_Con">
<div class="GGItem_Con_Tit">金枕榴莲</div> <div class="GGItem_Con_Tit">{{ite.goods_name}}</div>
<div class="GGItem_Con_Msg"> <div class="GGItem_Con_Msg">
<div class="GGItem_Con_Msg_left"> <div class="GGItem_Con_Msg_left">
<span>￥</span>25.9 <span>￥</span>{{ ite.sales_price }}
</div> </div>
<div class="GGItem_Con_Msg_right"> <div class="GGItem_Con_Msg_right">
<u-number-box v-model="value"> <u-number-box v-model="value">
@ -183,12 +176,12 @@
<!-- 按钮 --> <!-- 按钮 -->
<div class="btn"> <!-- <div class="btn">
查看全部商品 查看全部商品
<div class="cir"> <div class="cir">
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon> <u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
</div> </div>
</div> </div> -->
</div> </div>
@ -209,7 +202,7 @@
<script> <script>
import { import {
apiArr apiArr
} from '../../../api/doorToDoor'; } from '../../../api/shop';
import { import {
picUrl, picUrl,
menuButtonInfo, menuButtonInfo,
@ -221,6 +214,7 @@ export default {
data() { data() {
return { return {
picUrl,
flag: false, flag: false,
top: "", top: "",
localHeight: "", localHeight: "",
@ -275,7 +269,15 @@ export default {
rightTopActive: 0, rightTopActive: 0,
topShow: false, topShow: false,
GGshow: false GGshow: false,
CateList:[],//分类列表
currentFirstId:"",
leftCateList:[], //底部左侧分类
currentSecondId:"",
rightCateList:[], //底部右侧分类
currentThirdId:"",
tagList:[]
} }
}, },
methods: { methods: {
@ -292,28 +294,59 @@ export default {
this.topShow = !this.topShow this.topShow = !this.topShow
}, },
// 选择商品规格 // 选择商品规格
chooseGG() { chooseGG(e) {
this.GGshow = !this.GGshow e.isShow = !e.isShow
}, },
//搜索页 //搜索页
searchPage() { searchPage() {
NavgateTo('../search/index') NavgateTo('../search/index')
}, },
//商品详情页 //商品详情页
goods() { goods(e) {
NavgateTo('../goods/index') NavgateTo(`../goods/index?id=${e}`)
}, },
// 购物车 // 购物车
shopCar(){ shopCar(){
NavgateTo("../shopCar/index") NavgateTo("../shopCar/index")
}, },
//分类列表
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.tagList = res.commodity_list
})
},
changeLeftCate(e){
this.secondId = e
this.getGoodsList()
},
}, },
onLoad(options) { onLoad(options) {
const meun = menuButtonInfo(); const meun = menuButtonInfo();
this.top = meun.top; this.top = meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.getCateList()
}, },
onReachBottom() { onReachBottom() {
if (this.flag) { if (this.flag) {

86
packages/shop/shopCar/index.vue
View File

@ -5,7 +5,7 @@
<div class="searchBox_left" @click="back"> <div class="searchBox_left" @click="back">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon> <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div> </div>
<div class="searchBox_mid">购物车(0) </div> <div class="searchBox_mid">购物车({{ shopCarTotal }}) </div>
<div class="searchBox_right"> <div class="searchBox_right">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon> <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div> </div>
@ -18,32 +18,31 @@
</div> </div>
<div class="goodsList"> <div class="goodsList">
<div class="goodsItem" v-for="item, index in 3" :key="index"> <div class="goodsItem" v-for="item, index in shopCarList" :key="item.id">
<div class="goodsItem_left"> <div class="goodsItem_left" @click="changeChecked(item,index)">
<image src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image> <image v-if="!item.checked" src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
<image v-if="false" src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image> <image v-if="item.checked" src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
</div> </div>
<div class="goodsItem_right"> <div class="goodsItem_right">
<div class="goodsItem_msg"> <div class="goodsItem_msg">
<div class="goodsItem_msg_img"> <div class="goodsItem_msg_img">
<image <image :src="picUrl + item.commodity_pic">
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png">
</image> </image>
</div> </div>
<div class="goodsItem_msg_right"> <div class="goodsItem_msg_right">
<div class="goodsItem_msg_right_tit">泰国金枕榴莲</div> <div class="goodsItem_msg_right_tit">{{ item.goods_name }}</div>
<div class="goodsItem_msg_right_subTit">商品介绍商品介绍</div> <div class="goodsItem_msg_right_subTit">{{ item.goods_intro }}</div>
<div class="goodsItem_msg_right_msg"> <div class="goodsItem_msg_right_msg">
<div class="goodsItem_msg_right_msg_left"> <div class="goodsItem_msg_right_msg_left">
<span>￥</span>125.9 <span>/个</span> <span>￥</span>{{ item.sales_price }} <span>/{{ item.goods_unit }}</span>
</div> </div>
<div class="goodsItem_msg_right_msg_right"> <div class="goodsItem_msg_right_msg_right">
<u-number-box v-model="value"> <u-number-box v-model="item.count">
<view slot="minus" class="minus"> <view slot="minus" class="minus">
<u-icon name="minus" size="32" bold></u-icon> <u-icon name="minus" size="32" bold></u-icon>
</view> </view>
<text slot="input" style="width: 80rpx;text-align: center;" class="input">{{ <text slot="input" style="width: 80rpx;text-align: center;" class="input">{{
value }}</text> item.count }}</text>
<view slot="plus" class="plus"> <view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon> <u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
</view> </view>
@ -58,18 +57,18 @@
<div class="footer"> <div class="footer">
<div class="footer_left"> <div class="footer_left">
<div class="footer_all"> <div class="footer_all" @click="allChecked">
<image <image v-if="!isAllchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image> </image>
<image v-if="false" <image v-if="isAllchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image> </image>
全选 全选
</div> </div>
<div class="footer_total"> <div class="footer_total">
<span>合计</span> <span>合计</span>
￥4900.00 ￥{{ shopMoney }}
</div> </div>
</div> </div>
<div class="footer_right" @click="submitOrder"> <div class="footer_right" @click="submitOrder">
@ -93,7 +92,7 @@
<script> <script>
import { import {
apiArr apiArr
} from '../../../api/doorToDoor'; } from '../../../api/shop';
import { import {
picUrl, picUrl,
menuButtonInfo, menuButtonInfo,
@ -103,22 +102,71 @@ import {
export default { export default {
data() { data() {
return { return {
picUrl,
top: "", top: "",
localHeight: "", localHeight: "",
value: 3, value: 3,
type: "error", type: "error",
shopCarList: [],
shopCarTotal: 0,
shopMoney: 0,
isAllchecked: false
} }
}, },
methods: { methods: {
submitOrder(){ submitOrder() {
NavgateTo("../submitOrder/index") NavgateTo("../submitOrder/index")
}, },
getShopCar() {
request(apiArr.getCar, 'POST', {}).then(res => {
res.commodity_cart_list.forEach(item => {
item.checked = false
});
console.log(res.commodity_cart_list);
this.shopCarTotal = res.total
this.shopCarList = res.commodity_cart_list
})
},
// 单个修改
changeChecked(item, index) {
this.shopCarList[index].checked = !this.shopCarList[index].checked
this.calcTotal()
// 计算是否全选
this.isAllchecked = this.shopCarList.every(item => item.checked)
},
// 全选
allChecked() {
this.isAllchecked = !this.isAllchecked
// Bug 修复：将 !this.allChecked 改为 !this.isAllchecked
if (this.isAllchecked) {
this.shopCarList.forEach(item => {
item.checked = true
});
} else {
this.shopCarList.forEach(item => {
item.checked = false
});
}
this.calcTotal()
},
// 计算金额
calcTotal() {
let total = 0
this.shopCarList.forEach(item => {
if (item.checked) {
total += item.sales_price * item.count
}
});
this.shopMoney = total
},
}, },
onLoad(options) { onLoad(options) {
const meun = menuButtonInfo(); const meun = menuButtonInfo();
this.top = meun.top; this.top = meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.getShopCar()
}, },
onReachBottom() { onReachBottom() {