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