init
This commit is contained in:
砂糖
869
fuintUniapp/components/goods-sku-popup/index.vue
Normal file
869
fuintUniapp/components/goods-sku-popup/index.vue
Normal file
@@ -0,0 +1,869 @@
|
||||
<template>
|
||||
<view class="goods-sku-popup popup" catchtouchmove="true" :class="(value && complete) ? 'show' : 'none'"
|
||||
@touchmove.stop.prevent="moveHandle">
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="mask" @click="close('mask')"></view>
|
||||
<!-- 页面开始 -->
|
||||
<view class="layer attr-content" :style="'border-radius: '+borderRadius+'rpx '+borderRadius+'rpx 0 0;'">
|
||||
<view class="specification-wrapper">
|
||||
<scroll-view class="specification-wrapper-content" scroll-y="true">
|
||||
<view class="specification-header">
|
||||
<view class="specification-left">
|
||||
<image class="product-img" :src="selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]"
|
||||
mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="specification-right">
|
||||
<view class="price-content" :style="'color: '+priceColor+' ;'">
|
||||
<text class="sign">¥</text>
|
||||
<text class="price">{{ (selectShop.price || defaultPrice) | priceFilter }}</text>
|
||||
</view>
|
||||
<view class="inventory">{{ stockText }}：{{ selectShop[stockName] || defaultStock }}</view>
|
||||
<view class="choose" v-show="goodsInfo[specListName] && goodsInfo[specListName][0].name !== defaultSingleSkuName">
|
||||
<text v-if="!selectArr.every(val => val == '')">已选：{{ selectArr.join(' ') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="specification-content">
|
||||
<view v-show="goodsInfo[specListName][0].name !== defaultSingleSkuName" class="specification-item" v-for="(item, index1) in goodsInfo[specListName]" :key="index1">
|
||||
<view class="item-title">{{ item.name }}</view>
|
||||
<view class="item-wrapper">
|
||||
<view class="item-content" @tap="skuClick(item_value, index1, $event, index2)" v-for="(item_value, index2) in item.list"
|
||||
:key="index2" :class="[item_value.ishow ? '' : 'noactived', subIndex[index1] == index2 ? 'actived' : '']"
|
||||
:style="[item_value.ishow ? '' : disableStyle,
|
||||
item_value.ishow ? btnStyle :'',
|
||||
subIndex[index1] == index2 ? activedStyle : ''
|
||||
]">
|
||||
{{ item_value.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 1;">
|
||||
<text style="font-size: 26rpx; color: #333; line-height: 50rpx;">数量</text>
|
||||
</view>
|
||||
<view style="flex: 4;text-align: right;">
|
||||
<number-box :min="minBuyNum" :max="maxBuyNum" :step="stepBuyNum" v-model="selectNum"
|
||||
:positive-integer="true">
|
||||
</number-box>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="close" @click="close('close')" v-if="showClose">
|
||||
<image class="close-item" :src="closeImage"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-option">
|
||||
<view class="btn-wrapper" v-if="outFoStock || mode == 4">
|
||||
<view class="sure" style="color:#ffffff;background-color:#cccccc">{{ noStockText }}</view>
|
||||
</view>
|
||||
<view class="btn-wrapper" v-else-if="mode == 1">
|
||||
<view class="sure add-cart" style="border-radius:38rpx 0rpx 0rpx 38rpx;" @click="addCart" :style="'color:'+addCartColor+';background:'+addCartBackgroundColor">{{ addCartText }}</view>
|
||||
<view class="sure" style="border-radius:0rpx 38rpx 38rpx 0rpx;" @click="buyNow" :style="'color:'+buyNowColor+';background-color:'+buyNowBackgroundColor">{{ buyNowText }}</view>
|
||||
</view>
|
||||
<view class="btn-wrapper" v-else-if="mode == 2">
|
||||
<view class="sure add-cart" @click="addCart" :style="'color:'+addCartColor+';background:'+addCartBackgroundColor">{{ addCartText }}</view>
|
||||
</view>
|
||||
<view class="btn-wrapper" v-else-if="mode == 3">
|
||||
<view class="sure" @click="buyNow" :style="'color:'+buyNowColor+';background:'+buyNowBackgroundColor">{{ buyNowText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面结束 -->
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NumberBox from './number-box'
|
||||
|
||||
var that; // 当前页面对象
|
||||
var vk; // 自定义函数集
|
||||
export default {
|
||||
name: 'GoodsSkuPopup',
|
||||
components: {
|
||||
NumberBox
|
||||
},
|
||||
props: {
|
||||
// true 组件显示 false 组件隐藏
|
||||
value: {
|
||||
Type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// vk云函数路由模式参数开始-----------------------------------------------------------
|
||||
// 商品id
|
||||
goodsId: {
|
||||
Type: String,
|
||||
default: ""
|
||||
},
|
||||
// vk路由模式框架下的云函数地址
|
||||
action: {
|
||||
Type: String,
|
||||
default: ""
|
||||
},
|
||||
// vk云函数路由模式参数结束-----------------------------------------------------------
|
||||
// 该商品已抢完时的按钮文字
|
||||
noStockText: {
|
||||
Type: String,
|
||||
default: "该商品已抢完"
|
||||
},
|
||||
// 库存文字
|
||||
stockText: {
|
||||
Type: String,
|
||||
default: "库存"
|
||||
},
|
||||
// 商品表id的字段名
|
||||
goodsIdName: {
|
||||
Type: String,
|
||||
default: "_id"
|
||||
},
|
||||
// sku表id的字段名
|
||||
skuIdName: {
|
||||
Type: String,
|
||||
default: "_id"
|
||||
},
|
||||
// sku_list的字段名
|
||||
skuListName: {
|
||||
Type: String,
|
||||
default: "sku_list"
|
||||
},
|
||||
// spec_list的字段名
|
||||
specListName: {
|
||||
Type: String,
|
||||
default: "spec_list"
|
||||
},
|
||||
// stock的字段名
|
||||
stockName: {
|
||||
Type: String,
|
||||
default: "stock"
|
||||
},
|
||||
// sku_name的字段名
|
||||
skuName: {
|
||||
Type: String,
|
||||
default: "sku_name"
|
||||
},
|
||||
// sku组合路径的字段名
|
||||
skuArrName: {
|
||||
Type: String,
|
||||
default: "sku_name_arr"
|
||||
},
|
||||
// 默认单规格时的规格组名称
|
||||
defaultSingleSkuName: {
|
||||
Type: String,
|
||||
default: "默认"
|
||||
},
|
||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买 4:显示缺货按钮 默认 1
|
||||
mode: {
|
||||
Type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
|
||||
maskCloseAble: {
|
||||
Type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部圆角值
|
||||
borderRadius: {
|
||||
Type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 商品缩略图字段名(未选择sku时)
|
||||
goodsThumbName: {
|
||||
Type: [String],
|
||||
default: "goods_thumb"
|
||||
},
|
||||
// 最小购买数量
|
||||
minBuyNum: {
|
||||
Type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 最大购买数量
|
||||
maxBuyNum: {
|
||||
Type: Number,
|
||||
default: 100000
|
||||
},
|
||||
// 每次点击后的数量
|
||||
stepBuyNum: {
|
||||
Type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 自定义获取商品信息的函数
|
||||
customAction: {
|
||||
Type: [Function],
|
||||
default: null
|
||||
},
|
||||
// 价格的字体颜色
|
||||
priceColor: {
|
||||
Type: String,
|
||||
default: "#fe560a"
|
||||
},
|
||||
// 立即购买按钮的文字
|
||||
buyNowText: {
|
||||
Type: String,
|
||||
default: "立即购买"
|
||||
},
|
||||
// 立即购买按钮的字体颜色
|
||||
buyNowColor: {
|
||||
Type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
// 立即购买按钮的背景颜色
|
||||
buyNowBackgroundColor: {
|
||||
Type: String,
|
||||
default: "linear-gradient(to right, $fuint-theme, $fuint-theme)"
|
||||
},
|
||||
// 加入购物车按钮的文字
|
||||
addCartText: {
|
||||
Type: String,
|
||||
default: "加入购物车"
|
||||
},
|
||||
// 加入购物车按钮的字体颜色
|
||||
addCartColor: {
|
||||
Type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
// 加入购物车按钮的背景颜色
|
||||
addCartBackgroundColor: {
|
||||
Type: String,
|
||||
default: "linear-gradient(to right, $fuint-theme, $fuint-theme)"
|
||||
},
|
||||
// 不可点击时,按钮的样式
|
||||
disableStyle: {
|
||||
Type: Object,
|
||||
default: null
|
||||
},
|
||||
// 按钮点击时的样式
|
||||
activedStyle: {
|
||||
Type: Object,
|
||||
default: null
|
||||
},
|
||||
// 按钮常态的样式
|
||||
btnStyle: {
|
||||
Type: Object,
|
||||
default: null
|
||||
},
|
||||
// 是否显示右上角关闭按钮
|
||||
showClose: {
|
||||
Type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 关闭按钮的图片地址
|
||||
closeImage: {
|
||||
Type: String,
|
||||
default: "https://img.alicdn.com/imgextra/i1/121022687/O1CN01ImN0O11VigqwzpLiK_!!121022687.png"
|
||||
},
|
||||
// 默认库存数量 (未选择sku时)
|
||||
defaultStock: {
|
||||
Type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 默认显示的价格 (未选择sku时)
|
||||
defaultPrice: {
|
||||
Type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
complete: false, // 组件是否加载完成
|
||||
goodsInfo: {}, // 商品信息
|
||||
isShow: false, // true 显示 false 隐藏
|
||||
initKey: true, // 是否已初始化
|
||||
shopItemInfo: {}, // 存放要和选中的值进行匹配的数据
|
||||
selectArr: [], // 存放被选中的值
|
||||
subIndex: [], // 是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
||||
selectShop: {}, // 存放最后选中的商品
|
||||
selectNum: this.minBuyNum, // 选中数量
|
||||
outFoStock: false, // 是否全部sku都缺货
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
if (that.value) {
|
||||
that.open();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
// 清空之前的数据
|
||||
that.selectArr = [];
|
||||
that.subIndex = [];
|
||||
that.selectShop = {};
|
||||
that.selectNum = that.minBuyNum;
|
||||
that.outFoStock = false;
|
||||
that.shopItemInfo = {};
|
||||
|
||||
let specListName = that.specListName;
|
||||
that.goodsInfo[specListName].map(item => {
|
||||
that.selectArr.push('');
|
||||
that.subIndex.push(-1);
|
||||
});
|
||||
|
||||
that.checkItem(); // 计算sku里面规格形成路径
|
||||
that.checkInpath(-1); // 传-1是为了不跳过循环
|
||||
that.autoClickSku(); // 自动选择sku策略
|
||||
},
|
||||
// 使用vk路由模式框架获取商品信息
|
||||
findGoodsInfo() {
|
||||
if (typeof vk == "undefined") {
|
||||
that.toast("custom-action必须是function");
|
||||
return false;
|
||||
}
|
||||
vk.callFunction({
|
||||
url: that.action,
|
||||
title: '请求中...',
|
||||
data: {
|
||||
goods_id: that.goodsId
|
||||
},
|
||||
success(data) {
|
||||
that.updateGoodsInfo(data.goodsInfo);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 更新商品信息(库存、名称、图片)
|
||||
updateGoodsInfo(goodsInfo) {
|
||||
let skuListName = that.skuListName;
|
||||
if (JSON.stringify(that.goodsInfo) === "{}" || that.goodsInfo[that.goodsIdName] !== goodsInfo[that.goodsIdName]) {
|
||||
that.goodsInfo = goodsInfo;
|
||||
that.initKey = true;
|
||||
} else {
|
||||
that.goodsInfo[skuListName] = goodsInfo[skuListName];
|
||||
}
|
||||
if (that.initKey) {
|
||||
that.initKey = false;
|
||||
that.init();
|
||||
}
|
||||
// 更新选中sku的库存信息
|
||||
let select_sku_info = that.getListItem(that.goodsInfo[skuListName], that.skuIdName, that.selectShop[that.skuIdName]);
|
||||
Object.assign(that.selectShop, select_sku_info);
|
||||
that.complete = true;
|
||||
that.$emit("open", true);
|
||||
that.$emit("input", true);
|
||||
},
|
||||
async open() {
|
||||
let findGoodsInfoRun = true;
|
||||
let skuListName = that.skuListName;
|
||||
if (that.customAction && typeof(that.customAction) === 'function') {
|
||||
let goodsInfo = await that.customAction();
|
||||
if (goodsInfo && typeof goodsInfo == "object" && JSON.stringify(goodsInfo) != "{}") {
|
||||
findGoodsInfoRun = false;
|
||||
that.updateGoodsInfo(goodsInfo);
|
||||
} else {
|
||||
that.toast("无法获取到商品信息");
|
||||
that.$emit("input", false);
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
if (findGoodsInfoRun) {
|
||||
that.findGoodsInfo();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 弹出层收起
|
||||
close(s) {
|
||||
if (s == "close") {
|
||||
that.$emit("input", false);
|
||||
that.$emit("close", "close");
|
||||
} else if (s == "mask") {
|
||||
if (that.maskCloseAble) {
|
||||
that.$emit("input", false);
|
||||
that.$emit("close", "mask");
|
||||
}
|
||||
}
|
||||
},
|
||||
moveHandle() {
|
||||
//禁止父元素滑动
|
||||
},
|
||||
// sku按钮的点击事件
|
||||
skuClick(value, index1, event, index2) {
|
||||
if (value.ishow) {
|
||||
if (that.selectArr[index1] != value.name) {
|
||||
that.$set(that.selectArr, index1, value.name);
|
||||
that.$set(that.subIndex, index1, index2);
|
||||
} else {
|
||||
that.$set(that.selectArr, index1, '');
|
||||
that.$set(that.subIndex, index1, -1);
|
||||
}
|
||||
that.checkInpath(index1);
|
||||
// 如果全部选完
|
||||
that.checkSelectShop();
|
||||
}
|
||||
},
|
||||
// 检测是否已经选完sku
|
||||
checkSelectShop() {
|
||||
// 如果全部选完
|
||||
if (that.selectArr.every(item => item != '')) {
|
||||
that.selectShop = that.shopItemInfo[that.selectArr];
|
||||
that.selectNum = that.minBuyNum;
|
||||
} else {
|
||||
that.selectShop = {};
|
||||
}
|
||||
},
|
||||
// 检查路径
|
||||
checkInpath(clickIndex) {
|
||||
let specListName = that.specListName;
|
||||
//循环所有属性判断哪些属性可选
|
||||
//当前选中的兄弟节点和已选中属性不需要循环
|
||||
let specList = that.goodsInfo[specListName];
|
||||
for (let i = 0, len = specList.length; i < len; i++) {
|
||||
if (i == clickIndex) {
|
||||
continue;
|
||||
}
|
||||
let len2 = specList[i].list.length;
|
||||
for (let j = 0; j < len2; j++) {
|
||||
if (that.subIndex[i] != -1 && j == that.subIndex[i]) {
|
||||
continue;
|
||||
}
|
||||
let choosed_copy = [...that.selectArr];
|
||||
that.$set(choosed_copy, i, specList[i].list[j].name);
|
||||
let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
|
||||
if (that.shopItemInfo.hasOwnProperty(choosed_copy2)) {
|
||||
specList[i].list[j].ishow = true;
|
||||
} else {
|
||||
specList[i].list[j].ishow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
that.$set(that.goodsInfo, specListName, specList);
|
||||
},
|
||||
// 计算sku里面规格形成路径
|
||||
checkItem() {
|
||||
let skuListName = that.skuListName;
|
||||
// console.time('计算有多小种可选路径需要的时间是');
|
||||
// 去除库存小于等于0的商品sku
|
||||
let skuList = that.goodsInfo[skuListName];
|
||||
let stockNum = 0;
|
||||
for (let i = 0; i < skuList.length; i++) {
|
||||
if (skuList[i][that.stockName] <= 0) {
|
||||
skuList.splice(i, 1);
|
||||
i--;
|
||||
} else {
|
||||
stockNum += skuList[i][that.stockName];
|
||||
}
|
||||
}
|
||||
if (stockNum <= 0) {
|
||||
that.outFoStock = true;
|
||||
}
|
||||
// 计算有多小种可选路径
|
||||
let result = skuList.reduce(
|
||||
(arrs, items) => {
|
||||
return arrs.concat(
|
||||
items[that.skuArrName].reduce(
|
||||
(arr, item) => {
|
||||
return arr.concat(
|
||||
arr.map(item2 => {
|
||||
// 利用对象属性的唯一性实现二维数组去重
|
||||
if (!that.shopItemInfo.hasOwnProperty([...item2, item])) {
|
||||
that.shopItemInfo[[...item2, item]] = items;
|
||||
}
|
||||
return [...item2, item];
|
||||
})
|
||||
);
|
||||
},
|
||||
[
|
||||
[]
|
||||
]
|
||||
)
|
||||
);
|
||||
},
|
||||
[
|
||||
[]
|
||||
]
|
||||
);
|
||||
},
|
||||
// 检测sku选项是否已全部选完,且有库存
|
||||
checkSelectComplete(obj = {}) {
|
||||
let selectShop = that.selectShop;
|
||||
if (selectShop && selectShop[that.skuIdName] !== undefined) {
|
||||
// 判断库存
|
||||
if (that.selectNum <= selectShop[that.stockName]) {
|
||||
if (typeof obj.success == "function") obj.success(selectShop);
|
||||
} else {
|
||||
that.toast(that.stockText + "不足", "none")
|
||||
}
|
||||
} else {
|
||||
that.toast("请先选择对应规格", "none");
|
||||
}
|
||||
},
|
||||
// 加入购物车
|
||||
addCart() {
|
||||
that.checkSelectComplete({
|
||||
success: function(selectShop) {
|
||||
selectShop.buy_num = that.selectNum;
|
||||
that.$emit("add-cart", selectShop);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 立即购买
|
||||
buyNow() {
|
||||
that.checkSelectComplete({
|
||||
success: function(selectShop) {
|
||||
selectShop.buy_num = that.selectNum;
|
||||
that.$emit("buy-now", selectShop);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 弹窗
|
||||
toast(title, icon) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
});
|
||||
},
|
||||
// 获取对象数组中的某一个item,根据指定的键值
|
||||
getListItem(list, key, value) {
|
||||
let item;
|
||||
for (let i in list) {
|
||||
if (typeof value == "object") {
|
||||
if (JSON.stringify(list[i][key]) === JSON.stringify(value)) {
|
||||
item = list[i];
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (list[i][key] === value) {
|
||||
item = list[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return item;
|
||||
},
|
||||
// 自动选择sku前提是只有一组sku,默认自动选择最前面的有库存的sku
|
||||
autoClickSku() {
|
||||
let skuList = that.goodsInfo[that.skuListName];
|
||||
let specListArr = that.goodsInfo[that.specListName];
|
||||
|
||||
if (specListArr.length == 1) {
|
||||
let specList = specListArr[0].list;
|
||||
|
||||
for (let i = 0; i < specList.length; i++) {
|
||||
let sku = that.getListItem(skuList, that.skuArrName, [specList[i].name]);
|
||||
if (sku) {
|
||||
that.skuClick(specList[i], 0, {}, i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
// 金额显示过滤器
|
||||
priceFilter(n = 0) {
|
||||
if (typeof n == "string") {
|
||||
n = parseFloat(n)
|
||||
}
|
||||
return n ? n.toFixed(2) : n
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
if (val) {
|
||||
that.open();
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* sku弹出层 */
|
||||
.goods-sku-popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999999999;
|
||||
overflow: hidden;
|
||||
&.show {
|
||||
display: block;
|
||||
|
||||
.mask {
|
||||
animation: showPopup 0.2s linear both;
|
||||
}
|
||||
|
||||
.layer {
|
||||
animation: showLayer 0.2s linear both;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
.mask {
|
||||
animation: hidePopup 0.2s linear both;
|
||||
}
|
||||
|
||||
.layer {
|
||||
animation: hideLayer 0.2s linear both;
|
||||
}
|
||||
}
|
||||
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.layer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: 1200rpx;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
background-color: #ffffff;
|
||||
margin-top: 10rpx;
|
||||
overflow-y: scroll;
|
||||
.btn-option {
|
||||
padding: 1rpx;
|
||||
display: block;
|
||||
clear: both;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
.specification-wrapper {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
padding: 30rpx 25rpx;
|
||||
box-sizing: border-box;
|
||||
.specification-wrapper-content {
|
||||
width: 100%;
|
||||
min-height: 300rpx;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*隐藏滚轮*/
|
||||
display: none;
|
||||
}
|
||||
|
||||
.specification-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.specification-left {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
flex: 0 0 180rpx;
|
||||
|
||||
.product-img {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background-color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.specification-right {
|
||||
flex: 1;
|
||||
padding: 0 35rpx 10rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
font-weight: 500;
|
||||
|
||||
.price-content {
|
||||
color: #fe560a;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.sign {
|
||||
font-size: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.inventory {
|
||||
font-size: 24rpx;
|
||||
color: #525252;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.choose {
|
||||
font-size: 24rpx;
|
||||
color: #525252;
|
||||
min-height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.specification-content {
|
||||
font-weight: 500;
|
||||
.specification-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin-bottom: 15rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: wrap;
|
||||
margin-bottom: -20rpx;
|
||||
|
||||
.item-content {
|
||||
display: block;
|
||||
padding: 10rpx 20rpx;
|
||||
min-width: 110rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 2rpx solid #cccccc;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.actived {
|
||||
border-color: #fe560a;
|
||||
color: #fe560a;
|
||||
}
|
||||
|
||||
&.noactived {
|
||||
// background-color: #e4e4e4;
|
||||
// border-color: #e4e4e4;
|
||||
// color: #9e9e9e;
|
||||
// text-decoration: line-through;
|
||||
color: #c8c9cc;
|
||||
background: #f2f3f5;
|
||||
border-color: #f2f3f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 25rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
|
||||
.close-item {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
flex: 0 0 120rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 26rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.layer-btn {
|
||||
width: 335rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
|
||||
&.add-cart {
|
||||
background: #ffbe46;
|
||||
}
|
||||
|
||||
&.buy {
|
||||
background: #fe560a;
|
||||
}
|
||||
}
|
||||
|
||||
.sure {
|
||||
width: 698rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 38rpx;
|
||||
color: #fff;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
background: #fe560a;
|
||||
}
|
||||
|
||||
.sure.add-cart {
|
||||
background: $fuint-theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showPopup {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hidePopup {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showLayer {
|
||||
0% {
|
||||
transform: translateY(120%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hideLayer {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(120%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
394
fuintUniapp/components/goods-sku-popup/number-box/index.vue
Normal file
394
fuintUniapp/components/goods-sku-popup/number-box/index.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<view class="number-box">
|
||||
<view class="u-icon-minus" @touchstart.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
|
||||
:style="{
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
minHeight: '1.4em'
|
||||
}">
|
||||
<view :style="'font-size:'+(Number(size)+10)+'rpx'" class="num-btn">-</view>
|
||||
</view>
|
||||
<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
|
||||
v-model="inputVal" class="u-number-input" @blur="onBlur"
|
||||
type="number" :style="{
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
width: inputWidth + 'rpx',
|
||||
}" />
|
||||
<view class="u-icon-plus" @touchstart.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
|
||||
:style="{
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
minHeight: '1.4em',
|
||||
}">
|
||||
<view :style="'font-size:'+(Number(size)+10)+'rpx'" class="num-btn">＋</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* numberBox 步进器
|
||||
* @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
|
||||
* @tutorial https://www.uviewui.com/components/numberBox.html
|
||||
* @property {Number} value 输入框初始值（默认1）
|
||||
* @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
|
||||
* @property {Number} min 用户可输入的最小值（默认0）
|
||||
* @property {Number} max 用户可输入的最大值（默认99999）
|
||||
* @property {Number} step 步长，每次加或减的值（默认1）
|
||||
* @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
|
||||
* @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
|
||||
* @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
|
||||
* @property {Boolean} positive-integer 是否只能输入正整数（默认true）
|
||||
* @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
|
||||
* @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
|
||||
* @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
|
||||
* @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
|
||||
* @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
|
||||
* @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
|
||||
* @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
|
||||
* @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
|
||||
* @event {Function} change 输入框内容发生变化时触发，对象形式
|
||||
* @event {Function} blur 输入框失去焦点时触发，对象形式
|
||||
* @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
|
||||
* @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
|
||||
* @example <number-box :min="1" :max="100"></number-box>
|
||||
*/
|
||||
export default {
|
||||
name: "NumberBox",
|
||||
props: {
|
||||
// 预显示的数字
|
||||
value: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#F2F3F5'
|
||||
},
|
||||
// 最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: 99999
|
||||
},
|
||||
// 步进值，每次加或减的值
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 步进值，首次增加或最后减的值
|
||||
stepFirst: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否禁用加减操作
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// input的字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
// 加减图标的颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#323233'
|
||||
},
|
||||
// input宽度，单位rpx
|
||||
inputWidth: {
|
||||
type: [Number, String],
|
||||
default: 80
|
||||
},
|
||||
// input高度，单位rpx
|
||||
inputHeight: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
|
||||
// 设置disabled为false，disabledInput为true即可
|
||||
disabledInput: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 输入框于键盘之间的距离
|
||||
cursorSpacing: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
// 是否开启长按连续递增或递减
|
||||
longPress: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 开启长按触发后，每触发一次需要多久
|
||||
pressTime: {
|
||||
type: [Number, String],
|
||||
default: 250
|
||||
},
|
||||
// 是否只能输入大于或等于0的整数(正整数)
|
||||
positiveInteger: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(v1, v2) {
|
||||
// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
|
||||
if(!this.changeFromInner) {
|
||||
this.inputVal = v1;
|
||||
// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
|
||||
// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
|
||||
// 将changeFromInner设置为false
|
||||
this.$nextTick(function(){
|
||||
this.changeFromInner = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
inputVal(v1, v2) {
|
||||
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
|
||||
if (v1 == '') return;
|
||||
let value = 0;
|
||||
// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
|
||||
let tmp = this.isNumber(v1);
|
||||
if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
|
||||
else value = v2;
|
||||
// 判断是否只能输入大于等于0的整数
|
||||
if(this.positiveInteger) {
|
||||
// 小于0，或者带有小数点，
|
||||
if(v1 < 0 || String(v1).indexOf('.') !== -1) {
|
||||
value = v2;
|
||||
// 双向绑定input的值，必须要使用$nextTick修改显示的值
|
||||
this.$nextTick(() => {
|
||||
this.inputVal = v2;
|
||||
})
|
||||
}
|
||||
}
|
||||
// 发出change事件
|
||||
this.handleChange(value, 'change');
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
|
||||
timer: null, // 用作长按的定时器
|
||||
changeFromInner: false, // 值发生变化，是来自内部还是外部
|
||||
innerChangeTimer: null, // 内部定时器
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.inputVal = Number(this.value);
|
||||
},
|
||||
computed: {
|
||||
getCursorSpacing() {
|
||||
// 先将值转为px单位，再转为数值
|
||||
return Number(uni.upx2px(this.cursorSpacing));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击退格键
|
||||
btnTouchStart(callback) {
|
||||
// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
|
||||
this[callback]();
|
||||
// 如果没开启长按功能，直接返回
|
||||
if (!this.longPress) return;
|
||||
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
|
||||
this.timer = null;
|
||||
this.timer = setInterval(() => {
|
||||
// 执行加或减函数
|
||||
this[callback]();
|
||||
}, this.pressTime);
|
||||
},
|
||||
clearTimer() {
|
||||
this.$nextTick(() => {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
})
|
||||
},
|
||||
minus() {
|
||||
this.computeVal('minus');
|
||||
},
|
||||
plus() {
|
||||
this.computeVal('plus');
|
||||
},
|
||||
// 为了保证小数相加减出现精度溢出的问题
|
||||
calcPlus(num1, num2) {
|
||||
let baseNum, baseNum1, baseNum2;
|
||||
try {
|
||||
baseNum1 = num1.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum1 = 0;
|
||||
}
|
||||
try {
|
||||
baseNum2 = num2.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum2 = 0;
|
||||
}
|
||||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
||||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
|
||||
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
|
||||
},
|
||||
// 为了保证小数相加减出现精度溢出的问题
|
||||
calcMinus(num1, num2) {
|
||||
let baseNum, baseNum1, baseNum2;
|
||||
try {
|
||||
baseNum1 = num1.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum1 = 0;
|
||||
}
|
||||
try {
|
||||
baseNum2 = num2.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum2 = 0;
|
||||
}
|
||||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
||||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
|
||||
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
|
||||
},
|
||||
computeVal(type) {
|
||||
uni.hideKeyboard();
|
||||
if (this.disabled) return;
|
||||
let value = 0;
|
||||
// 新增stepFirst开始
|
||||
// 减
|
||||
if (type === 'minus') {
|
||||
if(this.stepFirst > 0 && this.inputVal == this.stepFirst){
|
||||
value = this.min;
|
||||
}else{
|
||||
value = this.calcMinus(this.inputVal, this.step);
|
||||
}
|
||||
} else if (type === 'plus') {
|
||||
if(this.stepFirst > 0 && this.inputVal < this.stepFirst){
|
||||
value = this.stepFirst;
|
||||
}else{
|
||||
value = this.calcPlus(this.inputVal, this.step);
|
||||
}
|
||||
}
|
||||
if (value > this.max ) {
|
||||
value = this.max;
|
||||
}else if (value < this.min) {
|
||||
value = this.min;
|
||||
}
|
||||
// 新增stepFirst结束
|
||||
this.inputVal = value;
|
||||
this.handleChange(value, type);
|
||||
},
|
||||
// 处理用户手动输入的情况
|
||||
onBlur(event) {
|
||||
let val = 0;
|
||||
let value = event.detail.value;
|
||||
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
|
||||
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
|
||||
if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
|
||||
val = +value;
|
||||
if (val > this.max) {
|
||||
val = this.max;
|
||||
} else if (val < this.min) {
|
||||
val = this.min;
|
||||
}
|
||||
// 新增stepFirst开始
|
||||
if(this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal>0){
|
||||
val = this.stepFirst;
|
||||
}
|
||||
// 新增stepFirst结束
|
||||
this.$nextTick(() => {
|
||||
this.inputVal = val;
|
||||
})
|
||||
this.handleChange(val, 'blur');
|
||||
},
|
||||
handleChange(value, type) {
|
||||
if (this.disabled) return;
|
||||
// 清除定时器，避免造成混乱
|
||||
if(this.innerChangeTimer) {
|
||||
clearTimeout(this.innerChangeTimer);
|
||||
this.innerChangeTimer = null;
|
||||
}
|
||||
// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
|
||||
this.changeFromInner = true;
|
||||
// 一定时间内，清除changeFromInner标记，否则内部值改变后
|
||||
// 外部通过程序修改value值，将会无效
|
||||
this.innerChangeTimer = setTimeout(() => {
|
||||
this.changeFromInner = false;
|
||||
}, 150);
|
||||
this.$emit('input', Number(value));
|
||||
this.$emit(type, {
|
||||
// 转为Number类型
|
||||
value: Number(value),
|
||||
index: this.index
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 验证十进制数字
|
||||
*/
|
||||
isNumber(value) {
|
||||
return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.number-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-number-input {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-icon-plus,
|
||||
.u-icon-minus {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-icon-plus {
|
||||
border-radius: 0 8rpx 8rpx 0;
|
||||
}
|
||||
|
||||
.u-icon-minus {
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
}
|
||||
|
||||
.u-icon-disabled {
|
||||
color: #c8c9cc !important;
|
||||
background: #f7f8fa !important;
|
||||
}
|
||||
|
||||
.u-input-disabled {
|
||||
color: #c8c9cc !important;
|
||||
background-color: #f2f3f5 !important;
|
||||
}
|
||||
.num-btn{
|
||||
font-weight:550;
|
||||
position: relative;
|
||||
top:-4rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user