forked from beauty-erp
zq-erp/src/main/resources/templates/views/admin/activity/activity-sign-logistics-info.html
New file @@ -0,0 +1,336 @@ <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 本框架基本脚本和样式 --> <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> <link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}"> <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/> <style> .el-aside { background-color: #fff; color: #333; } .el-main { background-color: #fff; color: #333; } body > .el-container { margin-bottom: 1000px; } </style> </head> <body> <div class="ibox-content" id="app" v-cloak> <el-container> <el-aside width="50%"> <el-row style="padding: 20px"> <p class="el-big-title">中奖信息</p> </el-row> <el-row style="margin-top: 10px;"> <el-col> <el-form :model="formSelect"> <el-row> <el-form-item label="奖品名称：" :label-width="formLabelWidth"> {{formSelect.jpmc}} </el-form-item> </el-row> <el-row style="display:flex;"> <el-col> <el-form-item label="奖品图片：" :label-width="formLabelWidth"> {{formSelect.jptp}} </el-form-item> </el-col> <el-col> <el-form-item label="数量：" :label-width="formLabelWidth"> {{formSelect.sl}} </el-form-item> </el-col> </el-row> <el-row style="display:flex;"> <el-col> <el-form-item label="中奖人：" :label-width="formLabelWidth"> {{formSelect.zjr}} </el-form-item> </el-col> <el-col> <el-form-item label="中奖时间：" :label-width="formLabelWidth"> {{formSelect.zjsj}} </el-form-item> </el-col> </el-row> <el-row style="display:flex;"> <el-col> <el-form-item label="活动名称：" :label-width="formLabelWidth"> {{formSelect.hdmc}} </el-form-item> </el-col> <el-col> <el-form-item label="活动编号：" :label-width="formLabelWidth"> {{formSelect.hdbh}} </el-form-item> </el-col> </el-row> <el-row style="display:flex;"> <el-col> <el-form-item label="兑奖方式：" :label-width="formLabelWidth"> <span v-if="formSelect.djfs == 1">线下兑换</span> <span v-if="formSelect.djfs == 2">物流配送</span> <span v-if="formSelect.djfs == 3">客服兑换</span> </el-form-item> </el-col> <el-col> <el-form-item label="兑奖时间：" :label-width="formLabelWidth"> {{formSelect.djsj}} </el-form-item> </el-col> </el-row> </el-form> </el-col> </el-row> <el-row style="padding: 20px"> <p class="el-big-title">收货地址</p> </el-row> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"> <el-row style="padding: 10px"> <el-col class="col-sm-10" > <el-form-item label="收货人：" prop="shr"> <el-input v-model="ruleForm.shr" :disabled="(formSelect.state == 3 ? true:false)"></el-input> </el-form-item> </el-col> </el-row> <el-row style="padding: 10px"> <el-col class="col-sm-10" > <el-form-item label="联系电话：" prop="lxdh"> <el-input v-model="ruleForm.lxdh" :disabled="(formSelect.state == 3 ? true:false)"></el-input> </el-form-item> </el-col> </el-row> <el-row style="padding: 10px"> <el-col class="col-sm-10" > <el-form-item label="收货地址：" prop="shdz"> <el-input v-model="ruleForm.shdz" :disabled="(formSelect.state == 3 ? true:false)"></el-input> </el-form-item> </el-col> </el-row> <el-row style="padding: 20px"> <p class="el-big-title">发货信息</p> </el-row> <el-row style="padding: 10px"> <el-col class="col-sm-10" > <el-form-item label="配送方式：" > <span>物流配送</span> </el-form-item> </el-col> </el-row> <el-row style="padding: 10px"> <el-col class="col-sm-10" > <el-form-item label="快递公司编码："> <el-input v-model="ruleForm.kdgs" :disabled="(formSelect.state == 3 ? true:false)"></el-input> </el-form-item> </el-col> <el-col class="col-sm-10" > <el-form-item label="快递公司" prop="kdgs"> <el-select v-model="ruleForm.kdgs" :disabled="(formSelect.state == 3 ? true:false)" placeholder="请选择" filterable> <el-option v-for="item in logisticsList " :key="item.code" :label="item.name" :value="item.code"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row style="padding: 10px"> <el-col class="col-sm-10" > <el-form-item label="快递单号：" prop="kddh"> <el-input :disabled="(formSelect.state == 3 ? true:false)" v-model="ruleForm.kddh"></el-input> </el-form-item> </el-col> </el-row> <el-row style="padding: 10px"> <el-col class="col-sm-12 text-center"> <el-button type="primary" v-if="formSelect.djfs == 2 && formSelect.state != 3" @click="dataSubmit('ruleForm')">发货</el-button> <el-button type="danger" @click="cancelSubmit">关闭</el-button> </el-col> </el-row> </el-form> </el-aside> <el-main width="50%"> <el-row> <p class="el-big-title">物流跟踪</p> </el-row> <el-row style="padding: 10px"> <div class="block"> <el-timeline :reverse="reverse"> <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" placement="top"> <el-card> <p>{{activity.content}}</p> </el-card> </el-timeline-item> </el-timeline> </div> </el-row> </el-main> </el-container> </div> </body> <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> <script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script> <script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script> <script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script> <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> <script> var writeoffId = $.query.get("writeoffId"); var app = new Vue({ el: '#app', data: { formLabelWidth: '120px', //基本信息 formSelect: { jpmc: '', jptp: '', sl: '', zjr: '', zjsj: '', hdmc: '', hdbh: '', djfs: '', state: '', djsj: '', consignee: '', consigneePhone: '', consigneeAddress: '', }, //物流信息 logisticsList:[], ruleForm : { shr:'', lxdh:'', shdz:'', kdgs:'', kddh:'', }, //物流跟踪 reverse: true, activities: [], rules : { shr : [ { required: true, message: '请输入收货人', trigger: 'blur' } ], lxdh : [ { required: true, message: '请输入联系电话', trigger: 'blur' } ], shdz : [ { required: true, message: '请输入收货地址', trigger: 'blur' } ], kdgs : [ { required: true, message: '请选择快递公司', trigger: 'change' } ], kddh : [ { required: true, message: '请输入快递单号', trigger: 'blur' } ], }, }, created: function () { this.loadInfo(); this.getlogisticsList(); }, mounted: function () { }, methods: { //加载分类 loadInfo() { let _this = this; //加载配置 AjaxProxy.requst({ app: _this, data: {writeoffId}, url: basePath + '/admin/activitySignWriteoff/findSignWriteoff', callback: function (data) { _this.formSelect = data.mapInfo.signWriteoffVo; _this.activities = data.mapInfo.signWriteoffVo.activities; } }); }, // 下拉框数据源---快递公司 getlogisticsList() { let _this = this; AjaxProxy.requst({ app: _this, contentType: 'application/x-www-form-urlencoded', data:{ type: '快递公司' }, url: basePath + '/admin/dataDictionary/showDataDictionary', callback: function (data) { _this.logisticsList = data.rows; } }); }, //发货 dataSubmit : function(formName) { const _this = this; let flag = false; _this.$refs[formName].validate((valid) => { if (!valid) { flag = true; return; } }); if (flag) { return; } let resultData = { writeoffId : writeoffId, shr : _this.ruleForm.shr, lxdh : _this.ruleForm.lxdh, shdz : _this.ruleForm.shdz, kdgs : _this.ruleForm.kdgs, kddh : _this.ruleForm.kddh, } AjaxProxy.requst({ app: _this, data: resultData, url: basePath + '/admin/activitySignWriteoff/logisticsSubmit', callback: function (data) { _this.$message({ message: data.info, type: 'success', }); } }); }, //关闭 cancelSubmit() { this.closeFrame(); }, closeFrame() { parent.layer.close(parent.layer.getFrameIndex(window.name)); }, } }) </script> </body> </html>
