shop-applet/components/shortPopup.vue

517 lines
15 KiB
Vue
Raw Normal View History

2023-11-14 18:37:34 +08:00
<template>
<view>
<uni-popup ref="popupRef" type="bottom" @change="changeShow">
<view class="pop">
<scroll-view scroll-y class="scroll">
<view class="image">
<swiper class="swiper" :current="current" autoplay style="width: 100%;height: 100%;" @change="changeCurrent">
<block v-if="product.slider_image && product.slider_image.length>0">
<swiper-item v-for="(item,index) in product.slider_image" :key="index">
2023-12-04 15:47:55 +08:00
<image class="img" :src="item" :lazy-load="true"></image>
2023-11-14 18:37:34 +08:00
</swiper-item>
</block>
<swiper-item v-else>
<image class="img" :src="datas.image||defualtImg"></image>
</swiper-item>
</swiper>
<view class="current">{{current+1}}/{{product.slider_image && product.slider_image.length||1}}</view>
<image class="close" src="@/static/images/icon/close.png" @click="close()"></image>
<view class="border"></view>
</view>
<view class="white_card">
<view class="flex flex_end">
<view class="price"><text class="pro">{{leftPrice}}.</text>{{rightPrice}}
</view>
<view>订货价</view>
</view>
<view class="short_name">{{datas.store_name}}</view>
<view class="flex">
<view class="shop_name">
<image class="icon" src="@/static/images/icon/short.png"></image>
<view>{{datas.merchant.mer_name}}</view>
</view>
</view>
<u-line></u-line>
2023-11-17 19:19:24 +08:00
<block name="规格选中" v-for="(att, indexw) in attr" :key="indexw">
<view class="m_title">{{att.attr_name}}</view>
<view class="flex" style="flex-wrap: wrap;">
<view class="attr" :class="{'attr_active': item.check}"
v-for="(item, indexn) in att.attr_value" :key="indexn"
@click="changeAttr(indexw, indexn)">
{{item.attr}}
</view>
</view>
</block>
2023-11-14 18:37:34 +08:00
<view class="m_title num">
<view>购买数量</view>
<view class="input">
<view class="input_item sub" @click="subCartNum">-</view>
<input class="input_item input_view" v-model="cart_num" type="number" @input="inputCartNum" />
<view class="input_item plus" @click="plusCartNum">+</view>
</view>
</view>
<view>
2023-12-11 18:19:04 +08:00
商品库存 <text style="margin-left: 20rpx;">{{sku[changeSkuKey] ? sku[changeSkuKey].stock : change.stock}}</text>
2023-11-14 18:37:34 +08:00
</view>
</view>
</scroll-view>
<view class="button">
<view class="b_icon" @click="navgo('/pages/nongKe/supply_chain/shopping_trolley_a')">
<image src="@/static/images/icon/car.png"></image>
<view>采购车</view>
<view class="badge" v-if="goodsNum">{{goodsNum}}</view>
</view>
<view class="btn" @click.stop="$u.throttle(addcart, 1500)">加入采购清单</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
postCartAdd,
2023-11-17 19:19:24 +08:00
getProductDetail
2023-11-14 18:37:34 +08:00
} from '@/api/store.js';
2023-12-15 19:19:16 +08:00
import { Toast } from '../libs/uniApi';
2023-11-14 18:37:34 +08:00
export default {
name: "shortPopup",
2023-11-17 19:19:24 +08:00
props: {
source:{
2023-12-15 19:19:16 +08:00
type: String | Number,
2023-11-17 19:19:24 +08:00
default: null
}
},
2023-11-14 18:37:34 +08:00
data() {
return {
isShow: false, //当前是否打开弹窗
defualtImg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png',
datas: {
image: '',
store_name: '',
merchant: {
mer_name: ''
},
price: '',
},
product: {},
attrValue: [],
2023-11-17 19:19:24 +08:00
attr: [], //多级规格
changeSkuKey: '', //多级规格选中的key
2023-11-14 18:37:34 +08:00
sku: {}, //规格
sku_key_list: [], //规格名称列表
change: {
stock: ''
},
cart_num: 1, //购买数量
goodsNum: 0, //购物车数量
current: 0, //轮播图当前滑块
};
},
2023-11-17 19:19:24 +08:00
mounted() {
},
2023-11-14 18:37:34 +08:00
computed:{
leftPrice(){
2023-11-17 19:19:24 +08:00
return this.sku[this.changeSkuKey]?.procure_price?.split('.')[0]||'0';
2023-11-14 18:37:34 +08:00
},
rightPrice(){
2023-11-17 19:19:24 +08:00
return this.sku[this.changeSkuKey]?.procure_price?.split('.')[1]||'00';
2023-11-14 18:37:34 +08:00
}
},
methods: {
// 注入参数,
setDatas(datas, goodsNum) {
this.goodsNum = goodsNum;
this.datas = datas;
this.product = datas.product;
this.attrValue = datas.product?.attrValue;
this.change = this.attrValue[0];
this.cart_num = 1;
2023-12-04 15:47:55 +08:00
this.current = 0;
getProductDetail(datas.product_id,{
product_type: 98
}).then((res)=>{
2023-12-11 10:48:34 +08:00
this.sku = res.data.sku||{};
this.sku_key_list = Object.keys(this.sku);
2023-12-04 15:47:55 +08:00
this.attr = res.data.attr;
if(this.attr.length>0){
this.attr.forEach((item, index)=>{
this.changeAttr(index, 0);
})
}else this.changeSkuKey = this.sku_key_list[0] || '';
})
2023-11-14 18:37:34 +08:00
},
// 输入购买数量
inputCartNum(e) {
if(this.sku){
2023-11-17 19:19:24 +08:00
if (+e.detail.value > this.sku[this.changeSkuKey].stock) {
2023-11-14 18:37:34 +08:00
uni.showToast({
icon: 'none',
title: '不能超出库存哦'
})
this.$nextTick(() => {
2023-11-17 19:19:24 +08:00
this.cart_num = this.sku[this.changeSkuKey].stock;
2023-11-14 18:37:34 +08:00
})
}
}else if (this.change.stock <= this.cart_num) {
uni.showToast({
icon: 'none',
title: '不能超出库存哦'
})
this.$nextTick(() => {
this.cart_num = this.change.stock;
})
}
},
// 减少购买数量
subCartNum() {
if (this.cart_num <= 1) {
return uni.showToast({
icon: 'none',
title: '最少要买一件哦'
})
}
this.cart_num--;
},
// 增加购买数量
plusCartNum() {
2023-12-04 15:47:55 +08:00
console.log('加', this.changeSkuKey);
2023-11-14 18:37:34 +08:00
if(this.sku){
2023-11-17 19:19:24 +08:00
if (this.sku[this.changeSkuKey].stock <= this.cart_num) {
2023-11-14 18:37:34 +08:00
return uni.showToast({
icon: 'none',
title: '不能超出库存哦'
})
}
}else if (this.change.stock <= this.cart_num) {
return uni.showToast({
icon: 'none',
title: '不能超出库存哦'
})
}
this.cart_num++;
},
2023-11-17 19:19:24 +08:00
changeAttr: function(indexw, indexn) {
let that = this;
this.$set(this.attr[indexw], 'index', this.attr[indexw].attr_values[indexn]);
this.attr[indexw].attr_value.forEach((item, index)=>{
if(index==indexn)item.check = true;
else item.check = false;
})
let value = that.getCheckedValue().join(",");
this.changeSkuKey = value;
},
//获取被选中属性;
getCheckedValue: function() {
let productAttr = this.attr;
let value = [];
for (let i = 0; i < productAttr.length; i++) {
for (let j = 0; j < productAttr[i].attr_values.length; j++) {
if (productAttr[i].index === productAttr[i].attr_values[j]) {
value.push(productAttr[i].attr_values[j]);
}
}
}
return value;
},
2023-11-14 18:37:34 +08:00
// 加入购物车
addcart() {
2023-11-17 19:19:24 +08:00
// return console.log(this.sku[this.changeSkuKey]);
2023-12-11 18:19:04 +08:00
if(!this.sku[this.changeSkuKey]) return Toast('该规格有错误, 请选择其他规格');
2023-12-04 15:47:55 +08:00
if(+this.sku[this.changeSkuKey].procure_price * +this.cart_num<=0) return Toast('无法购买价格小于等于0的商品');
2023-11-17 19:19:24 +08:00
if (this.sku[this.changeSkuKey]) {
if (this.cart_num > this.sku[this.changeSkuKey].stock) return uni.showToast({
2023-11-14 18:37:34 +08:00
icon: 'none',
title: '不能超出库存哦'
})
let data = {
cart_num: this.cart_num,
is_new: 0,
2023-11-17 19:19:24 +08:00
product_attr_unique: this.sku[this.changeSkuKey].unique,
2023-11-14 18:37:34 +08:00
product_id: this.datas.product_id,
product_type: this.datas.product_type,
2023-12-18 17:55:45 +08:00
source: this.source||11, // 11-供货采购
2023-11-14 18:37:34 +08:00
spread_id: "",
}
let that = this
let res = postCartAdd({
...data
}).then((res, err) => {
uni.showToast({
title: "加入成功",
duration: 1000,
})
this.$emit('addCart');
this.close();
}).catch(err => {
uni.showToast({
title: err,
icon: "none",
duration: 1000,
})
})
} else {
uni.showToast({
icon: 'none',
2023-11-17 19:19:24 +08:00
title: '请完整的选择商品规格'
2023-11-14 18:37:34 +08:00
})
}
},
// 滑动轮播图
changeCurrent(e){
this.current = e.detail.current;
},
navgo(url) {
uni.navigateTo({
url
})
},
open() {
this.$refs.popupRef.open();
},
close() {
this.$refs.popupRef.close();
},
changeShow(e) {
this.isShow = e.show;
}
}
}
</script>
<style lang="scss">
.pop {
background-color: #fff;
border-radius: 31.54rpx 31.54rpx 0rpx 0rpx;
overflow: hidden;
position: relative;
.scroll{
height: calc(90vh - 150rpx);
}
.flex_end {
align-items: flex-end;
}
.image {
height: 750rpx;
width: 750rpx;
position: relative;
.current{
position: absolute;
bottom: 70rpx;
left: 30rpx;
width: 67rpx;
height: 37rpx;
background: rgba(#333, 0.2);
border-radius: 11rpx 11rpx 11rpx 11rpx;
text-align: center;
color: #fff;
font-size: 26rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
}
.img {
width: 100%;
height: 100%;
border-radius: 31.54rpx 31.54rpx 0rpx 0rpx;
overflow: hidden;
}
.close {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 50.82rpx;
height: 50.82rpx;
}
.border {
position: absolute;
bottom: -1rpx;
left: 0;
background-color: #fff;
height: 40rpx;
width: 100%;
border-radius: 40rpx 40rpx 0 0;
}
}
.white_card {
border-radius: 31.54rpx 31.54rpx 0rpx 0rpx;
background-color: #fff;
margin: 0 28rpx;
padding-bottom: 30rpx;
color: #737373;
font-size: 26.29rpx;
.price {
font-size: 35rpx;
font-family: SF Pro Display-Semibold, SF Pro Display;
font-weight: 600;
color: #F84221;
padding-right: 30rpx;
.pro {
font-size: 49.07rpx;
}
}
.short_name {
font-size: 33rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
}
.shop_name {
display: flex;
background: #FEF5F3;
padding: 0 16rpx;
border-radius: 26rpx 26rpx 26rpx 26rpx;
margin-top: 30rpx;
margin-bottom: 20rpx;
align-items: center;
.icon {
width: 31.54rpx;
height: 31.54rpx;
margin-right: 10rpx;
}
}
.m_title {
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-top: 31rpx;
margin-bottom: 21rpx;
}
.attr {
opacity: 1;
border: 1rpx solid #F84221;
color: #333333;
padding: 15rpx 30rpx;
margin-right: 20rpx;
height: 63rpx;
line-height: 60rpx;
border-radius: 63rpx;
display: flex;
align-items: center;
justify-content: center;
2023-11-17 19:19:24 +08:00
margin-bottom: 20rpx;
2023-11-14 18:37:34 +08:00
}
.attr_active{
// background-color: #FEF5F3;
// color: #F84221;
background-color: #F84221;
color: #fff;
}
.num {
display: flex;
justify-content: space-between;
align-items: center;
.input {
display: flex;
align-items: center;
height: 48rpx;
.input_item {
width: 44rpx;
height: 44rpx;
text-align: center;
line-height: 40rpx;
border: 2rpx solid #fff;
font-size: 26rpx;
color: #333;
}
.input_view {
width: 60rpx;
}
.sub {
border: 2rpx solid #FCB9AD;
border-radius: 7rpx 0rpx 0rpx 7rpx;
background: #FFFFFF;
font-size: 26rpx;
color: #B3B3B3;
}
.plus {
border: 2rpx solid #FCB9AD;
border-radius: 0rpx 7rpx 7rpx 0rpx;
background: #FFFFFF;
font-size: 26rpx;
color: #B3B3B3;
}
}
}
}
.button {
padding: 28rpx;
margin-bottom: 28rpx;
background-color: #fff;
display: flex;
justify-content: space-around;
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
.b_icon {
display: flex;
flex-direction: column;
align-items: center;
font-size: 19rpx;
font-weight: 400;
color: #333333;
position: relative;
image {
width: 50.82rpx;
height: 50.82rpx;
}
.badge {
position: absolute;
top: -5rpx;
right: -10rpx;
color: #fff;
min-width: 28rpx;
height: 28rpx;
text-align: center;
line-height: 24rpx;
background: #F84221;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #FFFFFF;
}
}
.btn {
width: 575rpx;
height: 84rpx;
background: linear-gradient(270deg, #FF6D20 0%, #F84221 100%);
border-radius: 42rpx 42rpx 42rpx 42rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
}
}
</style>