920 lines
46 KiB
HTML
920 lines
46 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
.optionImg {
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.optionImg .el-image {
|
||
height: 100px;
|
||
width: 50%;
|
||
border-radius: 10px;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
.descriptionClass {
|
||
padding: 10px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
min-height: 100px;
|
||
/*font-size: 13px;*/
|
||
/*color: #868282;*/
|
||
}
|
||
|
||
.desc_label {
|
||
/*width: 75px;*/
|
||
-webkit-flex-shrink: 0;
|
||
flex-shrink: 0;
|
||
padding-right: 4px;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
color: #7f7f7f;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.desc_value {
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<guava :edit_scroll="false" ref="guava">
|
||
<template>
|
||
<el-card shadow="never">
|
||
<div class="search">
|
||
<div class="search-item">
|
||
<div class="search-item-label">年  度：</div>
|
||
<div class="search-item-option">
|
||
<el-date-picker
|
||
@change="doSearch"
|
||
placeholder="请选择"
|
||
style="width: 100%"
|
||
type="year"
|
||
v-model="pageForm.year"
|
||
value-format="yyyy"
|
||
></el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div class="search-query">
|
||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="mt10" shadow="never">
|
||
<table-tool :app="this" label="福利项目">
|
||
<template #func></template>
|
||
</table-tool>
|
||
|
||
<el-table
|
||
:data="tableData"
|
||
:size="tableSize"
|
||
@sort-change="pageOrder"
|
||
ref="table"
|
||
row-key="id"
|
||
style="width: 100%"
|
||
v-loading="tableLoading"
|
||
>
|
||
<el-table-column
|
||
:index="indexMethod"
|
||
align="center"
|
||
header-align="center"
|
||
label="序号"
|
||
type="index"
|
||
width="80px"
|
||
></el-table-column>
|
||
|
||
<el-table-column
|
||
:key="column.prop"
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
:sortable="column.sortable"
|
||
:width="column.width"
|
||
align="center"
|
||
header-align="center"
|
||
min-width="100px"
|
||
show-overflow-tooltip
|
||
v-for="column in tableColumns"
|
||
>
|
||
<template scope="{row}" v-if="column.prop=='choiceTime'">
|
||
<i class="el-icon-time"></i>
|
||
  {{moment(row.choiceTimeStart).format('YYYY/MM/DD HH:mm')}}
|
||
<span>- {{moment(row.choiceTimeEnd).format('YYYY/MM/DD HH:mm')}}</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='isChoose'">
|
||
<span v-if="row.isChoose" class="text-primary">已选择</span>
|
||
<span class="text-danger" v-else>未选择</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='gist_list'">
|
||
<span v-if="row.gist_list">{{row.gist_list}}</span>
|
||
<span v-else>暂无</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='receiveAddress'">
|
||
<span v-if="row.receiveAddress">{{row.receiveAddress}}</span>
|
||
<span v-else>暂无</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" header-align="center" label="操作" prop="userOnline" width="150px">
|
||
<template scope="{row}">
|
||
<el-button type="primary" size="mini" @click="openChoose(row)">
|
||
{{confirmButtonInfo(row).text}}
|
||
</el-button>
|
||
|
||
<!-- <el-button @click="openChoose(row)" size="mini" type="primary"-->
|
||
<!-- v-if="new Date().getTime()>moment(row.choiceTimeStart).valueOf()-->
|
||
<!-- &&new Date().getTime()<moment(row.choiceTimeEnd).valueOf()">选择-->
|
||
<!-- </el-button>-->
|
||
<!-- <el-button @click="openChoose(row)" size="mini" type="primary"-->
|
||
<!-- v-else-if="new Date().getTime()>moment(row.choiceTimeStart).valueOf()-->
|
||
<!-- &&new Date().getTime()<moment(row.overdueChoiceTimeEnd).valueOf()">选择-->
|
||
<!-- </el-button>-->
|
||
<!-- <template v-else>-->
|
||
<!-- <el-button @click="openView(row)" size="mini" type="primary">查看-->
|
||
<!-- </el-button>-->
|
||
<!-- </template>-->
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--#include("/layouts/pagination.html"){}#-->
|
||
</el-card>
|
||
</template>
|
||
|
||
<template #edit>
|
||
<el-card shadow="never">
|
||
<el-form :model="formData" label-width="120px" ref="addForm" :rules="addFormRules">
|
||
<el-form-item label="福利名称">
|
||
<span style="font-weight: bold; font-size: 20px">{{projectInfo.name}}</span>
|
||
</el-form-item>
|
||
<el-row :gutter="10">
|
||
<el-col span="8">
|
||
<el-form-item label="福利节日">{{projectInfo.festival}}</el-form-item>
|
||
</el-col>
|
||
<el-col span="8" v-if="!projectInfo.flexible">
|
||
<el-form-item label="福利礼品">{{projectInfo.gift}}</el-form-item>
|
||
</el-col>
|
||
<el-col span="8">
|
||
<el-form-item label="选择形式">{{projectInfo.isCheckBox==='checkBox'?'多选':'单选'}}
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="8" v-if="projectInfo.isCheckBox==='checkBox'">
|
||
<el-form-item label="最多选几个">{{projectInfo.multiSelectNum}}个</el-form-item>
|
||
</el-col>
|
||
<el-col span="8">
|
||
<el-form-item label="发放形式">
|
||
<template>
|
||
{{welfareProvideMode.find(v=>v.code==projectInfo.provideMode) &&
|
||
welfareProvideMode.find(v=>v.code==projectInfo.provideMode).description}}
|
||
</template>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="8">
|
||
<el-form-item label="签收形式">
|
||
<template>
|
||
{{welfareSignMode.find(v=>v.code==projectInfo.signMode) &&
|
||
welfareSignMode.find(v=>v.code==projectInfo.signMode).description}}
|
||
</template>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="8">
|
||
<el-form-item label="选择时间">
|
||
{{projectInfo.choiceTimeStart}}至{{projectInfo.choiceTimeEnd}}
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="8" v-if="projectInfo.isIntegralMode">
|
||
<el-form-item label="福利总积分">
|
||
{{projectInfo.allIntegral}}
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-form-item label="福利套餐">
|
||
<el-row :gutter="0">
|
||
<div :key="subject.id" v-for="subject in projectInfo.welfareProjectSubjects">
|
||
<el-col :key="oidx" :span="8" v-for="(option, oidx) in subject.options">
|
||
<el-card shadow="never" style="margin: 5px">
|
||
<div slot="header" style="display: flex; justify-content: space-between">
|
||
<div style="color: #000; font-size: 18px">{{option.optionName}}</div>
|
||
<div>
|
||
<el-button @click.stop="viewDesc(option)" type="text">套餐详情
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-rows: auto 1fr auto; height: 200px">
|
||
<div style="display: flex">
|
||
<el-image
|
||
style="width: 150px; height: 150px"
|
||
:src="CREATE_PREVIEW_URL(option.imgUrl)"
|
||
fit="contain"
|
||
></el-image>
|
||
|
||
<div style="width: calc(100% - 150px); padding-left: 20px; position: relative">
|
||
<div style="white-space: normal; display: flex">
|
||
<span class="desc_label"></span>
|
||
<el-tooltip placement="top" :content="option.supplier">
|
||
<!-- style="width: calc(100% - 80px);text-overflow: ellipsis;overflow: hidden;overflow-y: auto;height: 100px;" -->
|
||
<span
|
||
class="desc_value"
|
||
style="text-overflow: ellipsis; overflow: hidden; overflow-y: auto; height: 100px"
|
||
>
|
||
{{ option.supplier }}
|
||
</span>
|
||
</el-tooltip>
|
||
</div>
|
||
<div v-if="option.simpleDesc">
|
||
<span class="desc_label"></span>
|
||
<span class="desc_value">{{ option.simpleDesc }}</span>
|
||
</div>
|
||
<div>
|
||
<el-input-number
|
||
:disabled="isView"
|
||
:max="option.maxNum"
|
||
:min="0"
|
||
@keydown.native="onKeydown"
|
||
@change="numChange(option.selectNum, option, oidx)"
|
||
style="width: 150px; position: absolute; right: 0; bottom: 0"
|
||
v-model="option.selectNum"
|
||
></el-input-number>
|
||
</div>
|
||
<div style="width: 150px; position: absolute; right: 0; top: 160px;color:#ac3111;"
|
||
v-if="projectInfo.isIntegralMode">
|
||
所需积分：{{option.integral}}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div style="margin-top: 17px">
|
||
<el-select
|
||
style="width: 100%"
|
||
clearable
|
||
filterable
|
||
v-if="option.receiveAddressList && option.receiveAddressList.length > 0 && option.selectNum > 0"
|
||
placeholder="请选择取货门店"
|
||
v-model="option.receiveAddress"
|
||
>
|
||
<el-option
|
||
v-for="item in option.receiveAddressList"
|
||
:key="item.address"
|
||
:label="item.address"
|
||
:value="item.address"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</div>
|
||
</el-row>
|
||
</el-form-item>
|
||
|
||
<el-row gutter="20">
|
||
<el-col span="24">
|
||
<el-form-item label="联系方式" prop="mobile">
|
||
<el-input
|
||
v-model="formData.mobile"
|
||
placeholder="请输入联系方式"
|
||
:disabled="isView"
|
||
maxlength="11"
|
||
type="text"
|
||
show-word-limit
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<template v-if="projectInfo.provideMode===3">
|
||
<el-row gutter="20">
|
||
<el-col span="24" v-if="!isView">
|
||
<el-form-item label="收货地址" prop="receiveAddress">
|
||
<div style="display: flex; column-gap: 10px">
|
||
<div style="flex: 1">
|
||
<el-select
|
||
@change="addressChange"
|
||
filterable
|
||
placeholder="请选择收货地址"
|
||
style="width: 100%"
|
||
v-model="formData.addressId"
|
||
>
|
||
<el-option
|
||
:key="item.id"
|
||
:label="item.name+' '+item.defaultName"
|
||
:value="item.id"
|
||
v-for="item in addressOptions"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div>
|
||
<el-button @click="openAddress" type="primary">添加收货地址</el-button>
|
||
</div>
|
||
</div>
|
||
<span style="color: #ac3111">
|
||
温馨提示：填写默认收货地址后，系统会自动选择默认地址；如未设置默认，请您在添加收货地址后在此下拉框进行选择。可配送辖区：哈尔滨市{{receiveAddressAreaText}}
|
||
</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col span="24">
|
||
<el-form-item
|
||
:rules="{required:true,message: '请确认收货地址', trigger: 'blur'}"
|
||
label="请确认收货地址"
|
||
prop="receiveAddress"
|
||
>
|
||
<el-input
|
||
:rows="4"
|
||
disabled
|
||
maxlength="100"
|
||
placeholder="选择收货地址联动"
|
||
type="textarea"
|
||
v-model="formData.receiveAddress"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
|
||
<el-form-item
|
||
:rules="{required:true,message: '请签字', trigger: 'blur'}"
|
||
label="签字"
|
||
prop="sign"
|
||
v-if="projectInfo.signMode===2"
|
||
>
|
||
<template v-if="isChoice===0||!isView">
|
||
<sign :is_value_base64="false" :qz.sync="formData.sign" prefix="welfare" ref="sign"></sign>
|
||
</template>
|
||
<template v-else>
|
||
<el-image
|
||
:src="'/signature/getSignData?path=' +formData.imageUrl"
|
||
fit="contain"
|
||
style="height: 100px; width: 100%"
|
||
v-if="formData.imageUrl"
|
||
></el-image>
|
||
<span v-else>暂无</span>
|
||
</template>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-row class="mt20" justify="end" type="flex">
|
||
<span style="display:flex;align-items: center;margin-right: 10px;color: #ac3111"
|
||
v-if="projectInfo.isIntegralMode">总消耗积分：{{totalIntegral}}</span>
|
||
<el-button @click="$refs.guava.index()">关闭</el-button>
|
||
<el-button @click="doChoose" type="primary" v-if="!isView">确定</el-button>
|
||
</el-row>
|
||
</template>
|
||
</guava>
|
||
|
||
<el-drawer :visible.sync="descDialogVisible" direction="rtl" size="50%" title="福利详情">
|
||
<el-card style="margin: 20px" shadow="never">
|
||
<div v-html="descData"></div>
|
||
</el-card>
|
||
</el-drawer>
|
||
|
||
<el-dialog :close-on-click-modal="false" :visible.sync="addressDialogVisible" title="收货地址" width="40%">
|
||
<el-form :model="formData" label-position="right" :rules="formRules" label-suffix="：" label-width="120px"
|
||
ref="addForm">
|
||
<el-row :gutter="60">
|
||
<el-col :span="24">
|
||
<el-form-item label="地址信息" prop="addressList">
|
||
<el-cascader
|
||
:options="dzOptions"
|
||
:props="{ expandTrigger: 'hover' }"
|
||
@change="handleChange"
|
||
clearable
|
||
placeholder="请选择地址信息"
|
||
style="width: 100%"
|
||
v-model="formData.addressList"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="详细地址" prop="addressDetail">
|
||
<el-input
|
||
maxlength="100"
|
||
placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"
|
||
rows="3"
|
||
show-word-limit
|
||
type="textarea"
|
||
v-model="formData.addressDetail"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="收货人姓名" prop="userName">
|
||
<el-input maxlength="11" placeholder="请填写收货人姓名" v-model="formData.userName"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="手机号码" prop="tel">
|
||
<el-input maxlength="11" placeholder="请填写手机号码" clearable
|
||
v-model="formData.tel"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<el-form-item label="是否默认" prop="isDefault">
|
||
<el-switch
|
||
v-model="formData.isDefault"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
active-text="是"
|
||
inactive-text="否"
|
||
></el-switch>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<span class="dialog-footer" slot="footer">
|
||
<el-button @click="addressDialogVisible = false">取 消</el-button>
|
||
<el-button @click="doSaveUserAddress" type="primary">保存</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<script>
|
||
const vue = new Vue({
|
||
el: "#app",
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
addressOptions: [],
|
||
welfareProvideMode: [],
|
||
welfareSignMode: [],
|
||
userSelection: [],
|
||
userSign: "",
|
||
dzOptions: chengShiList,
|
||
addressList: [],
|
||
descData: "",
|
||
descDialogVisible: false,
|
||
selectedAddressCity: null,
|
||
selectedAddressCounty: null,
|
||
receiveAddressAreaList: ["道里区", "南岗区", "道外区", "香坊区", "呼兰区", "松北区", "阿城区", "双城区", "平房区"],
|
||
|
||
projectInfo: {},
|
||
welfareSubject: {},
|
||
pageForm: {
|
||
isChoose: false,
|
||
year: moment().format("YYYY")
|
||
},
|
||
tableColumns: [
|
||
{prop: "year", label: "年度"},
|
||
{prop: "name", label: "项目名称"},
|
||
{prop: "choiceTime", label: "选择时间"},
|
||
{prop: "isChoose", label: "是否选择"},
|
||
{prop: "gist_list", label: "所选福利"},
|
||
{prop: "receiveAddress", label: "收货地址"}
|
||
],
|
||
isView: false,
|
||
isChoice: false,
|
||
|
||
addressDialogVisible: false,
|
||
|
||
formRules: {
|
||
addressList: [{required: true, message: "请选择地址信息", trigger: ["blur", "change"]}],
|
||
addressDetail: [{required: true, message: "请填写您的详细地址", trigger: ["blur", "change"]}],
|
||
userName: [{required: true, message: "请填写收货人姓名", trigger: ["blur", "change"]}],
|
||
tel: [
|
||
{required: true, message: "必填", trigger: ["blur", "change"]},
|
||
{pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号"}
|
||
]
|
||
},
|
||
addFormRules: {
|
||
mobile: [
|
||
{required: true, message: "必填", trigger: ["blur", "change"]},
|
||
{pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号"}
|
||
]
|
||
},
|
||
|
||
// 供应商
|
||
shoppingType: [],
|
||
// 门店地址
|
||
offlineStoresOption: [],
|
||
totalIntegral: 0,
|
||
}
|
||
},
|
||
computed: {
|
||
receiveAddressAreaText() {
|
||
return this.receiveAddressAreaList.join("、")
|
||
},
|
||
sumSelectNum() {
|
||
if (this.projectInfo && this.projectInfo.welfareProjectSubjects) {
|
||
return this.projectInfo.welfareProjectSubjects[0].options
|
||
.map((v) => v.selectNum)
|
||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||
}
|
||
return 0
|
||
}
|
||
},
|
||
methods: {
|
||
onKeydown(event) {
|
||
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
|
||
event.preventDefault()
|
||
}
|
||
},
|
||
confirmButtonInfo(row) {
|
||
const {choiceTimeEnd, choiceTimeStart, overdueChoiceTimeEnd, isChoose, selectTime} = row
|
||
const now = moment().valueOf()
|
||
if (overdueChoiceTimeEnd == null || overdueChoiceTimeEnd === "") {
|
||
if (now > moment(choiceTimeStart).valueOf() && now < moment(choiceTimeEnd).valueOf()) {
|
||
return {text: isChoose ? "修改" : "选择", disabled: false}
|
||
} else if (now > moment(choiceTimeEnd).valueOf()) {
|
||
return {text: "选择已结束", disabled: true}
|
||
} else if (now < moment(choiceTimeStart).valueOf()) {
|
||
return {text: "选择未开始", disabled: true}
|
||
}
|
||
} else {
|
||
//已选择了不能再动了
|
||
if (isChoose) {
|
||
if (moment(selectTime).valueOf() > moment(choiceTimeEnd).valueOf() && now < moment(overdueChoiceTimeEnd).valueOf()) {
|
||
return {text: "修改", disabled: false}
|
||
}
|
||
return {text: "选择已结束", disabled: true}
|
||
} else {
|
||
if (now > moment(choiceTimeStart).valueOf() && now < moment(overdueChoiceTimeEnd).valueOf()) {
|
||
return {text: isChoose ? "修改" : "选择", disabled: false}
|
||
} else if (now > moment(overdueChoiceTimeEnd).valueOf()) {
|
||
return {text: "选择已结束", disabled: true}
|
||
} else if (now < moment(choiceTimeStart).valueOf()) {
|
||
return {text: "选择未开始", disabled: true}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
handleChange(val) {
|
||
if (val) {
|
||
let provinceName = ""
|
||
let cityName = ""
|
||
let countyName = ""
|
||
const province = this.dzOptions.find((c) => c.value === val[0])
|
||
provinceName = province.label
|
||
const city = province.children.find((p) => p.value === val[1])
|
||
cityName = city.label
|
||
if (val.length === 3) {
|
||
const county = city.children.find((p) => p.value === val[2])
|
||
countyName = county.label
|
||
this.$set(this.formData, "areaCode", county.value)
|
||
} else {
|
||
this.$set(this.formData, "areaCode", city.value)
|
||
}
|
||
this.$set(this.formData, "province", provinceName)
|
||
this.$set(this.formData, "city", cityName)
|
||
this.$set(this.formData, "county", countyName)
|
||
}
|
||
},
|
||
openAddress() {
|
||
// this.formData = {}
|
||
this.addressDialogVisible = true
|
||
// if (this.$refs["addForm"])
|
||
// this.$refs["addForm"].resetFields();
|
||
},
|
||
doSaveUserAddress() {
|
||
this.$refs["addForm"].validate(async (valid) => {
|
||
if (valid) {
|
||
const resp = await $.post("/mobile/welfare/mine/doSaveUserAddress", this.formData)
|
||
if (resp.code === 0) {
|
||
this.doSearch()
|
||
this.$message({
|
||
message: resp.msg,
|
||
type: "success"
|
||
})
|
||
await this.selectUserAddress()
|
||
this.addressDialogVisible = false
|
||
} else {
|
||
this.$message.error(resp.msg)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//数量更改
|
||
numChange(value, option, optionIndex) {
|
||
const {
|
||
isIntegralMode,
|
||
isCheckBox,
|
||
multiSelectNum,
|
||
singleOptionSupportMultipleSelection
|
||
} = this.projectInfo
|
||
//积分模式
|
||
if (isIntegralMode) {
|
||
this.calcTotalIntegral()
|
||
} else {
|
||
if (isCheckBox === "checkBox") {
|
||
//判断是否支持单个多选
|
||
if (!singleOptionSupportMultipleSelection && value > 1) {
|
||
this.$set(this.projectInfo.welfareProjectSubjects[0].options[optionIndex], "selectNum", 1)
|
||
this.$message.warning("此套餐最多只能选择1份")
|
||
return
|
||
}
|
||
}
|
||
//获取用户当前选择的数量
|
||
const selectNums = this.projectInfo.welfareProjectSubjects[0].options.map((v) => v.selectNum)
|
||
const sum = selectNums.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||
|
||
if (sum > multiSelectNum) {
|
||
this.$set(this.projectInfo.welfareProjectSubjects[0].options[optionIndex], "selectNum", value - 1)
|
||
this.$message.warning("此次福利最多只能选择" + multiSelectNum + "份")
|
||
}
|
||
}
|
||
},
|
||
calcTotalIntegral() {
|
||
let totalIntegral = 0
|
||
this.projectInfo.welfareProjectSubjects[0].options.forEach(v => {
|
||
totalIntegral = totalIntegral + (v.integral * v.selectNum)
|
||
})
|
||
this.totalIntegral = totalIntegral
|
||
},
|
||
|
||
async getProjectInfo(id) {
|
||
const resp = await $.get("/platform/welfare/common/findOne", {projectId: id})
|
||
if (resp.code === 0) {
|
||
resp.data.multiSelectNum = resp.data.multiSelectNum ? resp.data.multiSelectNum : 1
|
||
this.projectInfo = resp.data
|
||
await this.getUserSelection(id)
|
||
await this.getChoice()
|
||
await this.getShoppingType()
|
||
}
|
||
},
|
||
|
||
async openView(row) {
|
||
this.isView = true
|
||
await this.getProjectInfo(row.id)
|
||
//如果已选择
|
||
if (row.isChoose > 0) {
|
||
this.$set(this.formData, "receiveAddress", this.userSelection[0].receiveAddress)
|
||
this.$set(this.formData, "imageUrl", this.userSelection[0].userSign)
|
||
} else {
|
||
this.$set(this.formData, "imageUrl", "")
|
||
}
|
||
this.$refs.guava.edit()
|
||
},
|
||
addressChange(val) {
|
||
const address = this.addressOptions.find((a) => a.id === val)
|
||
if (address) {
|
||
this.$set(this.formData, "receiveAddress", address.name)
|
||
this.selectedAddressCity = address.city
|
||
this.selectedAddressCounty = address.county
|
||
if (!this.isReceiveAddressArea(address.city, address.county)) {
|
||
this.$message.warning("该地址不在可配送辖区内，可配送辖区：哈尔滨市" + this.receiveAddressAreaText)
|
||
}
|
||
}
|
||
},
|
||
doChoose() {
|
||
this.$refs["addForm"].validate(async (valid) => {
|
||
if (valid) {
|
||
const {isCheckBox, multiSelectNum, singleOptionSupportMultipleSelection} = this.projectInfo
|
||
if (isCheckBox === "checkBox") {
|
||
if (this.sumSelectNum < multiSelectNum) {
|
||
//用户没有选择完
|
||
this.$message.warning("一共可以选择" + multiSelectNum + "份,您目前只选择了" + this.sumSelectNum + "份，快去选择吧！")
|
||
return
|
||
}
|
||
} else {
|
||
if (this.sumSelectNum === 0) {
|
||
//用户选择了多份
|
||
this.$message.warning("您还没有选择福利套餐，快去选择吧！")
|
||
return
|
||
}
|
||
}
|
||
|
||
// 判断门店是否选择
|
||
console.log(this.projectInfo.welfareProjectSubjects[0])
|
||
const chooseOptions = this.projectInfo.welfareProjectSubjects[0].options
|
||
.filter((v) => v.selectNum > 0 && v.shoppingId)
|
||
.map((item) => {
|
||
return {
|
||
optionName: item.optionName,
|
||
receiveAddressList: item.receiveAddressList,
|
||
selectNum: item.selectNum,
|
||
receiveAddress: item.receiveAddress
|
||
}
|
||
})
|
||
let isReceiveAddress = true
|
||
for (const item of chooseOptions) {
|
||
if (!item.receiveAddress && item.receiveAddressList.length > 0) {
|
||
this.$message.warning(item.optionName + "还没有选择收货门店哦")
|
||
isReceiveAddress = false
|
||
break
|
||
}
|
||
}
|
||
if (!isReceiveAddress) {
|
||
return
|
||
}
|
||
|
||
if (this.projectInfo.provideMode == 3) {
|
||
if (this.formData.receiveAddress == null || this.formData.receiveAddress === "") {
|
||
this.$message.warning("请填写收货地址")
|
||
return
|
||
}
|
||
if (!this.validateReceiveAddressArea()) {
|
||
return
|
||
}
|
||
}
|
||
|
||
if (![1, 4].includes(this.projectInfo.signMode)) {
|
||
if (this.formData.sign == null || this.formData.sign === "") {
|
||
this.$message.warning("请签字")
|
||
return
|
||
}
|
||
}
|
||
const formData = this.projectInfo.welfareProjectSubjects[0].options
|
||
.filter((v) => v.selectNum >= 1)
|
||
.map((v) => {
|
||
return {
|
||
welfareId: this.projectInfo.id,
|
||
subjectId: v.subjectId,
|
||
selectOptionId: v.id,
|
||
receiveAddress: this.projectInfo.provideMode === 3 ? this.formData.receiveAddress : v.receiveAddress,
|
||
userSign: this.formData.sign,
|
||
selectNum: v.selectNum
|
||
}
|
||
})
|
||
const {code, msg, data} = await $.post("/platform/welfare/userChoose/confirmSelect", {
|
||
welfareUserSelections: JSON.stringify(formData),
|
||
projectId: this.projectInfo.id,
|
||
mobile: this.formData.mobile,
|
||
totalIntegral: this.totalIntegral * 100
|
||
})
|
||
if (code === 0) {
|
||
this.$message.success("您已完成本次福利选择。")
|
||
this.doSearch()
|
||
this.$refs.guava.index()
|
||
} else {
|
||
this.$message({
|
||
message: msg,
|
||
type: "warning"
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
viewDesc(val) {
|
||
this.descData = val.description
|
||
this.descDialogVisible = true
|
||
},
|
||
async openChoose(row) {
|
||
this.isView = false
|
||
if (this.confirmButtonInfo(row).disabled) {
|
||
this.$message.warning("当前时间段无法选择")
|
||
return
|
||
}
|
||
|
||
await this.getProjectInfo(row.id)
|
||
if (!this.addressOptions || this.addressOptions.length === 0) {
|
||
await this.selectUserAddress()
|
||
}
|
||
this.$set(this.formData, "userName", "${@shiro.getPrincipalProperty('username')}")
|
||
this.$set(this.formData, "tel", "${@shiro.getPrincipalProperty('mobile')}")
|
||
|
||
let receiveAddress = ""
|
||
let addressId = null
|
||
let addressCity = null
|
||
let addressCounty = null
|
||
//如果已选择
|
||
if (row.isChoose > 0 && this.userSelection && this.userSelection.length > 0) {
|
||
receiveAddress = this.userSelection[0].receiveAddress
|
||
const address = this.addressOptions.find((a) => a.name === receiveAddress)
|
||
if (address) {
|
||
addressId = address.id
|
||
addressCity = address.city
|
||
addressCounty = address.county
|
||
} else {
|
||
addressCity = this.getReceiveAddressCity(receiveAddress)
|
||
addressCounty = this.getReceiveAddressCounty(receiveAddress)
|
||
}
|
||
this.$set(this.formData, "sign", this.userSelection[0].userSign)
|
||
} else {
|
||
const address = this.getDefaultAddress()
|
||
if (address) {
|
||
receiveAddress = address.name
|
||
addressId = address.id
|
||
addressCity = address.city
|
||
addressCounty = address.county
|
||
}
|
||
}
|
||
this.$refs.guava.edit()
|
||
this.$nextTick(() => {
|
||
this.$set(this.formData, "receiveAddress", receiveAddress)
|
||
this.$set(this.formData, "addressId", addressId)
|
||
this.selectedAddressCity = addressCity
|
||
this.selectedAddressCounty = addressCounty
|
||
})
|
||
},
|
||
//获取用户选择的数据
|
||
async getUserSelection(projectId) {
|
||
const resp = await $.get("/platform/welfare/mine/getUserSelection", {projectId: projectId})
|
||
this.userSelection = resp.data
|
||
this.echoUserSelection()
|
||
},
|
||
//回显用户选择的数据
|
||
echoUserSelection() {
|
||
//获取用户当前选择的数量
|
||
this.projectInfo.welfareProjectSubjects[0].options.forEach((v) => {
|
||
const option = this.userSelection.find((x) => x.selectOptionId === v.id)
|
||
if (option) {
|
||
v.selectNum = option.selectNum
|
||
this.$set(v, "receiveAddress", option.receiveAddress)
|
||
} else {
|
||
v.selectNum = 0
|
||
this.$set(v, "receiveAddress", "")
|
||
}
|
||
})
|
||
if (this.projectInfo.isIntegralMode) {
|
||
this.calcTotalIntegral()
|
||
}
|
||
},
|
||
async getChoice() {
|
||
const resp = await $.get("/mobile/welfare/mine/isChoice", {projectId: this.projectInfo.id})
|
||
this.isChoice = resp.data
|
||
},
|
||
isDefaultAddress(address) {
|
||
return address && (address.isDefault === true || address.isDefault === 1 || address.isDefault === "1")
|
||
},
|
||
getDefaultAddress() {
|
||
if (!this.addressOptions || this.addressOptions.length === 0) {
|
||
return null
|
||
}
|
||
return this.addressOptions.find((address) => this.isDefaultAddress(address))
|
||
},
|
||
isReceiveAddressArea(city, county) {
|
||
return city && city.trim() === "哈尔滨市" && county && this.receiveAddressAreaList.includes(county.trim())
|
||
},
|
||
getReceiveAddressCity(receiveAddress) {
|
||
if (!receiveAddress) {
|
||
return null
|
||
}
|
||
return receiveAddress.includes("哈尔滨市") ? "哈尔滨市" : null
|
||
},
|
||
getReceiveAddressCounty(receiveAddress) {
|
||
if (!receiveAddress) {
|
||
return null
|
||
}
|
||
return this.receiveAddressAreaList.find((county) => receiveAddress.includes("哈尔滨市" + county))
|
||
},
|
||
validateReceiveAddressArea() {
|
||
const city = this.selectedAddressCity || this.getReceiveAddressCity(this.formData.receiveAddress)
|
||
const county = this.selectedAddressCounty || this.getReceiveAddressCounty(this.formData.receiveAddress)
|
||
if (this.isReceiveAddressArea(city, county)) {
|
||
return true
|
||
}
|
||
this.$message.warning("收货地址仅支持哈尔滨市下辖9个市辖区：" + this.receiveAddressAreaText)
|
||
return false
|
||
},
|
||
async selectUserAddress() {
|
||
const resp = await $.get("/platform/welfare/addressManage/selectUserAddress")
|
||
resp.data.map((r) => {
|
||
let defaultName = this.isDefaultAddress(r) ? "默认地址" : ""
|
||
r.defaultName = defaultName
|
||
r.name = "收货地址：" + r.province + r.city + r.county + r.addressDetail + "，收件人：" + r.userName + "，联系方式：" + r.tel
|
||
})
|
||
this.addressOptions = resp.data
|
||
},
|
||
// 获取供应商
|
||
async getShoppingType() {
|
||
const {data} = await $.get("/platform/shoppingType/apply/getShoppingType")
|
||
this.projectInfo.welfareProjectSubjects[0].options.forEach((item) => {
|
||
item.receiveAddressList = data.find((v) => v.id === item.shoppingId)?.offlineStores
|
||
})
|
||
|
||
console.log(this.projectInfo.welfareProjectSubjects[0])
|
||
},
|
||
async getUserMobile() {
|
||
const resp = await $.post("/platform/welfare/userChoose/getUserMobile")
|
||
if (resp.code === 0) {
|
||
this.$set(this.formData, "mobile", resp.data)
|
||
}
|
||
}
|
||
},
|
||
async created() {
|
||
this.pageData()
|
||
this.selectUserAddress()
|
||
getEnumOptions("WelfareProvideMode").then((res) => {
|
||
this.welfareProvideMode = res
|
||
})
|
||
getEnumOptions("WelfareSignMode").then((res) => {
|
||
this.welfareSignMode = res
|
||
})
|
||
await this.getUserMobile()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|