<template>
<div>
<div class="header-title">
<div class="breadcrumb">
<template>
<span @click="$router.push({ name: 'cart_freight' })">运费模板 /
</span>
<span style="color: rgb(0, 179, 197);">{{operation == 1 ? '详情' :operation == 2 ? '编辑' : '新建'}}</span>
</template>
</div>
</div>
<!--模板名称-->
<div class="row_col">
<p class="row_p">模板名称</p>
<a-input v-model="infoData.name" :disabled='operation == 1' style='width:347px' placeholder="请输入模板名称" />
</div>
<!-- 计费方式 -->
<div class="row_col">
<p class="row_p">计费方式</p>
<a-radio-group :disabled='operation == 1' name="radioGroup" @change="onChangeRadio" v-model="infoData.type">
<a-radio :value="1">
按件计算
</a-radio>
<a-radio :value="2">
按重量计费
</a-radio>
<a-radio :value="3">
全国包邮
</a-radio>
</a-radio-group>
</div>
<!-- 包邮配送区域 -->
<div class="row_col" style='margin-top:20px'>
<p class="row_p">包邮配送区域</p>
<div class="bgc">
<span class="arealist" v-for="(item,index) in areaList" :key="index">
<span @click="onArea(index)" :class="areaIndex.indexOf(index) != -1?'areaclick':'area'">{{item.name}}</span>
</span>
<hr>
<span>已选择{{areaIndex.length}}个区域 </span>
<!-- <span @click="onArea()" :class="isArea==false?'area':'areaclick'">全选</span> -->
</div>
</div>
<!-- 买家付费区域 -->
<div class="row_col" style='margin-top:20px' v-if='infoData.type != 3'>
<p class="row_p">买家付费区域</p>
<div class="bgc">
<span class="arealist" v-for="(item,index) in areaList" :key="index">
<span @click="onPayArea(index)" v-if="areaIndex.indexOf(index) == -1" :class="areaPayIndex.indexOf(index) == -1?'areaclick':'area'">{{item.name}}</span>
</span>
<hr>
<div class="bgc_row">
<p class="bgc_row_p freight">配送运费:</p>
<p class="bgc_row_p">
<span style='margin-right:8px'>每{{infoData.type == 1 ? '件' :'千克'}}</span>
<a-input-number style="width: 90px" v-model="infoData.price" :disabled='operation == 1' :min="0.01"
:precision='2' />
<span style='margin-left:8px'>元</span>
<span style='margin-left:8px'>{{infoData.type == 1 ? '' :'(未满1千克按1千克计算)'}}</span>
</p>
</div>
<div class="bgc_row" style='margin-top:18px'>
<p class="bgc_row_p"> <span style='margin-right:8px'
@click='operation == 1 ? "" : bearing.isNumber = !bearing.isNumber'><i
:class='bearing.isNumber ? "ActiveType":""' class="isNumber"></i>指定条件包邮:</span>
<a-select :disabled="!bearing.isNumber || operation == 1" v-model="infoData.postageType"
style="width: 70px">
<a-select-option v-if="infoData.type==1" :value="2">件数</a-select-option>
<a-select-option v-if="infoData.type==2" :value="3">重量</a-select-option>
<a-select-option :value="1">价格</a-select-option>
</a-select>
</p>
<p class="bgc_row_p">
<span style='margin-right:8px'>满</span>
<a-input-number style="width: 70px" :disabled="operation == 1 || !bearing.isNumber"
v-model="infoData.number" :min="1" :precision='0' />
<span style='margin-left:4px' v-if="infoData.type==1">件</span>
<span style='margin-left:4px'>包邮</span>
</p>
</div>
</div>
</div>
<!-- 不配送区域 -->
<div class="row_col" style='margin-top:20px' v-if='infoData.type != 3'>
<p class="row_p">不配送区域</p>
<div class="bgc">
<span class="arealist" v-for="(item,index) in areaList" :key="index">
<span @click="onPayArea(index)" v-if="areaPayIndex.indexOf(index) != -1 && areaIndex.indexOf(index) != -1" class="area">{{item.name}}</span>
</span>
</div>
</div>
<!-- 返回 -->
<div class="footer">
<a-button class="btnBox" @click="$router.go(-1)">返回</a-button>
<a-button class="btnBox2" v-if="operation != 1">保存</a-button>
</div>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
id: '',
operation: null,
name: '',
bearing: {
monay: null,
isNumber: false,
Number: null,
satisfy: null,
},
infoData: {
name: '',
type: 1,
price: '',
postageType: 2,
number: ''
},
byPieceList: [{
region: [], //地区
price: '',
postage: '',
postageType: 2,
number: '',
isNumber: false,
}],
// isArea: '',
areaIndex: [],
areaPayIndex: [],
areaList: [{
code: 1,
name: '北京',
}, {
code: 2,
name: '天津',
}, {
code: 3,
name: '河北',
}, {
code: 4,
name: '陕西',
}, {
code: 5,
name: '甘肃',
}]
}
},
methods: {
onChangeRadio() {
this.infoData.postageType = this.infoData.type == 1 ? 2 : this.infoData.type == 2 ? 3 : undefined
this.byPieceList.forEach(res => {
res.postageType = this.infoData.type == 1 ? 2 : this.infoData.type == 2 ? 3 : undefined
})
},
onArea(code) {
const i = this.areaIndex.indexOf(code)
if (i == -1) {
this.areaIndex.push(code)
}
},
onPayArea(code) {
const i = this.areaIndex.indexOf(code)
if (i == -1) {
this.areaPayIndex.push(code)
}
else {
this.areaPayIndex.splice(i, 1)
}
},
// onBuyArea(code) {
// const i = this.areaIndex.indexOf(code)
// if (i == -1) {
// this.areaIndex.push(code)
// }
// else {
// this.areaIndex.splice(i, 1)
// }
// },
},
created() {},
mounted() {},
destroyed() {},
computed: {},
watch: {}
}
</script>
<style lang="less" scoped>
.row_col {
margin-bottom: 25px;
}
.row_p {
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
}
.arealist {
margin: 4px;
}
.area {
width: 100%;
border: 1.6px solid rgb(192, 190, 190);
border-radius: 2px;
padding: 4px 18px;
}
.areaclick {
width: 100%;
border: 1.6px solid rgb(224, 94, 94);
border-radius: 2px;
padding: 4px 18px;
}
.bgc {
background: #fafafa;
max-width: 873px;
padding: 20px;
}
.bgc_row {
display: flex;
flex-direction: row;
}
.isNumber {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 1px;
border: 1px solid #ccc;
margin-right: 8px;
vertical-align: middle;
}
.bgc_row_p {
margin-right: 30px;
margin-bottom: 0;
}
.freight {
line-height: 34px;
}
.ActiveType {
position: relative;
text-align: center;
background-color: @theme;
border: 1px solid @theme !important;
&::before {
position: absolute;
font-size: 12px;
color: #fff;
font-weight: 700;
content: '✓';
top: -3px;
left: 0px;
}
}
.btnBox {
width: 100px;
height: 40px;
background: #ffffff;
border-radius: 2px;
color: #00b3c5;
border: 1px solid #00b3c5;
margin-top: 60px;
}
.btnBox2 {
width: 100px;
height: 40px;
background: #00b3c5;
border-radius: 2px;
color: #ffffff;
margin-left: 15px;
border: 1px solid #00b3c5;
margin-top: 60px;
}
/deep/.ant-select-selection {
color: #999999;
}
</style>