shang/youdas
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商城

Browse Source
This commit is contained in:
zpc 2025-06-23 01:52:56 +08:00
parent 30bbc09066
commit f4c6b693e0
5 changed files with 364 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
common/server/product.js Normal file
View File

@ -0,0 +1,31 @@
import HttpRequest from "../system/request";
/**
* 获取banner列表
* @returns {Promise} banner列表
*/
export const getBannerList = async () => {
const res = await HttpRequest.get('/get_banner_list');
if (res.status == 1) {
return res.data;
}
return [];
}
/**
* 获取商品列表
* @param {number} pageNo 页码
* @param {number} pageSize 每页条数
* @param {string} searchKeyword 搜索关键词
* @returns {Promise} 商品列表
*/
export const getProductList = async (pageNo, pageSize, searchKeyword) => {
const res = await HttpRequest.get('/get_product_list', {
page: pageNo,
limit: pageSize,
title: searchKeyword
});
if (res.status == 1) {
return res.data;
}
}

3
components/youdas-container/news-list-item.vue
View File

@ -1,7 +1,8 @@
<template>
<view class="content">
<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" show-refresher-update-time
loading-more-no-more-text="我也是有底线的！" v-model="dataList" @query="queryList" :fixed="false">
loading-more-no-more-text="我也是有底线的！" :show-loading-more-when-reload="true" v-model="dataList" @query="queryList" :fixed="false">
<slot name="search"></slot>
<template v-for="(item, index) in dataList">
<view v-if="item.cover_image !== ''" class="view-data" :key="index" @click="toDetails(item.id)">
<view class="title">

154
pages/mall/mall.vue
View File

@ -1,25 +1,28 @@
<template>
<view class="content">
<z-paging-swiper>
<template #top>
<view class="" style="width: 100%; height: 225.19rpx; background-color: white; position: relative;">
<view class="title">
商城
</view>
</view>
</template>
<z-paging ref="paging" show-refresher-update-time loading-more-no-more-text="我也是有底线的！" v-model="dataList"
@query="queryList" :fixed="false" :show-loading-more-when-reload="true">
<!-- 顶部三个商品 -->
<view class="top">
<view v-for="(item, i) in topDataList" :key="i" class="item" @click="goToDetail(item)">
<swiper :display-multiple-items="3" class="top" :duration="500">
<swiper-item v-for="(item, i) in topDataList" :key="i" @click="goToDetail(item)">
<view class="item">
<view class="img">
<image v-if="item.imgUrl" :src="item.imgUrl" mode="aspectFill" class="product-image"></image>
<image v-if="item.image" :src="item.image" mode="aspectFill" class="product-image">
</image>
</view>
<view class="item-info">
<view class="item-name">
{{item.name}}
{{ item.title }}
</view>
<view class="item-bottom">
<view class="item-price">
<text class="price-symbol-small">￥</text>
@ -27,27 +30,28 @@
</view>
<view class="item-count">
<text class="count-text-small">{{item.num}}/1</text>
<text class="count-text-small">{{ item.sales }}/{{ item.stock }}</text>
<image src="/static/ic_box.png" class="box-icon-small" mode="aspectFit"></image>
</view>
</view>
</view>
</view>
</view>
<scroll-view class="view-list" scroll-y="true">
</swiper-item>
</swiper>
<view class="view-list">
<view class="product-item" v-for="(item, i) in dataList" :key="i" @click="goToDetail(item)">
<view class="product-image-container">
<image v-if="item.imgUrl" :src="item.imgUrl" mode="aspectFill" class="product-image"></image>
<image v-if="item.image" :src="item.image" mode="aspectFill" class="product-image">
</image>
</view>
<view class="product-name">
{{item.name}}
{{ item.title }}
</view>
<view class="product-count">
<text class="count-text">{{item.num}}/1</text>
<text class="count-text">{{ item.sales }}/{{ item.stock }}</text>
<image src="/static/ic_box.png" class="box-icon" mode="aspectFit"></image>
</view>
@ -63,92 +67,38 @@
</view>
</scroll-view>
</view>
<template #empty>
<no-data />
</template>
<template #loading>
<loading-data />
</template>
</z-paging>
</z-paging-swiper>
</template>
<script>
export default {
data() {
return {
topDataList: [{
id: '1',
imgUrl: "/static/product1.png",
name: "英雄联盟K/DA系列阿卡丽手办",
num: "1",
price: "69",
stock: 10
}, {
id: '2',
imgUrl: "/static/product2.png",
name: "英雄联盟K/DA系列阿狸手办",
num: "1",
price: "79",
stock: 5
}, {
id: '3',
imgUrl: "/static/product3.png",
name: "英雄联盟K/DA系列伊芙琳手办",
num: "1",
price: "89",
stock: 8
}, ],
dataList: [{
id: '4',
imgUrl: "/static/product4.png",
name: "英雄联盟K/DA系列阿卡丽手办豪华版",
num: "1",
price: "169",
stock: 3
}, {
id: '5',
imgUrl: "/static/product5.png",
name: "英雄联盟K/DA系列阿狸手办豪华版",
num: "1",
price: "179",
stock: 2
}, {
id: '6',
imgUrl: "/static/product6.png",
name: "英雄联盟K/DA系列伊芙琳手办豪华版",
num: "1",
price: "189",
stock: 6
}, {
id: '7',
imgUrl: "/static/product7.png",
name: "英雄联盟K/DA系列卡莎手办",
num: "1",
price: "99",
stock: 15
}, {
id: '8',
imgUrl: "/static/product8.png",
name: "英雄联盟K/DA系列莎拉手办",
num: "1",
price: "99",
stock: 12
}, {
id: '9',
imgUrl: "/static/product9.png",
name: "英雄联盟K/DA系列套装收藏版",
num: "1",
price: "599",
stock: 1
}, ]
}
},
methods: {
<script setup>
import { ref } from 'vue';
const paging = ref(null);
import { getProductList, getBannerList } from '@/common/server/product';
// 响应式数据
const topDataList = ref([
]);
const dataList = ref([]);
// 跳转到商品详情页
goToDetail(item) {
const goToDetail = (item) => {
uni.navigateTo({
url: `/pages/mall/product-detail?id=${item.id}`
});
},
};
// 购买商品
buyProduct(item) {
const buyProduct = (item, event) => {
// 阻止事件冒泡
event.stopPropagation();
@ -166,9 +116,17 @@
title: '已添加到购物车',
icon: 'success'
});
}
}
}
};
const queryList = (pageNo, pageSize) => {
getProductList(pageNo, pageSize, "").then(res => {
dataList.value.concat(res || []);
paging.value.complete(res || false);
});
};
onLoad(async () => {
const bannerList = await getBannerList();
topDataList.value = bannerList;
});
</script>
<style lang="scss">
@ -293,11 +251,7 @@
}
}
.view-list {
width: 688.93rpx;
height: 850rpx;
margin: 0 auto;
}
.product-item {
width: 100%;

6
pages/mall/order-list.vue
View File

@ -1,6 +1,6 @@
<!-- 滑动切换选项卡演示(标准写法) -->
<template>
<page-no-container ref="pageContainer" title="我的订单" :showBack="true">
<PageNoContainer ref="pageContainer" title="我的订单" :showBack="true">
<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
<z-paging-swiper :fixed="false">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
@ -19,7 +19,7 @@
</swiper>
</z-paging-swiper>
</page-no-container>
</PageNoContainer>
</template>
<script setup>
@ -33,7 +33,7 @@ const tabList = ref(['全部', '待发货', '待收货', '评价', '售后']);
onLoad((options) => {
console.log(options);
if (options.type) {
current.value = options.type;
current.value = Number(options.type);
}
});
// tabs通知swiper切换

14
pages/news/news.vue
View File

@ -13,17 +13,19 @@
</template>
<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
<news-list-item @clickItem="onClickItem" :responseCallback="queryList" ref="listItem" :tabIndex="index"
:currentIndex="current">
<template #search>
<view class="search-container">
<view class="search">
<text class="iconfont icon-search" style="margin-right: 10rpx; color: #999;"></text>
<input type="text" v-model="searchKeywords[index]" placeholder="搜索" confirm-type="search"
@confirm="() => onSearch(index)" />
<text class="iconfont icon-close" v-if="searchKeywords[index]" @click="() => clearSearch(index)"
style="margin-left: 10rpx; color: #999;"></text>
<input type="text" v-model="searchKeywords[index]" placeholder="搜索"
confirm-type="search" @confirm="() => onSearch(index)" />
<text class="iconfont icon-close" v-if="searchKeywords[index]"
@click="() => clearSearch(index)" style="margin-left: 10rpx; color: #999;"></text>
</view>
</view>
<news-list-item @clickItem="onClickItem" :responseCallback="queryList" ref="listItem" :tabIndex="index"
:currentIndex="current">
</template>
</news-list-item>
</swiper-item>
</swiper>