增加库存显示

This commit is contained in:
2023-10-27 14:50:28 +08:00
parent 2f788956c6
commit 6cd9823bd8
5 changed files with 276 additions and 412 deletions

View File

@@ -2,8 +2,8 @@
<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" />
<Left class="iconfont" @click="returns"/>
<Home class="iconfont" @click="goHome"/>
</view>
</view>
<!-- 幻灯片 -->
@@ -14,18 +14,21 @@
auto-play="3000"
>
<nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
<img :src="itm" :alt="idx.toString()" />
<img :alt="idx.toString()" :src="itm"/>
</nut-swiper-item>
</nut-swiper>
<!-- 标题价格 -->
<view class="card">
<view>
<view class="header">
<nut-price
size="large"
:price="goodInfo.number as number"
position="after"
:symbol="payType === 'jf' ? '积分' : '元'"
/>
<view class="stock">
库存剩余:{{ goodInfo.stock }}
</view>
</view>
<view class="title">{{ goodInfo.name }}</view>
<view class="sub">{{ goodInfo.profile }}</view>
@@ -46,7 +49,7 @@
<view class="bottom-box">
<view class="left">
<view class="icon" @click="toPage('/pages/index/index')">
<Home />
<Home/>
<view>首页</view>
</view>
<!-- <view-->
@@ -58,7 +61,7 @@
<!-- <view>购物车</view>-->
<!-- </view>-->
<view class="icon" @click="toPage('/pages/kefu/index', 2)">
<My />
<My/>
<view>客服</view>
</view>
</view>
@@ -73,7 +76,7 @@
<!-- >加入购物车-->
<!-- </nut-button>-->
<nut-button type="primary" block @click="toOrderDetail()"
>{{ payType === "jf" ? "立即兑换" : "立即购买" }}
>{{ payType === 'jf' ? '立即兑换' : '立即购买' }}
</nut-button>
</view>
</view>
@@ -120,39 +123,28 @@
</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,
getActiveGoodsDetail,
// addCart,
createOrder,
createActiveOrder,
} from "@/api/goods";
import Pay from "@/components/Pay.vue";
const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight
import {ref} from 'vue'
import Taro from '@tarojs/taro'
import {Home, Left, My} from '@nutui/icons-vue-taro'
import {createActiveOrder, createOrder, getActiveGoodsDetail, getGoodsDetail} 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([]);
const swiperList = ref([])
const isSkuShow = ref(false);
const isSkuShow = ref(false)
const isShowPay = ref(false);
const isShowPay = ref(false)
// const sku = ref([]);
const payType = ref("");
const payType = ref('')
const orderData = ref([]);
const orderData = ref([])
const count = ref(1);
const count = ref(1)
interface GoodInfo {
gid?: number;
@@ -165,61 +157,61 @@ interface GoodInfo {
profile?: string;
}
const goodInfo = ref<GoodInfo>({});
const goodInfo = ref<GoodInfo>({})
Taro.useLoad((options) => {
payType.value = options.type === "1" ? "wx" : "jf";
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 {
let res: any;
if (payType.value === "jf") {
res = await getGoodsDetail({ gid: gid });
let res: any
if (payType.value === 'jf') {
res = await getGoodsDetail({gid: gid})
} else {
res = await getActiveGoodsDetail({ gid: gid });
res = await getActiveGoodsDetail({gid: gid})
}
goodInfo.value = {
...res.data.data,
...res.data.data
// details: res.data.data.details.,
};
}
swiperList.value = res.data.data.rotation.split(",");
swiperList.value = res.data.data.rotation.split(',')
} catch (e) {
Taro.showToast({
title: e.msg,
icon: "none",
});
icon: 'none'
})
}
};
}
const addCount = () => {
if (count.value >= (goodInfo.value.stock as number)) {
count.value = goodInfo.value.stock as number;
count.value = goodInfo.value.stock as number
Taro.showToast({
title: "库存不足",
icon: "none",
});
return;
title: '库存不足',
icon: 'none'
})
return
}
};
}
const returns = () => {
Taro.navigateBack({
delta: 1,
});
};
delta: 1
})
}
const goHome = () => {
Taro.switchTab({
url: "/pages/index/index",
});
};
url: '/pages/index/index'
})
}
const openSku = () => {
isSkuShow.value = true;
};
isSkuShow.value = true
}
// const selectSku = () => {};
// const clickBtnOperate = () => {};
@@ -243,76 +235,76 @@ const openSku = () => {
// };
const toOrderDetail = async () => {
if (!Taro.getStorageSync("token")) {
if (!Taro.getStorageSync('token')) {
return Taro.showModal({
title: "提示",
content: "你还没登录,请先登录",
cancelText: "先逛逛",
confirmText: "去登录",
title: '提示',
content: '你还没登录,请先登录',
cancelText: '先逛逛',
confirmText: '去登录',
success: (res) => {
if (res.confirm) {
Taro.reLaunch({
url: "/pages/users/login/index",
});
url: '/pages/users/login/index'
})
}
},
});
}
})
}
if (isSkuShow.value === false) return openSku();
if (isSkuShow.value === false) return openSku()
// Taro.navigateTo({
// url: '/pages/goods/order_create/index'
// })
try {
let res: any;
if (payType.value === "jf") {
let res: any
if (payType.value === 'jf') {
res = await createOrder([
{
gid: goodInfo.value.gid,
count: Number(count.value),
},
]);
count: Number(count.value)
}
])
} else {
res = await createActiveOrder({
gid: goodInfo.value.gid,
stock: Number(count.value),
});
stock: Number(count.value)
})
}
orderData.value = res?.data?.data;
orderData.value = res?.data?.data
isShowPay.value = true;
isShowPay.value = true
count.value = 1;
count.value = 1
} catch (e) {
Taro.showToast({
title: e.msg,
icon: "none",
});
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,
});
url: url
})
} else {
// Taro.navigateTo({
// url: url,
// });
Taro.showToast({
title: "暂未开放",
icon: "none",
});
title: '暂未开放',
icon: 'none'
})
}
};
}
</script>
<style lang="scss">
@@ -363,12 +355,24 @@ page {
padding: 30px;
background-color: #fff;
.title {
font-size: 30px;
font-weight: bold;
color: #333;
.header {
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 30px;
font-weight: bold;
color: #333;
}
.stock {
color: #8f8f8f;
}
}
.sub {
font-size: 24px;
color: #999;