192 lines
4.2 KiB
Vue
192 lines
4.2 KiB
Vue
<template>
|
|
<view class="goods">
|
|
<!-- 返回按钮 -->
|
|
<wd-navbar fixed :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
|
|
<wd-swiper height="750rpx" :list="goods.images" autoplay v-model:current="current">
|
|
<template #indicator="{ current, total }">
|
|
<view class="custom-indicator">{{ current + 1 }}/{{ total }}</view>
|
|
|
|
<view class="goods_sals">销量{{ goods.sales }}</view>
|
|
</template>
|
|
</wd-swiper>
|
|
<view style="height: 35rpx"></view>
|
|
<view class="goods_block">
|
|
<view>
|
|
<view class="goods_block_tit">{{ goods.name }}</view>
|
|
<view class="goods_block_stock">库存{{ goods.stock }}</view>
|
|
</view>
|
|
<view style="margin-top: 20rpx">
|
|
<view class="goods_block_spec">{{ goods.specs }}</view>
|
|
<view class="goods_block_price">￥{{ goods.currentPrice }}</view>
|
|
</view>
|
|
</view>
|
|
<view style="font-weight: bold; font-size: 30rpx; color: #232323; margin: 30rpx 0 25rpx; text-align: center">商品详情</view>
|
|
|
|
<view style="background-color: #fff">
|
|
<mp-html :content="goods.detail" />
|
|
<!-- <rich-text :nodes="goods.detail"></rich-text> -->
|
|
</view>
|
|
|
|
<view style="height: 145rpx"></view>
|
|
|
|
<view
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 35rpx 60rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
width: 100%;
|
|
"
|
|
>
|
|
<view style="display: flex; align-items: center; font-size: 24rpx">
|
|
<button style="margin-right: 24rpx" open-type="share">
|
|
<image style="width: 40rpx; height: 40rpx" src="/static/icons/fx.png"></image>
|
|
<view>分享</view>
|
|
</button>
|
|
|
|
|
|
|
|
<button open-type="contact">
|
|
<image style="width: 40rpx; height: 40rpx" src="/static/icons/goodkf.png"></image>
|
|
<view>客服</view>
|
|
</button>
|
|
</view>
|
|
<view
|
|
style="
|
|
width: 468rpx;
|
|
height: 70rpx;
|
|
background: #ffffff;
|
|
border-radius: 12rpx;
|
|
border: 1rpx solid #5d7a4e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #5d7a4e;
|
|
"
|
|
@click="toConfirm"
|
|
>
|
|
立即购买
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import api from '@/api/index';
|
|
import { useNav } from '@/hooks/useNav';
|
|
const { navTo } = useNav();
|
|
|
|
const current = ref<number>(0);
|
|
const swiperList = ref(['https://wot-ui.cn/assets/redpanda.jpg', 'https://wot-ui.cn/assets/capybara.jpg']);
|
|
|
|
const goods = ref({});
|
|
|
|
interface optionsType {
|
|
id: string;
|
|
}
|
|
|
|
onLoad((options: any) => {
|
|
api.goodsInfo({ id: options.id }).then((res: any) => {
|
|
goods.value = res;
|
|
});
|
|
});
|
|
|
|
const toConfirm = () => {
|
|
navTo(`/pages/order/confirm?id=${goods.value.id}`, true);
|
|
};
|
|
|
|
const back = () => {
|
|
uni.navigateBack();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.goods {
|
|
--wot-swiper-radius: 0;
|
|
|
|
&_sals {
|
|
width: 166rpx;
|
|
height: 44rpx;
|
|
background: #ffffff;
|
|
border-radius: 46rpx 0rpx 0rpx 46rpx;
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
right: 0;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #232323;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
&_block {
|
|
margin: auto;
|
|
width: 690rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 0rpx 6rpx 2rpx rgba(22, 22, 23, 0.07);
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
padding: 24rpx;
|
|
view {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&_tit {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #232323;
|
|
}
|
|
&_stock {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
&_spec {
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #232323;
|
|
}
|
|
&_price {
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
color: #ff2929;
|
|
}
|
|
}
|
|
}
|
|
.custom-indicator {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
background: #ffffff;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
opacity: 0.5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-size: 24rpx;
|
|
color: #232323;
|
|
|
|
position: absolute;
|
|
top: 170rpx;
|
|
right: 24rpx;
|
|
}
|
|
|
|
button {
|
|
all: unset;
|
|
}
|
|
button::after {
|
|
all: unset;
|
|
}
|
|
</style>
|