上传代码
This commit is contained in:
72
uniapp04/pages/merchant/Shopdetails.vue
Normal file
72
uniapp04/pages/merchant/Shopdetails.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="aboutMessage1">
|
||||
<view class="title1">店铺信息</view>
|
||||
<view class="message1">
|
||||
<view class="messageItem1">地址：呼兰区哈尔滨华德学院</view>
|
||||
<view class="messageItem1">营业时间：早7：00-晚20：30</view>
|
||||
<view class="messageItem1">联系电话：1234312334</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title1">图片详情</view>
|
||||
<view class="aboutImg1">
|
||||
<view class="imgLeft1">
|
||||
<image src="https://ts1.cn.mm.bing.net/th/id/R-C.b3a7697d2793ba094a861d546c31190d?rik=NevOIW4XmkUuMA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50069%2f5445.jpg_wh1200.jpg&ehk=wuLPicg%2b9wXz8QAwp%2fAVFBtJQ6loBUiVfQZu2bbZODA%3d&risl=&pid=ImgRaw&r=0" class="img1" mode="scaleToFill"></image>
|
||||
<image src="https://ts1.cn.mm.bing.net/th/id/R-C.68978afc71576a94a1d50ef5016dbd9e?rik=cDDsy5SLmDvDHQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50075%2f0779.jpg_wh1200.jpg&ehk=FG4Hd5S711LYcuLBIcDagQyk4KhcH1oIfqyk1MWUOyg%3d&risl=&pid=ImgRaw&r=0" class="img1"></image>
|
||||
<image src="https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg" class="img1"></image>
|
||||
</view>
|
||||
<view class="imgRight1">
|
||||
<image src="https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg" class="img1"></image>
|
||||
<image src="https://img.zcool.cn/community/0189d85c3c421aa80121fbb0284f6c.jpg@1280w_1l_2o_100sh.jpg" class="img1"></image>
|
||||
<image src="https://bpic.588ku.com/back_origin_min_pic/21/03/30/251617b5c1ad3b0c7ae62fb8b51dfbbd.jpg" class="img1"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import {apiImageUrl} from '../../API/api'
|
||||
|
||||
const businessMessage=ref(uni.getStorageSync("Mybusiness"))
|
||||
console.log(businessMessage.value);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.title1 {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
padding-left: 5px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.message1 {
|
||||
width: 80%;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.messageItem1 {
|
||||
font-size: 18px;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
.aboutImg1 {
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.imgLeft1 {
|
||||
float: left;
|
||||
width: 48%;
|
||||
height: 100vh;
|
||||
}
|
||||
.imgRight1 {
|
||||
float: right;
|
||||
width: 48%;
|
||||
height: 100vh;
|
||||
}
|
||||
.img1 {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
98
uniapp04/pages/merchant/details.vue
Normal file
98
uniapp04/pages/merchant/details.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="aboutMessage1">
|
||||
<view class="title1">店铺信息</view>
|
||||
<view class="message1">
|
||||
<view class="messageItem1">地址：呼兰区哈尔滨华德学院</view>
|
||||
<view class="messageItem1">营业时间：早7：00-晚20：30</view>
|
||||
<view class="messageItem1">联系电话：1234312334</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title1">图片详情</view>
|
||||
<view class="aboutImg1">
|
||||
<view class="imgLeft1">
|
||||
<image src="https://ts1.cn.mm.bing.net/th/id/R-C.b3a7697d2793ba094a861d546c31190d?rik=NevOIW4XmkUuMA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50069%2f5445.jpg_wh1200.jpg&ehk=wuLPicg%2b9wXz8QAwp%2fAVFBtJQ6loBUiVfQZu2bbZODA%3d&risl=&pid=ImgRaw&r=0" class="img1" mode="scaleToFill"></image>
|
||||
<image src="https://ts1.cn.mm.bing.net/th/id/R-C.68978afc71576a94a1d50ef5016dbd9e?rik=cDDsy5SLmDvDHQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50075%2f0779.jpg_wh1200.jpg&ehk=FG4Hd5S711LYcuLBIcDagQyk4KhcH1oIfqyk1MWUOyg%3d&risl=&pid=ImgRaw&r=0" class="img1"></image>
|
||||
<image src="https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg" class="img1"></image>
|
||||
</view>
|
||||
<view class="imgRight1">
|
||||
<image src="https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg" class="img1"></image>
|
||||
<image src="https://img.zcool.cn/community/0189d85c3c421aa80121fbb0284f6c.jpg@1280w_1l_2o_100sh.jpg" class="img1"></image>
|
||||
<image src="https://bpic.588ku.com/back_origin_min_pic/21/03/30/251617b5c1ad3b0c7ae62fb8b51dfbbd.jpg" class="img1"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import {apiImageUrl} from '../../API/api'
|
||||
|
||||
const businessData = ref(null);
|
||||
|
||||
const message = async() => {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: apiImageUrl+'/api/business/getById',
|
||||
method: 'GET',
|
||||
data: {
|
||||
id: '1807609961254006785'
|
||||
}
|
||||
});
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
businessData.value = res.data.data;
|
||||
}
|
||||
else {
|
||||
console.error('Failed to fetch business details with status code:', res.statusCode);
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('An error occurred while fetching business details:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
message();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.title1 {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
padding-left: 5px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.message1 {
|
||||
width: 80%;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.messageItem1 {
|
||||
font-size: 18px;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
.aboutImg1 {
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.imgLeft1 {
|
||||
float: left;
|
||||
width: 48%;
|
||||
height: 100vh;
|
||||
}
|
||||
.imgRight1 {
|
||||
float: right;
|
||||
width: 48%;
|
||||
height: 100vh;
|
||||
}
|
||||
.img1 {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
1057
uniapp04/pages/merchant/merchant.vue
Normal file
1057
uniapp04/pages/merchant/merchant.vue
Normal file
File diff suppressed because it is too large
Load Diff
400
uniapp04/pages/merchant/sort.vue
Normal file
400
uniapp04/pages/merchant/sort.vue
Normal file
@ -0,0 +1,400 @@
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
ref,
|
||||
defineProps,
|
||||
onBeforeMount,
|
||||
onBeforeUnmount,
|
||||
watch
|
||||
} from 'vue';
|
||||
|
||||
import merchantVue from './merchant.vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import {
|
||||
apiImageUrl
|
||||
} from '../../API/api';
|
||||
|
||||
const props = defineProps({
|
||||
merchantId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
activeTab: { // 新增当前激活tab的监听
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
const resultArray = ref([]);
|
||||
|
||||
const currentIndex = ref(0);
|
||||
const tabs = ref([]);
|
||||
const businessId = ref('');
|
||||
const merchantId = ref(props.merchantId || '');
|
||||
|
||||
watch(() => props.activeTab, (newVal) => {
|
||||
if (newVal === 0) { // 当切回点餐tab时
|
||||
leftGroup();
|
||||
rightList();
|
||||
}
|
||||
});
|
||||
|
||||
// 优化数据加载逻辑
|
||||
const loadData = async () => {
|
||||
await leftGroup();
|
||||
await rightList();
|
||||
if (resultArray.value.length > 0) {
|
||||
await switchTab(0);
|
||||
}
|
||||
};
|
||||
|
||||
// 修改初始化逻辑
|
||||
onMounted(async () => {
|
||||
if (props.merchantId) {
|
||||
businessId.value = props.merchantId;
|
||||
await loadData();
|
||||
}
|
||||
});
|
||||
|
||||
// 优化watch监听
|
||||
watch(() => props.merchantId, async (newVal) => {
|
||||
console.log('传过来的商家id', newVal);
|
||||
if (newVal) {
|
||||
businessId.value = newVal;
|
||||
await loadData();
|
||||
}
|
||||
}, { immediate: true }); // 增加立即执行
|
||||
|
||||
const leftGroup = async () => {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: apiImageUrl + '/api/dishesGroup/list/dishesGroup',
|
||||
method: 'POST',
|
||||
data: { businessId: businessId.value },
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
// 保存分类ID和名称
|
||||
resultArray.value = res.data.data.map(item => ({
|
||||
id: item.id,
|
||||
groupName: item.groupName
|
||||
}));
|
||||
console.log('分类数据:', resultArray.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const rightList = async () => {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: apiImageUrl + '/api/dishes/list/dishes',
|
||||
method: 'POST',
|
||||
data: {
|
||||
businessId: businessId.value
|
||||
},
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
const filteredData = res.data.data.filter(item => item.status !== '1');
|
||||
historyList.value = filteredData;
|
||||
console.log('更新后的菜品列表:', historyList.value);
|
||||
} else {
|
||||
console.error('请求失败:', res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const contentArea = ref(null);
|
||||
|
||||
const switchTab = async (index) => {
|
||||
currentIndex.value = index;
|
||||
const groupId = resultArray.value[index]?.id;
|
||||
if (!groupId) return;
|
||||
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: apiImageUrl + '/api/dishes/list/dishes',
|
||||
method: 'POST',
|
||||
data: {
|
||||
businessId: businessId.value,
|
||||
dishesGroupId: groupId // 使用分类ID进行查询
|
||||
},
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
const filteredData = res.data.data.filter(item => item.status !== '1');
|
||||
historyList.value = filteredData;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 300
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const historyList = ref([]);
|
||||
|
||||
const emit = defineEmits(['update-cart', 'add-to-cart' ]);
|
||||
const cartItems = ref([]);
|
||||
|
||||
const addToCart = (item) => {
|
||||
cartItems.value.push({
|
||||
...item,
|
||||
quantity: 1
|
||||
});
|
||||
uni.setStorageSync('cartItems', cartItems.value);
|
||||
cartItems.value.forEach(item => {
|
||||
console.log(item.dishesName);
|
||||
});
|
||||
|
||||
// 触发添加成功事件
|
||||
emit('add-to-cart', item.dishesName);
|
||||
emit('update-cart', cartItems.value);
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="viewport">
|
||||
|
||||
<view class="categories">
|
||||
|
||||
<scroll-view class="primary" scroll-y>
|
||||
<!-- 修改分类项显示 -->
|
||||
<view class="item" v-for="(tab, index) in resultArray" :key="tab.id"
|
||||
:class="{ active: currentIndex === index }"
|
||||
@click="switchTab(index)">
|
||||
{{ tab.groupName }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<scroll-view class="secondary" scroll-y>
|
||||
|
||||
<block v-if="currentIndex === 0">
|
||||
|
||||
</block>
|
||||
<view class="panel">
|
||||
<view class="container">
|
||||
<view class="history-list">
|
||||
<view class="history-item" v-for="(item, index) in historyList" :key="index">
|
||||
|
||||
<image class="history-img" :src="item.dishesImage"></image>
|
||||
<view class="history-info">
|
||||
<text class="history-title">{{ item.dishesName }}</text>
|
||||
|
||||
<text class="history-money">￥{{ item.dishesPrice }}</text>
|
||||
|
||||
</view>
|
||||
<view class="icon plus-animated" @click="() => addToCart(item)">
|
||||
<uni-icons type="plus-filled" size="30" color="#4095e5"></uni-icons>
|
||||
</view>
|
||||
<!-- 模态框 -->
|
||||
<!-- <view v-if="isModalVisible" class="modal-mask">
|
||||
<view class="modal-dialog">
|
||||
<view class="modal-content">
|
||||
<view class="modal-header">
|
||||
请选择口味
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<picker mode="selector" :range="flavors" range-key="name" @change="handleFlavorChange">
|
||||
<view class="picker">
|
||||
{{ selectedFlavor.value.name }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button type="primary" @tap="addToCart">加入购物车</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 0 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64rpx;
|
||||
padding-left: 26rpx;
|
||||
color: #8b8b8b;
|
||||
font-size: 28rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: #f3f4f4;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
&::before {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.primary {
|
||||
overflow: hidden;
|
||||
width: 180rpx;
|
||||
flex: none;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 96rpx;
|
||||
font-size: 26rpx;
|
||||
color: #595c63;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 42rpx;
|
||||
bottom: 0;
|
||||
width: 96rpx;
|
||||
border-top: 1rpx solid #e3e4e7;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 8rpx;
|
||||
height: 100%;
|
||||
background-color: #4095e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary .item:last-child::after,
|
||||
.primary .active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.secondary {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
|
||||
.carousel {
|
||||
height: 400rpx;
|
||||
margin: 0 30rpx 20rpx;
|
||||
border-radius: 4rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin: 0 30rpx 0rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.history-img {
|
||||
width: 200rpx;
|
||||
height: 150rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.history-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.history-description {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.history-time {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.history-money {
|
||||
font-size: 30rpx;
|
||||
color: black;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
@keyframes plus-slide-down {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.plus-animated {
|
||||
animation-name: plus-slide-down;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user