You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1317 lines
31 KiB
1317 lines
31 KiB
<script setup>
|
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
|
// import moment from "moment";
|
|
import { nextTick, ref } from "vue";
|
|
import customTabBar from "@/components/custom-tab-bar/my-tab-bar.vue";
|
|
import {
|
|
// editDefaultAddressApi,
|
|
// getBroadcastApi,
|
|
getCarouselsApi,
|
|
getMyAreaApi,
|
|
getNoticesApi,
|
|
getProductsApi,
|
|
getProductTypesApi,
|
|
getProductTypesHomeApi,
|
|
getSystemSettingApi,
|
|
// myOrdersApi,
|
|
} from "@/libs/api";
|
|
import useStore from "@/store";
|
|
// import permissionPopup from "@/components/permissionPopup/permissionPopup.vue";
|
|
// import checkUpdate from "@/uni_modules/uni-upgrade-center-app/utils/check-update";
|
|
|
|
const store = useStore();
|
|
/**
|
|
* 顶部安全距离
|
|
*/
|
|
const statusBarHeight = ref(0);
|
|
/**
|
|
* 定位栏高度
|
|
*/
|
|
const locationBarHeight = ref(0);
|
|
/**
|
|
*商品种类
|
|
*/
|
|
const types = ref([]);
|
|
/**
|
|
* 是否显示招聘
|
|
*/
|
|
const isShowRecruitment = ref(false);
|
|
/**
|
|
* 轮播图
|
|
*/
|
|
const banner = ref([]);
|
|
/**
|
|
* 当前轮播图下标
|
|
*/
|
|
const swiperCurrent = ref(0);
|
|
/**
|
|
* 轮播图是否自动轮播
|
|
*/
|
|
const bannerAutoplay = ref(false);
|
|
/**
|
|
* 是否显示轮播图
|
|
*/
|
|
const isShowBanner = ref(false);
|
|
/**
|
|
* 选中地址
|
|
*/
|
|
const selectAddress = ref(null);
|
|
/**
|
|
* 搜索内容
|
|
*/
|
|
const keyValue = ref("");
|
|
/**
|
|
* 公告
|
|
*/
|
|
const notices = ref([]);
|
|
/**
|
|
* 特价、新品专区选中index
|
|
*/
|
|
const activeTab = ref(0);
|
|
/**
|
|
* 特价、新品专区详细
|
|
*/
|
|
const tabList = [{
|
|
title: "特价专区",
|
|
desc: "与正品同品质",
|
|
}, {
|
|
title: "新品专区",
|
|
desc: "近期上架新品",
|
|
}];
|
|
/**
|
|
* 特价商品
|
|
*/
|
|
const products = ref([]);
|
|
/**
|
|
* 新品商品
|
|
*/
|
|
const newGoods = ref([]);
|
|
/**
|
|
* 招聘求职有关信息查询
|
|
*/
|
|
async function getIosShow() {
|
|
const params = { black: "XCXenterCDW", key: "config.enterCDW" };
|
|
const res = await getSystemSettingApi(params);
|
|
// 返回 0 不显示，其他反之
|
|
isShowRecruitment.value = res.code !== "0";
|
|
// if (res.data.code === 0) {
|
|
// isShowRecruitment.value = false;
|
|
// menus.value = menus.value.filter(item => item.name !== "走进菜大王" || item.name !== "招聘求职");
|
|
// }
|
|
// else {
|
|
// isShowRecruitment.value = true;
|
|
// }
|
|
}
|
|
/**
|
|
* 获取轮播图
|
|
*/
|
|
async function getBanner() {
|
|
banner.value = [];
|
|
const res = await getCarouselsApi();
|
|
swiperCurrent.value = 0;
|
|
bannerAutoplay.value = true;
|
|
banner.value = res.data;
|
|
isShowBanner.value = true;
|
|
}
|
|
/**
|
|
* 获取产品分类
|
|
*/
|
|
async function getProductCategory() {
|
|
const res = await getProductTypesHomeApi();
|
|
types.value = res.data;
|
|
}
|
|
/**
|
|
* 获取公告列表
|
|
*/
|
|
async function getNoticesApiList() {
|
|
const res = await getNoticesApi();
|
|
notices.value = res.data;
|
|
}
|
|
/**
|
|
* 获取特价新品商品种类
|
|
*/
|
|
async function getProductTypes() {
|
|
const res = await getProductTypesApi();
|
|
if (res.code !== "0") {
|
|
return;
|
|
}
|
|
const eachsId = res.data.reduce((acc, cur) => {
|
|
if (cur.name === "新品" || cur.name === "特价专区") {
|
|
acc.push(cur);
|
|
}
|
|
return acc;
|
|
}, []);
|
|
for await (const each of eachsId) {
|
|
// 不是新品和特价专区的都跳过
|
|
if (!(each.name === "新品" || each.name === "特价专区")) {
|
|
return;
|
|
}
|
|
const res = await getProductTypesApi({ parentId: each.id });
|
|
if (res.code !== "0")
|
|
return;
|
|
const typeId = res.data[0].id;
|
|
const params = {
|
|
typeId,
|
|
promotion: false,
|
|
orderByField: "name",
|
|
[each.name === "特价专区" ? "asc" : "ase"]: true,
|
|
search: "",
|
|
pageNum: 1,
|
|
pageSize: 5,
|
|
warehouseid: uni.getStorageSync("warehousId"),
|
|
};
|
|
const res2 = await getProductsApi(params);
|
|
if (res2.code !== "0")
|
|
return;
|
|
|
|
// 初始化状态
|
|
res2.data.forEach((item) => {
|
|
// 判断是否显示“选规格”按钮
|
|
item.showChoose = (item.specs.length > 1);
|
|
// 从映射表中获取数量（不存在则设为0）
|
|
item.specs.forEach((specsItem) => {
|
|
specsItem.sum = 0;
|
|
});
|
|
});
|
|
|
|
if (each.name === "新品") {
|
|
newGoods.value = res2.data;
|
|
}
|
|
else {
|
|
products.value = res2.data;
|
|
}
|
|
}
|
|
}
|
|
function getDFKDataLength() {
|
|
// const nowDay = moment().format("YYYY-MM-DD");
|
|
// myOrdersApi({
|
|
// orderNo: "",
|
|
// status: "DFK",
|
|
// pageNum: 1,
|
|
// pageSize: 10,
|
|
// addrId: "",
|
|
// });
|
|
}
|
|
/**
|
|
* 获取仓库列表数据
|
|
* 随后获取特价新品
|
|
*/
|
|
async function getMyArea() {
|
|
const postData = {
|
|
warehouseid: "",
|
|
isEnabled: 1,
|
|
};
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
const res = await getMyAreaApi(postData);
|
|
if (res.code !== "0") {
|
|
uni.hideLoading();
|
|
return;
|
|
}
|
|
const list = res.data.list.sort((pre, cur) => Number(cur) - Number(pre));
|
|
// each 就是找到有isLastDefaultAddr，没有就那第一个值
|
|
const each = list.find(each => each.isLastDefaultAddr) || list[0];
|
|
uni.setStorageSync("warehousId", each.warehousId);
|
|
uni.setStorageSync("addressId", each.addrId);
|
|
selectAddress.value = list[0];
|
|
|
|
// getBroadcast();
|
|
getDFKDataLength();
|
|
if (!res.data.login) {
|
|
// FIXME: hiddenLogin.value = false;
|
|
}
|
|
else {
|
|
// TODO: getDFKDataLength
|
|
// getDFKDataLength();
|
|
}
|
|
|
|
// TODO: await getProductTypes();
|
|
await getProductTypes();
|
|
uni.hideLoading();
|
|
|
|
// FIXME: selectData.value = list
|
|
}
|
|
|
|
/**
|
|
* 获取广播
|
|
*/
|
|
// async function getBroadcast() {
|
|
// const res = await getBroadcastApi({
|
|
// warehouseId: uni.getStorageSync("warehousId"),
|
|
// });
|
|
// if (res.code !== "0") {
|
|
// return;
|
|
// }
|
|
// const item = res.data.findLast(item => item.status == 1);
|
|
// if (JSON.stringify(res.data) != "{}") {
|
|
// const nowTime = moment().format("YYYY-MM-DD HH:mm:ss");
|
|
// }
|
|
// // TODO: 后续修改
|
|
// // broadcastText.value = item;
|
|
// }
|
|
/**
|
|
* 查看公告列表
|
|
*/
|
|
async function onNotice() {
|
|
uni.showToast({
|
|
title: "待完善",
|
|
icon: "none",
|
|
});
|
|
}
|
|
/**
|
|
* 切换特价、新品事件
|
|
*/
|
|
function onChangeTab(index) {
|
|
activeTab.value = index;
|
|
}
|
|
/**
|
|
* 轮播图切换
|
|
*/
|
|
function changeSwiper(e) {
|
|
const index = e.detail.current;
|
|
swiperCurrent.value = index;
|
|
}
|
|
/**
|
|
* 选择地址
|
|
*/
|
|
function chooseAddress() {
|
|
uni.showToast({
|
|
title: "待完善",
|
|
icon: "none",
|
|
});
|
|
}
|
|
/**
|
|
* 分享微信
|
|
*/
|
|
function shareWX() { }
|
|
/**
|
|
* 点击更多商品规格
|
|
*/
|
|
function onMore() {
|
|
uni.showToast({
|
|
title: "待完善",
|
|
icon: "none",
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 打开附近企业
|
|
*/
|
|
function onFriends() {
|
|
uni.showToast({
|
|
title: "待完善",
|
|
icon: "none",
|
|
});
|
|
}
|
|
/**
|
|
* 打开廉洁协议
|
|
*/
|
|
function onHonest() {
|
|
uni.navigateTo({
|
|
url: "/pages/home/honest",
|
|
});
|
|
}
|
|
/**
|
|
* 打开走进菜大王
|
|
*/
|
|
function onEnterPage() {
|
|
uni.showToast({
|
|
title: "待完善",
|
|
icon: "none",
|
|
});
|
|
}
|
|
/**
|
|
* 打开招聘求职
|
|
*/
|
|
function onJoin() {
|
|
uni.showToast({
|
|
title: "敬请期待，业务正在开发中",
|
|
icon: "none",
|
|
});
|
|
}
|
|
|
|
/**
|
|
* -1 到购物车
|
|
* @param {{specs: {sum: number}[]}} item
|
|
*/
|
|
function onMinusGoods(item, index = 0) {
|
|
const cur = item.specs[index];
|
|
if (cur.stock === 0) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "库存数量为0无法添加",
|
|
});
|
|
return;
|
|
}
|
|
if (cur.sum === 0) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "库存数量为0",
|
|
});
|
|
return;
|
|
}
|
|
item.specs[index].sum -= 1;
|
|
}
|
|
|
|
/**
|
|
* +1 到购物车
|
|
* @param {{specs: {sum: number}[]}} item
|
|
*/
|
|
function onAddGoods(item, index = 0) {
|
|
const cur = item.specs[index];
|
|
|
|
if (item.specs[index].sum > cur.stock) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "采购数量不能大于库存数量",
|
|
});
|
|
return;
|
|
}
|
|
if (cur.stock === 0) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "库存数量为0无法添加",
|
|
});
|
|
return;
|
|
}
|
|
item.specs[index].sum += 1;
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {InputEvent} e
|
|
* @param {{specs: {sum: number}[]}} item
|
|
*/
|
|
function onChangeGoods(e, item, index) {
|
|
const value = e.detail.value * 1;
|
|
if (Number.isNaN(value))
|
|
return;
|
|
if (value >= item.specs[index].stock) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "采购数量不能大于库存数量",
|
|
});
|
|
// item.specs[0].sum = item.specs[0].stock;
|
|
return;
|
|
}
|
|
item.specs[index].sum = value;
|
|
}
|
|
|
|
onLoad(() => {
|
|
// #ifdef APP
|
|
uni.hideTabBar();
|
|
// #endif
|
|
|
|
getIosShow();
|
|
});
|
|
|
|
onShow(() => {
|
|
store.fontScale = uni.getStorageSync("fontScale") || 1;
|
|
// uni.hideTabBar();
|
|
getBanner();
|
|
getProductCategory();
|
|
getNoticesApiList();
|
|
getMyArea();
|
|
statusBarHeight.value = uni.getWindowInfo().statusBarHeight;
|
|
|
|
nextTick(() => {
|
|
// #ifdef MP-WEIXIN
|
|
|
|
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
|
|
const menuButton = uni.getMenuButtonBoundingClientRect();
|
|
statusBarHeight.value = menuButton.top;
|
|
|
|
locationBarHeight.value = menuButton.height;
|
|
// 总体高度 = 状态栏高度 + 导航栏高度
|
|
// navHeight.value = locationBarHeight.value + statusBarHeight.value;
|
|
|
|
// #endif
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
class="main"
|
|
:style="{
|
|
'paddingBottom': statusBarHeight ? `${statusBarHeight + 45}px` : '89px',
|
|
'--font-scale': store.fontScale,
|
|
}"
|
|
>
|
|
<view
|
|
class="header-box"
|
|
:style="{
|
|
background:
|
|
`linear-gradient(180deg,
|
|
${banner[swiperCurrent]?.rgbStart ?? '#06CA64'},
|
|
${banner[swiperCurrent]?.rgbEnd ?? '#06CA64'})`,
|
|
}"
|
|
>
|
|
<!-- 搜索框和定位、分享 -->
|
|
<view
|
|
class="location-share"
|
|
:style="{
|
|
paddingTop: `${statusBarHeight}px`,
|
|
}"
|
|
>
|
|
<!-- #ifdef APP-PLUS|H5 -->
|
|
<view :style="{ width: '100vw', height: '30rpx' }" />
|
|
<!-- #endif -->
|
|
<view
|
|
class="location-box"
|
|
:style="{ height: locationBarHeight ? `${locationBarHeight}px` : 'auto' }"
|
|
>
|
|
<!-- left -->
|
|
<view class="left" @click="chooseAddress">
|
|
<!-- TODO: 地址图标字体 -->
|
|
<text class="iconfont icon-positioning" />
|
|
<text class="address">
|
|
{{ selectAddress?.street ?? '待完善' }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- right -->
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="" @click="shareWX">
|
|
<!-- TODO: 分享图标字体 -->
|
|
<text class="iconfont icon-share" />
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="search-input">
|
|
<text class="iconfont icon-search1 " />
|
|
<!-- <uv-icon name="search" size="38rpx" color="white" /> -->
|
|
<input
|
|
v-model="keyValue"
|
|
class="input"
|
|
shape="circle"
|
|
color="white"
|
|
>
|
|
<text class="iconfont icon-yuyin" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 轮播图 -->
|
|
<view class="carousel-box">
|
|
<swiper
|
|
v-if="banner.length !== 0 && isShowBanner"
|
|
:indicator-dots="false"
|
|
:autoplay="bannerAutoplay"
|
|
:current="swiperCurrent"
|
|
:interval="3000"
|
|
previous-margin="66rpx"
|
|
next-margin="66rpx"
|
|
circular
|
|
class="h-full w-full"
|
|
@change="changeSwiper"
|
|
>
|
|
<swiper-item v-for="(item, index) in banner" :key="index" class="swiper-item">
|
|
<image
|
|
:style="{ transform: `scale(${swiperCurrent === index ? 1 : 0.9})` }"
|
|
class="image"
|
|
:src="item.url"
|
|
mode="widthFix"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 金刚区 -->
|
|
<view class="food-type-box">
|
|
<template v-for="(item, index) in types" :key="index">
|
|
<view v-if="item.name !== '新品'" class="type-list" @click="onMore">
|
|
<image class="icon" :src="item.imageUrl" mode="scaleToFill" />
|
|
<text class="name">
|
|
{{ item.name }}
|
|
</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 公告区 -->
|
|
<view class="newNotice-box">
|
|
<image class="bg" mode="" src="/static/home/notice_bg.png" />
|
|
<image class="icon" mode="" src="/static/home/notice_icon.png" />
|
|
<swiper class="swiper" autoplay interval="2000" vertical @click="onNotice">
|
|
<swiper-item v-for="(item, index) in notices" :key="index" class="swiper-item">
|
|
<text class="text">
|
|
{{ item }}
|
|
</text>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 功能区 -->
|
|
<view class="functional-box">
|
|
<view class="left" @click="onFriends">
|
|
<image class="img" src="/static/home/functional1.png" />
|
|
<view class="text-box">
|
|
<text class="first">
|
|
谁在用菜大王
|
|
</text>
|
|
<text class="second">
|
|
查看附近企业
|
|
</text>
|
|
<view class="line" />
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="top" @click="onHonest">
|
|
<image class="img" src="/static/home/functional2.png" />
|
|
<view class="text-box">
|
|
<text class="first">
|
|
廉洁协议
|
|
</text>
|
|
<text class="second">
|
|
价格透明 拒绝回扣
|
|
</text>
|
|
<view class="line" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="under">
|
|
<view class="one" @click="onEnterPage">
|
|
<image class="img" src="/static/home/functional3.png" />
|
|
<view class="text-box">
|
|
<text class="first">
|
|
走进菜大王
|
|
</text>
|
|
<view class="line" />
|
|
</view>
|
|
</view>
|
|
<view class="two" @click="onJoin">
|
|
<image class="img" src="/static/home/functional4.png" />
|
|
<view class="text-box">
|
|
<text v-if="isShowRecruitment" class="first">
|
|
招聘求职
|
|
</text>
|
|
<view v-if="isShowRecruitment" class="line" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 特价、新品专区 -->
|
|
<view class="product-nav-box">
|
|
<view
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
class="item"
|
|
@click="() => onChangeTab(index)"
|
|
>
|
|
<view v-show="index === activeTab" class="rotundity" />
|
|
<text class="title" :class="[index === activeTab ? 'title-active' : '']">
|
|
{{ item.title }}
|
|
</text>
|
|
<text class="desc" :class="[index === activeTab ? 'desc-active' : '']">
|
|
{{ item.desc }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view class="goods-list-box">
|
|
<view
|
|
v-for="(item, index) in (activeTab === 0 ? products : newGoods)"
|
|
:key="index"
|
|
class="item"
|
|
>
|
|
<view class="goods-top">
|
|
<view class="left">
|
|
<image class="img" :src="item.imageUrl" />
|
|
</view>
|
|
<view class="right">
|
|
<view class="name">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="inventory">
|
|
{{ item.specs[0].stock === -1 ? '' : `库存：${item.specs[0].stock}` }}
|
|
</view>
|
|
<view class="info">
|
|
<view class="price-box">
|
|
<view class="price">
|
|
<text>￥</text>{{ item.specs[0].price }}
|
|
</view>
|
|
<text v-if="item.specs[0].chuxiao" class="original">
|
|
正价:{{ item.specs[0].oldPrice }}/{{ item.specs[0].unit }}
|
|
</text>
|
|
<text v-else class="no-original">
|
|
/{{ item.specs[0].unit }}
|
|
</text>
|
|
</view>
|
|
<view v-if="!item.showChoose" class="choose-box">
|
|
<block v-if="item.specs[0].sum !== 0">
|
|
<view class="line-one" />
|
|
<view class="line-two" />
|
|
<view class="minus" @click="() => onMinusGoods(item)">
|
|
<image class="icon" src="/static/home/minus.png" mode="" />
|
|
</view>
|
|
<input
|
|
:value="item.specs[0].sum"
|
|
class="input"
|
|
type="number"
|
|
@input="e => onChangeGoods(e, item)"
|
|
>
|
|
</block>
|
|
<view class="add" @click="() => onAddGoods(item)">
|
|
<image class="icon" src="/static/home/add.png" mode="" />
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="item.showChoose"
|
|
class="specifications"
|
|
@click="item.showChild = !item.showChild"
|
|
>
|
|
{{ item.showChild ? '收起' : '选规格' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.showChild" class="goods-under">
|
|
<view
|
|
v-for="(specsItem, specsIndex) in item.specs"
|
|
:key="specsIndex"
|
|
class="goods-under-list"
|
|
>
|
|
<view class="price-box">
|
|
<view class="price">
|
|
<text>￥</text>{{ specsItem.price }}
|
|
</view>
|
|
<text v-if="item.specs[0].chuxiao" class="original">
|
|
/{{ specsItem.unit }}
|
|
</text>
|
|
<text v-else class="no-original">
|
|
/{{ item.specs[0].unit }}
|
|
</text>
|
|
</view>
|
|
<view class="choose-box">
|
|
<block v-if="specsItem.sum !== 0 || specsItem.sum !== ''">
|
|
<view class="line-one" />
|
|
<view class="line-two" />
|
|
<view class="minus" @click="() => onMinusGoods(item, specsIndex)">
|
|
<image class="icon" src="/static/home/minus.png" mode="" />
|
|
</view>
|
|
<input
|
|
:value="specsItem.sum"
|
|
class="input"
|
|
type="number"
|
|
@input="e => onChangeGoods(e, item, specsItem)"
|
|
>
|
|
</block>
|
|
<view class="add" @click="() => onAddGoods(item, specsIndex)">
|
|
<image class="icon" src="/static/home/add.png" mode="" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<customTabBar tab-index="0" />
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// @import '../../uni.scss';
|
|
|
|
.header-box {
|
|
// position: fixed;
|
|
// transition-all duration-300 pb-[15rpx]
|
|
// padding-bottom: 15rpx;
|
|
transition-duration: 300ms;
|
|
width: 100%;
|
|
.location-share {
|
|
position: relative;
|
|
}
|
|
.location-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 30rpx;
|
|
left:0;
|
|
right:0;
|
|
// padding: 0 29rpx;
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
.address {
|
|
font-size: $text-base;
|
|
color: #fefefe;
|
|
}
|
|
}
|
|
}
|
|
.search-input {
|
|
margin: 38rpx 20rpx 0 20rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
height: 64rpx;
|
|
border: 1px solid #fff;
|
|
border-radius: 32rpx;
|
|
background-color: rgba($color: #fff, $alpha: 0.1);
|
|
padding: 0 38rpx;
|
|
.input {
|
|
width: 100%;
|
|
color: #fff;
|
|
margin: 0 15rpx;
|
|
}
|
|
|
|
}
|
|
.carousel-box {
|
|
// display: none;
|
|
margin-top: 33rpx;
|
|
height: 306rpx;
|
|
width: 100%;
|
|
.swiper-item {
|
|
box-sizing: border-box;
|
|
.image {
|
|
border-radius: 28rpx;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: .3s all;
|
|
transform: scale(.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.food-type-box {
|
|
margin: 5rpx 20rpx 0 20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.type-list {
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 26rpx;
|
|
&:nth-child(5n) {
|
|
margin-right: 0rpx;
|
|
}
|
|
.icon {
|
|
width: 97rpx;
|
|
height: 97rpx;
|
|
}
|
|
.name {
|
|
font-size: $text-base;
|
|
// font-size: 25rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.newNotice-box {
|
|
margin: 30rpx 17rpx 0 17rpx;
|
|
height: 87rpx;
|
|
position: relative;
|
|
.bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 70rpx;
|
|
height: 74rpx;
|
|
}
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: linear-gradient(180deg,#fdf6f0,#fdf7f2);
|
|
.swiper-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 15rpx;
|
|
.text {
|
|
font-size: $text-base;
|
|
font-weight: bold;
|
|
color: #B4561B;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-left: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.functional-box {
|
|
margin: 30rpx 20rpx 0 20rpx;
|
|
display: flex;
|
|
.left {
|
|
width: 278rpx;
|
|
height: 264rpx;
|
|
position: relative;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.text-box {
|
|
position: absolute;
|
|
top: 28rpx;
|
|
left: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.first {
|
|
font-weight: 400;
|
|
font-size: $text-lg;
|
|
color: #FFFFFF;
|
|
text-shadow: 1px 2px 3px rgba(46, 77, 30, 0.15);
|
|
}
|
|
.second {
|
|
font-weight: 400;
|
|
font-size: $text-xs;
|
|
// font-size: 60rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.line {
|
|
width: 31rpx;
|
|
height: 3rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 11rpx;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 14rpx;
|
|
flex: 1;
|
|
.top {
|
|
width: 100%;
|
|
height: 125rpx;
|
|
position: relative;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.text-box {
|
|
position: absolute;
|
|
top: 25rpx;
|
|
left: 29rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.first {
|
|
font-weight: 400;
|
|
font-size: $text-lg;
|
|
// font-size: 999rpx;
|
|
color: #FFFFFF;
|
|
text-shadow: 1px 2px 3px rgba(77, 41, 18, 0.15);
|
|
}
|
|
.second {
|
|
font-weight: 400;
|
|
font-size: $text-xs;
|
|
color: #FFFFFF;
|
|
}
|
|
.line {
|
|
width: 31rpx;
|
|
height: 3rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 11rpx;
|
|
}
|
|
}
|
|
}
|
|
.under {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 14rpx;
|
|
.one {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 125rpx;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.text-box {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
left: 30rpx;
|
|
.first {
|
|
font-size: $text-lg;
|
|
color: #FFFFFF;
|
|
text-shadow: 1px 2px 3px rgba(77, 55, 25, 0.15);
|
|
}
|
|
.line {
|
|
width: 31rpx;
|
|
height: 3rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.two {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 125rpx;
|
|
margin-left: 14rpx;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.text-box {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
left: 30rpx;
|
|
.first {
|
|
font-size: $text-lg;
|
|
color: #FFFFFF;
|
|
text-shadow: 1px 2px 3px rgba(77, 55, 25, 0.15);
|
|
}
|
|
.line {
|
|
width: 31rpx;
|
|
height: 3rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.product-nav-box {
|
|
margin: 58rpx 40rpx 0 40rpx;
|
|
display: flex;
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 44rpx;
|
|
position: relative;
|
|
.rotundity {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
background: linear-gradient(180deg, #06CA64, #fff);
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
right: -8rpx;
|
|
z-index: -1;
|
|
}
|
|
.title {
|
|
font-size: 33rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
transition: .3s all;
|
|
}
|
|
.title-active {
|
|
color: #06CA64;
|
|
}
|
|
.desc {
|
|
font-size: 21rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin-top: 13rpx;
|
|
padding: 7rpx 15rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 24rpx;
|
|
transition: .3s all;
|
|
}
|
|
.desc-active {
|
|
background: rgba(6, 202, 100, 0.2);
|
|
color: #06CA64;
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 15rpx solid transparent;
|
|
border-right: 15rpx solid transparent;
|
|
border-top: 20rpx solid rgba(6, 202, 100, 0.2);
|
|
/* 上边框（颜色） */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-list-box {
|
|
margin: 20rpx 19rpx 0 19rpx;
|
|
padding-bottom: 30rpx;
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1px solid #E4E6E3;
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
.goods-top {
|
|
display: flex;
|
|
.left {
|
|
width: 194rpx;
|
|
height: 194rpx;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.right {
|
|
margin-left: 28rpx;
|
|
flex: 1;
|
|
.name {
|
|
font-size: $text-lg;
|
|
// font-size: 29rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-top: 26rpx;
|
|
}
|
|
.inventory {
|
|
// font-size: $text-sm;
|
|
font-size: $text-sm;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
}
|
|
.info {
|
|
margin-top: 32rpx;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
.price-box {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
.price {
|
|
font-weight: bold;
|
|
// font-size: $text-5xl;
|
|
font-size: $text-2xl;
|
|
color: #FF261F;
|
|
line-height: 1;
|
|
text {
|
|
font-size: $text-lg;
|
|
}
|
|
}
|
|
.original {
|
|
text-decoration-line: line-through;
|
|
// font-size: $text-sm;
|
|
font-size: $text-sm;
|
|
color: #959595;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.no-original {
|
|
// font-size: $text-sm;
|
|
font-size: $text-sm;
|
|
color: #959595;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.specifications {
|
|
font-size: $text-lg;
|
|
color: #FFFFFF;
|
|
width: 125rpx;
|
|
height: 58rpx;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
background-color: #06CA64;
|
|
line-height: 58rpx;
|
|
}
|
|
}
|
|
.choose-box {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.line-one {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 88%;
|
|
height: 1px;
|
|
background-color: #D6D6D6;
|
|
z-index: -1;
|
|
}
|
|
.line-two {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 88%;
|
|
height: 1px;
|
|
background-color: #D6D6D6;
|
|
z-index: -1;
|
|
}
|
|
.add {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
background: #06CA64;
|
|
border-radius: 21rpx 0rpx 21rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
.minus {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
background: #06CA64;
|
|
border-radius: 21rpx 0rpx 21rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 4rpx;
|
|
}
|
|
}
|
|
.input {
|
|
width: 67rpx;
|
|
height: 58rpx !important;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
font-size: $text-base;
|
|
color: #333333;
|
|
margin: 0 10rpx;
|
|
// border: none;
|
|
// padding: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goods-under {
|
|
margin-top: 53rpx;
|
|
.goods-under-list {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
&:last-child {
|
|
margin-bottom: 0rpx;
|
|
}
|
|
.price-box {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
.price {
|
|
font-weight: bold;
|
|
// font-size: $text-5xl;
|
|
font-size: $text-2xl;
|
|
color: #FF261F;
|
|
line-height: 1;
|
|
}
|
|
.original {
|
|
// font-size: $text-sm;
|
|
font-size: $text-sm;
|
|
color: #959595;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.no-original {
|
|
font-size: $text-sm;
|
|
// font-size: $text-sm;
|
|
color: #959595;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.choose-box {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.line-one {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 88%;
|
|
height: 1px;
|
|
background-color: #D6D6D6;
|
|
z-index: -1;
|
|
}
|
|
.line-two {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 88%;
|
|
height: 1px;
|
|
background-color: #D6D6D6;
|
|
z-index: -1;
|
|
}
|
|
.minus {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
background: #06CA64;
|
|
border-radius: 21rpx 0rpx 21rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 4rpx;
|
|
}
|
|
}
|
|
.input {
|
|
width: 67rpx;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
// font-size: 29rpx;
|
|
font-size: $text-base;
|
|
color: #333333;
|
|
margin: 0 10rpx;
|
|
}
|
|
.add {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
background: #06CA64;
|
|
border-radius: 21rpx 0rpx 21rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.icon-search1 {
|
|
font-size: 34rpx;
|
|
color: white;
|
|
}
|
|
.icon-yuyin {
|
|
font-size: 34rpx;
|
|
color: white;
|
|
}
|
|
.icon-positioning {
|
|
font-size: 40rpx;
|
|
color: white;
|
|
}
|
|
.icon-share {
|
|
font-size: 34rpx;
|
|
color: white;
|
|
}
|
|
:deep(.uni-tabbar-border) {
|
|
background-color: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
</style>
|