zq
5 days ago
4 changed files with 303 additions and 15 deletions
@ -0,0 +1,188 @@ |
|||||
|
<template> |
||||
|
<div class="main-content12 "> |
||||
|
<div class="flex-common"> |
||||
|
<el-form> |
||||
|
<div class="flex gap12 mb24"> |
||||
|
<span class="littleTitle">检测卡开关</span> |
||||
|
<GuipSwitch :value="hasProjectFee" ref="hasProjectFeeRef" activeText="开启" inactiveText="关闭" :active-value="1" :inactive-value="0" @change="onProjectFeeChange"></GuipSwitch> |
||||
|
</div> |
||||
|
|
||||
|
<GuipFormItem column="column" class="mb24" label="用户可见信息" :required="true"> |
||||
|
<!-- <el-checkbox-group slot="formDom" v-model="departType" @change="validateSelection" |
||||
|
class="checkboxGroup"> --> |
||||
|
<div class="flex gap12" slot="formDom"> |
||||
|
<el-checkbox :label="1">向用户展示总面额</el-checkbox> |
||||
|
<el-checkbox :label="2">向用户展示余额</el-checkbox> |
||||
|
</div> |
||||
|
<!-- </el-checkbox-group> --> |
||||
|
</GuipFormItem> |
||||
|
<GroupFormBtns @cancel="cancelClick" cancelText="重置" @confirm="submitForm('siteForm')" /> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="flex-common mt12"> |
||||
|
<el-form> |
||||
|
<p class="littleTitle mb12">淘宝订单设置</p> |
||||
|
|
||||
|
<PromptText text='说明：用户一订单拍多件时，未使用部分会自动生成淘宝检测卡，方便用户使用剩余件数' :type="1" /> |
||||
|
<el-form ref="domainFormRef" :rules="domainRules" :model="domainData"> |
||||
|
<div class="mt24 flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<p class="flex-left-desc">域名来源</p> |
||||
|
<div class="flex mt12 gap20"> |
||||
|
<div class="radioItem gap8"> |
||||
|
<el-radio v-model="radio1" :label="1">允许</el-radio> |
||||
|
<p class="desc">用户一订单多拍，未使用部分下次可用</p> |
||||
|
</div> |
||||
|
<div class="radioItem gap8"> |
||||
|
<el-radio v-model="radio1" :label="1">允许</el-radio> |
||||
|
<p class="desc">用户一订单多拍，只能使用1次</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipRadio v-model="domainType" column="column" :options="domainTypes" prop="type" label="下次使用过期时间" @change="domainTypeChange" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" cancelText="重置" @confirm="submitForm('siteForm')" /> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex-common mt12"> |
||||
|
<el-form> |
||||
|
<GuipTable :tableData="orderList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"> |
||||
|
<el-table-column prop="sitename" label="站点简称" fixed="left" min-width="212px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.sitename }} |
||||
|
<img src="@/assets/form_copy.svg" v-clipboard="(scope.row.sitename)"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="link" label="购买检测卡的淘宝宝贝链接（站点中，用户若选择购买检测卡支付，可直接跳转淘宝商品）" min-width="610px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex gap8"> |
||||
|
<GuipInput v-model="scope.row.link" style="flex:1" placeholder="请输入淘宝宝贝链接"></GuipInput> |
||||
|
<GuipButton type="system">保存</GuipButton> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</GuipTable> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import GuipSwitch from '@/components/GuipSwitch'; |
||||
|
import GuipFormItem from '@/components/GuipFormItem'; |
||||
|
import GroupFormBtns from '@/components/GroupFormBtns'; |
||||
|
import PromptText from '@/components/PromptText'; |
||||
|
import GuipRadio from '@/components/GuipRadio'; |
||||
|
import GuipTable from '@/components/GuipTable'; |
||||
|
import GuipInput from '@/components/GuipInput.vue'; |
||||
|
import GuipButton from '@/components/GuipButton.vue'; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
hasProjectFee: Number, |
||||
|
}, |
||||
|
components: { |
||||
|
GuipSwitch, |
||||
|
GuipFormItem, |
||||
|
PromptText, |
||||
|
GroupFormBtns, |
||||
|
GuipInput, |
||||
|
GuipButton, |
||||
|
GuipRadio, |
||||
|
GuipTable, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
domainType:1, |
||||
|
domainTypes: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '永久有限', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '7天', |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '15天', |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '30天', |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '60天', |
||||
|
}, |
||||
|
], |
||||
|
domainData: { |
||||
|
type: 1, |
||||
|
}, |
||||
|
domainRules: { |
||||
|
type: [ |
||||
|
{ required: true, message: '请选择域名来源', trigger: 'change' }, |
||||
|
], |
||||
|
}, |
||||
|
radio1: 1, |
||||
|
orderList:[ |
||||
|
{ |
||||
|
sitename:'轻歌曼舞82（充值）', |
||||
|
link:'' |
||||
|
}, |
||||
|
{ |
||||
|
sitename:'copycheck旗舰店', |
||||
|
link:'https://www.taobao.com/item.htm?id=1234567890' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClickCopy(){ |
||||
|
this.$copy(this.form.input1, { |
||||
|
successMsg: '内容已复制到剪贴板', |
||||
|
errorMsg: '复制失败，请按Ctrl+C手动复制', |
||||
|
vm: this |
||||
|
}); |
||||
|
}, |
||||
|
validateSelection() { |
||||
|
this.departType = this.departType.filter(item => item !== 0); |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
this.$emit('update:hasProjectFee', !this.hasProjectFee) |
||||
|
this.$refs.hasProjectFeeRef.toggle(); |
||||
|
}, |
||||
|
submitForm() { |
||||
|
if (this.departType.length === 0) return this.$message.error('请选择至少一项'); |
||||
|
// let params = { |
||||
|
// has_project_fee: this.hasProjectFee, |
||||
|
// } |
||||
|
}, |
||||
|
onProjectFeeChange(val) { |
||||
|
this.$emit('update:hasProjectFee', val); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.el-form-item{ |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
.radioItem{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: flex-start; |
||||
|
.desc{ |
||||
|
margin-left: 24px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue