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-18 21:52:10 +08:00
parent 7f0f11cf14
commit 8d7f82b07c
13 changed files with 187 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/mall/subs/goods/detail.vue
View File

@@ -2,11 +2,11 @@
<view class='content'>
<view class='swiper-container'>
<swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
<swiper-item v-for='(item,index) in bannerList' :key='index'>
<image src='/static/images/test_bg.png' />
<swiper-item v-for='(item,index) in [goodsBean?.images]' :key='index'>
<image :src='item' />
</swiper-item>
</swiper>
<view class='indicator'>
<view class='indicator' style='display: none'>
<text>{{ swiperIndex + 1 }}</text>
<text>/{{ bannerList.length }}</text>
</view>
@@ -14,12 +14,12 @@
<view class='goods-info-view c-flex-column'>
<view class='c-flex-row'>
<text class='goods-price accent-text-color'>39.89</text>
<text class='goods-price accent-text-color'>{{ goodsBean?.price || 0 }}</text>
<text>销量2653</text>
</view>
<view class='c-flex-row'>
<text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
<text style='flex: 1'>{{ goodsBean?.name }}</text>
<view class='share-button c-flex-column'>
<image :src='assetsUrl("ic_share.png")'></image>
<button class='btn' plain open-type='share'>分享</button>
@@ -34,8 +34,8 @@
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
<text>共1种颜色可选</text>
</view>
<view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
<view class='c-flex-row' @click.stop='showSkuDialog'>
<view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx;display: none' />
<view class='c-flex-row' style='display: none' @click.stop='showSkuDialog'>
<text>参数</text>
<text>品牌 风格 季节 款号</text>
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
@@ -45,22 +45,22 @@
<view class='recommend-view c-flex-column'>
<text>浏览此商品的客户还浏览了</text>
<scroll-view scroll-x>
<view style='display: inline-block' v-for='(item, index) in [1, 2, 3, 4]'
<view style='display: inline-block' v-for='(item, index) in recommendList'
:key='index'>
<view class='recommend-item c-flex-column'>
<image :src='assetsUrl("test_bg.png")' />
<text>女童夏装套装…</text>
<text class='goods-price'>22</text>
<image :src='item.images' />
<text>{{ item.goodsName }}</text>
<text class='goods-price'>{{ item.price }}</text>
</view>
</view>
</scroll-view>
</view>
<view class='goods-detail c-flex-column'>
<view class='goods-detail c-flex-column' style='display: none'>
<text>商品详情</text>
<image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
<image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
<image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
</view>
<view class='bottom-view c-flex-row'>
@@ -78,7 +78,7 @@
<view class='small-button-item'>
<view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
<image :src='assetsUrl("ic_goods_shoppingcart.png")' />
<text>12</text>
<text>0</text>
</view>
<text>购物车</text>
</view>
@@ -90,19 +90,37 @@
</view>
</view>
</view>
<sku-dialog ref='skuDialogRef' />
<sku-dialog ref='skuDialogRef' @bean='goodsBean' />
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';
import SkuDialog from '@/components/sku-dialog.vue';
import { goPath } from '@/utils';
import { getGoodsDetail, getGoodsList } from '@/api/goods';
import { GoodsBean } from '@/api/goods/types';
const goodsBean = ref<GoodsBean>();
const recommendList = ref<GoodsBean[]>();
const skuDialogRef = ref();
const bannerList = ref([1, 2, 3, 4]);
const bannerList = ref([]);
const swiperIndex = ref(0);
onLoad(async (e: any) => {
goodsBean.value = await getGoodsDetail(e.goodsId);
const { rows } = await getGoodsList({
page: 1,
pageSize: 10,
bean: {
keyword: '',
typeIds: ['519334122586648576']
}
});
recommendList.value = rows;
});
const swiperChange = (e: any) => {
swiperIndex.value = e.detail.current;
};
@@ -263,7 +281,7 @@ const placeOrder = () => {
view:nth-of-type(1) {
align-items: flex-start;
padding-top: 40rpx;
padding-top: 20rpx;
}
}
@@ -401,6 +419,7 @@ const placeOrder = () => {
.goods-detail {
background: #FFFFFF;
margin-top: 20rpx;
text {
margin: 20rpx 30rpx;
font-weight: bold;