feat: ✨ 商品详情页 sku模块 渲染数据
This commit is contained in:
parent
f2ebf64622
commit
e597bea065
145
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts
vendored
Normal file
145
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts
vendored
Normal file
@ -0,0 +1,145 @@
|
||||
import { Component } from '@uni-helper/uni-app-types'
|
||||
|
||||
/** SKU 弹出层 */
|
||||
export type SkuPopup = Component<SkuPopupProps>
|
||||
|
||||
/** SKU 弹出层实例 */
|
||||
export type SkuPopupInstance = InstanceType<SkuPopup>
|
||||
|
||||
/** SKU 弹出层属性 */
|
||||
export type SkuPopupProps = {
|
||||
/** 双向绑定，true 为打开组件，false 为关闭组件 */
|
||||
modelValue: boolean
|
||||
/** 商品信息本地数据源 */
|
||||
localdata: SkuPopupLocaldata
|
||||
/** 按钮模式 1:都显示 2:只显示购物车 3:只显示立即购买 */
|
||||
mode?: 1 | 2 | 3
|
||||
/** 该商品已抢完时的按钮文字 */
|
||||
noStockText?: string
|
||||
/** 库存文字 */
|
||||
stockText?: string
|
||||
/** 点击遮罩是否关闭组件 */
|
||||
maskCloseAble?: boolean
|
||||
/** 顶部圆角值 */
|
||||
borderRadius?: string | number
|
||||
/** 最小购买数量 */
|
||||
minBuyNum?: number
|
||||
/** 最大购买数量 */
|
||||
maxBuyNum?: number
|
||||
/** 每次点击后的数量 */
|
||||
stepBuyNum?: number
|
||||
/** 是否只能输入 step 的倍数 */
|
||||
stepStrictly?: boolean
|
||||
/** 是否隐藏库存的显示 */
|
||||
hideStock?: false
|
||||
/** 主题风格 */
|
||||
theme?: 'default' | 'red-black' | 'black-white' | 'coffee' | 'green'
|
||||
/** 默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元） */
|
||||
amountType?: 1 | 0
|
||||
/** 自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性） */
|
||||
customAction?: () => void
|
||||
/** 是否显示右上角关闭按钮 */
|
||||
showClose?: boolean
|
||||
/** 关闭按钮的图片地址 */
|
||||
closeImage?: string
|
||||
/** 价格的字体颜色 */
|
||||
priceColor?: string
|
||||
/** 立即购买 - 按钮的文字 */
|
||||
buyNowText?: string
|
||||
/** 立即购买 - 按钮的字体颜色 */
|
||||
buyNowColor?: string
|
||||
/** 立即购买 - 按钮的背景颜色 */
|
||||
buyNowBackgroundColor?: string
|
||||
/** 加入购物车 - 按钮的文字 */
|
||||
addCartText?: string
|
||||
/** 加入购物车 - 按钮的字体颜色 */
|
||||
addCartColor?: string
|
||||
/** 加入购物车 - 按钮的背景颜色 */
|
||||
addCartBackgroundColor?: string
|
||||
/** 商品缩略图背景颜色 */
|
||||
goodsThumbBackgroundColor?: string
|
||||
/** 样式 - 不可点击时,按钮的样式 */
|
||||
disableStyle?: object
|
||||
/** 样式 - 按钮点击时的样式 */
|
||||
activedStyle?: object
|
||||
/** 样式 - 按钮常态的样式 */
|
||||
btnStyle?: object
|
||||
/** 字段名 - 商品表id的字段名 */
|
||||
goodsIdName?: string
|
||||
/** 字段名 - sku表id的字段名 */
|
||||
skuIdName?: string
|
||||
/** 字段名 - 商品对应的sku列表的字段名 */
|
||||
skuListName?: string
|
||||
/** 字段名 - 商品规格名称的字段名 */
|
||||
specListName?: string
|
||||
/** 字段名 - sku库存的字段名 */
|
||||
stockName?: string
|
||||
/** 字段名 - sku组合路径的字段名 */
|
||||
skuArrName?: string
|
||||
/** 字段名 - 商品缩略图字段名(未选择sku时) */
|
||||
goodsThumbName?: string
|
||||
/** 被选中的值 */
|
||||
selectArr?: string[]
|
||||
|
||||
/** 打开弹出层 */
|
||||
onOpen: () => void
|
||||
/** 关闭弹出层 */
|
||||
onClose: () => void
|
||||
/** 点击加入购物车时（需选择完SKU才会触发）*/
|
||||
onAddCart: (event: SkuPopupEvent) => void
|
||||
/** 点击立即购买时（需选择完SKU才会触发）*/
|
||||
onBuyNow: (event: SkuPopupEvent) => void
|
||||
}
|
||||
|
||||
/** 商品信息本地数据源 */
|
||||
export type SkuPopupLocaldata = {
|
||||
/** 商品 ID */
|
||||
_id: string
|
||||
/** 商品名称 */
|
||||
name: string
|
||||
/** 商品图片 */
|
||||
goods_thumb: string
|
||||
/** 商品规格列表 */
|
||||
spec_list: SkuPopupSpecItem[]
|
||||
/** 商品SKU列表 */
|
||||
sku_list: SkuPopupSkuItem[]
|
||||
}
|
||||
|
||||
/** 商品规格名称的集合 */
|
||||
export type SkuPopupSpecItem = {
|
||||
/** 规格名称 */
|
||||
name: string
|
||||
/** 规格集合 */
|
||||
list: { name: string }[]
|
||||
}
|
||||
|
||||
/** 商品SKU列表 */
|
||||
export type SkuPopupSkuItem = {
|
||||
/** SKU ID */
|
||||
_id: string
|
||||
/** 商品 ID */
|
||||
goods_id: string
|
||||
/** 商品名称 */
|
||||
goods_name: string
|
||||
/** 商品图片 */
|
||||
image: string
|
||||
/** SKU 价格 * 100, 注意：需要乘以 100 */
|
||||
price: number
|
||||
/** SKU 规格组成, 注意：需要与 spec_list 数组顺序对应 */
|
||||
sku_name_arr: string[]
|
||||
/** SKU 库存 */
|
||||
stock: number
|
||||
}
|
||||
|
||||
/** 当前选择的sku数据 */
|
||||
export type SkuPopupEvent = SkuPopupSkuItem & {
|
||||
/** 商品购买数量 */
|
||||
buy_num: number
|
||||
}
|
||||
|
||||
/** 全局组件类型声明 */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
'vk-data-goods-sku-popup': SkuPopup
|
||||
}
|
||||
}
|
||||
1384
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue
Normal file
1384
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,474 @@
|
||||
<!-- 步进器 -->
|
||||
<template>
|
||||
<view class="vk-data-input-number-box">
|
||||
<view
|
||||
class="u-icon-minus"
|
||||
:class="{ 'u-icon-disabled': disabled || inputVal <= min }"
|
||||
:style="{
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
minHeight: '1.4em',
|
||||
}"
|
||||
@click="emptyClick"
|
||||
@touchstart.prevent="btnTouchStart('minus')"
|
||||
@touchend.stop.prevent="clearTimer"
|
||||
>
|
||||
<view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">－</view>
|
||||
</view>
|
||||
<input
|
||||
v-model="inputVal"
|
||||
:disabled="disabledInput || disabled"
|
||||
:cursor-spacing="getCursorSpacing"
|
||||
:class="{ 'u-input-disabled': disabled }"
|
||||
class="u-number-input"
|
||||
type="number"
|
||||
:style="{
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
width: inputWidth + 'rpx',
|
||||
}"
|
||||
@blur="onBlur"
|
||||
@click="showInput = true"
|
||||
/>
|
||||
<view
|
||||
class="u-icon-plus"
|
||||
:class="{ 'u-icon-disabled': disabled || inputVal >= max }"
|
||||
:style="{
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
minHeight: '1.4em',
|
||||
}"
|
||||
@click="emptyClick"
|
||||
@touchstart.prevent="btnTouchStart('plus')"
|
||||
@touchend.stop.prevent="clearTimer"
|
||||
>
|
||||
<view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">＋</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* numberBox 步进器（此为uview组件改造）
|
||||
* @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 <vk-data-input-number-box :min="1" :max="100"></vk-data-input-number-box>
|
||||
*/
|
||||
export default {
|
||||
name: "vk-data-input-number-box",
|
||||
emits: ["update:modelValue", "input", "change", "blur", "plus", "minus"],
|
||||
props: {
|
||||
// 预显示的数字
|
||||
value: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#FFFFFF"
|
||||
},
|
||||
// 最小值
|
||||
min: {
|
||||
type: [Number, null],
|
||||
default: 0
|
||||
},
|
||||
// 最大值
|
||||
max: {
|
||||
type: [Number, null],
|
||||
default: 99999
|
||||
},
|
||||
// 步进值，每次加或减的值
|
||||
step: {
|
||||
type: [Number, null],
|
||||
default: 1
|
||||
},
|
||||
// 步进值，首次增加或最后减的值
|
||||
stepFirst: {
|
||||
type: [Number, null],
|
||||
default: 0
|
||||
},
|
||||
// 是否只能输入 step 的倍数
|
||||
stepStrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用加减操作
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// input的字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String, null],
|
||||
default: 26
|
||||
},
|
||||
// 加减图标的颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: "#323233"
|
||||
},
|
||||
// input宽度，单位rpx
|
||||
inputWidth: {
|
||||
type: [Number, String, null],
|
||||
default: 80
|
||||
},
|
||||
// input高度，单位rpx
|
||||
inputHeight: {
|
||||
type: [Number, String, null],
|
||||
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, null],
|
||||
default: 100
|
||||
},
|
||||
// 是否开启长按连续递增或递减
|
||||
longPress: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 开启长按触发后，每触发一次需要多久
|
||||
pressTime: {
|
||||
type: [Number, String, null],
|
||||
default: 250
|
||||
},
|
||||
// 是否只能输入大于或等于0的整数(正整数)
|
||||
positiveInteger: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
valueCom(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");
|
||||
},
|
||||
min(v1) {
|
||||
if (v1 !== undefined && v1 != "" && this.valueCom < v1) {
|
||||
this.$emit("input", v1);
|
||||
this.$emit("update:modelValue", v1);
|
||||
}
|
||||
},
|
||||
max(v1) {
|
||||
if (v1 !== undefined && v1 != "" && this.valueCom > v1) {
|
||||
this.$emit("input", v1);
|
||||
this.$emit("update:modelValue", v1);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
|
||||
timer: null, // 用作长按的定时器
|
||||
changeFromInner: false, // 值发生变化，是来自内部还是外部
|
||||
innerChangeTimer: null, // 内部定时器
|
||||
showInput: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.inputVal = Number(this.valueCom);
|
||||
},
|
||||
computed: {
|
||||
valueCom() {
|
||||
// #ifdef VUE2
|
||||
return this.value;
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
return this.modelValue;
|
||||
// #endif
|
||||
},
|
||||
getCursorSpacing() {
|
||||
// 先将值转为px单位，再转为数值
|
||||
return Number(uni.upx2px(this.cursorSpacing));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 空点击事件，主要用于解决PC端H5由于无click事件导致触摸位置不准确的问题
|
||||
emptyClick() {},
|
||||
// 触摸事件开始
|
||||
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 (this.stepStrictly) {
|
||||
let strictly = value % this.step;
|
||||
if (strictly > 0) {
|
||||
value -= strictly;
|
||||
}
|
||||
}
|
||||
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;
|
||||
|
||||
// 新增stepFirst开始
|
||||
if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
|
||||
val = this.stepFirst;
|
||||
}
|
||||
// 新增stepFirst结束
|
||||
if (this.stepStrictly) {
|
||||
let strictly = val % this.step;
|
||||
if (strictly > 0) {
|
||||
val -= strictly;
|
||||
}
|
||||
}
|
||||
if (val > this.max) {
|
||||
val = this.max;
|
||||
} else if (val < this.min) {
|
||||
val = this.min;
|
||||
}
|
||||
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("update:modelValue", 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>
|
||||
.vk-data-input-number-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-number-input {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #f4f4f4;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-icon-plus,
|
||||
.u-icon-minus {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2rpx solid #f4f4f4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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-color: #f2f3f5 !important;
|
||||
}
|
||||
|
||||
.u-input-disabled {
|
||||
color: #c8c9cc !important;
|
||||
background-color: #f2f3f5 !important;
|
||||
}
|
||||
|
||||
.num-btn {
|
||||
font-weight: 550;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
</style>
|
||||
@ -32,7 +32,7 @@
|
||||
<view class="action">
|
||||
<view class="item arrow">
|
||||
<text class="label">选择</text>
|
||||
<text class="text ellipsis"> 请选择商品规格 </text>
|
||||
<text class="text ellipsis" @tap="isShowSkuPopup = true"> 请选择商品规格 </text>
|
||||
</view>
|
||||
<view class="item arrow" @tap="showPopup('address')">
|
||||
<text class="label">送至</text>
|
||||
@ -115,6 +115,14 @@
|
||||
<AddressPanel v-if="popupType === 'address'" @close="handlerClose" />
|
||||
<ServicePanel v-if="popupType === 'service'" @close="handlerClose" />
|
||||
</uni-popup>
|
||||
|
||||
<!-- SKU 商品规格弹出层 -->
|
||||
<vk-data-goods-sku-popup
|
||||
ref="skuPopup"
|
||||
:modelValue="isShowSkuPopup"
|
||||
:localdata="localdata"
|
||||
@onClose="isShowSkuPopup = false"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -126,6 +134,7 @@ import { ref } from 'vue'
|
||||
import ServicePanel from './components/ServicePanel.vue'
|
||||
import AddressPanel from './components/AddressPanel.vue'
|
||||
import PageSkeleton from './components/PageSkeleton.vue'
|
||||
import type { SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
@ -143,6 +152,33 @@ const getGoods = async () => {
|
||||
const res = await getGoodsAPI(query.id)
|
||||
console.log(res.result)
|
||||
goods.value = res.result
|
||||
// 设置 SKU 商品规格弹出层数据
|
||||
localdata.value = {
|
||||
_id: res.result.id,
|
||||
name: res.result.name,
|
||||
goods_thumb: res.result.mainPictures[0],
|
||||
spec_list: res.result.specs.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
list: item.values.map((value) => {
|
||||
return {
|
||||
name: value.name,
|
||||
}
|
||||
}),
|
||||
}
|
||||
}),
|
||||
sku_list: res.result.skus.map((item) => {
|
||||
return {
|
||||
_id: item.id,
|
||||
goods_id: res.result.id,
|
||||
goods_name: res.result.name,
|
||||
image: item.picture,
|
||||
price: item.price * 100,
|
||||
sku_name_arr: item.specs.map((spec) => spec.valueName),
|
||||
stock: item.inventory,
|
||||
}
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
// 当前滚动图索引
|
||||
@ -182,6 +218,10 @@ onLoad(async () => {
|
||||
await getGoods()
|
||||
isLoading.value = false
|
||||
})
|
||||
|
||||
// SKU 商品规格弹出层
|
||||
const isShowSkuPopup = ref(false)
|
||||
const localdata = ref<SkuPopupLocaldata>({} as SkuPopupLocaldata)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user