You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
911 lines
20 KiB
911 lines
20 KiB
<template>
|
|
<view class="confirm-container">
|
|
<scroll-view class="content-scroll" scroll-y>
|
|
<!-- 预约日期 -->
|
|
<view class="date-section" v-if="needReservation">
|
|
<view class="section-title">
|
|
<text>预约日期</text>
|
|
<text class="required">*</text>
|
|
</view>
|
|
<view class="reservation-desc">
|
|
<text class="desc-text"
|
|
>此商品需要提前{{ goodsInfo.bookDay }}天预约</text
|
|
>
|
|
</view>
|
|
<view class="date-picker-container">
|
|
<uni-datetime-picker
|
|
v-model="selectedDate"
|
|
type="date"
|
|
:clear-icon="false"
|
|
:start="minDate"
|
|
:end="expiryDate"
|
|
placeholder="请选择预约日期"
|
|
@change="onDateChange"
|
|
>
|
|
<view class="date-input">
|
|
<text class="date-text" :class="{ placeholder: !selectedDate }">
|
|
{{ selectedDate || "请选择预约日期" }}
|
|
</text>
|
|
<uni-icons type="calendar" size="18" color="#c0c4cc" />
|
|
</view>
|
|
</uni-datetime-picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品信息 -->
|
|
<view class="goods-section">
|
|
<!-- <view class="section-title">
|
|
<text>{{ goodsInfo.title || "-" }}</text>
|
|
</view> -->
|
|
<view class="goods-card">
|
|
<image class="goods-image" :src="goodsInfo.image" mode="aspectFill" />
|
|
<view class="goods-info">
|
|
<text class="goods-name">{{ goodsInfo.goodsName || "--" }}</text>
|
|
|
|
<!-- 规格选择按钮 -->
|
|
<view class="specifications-list">
|
|
<view
|
|
class="spec-item"
|
|
v-for="(spec, specIndex) in specifications"
|
|
:key="specIndex"
|
|
@click="selectSpecification(specIndex)"
|
|
>
|
|
<view class="spec-content">
|
|
<text class="spec-label">第{{ specIndex + 1 }}份规格</text>
|
|
<text
|
|
class="spec-text"
|
|
:class="{ placeholder: !spec.selectedSpec }"
|
|
>
|
|
{{ spec.selectedSpec || "请选择规格" }}
|
|
</text>
|
|
</view>
|
|
<uni-icons type="right" size="14" color="#c0c4cc" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 到期时间 -->
|
|
<view class="expiry-section">
|
|
<view class="section-title">
|
|
<text>到期时间</text>
|
|
</view>
|
|
<view class="expiry-card">
|
|
<view class="expiry-item">
|
|
<text class="expiry-label">有效期至</text>
|
|
<text class="expiry-value">{{ expiryDate }}</text>
|
|
</view>
|
|
<view class="expiry-desc">
|
|
<text class="desc-text"
|
|
>到期后将自动退款至原支付账户，请及时使用</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="note-section">
|
|
<view class="section-row">
|
|
<text class="section-label">备注</text>
|
|
<view class="note-input">
|
|
<input
|
|
v-model="note"
|
|
placeholder="选填"
|
|
placeholder-class="placeholder"
|
|
maxlength="200"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="submit-section-content" style="height: 230rpx"> </view>
|
|
</scroll-view>
|
|
|
|
<!-- SKU选择弹窗 -->
|
|
<uni-popup ref="specificationPopup" type="bottom">
|
|
<view class="specification-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">选择规格</text>
|
|
<text class="popup-close" @click="closeSpecificationPopup">×</text>
|
|
</view>
|
|
|
|
<view class="popup-content">
|
|
<!-- 商品信息 -->
|
|
<view class="goods-preview">
|
|
<image
|
|
class="preview-image"
|
|
:src="currentGoods.image || '/static/image/goods-default.jpg'"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="preview-info">
|
|
<text class="preview-name">{{ currentGoods.goodsName }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- SKU选择 -->
|
|
<view class="sku-section">
|
|
<text class="sku-title">选择规格</text>
|
|
<view class="sku-options">
|
|
<view
|
|
v-for="(sku, index) in goodsInfo.specCombinations"
|
|
:key="sku.specCombinationId"
|
|
:class="['sku-option', { active: selectedSkuIndex === index }]"
|
|
@click="selectSku(index, sku)"
|
|
>
|
|
<view class="sku-option-content">
|
|
<view class="sku-option-info">
|
|
<text class="sku-option-name">{{
|
|
getSkuDisplayName(sku)
|
|
}}</text>
|
|
<!-- <text class="sku-option-price">¥{{ sku.salePrice }}</text> -->
|
|
</view>
|
|
<view class="sku-option-details">
|
|
<text class="sku-option-quantity"
|
|
>库存: {{ sku.quantity }}</text
|
|
>
|
|
<!-- <text class="sku-option-code">编码: {{ sku.skuCode }}</text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 确认按钮 -->
|
|
<view class="popup-actions">
|
|
<button
|
|
class="confirm-spec-btn"
|
|
@click="confirmSpecification"
|
|
:disabled="selectedSkuIndex === -1"
|
|
>
|
|
确认规格
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 底部提交区域 -->
|
|
<view
|
|
class=" "
|
|
style="position: fixed; width: 100%; bottom: 0; z-index: 98"
|
|
>
|
|
<view class="submit-section">
|
|
<button class="submit-btn" @click="submitOrder">确认下单</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 选中的日期
|
|
selectedDate: "",
|
|
// 到期时间
|
|
expiryDate: "",
|
|
// 商品信息
|
|
goodsInfo: {},
|
|
// 备注
|
|
note: "",
|
|
// 是否需要预约
|
|
needReservation: false,
|
|
// 最小可选日期
|
|
minDate: "",
|
|
// SKU选择相关
|
|
currentSpecIndex: -1,
|
|
currentGoods: {},
|
|
selectedSkuIndex: -1,
|
|
specifications: [],
|
|
orderChildId: "order001",
|
|
};
|
|
},
|
|
|
|
onLoad(options) {
|
|
// 接收页面参数
|
|
if (options.goodsId) {
|
|
this.orderChildId = options.orderChildId;
|
|
this.loadGoodsInfo(options.goodsId, options.orderChildId);
|
|
}
|
|
if (options.goodsName) {
|
|
this.goodsInfo.name = decodeURIComponent(options.goodsName);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 日期变化回调
|
|
onDateChange(date) {
|
|
this.selectedDate = date;
|
|
console.log("选择的日期:", date);
|
|
},
|
|
|
|
// 加载商品信息
|
|
async loadGoodsInfo(goodsId, orderChildId) {
|
|
try {
|
|
// 这里调用实际的API接口获取商品详情
|
|
this.Post(
|
|
{
|
|
orderChildId: orderChildId,
|
|
},
|
|
`/framework/goods/queryByGoodsId/${goodsId}`,
|
|
"DES"
|
|
).then((res) => {
|
|
if (res.code == 200) {
|
|
this.goodsInfo = res.data;
|
|
this.goodsInfo.image = res.data.mainUrl.split(",")[0];
|
|
|
|
// 判断是否需要预约
|
|
const reservationDays = res.data.bookDay || 0;
|
|
this.needReservation = reservationDays > 0;
|
|
this.expiryDate = res.data.expireTime;
|
|
// 设置最小可选日期
|
|
if (this.needReservation) {
|
|
const today = new Date();
|
|
today.setDate(today.getDate() + reservationDays);
|
|
this.minDate = today.toISOString().split("T")[0];
|
|
console.log(this.minDate);
|
|
this.selectedDate = this.minDate;
|
|
}
|
|
|
|
// 初始化规格选择数组
|
|
for (var i = 0; i < res.data.orderChildNum; i++) {
|
|
this.specifications.push({
|
|
selectedSpec: "",
|
|
selectedSkuIndex: -1,
|
|
selectedSku: null,
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error("加载商品信息失败:", error);
|
|
}
|
|
},
|
|
|
|
// 选择规格
|
|
selectSpecification(specIndex) {
|
|
this.currentSpecIndex = specIndex;
|
|
this.currentGoods = this.goodsInfo;
|
|
|
|
// 回显之前的选择
|
|
const currentSpec = this.specifications[specIndex];
|
|
this.selectedSkuIndex = currentSpec.selectedSkuIndex || -1;
|
|
|
|
this.$refs.specificationPopup.open();
|
|
},
|
|
|
|
// 关闭规格选择弹窗
|
|
closeSpecificationPopup() {
|
|
this.$refs.specificationPopup.close();
|
|
this.resetSpecificationData();
|
|
},
|
|
|
|
// 重置规格选择数据
|
|
resetSpecificationData() {
|
|
this.selectedSkuIndex = -1;
|
|
},
|
|
|
|
// 选择SKU
|
|
selectSku(index, sku) {
|
|
if (sku.quantity > 0) {
|
|
this.selectedSkuIndex = index;
|
|
} else {
|
|
uni.showToast({
|
|
title: "当前规格暂无库存",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
|
|
// 获取SKU显示名称
|
|
getSkuDisplayName(sku) {
|
|
let displayName = "";
|
|
if (sku.specValueOne) {
|
|
displayName += sku.specValueOne;
|
|
}
|
|
if (sku.specValueTwo) {
|
|
displayName += ` / ${sku.specValueTwo}`;
|
|
}
|
|
return displayName || "默认规格";
|
|
},
|
|
|
|
// 确认规格选择
|
|
confirmSpecification() {
|
|
if (this.selectedSkuIndex === -1) {
|
|
uni.showToast({
|
|
title: "请选择规格",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const selectedSku =
|
|
this.goodsInfo.specCombinations[this.selectedSkuIndex];
|
|
|
|
// 更新商品规格信息
|
|
this.specifications[this.currentSpecIndex].selectedSpec =
|
|
this.getSkuDisplayName(selectedSku);
|
|
this.specifications[this.currentSpecIndex].selectedSkuIndex =
|
|
this.selectedSkuIndex;
|
|
this.specifications[this.currentSpecIndex].selectedSku = selectedSku;
|
|
|
|
this.closeSpecificationPopup();
|
|
|
|
uni.showToast({
|
|
title: "规格选择成功",
|
|
icon: "success",
|
|
});
|
|
},
|
|
|
|
// 提交订单
|
|
async submitOrder() {
|
|
// 验证必填项
|
|
if (this.needReservation && !this.selectedDate) {
|
|
uni.showToast({
|
|
title: "请选择预约日期",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 验证是否已选择所有规格
|
|
const unselectedSpecs = this.specifications.filter(
|
|
(spec) => !spec.selectedSpec
|
|
);
|
|
if (unselectedSpecs.length > 0) {
|
|
uni.showToast({
|
|
title: "请选择所有规格",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 构建订单数据
|
|
const orderData = {
|
|
goodsId: this.goodsInfo.goodsId,
|
|
reservationTime: this.selectedDate,
|
|
remark: this.note,
|
|
expireTime: this.expiryDate,
|
|
orderChildId: this.orderChildId,
|
|
orderReservationDetails: this.specifications
|
|
.filter((spec) => spec.selectedSpec)
|
|
.map((item) => {
|
|
return {
|
|
specCombinationId: item.selectedSku.specCombinationId,
|
|
specValueOne: item.selectedSku.specValueOne,
|
|
specValueTwo: item.selectedSku.specValueTwo,
|
|
orderChildId: this.orderChildId,
|
|
quantity: 1,
|
|
};
|
|
}),
|
|
};
|
|
this.Post(
|
|
{
|
|
...orderData,
|
|
method: "post",
|
|
},
|
|
"/framework/orderReservation/add",
|
|
"DES"
|
|
).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "预约成功",
|
|
icon: "none",
|
|
});
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: `/subPackages/orderQy/writeOffCode?orderChildId=${this.orderChildId}`,
|
|
});
|
|
}, 800);
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log("订单数据:", orderData);
|
|
|
|
// 直接跳转到核销码展示页面，传递订单信息
|
|
// uni.redirectTo({
|
|
// url: `/subPackages/orderQy/writeOffCode?orderId=123456&goodsInfo=${encodeURIComponent(
|
|
// JSON.stringify(this.goodsInfo)
|
|
// )}&specifications=${encodeURIComponent(
|
|
// JSON.stringify(
|
|
// this.specifications.filter((spec) => spec.selectedSpec)
|
|
// )
|
|
// )}&selectedDate=${this.selectedDate}`,
|
|
// });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 主题色彩变量
|
|
$primary-color: #667eea;
|
|
$secondary-color: #f8f9fa;
|
|
$text-primary: #2d3748;
|
|
$text-secondary: #718096;
|
|
$text-muted: #a0aec0;
|
|
$border-color: #e2e8f0;
|
|
$success-color: #48bb78;
|
|
$warning-color: #ed8936;
|
|
$danger-color: #f56565;
|
|
$bg-light: #f7fafc;
|
|
|
|
.confirm-container {
|
|
height: 100vh;
|
|
background-color: $bg-light;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content-scroll {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
width: 710rpx;
|
|
}
|
|
|
|
// 通用section样式
|
|
.section-header,
|
|
.section-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 30rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
font-weight: 600;
|
|
margin-bottom: 16rpx;
|
|
|
|
.required {
|
|
color: $danger-color;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
|
|
// 预约日期
|
|
.date-section {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.reservation-desc {
|
|
margin-bottom: 16rpx;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.desc-text {
|
|
font-size: 24rpx;
|
|
color: $text-secondary;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.date-picker-container {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx 30rpx;
|
|
}
|
|
|
|
.date-input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.date-text {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
|
|
&.placeholder {
|
|
color: $text-muted;
|
|
}
|
|
}
|
|
|
|
// 商品信息
|
|
.goods-section {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.goods-card {
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.goods-image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 12rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.goods-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 26rpx;
|
|
color: $text-primary;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
// 到期时间
|
|
.expiry-section {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.expiry-card {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx 30rpx;
|
|
}
|
|
|
|
.expiry-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.expiry-label {
|
|
font-size: 26rpx;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.expiry-value {
|
|
font-size: 26rpx;
|
|
color: $text-primary;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.expiry-desc {
|
|
padding-top: 12rpx;
|
|
border-top: 1rpx solid $border-color;
|
|
|
|
.desc-text {
|
|
font-size: 24rpx;
|
|
color: $warning-color;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
// 备注
|
|
.note-section {
|
|
margin-bottom: 24rpx;
|
|
|
|
.section-row {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.note-input {
|
|
flex: 1;
|
|
margin-left: 40rpx;
|
|
|
|
input {
|
|
font-size: 26rpx;
|
|
color: $text-primary;
|
|
text-align: right;
|
|
width: 100%;
|
|
}
|
|
|
|
.placeholder {
|
|
color: $text-muted;
|
|
}
|
|
}
|
|
|
|
// 费用明细
|
|
.cost-section {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx 30rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.cost-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16rpx 0;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
.cost-label {
|
|
font-size: 26rpx;
|
|
color: $text-primary;
|
|
}
|
|
|
|
.cost-value {
|
|
font-size: 26rpx;
|
|
color: $text-primary;
|
|
|
|
&.coupon {
|
|
color: $text-muted;
|
|
}
|
|
}
|
|
|
|
// 底部提交区域
|
|
.submit-section {
|
|
flex-shrink: 0; // 防止被压缩
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24rpx 30rpx;
|
|
background-color: #ffffff;
|
|
border-top: 1px solid $border-color;
|
|
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
|
// 添加安全区域适配
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.submit-section-content {
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
background-color: $text-primary;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 24rpx;
|
|
padding: 16rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
background-color: rgba(45, 55, 72, 0.8);
|
|
}
|
|
}
|
|
|
|
// SKU选择弹窗样式
|
|
.specification-popup {
|
|
background: white;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx 30rpx 24rpx;
|
|
border-bottom: 1rpx solid $border-color;
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: $text-primary;
|
|
}
|
|
|
|
.popup-close {
|
|
font-size: 40rpx;
|
|
color: $text-muted;
|
|
line-height: 1;
|
|
padding: 8rpx;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
|
|
&:active {
|
|
color: $text-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 30rpx;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// 商品预览
|
|
.goods-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 24rpx;
|
|
background: $bg-light;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.preview-image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 12rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.preview-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.preview-name {
|
|
font-size: 26rpx;
|
|
color: $text-primary;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
// SKU选择区域
|
|
.sku-section {
|
|
margin-bottom: 30rpx;
|
|
|
|
.sku-title {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
font-weight: 600;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.sku-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.sku-option {
|
|
padding: 20rpx;
|
|
border: 2rpx solid $border-color;
|
|
border-radius: 12rpx;
|
|
background: white;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
&.active {
|
|
border-color: $primary-color;
|
|
background: rgba(102, 126, 234, 0.05);
|
|
}
|
|
|
|
.sku-option-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.sku-option-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sku-option-name {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sku-option-price {
|
|
font-size: 28rpx;
|
|
color: $danger-color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sku-option-details {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.sku-option-quantity {
|
|
color: $success-color;
|
|
}
|
|
|
|
.sku-option-code {
|
|
color: $text-muted;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 确认按钮
|
|
.popup-actions {
|
|
padding: 24rpx 30rpx 40rpx;
|
|
border-top: 1rpx solid $border-color;
|
|
background: white;
|
|
|
|
.confirm-spec-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: $primary-color;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
background: rgba(102, 126, 234, 0.8);
|
|
}
|
|
|
|
&:disabled {
|
|
background: $text-muted;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 商品卡片中的规格信息样式
|
|
.specifications-list {
|
|
margin: 12rpx 0;
|
|
}
|
|
|
|
.spec-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.spec-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.spec-label {
|
|
font-size: 22rpx;
|
|
color: $text-secondary;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.spec-text {
|
|
font-size: 24rpx;
|
|
color: $text-primary;
|
|
font-weight: 500;
|
|
|
|
&.placeholder {
|
|
color: $text-muted;
|
|
}
|
|
}
|
|
</style>
|
|
|