yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

商品详情.评价页面.购物车页面.首页轮播图.搜索功能.分类接口

pull/9/head
落日晚风 2023-10-31 17:41:57 +08:00
parent 6a327ac0e7
commit f4c1b30f2e
14 changed files with 496 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
pages/goods/comment/list.vue
View File

@ -1,33 +1,29 @@
<!-- 页面 --> <!-- 页面 -->
<template> <template>
<s-layout title="全部评价"> <s-layout title="全部评价">
<su-tabs <su-tabs :list="state.type" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
:list="state.type"
:scrollable="false"
@change="onTabsChange"
:current="state.currentTab"
></su-tabs>
<view class="ss-m-t-20"> <view class="ss-m-t-20">
<view class="list-item" v-for="item in state.pagination.data" :key="item"> <view class="list-item" v-for="item in state.pagination.data" :key="item">
<comment-item :item="item"></comment-item> <comment-item :item="item"></comment-item>
</view> </view>
</view> </view>
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" /> <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
<uni-load-more <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多', contentdown: '上拉加载更多',
}" }" @tap="loadmore" />
@tap="loadmore"
/>
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import {
import { computed, reactive } from 'vue'; onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import _ from 'lodash'; import _ from 'lodash';
import commentItem from '../components/detail/comment-item.vue'; import commentItem from '../components/detail/comment-item.vue';
@ -48,7 +44,7 @@
last_page: 1, last_page: 1,
}, },
commentId: 0, commentId: 0,
code: 'all', code: 0,
}); });
// 切换选项卡 // 切换选项卡
function onTabsChange(e) { function onTabsChange(e) {
@ -58,20 +54,26 @@
getList(state.commentId, e.code); getList(state.commentId, e.code);
} }
async function getType(id) { async function getType(id) {
const { error, data } = await sheep.$api.goods.getType(id); const {
error,
data
} = await sheep.$api.goods.getType(id);
if (error === 0) { if (error === 0) {
state.type = data; console.log(data)
// state.type = data;
state.type = [{code:0,name:'全部'},{code:1,name:'好评'},{code:2,name:'中评'},{code:3,name:'差评'}];
} }
} }
async function getList(id, code, page = 1, list_rows = 6) { async function getList(id, code=0, page = 1, list_rows = 6) {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
let res = await sheep.$api.goods.comment(id, { let res = await sheep.$api.goods.comment2(id, {
type: code, type: code,
list_rows, pageSize: list_rows,
page, pageNo: page,
}); });
if (res.error === 0) { console.log(res);
let orderList = _.concat(state.pagination.data, res.data.data); if (res.code === 0) {
let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = { state.pagination = {
...res.data, ...res.data,
data: orderList, data: orderList,
@ -104,35 +106,42 @@
.list-item { .list-item {
padding: 32rpx 30rpx 20rpx 20rpx; padding: 32rpx 30rpx 20rpx 20rpx;
background: #fff; background: #fff;
.avatar { .avatar {
width: 52rpx; width: 52rpx;
height: 52rpx; height: 52rpx;
border-radius: 50%; border-radius: 50%;
} }
.nickname { .nickname {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
} }
.create-time { .create-time {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: #c4c4c4; color: #c4c4c4;
} }
.content-title { .content-title {
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 42rpx; line-height: 42rpx;
} }
.content-img { .content-img {
width: 174rpx; width: 174rpx;
height: 174rpx; height: 174rpx;
} }
.cicon-info-o { .cicon-info-o {
font-size: 26rpx; font-size: 26rpx;
color: #c4c4c4; color: #c4c4c4;
} }
.foot-title { .foot-title {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
@ -146,6 +155,7 @@
background: #fff; background: #fff;
border-top: 2rpx solid #eee; border-top: 2rpx solid #eee;
} }
.tab-btn { .tab-btn {
width: 130rpx; width: 130rpx;
height: 62rpx; height: 62rpx;

8
pages/goods/components/detail/comment-item.vue
View File

@ -5,19 +5,19 @@
<image class="avatar" :src="sheep.$url.cdn(item.user_avatar)"></image> <image class="avatar" :src="sheep.$url.cdn(item.user_avatar)"></image>
</view> </view>
<view class="nickname ss-m-r-20"> <view class="nickname ss-m-r-20">
{{ item.user_nickname }} {{ item.userNickname }}
</view> </view>
<view class=""> <view class="">
<uni-rate :readonly="true" v-model="item.level" size="18" /> <uni-rate :readonly="true" v-model="item.scores" size="18" />
</view> </view>
</view> </view>
<view class="content"> <view class="content">
{{ item.content }} {{ item.content }}
</view> </view>
<view class="ss-m-t-24" v-if="item.images?.length"> <view class="ss-m-t-24" v-if="item.picUrls?.length">
<scroll-view class="scroll-box" scroll-x scroll-anchoring> <scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="ss-flex"> <view class="ss-flex">
<view v-for="(item, index) in item.images" :key="item" class="ss-m-r-10"> <view v-for="(item, index) in item.picUrls" :key="item" class="ss-m-r-10">
<su-image class="content-img" isPreview :previewList="state.commentImages" :current="index" :src="item" <su-image class="content-img" isPreview :previewList="state.commentImages" :current="index" :src="item"
:height="120" :width="120" mode="aspectFill"></su-image> :height="120" :width="120" mode="aspectFill"></su-image>
</view> </view>

4
pages/goods/components/detail/detail-comment-card.vue
View File

@ -47,9 +47,9 @@
const { data } = await sheep.$api.goods.comment(id, { const { data } = await sheep.$api.goods.comment(id, {
list_rows: 3, list_rows: 3,
}); });
console.log(data) const {data:datas} = await sheep.$api.goods.comment2(id);
state.commentList = data; state.commentList = data;
state.total = data.total; state.total = datas.total;
} }
onBeforeMount(() => { onBeforeMount(() => {
getComment(props.goodsId); getComment(props.goodsId);

2
pages/goods/index.vue
View File

@ -95,7 +95,7 @@
<!-- 评价 --> <!-- 评价 -->
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" /> <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
<!-- 详情 --> <!-- 详情 -->
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.content" /> <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
<!-- 活动跳转 --> <!-- 活动跳转 -->
<detail-activity-tip <detail-activity-tip

8
pages/goods/list.vue
View File

@ -261,12 +261,12 @@
sort: Sort, sort: Sort,
order: Order, order: Order,
category_id: !keyword ? categoryId : '', category_id: !keyword ? categoryId : '',
list_rows, pageSize:list_rows,
keyword: keyword, keyword: keyword,
page, pageNo:page,
}); });
if (res.error === 0) { if (res.code === 0) {
let couponList = _.concat(state.pagination.data, res.data.data); let couponList = _.concat(state.pagination.data, res.data.list);
state.pagination = { state.pagination = {
...res.data, ...res.data,
data: couponList, data: couponList,

16
pages/index/cart.vue
View File

@ -36,19 +36,19 @@
/> />
</label> </label>
<s-goods-item <s-goods-item
:title="item.goods.title" :title="item.spu.name"
:img="item.sku_price.image || item.goods.image" :img="item.spu.picUrl || item.goods.image"
:price="item.sku_price.price" :price="item.sku.price/100"
:skuText="item.sku_price.goods_sku_text" :skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName"
priceColor="#FF3000" priceColor="#FF3000"
:titleWidth="400" :titleWidth="400"
> >
<template v-if="!state.editMode" v-slot:tool> <template v-if="!state.editMode" v-slot:tool>
<su-number-box <su-number-box
:min="0" :min="0"
:max="item.sku_price.stock" :max="item.sku.stock"
:step="1" :step="1"
v-model="item.goods_num" v-model="item.count"
@change="onNumberChange($event, item)" @change="onNumberChange($event, item)"
></su-number-box> ></su-number-box>
</template> </template>
@ -112,9 +112,9 @@
isAllSelected: computed(() => cart.isAllSelected), isAllSelected: computed(() => cart.isAllSelected),
totalPriceSelected: computed(() => cart.totalPriceSelected), totalPriceSelected: computed(() => cart.totalPriceSelected),
}); });
// 单选选中 // 单选选中
function onSelectSingle(id) { function onSelectSingle(id) {
console.log('单选')
cart.selectSingle(id); cart.selectSingle(id);
} }
// 全选 // 全选
@ -154,7 +154,7 @@
if(cartItem.goods_num === e) return; if(cartItem.goods_num === e) return;
cartItem.goods_num = e; cartItem.goods_num = e;
cart.update({ cart.update({
goods_id: cartItem.goods_id, goods_id: cartItem.id,
goods_num: e, goods_num: e,
goods_sku_price_id: cartItem.goods_sku_price_id, goods_sku_price_id: cartItem.goods_sku_price_id,
}); });

116
pages/index/category.vue
View File

@ -3,67 +3,33 @@
<view class="s-category"> <view class="s-category">
<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]"> <view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]"> <scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
<view <view class="menu-item ss-flex" v-for="(item, index) in state.categoryList?.children" :key="item.id"
class="menu-item ss-flex" :class="[{ 'menu-item-active': index == state.activeMenu }]" @tap="onMenu(index)">
v-for="(item, index) in state.categoryList?.children"
:key="item.id"
:class="[{ 'menu-item-active': index == state.activeMenu }]"
@tap="onMenu(index)"
>
<view class="menu-title ss-line-1"> <view class="menu-title ss-line-1">
{{ item.name }} {{ item.name }}
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view <scroll-view class="goods-list-box" scroll-y :style="[{ height: pageHeight + 'px' }]"
class="goods-list-box" v-if="state.categoryList?.children?.length">
scroll-y <image v-if="state.categoryList.children[state.activeMenu].image" class="banner-img"
:style="[{ height: pageHeight + 'px' }]" :src="sheep.$url.cdn(state.categoryList.children[state.activeMenu].image)" mode="widthFix">
v-if="state.categoryList?.children?.length"
>
<image
v-if="state.categoryList.children[state.activeMenu].image"
class="banner-img"
:src="sheep.$url.cdn(state.categoryList.children[state.activeMenu].image)"
mode="widthFix"
>
</image> </image>
<first-one <first-one v-if="state.categoryList.style === 'first_one'" :data="state.categoryList"
v-if="state.categoryList.style === 'first_one'" :activeMenu="state.activeMenu" :pagination="state.pagination" />
:data="state.categoryList" <first-two v-if="state.categoryList.style === 'first_two'" :data="state.categoryList"
:activeMenu="state.activeMenu" :activeMenu="state.activeMenu" :pagination="state.pagination" />
:pagination="state.pagination" <second-one v-if="state.categoryList.style === 'second_one'" :data="state.categoryList"
/> :activeMenu="state.activeMenu" :pagination="state.pagination" />
<first-two <third-one v-if="state.categoryList.style === 'third_one'" :data="state.categoryList"
v-if="state.categoryList.style === 'first_two'" :activeMenu="state.activeMenu" :pagination="state.pagination" />
:data="state.categoryList" <uni-load-more v-if="
:activeMenu="state.activeMenu"
:pagination="state.pagination"
/>
<second-one
v-if="state.categoryList.style === 'second_one'"
:data="state.categoryList"
:activeMenu="state.activeMenu"
:pagination="state.pagination"
/>
<third-one
v-if="state.categoryList.style === 'third_one'"
:data="state.categoryList"
:activeMenu="state.activeMenu"
:pagination="state.pagination"
/>
<uni-load-more
v-if="
(state.categoryList.style === 'first_one' || (state.categoryList.style === 'first_one' ||
state.categoryList.style === 'first_two') && state.categoryList.style === 'first_two') &&
state.pagination.total > 0 state.pagination.total > 0
" " :status="state.loadStatus" :content-text="{
:status="state.loadStatus"
:content-text="{
contentdown: '点击查看更多', contentdown: '点击查看更多',
}" }" @tap="loadmore" />
@tap="loadmore"
/>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
@ -77,8 +43,14 @@
import firstTwo from './components/first-two.vue'; import firstTwo from './components/first-two.vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import {
import { computed, reactive } from 'vue'; onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import _ from 'lodash'; import _ from 'lodash';
const state = reactive({ const state = reactive({
categoryList: [], categoryList: [],
@ -93,15 +65,25 @@
loadStatus: '', loadStatus: '',
}); });
const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device; const {
screenHeight,
safeAreaInsets,
screenWidth,
safeArea
} = sheep.$platform.device;
const pageHeight = computed(() => safeArea.height - 44 - 50); const pageHeight = computed(() => safeArea.height - 44 - 50);
async function getList(options) { async function getList(options) {
const { error, data } = await sheep.$api.category.list({ const {
code,
data
} = await sheep.$api.category.list({
id: options.id, id: options.id,
}); });
if (error === 0) { if (code === 0) {
state.categoryList = data; state.categoryList = {
children: data
};
} }
} }
@ -114,23 +96,25 @@
total: 1, total: 1,
last_page: 1, last_page: 1,
}; };
getGoodsList(state.categoryList.children[val].id);
} }
// 这段代码本来是在判断里的
getGoodsList(state.categoryList.children[val].id);
}; };
async function getGoodsList(id, page = 1, list_rows = 6) { async function getGoodsList(id, page = 1, list_rows = 6) {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
const res = await sheep.$api.goods.list({ const res = await sheep.$api.goods.list({
category_id: id, categoryId: id,
list_rows, pageSize:list_rows,
page, pageNo:page,
}); });
if (res.error === 0) { if (res.code === 0) {
let couponList = _.concat(state.pagination.data, res.data.data); let couponList = _.concat(state.pagination.data, res.data.list);
state.pagination = { state.pagination = {
...res.data, ...res.data,
data: couponList, data: couponList,
}; };
console.log(state.pagination)
if (state.pagination.current_page < state.pagination.last_page) { if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more'; state.loadStatus = 'more';
} else { } else {
@ -186,11 +170,9 @@
content: ''; content: '';
width: 64rpx; width: 64rpx;
height: 12rpx; height: 12rpx;
background: linear-gradient( background: linear-gradient(90deg,
90deg,
var(--ui-BG-Main-gradient), var(--ui-BG-Main-gradient),
var(--ui-BG-Main-light) var(--ui-BG-Main-light)) !important;
) !important;
position: absolute; position: absolute;
left: -64rpx; left: -64rpx;
bottom: 0; bottom: 0;

36
pages/index/index.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<view v-if="template"> <view v-if="template">
<s-layout <s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
title="首页" :navbarStyle="template.style?.navbar" onShareAppMessage>
navbar="custom"
tabbar="/pages/index/index"
:bgStyle="template.style?.background"
:navbarStyle="template.style?.navbar"
onShareAppMessage
>
<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style"> <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
<s-block-item :type="item.type" :data="item.data" :styles="item.style" /> <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
</s-block> </s-block>
@ -18,15 +12,35 @@
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; import {
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app'; computed
} from 'vue';
import {
onLoad,
onPageScroll,
onPullDownRefresh
} from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import $share from '@/sheep/platform/share'; import $share from '@/sheep/platform/share';
import index2Api from '@/sheep/api/index2';
// 隐藏原生tabBar // 隐藏原生tabBar
uni.hideTabBar(); uni.hideTabBar();
const template = computed(() => sheep.$store('app').template?.home); const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活
(async function() {
let {
data
} = await index2Api.decorate();
template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
return {
src: item.picUrl,
url: item.url,
title: item.name,
type: "image"
}
})
}())
onLoad((options) => { onLoad((options) => {
// #ifdef MP // #ifdef MP

15
sheep/api/cart.js
View File

@ -1,9 +1,10 @@
import request from '@/sheep/request'; import request from '@/sheep/request';
import request2 from '@/sheep/request2';
export default { export default {
list: (data) => list: (data) =>
request({ request2({
url: 'cart', url: 'trade/cart/list',
method: 'GET', method: 'GET',
custom: { custom: {
showLoading: false, showLoading: false,
@ -25,14 +26,14 @@ export default {
}), }),
// 删除购物车 // 删除购物车
delete: (ids) => delete: (ids) =>
request({ request2({
url: 'cart/' + ids, url: 'trade/cart/delete?ids=' + ids,
method: 'DELETE', method: 'DELETE',
}), }),
update: (data) => update: (data) =>
request({ request2({
url: 'cart', url: 'trade/cart/update-count',
method: 'POST', method: 'PUT',
data: { data: {
...data, ...data,
type: 'cover', type: 'cover',

6
sheep/api/category.js
View File

@ -1,9 +1,9 @@
import request from '@/sheep/request'; import request2 from '@/sheep/request2';
export default { export default {
list: (params) => list: (params) =>
request({ request2({
url: 'category', url: 'product/category/list',
method: 'GET', method: 'GET',
params, params,
}), }),

14
sheep/api/goods.js
View File

@ -16,8 +16,8 @@ export default {
// 商品列表 // 商品列表
list: (params) => list: (params) =>
request({ request2({
url: 'goods/goods', url: 'product/spu/page',
method: 'GET', method: 'GET',
params, params,
custom: { custom: {
@ -49,6 +49,16 @@ export default {
showError: false, showError: false,
}, },
}), }),
comment2: (id, params = {pageNo:1,pageSize:10,type:0}) =>
request2({
url: 'product/comment/page?spuId='+id,
method: 'GET',
params,
custom: {
showLoading: false,
showError: false,
},
}),
// 商品评价类型 // 商品评价类型
getType: (id) => getType: (id) =>
request({ request({

9
sheep/api/index2.js Normal file
View File

@ -0,0 +1,9 @@
import request2 from '@/sheep/request2';
export default {
decorate: () =>
request2({
url: 'promotion/decorate/list?page=1',
method: 'GET',
}),
};

4
sheep/request2/index.js
View File

@ -68,7 +68,7 @@ const http = new Request({
*/ */
http.interceptors.request.use( http.interceptors.request.use(
(config) => { (config) => {
console.log(config); // console.log(config);
if (config.custom.auth && !$store('user').isLogin) { if (config.custom.auth && !$store('user').isLogin) {
showAuthModal(); showAuthModal();
return Promise.reject(); return Promise.reject();
@ -110,7 +110,7 @@ http.interceptors.response.use(
} }
response.config.custom.showLoading && closeLoading(); response.config.custom.showLoading && closeLoading();
if (response.data.error !== 0) { if (response.data.code !== 0) {
if (response.config.custom.showError) if (response.config.custom.showError)
uni.showToast({ uni.showToast({
title: response.data.msg || '服务器开小差啦,请稍后再试~', title: response.data.msg || '服务器开小差啦,请稍后再试~',

16
sheep/store/cart.js
View File

@ -15,7 +15,7 @@ const cart = defineStore({
if (!state.selectedIds.length) return price.toFixed(2); if (!state.selectedIds.length) return price.toFixed(2);
state.list.forEach((item) => { state.list.forEach((item) => {
price += state.selectedIds.includes(item.id) price += state.selectedIds.includes(item.id)
? Number(item.sku_price.price) * item.goods_num ? Number(item.sku.price/100) * item.count
: 0; : 0;
}); });
return price.toFixed(2); return price.toFixed(2);
@ -24,9 +24,9 @@ const cart = defineStore({
actions: { actions: {
// 获取购物车列表 // 获取购物车列表
async getList() { async getList() {
const { data, error } = await cartApi.list(); const { data, code } = await cartApi.list();
if (error === 0) { if (code === 0) {
this.list = data; this.list = data.validList;
} }
}, },
// 添加购物车 // 添加购物车
@ -44,8 +44,8 @@ const cart = defineStore({
// 更新购物车 // 更新购物车
async update(goodsInfo) { async update(goodsInfo) {
const { error } = await cartApi.update({ const { error } = await cartApi.update({
goods_id: goodsInfo.goods_id, id: goodsInfo.goods_id,
goods_num: goodsInfo.goods_num, count: goodsInfo.goods_num,
goods_sku_price_id: goodsInfo.goods_sku_price_id, goods_sku_price_id: goodsInfo.goods_sku_price_id,
}); });
if (error === 0) { if (error === 0) {
@ -58,8 +58,8 @@ const cart = defineStore({
if (typeof ids === 'array') { if (typeof ids === 'array') {
ids = ids.join(','); ids = ids.join(',');
} }
const { error } = await cartApi.delete(ids); const { code } = await cartApi.delete(ids);
if (error === 0) { if (code === 0) {
this.selectAll(false); this.selectAll(false);
this.getList(); this.getList();
} }