dengrui/components/bottomkf.vue

210 lines
8.0 KiB
Vue

<template>
<view>
<view class="bacb disba padding20 posi-bzy" style="border-top: 1rpx solid #eeeeee;">
<view class="disba" style="width: 24%;">
<view @tap="goHome" class="discc margin-z20">
<image class="bottosimg" src="/static/img/public/home.png" mode=""></image>
<view class="fon24 bottoc">首页</view>
</view>
<view @tap="goKef" class="discc posir">
<image class="bottokimg" src="/static/img/public/xkef.png" mode=""></image>
<view class="fon24 bottoc">客服</view>
<button v-if="showKf" class="fon24 bottoc posia" style="opacity: 0;" open-type="contact" bindcontact="huik">客服</button>
</view>
</view>
<view v-if="user_type!='personal'" class="disac">
<view @tap="diaoq" class="margin-y20 textc bottoj">加入购物车</view>
<view @tap="diaoq" class="textc bottol">立即购买</view>
</view>
<view v-if="user_type=='personal'" class="disac">
<view @tap="diaoq" class="textc bottol">点击查看</view>
</view>
</view>
<!-- 底部弹框 -->
<view @touchmove.stop.prevent="moveHandle" v-if="isBtn" class="posiall zIn5" style="background-color: rgba(0,0,0,.6);">
<view class="posi-bzy padding20" style="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;z-index: 6;">
<view class="margin-s20 dis">
<image class="flexs" style="width: 201rpx;height: 201rpx;border-radius: 10rpx;" :src="srcImg"></image>
<view class="margin-z20 width100">
<view class="colorf6 fon24 bold"><text class="fon28">{{detail.sku_list[sku_index].cur_price/100}}</text>.0</view>
<view class="fon28 color33">{{detail.name}}</view>
</view>
<view @tap="isBtn=false" style="flex-shrink: 0; width: 38rpx;height: 38rpx;border-radius: 100%;background-color: rgba(0,0,0,.15);position: relative;display: flex;justify-content: center;align-items: center;top: -10rpx;">
<view style="width: 2rpx;height: 20rpx;background-color: #666666;position: absolute;transform: rotate(45deg);"></view>
<view style="width: 2rpx;height: 20rpx;background-color: #666666;position: absolute;transform: rotate(-45deg);"></view>
</view>
</view>
<view class="bold color33 margin-s30" style="font-size: 30rpx;">规格选择</view>
<view class="disac flw">
<view @tap="chooseguig(item.id,indexg)"
:class="guigCurrent==indexg?'guigactive':'guigmo'"
class="fon24 margin-s20 margin-y10 padding-sx10 padding-zy30"
v-for="(item,indexg) in guigArr" :key="indexg"
style="background-color: #f3f3f3;border-radius: 30rpx;min-width: 60rpx;text-align: center;max-width: 100%;"><view class="clips1">{{item.title}}</view></view>
</view>
<view class="borbot margin-x20 margin-s30"></view>
<view v-if="user_type!='personal'" class="disba">
<view class="width100">数量</view>
<view class="disac" style="justify-content:flex-end;">
<!-- 递减 -->
<view @tap="delEvent(0)" class="disbcac padding-sx30">
<image class="margin-y20" style="width: 18rpx;height: 4rpx;" src="../static/img/product/del.png"></image>
</view>
<!-- 数量框 -->
<input type="text" disabled v-model="num" style="width: 40%;background-color: #F5F5F5;text-align: center;padding: 4rpx 0;border-radius: 4rpx;"/>
<!-- 递增 -->
<view @tap="addEvent(1)" class="disbcac padding-sx30">
<image class="margin-zy20" style="width: 18rpx;height: 18rpx;" src="../static/img/product/add.png"></image>
</view>
</view>
</view>
<view v-if="user_type!='personal'" class="disbcac padding-sx40">
<view @tap="addGowc" class="bold padding-sx20 padding-zy40 colorf78 margin-y10" style="font-size: 30rpx;border: 1rpx solid #FF7800;border-radius: 60rpx;width: 30%;text-align: center;">加入购物车</view>
<view @tap="buy" class="bold padding-sx20 padding-zy40 colorb margin-z20" style="font-size: 30rpx;background-color: #ff7800;border-radius: 60rpx;width: 30%;text-align: center;"></view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
detail:{
type:Object,
default:function(){
return {}
}
},
sku_img:{
type:String,
default:''
}
},
data() {
return {
guigArr:[],
guigCurrent:0,
num:1,
isBtn:false,
sku_index:0,
sku_id:'',
srcImg:'',
orderList:[],
showKf:true,
user_type:uni.getStorageSync('user_type')//权限
};
},
watch:{
sku_img:function(newImg,oldImg){
this.srcImg = newImg
}
},
mounted() {
if(uni.getStorageSync('is_active')==0) {
this.showKf = false
}
},
methods:{
huik(){
// console.log('萨拉丁开发');
},
goHome(){uni.switchTab({url:'/pages/tabbar/homePage/homePage'})},
goKef(){
if(uni.getStorageSync('is_active')==0) {
this.$toolAll.tools.showToast('您目前是游客,请授权登录')
setTimeout(()=>{
uni.navigateTo({url:'/pages/login/login'})
},1500)
}
},
diaoq(){
if(uni.getStorageSync('is_active')==0) {
this.$toolAll.tools.showToast('您目前是游客,请授权登录')
setTimeout(()=>{
uni.navigateTo({url:'/pages/login/login'})
},1500)
} else {
this.$emit('diaoq');
this.isBtn = true
this.guigArr = []
this.orderList = []
this.detail.sku_list.forEach(item=>{
this.guigArr.push(item)
if(item.is_main==1){
let buyObj = {
sku_coding:item.coding,
num:this.num
}
this.orderList.push(buyObj)
// console.log(this.orderList);
}
})
}
},
addGowc(){//添加购物车事件
this.isBtn = false
if(this.sku_id==''){
this.sku_id = this.guigArr[0].id
}
this.$requst.post('order/shopping-cart-add',{sku_id:this.sku_id,num:this.num}).then(res=>{
// console.log(res);
if(res.code==0){
this.num = 1
this.sku_id = ''
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
}
},error=>{})
},
buy(){//立即购买事件
this.isBtn = false
let storageAddress = uni.getStorageSync('storageAddress')
let buyParma = {
sku_list: this.orderList,
address_id: storageAddress || ''
}
console.log('参数',buyParma);
this.$requst.post('order/prepare-info',buyParma).then(res=>{
// console.log(res);
if(res.code==0){
uni.setStorageSync('orderInfo',res.data)
uni.navigateTo({
url:'/pagesA/confirmOrder/confirmOrder'
})
}
},error=>{})
},
chooseguig(id,index){
this.orderList = []//清空coding、num参数
this.guigCurrent = index
let ob = this.guigArr.findIndex((item)=>item.id==id)
this.sku_index = ob
this.srcImg = this.$http + this.guigArr[ob].main_image
this.sku_id = id
let chooseBuyObj = {
sku_coding:this.detail.sku_list[this.sku_index].coding,
num:this.num
}
this.orderList.push(chooseBuyObj)
},
delEvent(){
// this.num==1 ? this.num=1 : this.num--
this.num==1 ? this.num=1 : this.num--
this.orderList[0].num = this.num
},
addEvent(){
// this.num==10 ? this.num=10 : this.num++
this.num++
this.orderList[0].num = this.num
},
moveHandle(){
return
}
}
}
</script>
<style>
</style>