XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i

Browse Source
This commit is contained in:
YuanHuakk
2023-08-19 21:37:22 +08:00
parent 61f840059b
commit 8b5de95140
16 changed files with 749 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

647
src/pages/goods/goods_detail/index.vue
View File

@@ -1,99 +1,97 @@
<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="goodInfo.number as number"
position="after"
symbol="积分"
/>
</view>
<view class="title"
>{{ goodInfo.name }}
</view
>
</view>
<nut-cell title="请选择规格: " is-link @click="openSku"></nut-cell>
<!-- 产品介绍 -->
<view class="rich-box">
<view class="title">产品介绍</view>
<view v-if="goodInfo.details" v-html="goodInfo.details"></view>
<nut-empty v-else description="暂无产品介绍"></nut-empty>
</view>
<!-- 底部 -->
<view class="bottom-box">
<view class="left">
<view class="icon" @click="toPage('/pages/index/index')">
<Home/>
<view>首页</view>
<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>
<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="add_cart()"
>加入购物车
</nut-button
<!-- 幻灯片 -->
<nut-swiper
:init-page="0"
:pagination-visible="true"
pagination-color="#426543"
auto-play="3000"
>
<nut-button type="primary" @click="toOrderDetail()"
>立即兑换
</nut-button
<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="goodInfo.number as number"
position="after"
:symbol="payType === 'jf' ? '积分' : '元'"
/>
</view>
<view class="title">{{ goodInfo.name }} </view>
</view>
<nut-cell title="请选择规格: " is-link @click="openSku"></nut-cell>
<!-- 产品介绍 -->
<view class="rich-box">
<view class="title">产品介绍</view>
<view v-if="goodInfo.details" v-html="goodInfo.details"></view>
<nut-empty v-else 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" v-if="payType === 'jf'" @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
v-if="payType === 'jf'"
style="margin-right: 10px"
type="warning"
@click="add_cart()"
>加入购物车
</nut-button>
<nut-button :style="payType === 'wx' ? 'width: 200px':''" type="primary" @click="toOrderDetail()"
>{{ payType === "jf" ? "立即兑换" : "立即购买" }}
</nut-button>
</view>
</view>
<!-- 规格选择 -->
<nut-popup
position="bottom"
overlay-class="overlay"
safe-area-inset-bottom
closeable
round
:style="{ zIndex: 1 }"
v-model:visible="isSkuShow"
>
</view>
</view>
<!-- 规格选择 -->
<nut-popup
position="bottom"
overlay-class="overlay"
safe-area-inset-bottom
closeable
round
:style="{zIndex: 1 }"
v-model:visible="isSkuShow"
>
<view class="sku-box">
<view>商品规格</view>
<nut-cell-group>
<nut-cell title="数量:">
<template v-slot:link>
<nut-input-number v-model="count" @change="addCount"/>
</template>
</nut-cell>
</nut-cell-group>
</view>
</nut-popup>
<!-- <nut-sku
<view class="sku-box">
<view>商品规格</view>
<nut-cell-group>
<nut-cell title="数量:">
<template v-slot:link>
<nut-input-number
v-model="count"
@change="addCount"
/>
</template>
</nut-cell>
</nut-cell-group>
</view>
</nut-popup>
<!-- <nut-sku
v-model:visible="isSkuShow"
:sku="sku"
:goods="goods"
@@ -101,305 +99,322 @@
@clickBtnOperate="clickBtnOperate"
@close="close"
></nut-sku> -->
<Pay :is-show-pay="isShowPay" pay-type="jf" :jfInfo="orderData" @closePay="closePay"/>
</view>
<Pay
:is-show-pay="isShowPay"
:pay-type="payType"
v-model:jfInfo="orderData"
@closePay="closePay"
/>
</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'
import {getGoodsDetail, addCart, createOrder, payOrder} from '@/api/goods'
import Pay from '@/components/Pay.vue'
var statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { Left, Home, Cart, My } from "@nutui/icons-vue-taro";
import {
getGoodsDetail,
getActiveGoodsDetail,
addCart,
createOrder,
payOrder,
createActiveOrder,
} from "@/api/goods";
import Pay from "@/components/Pay.vue";
const BarHeight = ref((statusBarHeight as number) + 7)
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'
}
])
{
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 isSkuShow = ref(false);
const isShowPay = ref(false)
const isShowPay = ref(false);
const sku = ref([])
const sku = ref([]);
const orderData = ref([])
const payType = ref("");
const count = ref(1)
const orderData = ref([]);
const count = ref(1);
interface GoodInfo {
gid?: number
name?: string
number?: number
cover?: string
details?: string
sku?: any[]
stock?: number
gid?: number;
name?: string;
number?: number;
cover?: string;
details?: string;
sku?: any[];
stock?: number;
}
const goodInfo = ref<GoodInfo>({})
const goodInfo = ref<GoodInfo>({});
Taro.useLoad((options) => {
get_good_detail(options.gid)
})
payType.value = options.type === "1" ? "wx" : "jf";
get_good_detail(options.gid);
});
const get_good_detail = async (gid: string) => {
try {
const res = await getGoodsDetail({gid: Number(gid)})
goodInfo.value = res.data.data
} catch (e) {
Taro.showToast({
title: e.msg,
icon: 'none'
})
}
}
try {
let res: any;
if (payType.value === "jf") {
res = await getGoodsDetail({ gid: Number(gid) });
} else {
res = await getActiveGoodsDetail({ gid: gid });
}
goodInfo.value = res.data.data;
} catch (e) {
Taro.showToast({
title: e.msg,
icon: "none",
});
}
};
const addCount = () => {
if (count.value >= (goodInfo.value.stock as number)) {
count.value = goodInfo.value.stock as number
Taro.showToast({
title: '库存不足',
icon: 'none'
})
return
}
}
if (count.value >= (goodInfo.value.stock as number)) {
count.value = goodInfo.value.stock as number;
Taro.showToast({
title: "库存不足",
icon: "none",
});
return;
}
};
const returns = () => {
Taro.navigateBack({
delta: 1
})
}
Taro.navigateBack({
delta: 1,
});
};
const goHome = () => {
Taro.switchTab({
url: '/pages/index/index'
})
}
Taro.switchTab({
url: "/pages/index/index",
});
};
const openSku = () => {
isSkuShow.value = true
}
isSkuShow.value = true;
};
const selectSku = () => {
}
const clickBtnOperate = () => {
}
const close = () => {
}
const selectSku = () => {};
const clickBtnOperate = () => {};
const close = () => {};
const add_cart = async () => {
if (isSkuShow.value === false) return openSku()
try {
await addCart({gid: Number(goodInfo.value.gid)})
Taro.showToast({
title: '加入购物车成功',
icon: 'success',
duration: 2000
})
} catch (e) {
Taro.showToast({
title: e.msg,
icon: 'none'
})
}
isSkuShow.value = false
}
if (isSkuShow.value === false) return openSku();
try {
await addCart({ gid: Number(goodInfo.value.gid) });
Taro.showToast({
title: "加入购物车成功",
icon: "success",
duration: 2000,
});
} catch (e) {
Taro.showToast({
title: e.msg,
icon: "none",
});
}
isSkuShow.value = false;
};
const toOrderDetail = async () => {
if (isSkuShow.value === false) return openSku()
// Taro.navigateTo({
// url: '/pages/goods/order_create/index'
// })
try {
const {data} = await createOrder([
{
gid: Number(goodInfo.value.gid),
count: Number(count.value)
}
])
// 删除不必要的字段
// orderData.value = data.data.map((item: any) => {
// delete item.ID
// delete item.uid
// delete item.status
// delete item.add_time
// delete item.expires
// return item
if (isSkuShow.value === false) return openSku();
// Taro.navigateTo({
// url: '/pages/goods/order_create/index'
// })
orderData.value = data.data
try {
let res: any;
if (payType.value === "jf") {
res = await createOrder([
{
gid: Number(goodInfo.value.gid),
count: Number(count.value),
},
]);
} else {
res = await createActiveOrder({
gid: goodInfo.value.gid,
stock: count.value,
});
}
isShowPay.value = true
orderData.value = res.data.data;
} catch (e) {
Taro.showToast({
title: e.msg,
icon: 'none'
})
}
isShowPay.value = true;
} catch (e) {
Taro.showToast({
title: e.msg,
icon: "none",
});
}
isSkuShow.value = false
}
isSkuShow.value = false;
};
const closePay = (val: boolean) => {
isShowPay.value = val
orderData.value = []
}
isShowPay.value = val;
orderData.value = [];
};
const toPage = (url: string, type: number = 1) => {
if (type === 1) {
Taro.switchTab({
url: url
})
} else {
// Taro.navigateTo({
// url: url,
// });
Taro.showToast({
title: '暂未开放',
icon: 'none'
})
}
}
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;
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: 30px;
top: 0;
/* #ifdef MP */
// height: 43px;
/* #endif */
/* #ifdef H5 */
height: 114px;
/* #endif */
z-index: 999;
display: flex;
align-items: center;
position: fixed;
left: 30px;
top: 0;
/* #ifdef MP */
// height: 43px;
/* #endif */
/* #ifdef H5 */
height: 114px;
/* #endif */
}
.head-menu {
display: flex;
align-items: center;
height: 54px;
width: 140px;
background: rgba(0, 0, 0, 0.25);
border-radius: 27px;
display: flex;
align-items: center;
height: 54px;
width: 140px;
background: rgba(0, 0, 0, 0.25);
border-radius: 27px;
.iconfont {
flex: 1;
text-align: center;
color: #fff;
box-sizing: border-box;
}
.iconfont {
flex: 1;
text-align: center;
color: #fff;
box-sizing: border-box;
}
}
.nut-swiper-item img {
width: 100%;
height: 450px;
width: 100%;
height: 450px;
}
.card {
padding: 30px;
background-color: #fff;
padding: 30px;
background-color: #fff;
.title {
font-size: 30px;
font-weight: bold;
color: #333;
}
.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;
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;
}
.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);
// 适配ios底部安全区域
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.sku-box {
padding: 100px 50px;
padding: 100px 50px;
}
.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 {
border-top: 1px solid #e5e5e585;
position: fixed;
bottom: 0;
height: 5.5vh;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
width: 300px;
padding: 0 20px;
box-sizing: border-box;
align-items: center;
// 适配ios底部安全区域
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
z-index: 999;
width: 100vw;
.left {
display: flex;
align-items: center;
justify-content: flex-start;
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;
width: 100px;
// margin-right: 100px;
}
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
font-size: 25px;
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>