first commit
This commit is contained in:
PC-202306242200\Administrator
191
pages/goods/goods.vue
Normal file
191
pages/goods/goods.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user