462 lines
17 KiB
Plaintext
462 lines
17 KiB
Plaintext
<template>
|
||
<view class="admin-order-config">
|
||
<view class="content-body">
|
||
<!-- 顶部选项卡 -->
|
||
<view class="tabs-card border-shadow">
|
||
<scroll-view class="tabs-scroll" direction="horizontal" :show-scrollbar="false">
|
||
<view class="tabs-list">
|
||
<view
|
||
v-for="(tab, index) in tabs"
|
||
:key="index"
|
||
:class="['tab-item', currentTab == index ? 'tab-active' : '']"
|
||
@click="currentTab = index"
|
||
>
|
||
<text :class="['tab-txt', currentTab == index ? 'tab-txt-active' : '']">{{ tab }}</text>
|
||
<view v-if="currentTab == index" class="tab-line"></view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 配置内容区 -->
|
||
<view class="config-card border-shadow">
|
||
<!-- 1. 包邮设置 -->
|
||
<view v-if="currentTab == 0" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">满额包邮:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.freeShippingPrice" placeholder="请输入满额包邮金额" />
|
||
<text class="hint-txt">商城商品满多少金额即可包邮，此项优先于其他的运费设置</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">线下支付是否包邮:</text></view>
|
||
<view class="input-box">
|
||
<radio-group class="radio-group" @change="e => config.offlineFreeShipping = e.detail.value == '1'">
|
||
<label class="radio-label">
|
||
<radio value="1" :checked="config.offlineFreeShipping" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">包邮</text>
|
||
</label>
|
||
<label class="radio-label">
|
||
<radio value="0" :checked="!config.offlineFreeShipping" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">不包邮</text>
|
||
</label>
|
||
</radio-group>
|
||
<text class="hint-txt">用户选择线下支付时是否包邮</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 发票功能配置 -->
|
||
<view v-if="currentTab == 1" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">发票功能启用:</text></view>
|
||
<view class="input-box">
|
||
<radio-group class="radio-group" @change="e => config.invoiceEnabled = e.detail.value == '1'">
|
||
<label class="radio-label">
|
||
<radio value="1" :checked="config.invoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">开启</text>
|
||
</label>
|
||
<label class="radio-label">
|
||
<radio value="0" :checked="!config.invoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">关闭</text>
|
||
</label>
|
||
</radio-group>
|
||
<text class="hint-txt">发票功能开启|关闭</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">专用发票启用:</text></view>
|
||
<view class="input-box">
|
||
<radio-group class="radio-group" @change="e => config.specialInvoiceEnabled = e.detail.value == '1'">
|
||
<label class="radio-label">
|
||
<radio value="1" :checked="config.specialInvoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">开启</text>
|
||
</label>
|
||
<label class="radio-label">
|
||
<radio value="0" :checked="!config.specialInvoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">关闭</text>
|
||
</label>
|
||
</radio-group>
|
||
<text class="hint-txt">专用发票功能开启|关闭</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. 售后退款配置 -->
|
||
<view v-if="currentTab == 2" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">退货收货人姓名:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" v-model="config.refundContactName" placeholder="请输入退货收货人姓名" />
|
||
<text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员姓名</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">退货收货人电话:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" v-model="config.refundContactPhone" placeholder="请输入退货收货人电话" />
|
||
<text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员电话</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">退货收货人地址:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" v-model="config.refundAddress" placeholder="请输入退货收货人地址" />
|
||
<text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员地址信息</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">退货理由:</text></view>
|
||
<view class="input-box">
|
||
<textarea class="textarea-base" v-model="config.refundReasons" placeholder="请输入退货理由" />
|
||
<text class="hint-txt">配置退货理由，一行一个理由</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">优惠券退还状态:</text></view>
|
||
<view class="input-box">
|
||
<radio-group class="radio-group" @change="e => config.refundCoupon = e.detail.value == '1'">
|
||
<label class="radio-label">
|
||
<radio value="1" :checked="config.refundCoupon" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">退还</text>
|
||
</label>
|
||
<label class="radio-label">
|
||
<radio value="0" :checked="!config.refundCoupon" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">不退还</text>
|
||
</label>
|
||
</radio-group>
|
||
<text class="hint-txt">优惠券是否退回开关，商品成功退款后，退回/不退回使用的优惠券</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">售后期限:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.afterSalesDays" placeholder="0" />
|
||
<text class="hint-txt">订单收货之后，在多少天内可以进行退款，超出天数前端不显示退款按钮，设置0则永远显示</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. 订单取消配置 -->
|
||
<view v-if="currentTab == 3" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">普通未支付订单取消:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.normalOrderCancelHour" />
|
||
<text class="hint-txt">普通商品未支付订单的自动取消时间，单位（小时）</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">活动未支付订单取消:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.activityOrderCancelHour" />
|
||
<text class="hint-txt">活动商品未支付订单的自动取消时间，单位（小时）</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">砍价未支付订单取消:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.bargainOrderCancelHour" />
|
||
<text class="hint-txt">砍价未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">秒杀未支付订单取消:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.seckillOrderCancelHour" />
|
||
<text class="hint-txt">秒杀未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">拼团未支付订单取消:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.combinationOrderCancelHour" />
|
||
<text class="hint-txt">拼团未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 5. 自动收货配置 -->
|
||
<view v-if="currentTab == 4" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">自动收货时间:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.autoReceiveDays" />
|
||
<text class="hint-txt">商城订单发货之后，用户如果不手动点击收货，则在N天后自动收货，设置0为不自动收货，单位（天）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 6. 自动评价配置 -->
|
||
<view v-if="currentTab == 5" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">自动评价时间:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.autoCommentDays" />
|
||
<text class="hint-txt">商城订单在收货之后，用户如果不主动评价订单商品，则在N天后自动评价，设置0为永远不自动评价</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">自动评价文字:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" v-model="config.autoCommentText" />
|
||
<text class="hint-txt">自动评价显示的评价文字</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 7. 到店自提配置 -->
|
||
<view v-if="currentTab == 6" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">开启到店自提:</text></view>
|
||
<view class="input-box">
|
||
<radio-group class="radio-group" @change="e => config.storeSelfPickup = e.detail.value == '1'">
|
||
<label class="radio-label">
|
||
<radio value="1" :checked="config.storeSelfPickup" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">开启</text>
|
||
</label>
|
||
<label class="radio-label">
|
||
<radio value="0" :checked="!config.storeSelfPickup" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-txt">关闭</text>
|
||
</label>
|
||
</radio-group>
|
||
<text class="hint-txt">开启后下单页面支持到店自提，需要在设置->发货设置->提货点设置中添加提货点，关闭则隐藏此功能</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 8. 警戒库存配置 -->
|
||
<view v-if="currentTab == 7" class="form-container">
|
||
<view class="form-item">
|
||
<view class="label-box"><text class="label-txt">警戒库存:</text></view>
|
||
<view class="input-box">
|
||
<input class="input-base" type="number" v-model="config.stockWarningCount" />
|
||
<text class="hint-txt">商品库存数量低于多少时，提示库存不足</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="btn-footer">
|
||
<view class="btn-submit" @click="handleSave">
|
||
<text class="btn-submit-txt">提交</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, reactive } from 'vue'
|
||
|
||
const tabs = ['包邮设置', '发票功能配置', '售后退款配置', '订单取消配置', '自动收货配置', '自动评价配置', '到店自提配置', '警戒库存配置']
|
||
const currentTab = ref(0)
|
||
|
||
const config = reactive({
|
||
// 1. 包邮设置
|
||
freeShippingPrice: 1000000,
|
||
offlineFreeShipping: false,
|
||
// 2. 发票功能配置
|
||
invoiceEnabled: true,
|
||
specialInvoiceEnabled: true,
|
||
// 3. 售后退款配置
|
||
refundContactName: '',
|
||
refundContactPhone: '',
|
||
refundAddress: '',
|
||
refundReasons: '收货地址填错了\n与描述不符\n信息填错了，重新拍\n收到商品损坏了\n未按预定时间发货\n其它原因',
|
||
refundCoupon: true,
|
||
afterSalesDays: 0,
|
||
// 4. 订单取消配置
|
||
normalOrderCancelHour: 1,
|
||
activityOrderCancelHour: 1,
|
||
bargainOrderCancelHour: 1,
|
||
seckillOrderCancelHour: 1,
|
||
combinationOrderCancelHour: 1,
|
||
// 5. 自动收货配置
|
||
autoReceiveDays: 7,
|
||
// 6. 自动评价配置
|
||
autoCommentDays: 0,
|
||
autoCommentText: '此用户未做评价',
|
||
// 7. 到店自提配置
|
||
storeSelfPickup: true,
|
||
// 8. 警戒库存配置
|
||
stockWarningCount: 10
|
||
})
|
||
|
||
const handleSave = () => {
|
||
uni.showLoading({ title: '保存中...' })
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
}, 500)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.admin-order-config {
|
||
/* 使用 Layout 的背景和内边距 */
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.border-shadow {
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.content-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--admin-section-gap);
|
||
}
|
||
|
||
/* 顶部选项卡 */
|
||
.tabs-card {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.tabs-scroll {
|
||
width: 100%;
|
||
}
|
||
|
||
.tabs-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.tab-item {
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 20px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tab-txt {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.tab-txt-active {
|
||
color: #2d8cf0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-line {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 20px;
|
||
right: 20px;
|
||
height: 2px;
|
||
background-color: #2d8cf0;
|
||
}
|
||
|
||
/* 配置内容区 */
|
||
.config-card {
|
||
padding: 40px;
|
||
}
|
||
|
||
.form-container {
|
||
max-width: 800px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.label-box {
|
||
width: 150px;
|
||
text-align: right;
|
||
margin-right: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.label-txt {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.input-box {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.input-base {
|
||
height: 36px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
padding: 0 12px;
|
||
font-size: 14px;
|
||
width: 100%;
|
||
}
|
||
|
||
.textarea-base {
|
||
height: 120px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
width: 100%;
|
||
}
|
||
|
||
.hint-txt {
|
||
font-size: 12px;
|
||
color: #c0c4cc;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.radio-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 30px;
|
||
height: 36px;
|
||
align-items: center;
|
||
}
|
||
|
||
.radio-label {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.radio-txt {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.btn-footer {
|
||
margin-top: 40px;
|
||
padding-left: 170px;
|
||
}
|
||
|
||
.btn-submit {
|
||
background-color: #2d8cf0;
|
||
width: 80px;
|
||
height: 36px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-submit-txt {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
|
||
|