207 lines
7.9 KiB
Vue
207 lines
7.9 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>
|
|
<!-- 底部弹框 -->
|
|
<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 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 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>
|