i
This commit is contained in:
3
src/pages/mer/mer_detail/index.config.ts
Normal file
3
src/pages/mer/mer_detail/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "",
|
||||
});
|
||||
308
src/pages/mer/mer_detail/index.vue
Normal file
308
src/pages/mer/mer_detail/index.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 幻灯片 -->
|
||||
<nut-swiper
|
||||
:init-page="0"
|
||||
:pagination-visible="true"
|
||||
pagination-color="red"
|
||||
auto-play="3000"
|
||||
>
|
||||
<nut-swiper-item
|
||||
v-for="(itm, idx) in (swiperList as any)"
|
||||
:key="idx"
|
||||
>
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
:src="itm"
|
||||
:alt="idx.toString()"
|
||||
/>
|
||||
</nut-swiper-item>
|
||||
</nut-swiper>
|
||||
<!-- 商家信息 -->
|
||||
<view class="infoBox">
|
||||
<view class="title">{{ mer_info.name }}</view>
|
||||
<view class="bom">
|
||||
<view class="left">
|
||||
<view>{{ mer_info.address || "暂无商家地址" }}</view>
|
||||
<view class="sub"
|
||||
>距你{{
|
||||
calculateDistance(
|
||||
userLocalNum.t,
|
||||
userLocalNum.l,
|
||||
Number(mer_info.lat),
|
||||
Number(mer_info.lon)
|
||||
)
|
||||
}}</view
|
||||
>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view @click="clickMap">
|
||||
<Locationg3 color="red" size="25" />
|
||||
<view>导航</view>
|
||||
</view>
|
||||
<view @click="clickPhone">
|
||||
<Find color="red" size="25" />
|
||||
<view>电话</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<!-- <view class="good">
|
||||
<view class="item"></view>
|
||||
</view> -->
|
||||
<view class="good-class" v-if="class_list.length > 0">
|
||||
<nut-tabs
|
||||
v-model="value"
|
||||
title-scroll
|
||||
direction="vertical"
|
||||
title-gutter="5"
|
||||
animated-time="0"
|
||||
name="tabName"
|
||||
@click="clickTab"
|
||||
>
|
||||
<nut-tab-pane
|
||||
v-for="(item, index) in class_list"
|
||||
:title="item.name"
|
||||
:pane-key="index"
|
||||
>
|
||||
<view v-if="good_list.length > 0">
|
||||
<view
|
||||
class="list"
|
||||
v-for="(item, index) in (good_list as any)"
|
||||
:key="index"
|
||||
>
|
||||
<view class="item">
|
||||
<img :src="item.cover" />
|
||||
<view class="right">
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="bom">
|
||||
<view class="price"
|
||||
><text style="font-size: 15px">{{
|
||||
item.number
|
||||
}}</text>
|
||||
{{
|
||||
mer_info.bType === 1
|
||||
? "元"
|
||||
: "积分"
|
||||
}}</view
|
||||
>
|
||||
<nut-button
|
||||
size="mini"
|
||||
v-if="mer_info.bType === 1"
|
||||
type="primary"
|
||||
@click.stop="
|
||||
toGoodDetails(
|
||||
item.gid as number,
|
||||
1
|
||||
)
|
||||
"
|
||||
>去购买</nut-button
|
||||
>
|
||||
<nut-button
|
||||
size="mini"
|
||||
v-else
|
||||
type="primary"
|
||||
@click.stop="
|
||||
toGoodDetails(
|
||||
item.gid as number,
|
||||
2
|
||||
)
|
||||
"
|
||||
>去兑换</nut-button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view></view
|
||||
>
|
||||
<nut-empty v-else description="该分类暂无商品"></nut-empty>
|
||||
</nut-tab-pane>
|
||||
</nut-tabs>
|
||||
</view>
|
||||
<nut-empty v-else description="该商家暂无商品"></nut-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Find, Locationg3 } from "@nutui/icons-vue-taro";
|
||||
import { ref } from "vue";
|
||||
import { calculateDistance } from "../../../utils";
|
||||
import { getMerCategory, getGoodList } from "../../../api/goods";
|
||||
|
||||
const swiperList = ref([]);
|
||||
|
||||
const mer_info = ref<any>({});
|
||||
|
||||
const value = ref("0");
|
||||
|
||||
const userLocalNum = ref({
|
||||
l: 0,
|
||||
t: 0,
|
||||
});
|
||||
|
||||
Taro.useLoad(() => {
|
||||
Taro.getLocation({
|
||||
type: "wgs84",
|
||||
success: (res) => {
|
||||
userLocalNum.value.l = res.longitude;
|
||||
userLocalNum.value.t = res.latitude;
|
||||
},
|
||||
});
|
||||
mer_info.value = Taro.getStorageSync("mer_info");
|
||||
Taro.setNavigationBarTitle({
|
||||
title: mer_info.value.name,
|
||||
});
|
||||
swiperList.value = mer_info.value.img.split(",");
|
||||
get_class_list();
|
||||
});
|
||||
|
||||
const clickPhone = () => {
|
||||
Taro.makePhoneCall({
|
||||
phoneNumber: mer_info.value.phone,
|
||||
});
|
||||
};
|
||||
|
||||
const clickMap = () => {
|
||||
Taro.openLocation({
|
||||
name: mer_info.value.name,
|
||||
address: mer_info.value.address,
|
||||
latitude: Number(mer_info.value.lat),
|
||||
longitude: Number(mer_info.value.lon),
|
||||
scale: 18,
|
||||
});
|
||||
};
|
||||
|
||||
const class_list = ref<
|
||||
Array<{
|
||||
ID?: number;
|
||||
name?: string;
|
||||
}>
|
||||
>([]);
|
||||
const get_class_list = async () => {
|
||||
const res = await getMerCategory({
|
||||
Bid: mer_info.value.bid,
|
||||
});
|
||||
class_list.value = res.data.data || [];
|
||||
get_good_list(class_list.value[0].ID as number);
|
||||
};
|
||||
|
||||
const clickTab = (val: any) => {
|
||||
get_good_list(class_list.value[val.paneKey].ID as number);
|
||||
};
|
||||
|
||||
const good_list = ref([]);
|
||||
const get_good_list = async (id: number) => {
|
||||
Taro.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
const res = await getGoodList({
|
||||
bid: mer_info.value.bid,
|
||||
BType: mer_info.value.bType,
|
||||
class_id: id,
|
||||
status: 1,
|
||||
state: 1,
|
||||
});
|
||||
good_list.value = res.data.data || [];
|
||||
Taro.hideLoading();
|
||||
};
|
||||
|
||||
const toGoodDetails = (id: number, type: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/goods/goods_detail/index?gid=${id}&type=${type}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.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;
|
||||
img {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// text-align: right;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user