This commit is contained in:
@@ -1,45 +1,65 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="head-wrapper" :style="{top: BarHeight + 'px'}">
|
||||
<view class="head-menu">
|
||||
<Left class="iconfont" @click="returns" />
|
||||
<Home class="iconfont" @click="goHome" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 幻灯片 -->
|
||||
<nut-swiper
|
||||
:init-page="0"
|
||||
:pagination-visible="true"
|
||||
:pagination-visible="false"
|
||||
pagination-color="red"
|
||||
auto-play="3000"
|
||||
>
|
||||
auto-play="3000">
|
||||
<nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
:src="itm"
|
||||
:alt="idx.toString()"
|
||||
/>
|
||||
:alt="idx.toString()" />
|
||||
</nut-swiper-item>
|
||||
</nut-swiper>
|
||||
<!-- 商家信息 -->
|
||||
<view class="infoBox">
|
||||
<view class="title">{{ mer_info.name }}</view>
|
||||
<view class="title text-[#333333]">{{ mer_info.name }}</view>
|
||||
<view class="flex items-center justify-between mt-3">
|
||||
<nut-rate
|
||||
spacing="1"
|
||||
active-color="rgba(252, 207, 10, 1)"
|
||||
v-model="mer_info.rate" />
|
||||
<view class="text-[#9E9E9E] text-[25px]">销量：10000</view>
|
||||
<view class="text-[#9E9E9E] text-[25px]"
|
||||
>营业时间：{{ mer_info.week_start }}-{{ mer_info.week_end }}</view
|
||||
>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="bom">
|
||||
<view
|
||||
class="iconfont icon-dizhi text-[#C4C4C4]"
|
||||
style="width: 15px; height: 15px; margin-right: 15px"></view>
|
||||
<view class="left">
|
||||
<view>{{ mer_info.address || "暂无商家地址" }}</view>
|
||||
<view class="sub"
|
||||
>距你{{
|
||||
<view>{{ mer_info.address || '暂无商家地址' }}</view>
|
||||
<view class="sub mt-1"
|
||||
>距离您{{
|
||||
calculateDistance(
|
||||
userLocalNum.t,
|
||||
userLocalNum.l,
|
||||
Number(mer_info.lat),
|
||||
Number(mer_info.lon)
|
||||
Number(mer_info.lon),
|
||||
)
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view @click="clickMap">
|
||||
<Locationg3 color="red" size="25" />
|
||||
<view>导航</view>
|
||||
<image
|
||||
class="w-[50px] h-[50px]"
|
||||
src="http://p1.meituan.net/csc/92ee8512c90527169b44e07fd11d250d924.png" />
|
||||
</view>
|
||||
<view @click="clickPhone">
|
||||
<Find color="red" size="25" />
|
||||
<view>电话</view>
|
||||
<image
|
||||
class="w-[50px] h-[50px]"
|
||||
src="http://p0.meituan.net/csc/ab0493b124a6bb858bf82a2340767c0d919.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -53,21 +73,20 @@
|
||||
direction="vertical"
|
||||
title-gutter="5"
|
||||
animated-time="0"
|
||||
name="tabName"
|
||||
>
|
||||
type=""
|
||||
name="tabName">
|
||||
<nut-tab-pane
|
||||
v-for="(itm, index) in good_list"
|
||||
:key="index"
|
||||
:title="itm.name"
|
||||
:pane-key="index"
|
||||
>
|
||||
:pane-key="index">
|
||||
<view v-if="itm.Goods.length > 0">
|
||||
<view class="list" v-for="(item, index) in itm.Goods" :key="index">
|
||||
<view class="item" @click.stop="toGoodDetails(item.gid, 1)">
|
||||
<image :src="item.cover" lazy-load />
|
||||
<view class="right">
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="stock">剩余:{{ item.stock }}</view>
|
||||
<view class="stock text-[25px]">剩余:{{ item.stock }}</view>
|
||||
<view class="bom">
|
||||
<view>
|
||||
<view class="price">
|
||||
@@ -79,15 +98,20 @@
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<nut-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click.stop="add_cart(item)"
|
||||
>
|
||||
<template #icon>
|
||||
<Cart2 />
|
||||
</template>
|
||||
</nut-button>
|
||||
<view class="flex items-center justify-between">
|
||||
<view
|
||||
v-if="item.cartNum > 0"
|
||||
class="btn"
|
||||
@click.stop="add_cart(item, 1)">
|
||||
<Minus />
|
||||
</view>
|
||||
<view v-if="item.cartNum > 0" style="margin: 0 10px">
|
||||
{{ item.cartNum }}
|
||||
</view>
|
||||
<view class="btn" @click.stop="add_cart(item, 2)">
|
||||
<Plus />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -105,18 +129,21 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Find, Locationg3, Cart2 } from "@nutui/icons-vue-taro";
|
||||
import { Ref, ref } from "vue";
|
||||
import { calculateDistance } from "@/utils";
|
||||
import { getGoodList, getMerCategory } from "@/api/goods";
|
||||
import Cart from "@/components/Cart.vue";
|
||||
import Taro from '@tarojs/taro';
|
||||
import {Cart2, Left, Home, Uploader, Plus, Minus} from '@nutui/icons-vue-taro';
|
||||
import {Ref, ref} from 'vue';
|
||||
import {calculateDistance} from '@/utils';
|
||||
import {getGoodList, getMerCategory} from '@/api/goods';
|
||||
import Cart from '@/components/Cart.vue';
|
||||
|
||||
const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
|
||||
const BarHeight = ref((statusBarHeight as number) + 6);
|
||||
|
||||
const swiperList = ref([]);
|
||||
|
||||
const mer_info = ref<any>({});
|
||||
|
||||
const value = ref("0");
|
||||
const value = ref('0');
|
||||
|
||||
const userLocalNum = ref({
|
||||
l: 0,
|
||||
@@ -125,17 +152,17 @@ const userLocalNum = ref({
|
||||
|
||||
Taro.useLoad(async () => {
|
||||
Taro.getLocation({
|
||||
type: "wgs84",
|
||||
success: (res) => {
|
||||
type: 'wgs84',
|
||||
success: res => {
|
||||
userLocalNum.value.l = res.longitude;
|
||||
userLocalNum.value.t = res.latitude;
|
||||
},
|
||||
});
|
||||
mer_info.value = Taro.getStorageSync("mer_info");
|
||||
mer_info.value = Taro.getStorageSync('mer_info');
|
||||
Taro.setNavigationBarTitle({
|
||||
title: mer_info.value.name,
|
||||
});
|
||||
swiperList.value = mer_info.value.img.split(",");
|
||||
swiperList.value = mer_info.value.img.split(',');
|
||||
await get_class_list();
|
||||
await cartRef.value.get_cart_list();
|
||||
});
|
||||
@@ -204,7 +231,7 @@ interface CartItems {
|
||||
const good_list = ref<goodList[]>([]);
|
||||
const get_good_list = async (id: number) => {
|
||||
Taro.showLoading({
|
||||
title: "加载中",
|
||||
title: '加载中',
|
||||
mask: true,
|
||||
});
|
||||
const res = await getGoodList({
|
||||
@@ -225,8 +252,14 @@ const toGoodDetails = (id: string, type: number) => {
|
||||
|
||||
const cartRef = ref(null) as Ref;
|
||||
|
||||
const add_cart = (item: GoodsType) => {
|
||||
const num = item.cartNum ? Number(item.cartNum) + 1 : 1;
|
||||
const add_cart = (item: GoodsType, type: number) => {
|
||||
let num = 0;
|
||||
if (type === 1) {
|
||||
num = Number(item.cartNum) - 1;
|
||||
} else {
|
||||
num = item.cartNum ? Number(item.cartNum) + 1 : 1;
|
||||
}
|
||||
|
||||
cartRef.value.add_cart(item, num);
|
||||
};
|
||||
|
||||
@@ -244,115 +277,25 @@ const updateCartNum = (cartItems: CartItems[]) => {
|
||||
} else {
|
||||
good_list.value.forEach((category: goodList) => {
|
||||
category.Goods.forEach((good: GoodsType) => {
|
||||
Reflect.deleteProperty(good, "cartNum");
|
||||
Reflect.deleteProperty(good, 'cartNum');
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const returns = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
};
|
||||
|
||||
const goHome = () => {
|
||||
Taro.switchTab({
|
||||
url: '/pages/index/index',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// IOS安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.nut-swiper {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
|
||||
.title {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-top: 10px;
|
||||
|
||||
.left {
|
||||
width: 80%;
|
||||
|
||||
.sub {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.good-class {
|
||||
margin-top: 10px;
|
||||
|
||||
.nut-tabs {
|
||||
height: 100vh;
|
||||
border-top: #fff 10px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// text-align: right;
|
||||
|
||||
.stock {
|
||||
margin-top: 10px;
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
.name {
|
||||
// height: 20px;
|
||||
font-size: 28px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.bom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
//margin-top: 10px;
|
||||
|
||||
.price {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ff0000;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user