add.php 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. {include file="public/head"}
  5. <link href="/system/frame/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
  6. <link href="/system/frame/css/style.min.css?v=3.0.0" rel="stylesheet">
  7. <title>{$title|default=''}</title>
  8. <style></style>
  9. </head>
  10. <body>
  11. <div class="wrapper wrapper-content">
  12. <div class="row">
  13. <div class="col-sm-12">
  14. <div class="ibox float-e-margins">
  15. <div class="ibox-title">
  16. <h5>门店设置</h5>
  17. </div>
  18. <div id="store-attr" class="mp-form" v-cloak="">
  19. <i-Form :label-width="80" style="width: 100%">
  20. <template>
  21. <Alert type="warning">除门店简介外其他选项都是必填项</Alert>
  22. <Form-Item>
  23. <Row>
  24. <i-Col span="13">
  25. <span>门店名称:</span>
  26. <i-Input placeholder="门店名称" v-model="form.name" style="width: 80%" type="text"></i-Input>
  27. </i-Col>
  28. </Row>
  29. </Form-Item>
  30. <Form-Item>
  31. <Row>
  32. <i-Col span="13">
  33. <span>门店简介:</span>
  34. <i-Input placeholder="门店简介" v-model="form.introduction" style="width: 80%" type="text"></i-Input>
  35. </i-Col>
  36. </Row>
  37. </Form-Item>
  38. <Form-Item>
  39. <Row>
  40. <i-Col span="13">
  41. <span>门店手机号:</span>
  42. <i-Input placeholder="门店手机号" v-model="form.phone" style="width: 80%" type="text"></i-Input>
  43. </i-Col>
  44. </Row>
  45. </Form-Item>
  46. <Form-Item>
  47. <Row>
  48. <i-Col span="13">
  49. <span>门店地址:</span>
  50. <Cascader :data="addresData" :value.sync="form.address" @on-change="handleChange" style="width: 80%;display: inline-block;"></Cascader>
  51. </i-Col>
  52. </Row>
  53. </Form-Item>
  54. <Form-Item>
  55. <Row>
  56. <i-Col span="13">
  57. <span>详细地址:</span>
  58. <i-Input placeholder="详细地址" v-model="form.detailed_address" style="width: 80%" type="text"></i-Input>
  59. </i-Col>
  60. </Row>
  61. </Form-Item>
  62. <!-- <Form-Item>-->
  63. <!-- <Row>-->
  64. <!-- <i-Col span="13">-->
  65. <!-- <span>核销时效:</span>-->
  66. <!-- <Date-picker type="daterange" @on-change="changeValidTime" placeholder="选择日期" :value="form.valid_time"></Date-picker>-->
  67. <!-- </i-Col>-->
  68. <!-- </Row>-->
  69. <!-- </Form-Item>-->
  70. <Form-Item>
  71. <Row>
  72. <i-Col span="13">
  73. <span>营业时间:</span>
  74. <Time-picker type="timerange" @on-change="changeDayTime" placement="bottom-end" :value="form.day_time" placeholder="选择时间"></Time-picker>
  75. </i-Col>
  76. </Row>
  77. </Form-Item>
  78. <Form-Item>
  79. <Row>
  80. <i-Col span="13">
  81. <span>门店logo:</span>
  82. <div class="demo-upload-list" v-if="form.image">
  83. <template>
  84. <img :src="form.image">
  85. <div class="demo-upload-list-cover">
  86. <Icon type="ios-eye-outline" @click="visible = true "></Icon>
  87. <Icon type="ios-trash-outline" @click="form.image=''"></Icon>
  88. </div>
  89. </template>
  90. </div>
  91. <div class="ivu-upload" style="display: inline-block; width: 58px;" @click="openWindows('选择图片','{:Url('widget.images/index',['fodder'=>'slider_image'])}',{w:900,h:550})" v-if="!form.image">
  92. <div class="ivu-upload ivu-upload-drag">
  93. <div style="width: 58px; height: 58px; line-height: 58px;">
  94. <i class="ivu-icon ivu-icon-camera" style="font-size: 20px;"></i>
  95. </div>
  96. </div>
  97. </div>
  98. <!-- <div style="width: 670px; height: 320px;bottom:10%;display: block; position: absolute;z-index: 999999" v-if="visible" @click="visible = false ">-->
  99. <!-- <img :src="form.image" style="max-width: 100%;max-height: 100%;width:auto;height:auto;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);-webkit-transform: translate3d(-50%,-50%,0);" >-->
  100. <!-- </div>-->
  101. </i-Col>
  102. </Row>
  103. </Form-Item>
  104. <Form-Item>
  105. <Row>
  106. <i-Col span="13">
  107. <span>门头:</span>
  108. <div class="demo-upload-list" v-if="form.images">
  109. <template>
  110. <img :src="form.images">
  111. <div class="demo-upload-list-cover">
  112. <Icon type="ios-eye-outline" @click="visible = true "></Icon>
  113. <Icon type="ios-trash-outline" @click="form.images=''"></Icon>
  114. </div>
  115. </template>
  116. </div>
  117. <div class="ivu-upload" style="display: inline-block; width: 58px;" @click="openWindows('选择图片','{:Url('widget.images/index',['fodder'=>'images'])}',{w:900,h:550})" v-if="!form.images">
  118. <div class="ivu-upload ivu-upload-drag">
  119. <div style="width: 58px; height: 58px; line-height: 58px;">
  120. <i class="ivu-icon ivu-icon-camera" style="font-size: 20px;"></i>
  121. </div>
  122. </div>
  123. </div>
  124. <div style="width: 670px; height: 320px;bottom:10%;display: block; position: absolute;z-index: 999999" v-if="visible" @click="visible = false ">
  125. <img :src="form.images" style="max-width: 100%;max-height: 100%;width:auto;height:auto;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);-webkit-transform: translate3d(-50%,-50%,0);" >
  126. </div>
  127. </i-Col>
  128. </Row>
  129. </Form-Item>
  130. <Form-Item>
  131. <Row>
  132. <i-Col span="13">
  133. <span>门店:</span>
  134. <div class="demo-upload-list" v-if="form.images">
  135. <template>
  136. <img :src="form.slider_image">
  137. <div class="demo-upload-list-cover">
  138. <Icon type="ios-eye-outline" @click="visible = true "></Icon>
  139. <Icon type="ios-trash-outline" @click="form.slider_image=''"></Icon>
  140. </div>
  141. </template>
  142. </div>
  143. <div class="ivu-upload" style="display: inline-block; width: 58px;" @click="openWindows('选择图片','{:Url('widget.images/index',['fodder'=>'slider_image'])}',{w:900,h:550})" v-if="!form.slider_image">
  144. <div class="ivu-upload ivu-upload-drag">
  145. <div style="width: 58px; height: 58px; line-height: 58px;">
  146. <i class="ivu-icon ivu-icon-camera" style="font-size: 20px;"></i>
  147. </div>
  148. </div>
  149. </div>
  150. <div style="width: 670px; height: 320px;bottom:10%;display: block; position: absolute;z-index: 999999" v-if="visible" @click="visible = false ">
  151. <img :src="form.slider_image" style="max-width: 100%;max-height: 100%;width:auto;height:auto;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);-webkit-transform: translate3d(-50%,-50%,0);" >
  152. </div>
  153. </i-Col>
  154. </Row>
  155. </Form-Item>
  156. <Form-Item>
  157. <Row>
  158. <i-Col span="13">
  159. <span style="float: left">经纬度:</span>
  160. <Tooltip content="请点击查找位置进行选择位置">
  161. <i-Input placeholder="经纬度" v-model="form.latlng" :readonly="true" style="width: 80%" >
  162. <span slot="append" @click="openWindows('查找位置','{:Url('select_address')}',{w:400,h:700})" style="cursor:pointer">查找位置</span>
  163. </i-Input>
  164. </Tooltip>
  165. </i-Col>
  166. </Row>
  167. </Form-Item>
  168. </template>
  169. <Form-Item>
  170. <Row>
  171. <i-Col span="8" offset="6">
  172. <i-Button type="primary" @click="submit">提交</i-Button>
  173. </i-Col>
  174. </Row>
  175. </Form-Item>
  176. </i-Form>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. <script src="{__PLUG_PATH}city.js"></script>
  183. <script>
  184. var storeData={:json_encode($store)};
  185. mpFrame.start(function(Vue) {
  186. $.each(city,function (key,item) {
  187. city[key].value = item.label;
  188. if(item.children && item.children.length){
  189. $.each(item.children,function (i,v) {
  190. city[key].children[i].value=v.label;
  191. if(v.children && v.children.length){
  192. $.each(v.children,function (k,val) {
  193. city[key].children[i].children[k].value=val.label;
  194. });
  195. }
  196. });
  197. }
  198. });
  199. new Vue({
  200. data:function() {
  201. return {
  202. id:storeData.id || 0,
  203. addresData:city,
  204. form:{
  205. name:storeData.name || '',
  206. introduction:storeData.introduction || '',
  207. phone:storeData.phone || '',
  208. address:storeData.address || [],
  209. image:storeData.image || '',
  210. slider_image:storeData.slider_image || [] ,
  211. images:storeData.images || [] ,
  212. detailed_address:storeData.detailed_address || '',
  213. latlng:storeData.latlng || '',
  214. valid_time:storeData.valid_time || [],
  215. day_time:storeData.day_time || [],
  216. },
  217. visible:false,
  218. }
  219. },
  220. methods:{
  221. U: function (opt) {
  222. var m = opt.m || 'admin', c = opt.c || window.controlle || '', a = opt.a || 'index', q = opt.q || '',
  223. p = opt.p || {};
  224. var params = Object. keys(p).map(function (key) {
  225. return key + '/' + p[key];
  226. }).join('/');
  227. var gets = Object.keys(q).map(function (key) {
  228. return key+'='+ q[key];
  229. }).join('&');
  230. return '/' + m + '/' + c + '/' + a + (params == '' ? '' : '/' + params) + (gets == '' ? '' : '?' + gets);
  231. },
  232. uploadImage: function (name) {
  233. return this.createFrame('选择图片',this.U({c:"widget.images",a:'index',p:{fodder:name}}),{h:545,w:900});
  234. },
  235. changeDayTime:function(date){
  236. this.$set(this.form,'day_time',date);
  237. },
  238. changeValidTime:function(date){
  239. this.$set(this.form,'valid_time',date);
  240. },
  241. createFrame:function(title,src,opt){
  242. opt === undefined && (opt = {});
  243. var h = parent.document.body.clientHeight - 100;
  244. return layer.open({
  245. type: 2,
  246. title:title,
  247. area: [(opt.w || 700)+'px', (opt.h || h)+'px'],
  248. fixed: false, //不固定
  249. maxmin: true,
  250. moveOut:false,//true 可以拖出窗外 false 只能在窗内拖
  251. anim:5,//出场动画 isOutAnim bool 关闭动画
  252. offset:'auto',//['100px','100px'],//'auto',//初始位置 ['100px','100px'] t[ 上 左]
  253. shade:0,//遮罩
  254. resize:true,//是否允许拉伸
  255. content: src,//内容
  256. move:'.layui-layer-title'
  257. });
  258. },
  259. handleChange:function(value,selectedData){
  260. var that = this;
  261. that.form.address = [];
  262. $.each(selectedData,function (key,item) {
  263. that.form.address.push(item.label);
  264. });
  265. that.$set(that.form,'address',that.form.address);
  266. },
  267. openWindows:function(title,url,opt){
  268. return this.createFrame(title,url,opt);
  269. },
  270. changeIMG:function(name,url){
  271. this.form[name]=url;
  272. },
  273. isPhone:function(test){
  274. var reg = /^1[3456789]\d{9}$/;
  275. return reg.test(test);
  276. },
  277. submit:function () {
  278. var that = this;
  279. if(!that.form.name) return $eb.message('error','请填写门店行名称');
  280. if(!that.form.phone) return $eb.message('error','请输入手机号码');
  281. if(!that.isPhone(that.form.phone)) return $eb.message('error','请输入正确的手机号码');
  282. if(!that.form.address) return $eb.message('error','请选择门店地址');
  283. if(!that.form.detailed_address) return $eb.message('error','请填写门店详细地址');
  284. if(!that.form.image) return $eb.message('error','请选择门店logo');
  285. if(!that.form.valid_time) return $eb.message('error','请选择核销时效');
  286. if(!that.form.day_time) return $eb.message('error','请选择门店营业时间');
  287. if(!that.form.latlng) return $eb.message('error','请选择门店经纬度!');
  288. var index = layer.load(1, {
  289. shade: [0.5,'#fff']
  290. });
  291. $eb.axios.post('{:Url("save")}'+(that.id ? '?id='+that.id : ''),that.form).then(function (res) {
  292. layer.close(index);
  293. layer.msg(res.data.msg);
  294. if(res.data.data.id) that.id=res.data.data.id;
  295. }).catch(function (err) {
  296. console.log(err);
  297. layer.close(index);
  298. })
  299. },
  300. selectAdderss:function (data) {
  301. //lat 纬度 lng 经度
  302. this.form.latlng=data.latlng.lat+','+data.latlng.lng;
  303. }
  304. },
  305. mounted:function () {
  306. window.changeIMG=this.changeIMG;
  307. window.selectAdderss=this.selectAdderss;
  308. },
  309. }).$mount(document.getElementById('store-attr'))
  310. })
  311. </script>