Commit 31230581 authored by 陈宗胤(贵阳日报)'s avatar 陈宗胤(贵阳日报)
parents e98b93c1 3c134ea8
......@@ -16,3 +16,11 @@ export function searchProdPage(data) {
data,
});
}
// 筑农首页-店铺购物车列表
export function sgyBasketlist(data) {
return request({
url: `/sgyrdd/sgyBasket/list`,
method: 'GET',
data,
});
}
......@@ -251,6 +251,12 @@
"style": {
"navigationBarTitleText": "商品详情页"
}
},
{
"path": "pages/assistingAgriculture/detail/comment",
"style": {
"navigationBarTitleText": "评论"
}
}
],
"globalStyle": {
......
<template>
<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="check"
......@@ -13,7 +13,7 @@
<div class="shop-name">{{ shop.shopName }}</div>
</div>
<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
class="check"
:class="{ 'is-checked': item.isChecked }"
......@@ -21,14 +21,14 @@
>
<wd-icon v-if="item.isChecked" name="check1"></wd-icon>
</div>
<img :src="item.img" alt="" />
<img :src="item.imgUrl" alt="" />
<div class="commodity-info">
<div class="name">{{ item.name }}</div>
<div class="name">{{ item.prodName }}</div>
<div class="tag">{{ item.tag }}</div>
<div class="flex-between">
<div class="price">
<span></span>
{{ item.price }}
{{ item.skuPrice }}
</div>
<wd-input-number v-model="item.count" />
</div>
......@@ -56,90 +56,66 @@
</template>
<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(() => {
return list.value.every((item) => item.isChecked);
return cartList.value.every((item) => item.isChecked);
});
const totalPrice = computed(() => {
let total = 0;
list.value.forEach((item) => {
item.children.forEach((c) => {
cartList.value.forEach((item) => {
item.prodInfos.forEach((c) => {
if (c.isChecked) {
total += c.price;
total += c.skuPrice * c.count;
}
});
});
return total || 0;
});
const list = ref([
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: true,
children: [
{
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 list = ref([]);
const secondaryList = ref([]);
const hhh = ref([]);
const cartList = ref([]);
onMounted(async () => {
presaleSortList();
});
// 店铺
const changeShopChecked = (s) => {
s.isChecked = !s.isChecked;
s.children.forEach((v) => {
s.prodInfos.forEach((v) => {
v.isChecked = s.isChecked;
});
};
// 商品 店铺
const changeCommodityChecked = (c, s) => {
c.isChecked = !c.isChecked;
s.isChecked = s.children.every((v) => v.isChecked);
s.isChecked = s.prodInfos.every((v) => v.isChecked);
};
// 全选
const changeCheckedAll = () => {
const temp = checkedAll.value;
list.value.forEach((v) => {
cartList.value.forEach((v) => {
v.isChecked = temp;
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() {
// TODO: 跳转到结算页面
xma.navigateTo({
......@@ -276,4 +252,7 @@ uni-page-body {
}
}
}
.wd-input-number {
margin-left: 120rpx;
}
</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>
<view class="page">
<view class="banner">
<img src="/static/assistingAgriculture/shop/banner.png" alt="" />
<wd-swiper :list="shopImgList" height="236rpx" autoplay></wd-swiper>
</view>
<view class="commodity-wrap">
<view class="top-bar">
<view class="header">分类</view>
<view class="search">
<wd-search hide-cancel placeholder="请输入要搜索的内容" />
<wd-search
@clear="clearFn"
@search="searchFn"
hide-cancel
placeholder="请输入要搜索的内容"
/>
</view>
</view>
<view class="content">
......@@ -42,8 +47,6 @@
class="scroll-Y"
lower-threshold="50"
@scrolltolower="scrolltolowerFn"
@scrolltoupper="upper"
@scroll="scroll"
>
<view class="item" v-for="(item, i) in prodList" :key="i">
<view class="image-wrap" :class="{ border: isPreSale }">
......@@ -72,10 +75,11 @@
<span class="unit">/只</span>
</view>
</view>
<view class="add-shopping-cart">
<view class="add-shopping-cart" @click="addShoppingCart(item)">
<img src="/src/static/assistingAgriculture/shop/add.png" alt="" />
</view>
</view>
<wd-status-tip v-if="prodList.length === 0" image="content" tip="暂无内容" />
</scroll-view>
</view>
</view>
......@@ -83,7 +87,7 @@
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating">
<wd-badge modelValue="12">
<wd-badge :modelValue="addPurchase">
<img class="cart" @tap="toCart" src="/static/assistingAgriculture/presale/cart.png" />
</wd-badge>
</view>
......@@ -99,13 +103,16 @@
<script setup>
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 imgUrl = import.meta.env.VITE_APP_IMG_URL;
const currentShopId = ref('');
const scrollTop = ref(0);
const prodList = ref([]);
const listOfDishCategories = ref([]);
const shopImgList = ref([]);
const params = ref({
isEnd: false,
current: 1,
......@@ -120,6 +127,8 @@ onLoad((options) => {
shopCategoryByShopFn(options.shopId).then((res) => {
searchProdPageFn();
});
sgyBasketlistFn();
getStoreInformationFn();
});
const shopCategoryByShopFn = (shopId) => {
return new Promise((resolve, reject) => {
......@@ -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 searchFn = (e) => {
const { value } = e;
params.value.prodName = value;
refreshData().then((res) => {
searchProdPageFn();
});
};
const changeCate = (item) => {
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);
function toCart() {
......@@ -144,10 +185,45 @@ function toCart() {
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 = () => {
console.log('触底了');
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 = () => {
if (params.value.isEnd === true)
return new Promise((resolve) => {
......@@ -186,9 +262,8 @@ uni-page-body {
width: 710rpx;
height: 236rpx;
margin-bottom: 20rpx;
img {
width: 100%;
height: 100%;
:deep(.wd-swiper__track) {
border-radius: 0;
}
}
.commodity-wrap {
......
......@@ -242,7 +242,6 @@ onMounted(() => {
getCouponMainList();
});
onPullDownRefresh(() => {
orderStatus();
getClassification();
rotatingBroadcast();
nearbyFood();
......
......@@ -501,7 +501,7 @@ page {
margin: 0 auto;
.tabs {
padding-top: 88px;
padding-top: 88rpx;
.wd-tabs {
background-color: #f5f5f5;
......
......@@ -917,7 +917,7 @@ page {
font-weight: 500;
}
img {
width: 100%;
max-width: 100%;
height: auto;
margin-top: 20rpx;
}
......
......@@ -28,7 +28,7 @@ export const signIn = () => {
export const orderStatus = () => {
sgyOrderGetStatus().then((res) => {
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