Waiting/suke-mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品详情

Browse Source
This commit is contained in:
Waiting
2024-03-10 15:40:26 +08:00
parent 107783062b
commit 00013cb46c
34 changed files with 2244 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/mall/index.vue
View File

@@ -12,25 +12,25 @@
<view v-for='(item,index) in categoryList' :key='index' class='category-item'
@click.stop='changeCategory(index)'
:class="{'category-item-active': index === categorySelectedIndex}">
<text>{{ item }}</text>
<text>{{ item.typeName }}</text>
</view>
</scroll-view>
<scroll-view class='goods-list' :scroll-y='true' type='custom'>
<grid-view type='masonry' :cross-axis-count='2'>
<view v-for='(item, index) in goodsList' :key='index' class='goods-item'
@click.stop='goPath(`/pages/mall/subs/goods/goods-detail?goodsId=${item.id}`)'>
<image class='goods-image' :src='item.goodsImage' />
@click.stop='goPath(`/pages/mall/subs/goods/goods-detail?goodsId=${item.goodsId}`)'>
<image class='goods-image' :src='item.images' />
<text class='goods-name'>{{ item.goodsName }}</text>
<text class='goods-price'>¥{{ item.goodsPrice }}</text>
<image class='add-image' :src=' assetsUrl("ic_add_goods.png")' />
<text class='goods-price'>¥{{ item.price }}</text>
<image class='add-image' :src='assetsUrl("ic_add_goods.png")' />
</view>
</grid-view>
</scroll-view>
</view>
<view class='shopping-cart'>
<image :src=' assetsUrl("ic_shopping_cart.png")' />
<image :src='assetsUrl("ic_shopping_cart.png")' />
<text>10</text>
</view>
</view>
@@ -39,53 +39,36 @@
<script setup lang='ts'>
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
import { getCategoryList } from '@/api/goods';
import { getCategoryList, getGoodsList } from '@/api/goods';
import { CategoryBean, GoodsBean } from '@/api/goods/types';
const categoryList = ref<string[]>(['女装', '男装', '鞋包配饰', '母婴', '美妆个护', '运动户外', '户外运动', '户外运动']);
const categoryList = ref<CategoryBean[]>([]);
const categorySelectedIndex = ref<number>(0);
const goodsList = ref<GoodsBean[]>([]);
const goodsList = ref<any[]>([
{
goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
goodsImage: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
goodsPrice: 90
},
{
goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
goodsPrice: 100
}, {
goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
goodsPrice: 95
}, {
goodsName: '女童夏装套装洋气装短袖阔腿裤女童夏装套装洋气装短袖阔腿裤子',
goodsImage: 'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg',
goodsPrice: 93
},
{
goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
goodsPrice: 89
}, {
goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
goodsPrice: 108
}
]);
const companyId = '1140269023306428417';
onLoad(() => {
fetchCategoryList();
});
const fetchCategoryList = () => {
getCategoryList().then(res => {
});
const fetchCategoryList = async () => {
categoryList.value = await getCategoryList(companyId);
await changeCategory(0);
};
const changeCategory = (index: number) => {
const changeCategory = async (index: number) => {
categorySelectedIndex.value = index;
const data = await getGoodsList({
pageNum: 1,
pageSize: 2,
bean: {
companyId: companyId,
keyword: '',
typeIds: [categoryList.value[index].typeId]
}
});
goodsList.value = data.rows;
};
</script>

215
src/pages/mall/subs/components/sku-dialog.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
<view class='content'>
<view class='c-flex-row' style='align-items: flex-start'>
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
<view class='c-flex-column' style='flex: 1'>
<text class='goods-name'>女童夏装套装洋气装短袖阔…</text>
<text class='goods-price'>29.90</text>
</view>
<image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
</view>
<view class='sku-view c-flex-column'>
<view class='sku-title'>颜色</view>
<view class='sku-color-list c-flex-row'>
<view class='sku-item' :class='{"sku-item-active":currentColorIndex==index,"sku-item-disabled":index==3}'
v-for='(item, index) in skuColorList' :key='index'
@click='colorChange(index)'>
<text>{{ item }}</text>
</view>
</view>
<view class='sku-title' style='margin-top: 43rpx'>尺码</view>
<view class='sku-color-list c-flex-row'>
<view class='sku-item' :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":index==3}'
v-for='(item, index) in skuSizeList' :key='index'
@click='sizeChange(index)'>
<text>{{ item }}</text>
</view>
</view>
<view class='c-flex-row' style='margin-top: 52rpx'>
<text class='sku-title'>购买数量</text>
<view class='count-change-view c-flex-row'>
<view class='count-image' @click.stop='countChange(false)'>
<image :src='assetsUrl("ic_reduce.png")' />
</view>
<text>{{ goodsCount }}</text>
<view class='count-image' @click.stop='countChange(true)'>
<image :src='assetsUrl("ic_plus.png")' />
</view>
</view>
</view>
<button class='primary-button' @click='confirm'>确定</button>
</view>
</view>
</uni-popup>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const popupRef = ref();
const skuColorList = ref(['黑色', '白色']);
const currentColorIndex = ref(0);
const skuSizeList = ref(['120cm', '130cm', '140cm', '150cm', '160cm', '170cm']);
const currentSizeIndex = ref(0);
const goodsCount = ref(1);
const show = () => {
popupRef.value.open();
};
const close = () => {
popupRef.value.close();
};
const colorChange = (index: number) => {
currentColorIndex.value = index;
};
const sizeChange = (index: number) => {
currentSizeIndex.value = index;
};
const countChange = (isPlus: boolean) => {
if(isPlus) {
goodsCount.value++;
} else {
if(goodsCount.value > 0) {
goodsCount.value--;
}
}
};
const confirm = () => {
popupRef.value.close();
};
defineExpose({
show
});
</script>
<style lang='scss' scoped>
.content {
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
padding: 23rpx 30rpx 78rpx 30rpx;
.goods-image {
width: 186rpx;
height: 186rpx;
border-radius: 10rpx;
margin-top: -50rpx;
margin-right: 18rpx;
}
.goods-name {
font-weight: bold;
font-size: 32rpx;
color: #333333;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-price {
font-weight: bold;
font-size: 40rpx;
color: #D95554;
margin-top: 40rpx;
}
.goods-price:before {
content: '¥';
font-size: 28rpx;
margin-right: 2rpx;
}
.close-image {
width: 45rpx;
height: 45rpx;
}
.sku-view {
margin-top: 30rpx;
.sku-title {
font-weight: 400;
font-size: 30rpx;
color: #333333;
flex: 1;
}
.sku-color-list {
display: grid;
grid-template-columns:repeat(4, 1fr);
margin-top: 20rpx;
gap: 20rpx;
}
.sku-item {
display: flex;
align-items: center;
justify-content: center;
background: #F2F2F2;
border-radius: 26rpx;
font-weight: 400;
font-size: 26rpx;
color: #333333;
padding: 7rpx 32rpx;
}
.sku-item-active {
@extend .sku-item;
background: #FFF1F1;
color: #D95554;
}
.sku-item-disabled {
@extend .sku-item;
background: #F2F2F2;
color: #BEBEBE;
}
.count-change-view {
.count-image {
display: flex;
align-items: center;
justify-content: center;
width: 54rpx;
height: 54rpx;
background: #FBFBFB;
image {
width: 15rpx;
height: 2rpx;
}
}
.count-image:nth-of-type(2) image {
width: 17rpx;
height: 17rpx;
}
text {
display: flex;
width: 54rpx;
height: 54rpx;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 30rpx;
color: #333333;
background: #F2F2F2;
}
}
.primary-button {
width: 100%;
margin-top: 100rpx;
}
}
}
</style>

39
src/pages/mall/subs/goods/goods-detail.vue
View File

@@ -22,14 +22,14 @@
</view>
<view class='goods-sku-view c-flex-column'>
<view class='c-flex-row'>
<view class='c-flex-row' @click.stop='showSkuDialog'>
<text>选择</text>
<text>规格 颜色/尺码</text>
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
<text>共1种颜色可选</text>
</view>
<view class='divider' style='height: 0.5rpx;margin-left: 100rpx' />
<view class='c-flex-row'>
<view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
<view class='c-flex-row' @click.stop='showSkuDialog'>
<text>参数</text>
<text>品牌 风格 季节 款号</text>
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
@@ -72,24 +72,45 @@
</view>
<view class='primary-button-view c-flex-row'>
<view class='add-shoppingcart-button'>加入购物车</view>
<view class='place-order-button'>立即下单</view>
<view class='add-shoppingcart-button' @click.stop='addShoppingCart'>加入购物车</view>
<view class='place-order-button' @click.stop='placeOrder'>立即下单</view>
</view>
</view>
</view>
<sku-dialog ref='skuDialogRef' />
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
import SkuDialog from '../components/sku-dialog.vue';
const skuDialogRef = ref();
const bannerList = ref([1, 2, 3, 4]);
const showSkuDialog = () => {
skuDialogRef.value.show();
};
const addShoppingCart = () => {
uni.showToast({
title: '加入购物车成功',
icon: 'none'
});
};
const placeOrder = () => {
goPath('/pages/mall/subs/order/order-confirm');
};
</script>
<style lang='scss' scoped>
.content{
.content {
padding-bottom: 200rpx;
}
.swiper {
display: flex;
width: 100%;
@@ -283,16 +304,18 @@ const bannerList = ref([1, 2, 3, 4]);
text {
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
position: absolute;
top: -15rpx;
right: -20rpx;
min-width: 30rpx;
min-width: 35rpx;
min-height: 30rpx;
background: #F32B2B;
color: #FFFFFF;
border-radius: 15rpx;
padding: 2rpx;
border-radius: 50%;
border: 2rpx solid #FFFFFF;
}
}