196 lines
6.5 KiB
Vue
196 lines
6.5 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-nav-box display-between-center">
|
|
<button type="default" @tap="immediatelyBuy">立即购买</button>
|
|
<button type="default" @tap="addCartEv">加入购物车</button>
|
|
</view>
|
|
<!-- 底部按钮弹框 -->
|
|
<view v-show="showFrame" class="frame-box" @tap="showFrame=false">
|
|
<view @tap.stop="showFrame=true" class="item-box">
|
|
<view class="frame-top">
|
|
<image class="frame-img" :src="shopImg" mode="aspectFill" lazy-load></image>
|
|
<view class="frame-content">
|
|
<!-- 商品标题 -->
|
|
<view class="clips2 frame-title">{{detailObj.detail.name}}</view>
|
|
<!-- 商品价格 -->
|
|
<view class="frame-price">
|
|
<!-- 折扣价 -->
|
|
<view class="discount-box">￥{{discountPrice}}</view>
|
|
<!-- 原价 -->
|
|
<view class="original-box">￥{{originalPrice}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品尺寸、规格 -->
|
|
<view class="frame-color-box">
|
|
<!-- 颜色 -->
|
|
<!-- <drop-down></drop-down> -->
|
|
<!-- 尺寸 -->
|
|
<!-- <drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down> -->
|
|
</view>
|
|
<!-- 商品库存 -->
|
|
<view class="frame-stock">库存：{{detailObj.detail.stock}}</view>
|
|
<!-- 加减按钮 -->
|
|
<view class="frame-add-del">
|
|
<view class="display-between-center add-del-box">
|
|
<!-- 减 -->
|
|
<button @tap="deladdEvent(0)" :disabled="buyNum==1" class="item-btn display-center-center">-</button>
|
|
<!-- 输入框 -->
|
|
<view class="input-box display-center-center">
|
|
<input class="input" type="text" v-model="buyNum" />
|
|
</view>
|
|
<!-- 加 -->
|
|
<button @tap="deladdEvent(1)" class="item-btn display-center-center">+</button>
|
|
</view>
|
|
</view>
|
|
<!-- 立即购买、加入购物车按钮 -->
|
|
<view class="frame-btn-box">
|
|
<button class="btn" type="default" @tap="immediatelyBuy">立即购买</button>
|
|
<button class="btn" type="default" @tap="addCartEv">加入购物车</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dropDown from '@/components/drop-downs/drop-down.vue';
|
|
export default {
|
|
name:"bottom-nav",
|
|
components:{
|
|
dropDown
|
|
},
|
|
props:{
|
|
detailObj:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showFrame:false,
|
|
dropObj:{
|
|
title:'尺寸',
|
|
childrenList:[
|
|
{
|
|
id:1,
|
|
childrenTitle:'1.2'
|
|
},
|
|
{
|
|
id:1,
|
|
childrenTitle:'6'
|
|
}
|
|
]
|
|
},
|
|
buyNum:1,//购买数量
|
|
originalPrice:0,//商品原价
|
|
discountPrice:0,//商品折扣价
|
|
shopImg:''//商品图片
|
|
};
|
|
},
|
|
mounted() {
|
|
// 原价
|
|
this.originalPrice = this.detailObj.detail.original_price;
|
|
// 折扣价
|
|
this.discountPrice = this.detailObj.detail.price;
|
|
// 商品图片
|
|
this.shopImg = this.$http + this.detailObj.detail.cover;
|
|
},
|
|
methods:{
|
|
// 立即购买
|
|
immediatelyBuy(){
|
|
let params = {};
|
|
if(this.showFrame) {
|
|
params = {
|
|
id:this.detailObj.detail.id,//商品id
|
|
imgSrc:this.detailObj.detail.cover,//商品图片
|
|
coding:this.detailObj.sku[0].coding,//商品coding
|
|
price:this.discountPrice,//商品价格
|
|
num:this.buyNum || 1,//商品数量
|
|
title:this.detailObj.detail.name,//商品名称
|
|
}
|
|
} else {
|
|
// 进入详情就立即购买事件
|
|
params = {
|
|
id:this.detailObj.detail.id,//商品id
|
|
imgSrc:this.detailObj.detail.cover,//商品图片
|
|
coding:this.detailObj.sku[0].coding,//商品coding
|
|
price:this.discountPrice,//商品价格
|
|
num:this.buyNum || 1,//商品数量
|
|
title:this.detailObj.detail.name,//商品名称
|
|
}
|
|
}
|
|
uni.setStorageSync('orderList',[params]);
|
|
uni.navigateTo({
|
|
url:`/pagesA/getReadyDan/getReadyDan`
|
|
})
|
|
},
|
|
// 尺寸选择
|
|
chooseItem(e){
|
|
this.log(e)
|
|
},
|
|
// 添加购物车事件
|
|
addCartEv(){
|
|
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.detailObj.sku[0].id,num:this.buyNum}).then(res=>{
|
|
if(res.code==0){
|
|
this.$toolAll.tools.showToast('添加成功');
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
}).catch(err=>{
|
|
this.$toolAll.tools.showToast(err.msg);
|
|
})
|
|
},
|
|
// 数量加减事件
|
|
deladdEvent(index){
|
|
if(index==0){//减少数量
|
|
this.buyNum--
|
|
} else {//增加数量
|
|
this.buyNum++
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.display-center-center {display: flex;justify-content: center;align-items: center;}
|
|
.display-between-center{display: flex;justify-content: space-between;align-items: center;}
|
|
.bottom-nav-box{position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx 40rpx;background-color: #FFFFFF;}
|
|
button{
|
|
width: 310rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx!important;
|
|
border-radius: 30rpx;
|
|
font-size: 36rpx;
|
|
border: 1rpx solid #FFFFFF;
|
|
color: #FFFFFF!important;
|
|
}
|
|
button:first-child{border: 1rpx solid #f81c1c;background-color: #f81c1c;}
|
|
button:last-child{border: 1rpx solid #000000;background-color: #000000;}
|
|
|
|
.frame-box{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.5);z-index: 12;}
|
|
.frame-box .item-box{background-color: #FFFFFF;position: absolute;bottom: 0;left: 0;right: 0;padding: 30rpx;}
|
|
.frame-top {display: flex;justify-content: space-between;}
|
|
.frame-top .frame-img {width: 223rpx;height: 223rpx;border-radius: 20rpx;flex-shrink: 0;margin-right: 30rpx;margin-top: -80rpx;}
|
|
.frame-top .frame-content{width: 100%;display: flex;justify-content: space-between;flex-direction: column;}
|
|
|
|
.frame-title{font-size: 36rpx;color: #000000;line-height: 50rpx;}
|
|
.frame-price{display: flex;align-items: center;}
|
|
.frame-price .discount-box{font-size: 40rpx;margin-right: 10rpx;}
|
|
.frame-price .original-box{font-size: 28rpx;color: #868695;text-decoration: line-through;}
|
|
.frame-color-box{margin-top: 20rpx;}
|
|
.frame-btn-box{display: flex;align-items: center;justify-content: space-around;margin-top: 100rpx;}
|
|
.frame-btn-box .btn{height: 80rpx;line-height: 80rpx!important;border-radius: 20rpx;}
|
|
.frame-stock{font-size: 24rpx;color: #000000;text-align: right;}
|
|
/* 加减按钮 */
|
|
.frame-add-del{display: flex;justify-content: flex-end;}
|
|
.add-del-box{width: 180rpx;margin-top: 20rpx;}
|
|
.input-box {width: 78rpx;height: 40rpx;font-size: 24rpx; border-radius: 16rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
|
|
.input-box .input {text-align: center;}
|
|
.item-btn {width: 40rpx;height: 40rpx;border-radius: 12rpx;background-color: #000000!important;border: 1rpx solid #000000!important; color: #FFFFFF;padding: 0rpx;}
|
|
</style>
|