i
This commit is contained in:
293
src/pages/goods/goods_detail/index.vue
Normal file
293
src/pages/goods/goods_detail/index.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="head-wrapper" :style="'top:' + BarHeight + 'px'">
|
||||
<view class="head-menu">
|
||||
<Left class="iconfont" @click="returns" />
|
||||
<Home class="iconfont" @click="goHome" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 幻灯片 -->
|
||||
<nut-swiper
|
||||
:init-page="0"
|
||||
:pagination-visible="true"
|
||||
pagination-color="#426543"
|
||||
auto-play="3000"
|
||||
>
|
||||
<nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
|
||||
<img :src="itm.url" :alt="itm.id.toString()" />
|
||||
</nut-swiper-item>
|
||||
</nut-swiper>
|
||||
<!-- 标题价格 -->
|
||||
<view class="card">
|
||||
<view>
|
||||
<nut-price
|
||||
size="large"
|
||||
:price="8888"
|
||||
position="after"
|
||||
symbol="积分"
|
||||
/>
|
||||
</view>
|
||||
<view class="title"
|
||||
>MIUCHO可爱卡通学生通勤手提电脑包13.3寸14村女适用苹果联想小米</view
|
||||
>
|
||||
</view>
|
||||
<nut-cell title="请选择规格: " is-link @click="openSku"></nut-cell>
|
||||
<!-- 产品介绍 -->
|
||||
<view class="rich-box">
|
||||
<view class="title">产品介绍</view>
|
||||
<view></view>
|
||||
<nut-empty description="暂无产品介绍"></nut-empty>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<view class="bottom-box">
|
||||
<view class="left">
|
||||
<view class="icon" @click="toPage('/pages/index/index')">
|
||||
<Home />
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<view class="icon" @click="toPage('/pages/cart/index')">
|
||||
<Cart />
|
||||
<view>购物车</view>
|
||||
</view>
|
||||
<view class="icon" @click="toPage('/pages/kefu/index', 2)">
|
||||
<My />
|
||||
<view>客服</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view style="height: 155px"></view>
|
||||
<view>
|
||||
<nut-button
|
||||
style="margin-right: 10px"
|
||||
type="warning"
|
||||
@click="addCart()"
|
||||
>加入购物车</nut-button
|
||||
>
|
||||
<nut-button type="primary" @click="toOrderDetail()"
|
||||
>立即兑换</nut-button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规格选择 -->
|
||||
<nut-popup
|
||||
position="bottom"
|
||||
overlay-class="overlay"
|
||||
safe-area-inset-bottom
|
||||
closeable
|
||||
round
|
||||
:style="{ height: '45%', zIndex: 1 }"
|
||||
v-model:visible="isSkuShow"
|
||||
></nut-popup>
|
||||
<!-- <nut-sku
|
||||
v-model:visible="isSkuShow"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
@selectSku="selectSku"
|
||||
@clickBtnOperate="clickBtnOperate"
|
||||
@close="close"
|
||||
></nut-sku> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
var statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
|
||||
import { ref } from "vue";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Left, Home, Cart, My } from "@nutui/icons-vue-taro";
|
||||
|
||||
|
||||
const BarHeight = ref((statusBarHeight as number) + 7);
|
||||
|
||||
const swiperList = ref([
|
||||
{
|
||||
id: 1,
|
||||
url: "https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
url: "https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: "https://storage.360buyimg.com/jdc-article/welcomenutui.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
url: "https://storage.360buyimg.com/jdc-article/fristfabu.jpg",
|
||||
},
|
||||
]);
|
||||
|
||||
const isSkuShow = ref(false);
|
||||
|
||||
const sku = ref([]);
|
||||
|
||||
const goods = ref({});
|
||||
|
||||
const returns = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
};
|
||||
|
||||
const goHome = () => {
|
||||
Taro.switchTab({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
};
|
||||
|
||||
const openSku = () => {
|
||||
isSkuShow.value = true;
|
||||
};
|
||||
|
||||
const selectSku = () => {};
|
||||
const clickBtnOperate = () => {};
|
||||
const close = () => {};
|
||||
|
||||
const addCart = () => {
|
||||
if (isSkuShow.value === false) return openSku();
|
||||
Taro.showToast({
|
||||
title: "加入购物车成功",
|
||||
icon: "none",
|
||||
});
|
||||
isSkuShow.value = false;
|
||||
};
|
||||
|
||||
const toOrderDetail = () => {
|
||||
if (isSkuShow.value === false) return openSku();
|
||||
Taro.navigateTo({
|
||||
url: "/pages/goods/order_create/index",
|
||||
});
|
||||
isSkuShow.value = false;
|
||||
};
|
||||
|
||||
const toPage = (url: string, type: number = 1) => {
|
||||
if (type === 1) {
|
||||
Taro.switchTab({
|
||||
url: url,
|
||||
});
|
||||
} else {
|
||||
// Taro.navigateTo({
|
||||
// url: url,
|
||||
// });
|
||||
Taro.showToast({
|
||||
title: "暂未开放",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// sku遮罩
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.head-wrapper {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
top: 0;
|
||||
/* #ifdef MP */
|
||||
// height: 43px;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
height: 114rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54rpx;
|
||||
width: 140rpx;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 27rpx;
|
||||
.iconfont {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-swiper-item img {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-box {
|
||||
background-color: #fff;
|
||||
margin-top: 20px;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-sku {
|
||||
// 适配ios底部安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
border-top: 1px solid #e5e5e585;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 5.5vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
// 适配ios底部安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 999;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user