Commit 31230581 authored by 陈宗胤(贵阳日报)'s avatar 陈宗胤(贵阳日报)
parents e98b93c1 3c134ea8
...@@ -16,3 +16,11 @@ export function searchProdPage(data) { ...@@ -16,3 +16,11 @@ export function searchProdPage(data) {
data, data,
}); });
} }
// 筑农首页-店铺购物车列表
export function sgyBasketlist(data) {
return request({
url: `/sgyrdd/sgyBasket/list`,
method: 'GET',
data,
});
}
...@@ -251,6 +251,12 @@ ...@@ -251,6 +251,12 @@
"style": { "style": {
"navigationBarTitleText": "商品详情页" "navigationBarTitleText": "商品详情页"
} }
},
{
"path": "pages/assistingAgriculture/detail/comment",
"style": {
"navigationBarTitleText": "评论"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
<template> <template>
<div class="cart-wrap"> <div class="cart-wrap">
<div class="shop" v-for="(shop, i) in list" :key="i"> <div class="shop" v-for="(shop, i) in cartList" :key="i">
<div class="flex-align-center shop-info"> <div class="flex-align-center shop-info">
<div <div
class="check" class="check"
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="shop-name">{{ shop.shopName }}</div> <div class="shop-name">{{ shop.shopName }}</div>
</div> </div>
<div class="commodity-list"> <div class="commodity-list">
<div class="commodity-item flex-align-center" v-for="(item, j) in shop.children" :key="j"> <div class="commodity-item flex-align-center" v-for="(item, j) in secondaryList" :key="j">
<div <div
class="check" class="check"
:class="{ 'is-checked': item.isChecked }" :class="{ 'is-checked': item.isChecked }"
...@@ -21,14 +21,14 @@ ...@@ -21,14 +21,14 @@
> >
<wd-icon v-if="item.isChecked" name="check1"></wd-icon> <wd-icon v-if="item.isChecked" name="check1"></wd-icon>
</div> </div>
<img :src="item.img" alt="" /> <img :src="item.imgUrl" alt="" />
<div class="commodity-info"> <div class="commodity-info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.prodName }}</div>
<div class="tag">{{ item.tag }}</div> <div class="tag">{{ item.tag }}</div>
<div class="flex-between"> <div class="flex-between">
<div class="price"> <div class="price">
<span></span> <span></span>
{{ item.price }} {{ item.skuPrice }}
</div> </div>
<wd-input-number v-model="item.count" /> <wd-input-number v-model="item.count" />
</div> </div>
...@@ -56,90 +56,66 @@ ...@@ -56,90 +56,66 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { getshoppingCartList } from '../../../api/packageDetail';
import { categoryPresaleList } from '../../../api/assistingAgriculture/building';
// 计算是否全选 // 计算是否全选
const checkedAll = computed(() => { const checkedAll = computed(() => {
return list.value.every((item) => item.isChecked); return cartList.value.every((item) => item.isChecked);
}); });
const totalPrice = computed(() => { const totalPrice = computed(() => {
let total = 0; let total = 0;
list.value.forEach((item) => { cartList.value.forEach((item) => {
item.children.forEach((c) => { item.prodInfos.forEach((c) => {
if (c.isChecked) { if (c.isChecked) {
total += c.price; total += c.skuPrice * c.count;
} }
}); });
}); });
return total || 0; return total || 0;
}); });
const list = ref([ const list = ref([]);
{ const secondaryList = ref([]);
shopName: '杨家黄焖鸡', const hhh = ref([]);
type: '店铺',
isChecked: true, const cartList = ref([]);
children: [ onMounted(async () => {
{ presaleSortList();
img: '/src/static/assistingAgriculture/assets/fruit.png', });
name: '招牌黄焖鸡+米饭(土豆+生菜)',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: false,
children: [
{
img: '/src/static/assistingAgriculture/assets/fruit.png',
name: '招牌黄焖鸡+米饭(土豆+生菜)',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
{
img: '/src/static/assistingAgriculture/assets/fruit.png',
name: '招牌黄焖鸡+米饭(土豆+生菜)',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
{
img: '/src/static/assistingAgriculture/assets/fruit.png',
name: '招牌黄焖鸡+米饭(土豆+生菜)',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
]);
// 店铺 // 店铺
const changeShopChecked = (s) => { const changeShopChecked = (s) => {
s.isChecked = !s.isChecked; s.isChecked = !s.isChecked;
s.children.forEach((v) => { s.prodInfos.forEach((v) => {
v.isChecked = s.isChecked; v.isChecked = s.isChecked;
}); });
}; };
// 商品 店铺 // 商品 店铺
const changeCommodityChecked = (c, s) => { const changeCommodityChecked = (c, s) => {
c.isChecked = !c.isChecked; c.isChecked = !c.isChecked;
s.isChecked = s.children.every((v) => v.isChecked); s.isChecked = s.prodInfos.every((v) => v.isChecked);
}; };
// 全选 // 全选
const changeCheckedAll = () => { const changeCheckedAll = () => {
const temp = checkedAll.value; const temp = checkedAll.value;
list.value.forEach((v) => { cartList.value.forEach((v) => {
v.isChecked = temp; v.isChecked = temp;
changeShopChecked(v); changeShopChecked(v);
}); });
}; };
// 购物车列表
const presaleSortList = (index) => {
getshoppingCartList({}).then((res) => {
cartList.value = res.data;
cartList.value.forEach((shop) => {
secondaryList.value = shop.prodInfos;
secondaryList.value.forEach((item) => {
item.count = item.basket.basketCount;
item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
});
});
};
function toSettle() { function toSettle() {
// TODO: 跳转到结算页面 // TODO: 跳转到结算页面
xma.navigateTo({ xma.navigateTo({
...@@ -276,4 +252,7 @@ uni-page-body { ...@@ -276,4 +252,7 @@ uni-page-body {
} }
} }
} }
.wd-input-number {
margin-left: 120rpx;
}
</style> </style>
<template>
<view class="container">
<!-- 顶部搜索框-->
<view class="header">
<wd-icon
class="icon"
name="arrow-left"
color="#000"
size="28rpx"
@click="handleBack"
></wd-icon>
<view class="searchBox">
<wd-icon name="search" size="24rpx" color="#ABAAAA"></wd-icon>
<input
type="text"
:value="searchValue"
class="text"
placeholder="点评关键词/特色"
placeholder-style="font-size:22rpx;"
/>
</view>
</view>
<view class="content">
<view class="tabs">
<view
v-for="item in tabs"
:key="item.value"
class="tab"
:class="{ active: tab === item.value }"
@click="handleChangeTab(item.value)"
>
{{ item.label }}
</view>
</view>
<view class="comment-list">
<view class="comment-item" v-for="item in 3" :key="item">
<view class="top">
<view class="row">
<image
class="headPortrait"
mode="aspectFill"
src="@/static/assistingAgriculture/detail/detail-img.png"
></image>
<view class="right">
<text class="name">略略略</text>
<view class="ratebox">
<image
class="rate-img"
src="@/static/assistingAgriculture/detail/fiveStars.png"
></image>
<text>5.0分</text>
<text>好评</text>
</view>
</view>
</view>
<text class="detail">2024-08-03 筑农散养虫子土鸡(未下蛋小母鸡)x2</text>
</view>
<view class="info">
<text class="text">味道鲜美,煲出来的汤非常好喝,值得购买!</text>
<view class="imgbox">
<image
class="img"
mode="aspectFill"
src="@/static/assistingAgriculture/detail/detail-img.png"
v-for="item in 6"
:key="item"
></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
const searchValue = ref('');
const tab = ref(0);
const tabs = ref([
{
value: 0,
label: '全部',
},
{
value: 1,
label: '图/视频(183)',
},
{
value: 2,
label: '追评(5)',
},
{
value: 3,
label: '中差评(13)',
},
{
value: 4,
label: '好评(514)',
},
]);
const rateList = ref([
{
value: 1,
url: '@/static/assistingAgriculture/index/oneStar.png',
text: '很糟',
},
{
value: 2,
url: '@/static/assistingAgriculture/index/twoStars.png',
text: '较差',
},
{
value: 3,
url: '@/static/assistingAgriculture/index/threeStars.png',
text: '一般',
},
{
value: 4,
url: '@/static/assistingAgriculture/index/fourStars.png',
text: '还行',
},
{
value: 5,
url: '@/static/assistingAgriculture/index/fiveStars.png',
text: '超赞',
},
]);
const handleChangeTab = (e) => {
if (e === tab.value) return;
tab.value = e;
};
const handleBack = () => {
uni.navigateBack();
};
</script>
<style lang="scss" scoped>
page {
background-color: #f3f3f3;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
position: relative;
.header {
height: 88rpx;
position: absolute;
width: 100%;
z-index: 999;
display: flex;
background-color: #fff;
margin: 0 auto;
align-items: center;
padding: 0 40rpx;
gap: 32rpx;
.searchBox {
width: 492rpx;
height: 56rpx;
background: #f3f3f3;
border-radius: 28rpx 28rpx 28rpx 28rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
gap: 10rpx;
.text {
margin-left: 10rpx;
font-size: 22rpx;
}
}
}
.content {
padding: 98rpx 20rpx 0;
display: flex;
flex-direction: column;
gap: 10rpx;
.tabs {
background-color: #fff;
display: flex;
justify-content: space-around;
border-radius: 16rpx;
padding: 30rpx 30rpx;
.tab {
font-family: Source Han Sans;
font-weight: 500;
font-size: 22rpx;
color: #767676;
}
.active {
font-family: Source Han Sans;
font-weight: 700;
font-size: 24rpx;
color: #3d3d3d;
position: relative;
&::after {
content: '';
width: 32rpx;
height: 4rpx;
background-color: #fa5151;
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translate(-50%);
}
}
}
.comment-list {
display: flex;
flex-direction: column;
gap: 10rpx;
.comment-item {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
gap: 12rpx;
.top {
display: flex;
flex-direction: column;
gap: 20rpx;
border-bottom: 2rpx solid #f3f3f3;
padding-bottom: 20rpx;
.row {
display: flex;
gap: 16rpx;
.headPortrait {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
}
.right {
display: flex;
flex-direction: column;
gap: 16rpx;
.name {
font-family: Source Han Sans;
font-weight: bold;
font-size: 28rpx;
color: #3d3d3d;
}
.ratebox {
display: flex;
position: relative;
align-items: center;
background-color: rgba(253, 223, 109, 0.1686);
gap: 10rpx;
padding: 2rpx 10rpx 2rpx 26rpx;
border-radius: 16rpx;
text {
font-family: Source Han Sans;
font-weight: 500;
font-size: 16rpx;
color: #e1961d;
}
.rate-img {
width: 24rpx;
height: 24rpx;
position: absolute;
left: -8rpx;
}
}
}
}
.detail {
font-family: Source Han Sans;
font-weight: 500;
font-size: 22rpx;
color: #abaaaa;
}
}
.info {
display: flex;
flex-direction: column;
gap: 20rpx;
.text {
font-family: Source Han Sans;
font-weight: 500;
font-size: 28rpx;
color: #3d3d3d;
}
.imgbox {
display: flex;
gap: 10rpx;
flex-wrap: wrap;
.img {
width: 216rpx;
height: 216rpx;
border-radius: 16rpx;
}
}
}
}
}
}
}
</style>
<template> <template>
<view class="page"> <view class="page">
<view class="banner"> <view class="banner">
<img src="/static/assistingAgriculture/shop/banner.png" alt="" /> <wd-swiper :list="shopImgList" height="236rpx" autoplay></wd-swiper>
</view> </view>
<view class="commodity-wrap"> <view class="commodity-wrap">
<view class="top-bar"> <view class="top-bar">
<view class="header">分类</view> <view class="header">分类</view>
<view class="search"> <view class="search">
<wd-search hide-cancel placeholder="请输入要搜索的内容" /> <wd-search
@clear="clearFn"
@search="searchFn"
hide-cancel
placeholder="请输入要搜索的内容"
/>
</view> </view>
</view> </view>
<view class="content"> <view class="content">
...@@ -42,8 +47,6 @@ ...@@ -42,8 +47,6 @@
class="scroll-Y" class="scroll-Y"
lower-threshold="50" lower-threshold="50"
@scrolltolower="scrolltolowerFn" @scrolltolower="scrolltolowerFn"
@scrolltoupper="upper"
@scroll="scroll"
> >
<view class="item" v-for="(item, i) in prodList" :key="i"> <view class="item" v-for="(item, i) in prodList" :key="i">
<view class="image-wrap" :class="{ border: isPreSale }"> <view class="image-wrap" :class="{ border: isPreSale }">
...@@ -72,10 +75,11 @@ ...@@ -72,10 +75,11 @@
<span class="unit">/只</span> <span class="unit">/只</span>
</view> </view>
</view> </view>
<view class="add-shopping-cart"> <view class="add-shopping-cart" @click="addShoppingCart(item)">
<img src="/src/static/assistingAgriculture/shop/add.png" alt="" /> <img src="/src/static/assistingAgriculture/shop/add.png" alt="" />
</view> </view>
</view> </view>
<wd-status-tip v-if="prodList.length === 0" image="content" tip="暂无内容" />
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
...@@ -83,7 +87,7 @@ ...@@ -83,7 +87,7 @@
</view> </view>
<!-- 购物车悬浮按钮 --> <!-- 购物车悬浮按钮 -->
<view class="cart-floating"> <view class="cart-floating">
<wd-badge modelValue="12"> <wd-badge :modelValue="addPurchase">
<img class="cart" @tap="toCart" src="/static/assistingAgriculture/presale/cart.png" /> <img class="cart" @tap="toCart" src="/static/assistingAgriculture/presale/cart.png" />
</wd-badge> </wd-badge>
</view> </view>
...@@ -99,13 +103,16 @@ ...@@ -99,13 +103,16 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { shopCategoryByShop, searchProdPage } from '@/api/assistingAgriculture/shop'; import { shopCategoryByShop, searchProdPage, sgyBasketlist } from '@/api/assistingAgriculture/shop';
import { addOrder } from '@/api/packageDetail';
import { getStoreInformation } from '@/api/shop';
const format = ref('DD-HH:mm:ss'); const format = ref('DD-HH:mm:ss');
const imgUrl = import.meta.env.VITE_APP_IMG_URL; const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const currentShopId = ref(''); const currentShopId = ref('');
const scrollTop = ref(0); const scrollTop = ref(0);
const prodList = ref([]); const prodList = ref([]);
const listOfDishCategories = ref([]); const listOfDishCategories = ref([]);
const shopImgList = ref([]);
const params = ref({ const params = ref({
isEnd: false, isEnd: false,
current: 1, current: 1,
...@@ -120,6 +127,8 @@ onLoad((options) => { ...@@ -120,6 +127,8 @@ onLoad((options) => {
shopCategoryByShopFn(options.shopId).then((res) => { shopCategoryByShopFn(options.shopId).then((res) => {
searchProdPageFn(); searchProdPageFn();
}); });
sgyBasketlistFn();
getStoreInformationFn();
}); });
const shopCategoryByShopFn = (shopId) => { const shopCategoryByShopFn = (shopId) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
...@@ -132,10 +141,42 @@ const shopCategoryByShopFn = (shopId) => { ...@@ -132,10 +141,42 @@ const shopCategoryByShopFn = (shopId) => {
}); });
}); });
}; };
const getStoreInformationFn = () => {
getStoreInformation(currentShopId.value).then((res) => {
if (res.code === 0) {
shopImgList.value = res.data.imgList.map((item) => {
console.log('imgUrl.value', imgUrl.value);
item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.imgUrl;
return item.imgUrl;
});
console.log('shopImgList', shopImgList);
}
});
};
const acitveNav = ref(1); const acitveNav = ref(1);
const searchFn = (e) => {
const { value } = e;
params.value.prodName = value;
refreshData().then((res) => {
searchProdPageFn();
});
};
const changeCate = (item) => { const changeCate = (item) => {
acitveNav.value = item.categoryId; acitveNav.value = item.categoryId;
params.value.shopCategoryId = item.categoryId;
refreshData().then((res) => {
searchProdPageFn();
});
};
const refreshData = (item) => {
return new Promise((resolve, reject) => {
params.value.isEnd = false;
params.value.current = 1;
prodList.value = [];
params.value.prodName = '';
resolve();
});
}; };
const activeFilter = ref(false); const activeFilter = ref(false);
function toCart() { function toCart() {
...@@ -144,10 +185,45 @@ function toCart() { ...@@ -144,10 +185,45 @@ function toCart() {
url: '/pages/assistingAgriculture/cart/cart', url: '/pages/assistingAgriculture/cart/cart',
}); });
} }
const sgyBasketlistFn = () => {
const query = {
shopId: currentShopId.value,
shopType: '3',
};
sgyBasketlist(query).then((res) => {
if (res.code === 0) {
res.data.forEach((shop) => {
addPurchase.value += shop.prodInfos.length;
});
}
});
};
const scrolltolowerFn = () => { const scrolltolowerFn = () => {
console.log('触底了'); console.log('触底了');
searchProdPageFn(); searchProdPageFn();
}; };
function clearFn() {
refreshData().then((res) => {
searchProdPageFn();
});
}
const addPurchase = ref(0);
const addShoppingCart = (item) => {
const params = {
shopId: item.shopId,
prodId: item.prodId,
skuId: item.skuIds,
shopType: '3',
basketCount: 1,
};
addOrder(params).then((res) => {
addPurchase.value = 0;
if (res.code === 0) {
sgyBasketlistFn();
}
});
};
const searchProdPageFn = () => { const searchProdPageFn = () => {
if (params.value.isEnd === true) if (params.value.isEnd === true)
return new Promise((resolve) => { return new Promise((resolve) => {
...@@ -186,9 +262,8 @@ uni-page-body { ...@@ -186,9 +262,8 @@ uni-page-body {
width: 710rpx; width: 710rpx;
height: 236rpx; height: 236rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
img { :deep(.wd-swiper__track) {
width: 100%; border-radius: 0;
height: 100%;
} }
} }
.commodity-wrap { .commodity-wrap {
......
...@@ -242,7 +242,6 @@ onMounted(() => { ...@@ -242,7 +242,6 @@ onMounted(() => {
getCouponMainList(); getCouponMainList();
}); });
onPullDownRefresh(() => { onPullDownRefresh(() => {
orderStatus();
getClassification(); getClassification();
rotatingBroadcast(); rotatingBroadcast();
nearbyFood(); nearbyFood();
......
...@@ -501,7 +501,7 @@ page { ...@@ -501,7 +501,7 @@ page {
margin: 0 auto; margin: 0 auto;
.tabs { .tabs {
padding-top: 88px; padding-top: 88rpx;
.wd-tabs { .wd-tabs {
background-color: #f5f5f5; background-color: #f5f5f5;
......
...@@ -917,7 +917,7 @@ page { ...@@ -917,7 +917,7 @@ page {
font-weight: 500; font-weight: 500;
} }
img { img {
width: 100%; max-width: 100%;
height: auto; height: auto;
margin-top: 20rpx; margin-top: 20rpx;
} }
......
...@@ -28,7 +28,7 @@ export const signIn = () => { ...@@ -28,7 +28,7 @@ export const signIn = () => {
export const orderStatus = () => { export const orderStatus = () => {
sgyOrderGetStatus().then((res) => { sgyOrderGetStatus().then((res) => {
if (res.code === 0) { if (res.code === 0) {
setOrderDic(res.data.store); setOrderDic(res.data);
} }
}); });
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment