1734 lines
40 KiB
Vue
1734 lines
40 KiB
Vue
<template>
|
||
<view class="goods-container">
|
||
<!-- 商品价格 -->
|
||
<view class="price-section">
|
||
<view class="price-main">
|
||
<text class="price-value">{{ goodsInfo.price }}</text>
|
||
</view>
|
||
<view class="" style="display: flex;flex-direction: column;justify-content: space-around;">
|
||
<text class="price-unit">RMB</text>
|
||
<text class="price-per-unit">{{ $t('goods.perUnit') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品图片轮播 -->
|
||
<view class="product-swiper-wrapper">
|
||
<swiper class="product-swiper" :indicator-dots="goodsInfo.imageList.length > 1" :autoplay="true"
|
||
:interval="3000" :duration="500" indicator-color="rgba(255, 255, 255, 0.5)"
|
||
indicator-active-color="#07c160">
|
||
<swiper-item v-for="(image, index) in goodsInfo.imageList" :key="index">
|
||
<view class="swiper-item-wrapper">
|
||
<image :src="image" mode="aspectFit" class="product-image" lazy-load="true"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 商品名称 -->
|
||
<view class="product-name">
|
||
<text>{{ goodsInfo.name }}</text>
|
||
</view>
|
||
|
||
<!-- 商品特性 -->
|
||
<view class="features-section">
|
||
<view class="feature-item">
|
||
<view class="feature-icon">
|
||
<image src="@/static/battery-icon.png" mode="aspectFit" class="icon-img" lazy-load="true"></image>
|
||
</view>
|
||
<view class="" style="display: flex;flex-direction: column;align-items: center;">
|
||
<text class="feature-label">{{ $t('goods.features.battery') }}</text>
|
||
<text class="feature-desc">{{ $t('goods.features.batteryDesc') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="feature-item">
|
||
<view class="feature-icon">
|
||
<image src="@/static/wind-icon.png" mode="aspectFit" class="icon-img" lazy-load="true"></image>
|
||
</view>
|
||
<view class="" style="display: flex;flex-direction: column;align-items: center;">
|
||
<text class="feature-label">{{ $t('goods.features.wind') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="feature-item">
|
||
<view class="feature-icon">
|
||
<image src="@/static/temp-icon.png" mode="aspectFit" class="icon-img" lazy-load="true"></image>
|
||
</view>
|
||
<view class="" style="display: flex;flex-direction: column;align-items: center;">
|
||
<text class="feature-label">{{ $t('goods.features.temp') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="feature-item">
|
||
<view class="feature-icon">
|
||
<image src="@/static/charge-icon.png" mode="aspectFit" class="icon-img" lazy-load="true"></image>
|
||
</view>
|
||
<view class="" style="display: flex;flex-direction: column;align-items: center;">
|
||
<text class="feature-label">{{ $t('goods.features.charge') }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品详情描述 -->
|
||
<view class="description-section">
|
||
<view class="section-title">{{ $t('goods.productDetail') }}</view>
|
||
<view class="description-content">
|
||
<text class="description-text">
|
||
{{ $t('goods.description') }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部购买按钮 -->
|
||
<view class="footer">
|
||
<view class="" style="display: flex;flex-direction: column;width: 140rpx;align-items: center;margin-right: 20rpx;" @click="GotoList">
|
||
<image src="/static/jl.png" mode="scaleToFill" style="width: 35rpx;height:35rpx;" lazy-load="true"></image>
|
||
<text style="font-size: 26rpx;">定制记录</text>
|
||
</view>
|
||
<view class="buy-button" @click="handleBuy">
|
||
<view class="button-content">
|
||
<view class="price-info">
|
||
<text class="footer-price-symbol">¥</text>
|
||
<text class="footer-price-value">{{ selectedSku.price || goodsInfo.price }}</text>
|
||
</view>
|
||
<text class="buy-text">{{ $t('goods.buyNow') }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 规格选择弹窗 -->
|
||
<view class="popup-mask" v-if="showSkuPopup" @click="closeSkuPopup">
|
||
<view class="popup-container" @click.stop>
|
||
<view class="sku-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择规格</text>
|
||
<view class="close-btn" @click="closeSkuPopup">
|
||
<text class="close-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sku-info">
|
||
<image v-if="selectedSku.pictureUrl" :src="selectedSku.pictureUrl" class="sku-image"
|
||
mode="aspectFit" lazy-load="true"></image>
|
||
<view class="sku-detail">
|
||
<text class="sku-price">¥{{ selectedSku.price || goodsInfo.price }}</text>
|
||
<text class="sku-name">{{ selectedSku.optionName || '请选择规格' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sku-list">
|
||
<text class="sku-list-title">规格</text>
|
||
<view class="sku-options">
|
||
<view v-for="sku in goodsInfo.skuList" :key="sku.skuId" class="sku-option"
|
||
:class="{ 'active': selectedSku.skuId === sku.skuId }" @click="selectSku(sku)">
|
||
<text class="sku-option-text">{{ sku.optionName }}</text>
|
||
<text class="sku-option-color" v-if="sku.color">{{ sku.color }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="quantity-section">
|
||
<text class="quantity-label">数量</text>
|
||
<view class="quantity-control">
|
||
<view class="quantity-btn" :class="{ 'disabled': quantity <= 1 }" @click="decreaseQuantity">
|
||
<text>-</text>
|
||
</view>
|
||
<input class="quantity-input" type="number" v-model.number="quantity"
|
||
@blur="validateQuantity" />
|
||
<view class="quantity-btn" @click="increaseQuantity">
|
||
<text>+</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<view class="confirm-btn" @click="confirmSku">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 收货信息填写弹窗 -->
|
||
<view class="popup-mask" v-if="showAddressPopup" @click="closeAddressPopup">
|
||
<view class="popup-container" @click.stop>
|
||
<view class="address-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">填写收货信息</text>
|
||
<view class="close-btn" @click="closeAddressPopup">
|
||
<text class="close-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-section">
|
||
<view class="form-item">
|
||
<text class="form-label">收件人</text>
|
||
<input class="form-input" v-model="addressForm.receiverName" placeholder="请输入收件人姓名"
|
||
placeholder-class="input-placeholder" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">手机号</text>
|
||
<input class="form-input" v-model="addressForm.receiverPhone" type="number" maxlength="11"
|
||
placeholder="请输入手机号" placeholder-class="input-placeholder" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">收货地区</text>
|
||
<!-- 非支付宝小程序：使用多列 picker -->
|
||
<!-- #ifndef MP-ALIPAY -->
|
||
<picker mode="multiSelector" :range="regionColumns" range-key="name" :value="regionIndexes"
|
||
@change="onRegionChange" @columnchange="onRegionColumnChange">
|
||
<view class="form-input region-selector">
|
||
<text v-if="addressForm.province && addressForm.city && addressForm.district"
|
||
class="region-text">
|
||
{{ addressForm.province }} {{ addressForm.city }} {{ addressForm.district }}
|
||
</text>
|
||
<text v-else class="input-placeholder">请选择省市区</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</picker>
|
||
<!-- #endif -->
|
||
|
||
<!-- 支付宝小程序：使用自定义弹窗 + picker-view -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<view class="form-input region-selector" @click="showRegionPicker = true">
|
||
<text v-if="addressForm.province && addressForm.city && addressForm.district"
|
||
class="region-text">
|
||
{{ addressForm.province }} {{ addressForm.city }} {{ addressForm.district }}
|
||
</text>
|
||
<text v-else class="input-placeholder">请选择省市区</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">详细地址</text>
|
||
<textarea class="form-textarea" v-model="addressForm.receiverAddress"
|
||
placeholder="请输入详细地址（街道、门牌号等）" placeholder-class="input-placeholder" :maxlength="200"
|
||
:show-confirm-bar="false" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">备注</text>
|
||
<textarea class="form-textarea" v-model="addressForm.remark" placeholder="选填，可以告诉我们您的特殊需求"
|
||
placeholder-class="input-placeholder" :maxlength="200" :show-confirm-bar="false" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<view class="confirm-btn" @click="confirmAddress">
|
||
<text>确认并支付</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 地址展示弹窗（已有地址时显示） -->
|
||
<view class="popup-mask" v-if="showAddressDisplay" @click="closeAddressDisplay">
|
||
<view class="popup-container" @click.stop>
|
||
<view class="address-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">收货信息</text>
|
||
<view class="close-btn" @click="closeAddressDisplay">
|
||
<text class="close-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-section">
|
||
<view class="display-item">
|
||
<text class="display-label">收件人</text>
|
||
<text class="display-value">{{ savedAddress.receiverName }}</text>
|
||
</view>
|
||
|
||
<view class="display-item">
|
||
<text class="display-label">手机号</text>
|
||
<text class="display-value">{{ savedAddress.receiverPhone }}</text>
|
||
</view>
|
||
|
||
<view class="display-item">
|
||
<text class="display-label">收货地址</text>
|
||
<text class="display-value">{{ savedAddress.fullAddress }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<view class="button-group">
|
||
<view class="secondary-btn" @click="changeAddress">
|
||
<text>更换地址</text>
|
||
</view>
|
||
<view class="confirm-btn" @click="payNow">
|
||
<text>立即支付</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付宝小程序地区选择弹窗 -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<view class="popup-mask" v-if="showRegionPicker" @click="closeRegionPicker">
|
||
<view class="popup-container" @click.stop>
|
||
<view class="address-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择省市区</text>
|
||
<view class="close-btn" @click="closeRegionPicker">
|
||
<text class="close-icon">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-section">
|
||
<picker-view :value="regionIndexes" @change="onAliRegionChange"
|
||
indicator-style="height: 50px;">
|
||
<picker-view-column>
|
||
<view v-for="item in regionColumns[0]" :key="item.code">
|
||
{{ item.name }}
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="item in regionColumns[1]" :key="item.code">
|
||
{{ item.name }}
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="item in regionColumns[2]" :key="item.code">
|
||
{{ item.name }}
|
||
</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<view class="confirm-btn" @click="confirmAliRegion">
|
||
<text>确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
computed
|
||
} from 'vue'
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
useI18n
|
||
} from '@/utils/i18n.js'
|
||
import {
|
||
getProductDetail,
|
||
createProductOrder,
|
||
getUserAddress
|
||
} from '@/config/api/product.js'
|
||
import {
|
||
cancelProductOrder
|
||
} from '@/config/api/order.js'
|
||
import pcaData from '@/components/pca.json'
|
||
|
||
const {
|
||
t
|
||
} = useI18n()
|
||
|
||
// 商品信息
|
||
const goodsInfo = ref({
|
||
id: '',
|
||
name: '',
|
||
price: 99,
|
||
image: '/static/product-fan.png',
|
||
imageList: ['/static/product-fan.png'], // 图片列表用于轮播
|
||
description: '',
|
||
features: [],
|
||
skuList: [] // 商品规格列表
|
||
})
|
||
|
||
// 选中的规格
|
||
const selectedSku = ref({
|
||
skuId: '',
|
||
price: '',
|
||
pictureUrl: '',
|
||
optionName: '',
|
||
color: ''
|
||
})
|
||
|
||
// 购买数量
|
||
const quantity = ref(1)
|
||
|
||
// 收货信息表单
|
||
const addressForm = ref({
|
||
receiverName: '',
|
||
receiverPhone: '',
|
||
province: '',
|
||
provinceCode: '',
|
||
city: '',
|
||
cityCode: '',
|
||
district: '',
|
||
districtCode: '',
|
||
receiverAddress: '',
|
||
remark: ''
|
||
})
|
||
|
||
// 已保存的地址信息（用于判断是否已有地址）
|
||
const savedAddress = ref(null)
|
||
|
||
// 地区选择相关（uni原生picker）
|
||
const provinceList = ref([])
|
||
const cityList = ref([])
|
||
const districtList = ref([])
|
||
const regionColumns = ref([
|
||
[],
|
||
[],
|
||
[]
|
||
]) // 三列数据：省、市、区
|
||
const regionIndexes = ref([0, 0, 0]) // 当前选中的索引
|
||
|
||
// 弹窗显示状态
|
||
const showSkuPopup = ref(false)
|
||
const showAddressPopup = ref(false)
|
||
const showAddressDisplay = ref(false) // 地址展示弹窗
|
||
const showRegionPicker = ref(false) // 支付宝地区选择弹窗
|
||
|
||
// 计算是否已有地址
|
||
const hasAddress = computed(() => {
|
||
return savedAddress.value !== null
|
||
})
|
||
|
||
// 加载状态
|
||
const loading = ref(false)
|
||
|
||
// 页面加载
|
||
onLoad((options) => {
|
||
if (options.productId) {
|
||
goodsInfo.value.id = options.productId
|
||
// 根据 productId 获取商品详情
|
||
fetchGoodsDetail(options.productId)
|
||
} else if (options.goodsId) {
|
||
// 兼容旧的参数名
|
||
goodsInfo.value.id = options.goodsId
|
||
fetchGoodsDetail(options.goodsId)
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
uni.setNavigationBarTitle({
|
||
title: t('goods.goodsTitle')
|
||
})
|
||
// 初始化地区数据
|
||
initRegionData()
|
||
// 获取用户收货地址
|
||
fetchUserAddress()
|
||
})
|
||
|
||
// 初始化地区数据
|
||
const initRegionData = () => {
|
||
// 获取省份列表
|
||
const provinces = pcaData['86']
|
||
provinceList.value = Object.keys(provinces).map(code => ({
|
||
code,
|
||
name: provinces[code]
|
||
}))
|
||
|
||
// 初始化第一列（省份）
|
||
regionColumns.value[0] = provinceList.value
|
||
|
||
// 初始化第二列（城市）- 默认加载第一个省份的城市
|
||
if (provinceList.value.length > 0) {
|
||
const firstProvinceCode = provinceList.value[0].code
|
||
const cities = pcaData[firstProvinceCode]
|
||
if (cities) {
|
||
cityList.value = Object.keys(cities).map(code => ({
|
||
code,
|
||
name: cities[code]
|
||
}))
|
||
regionColumns.value[1] = cityList.value
|
||
|
||
// 初始化第三列（区县）- 默认加载第一个城市的区县
|
||
if (cityList.value.length > 0) {
|
||
const firstCityCode = cityList.value[0].code
|
||
const districts = pcaData[firstCityCode]
|
||
if (districts) {
|
||
districtList.value = Object.keys(districts).map(code => ({
|
||
code,
|
||
name: districts[code]
|
||
}))
|
||
regionColumns.value[2] = districtList.value
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取城市列表
|
||
const getCityList = (provinceCode) => {
|
||
const cities = pcaData[provinceCode]
|
||
if (cities) {
|
||
return Object.keys(cities).map(code => ({
|
||
code,
|
||
name: cities[code]
|
||
}))
|
||
}
|
||
return []
|
||
}
|
||
|
||
// 获取区县列表
|
||
const getDistrictList = (cityCode) => {
|
||
const districts = pcaData[cityCode]
|
||
if (districts) {
|
||
return Object.keys(districts).map(code => ({
|
||
code,
|
||
name: districts[code]
|
||
}))
|
||
}
|
||
return []
|
||
}
|
||
|
||
// picker列变化事件
|
||
const onRegionColumnChange = (e) => {
|
||
const {
|
||
column,
|
||
value
|
||
} = e.detail
|
||
const newIndexes = [...regionIndexes.value]
|
||
newIndexes[column] = value
|
||
|
||
if (column === 0) {
|
||
// 省份变化，更新城市和区县列表
|
||
const provinceCode = regionColumns.value[0][value].code
|
||
const cities = getCityList(provinceCode)
|
||
regionColumns.value[1] = cities
|
||
newIndexes[1] = 0 // 重置城市索引
|
||
|
||
if (cities.length > 0) {
|
||
const cityCode = cities[0].code
|
||
const districts = getDistrictList(cityCode)
|
||
regionColumns.value[2] = districts
|
||
newIndexes[2] = 0 // 重置区县索引
|
||
} else {
|
||
regionColumns.value[2] = []
|
||
}
|
||
} else if (column === 1) {
|
||
// 城市变化，更新区县列表
|
||
const cityCode = regionColumns.value[1][value].code
|
||
const districts = getDistrictList(cityCode)
|
||
regionColumns.value[2] = districts
|
||
newIndexes[2] = 0 // 重置区县索引
|
||
}
|
||
|
||
regionIndexes.value = newIndexes
|
||
}
|
||
|
||
// picker确认选择
|
||
const onRegionChange = (e) => {
|
||
const indexes = e.detail.value
|
||
regionIndexes.value = indexes
|
||
|
||
// 获取选中的省市区
|
||
const province = regionColumns.value[0][indexes[0]]
|
||
const city = regionColumns.value[1][indexes[1]]
|
||
const district = regionColumns.value[2][indexes[2]]
|
||
|
||
// 更新表单数据
|
||
addressForm.value.province = province.name
|
||
addressForm.value.provinceCode = province.code
|
||
addressForm.value.city = city.name
|
||
addressForm.value.cityCode = city.code
|
||
addressForm.value.district = district.name
|
||
addressForm.value.districtCode = district.code
|
||
}
|
||
|
||
// 支付宝小程序 picker-view 列变化
|
||
const onAliRegionChange = (e) => {
|
||
const newVal = e.detail.value || []
|
||
const oldVal = regionIndexes.value || []
|
||
|
||
// 找出发生变化的列
|
||
let column = -1
|
||
for (let i = 0; i < newVal.length; i++) {
|
||
if (newVal[i] !== oldVal[i]) {
|
||
column = i
|
||
break
|
||
}
|
||
}
|
||
|
||
if (column !== -1) {
|
||
onRegionColumnChange({
|
||
detail: {
|
||
column,
|
||
value: newVal[column]
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 关闭支付宝地区弹窗
|
||
const closeRegionPicker = () => {
|
||
showRegionPicker.value = false
|
||
}
|
||
|
||
// 支付宝地区选择“确定”
|
||
const confirmAliRegion = () => {
|
||
onRegionChange({
|
||
detail: {
|
||
value: regionIndexes.value
|
||
}
|
||
})
|
||
closeRegionPicker()
|
||
}
|
||
|
||
// 获取用户收货地址
|
||
const fetchUserAddress = async () => {
|
||
try {
|
||
const res = await getUserAddress()
|
||
console.log('获取收货地址结果:', res)
|
||
|
||
if (res && res.code === 200 && res.data) {
|
||
// 保存地址信息
|
||
savedAddress.value = {
|
||
receiverName: res.data.userName || '',
|
||
receiverPhone: res.data.userPhone || '',
|
||
province: res.data.province || '',
|
||
city: res.data.city || '',
|
||
district: res.data.district || '',
|
||
receiverAddress: res.data.userAddress || '',
|
||
fullAddress: `${res.data.province || ''}${res.data.city || ''}${res.data.district || ''}${res.data.userAddress || ''}`
|
||
}
|
||
console.log('收货地址已保存:', savedAddress.value)
|
||
}
|
||
} catch (error) {
|
||
console.error('获取收货地址异常:', error)
|
||
// 获取地址失败不影响用户继续操作，静默处理
|
||
}
|
||
}
|
||
|
||
// 获取商品详情
|
||
const fetchGoodsDetail = async (productId) => {
|
||
try {
|
||
loading.value = true
|
||
uni.showLoading({
|
||
title: t('common.loading'),
|
||
mask: true
|
||
})
|
||
|
||
const res = await getProductDetail(productId)
|
||
|
||
console.log('商品详情查询结果:', res)
|
||
|
||
if (res && res.code === 200 && res.data) {
|
||
const product = res.data
|
||
|
||
// 获取第一个 SKU 的信息（价格和图片）
|
||
const firstSku = product.skuList && product.skuList.length > 0 ? product.skuList[0] : null
|
||
|
||
// 收集所有 SKU 的图片用于轮播
|
||
let imageList = []
|
||
if (product.skuList && product.skuList.length > 0) {
|
||
product.skuList.forEach(sku => {
|
||
// 如果有 pictureUrlList，使用它
|
||
if (sku.pictureUrlList && sku.pictureUrlList.length > 0) {
|
||
imageList = imageList.concat(sku.pictureUrlList)
|
||
} else if (sku.pictureUrl) {
|
||
// 否则使用单张图片
|
||
imageList.push(sku.pictureUrl)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 去重图片列表
|
||
imageList = [...new Set(imageList)]
|
||
|
||
// 如果没有图片，使用默认图片
|
||
if (imageList.length === 0) {
|
||
imageList = ['/static/product-fan.png']
|
||
}
|
||
|
||
// 更新商品信息（根据实际返回的字段名）
|
||
goodsInfo.value = {
|
||
id: product.id,
|
||
name: product.productName || '商品名称',
|
||
price: firstSku?.price || 99,
|
||
image: imageList[0], // 主图
|
||
imageList: imageList, // 图片列表用于轮播
|
||
description: product.productDescription || product.description || '暂无描述',
|
||
features: product.features || [],
|
||
skuList: product.skuList || [], // 保存规格列表
|
||
productNo: product.productNo, // 商品编号
|
||
remark: product.remark, // 备注
|
||
color: firstSku?.color, // 颜色
|
||
optionName: firstSku?.optionName // 规格名称
|
||
}
|
||
|
||
// 默认选中第一个规格
|
||
if (firstSku) {
|
||
selectedSku.value = {
|
||
skuId: firstSku.skuId,
|
||
price: firstSku.price,
|
||
pictureUrl: firstSku.pictureUrl,
|
||
optionName: firstSku.optionName,
|
||
color: firstSku.color
|
||
}
|
||
}
|
||
|
||
console.log('商品详情加载成功:', goodsInfo.value)
|
||
} else {
|
||
console.warn('获取商品详情失败:', res?.msg || '未知错误')
|
||
uni.showToast({
|
||
title: res?.msg || t('common.loadFailed'),
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('获取商品详情异常:', error)
|
||
uni.showToast({
|
||
title: t('common.loadFailed'),
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
loading.value = false
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
// 处理购买 - 打开规格选择弹窗
|
||
const handleBuy = () => {
|
||
if (goodsInfo.value.skuList.length === 0) {
|
||
uni.showToast({
|
||
title: '商品暂无可选规格',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
showSkuPopup.value = true
|
||
}
|
||
|
||
// 选择规格
|
||
const selectSku = (sku) => {
|
||
selectedSku.value = {
|
||
skuId: sku.skuId,
|
||
price: sku.price,
|
||
pictureUrl: sku.pictureUrl,
|
||
optionName: sku.optionName,
|
||
color: sku.color
|
||
}
|
||
}
|
||
|
||
// 减少数量
|
||
const decreaseQuantity = () => {
|
||
if (quantity.value > 1) {
|
||
quantity.value--
|
||
}
|
||
}
|
||
|
||
// 增加数量
|
||
const increaseQuantity = () => {
|
||
quantity.value++
|
||
}
|
||
|
||
// 验证数量
|
||
const validateQuantity = () => {
|
||
if (!quantity.value || quantity.value < 1) {
|
||
quantity.value = 1
|
||
}
|
||
quantity.value = Math.floor(quantity.value)
|
||
}
|
||
|
||
// 确认规格选择
|
||
const confirmSku = () => {
|
||
if (!selectedSku.value.skuId) {
|
||
uni.showToast({
|
||
title: '请选择规格',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
closeSkuPopup()
|
||
// 判断是否已有地址
|
||
if (hasAddress.value) {
|
||
// 显示地址展示弹窗
|
||
showAddressDisplay.value = true
|
||
} else {
|
||
// 打开收货信息填写弹窗
|
||
showAddressPopup.value = true
|
||
}
|
||
}
|
||
|
||
// 关闭规格弹窗
|
||
const closeSkuPopup = () => {
|
||
showSkuPopup.value = false
|
||
}
|
||
|
||
// 关闭收货信息弹窗
|
||
const closeAddressPopup = () => {
|
||
showAddressPopup.value = false
|
||
}
|
||
|
||
// 关闭地址展示弹窗
|
||
const closeAddressDisplay = () => {
|
||
showAddressDisplay.value = false
|
||
}
|
||
|
||
// 更换地址
|
||
const changeAddress = () => {
|
||
// 关闭展示弹窗
|
||
closeAddressDisplay()
|
||
// 打开填写弹窗
|
||
showAddressPopup.value = true
|
||
}
|
||
|
||
// 确认收货信息并支付
|
||
const confirmAddress = async () => {
|
||
// 验证表单
|
||
if (!addressForm.value.receiverName) {
|
||
uni.showToast({
|
||
title: '请输入收件人姓名',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!addressForm.value.receiverPhone) {
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 验证手机号格式
|
||
const phoneReg = /^1[3-9]\d{9}$/
|
||
if (!phoneReg.test(addressForm.value.receiverPhone)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!addressForm.value.province || !addressForm.value.city || !addressForm.value.district) {
|
||
uni.showToast({
|
||
title: '请选择收货地区',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!addressForm.value.receiverAddress) {
|
||
uni.showToast({
|
||
title: '请输入详细地址',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 保存地址信息（将省市区和详细地址拼接）
|
||
const fullAddress =
|
||
`${addressForm.value.province}${addressForm.value.city}${addressForm.value.district}${addressForm.value.receiverAddress}`
|
||
savedAddress.value = {
|
||
receiverName: addressForm.value.receiverName,
|
||
receiverPhone: addressForm.value.receiverPhone,
|
||
province: addressForm.value.province,
|
||
city: addressForm.value.city,
|
||
district: addressForm.value.district,
|
||
receiverAddress: fullAddress, // 完整地址
|
||
fullAddress: fullAddress // 用于显示
|
||
}
|
||
|
||
// 关闭弹窗
|
||
closeAddressPopup()
|
||
|
||
// 调用支付接口
|
||
await createOrder()
|
||
}
|
||
|
||
// 立即支付（使用已保存的地址）
|
||
const payNow = async () => {
|
||
// 关闭展示弹窗
|
||
closeAddressDisplay()
|
||
// 调用支付接口
|
||
await createOrder()
|
||
}
|
||
|
||
const GotoList = ()=>{
|
||
uni.navigateTo({
|
||
url:'/subPackages/business/device-orderList'
|
||
})
|
||
}
|
||
|
||
// 创建订单并支付（接入商品多支付平台方案：微信 / 支付宝，小程序端）
|
||
const createOrder = async () => {
|
||
try {
|
||
uni.showLoading({
|
||
title: '正在创建订单...',
|
||
mask: true
|
||
})
|
||
|
||
// 构建订单数据（优先使用已保存的地址）
|
||
const addressData = savedAddress.value || addressForm.value
|
||
// 拼接完整地址：省市区 + 详细地址
|
||
const fullAddress = savedAddress.value ?
|
||
savedAddress.value.receiverAddress :
|
||
`${addressForm.value.province}${addressForm.value.city}${addressForm.value.district}${addressForm.value.receiverAddress}`
|
||
|
||
// 根据当前运行环境确定支付平台
|
||
let paymentPlatform = 'WECHAT' // 默认微信
|
||
// #ifdef MP-ALIPAY
|
||
paymentPlatform = 'ALIPAY'
|
||
// #endif
|
||
// #ifdef H5
|
||
// H5 预留 Antom 支付，这里暂时仍按微信处理，如需接入可改为 ANTOM 并补充 paymentType / osType
|
||
paymentPlatform = 'WECHAT'
|
||
// #endif
|
||
|
||
const orderData = {
|
||
skuId: selectedSku.value.skuId,
|
||
quantity: quantity.value,
|
||
receiverName: addressData.receiverName,
|
||
receiverPhone: addressData.receiverPhone,
|
||
receiverAddress: fullAddress, // 传递完整地址（省市区+详细地址）
|
||
remark: addressForm.value.remark || '',
|
||
paymentPlatform // WECHAT / ALIPAY /（预留）ANTOM
|
||
}
|
||
|
||
console.log('创建订单数据:', orderData)
|
||
|
||
const res = await createProductOrder(orderData)
|
||
|
||
console.log('创建订单结果:', res)
|
||
|
||
if (res && res.code === 200 && res.data) {
|
||
uni.hideLoading()
|
||
|
||
// 统一获取平台订单号（商品统一支付订单号）
|
||
const outOrderNo = res.data.OutOrderNo || res.data.outOrderNo
|
||
|
||
// ====================== 微信小程序支付 ======================
|
||
// #ifdef MP-WEIXIN
|
||
const payParams = res.data
|
||
uni.requestPayment({
|
||
timeStamp: payParams.timeStamp,
|
||
nonceStr: payParams.nonceStr,
|
||
package: payParams.package,
|
||
signType: payParams.signType,
|
||
paySign: payParams.paySign,
|
||
success: (payRes) => {
|
||
console.log('支付成功:', payRes)
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
|
||
// 重置表单
|
||
resetForm()
|
||
|
||
// 跳转到订单页面
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/subPackages/business/device-orderList'
|
||
})
|
||
}, 2000)
|
||
},
|
||
fail: async (payErr) => {
|
||
console.error('支付失败:', payErr)
|
||
|
||
// 判断是用户取消还是支付失败
|
||
if (payErr.errMsg && payErr.errMsg.includes('cancel')) {
|
||
// 用户取消支付，这里预留调用取消订单接口
|
||
try {
|
||
// await cancelProductOrder(outOrderNo)
|
||
uni.showToast({
|
||
title: '支付已取消',
|
||
icon: 'none'
|
||
})
|
||
} catch (cancelError) {
|
||
console.error('取消订单失败:', cancelError)
|
||
uni.showToast({
|
||
title: '支付已取消',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else {
|
||
// 支付失败
|
||
uni.showToast({
|
||
title: '支付失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// ====================== 支付宝小程序支付 ======================
|
||
// #ifdef MP-ALIPAY
|
||
console.log(res.data,'支付宝支付参数');
|
||
|
||
const tradeNO = res.data.tradeNo
|
||
if (!tradeNO) {
|
||
uni.showToast({
|
||
title: '未获取到支付宝支付参数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
my.tradePay({
|
||
tradeNO,
|
||
success: (payRes) => {
|
||
console.log('支付宝支付结果:', payRes)
|
||
if (payRes.resultCode === '9000') {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
|
||
resetForm()
|
||
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/subPackages/business/device-orderList'
|
||
})
|
||
}, 2000)
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '支付失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// ====================== H5 环境（预留 Antom 支付） ======================
|
||
// #ifdef H5
|
||
uni.showToast({
|
||
title: '当前环境暂不支持购买，请使用微信或支付宝小程序',
|
||
icon: 'none'
|
||
})
|
||
// #endif
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: res?.msg || '创建订单失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('创建订单异常:', error)
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '创建订单失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
quantity.value = 1
|
||
addressForm.value = {
|
||
receiverName: '',
|
||
receiverPhone: '',
|
||
province: '',
|
||
provinceCode: '',
|
||
city: '',
|
||
cityCode: '',
|
||
district: '',
|
||
districtCode: '',
|
||
receiverAddress: '',
|
||
remark: ''
|
||
}
|
||
regionIndexes.value = [0, 0, 0]
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.goods-container {
|
||
min-height: 100vh;
|
||
background: radial-gradient(95.17% 36.74% at 95% 5%, #B1FCCB 0%, #F1F2F6 100%);
|
||
padding-bottom: 200rpx;
|
||
position: relative;
|
||
}
|
||
|
||
// 价格区域
|
||
.price-section {
|
||
padding: 40rpx 40rpx 20rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
// align-items: baseline;
|
||
|
||
.price-main {
|
||
display: flex;
|
||
// align-items: baseline;
|
||
|
||
.price-value {
|
||
font-size: 88rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
line-height: 1;
|
||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||
}
|
||
|
||
.price-unit {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.price-per-unit {
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
// 商品图片轮播
|
||
.product-swiper-wrapper {
|
||
width: 100%;
|
||
height: 510rpx;
|
||
// padding: 0 60rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.product-swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
// border-radius: 24rpx;
|
||
overflow: hidden;
|
||
|
||
.swiper-item-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
|
||
.product-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
// transform: rotate(-15deg);
|
||
// animation: float 3s ease-in-out infinite;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
|
||
0%,
|
||
100% {
|
||
transform: rotate(-15deg) translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: rotate(-15deg) translateY(-20rpx);
|
||
}
|
||
}
|
||
|
||
// 商品名称
|
||
.product-name {
|
||
padding: 0 60rpx;
|
||
// margin-bottom: 60rpx;
|
||
margin: 30rpx auto;
|
||
// width: 680rpx;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
// 特性区域
|
||
.features-section {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
// grid-template-columns: repeat(2, 1fr);
|
||
// gap: 40rpx;
|
||
padding: 0 60rpx;
|
||
// margin-bottom: 60rpx;
|
||
|
||
.feature-item {
|
||
// background: rgba(255, 255, 255, 0.8);
|
||
border-radius: 24rpx;
|
||
padding: 20rpx 15rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||
backdrop-filter: blur(10rpx);
|
||
|
||
.feature-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.icon-img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.feature-label {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
// margin-bottom: 8rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 商品详情描述
|
||
.description-section {
|
||
background: #fff;
|
||
border-radius: 32rpx;
|
||
padding: 60rpx;
|
||
margin: 40rpx;
|
||
|
||
.section-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.description-content {
|
||
.description-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部购买区域
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
padding: 30rpx 60rpx;
|
||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
|
||
.buy-button {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
background: linear-gradient(135deg, #07c160, #10d673);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.4);
|
||
|
||
// &:active {
|
||
// transform: scale(0.98);
|
||
// opacity: 0.9;
|
||
// }
|
||
|
||
.button-content {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
text-align: center;
|
||
|
||
.buy-text {
|
||
color: #fff;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.price-info {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.footer-price-symbol {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.footer-price-value {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹窗遮罩层
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.popup-container {
|
||
width: 100%;
|
||
animation: slideUp 0.3s ease-out;
|
||
}
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
// 规格选择弹窗
|
||
.sku-popup {
|
||
background: #fff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
padding: 40rpx;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
|
||
.popup-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.close-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
border-radius: 50%;
|
||
|
||
.close-icon {
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sku-info {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.sku-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 12rpx;
|
||
margin-right: 24rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.sku-detail {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sku-price {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #ff4d4f;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.sku-name {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sku-list {
|
||
margin-bottom: 40rpx;
|
||
|
||
.sku-list-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 24rpx;
|
||
display: block;
|
||
}
|
||
|
||
.sku-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
|
||
.sku-option {
|
||
padding: 20rpx 32rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&.active {
|
||
background: #e6f7ff;
|
||
border-color: #07c160;
|
||
|
||
.sku-option-text,
|
||
.sku-option-color {
|
||
color: #07c160;
|
||
}
|
||
}
|
||
|
||
.sku-option-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.sku-option-color {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.quantity-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
|
||
.quantity-label {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.quantity-control {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.quantity-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
|
||
&.disabled {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.quantity-input {
|
||
width: 100rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
margin: 0 20rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
.confirm-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #07c160, #10d673);
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 收货信息弹窗
|
||
.address-popup {
|
||
background: #fff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
max-height: 85vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.popup-header {
|
||
position: sticky;
|
||
top: 0;
|
||
background: #fff;
|
||
z-index: 10;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 40rpx 40rpx 30rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.popup-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.close-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
border-radius: 50%;
|
||
|
||
.close-icon {
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-section {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 40rpx 60rpx;
|
||
|
||
.form-item {
|
||
margin-bottom: 40rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.region-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
|
||
.region-text {
|
||
color: #333;
|
||
}
|
||
|
||
.arrow-icon {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
font-weight: 300;
|
||
}
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 160rpx;
|
||
padding: 20rpx 24rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.input-placeholder {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.display-item {
|
||
margin-bottom: 40rpx;
|
||
padding: 30rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.display-label {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-bottom: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.display-value {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
position: sticky;
|
||
bottom: 0;
|
||
background: #fff;
|
||
z-index: 10;
|
||
padding: 30rpx 60rpx;
|
||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
||
border-top: 1rpx solid #f0f0f0;
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.secondary-btn {
|
||
flex: 1;
|
||
height: 96rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #07c160;
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #07c160;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.confirm-btn {
|
||
flex: 1;
|
||
height: 96rpx;
|
||
background: linear-gradient(135deg, #07c160, #10d673);
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: linear-gradient(135deg, #07c160, #10d673);
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
|
||
|
||
text {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |