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.
834 lines
23 KiB
834 lines
23 KiB
<template>
|
|
<view class="page1">
|
|
<view class="title">
|
|
<view class="title-sreach">
|
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="left" size="28"></uni-icons>
|
|
</view>
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
|
待退款/售后{{returnCount}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<!-- <view class="box1" style="display: flex;">
|
|
<view class="">
|
|
待退款/售后{{returnCount}}
|
|
</view>
|
|
</view> -->
|
|
<view class="box1" v-for="(item,index) in returnData" :key="index">
|
|
<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
|
|
<view style="display: flex;">
|
|
{{'#' + item.mallOrder.numberCode}}
|
|
</view>
|
|
<view style="flex: 1;display: flex;padding-left: 20rpx;">
|
|
{{item.createTime | formatISOTime}}
|
|
<!-- <text>已退款</text> -->
|
|
</view>
|
|
<view>
|
|
{{item.status == 0?'待退款':item.status == 3?'待售后':""}}
|
|
</view>
|
|
</view>
|
|
<view class="refund-info">
|
|
<view class="refund-info-content">
|
|
<view class="refund-main">
|
|
<view class="refund-text">
|
|
<view>退款原因: <text style="font-weight: 700;color:#00231C;">{{item.refundTypeStatus == 1?'商家原因':item.refundTypeStatus == 2?'配送原因':item.refundTypeStatus == 3?'商家/配送都有原因（需要退配送费）':item.refundTypeStatus == 4?'平台退款':""}}</text></view>
|
|
|
|
<view>退款类型: <text style="font-weight: 700;color:#00231C;">{{item.refundType == 1?'退商品':item.refundType == 2?'退配送费':item.refundType == 3?'全额退款':""}}</text></view>
|
|
<view class="refund-reason-row">
|
|
退款/售后原因:
|
|
<text class="refund-reason-text">{{item.reason || '无'}}</text>
|
|
</view>
|
|
<view class="refund-pictures-row" v-if="getPictureList(item.pictures).length > 0">
|
|
<view class="refund-pictures-label">退款/售后原因图片:</view>
|
|
<view class="refund-pictures">
|
|
<image class="refund-picture" v-for="(picture,pictureIndex) in getPictureList(item.pictures)"
|
|
:key="pictureIndex" :src="picture" mode="aspectFill"
|
|
@tap.stop="previewRefundImage(item.pictures,pictureIndex)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="refund-contact">
|
|
<view class="contact-btn" @tap.stop="openContactPopup(item)">联系</view>
|
|
</view>
|
|
</view>
|
|
<view style="text-align: right;">退款金额: <text style="color:red;font-size: 34rpx;font-weight: 700;">￥{{item.refundAmount}}</text></view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 80rpx;border-top: 1px solid #eee;display: flex;">
|
|
<view style="flex: 1;">
|
|
<view class="btn" @tap="orderDetailOpen(item)" style="display: inline-block;">
|
|
查看订单
|
|
</view>
|
|
</view>
|
|
<view class="btn" :class="{'btn-disabled': isSubmittingRefund(item)}" @tap="returnAmountAllow(item,0)" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">
|
|
{{isSubmittingRefund(item) ? '处理中' : '不同意'}}
|
|
</view>
|
|
<view class="btn" :class="{'btn-disabled': isSubmittingRefund(item)}" @tap="returnAmountAllow(item,1)" style="margin-left: 10px;">
|
|
{{isSubmittingRefund(item) ? '处理中' : '同意'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 拼团详情弹窗 -->
|
|
<uni-popup ref="pintuanPopup" background-color="#fff">
|
|
<view class="guize-list">
|
|
<view v-for="(item,index) in tuanzhangOrder" :key="index">
|
|
<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;">
|
|
订单-{{item.numberCode}}
|
|
</view>
|
|
<view class="">
|
|
<view class="dingdan">
|
|
<view style="display:flex">
|
|
<view style="width:300rpx;">
|
|
订单状态：
|
|
</view>
|
|
<view class="pituan-text">
|
|
{{item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}}
|
|
</view>
|
|
</view>
|
|
<view style="display:flex">
|
|
<view style="width:300rpx;">
|
|
订单号：
|
|
</view>
|
|
<view class="pituan-text">
|
|
{{item.id}}
|
|
</view>
|
|
|
|
</view>
|
|
<view style="display:flex">
|
|
<view style="width:300rpx;">
|
|
订单时间：
|
|
</view>
|
|
<view class="pituan-text">
|
|
{{item.createTime | formatISOTime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dingdan" v-for="(item1,index1) in item.goodsList" :key="index1">
|
|
<view class="pt-title">
|
|
商品信息
|
|
</view>
|
|
<view style="display: flex;font-weight: 700;">
|
|
<view style="flex:1">
|
|
商品名：{{item1.productName}}
|
|
</view>
|
|
<view style="width:100rpx;">
|
|
X{{item1.quantity}}
|
|
</view>
|
|
<view style="width:220rpx;text-align: right;padding-right:20rpx;">
|
|
￥{{item1.price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dingdan">
|
|
<view style="text-align: right;padding-right: 20rpx;color: #777;">
|
|
餐盒费：￥{{item.packageFee}} 配送费：￥{{item.deliveryFee}}
|
|
</view>
|
|
<view style="text-align: right;padding-right: 20rpx;font-size: 28rpx;font-weight: 700;color: red;">
|
|
总计：￥{{item.totalAmount}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="orderPopup" background-color="transparent">
|
|
<view class="product-popup-content">
|
|
<view class="product-popup-header">
|
|
<view class="product-popup-title">商品详情</view>
|
|
<view class="product-popup-subtitle">请核对商品规格和数量</view>
|
|
</view>
|
|
<view class="product-popup-list" v-if="goodsList != null && goodsList.length > 0">
|
|
<view class="product-popup-card" v-for="(item1,index1) in goodsList" :key="index1">
|
|
<view class="product-popup-img">
|
|
<img :src="item1.productPicture" alt="">
|
|
</view>
|
|
<view class="product-popup-info">
|
|
<view class="product-popup-name">
|
|
{{item1.productName}}
|
|
</view>
|
|
<view class="product-popup-spec">
|
|
<text class="product-popup-label">规格</text>
|
|
<text class="product-popup-spec-text">{{item1.specs | delNode}}</text>
|
|
</view>
|
|
<view class="product-popup-price-row">
|
|
<text>单价：￥{{item1.price != null ? item1.price : 0}}</text>
|
|
<text v-if="item1.packageFee != null && item1.packageFee !== ''" class="product-popup-package-fee">餐盒费：￥{{item1.packageFee}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-popup-quantity">
|
|
<view class="product-popup-quantity-num">x{{item1.quantity}}</view>
|
|
<view class="product-popup-quantity-label">数量</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="product-popup-empty" v-else>
|
|
暂无商品详情
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="contactPopup" background-color="transparent">
|
|
<view class="contact-popup">
|
|
<view class="contact-popup-title">联系</view>
|
|
<view class="contact-popup-item" v-if="contactItem.mallOrder && contactItem.mallOrder.receiverPhone"
|
|
@tap="makeCall(contactItem.mallOrder.receiverPhone)">
|
|
<text>联系用户</text>
|
|
<text class="contact-popup-phone">{{contactItem.mallOrder.receiverPhone}}</text>
|
|
</view>
|
|
<view class="contact-popup-item" v-if="contactItem.mallOrder && contactItem.mallOrder.shopPhone"
|
|
@tap="makeCall(contactItem.mallOrder.shopPhone)">
|
|
<text>联系商家</text>
|
|
<text class="contact-popup-phone">{{contactItem.mallOrder.shopPhone}}</text>
|
|
</view>
|
|
<view class="contact-popup-item" v-if="contactItem.mallOrder && contactItem.mallOrder.deliveryType == 1 && contactItem.mallDeliveryOrder && contactItem.mallDeliveryOrder.workerPhone"
|
|
@tap="makeCall(contactItem.mallDeliveryOrder.workerPhone)">
|
|
<text>联系配送员</text>
|
|
<text class="contact-popup-phone">{{contactItem.mallDeliveryOrder.workerPhone}}</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: {},
|
|
searchCountForm:{
|
|
linkId:"",
|
|
pageNum:1,
|
|
pageSize:100,
|
|
statusList:[0,3]
|
|
},
|
|
type:'worker',
|
|
returnFormData:{},
|
|
groupOrderIdList:[],
|
|
tuanzhangOrder:[],
|
|
goodsList:[],
|
|
orderDetail:{},
|
|
returnData:[],
|
|
returnCount:0,
|
|
submitLoading:false,
|
|
submitRefundId:'',
|
|
contactItem:{}
|
|
}
|
|
},
|
|
filters:{
|
|
formatISOTime(isoString) {
|
|
const date = new Date(isoString);
|
|
const year = date.getFullYear();
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
const seconds = date.getSeconds().toString().padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
},
|
|
delNode(data) {
|
|
// 1. 统一转为字符串
|
|
let str;
|
|
if (typeof data === 'object' && data !== null) {
|
|
// 对象或数组 → JSON 字符串
|
|
str = JSON.stringify(data);
|
|
} else if (typeof data === 'string') {
|
|
str = data;
|
|
} else {
|
|
// 其他类型（数字、布尔等）先转字符串
|
|
str = String(data);
|
|
}
|
|
|
|
// 2. 删除所有大括号 { } 和双引号 "
|
|
const result = str.replace(/[{}"]/g, '');
|
|
return result;
|
|
}
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
// this.searchCountForm.linkId = uni.getStorageSync('worker').workerId
|
|
},
|
|
onLoad(option) {
|
|
if(option.type){
|
|
this.type = option.type
|
|
}
|
|
this.getReturnCount()
|
|
},
|
|
methods: {
|
|
getGroupOrders(id){
|
|
this.tui.request("/mall/order/selectAllOrderByOrderId/"+id, "GET", {}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tuanzhangOrder = res.result;
|
|
this.$refs.pintuanPopup.open('bottom')
|
|
} else {
|
|
that.tui.toast(res.message)
|
|
return
|
|
}
|
|
uni.hideLoading()
|
|
}).catch((res) => {})
|
|
},
|
|
orderDetailOpen(item){
|
|
this.returnFormData.id = item.id;
|
|
this.returnFormData.linkId = item.linkId;
|
|
this.returnFormData.orderId = item.orderId;
|
|
this.returnFormData.deliveryType = item.mallOrder.deliveryType;
|
|
this.returnFormData.refundAmount = item.refundAmount;
|
|
this.returnFormData.refundType = item.refundType;
|
|
this.returnFormData.refundTypeStatus = item.refundTypeStatus;
|
|
this.orderDetail = item.mallOrder;
|
|
this.goodsList = item.items;
|
|
this.$refs.orderPopup.open();
|
|
},
|
|
makeCall(phone){
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
openContactPopup(item){
|
|
this.contactItem = item || {};
|
|
this.$refs.contactPopup.open('bottom');
|
|
},
|
|
getReturnCount(){
|
|
let that = this
|
|
if(this.type == 'worker'){
|
|
this.searchCountForm.linkId = uni.getStorageSync('worker').workerId
|
|
}else{
|
|
this.searchCountForm.linkId = uni.getStorageSync('shopId')
|
|
}
|
|
return this.tui.request("/mall/refund/page", "POST", this.searchCountForm, false, false).then((res) => {
|
|
if (res.code == 200 && res.result != null) {
|
|
that.returnCount = res.result.records.length;
|
|
that.returnData = res.result.records
|
|
that.$forceUpdate();
|
|
} else {
|
|
that.tui.toast(res.message);
|
|
return;
|
|
}
|
|
uni.hideLoading();
|
|
}).catch((res) => {});
|
|
},
|
|
getPictureList(pictures) {
|
|
if (pictures == null || pictures === '') return [];
|
|
if (Array.isArray(pictures)) {
|
|
return pictures.filter(item => item != null && item !== '');
|
|
}
|
|
return String(pictures).split(',').map(item => item.trim()).filter(item => item !== '');
|
|
},
|
|
isSubmittingRefund(item) {
|
|
return this.submitLoading && item && this.submitRefundId === item.id;
|
|
},
|
|
getRequestErrorMessage(error) {
|
|
if (typeof error === 'string' && error !== '') {
|
|
return error;
|
|
}
|
|
if (error && error.message) {
|
|
return error.message;
|
|
}
|
|
if (error && error.errMsg) {
|
|
return error.errMsg;
|
|
}
|
|
return '操作失败，请稍后再试';
|
|
},
|
|
resetSubmitState() {
|
|
this.submitLoading = false;
|
|
this.submitRefundId = '';
|
|
uni.hideLoading();
|
|
},
|
|
previewRefundImage(pictures, index) {
|
|
const urls = this.getPictureList(pictures);
|
|
if (urls.length === 0) return;
|
|
uni.previewImage({
|
|
urls,
|
|
current: urls[index]
|
|
});
|
|
},
|
|
returnAmountAllow(item,status){
|
|
if (this.submitLoading) return;
|
|
let titleText = status == 1 ? '确定同意该申请吗？' : '确定拒绝该申请吗？';
|
|
//退款提示
|
|
this.groupOrderIdList = [];
|
|
|
|
if(item.groupOrderIds != null && item.groupOrderIds != ''){
|
|
titleText += '该订单为面对面配送单，所有参团订单将同步处理';
|
|
for(let i = 0; i < this.returnData.length;i++){
|
|
if(item.groupOrderIds.indexOf(this.returnData[i].mallOrder.id) != -1){
|
|
//需要展示具体订单信息这里有
|
|
this.groupOrderIdList.push(this.returnData[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 2. 弹出确认框
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: titleText,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.submitLoading = true;
|
|
this.submitRefundId = item.id;
|
|
uni.showLoading({
|
|
title: '处理中',
|
|
mask: true
|
|
});
|
|
let requestList = [];
|
|
if(this.groupOrderIdList != [] && this.groupOrderIdList.length > 0){
|
|
for(let i = 0; i < this.groupOrderIdList.length;i++){
|
|
requestList.push(this.processReturn(this.groupOrderIdList[i], status));
|
|
}
|
|
}else{
|
|
requestList.push(this.processReturn(item, status));
|
|
}
|
|
Promise.all(requestList).then((messageList) => {
|
|
const successMessage = messageList[0] || '操作成功';
|
|
return this.getReturnCount().then(() => {
|
|
this.resetSubmitState();
|
|
this.tui.toast(successMessage, 2000, true);
|
|
}).catch(() => {
|
|
this.resetSubmitState();
|
|
this.tui.toast(successMessage, 2000, true);
|
|
});
|
|
}).catch((message) => {
|
|
this.resetSubmitState();
|
|
this.tui.toast(this.getRequestErrorMessage(message), 2000);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
processReturn(item,status){
|
|
let returnFormData = {}
|
|
//退款
|
|
if(item.status == 0){
|
|
//不同意
|
|
if(status == 0){
|
|
returnFormData.status = 2
|
|
}else{
|
|
returnFormData.status = 1
|
|
}
|
|
}else if(item.status == 3){
|
|
//售后
|
|
if(status == 0){
|
|
returnFormData.status = 5
|
|
}else{
|
|
returnFormData.status = 4
|
|
}
|
|
}
|
|
returnFormData.id = item.id;
|
|
returnFormData.linkId = item.linkId;
|
|
returnFormData.orderId = item.orderId;
|
|
returnFormData.deliveryType = item.mallOrder.deliveryType;
|
|
returnFormData.orderType = item.mallOrder.orderType;
|
|
returnFormData.refundAmount = item.refundAmount;
|
|
returnFormData.refundType = item.refundType;
|
|
returnFormData.refundTypeStatus = item.refundTypeStatus;
|
|
|
|
return this.tui.request("/mall/refund/allowOrReject", "POST", returnFormData, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
return res.message;
|
|
} else {
|
|
return Promise.reject(res && res.message ? res.message : '操作失败，请稍后再试');
|
|
}
|
|
}).catch((res) => {
|
|
return Promise.reject(this.getRequestErrorMessage(res));
|
|
});
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
padding-bottom: 80rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
width: 100%;
|
|
height: 260rpx;
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 200rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.back-btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.title-name {
|
|
padding-top: 110rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.content{
|
|
margin: -100rpx auto 0;
|
|
padding-bottom: 60rpx;
|
|
}
|
|
.box1 {
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.refund-info {
|
|
padding-top: 20rpx;
|
|
color: #777;
|
|
}
|
|
.refund-info-content {
|
|
font-size: 28rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
.refund-main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.refund-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.refund-contact {
|
|
width: 120rpx;
|
|
flex-shrink: 0;
|
|
margin-left: 16rpx;
|
|
}
|
|
.contact-btn {
|
|
height: 50rpx;
|
|
border-radius: 14rpx;
|
|
background: rgba(0, 35, 28, 1);
|
|
color: rgba(166, 255, 234, 1);
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
}
|
|
.contact-popup {
|
|
width: 100%;
|
|
padding: 34rpx 28rpx 48rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background: #fff;
|
|
}
|
|
.contact-popup-title {
|
|
margin-bottom: 18rpx;
|
|
color: #00231C;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
}
|
|
.contact-popup-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
padding: 0 24rpx;
|
|
margin-top: 16rpx;
|
|
border-radius: 18rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
}
|
|
.contact-popup-phone {
|
|
flex: 1;
|
|
color: #55716a;
|
|
font-size: 26rpx;
|
|
text-align: right;
|
|
}
|
|
.refund-reason-row {
|
|
line-height: 42rpx;
|
|
}
|
|
.refund-reason-text {
|
|
color: #00231C;
|
|
font-weight: 700;
|
|
word-break: break-all;
|
|
}
|
|
.refund-pictures-row {
|
|
margin: 10rpx 0;
|
|
line-height: 40rpx;
|
|
}
|
|
.refund-pictures-label {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.refund-pictures {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
}
|
|
.refund-picture {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 14rpx;
|
|
background: #f0f5f3;
|
|
}
|
|
.btn{
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
|
padding:0 20rpx;
|
|
height: 50rpx;
|
|
border-radius: 14rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
margin-top: 20rpx;
|
|
}
|
|
.btn-disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
.popup-area-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.popup-area-content {
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30rpx;
|
|
width: 500rpx;
|
|
height: auto;
|
|
background-color: #fff;
|
|
}
|
|
.goods-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
|
|
|
|
img {
|
|
width: 100%;
|
|
background-size: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.pinzi{
|
|
margin: 20rpx 0;
|
|
background: linear-gradient(90deg, #FF4500, #FFA07A);
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
color: #fff;
|
|
}
|
|
.goods-content {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.goods-content-center {
|
|
display: flex;
|
|
margin: 16rpx 0;
|
|
color: #777;
|
|
}
|
|
.guize-list {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
overflow: scroll;
|
|
background: #fff;
|
|
max-height: 1000rpx;
|
|
line-height: 25px;
|
|
}
|
|
.pt-title{
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #777;
|
|
}
|
|
.dingdan{
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.uni-popup__wrapper{
|
|
border-radius: 20rpx !important;
|
|
}
|
|
.pituan-text{
|
|
flex:1;
|
|
text-align:right;
|
|
padding-right:20rpx;
|
|
font-weight: 700;
|
|
}
|
|
.product-popup-content {
|
|
width: 680rpx;
|
|
max-height: 880rpx;
|
|
padding: 34rpx 28rpx 30rpx;
|
|
box-sizing: border-box;
|
|
overflow: scroll;
|
|
border-radius: 36rpx;
|
|
background:
|
|
radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx),
|
|
linear-gradient(180deg, #ffffff 0%, #f8fffc 100%);
|
|
box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18);
|
|
}
|
|
|
|
.product-popup-header {
|
|
margin-bottom: 26rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.product-popup-title {
|
|
color: #143d35;
|
|
font-size: 36rpx;
|
|
font-weight: 900;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.product-popup-subtitle {
|
|
margin-top: 8rpx;
|
|
color: #7b8a85;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.product-popup-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.product-popup-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 22rpx;
|
|
border: 1px solid rgba(166, 255, 234, 0.58);
|
|
border-radius: 28rpx;
|
|
background: rgba(255, 255, 255, 0.88);
|
|
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
|
|
}
|
|
|
|
.product-popup-img {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border-radius: 22rpx;
|
|
background: #f0f5f3;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.product-popup-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0 22rpx;
|
|
}
|
|
|
|
.product-popup-name {
|
|
color: #172f2a;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.product-popup-spec {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.product-popup-label {
|
|
flex-shrink: 0;
|
|
height: 34rpx;
|
|
padding: 0 14rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(166, 255, 234, 0.72);
|
|
color: #126255;
|
|
font-size: 20rpx;
|
|
font-weight: 800;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.product-popup-spec-text {
|
|
flex: 1;
|
|
margin-left: 12rpx;
|
|
color: #65736f;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.product-popup-price-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 12rpx;
|
|
color: #f04438;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.product-popup-package-fee {
|
|
margin-left: 18rpx;
|
|
color: #65736f;
|
|
}
|
|
|
|
.product-popup-quantity {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 28rpx;
|
|
background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%);
|
|
color: #103f36;
|
|
text-align: center;
|
|
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08);
|
|
}
|
|
|
|
.product-popup-quantity-num {
|
|
padding-top: 16rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.product-popup-quantity-label {
|
|
margin-top: 2rpx;
|
|
color: #52736b;
|
|
font-size: 20rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.product-popup-empty {
|
|
padding: 80rpx 20rpx;
|
|
border-radius: 28rpx;
|
|
background: rgba(247, 255, 251, 0.9);
|
|
color: #7b8a85;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
</style>
|