123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374 |
- /***
- * 套餐说明
- * 100106设备为串口洗衣机,不能设置名称,不能删除套餐
- * 101000是门禁设备阶梯收费模式,只有一个套餐,但是需要至少5个阶梯价格
- *
- * @param option
- * @constructor
- */
- function PackageComponent(option) {
- var defaultDisplaySwitchs = {
- displayPriceSwitch: true,
- displayCoinsSwitch: true,
- displayTimeSwitch: true,
- setBasePriceAble: false, // 底价功能
- setPulseAble: false, // 脉冲功能
- }
- var _el = option.el;
- var unitList = [
- {value: "分钟", type: "time",},
- {value: "秒", type: "time",},
- {value: "小时", type: "time",},
- {value: "天", type: "time",},
- // 以上的type为time 不能配置重复,下面的这些单位,暂时定义为不同类型
- {value: "次", type: "次",},
- {value: "币", type: "币",},
- {value: "杯", type: "杯",},
- {value: "包", type: "包",},
- {value: "度", type: "elec",},
- {value: "升", type: "capacity",},
- {value: "毫升", type: "capacity",},
- {value: "斤", type: "斤",},
- {value: "公斤", type: "公斤",},
- ]
- unitList.forEach(function (item, index) {
- // 数据适配,用来给mui picker使用
- item.text = item.value
- })
- // 服务费模式只有度
- unitList = unitList.filter(item => {
- if (option.payload && option.payload.billAsService && option.payload.billAsService.on) {
- return item.type === 'elec'
- }
- return true
- })
- // 使用缓存获取,避免刷新后重新向服务器请求
- $.ajaxSetup({
- cache: true
- });
- //加载图片压缩插件
- $.getScript("https://cdn.washpayer.com/components/lib/image-compressor.min.js", function () {
- });
- function getDefaultPolicyDialog() {
- return {
- "power": '',
- "price": ''
- }
- }
- function getDefaultPolicyTempData() {
- return {
- "forApps": {
- "policyType": "",
- "rule": {
- "prices": [],
- "price": 0
- }
- },
- "forIdcard": {
- "policyType": "",
- "billingMethod": "",
- "money": 0,
- "autoRefund": true,
- "rule": {
- "prices": [],
- "price": 0
- }
- }
- }
- }
- function getSwitchsTemp() {
- return `
- <div class="mui-table-view" v-if="settings.showDisplaySwitchs">
- <div class="mui-table-view-cell">
- <label class="tips-event">显示支付 <i class="tips" title="如果关闭,用户套餐界面则不显示套餐的价格">i</i></label>
- <div class="switch switch-mini " :class="{active:info.displaySwitchs.displayPriceSwitch}"
- @tap="tapSwitch('displayPriceSwitch')">
- <div class="switch-handle"></div>
- </div>
- </div>
- <div class="mui-table-view-cell">
- <label class="tips-event">显示投币 <i class="tips" title="如果关闭,用户套餐界面则不显示套餐的投币数量">i</i></label>
- <div class="switch switch-mini " :class="{active:info.displaySwitchs.displayCoinsSwitch}"
- @tap="tapSwitch('displayCoinsSwitch')">
- <div class="switch-handle"></div>
- </div>
- </div>
- <div class="mui-table-view-cell">
- <label class="tips-event">显示“用户获得”的{{info.unit}} <i class="tips" title="如果关闭,用户套餐界面则不显示“用户获得”和单位">i</i></label>
- <div class="switch switch-mini " :class="{active:info.displaySwitchs.displayTimeSwitch}"
- @tap="tapSwitch('displayTimeSwitch')">
- <div class="switch-handle"></div>
- </div>
- </div>
- </div>
- `
- }
- function getCommonPackagesRenderTemp() {
- return `
- <h5 v-if="showTabIndex1" class="mui-content-padded">用户套餐</h5>
- <div v-if="showTabIndex1" class="package-list mui-input-group margin-t-10">
- <div class="mui-table-view-cell" v-for="(obj,index) in info.packages" :class="{'fade-node':!obj.switch}">
- <div class="p-title-row">
- <div class="p-title">
- <span>{{obj.name}} </span>
- <span v-if="info.displaySwitchs.setBasePriceAble" class="mark mark-blue"
- >底价{{obj.basePrice}}元</span>
- <span v-if="isShowPackagePrice(obj)" class="mark online"
- :class="{'offline': !info.displaySwitchs.displayPriceSwitch}">{{obj.price}}元</span>
- <span v-if="settings.showPackageCoins" class="mark mark-blue"
- :class="{'offline': !info.displaySwitchs.displayCoinsSwitch}">{{obj.coins}}币</span>
- <span v-if="settings.showPackageTime && obj.unit" class="mark mark-blue" :class="{'offline': !info.displaySwitchs.displayTimeSwitch,
- 'c-red':['customPackage', 'autoPackage'].includes(obj.id)}">{{obj.time + obj.unit}} </span>
- <span v-if="info.displaySwitchs.setPulseAble&&obj.pulse" class="mark mark-blue offline"
- >脉冲{{obj.pulse}}次</span>
- <span v-if="obj.minAfterStartCoins" class="mark mark-blue "
- >最小启动金额{{obj.minAfterStartCoins}}元</span>
- <span v-if="obj.minFee" class="mark mark-blue "
- >最小消费金额{{obj.minFee}}元</span>
- </div>
- <div class="switch switch-mini" :class="{active:obj.switch}" @tap="tapSubSwitch($event,obj)">
- <div class="switch-handle"></div>
- </div>
- </div>
- <div class="font-b-14-6 padding-t-10"><template v-if="settings.showPackageDesc"> 套餐说明:<span class="font-b-14-8">{{obj.description}}</span></template></div>
- <div class="font-b-14 padding-t-15" :class="{'c-green':obj.switch,'c-lgreen':!obj.switch}">
- {{obj.switch ? '套餐已启用' : '套餐未启用'}}
- <div class="mui-pull-right btn-group" permission="manage-show">
- <em v-on:click="sortUp(obj,index)" v-if="isShowSortPackage(obj)"><i class="iconfont icon-triangle-up c-green"></i></em>
- <em v-on:click="sortDown(obj,index)" v-if="isShowSortPackage(obj)"><i class="iconfont icon-triangle-up rotateX c-green"></i></em>
- <em v-on:click="editPackageRule(obj,index)" class=""><i class="iconfont icon-edit c-primary"></i></em>
- <em v-on:click="deletePackageRule(obj,index)" v-if="isShowDeletePackage(obj)"><i
- class="iconfont icon-delete c-red"></i></em></div>
- </div>
- </div>
- <div class="mui-table-view-cell" permission="manage-show" v-show="settings.showAddPackage"
- v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>
- </div>
- `
- }
- function getCommonPackageEditDialogTemp() {
- return `
- <div class="edit-back edit-bottom " v-bind:class="{ hidden: !info.dialogOpen }">
- <div class="edit-content">
- <div class="edit-box">
- <div class="mui-input-row">
- <label>名称</label>
- <div class="mui-pull-right edit-row">
- <input type="text" maxlength="20" v-model="info.dialogData.name" @input="changeName()"
- placeholder="请输入名称"
- :disabled="disabledPackageName"/>
- </div>
- </div>
- <div v-if="info.displaySwitchs.setBasePriceAble">
- <div class="mui-input-row ">
- <label class="tips-event">底价 <i class="tips" title="不管使用多长时间,必须支付的最基本费用。">i</i></label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.basePrice"/>
- <span class="font-b-6">元</span>
- </div>
- </div>
- </div>
- <div v-if="isShowPackagePrice(info.dialogData)">
- <div class="mui-input-row ">
- <label>支付</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.price"
- />
- <span class="font-b-6">元</span>
- </div>
- </div>
- </div>
- <div v-if="settings.showPackageCoins">
- <div class="mui-input-row">
- <label>投币</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.coins" @input="changeCoins"/>
- <span class="font-b-6">币</span>
- </div>
- </div>
- </div>
- <div v-if="info.displaySwitchs.setPulseAble">
- <div class="mui-input-row">
- <label>脉冲</label>
- <div class="mui-pull-right edit-row">
- <input type="number" min="0" step="1" v-model="info.dialogData.pulse"/>
- <span class="font-b-6">次</span>
- </div>
- </div>
- </div>
- <div v-if="isShowPackageTime(info.dialogData)" class="mui-input-row padding-t-b-10">
- <div class="mui-input-row">
- <label class="tips-event">
- <span>{{getTimeTitle()}} <i class="tips" title="不同的设备,设置不同的单位,如分钟、次、度(电量)">i</i></span>
- </label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.time" :disabled="settings.disabledPackageTime"/>
- <span class="event-unit" :class="{'c-primary':!settings.disabledPackageUnit}"
- >{{info.dialogData.unit ? info.dialogData.unit : ""}}</span>
- </div>
- </div>
- <div class="mui-input-row margin-t-5" v-show="info.devData.code <= 100103">
- <div class="font-b-12-8 mui-text-right">耗时仅供用户参考显示,不修改主板参数</div>
- </div>
- </div>
- <div v-if="settings.showPackageImg" class="mui-input-row padding-t-b-10">
- <label>图片</label>
- <div class="mui-pull-right ">
- <div class="mui-col-sm-4 mui-col-xs-4" v-for="(obj,index) in info.dialogData.imgList">
- <div class="upload-pic">
- <i class="delpic" v-on:click="deleteImg(index)">x</i>
- <img class="" v-bind:src="obj">
- </div>
- </div>
- <div class="mui-col-sm-4 mui-col-xs-4"
- v-show="info.dialogData.imgList&&info.dialogData.imgList.length<1">
- <div class="upload-pic padding-5">
- <i class="iconfont icon-add-more"></i>
- <input id="addImg" type="file" draggable="false" accept="image/*">
- </div>
- </div>
- </div>
- </div>
- <div v-if="settings.showPackageDesc" class="reg-des">
- <label>描述</label>
- <textarea maxlength="120" rows="3" placeholder=""
- v-model="info.dialogData.description"></textarea>
- </div>
- <div class="margin-t-10" v-if="isIntegration">
- <div class="line-t padding-b-10"></div>
- <div class="mui-input-row padding-b-10" v-if="(info.policyTemp.forApps.policyType==='time' || 'customPackage' === info.dialogData.id) &&
- 'autoPackage' !== info.dialogData.id && settings.billingMethod==='prepaid'">
- <label class="tips-event">充满后自动停止</label>
- <div class="switch switch-mini " :class="{active:info.dialogData.autoStop}"
- @tap="tapSwitchForObj(info.dialogData,'autoStop')">
- <div class="switch-handle"></div>
- </div>
- </div>
- <div class="mui-input-row padding-b-10" v-if="settings.billingMethod==='prepaid' && !isTempPackage">
- <label class="tips-event">自动退费</label>
- <div class="switch switch-mini" :class="{active:info.dialogData.autoRefund}"
- @tap="tapSwitchForObj(info.dialogData,'autoRefund')">
- <div class="switch-handle"></div>
- </div>
- </div>
- <div class="mui-input-row" v-if="!isTempPackage">
- <label class="">最小启动金额:</label>
- <div class="mui-pull-right edit-row">
- <input type="number" min="0" step="0.01" v-model="info.dialogData.minAfterStartCoins"/>
- <span class="font-b-6">元</span>
- </div>
- </div>
- <div class="mui-input-row" v-if="!isTempPackage">
- <label class="">最小消费金额:</label>
- <div class="mui-pull-right edit-row">
- <input type="number" min="0" step="0.01" v-model="info.dialogData.minFee"/>
- <span class="font-b-6">元</span>
- </div>
- </div>
- </div>
- </div>
- <div class="mui-popup-buttons ">
- <span class="mui-popup-button" v-on:click="closeRulePanel()">取消</span>
- <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRule()">确认</span>
- </div>
- </div>
- </div>
- `
- }
- function getPolicyTemp(target) {
- return `
- <div class="mui-input-group" :class="{'fade-node noClick':isTempPackage}">
- <div class="mui-input-row mui-radio">
- <label for="type0">按时间计费</label>
- <input id="type0" v-model="info.policyTemp.${target}.policyType" type="radio" value="time">
- </div>
- <template v-if="info.policyTemp.${target}.policyType==='time'">
- <ul class="mui-table-view">
- <li class="mui-table-view-cell table" v-for="(item, index) in info.policyTemp.${target}.rule.prices">
- <div class="p-title-row">
- <div class="inline-block">
- {{ powerRadio(item, index, info.policyTemp.${target}.rule.prices) }},{{ item.price }} 元/小时
- </div>
- <div class="mui-pull-right btn-group">
- <em v-on:click="editPolicyRule('${target}',item,index)" class=""><i class="iconfont icon-edit c-primary"></i></em>
- <em v-on:click="deletePolicyRule('${target}',index)" class=""><i class="iconfont icon-delete c-red"></i></em>
- </div>
- </div>
- </li>
- <div class="mui-table-view-cell" v-on:click="addPolicyRule('${target}')"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>
- </ul>
- </template>
- <div class="mui-input-row mui-radio">
- <label for="type1">按电量计费</label>
- <input id="type1" v-model="info.policyTemp.${target}.policyType" type="radio" value="elec">
- </div>
- <template v-if="info.policyTemp.${target}.policyType==='elec'">
- <div class="mui-input-group">
- <div class="mui-input-row">
- <label class="">电费价格</label>
- <input type="number" max="5000" step="0.01" min="0" v-model="info.policyTemp.${target}.rule.price"
- class="font-b-10 text-right font-16 padding-r-40"><span class="mini-unit">元/度</span>
- </div>
- </div>
- </template>
- </div>
- `
- }
- /**
- * 100028 到 100103 的设备类型需要提示:不修改主板参数
- * 100308-串口洗衣机不能添加套餐。并且名称不可更改;
- * 100207-墨小智设备 可以设置充满自停套餐--如果用户输入“充满自停”,则自动设置时间为999,且不能选单位和时间---由于没有 v-hide只有v-show,所以(!v-show==v-hide);
- *
- * */
- var vueConfig = ({
- el: _el,
- template: `
- <div class="package-component">
- <!--普通的通用套餐-->
- <template v-if="packageMod==='common'">
- ${getSwitchsTemp()}
-
- <template v-if="isIntegration">
- <div class="padding-l-r-10" v-if="!isTempPackage">
- <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-primary">
- <div class="mui-control-item" @click="info.tabIndex=1;" :class="[info.tabIndex===1?'mui-active':'']">
- 套餐计费配置
- </div>
- <div class="mui-control-item" @click="info.tabIndex=2;" :class="[info.tabIndex===2?'mui-active':'']">
- 在线卡计费配置
- </div>
- </div>
- </div>
- <template v-if="showTabIndex1">
- <h5 class="mui-content-padded">套餐计费模式</h5>
- ${getPolicyTemp('forApps')}
- </template>
- <template v-if="showTabIndex2">
- <h5 class="mui-content-padded">在线卡计费模式</h5>
- ${getPolicyTemp('forIdcard')}
-
- <h5 class="mui-content-padded">计费时机</h5>
- <div class="mui-input-group">
- <div class="mui-input-row mui-radio">
- <label for="billingMethod0">预付费</label>
- <input id="billingMethod0" v-model="info.policyTemp.forIdcard.billingMethod" type="radio" value="prepaid">
- </div>
- <div class="mui-input-row mui-radio">
- <label for="billingMethod1">后付费(允许余额为负值)</label>
- <input id="billingMethod1" v-model="info.policyTemp.forIdcard.billingMethod" type="radio" value="postpaid">
- </div>
- </div>
- <div class="mui-input-group margin-t-10">
- <div class="mui-input-row" v-if="info.policyTemp.forIdcard.billingMethod==='prepaid'">
- <label class="tips-event">自动退费</label>
- <div class="switch switch-mini" :class="{active:info.policyTemp.forIdcard.autoRefund}"
- @tap="tapSwitchForObj(info.policyTemp.forIdcard,'autoRefund')">
- <div class="switch-handle"></div>
- </div>
- </div>
- <div class="mui-input-row" v-if="info.policyTemp.forIdcard.billingMethod==='prepaid'">
- <label class="">刷一次卡扣费</label>
- <input type="number" max="5000" step="0.01" min="0" v-model="info.policyTemp.forIdcard.money"
- class="font-b-10 text-right font-16 padding-r-40"><span class="mini-unit">元</span>
- </div>
- <div class="mui-input-row" v-if="info.policyTemp.forIdcard.billingMethod==='postpaid'">
- <label class="">最小启动金额</label>
- <input type="number" max="5000" step="0.01" min="0" v-model="info.policyTemp.forIdcard.minAfterStartCoins"
- class="font-b-10 text-right font-16 padding-r-40"><span class="mini-unit">元</span>
- </div>
- </div>
- </template>
- <div class="edit-back edit-bottom " v-bind:class="{ hidden: !info.policyDialogOpen }">
- <div class="edit-content" style="height: 50%">
- <div class="edit-box">
- <div>
- <div class="mui-input-row">
- <label>功率</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.policyDialogData.power"/>
- <span class="font-b-6">W</span>
- </div>
- </div>
- <div class="line-t padding-b-10"></div>
- </div>
- <div>
- <div class="mui-input-row ">
- <label>价格</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.policyDialogData.price"/>
- <span class="font-b-6">元</span>
- </div>
- </div>
- <div class="line-t padding-b-10"></div>
- </div>
- </div>
- <div class="mui-popup-buttons ">
- <span class="mui-popup-button" v-on:click="closePolicyDialog()">取消</span>
- <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePolicyDialog()">确认</span>
- </div>
- </div>
- </div>
- </template>
- ${getCommonPackagesRenderTemp()}
-
- ${getCommonPackageEditDialogTemp()}
-
- </template>
- <!--------------------------------阶梯收费套餐-------------------------------->
- <template v-if="packageMod==='step'">
- <div class="package-list mui-input-group">
- <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
- <p class="font-14">计费周期</p>
- <div class="mui-pull-right margin-t-10 font-14" permission="manage-show">
- <em v-on:click="editPackageRule(obj,index)" class="padding-t-b-10"><i
- class="iconfont icon-edit c-primary"></i>编辑</em>
- </div>
- </div>
- </div>
- <div class="edit-back " v-bind:class="{ hidden: !info.dialogOpen }">
- <div class="edit-content">
- <div class="edit-box ">
- <p class="font-b-8">计费周期</p>
- <div class="mui-input-row">
- <label>周期时间</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.maxHour"/>
- <span>小时</span>
- </div>
- </div>
- <div class="mui-input-row ">
- <label>价格</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.price"/>
- <span>元</span>
- </div>
- </div>
- </div>
- <div class="mui-popup-buttons ">
- <span class="mui-popup-button" v-on:click="closeRulePanel()">取消</span>
- <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRuleForStepMod()">确认</span>
- </div>
- </div>
- </div>
- </template>
- </div>
- `,
- data: {
- settings: {
- showAddPackage: true,
- showDeletePackage: true,
- disabledPackageName: false,
- disabledPackageTime: false,
- disabledPackageUnit: false,
- showDisplaySwitchs: true,
- showPackagePrice: true,
- showPackageCoins: true,
- showPackageTime: true,
- showPackageImg: true,
- showPackageDesc: true,
- billingMethod: 'prepaid',// 套餐 默认先付费prepaid, 后付费是postpaid -- 目前不传到后台,是根据是否为临时套餐来判断的。
- },
- isTempPackage: false,
- packageMod: 'common',
- unit_price: null,
- unitPicker: null,// unit picker组件
- info: {
- tabIndex: 1,// 101280套餐、在线卡切换(仅仅视图)
- lastTarget: '', // 101280 当前编辑的对象:forApps、forIdcard
- policyTemp: getDefaultPolicyTempData(),
- policyDialogIndex: 0,
- policyDialogOpen: false,
- policyDialogData: getDefaultPolicyDialog(),
- /***************分割线****************/
- displaySwitchs: defaultDisplaySwitchs,
- unit: "",//单位,需要实时update
- devData: {},
- packages: [],
- dialogIndex: 0,
- dialogOpen: false,
- dialogData: {
- // 默认为开启
- switch: true,
- unit: ''
- },
- },
- imgCompressLoadFlag: false
- },
- mounted: function () {
- var that = this
- this.initPackages();// 首次注入的数据必须结构完整,否则可能某些字段无法成功双向绑定渲染
- // 延迟绑定事件
- setTimeout(function () {
- if (mui.PopPicker == null) {
- console.log('请引入入 mui picker')
- } else {
- var unitPicker = new mui.PopPicker();
- $('body').on('tap', '.event-unit', function (event) {
- // 考虑单位不可选
- if (that.settings.disabledPackageUnit) {
- return
- }
- // 保持当前输入框的值==picker组件选中的值
- var nowUnit = that.info.dialogData['unit']
- console.log('nowUnit:' + nowUnit)
- unitPicker.pickers[0].setSelectedIndex(findeUnitIndex(nowUnit));//setSelectedValue似乎不生效
- // 选中后更新输入框的值
- unitPicker.show(function (items) {
- Vue.set(that.info.dialogData, 'unit', items[0].value)
- });
- });
- that.unitPicker = unitPicker
- that.setUnitList();
- }
- }, 100)
- function findeUnitIndex(value) {
- for (var index in unitList) {
- var item = unitList[index]
- if (value == item.value) {
- return index;
- }
- }
- return -1;
- }
- },
- computed: {
- // 整合版的套餐,带设备参数
- isIntegration() {
- return [101280, 101249, 101270].includes(parseInt(this.info.devData.code))
- },
- // 101280特有的切换页
- showTabIndex1() {
- if (this.isIntegration) {
- if (this.info.tabIndex === 1) {
- return true
- }
- } else {
- return true
- }
- },
- showTabIndex2() {
- if (this.isIntegration) {
- if (this.info.tabIndex === 2) {
- return true
- }
- } else {
- return true
- }
- },
- disabledPackageName() {
- if (this.isIntegration) {
- var id = this.info.dialogData.id
- return ['customPackage', 'autoPackage'].includes(id) || this.settings.disabledPackageName
- }
- return this.settings.disabledPackageName
- },
- },
- watch: {
- 'info.policyTemp.forApps.policyType'(newVal) {
- if (this.isIntegration) {
- this.info.packages.forEach(item => {
- item.unit = (newVal === 'elec' ? "度" : "分钟")
- })
- this.setUnitList()
- }
- },
- },
- filters: {},
- methods: {
- getTimeTitle() {
- var info = this.info;
- if (info.dialogData && info.dialogData.id) {
- if (['customPackage'].includes(info.dialogData.id)) {
- return `最大${info.policyTemp.forApps.policyType === 'time' ? '时长' : '电量'}`
- } else if (['autoPackage'].includes(info.dialogData.id)) {
- return `单次充电最大${info.policyTemp.forApps.policyType==='time'?'时长':'电量'}`
- }
- }
- return '用户获得'
- },
- isShowSortPackage(obj) {
- if (['customPackage', 'autoPackage'].includes(obj.id)) {
- return false
- }
- return true
- },
- isShowDeletePackage(obj) {
- if (['customPackage', 'autoPackage'].includes(obj.id)) {
- return false
- }
- return this.settings.showDeletePackage
- },
- isShowPackageName(obj) {
- var info = this.info
- if (info.devData.code == 100207 && obj.name == '充满自停') {
- return false
- }
- return true
- },
- isShowPackageTime(obj) {
- var info = this.info
- if (info.devData.code == 100207 && obj.name == '充满自停') {
- return false
- }
- return this.settings.showPackageTime
- },
- isShowPackagePrice(obj) {
- var settings = this.settings
- if (settings.billingMethod === 'prepaid' && settings.showPackagePrice) {
- return true
- }
- return false
- },
- setUnitList() {
- var ut = unitList
- if (this.isIntegration) {
- var newVal = this.info.policyTemp.forApps.policyType
- if (newVal === 'elec') {
- ut = [{value: '度', text: '度'}]
- } else {
- ut = [{value: '分钟', text: '分钟'}, {value: '小时', text: '小时'}]
- }
- }
- this.unitPicker && this.unitPicker.setData(ut);
- },
- getBaseConfig() {
- var info = this.info
- var reObj = {}
- if (this.isIntegration) {
- reObj = {
- policyTemp: info.policyTemp,
- }
- }
- return reObj
- },
- powerRadio(item, index, obj) {
- return ((obj[index - 1] && obj[index - 1].power) || 0) + "W-" + item.power + "W"
- },
- addPolicyRule(target) {
- this.lastTarget = target;
- this.info.policyDialogIndex = this.info.policyTemp[target].rule.prices.length;
- this.info.policyDialogOpen = true;
- $("body").addClass("over-hide");
- this.info.policyDialogData = getDefaultPolicyDialog();
- },
- editPolicyRule(target, obj, index) {
- this.lastTarget = target;
- this.info.policyDialogIndex = index;
- this.info.policyDialogOpen = true;
- $("body").addClass("over-hide");
- this.info.policyDialogData = $.extend(true, getDefaultPolicyDialog(), obj);
- },
- deletePolicyRule: function (target, index) {
- this.info.policyTemp[target].rule.prices.splice(index, 1);
- },
- closePolicyDialog: function () {
- this.info.policyDialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- savePolicyDialog: function () {
- var target = this.lastTarget;
- var dialogData = this.info.policyDialogData;
- var list = this.info.policyTemp[target].rule.prices;
- var index = this.info.policyDialogIndex;
- if (!isMoney(dialogData.price)) {
- mui.toast("请正确输入支付价格");
- return;
- }
- if (!isMoney(dialogData.power)) {
- mui.toast("请正确输入功率");
- return;
- }
- let newRow = $.extend(true, {}, this.info.policyDialogData);
- list.splice(index, 1, newRow);
- this.info.policyDialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- sortUp(obj, index) {
- var packages = this.info.packages
- if (index > 0) {
- var temp1 = packages[index - 1]
- var temp2 = packages[index]
- this.$set(packages, index - 1, temp2)
- this.$set(packages, index, temp1)
- }
- },
- sortDown(obj, index) {
- var packages = this.info.packages
- if (index < packages.length - 1) {
- var temp1 = packages[index]
- var temp2 = packages[index + 1]
- this.$set(packages, index, temp2)
- this.$set(packages, index + 1, temp1)
- }
- },
- // 适配数据,如果没有单位,默认加上单位;套餐默认开启所有开关
- adapterPackagesData: function (opt) {
- let settings = this.settings
- var payload = opt.payload
- var devData = opt.devData
- var packages = opt.packages || this.info.packages
- var unit_price = opt.payload && opt.payload.unit_price
- this.isTempPackage = payload.isTempPackage
- this.info.devData = devData
- // 这两个是全自动洗衣机
- if ([100308, 100307].includes(parseInt(devData.code))) {
- settings.disabledPackageName = true
- settings.showAddPackage = false
- settings.showDeletePackage = false
- }
- if ([100601, 100279].includes(parseInt(devData.code)) || this.isIntegration) {
- settings.showDisplaySwitchs = false
- settings.showPackageCoins = false
- }
- // 特殊设备单位不可用,隐藏名称, 图片, 描叙; 套餐默认后付费、临时套餐默认先付费
- if (this.isIntegration) {
- settings.showPackageImg = false
- settings.showPackageDesc = false
- if (payload.isTempPackage) {
- settings.billingMethod = "prepaid" // 临时套餐先付费
- settings.showPackageTime = false // 临时套餐计费规则定死, 无需填写用户获得
- } else {
- settings.billingMethod = "postpaid" // 普通套餐后付费
- }
- }
- if ([100601, 100279].includes(parseInt(devData.code))) {
- settings.showPackagePrice = false
- }
- if (devData.code == 101000) {
- // 阶梯收费模式
- this.packageMod = 'step'
- }
- // 单价模式
- if (unit_price) {
- this.unit_price = unit_price
- settings.disabledPackageUnit = true;
- settings.disabledPackageTime = true;
- }
- // 防止后台缺少关键key从而无法双绑
- this.info.displaySwitchs = $.extend(true, defaultDisplaySwitchs, opt.displaySwitchs);
- //自从2020.11.15改版后,默认情况下,所有的子项单位统一,不需要从外面再传单位了。 需要从packages获取(一般都一致)。
- if (!this.info.unit) {
- var _unit = packages.length > 0 ? packages[0].unit : '分钟';
- this.info.unit = _unit
- console.log('未发现info.unit!从套餐中获取第一个单位。')
- }
- for (var index in packages) {
- var item = packages[index]
- if (!item.unit) {
- item.unit = this.info.unit
- }
- if (item.switch === null || item.switch === undefined) {
- item.switch = true
- }
- }
- this.info.packages = packages
- if (this.isIntegration) {
- this.info.policyTemp = $.extend(true, getDefaultPolicyTempData(), payload.policyTemp)
- if (!payload.isTempPackage) {
- if (!packages.find(item => item.id === 'customPackage')) {
- var obj = this.getDefaultPackageItem()
- obj.id = 'customPackage'
- obj.name = '自定义'
- obj.switch = false
- packages.unshift(obj)
- }
- if (!packages.find(item => item.id === 'autoPackage')) {
- var obj = this.getDefaultPackageItem()
- obj.id = 'autoPackage'
- obj.name = '充满自停'
- obj.switch = false
- packages.unshift(obj)
- }
- }
- }
- },
- tapSwitch: function (target) {
- this.info.displaySwitchs[target] = !this.info.displaySwitchs[target];
- },
- tapSwitchForObj: function (obj, target) {
- obj[target] = !obj[target];
- },
- tapSubSwitch: function ($evt, obj) {
- $evt.stopPropagation()
- obj.switch = !obj.switch
- },
- changeName: function () {
- var devData = this.info.devData;
- //墨小智v2 特殊的充满自停套餐
- if (devData.code == 100207 && this.info.dialogData.name == "充满自停") {
- this.info.dialogData.time = 999;
- }
- },
- initPackages: function () {
- //初始化先适配数据,主要是为了适配单位、还有默认开关
- this.adapterPackagesData(option);
- },
- //是否需要图片
- getImgFeatures: function () {
- return true;//暂定 所有的类型都需要图片
- },
- getDefaultPackageItem() {
- let obj = {}
- if (this.packageMod === 'step') {
- obj = {
- price: "",
- maxHour: ""
- };
- } else if (this.unit_price) {
- obj = {
- switch: true,
- name: "",
- imgList: [],
- unit: this.unit_price.unit,
- time: '',
- };
- } else {
- obj = {
- switch: true,
- name: "",
- imgList: [],
- unit: this.info.unit,
- time: '',
- };
- }
- if (this.isIntegration) {
- obj = $.extend(true, {
- autoStop: true,
- autoRefund: false,
- minAfterStartCoins: 0,
- minFee: 0,
- }, obj)
- }
- return obj
- },
- addPackageRule: function () {
- this.imgCompressLoad();
- this.info.dialogIndex = this.info.packages.length;
- this.info.dialogOpen = true;
- $("body").addClass("over-hide");//避免滚动穿透,直接禁止body滚动
- this.info.dialogData = this.getDefaultPackageItem();
- }
- ,
- editPackageRule: function (obj, index) {
- this.info.dialogIndex = index;
- this.info.dialogOpen = true;
- if (this.packageMod === 'step') {
- // nothing
- } else {
- this.imgCompressLoad();
- }
- this.info.dialogData = $.extend(true, this.getDefaultPackageItem(), obj)
- $("body").addClass("over-hide");//避免滚动穿透,直接禁止body滚动
- },
- deletePackageRule: function (obj, index) {
- var that = this;
- var tnArray = ['取消', '确认'];
- mui.confirm('确定要删除该套餐?', '温馨提示', tnArray, function (e) {
- if (e.index == 0) {
- } else {
- //点击确认业务
- that.info.packages.splice(index, 1);
- }
- });
- },
- closeRulePanel: function () {
- this.info.dialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- savePackageRule: function () {
- if (this.unit_price) {
- this.savePackageRuleForUnitMod()
- return;
- }
- var dialogData = this.info.dialogData;
- var devData = this.info.devData;
- if (!this.checkName()) {
- return;
- }
- if (this.info.displaySwitchs.setBasePriceAble && !isMoney(dialogData.basePrice)) {
- mui.toast("底价填写不正确");
- return;
- }
- if (this.isShowPackagePrice(dialogData)) {
- if (!isMoney(dialogData.price)) {
- mui.toast("支付价格填写不正确");
- return;
- }
- }
- if (this.settings.showPackageCoins) {
- if (!isMoney(dialogData.coins)) {
- mui.toast("投币填写不正确");
- return;
- }
- }
- // 100279 的设备 所有套餐添加上功率计费的属性
- if (devData.code == "100279") {
- this.info.dialogData.billingMethod = "powerBilling";
- }
- if (this.info.displaySwitchs.setPulseAble && !isPInt(dialogData.pulse)) {
- mui.toast("脉冲写不正确");
- return;
- }
- if (this.settings.showPackageTime) {
- if (dialogData.time === "" || dialogData.time == null || dialogData.time <= 0) {
- mui.toast(`“${this.getTimeTitle()}”不正确,必须为大于0的数字`);
- return;
- }
- }
- this.info.unit = dialogData.unit;// 刷新单位,避免下次增加套餐重选
- let list = this.info.packages;
- let index = this.info.dialogIndex;
- let newRow = $.extend(true, {}, this.info.dialogData);
- list.splice(index, 1, newRow);
- this.info.dialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- savePackageRuleForStepMod: function () {
- var dialogData = this.info.dialogData;
- if (dialogData.maxHour === '') {
- mui.toast("时间填写不正确");
- return;
- }
- // 两个字符串比较会有bug,比如 "111"<"2" 是等于true的,所以要进行数据类型换换:parseFloat
- if (this.info.dialogIndex - 1 >= 0) {
- var prevPackage = this.info.packages[this.info.dialogIndex - 1];
- if (parseFloat(dialogData.maxHour) <= parseFloat(prevPackage.maxHour)) {
- mui.toast("时间必须大于" + prevPackage.maxHour);
- return;
- }
- }
- if (this.info.dialogIndex + 1 < this.info.packages.length) {
- var afterPackage = this.info.packages[this.info.dialogIndex + 1];
- if (parseFloat(afterPackage.maxHour) <= parseFloat(dialogData.maxHour)) {
- mui.toast("时间必须小于" + afterPackage.maxHour);
- return;
- }
- }
- if (!isMoney(dialogData.price)) {
- mui.toast("价格填写不正确");
- return;
- }
- this.info.packages[this.info.dialogIndex] = this.info.dialogData;
- this.info.dialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- savePackageRuleForUnitMod: function () {
- var dialogData = this.info.dialogData;
- if (!this.checkName()) {
- return;
- }
- if (!isMoney(dialogData.price)) {
- mui.toast("支付价格填写不正确");
- return;
- }
- if (!isMoney(dialogData.coins)) {
- mui.toast("投币填写不正确");
- return;
- }
- let list = this.info.packages
- let index = this.info.dialogIndex
- let newRow = $.extend(true, {}, this.info.dialogData);
- list.splice(index, 1, newRow)
- this.info.dialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- checkName() {
- let dialogData = this.info.dialogData;
- if (this.settings.disabledPackageName || !this.isShowPackageName(dialogData)) {
- } else {
- if (!dialogData.name) {
- mui.toast("名称不能为空");
- return false;
- }
- }
- for (let index in this.info.packages) {
- let item = this.info.packages[index];
- let otherName = item.name;
- //和其他套餐匹配,如果名称有重复不能保存
- if (index != this.info.dialogIndex && otherName === dialogData.name) {
- mui.toast("套餐名称不能重复");
- return false;
- }
- }
- return true
- },
- changeCoins() {
- let dialogData = this.info.dialogData;
- if (this.unit_price) {
- let value1 = this.unit_price.value
- if (dialogData) {
- dialogData.time = parseFloat((value1 * dialogData.coins).toFixed(2))
- dialogData.unit = this.unit_price.unit // 单位也刷新下,因为原套餐可能是错误的
- }
- }
- },
- imgCompressLoad: function () {
- var that = this;
- if (this.imgCompressLoadFlag) {
- return;
- }
- this.imgCompressLoadFlag = true;
- // 检测图片特性
- if (!this.getImgFeatures()) {
- return;
- }
- if (window.ImageCompressor) {
- const imageCompressor = new ImageCompressor();
- var imgUpload = $("#addImg");
- imgUpload.change(function (evt) {
- var file = imgUpload[0].files[0];
- if (file) {
- imageCompressor.compress(file, {
- quality: .7,
- // 套餐图片不会太大
- maxWidth: 1080,
- maxHeight: 1080,
- success: function (result) {
- var formData = new FormData();
- formData.append('file', result, result.name);
- var url = '/common/upload?type=packageImg';
- myAjax({
- url: url,
- type: 'POST',
- data: formData,
- processData: false,
- contentType: false,
- beforeSend: function () {
- showLoading('上传中...');
- },
- success: function (res) {
- if (res.result == 1) {
- var url = res.para;
- that.info.dialogData.imgList.push(url);
- } else {
- mui.toast(res.description);
- }
- },
- complete: function (res) {
- hideLoading();
- //重置文件路径,避免选中重复不触发onchange
- var imgUpload = $("#addImg");
- imgUpload[0].value = "";
- }
- });
- }
- })
- }
- });
- } else {
- //图片插件未加载完成提示
- mui.toast("图片上传工具未加载,刷新页面重试...");
- }
- },
- deleteImg: function (index) {
- var dialogData = this.info.dialogData;
- dialogData.imgList.splice(index, 1);
- //重置文件路径,避免选中重复文件不生效
- var imgUpload = $("#addImg");
- imgUpload[0].value = "";
- }
- }
- });
- /**
- * 射击枪太特殊,重新写一份 code == 101205; 只有3个套餐,只能修改价格; 币数不能改和射击枪次数一致(后台返回写死);套餐1价格8-20,后面的依次翻倍
- */
- if (option.devData && option.devData.code == 101205) {
- vueConfig = ({
- el: _el,
- template: `
- <div class="package-component">
- <div class="package-list mui-input-group margin-t-10">
- <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
- <div class="p-title-row">
- <div class="p-title">
- <span>{{obj.name}} </span>
- <span class="mark mark-blue"
- >{{obj.coins}}币</span>
- <span class="mark online"
- >{{obj.price}}元</span>
- </div>
- </div>
- <div class="font-b-14 margin-t-5">
- <div class="mui-pull-right btn-group" permission="manage-show">
- <em v-on:click="editPackageRule(obj,index)" class=""><i class="iconfont icon-edit c-primary"></i></em>
- </div>
- </div>
- </div>
- </div>
- <div class="edit-back edit-bottom " v-bind:class="{ hidden: !info.dialogOpen }">
- <div class="edit-content">
- <div class="edit-box">
- <div class="mui-input-row">
- <label>名称</label>
- <div class="mui-pull-right edit-row">
- <input type="text" maxlength="20" v-model="info.dialogData.name"
- placeholder="请输入名称"
- :disabled="true"/>
- </div>
- </div>
- <div class="line-t padding-b-10"></div>
-
- <div>
- <div class="mui-input-row">
- <label>投币</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.coins" :disabled="true"/>
- <span class="font-b-6">币</span>
- </div>
- </div>
- <div class="line-t padding-b-10"></div>
- </div>
- <div>
- <div class="mui-input-row ">
- <label>支付</label>
- <div class="mui-pull-right edit-row">
- <input type="number" maxlength="5" v-model="info.dialogData.price"
- />
- <span class="font-b-6">元</span>
- </div>
- </div>
- <div class="line-t padding-b-10"></div>
- </div>
- </div>
- <div class="mui-popup-buttons ">
- <span class="mui-popup-button" v-on:click="closeRulePanel()">取消</span>
- <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRule()">确认</span>
- </div>
- </div>
- </div>
- </div>
- `,
- data: {
- info: {
- devData: {},
- packages: [],
- dialogIndex: 0,
- dialogOpen: false,
- dialogData: {},
- },
- },
- mounted: function () {
- var that = this
- that.initPackages();// 首次注入的数据必须结构完整,否则可能某些字段无法成功双向绑定渲染
- },
- methods: {
- // 适配数据,如果没有单位,默认加上单位;套餐默认开启所有开关
- adapterPackagesData: function (opt) {
- var devData = opt.devData
- var packages = opt.packages || this.info.packages
- this.info.devData = devData
- this.info.packages = packages
- },
- initPackages: function () {
- //初始化先适配数据,主要是为了适配单位、还有默认开关
- this.adapterPackagesData(option);
- },
- editPackageRule: function (obj, index) {
- this.info.dialogIndex = index;
- this.info.dialogOpen = true;
- this.info.dialogData = $.extend(true, {
- name: "",
- }, obj);
- $("body").addClass("over-hide");//避免滚动穿透,直接禁止body滚动
- },
- closeRulePanel: function () {
- this.info.dialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- savePackageRule: function () {
- var dialogData = this.info.dialogData;
- let list = this.info.packages;
- let index = this.info.dialogIndex;
- if (!isMoney(dialogData.price) || dialogData.price < 8) {
- mui.toast("支付价格最小为8");
- return;
- }
- if (index === 0 && (dialogData.price < 8 || dialogData.price > 20)) {
- mui.toast("第一个套餐价格8-20");
- return;
- }
- let newRow = $.extend(true, {}, this.info.dialogData);
- list.splice(index, 1, newRow);
- // 修改套餐1的价格,则自动修改后续套餐的价格
- if (index === 0) {
- list.forEach((item, index) => {
- if (index > 0) {
- item.price = dialogData.price * Math.pow(2, index)
- }
- })
- }
- this.info.dialogOpen = false;
- $("body").removeClass("over-hide");//恢复body滚动
- },
- }
- });
- }
- var app = this.app = new Vue(vueConfig);
- }
- PackageComponent.prototype.getDisplaySwitchs = function () {
- return this.app.info.displaySwitchs || {};
- };
- PackageComponent.prototype.getBaseConfig = function () {
- if (this.app.getBaseConfig) {
- return this.app.getBaseConfig();
- }
- return {}
- };
- PackageComponent.prototype.getPackages = function () {
- return this.app.info.packages;
- };
- PackageComponent.prototype.update = function (data) {
- var app = this.app;
- for (var key in data) {
- Vue.set(app.info, key, data[key]);
- }
- app.adapterPackagesData(data);
- };
|