503 lines
21 KiB
Vue
503 lines
21 KiB
Vue
|
<style lang="scss" scoped>
|
||
|
|
//@import "@/assets/demo.scss";
|
||
|
|
|
||
|
|
@mixin line-color {
|
||
|
|
@keyframes gradientFlow {
|
||
|
|
0%, 100% {
|
||
|
|
background-position: 0 50%;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
background-position: 100% 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||
|
|
background-size: 400% 100%;
|
||
|
|
animation: gradientFlow 5s ease infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.phone-screen {
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-family: "xiaoFont", sans-serif;
|
||
|
|
height: v-bind(pxScreenHeight);
|
||
|
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||
|
|
background-size: 750rpx;
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
color: transparent;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-wrap {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
color: white;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-wrap {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.root-container {
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: v-bind(pxWindowHeight);
|
||
|
|
|
||
|
|
.status-wifi-nav {
|
||
|
|
/*状态栏的高度 这里的值不能动*/
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: v-bind(statusHeight);
|
||
|
|
|
||
|
|
:deep(.default-view-slot) {
|
||
|
|
line-height: v-bind(meunHeight);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: v-bind(meunHeight);
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.default-view-slot-left {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.default-view-slot-right {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||
|
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||
|
|
|
||
|
|
.title-imgimage_item {
|
||
|
|
width: calc(v-bind(meunHeight) * 0.7);
|
||
|
|
height: calc(v-bind(meunHeight) * 0.7);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.default-view-slot-right-text {
|
||
|
|
font-weight: 800;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.grit-content {
|
||
|
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
grid-auto-rows: auto 1fr auto;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.scrollTopHeigh {
|
||
|
|
/*在滚动区域内的, 可以自定义的高度*/
|
||
|
|
box-sizing: border-box;
|
||
|
|
//background-color: rgba(255, 255, 255, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scrollViewHeigh {
|
||
|
|
/*滚动页面区域范围*/
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 1rem;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
:deep() {
|
||
|
|
/*button按钮的 阴影样式可以直接使用*/
|
||
|
|
.custom-class-button {
|
||
|
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 10rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10rpx 10rpx;
|
||
|
|
|
||
|
|
.goods-item {
|
||
|
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.6),
|
||
|
|
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||
|
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-image-wrapper {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 320rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
|
||
|
|
:deep(.customImage) {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.customIcon {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-wrap {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-wrap {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.discount-badge {
|
||
|
|
position: absolute;
|
||
|
|
top: 10rpx;
|
||
|
|
left: 10rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
padding: 4rpx 12rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stock-badge {
|
||
|
|
position: absolute;
|
||
|
|
top: 10rpx;
|
||
|
|
right: 10rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
padding: 4rpx 12rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-info {
|
||
|
|
// 商城商品的下半部分
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.brand-tag {
|
||
|
|
width: fit-content;
|
||
|
|
background-color: #e6f7ff;
|
||
|
|
color: #007AFF;
|
||
|
|
font-size: 20rpx;
|
||
|
|
padding: 4rpx 20rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-name {
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
//color: #333;
|
||
|
|
line-height: 1.4;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-desc {
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 1;
|
||
|
|
line-clamp: 1;;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 24rpx;
|
||
|
|
//color: #999;
|
||
|
|
line-height: 1.3;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
|
||
|
|
.spec-item {
|
||
|
|
font-size: 22rpx;
|
||
|
|
//color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-divider {
|
||
|
|
margin: 0 10rpx;
|
||
|
|
//color: #ddd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tags-section {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 8rpx;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
|
||
|
|
.goods-tag {
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #FF6B00;
|
||
|
|
padding: 4rpx 12rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-section {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
|
||
|
|
.current-price {
|
||
|
|
color: #FF4444;
|
||
|
|
font-weight: 600;
|
||
|
|
|
||
|
|
.price-symbol {
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-number {
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.original-price {
|
||
|
|
font-size: 24rpx;
|
||
|
|
//color: #999;
|
||
|
|
text-decoration: line-through;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sales-info {
|
||
|
|
font-size: 22rpx;
|
||
|
|
//color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rating-section {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.rating-text {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #FFB400;
|
||
|
|
margin-left: 8rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.scrollBottomHeigh {
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 1px;
|
||
|
|
@include line-color();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<template>
|
||
|
|
<view class="phone-screen">
|
||
|
|
<wd-config-provider :theme="theme">
|
||
|
|
<view class="root-container">
|
||
|
|
<view class="status-wifi-nav">
|
||
|
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||
|
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||
|
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||
|
|
@homeRight="homeRight">
|
||
|
|
<template v-slot:default>
|
||
|
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||
|
|
<view class="default-view-slot-left"></view>
|
||
|
|
<view class="default-view-slot-right">
|
||
|
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||
|
|
src="https://hudie.xiao.band/search.png" webp/>
|
||
|
|
<view class="default-view-slot-right-text">搜索</view>
|
||
|
|
</view>
|
||
|
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</ChildComScroll>
|
||
|
|
</view>
|
||
|
|
<!--分隔线,上面的是子组件-->
|
||
|
|
|
||
|
|
<!-- 滚动区域开始-->
|
||
|
|
<view class="grit-content">
|
||
|
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||
|
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||
|
|
class="scrollViewHeigh">
|
||
|
|
<view class="page-xiao-page">
|
||
|
|
|
||
|
|
|
||
|
|
<view class="goods-grid">
|
||
|
|
<view v-for="(goods,index) in xiaoMain.six_goods_list_data" :key="index"
|
||
|
|
class="goods-item"
|
||
|
|
@click="选择商品(goods)">
|
||
|
|
<!-- 商品图片 -->
|
||
|
|
<view class="goods-image-wrapper">
|
||
|
|
|
||
|
|
<wd-img custom-class="customImage" custom-image="customIcon" mode="scaleToFill"
|
||
|
|
v-bind:src="goods.goods_商品销售规格?.goods_商品详情图片.主图.at(0)">
|
||
|
|
<template #error>
|
||
|
|
<view class="error-wrap">❌</view>
|
||
|
|
</template>
|
||
|
|
<template #loading>
|
||
|
|
<view class="loading-wrap">
|
||
|
|
<wd-loading :size="20" color="#fff" type="spinner"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</wd-img>
|
||
|
|
<!-- 促销标签 -->
|
||
|
|
<view class="discount-badge">
|
||
|
|
<!-- 省 30%-->
|
||
|
|
</view>
|
||
|
|
<!-- 库存提示 -->
|
||
|
|
<view v-if="true" class="stock-badge">
|
||
|
|
<!-- 仅剩 10 件-->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品信息 -->
|
||
|
|
<view class="goods-info">
|
||
|
|
<!-- 品牌标签 -->
|
||
|
|
<view class="brand-tag">{{ goods.goods_商品品牌 }}</view>
|
||
|
|
|
||
|
|
<!-- 商品名称 -->
|
||
|
|
<text class="goods-name">{{ goods.goods_商品标题 }}</text>
|
||
|
|
|
||
|
|
<!-- 商品描述 -->
|
||
|
|
<text class="goods-desc">{{ goods.goods_商品销售规格?.销售规格 }}</text>
|
||
|
|
|
||
|
|
<!-- 标签 -->
|
||
|
|
<view class="tags-section">
|
||
|
|
<view v-for="(tag, index) in goods.goods_商品标签" :key="index"
|
||
|
|
class="goods-tag">
|
||
|
|
{{ tag }}
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 价格和销量 -->
|
||
|
|
<view class="price-section">
|
||
|
|
<view class="current-price">
|
||
|
|
<text class="price-symbol">¥</text>
|
||
|
|
<text class="price-number">{{
|
||
|
|
(goods.goods_商品销售规格?.会员价 ?? 0) / 100
|
||
|
|
}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view v-if="true" class="original-price">
|
||
|
|
</view>
|
||
|
|
<view class="sales-info">已售 36200</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</scroll-view>
|
||
|
|
<view class="scrollBottomHeigh">
|
||
|
|
<!--底部预留区域-->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!--滚动区域结束-->
|
||
|
|
</view>
|
||
|
|
</wd-config-provider>
|
||
|
|
<wd-toast selector="default-toast"/>
|
||
|
|
<wd-message-box selector="default-message-box"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
|
||
|
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||
|
|
import {ref} from "vue";
|
||
|
|
import {onLoad} from "@dcloudio/uni-app";
|
||
|
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||
|
|
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
|
||
|
|
import type {six商品列表类型, six商品类型} from "@/subPackages/homeSubPages/商城页面目录/商城商品类型";
|
||
|
|
import {useRequest} from "@uni-helper/uni-use";
|
||
|
|
import {商品_查询所有的商品} from "@/hooks/接口API";
|
||
|
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||
|
|
|
||
|
|
let xiaoMain = useMainXiaoStore();
|
||
|
|
defineOptions({options: {styleIsolation: "shared"}});
|
||
|
|
let pxScreenHeight = ref(); // 手机高度
|
||
|
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||
|
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||
|
|
let statusHeight = ref(); // 固定的顶部
|
||
|
|
let meunHeight = ref();//插槽时要用的 高度
|
||
|
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||
|
|
|
||
|
|
const modelValue: GlobelsChildPropsType = {
|
||
|
|
isShowLeft: {
|
||
|
|
showCom: "icon",
|
||
|
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||
|
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 24},
|
||
|
|
|
||
|
|
},
|
||
|
|
isShowRight: {
|
||
|
|
showCom: "icon",
|
||
|
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||
|
|
iconTextRight: {classPrefix: "xiaozizi", name: "jifenshangcheng1", size: 19},
|
||
|
|
},
|
||
|
|
title_text: "商城", navIsShow: "default",
|
||
|
|
};
|
||
|
|
onLoad(async () => {
|
||
|
|
let data = await useRequest<ApiAxiosResponse<six商品列表类型>>(商品_查询所有的商品, {
|
||
|
|
method: "POST", data: {},
|
||
|
|
});
|
||
|
|
xiaoMain.six_goods_list_data = data.data.value?.resData.listData ?? [];
|
||
|
|
await wx.hideShareMenu();
|
||
|
|
wx.offCopyUrl();
|
||
|
|
});
|
||
|
|
const homeLeft = () => {
|
||
|
|
wx.vibrateShort({type: "heavy"});
|
||
|
|
wx.navigateBack({delta: 1}).then().catch(() => {
|
||
|
|
wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const homeRight = () => {
|
||
|
|
wx.vibrateShort({type: "heavy"});
|
||
|
|
uni.switchTab({url: "/pageTabBar/Home/Home"}).then().catch(() => uni.navigateTo({url: ""}));
|
||
|
|
};
|
||
|
|
let defaultSearchChange = async () => {
|
||
|
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||
|
|
};
|
||
|
|
|
||
|
|
async function 选择商品(goods: six商品类型): Promise<void> {
|
||
|
|
xiaoMain.six_good = goods;
|
||
|
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||
|
|
await wx.navigateTo({url: "/subPackages/homeSubPages/商品详情页面/商品详情页面"}).then(() => {
|
||
|
|
}).catch((error) => {
|
||
|
|
console.log("捕获错误❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅", error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|