554 lines
14 KiB
Vue
554 lines
14 KiB
Vue
<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">
|
|
<image class="img" :src="item" :lazy-load="true"></image>
|
|
</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>
|
|
<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>
|
|
<view class="m_title num">
|
|
<view>购买数量</view>
|
|
<view class="input">
|
|
<view v-if="once_min_count>1" class="min-count">
|
|
({{once_min_count}}件起购)
|
|
</view>
|
|
<view class="input_item sub" @click="subCartNum">-</view>
|
|
<input class="input_item input_view" v-model="cart_num" type="number"
|
|
@input="inputCartNum" @blur="inputCartNumBlur" />
|
|
<view class="input_item plus" @click="plusCartNum">+</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
商品库存 <text
|
|
style="margin-left: 20rpx;">{{sku[changeSkuKey] ? sku[changeSkuKey].stock : change.stock}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button">
|
|
<view class="b_icon"
|
|
@click="navgo(source==12 ? '/pages/nongKe/supply_chain/shopping_trolley_other?source='+source : '/pages/nongKe/supply_chain/shopping_trolley_a')">
|
|
<image src="@/static/images/icon/car.png"></image>
|
|
<view>采购车</view>
|
|
<view class="badge" v-if="goodsNum">
|
|
<text v-if="goodsNum<100">{{goodsNum}}</text>
|
|
<text v-else>99+</text>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click.stop="$u.throttle(addcart, 1500)">加入采购清单</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
postCartAdd,
|
|
getProductDetail
|
|
} from '@/api/store.js';
|
|
import {
|
|
Toast
|
|
} from '../libs/uniApi';
|
|
export default {
|
|
name: "shortPopup",
|
|
props: {
|
|
source: {
|
|
type: String | Number,
|
|
default: null
|
|
}
|
|
},
|
|
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: [],
|
|
attr: [], //多级规格
|
|
changeSkuKey: '', //多级规格选中的key
|
|
sku: {}, //规格
|
|
sku_key_list: [], //规格名称列表
|
|
change: {
|
|
stock: ''
|
|
},
|
|
cart_num: 1, //购买数量
|
|
goodsNum: 0, //购物车数量
|
|
current: 0, //轮播图当前滑块
|
|
once_min_count: 1, //最少购买件数
|
|
};
|
|
},
|
|
mounted() {},
|
|
computed: {
|
|
leftPrice() {
|
|
return this.sku[this.changeSkuKey]?.wholesale_price?.split('.')[0] || '0';
|
|
},
|
|
rightPrice() {
|
|
return this.sku[this.changeSkuKey]?.wholesale_price?.split('.')[1] || '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;
|
|
this.current = 0;
|
|
getProductDetail(datas.product_id, {
|
|
product_type: 98
|
|
}).then((res) => {
|
|
this.sku = res.data.sku || {};
|
|
this.sku_key_list = Object.keys(this.sku);
|
|
this.attr = res.data.attr;
|
|
if (res.data.once_min_count > 1) {
|
|
this.cart_num = res.data.once_min_count;
|
|
this.once_min_count = res.data.once_min_count;
|
|
}
|
|
if (this.attr.length > 0) {
|
|
this.attr.forEach((item, index) => {
|
|
this.changeAttr(index, 0);
|
|
})
|
|
} else this.changeSkuKey = this.sku_key_list[0] || '';
|
|
})
|
|
},
|
|
// 输入购买数量
|
|
inputCartNum(e) {
|
|
if (/\D/.test(this.cart_num + '')) {
|
|
return this.$nextTick(() => {
|
|
this.cart_num = this.cart_num.replace(/\D/g, '');
|
|
})
|
|
}
|
|
if (this.sku) {
|
|
if (+e.detail.value > this.sku[this.changeSkuKey].stock) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '不能超出库存哦'
|
|
})
|
|
this.$nextTick(() => {
|
|
this.cart_num = this.sku[this.changeSkuKey].stock;
|
|
})
|
|
}
|
|
} else if (this.change.stock <= this.cart_num) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '不能超出库存哦'
|
|
})
|
|
this.$nextTick(() => {
|
|
this.cart_num = this.change.stock;
|
|
})
|
|
}
|
|
},
|
|
// 输入框失去焦点
|
|
inputCartNumBlur(e) {
|
|
if (+e.detail.value < this.once_min_count) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: `至少要买${this.once_min_count}件哦`
|
|
})
|
|
this.$u.sleep(500).then(() => {
|
|
this.cart_num = this.once_min_count;
|
|
})
|
|
}
|
|
},
|
|
// 减少购买数量
|
|
subCartNum() {
|
|
if (this.cart_num <= this.once_min_count) {
|
|
return uni.showToast({
|
|
icon: 'none',
|
|
title: `最少要买${this.once_min_count}件哦`
|
|
})
|
|
}
|
|
this.cart_num--;
|
|
},
|
|
// 增加购买数量
|
|
plusCartNum() {
|
|
console.log('加', this.changeSkuKey);
|
|
if (this.sku) {
|
|
if (this.sku[this.changeSkuKey].stock <= this.cart_num) {
|
|
return uni.showToast({
|
|
icon: 'none',
|
|
title: '不能超出库存哦'
|
|
})
|
|
}
|
|
} else if (this.change.stock <= this.cart_num) {
|
|
return uni.showToast({
|
|
icon: 'none',
|
|
title: '不能超出库存哦'
|
|
})
|
|
}
|
|
this.cart_num++;
|
|
},
|
|
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;
|
|
},
|
|
// 加入购物车
|
|
addcart() {
|
|
// return console.log(this.sku[this.changeSkuKey]);
|
|
if (this.cart_num < this.once_min_count) return Toast(`至少要购买${this.once_min_count}件哦`);
|
|
if (!this.sku[this.changeSkuKey]) return Toast('该规格有错误, 请选择其他规格');
|
|
if (+this.sku[this.changeSkuKey].wholesale_price * +this.cart_num <= 0) return Toast('无法购买价格小于等于0的商品');
|
|
if (this.sku[this.changeSkuKey]) {
|
|
if (this.cart_num > this.sku[this.changeSkuKey].stock) return uni.showToast({
|
|
icon: 'none',
|
|
title: '不能超出库存哦'
|
|
})
|
|
let data = {
|
|
cart_num: this.cart_num,
|
|
is_new: 0,
|
|
product_attr_unique: this.sku[this.changeSkuKey].unique,
|
|
product_id: this.datas.product_id,
|
|
product_type: this.datas.product_type,
|
|
source: this.source || 11, // 11-供货采购
|
|
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',
|
|
title: '请完整的选择商品规格'
|
|
})
|
|
}
|
|
},
|
|
// 滑动轮播图
|
|
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(80vh - 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-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-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-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;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.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;
|
|
|
|
.min-count {
|
|
font-size: 26rpx;
|
|
margin-right: 20rpx;
|
|
color: #F84221;
|
|
}
|
|
|
|
.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-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
</style> |