contract_detail.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>合同详情</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <link href="../../css/mui.min.css" rel="stylesheet" />
  9. <link rel="stylesheet" href="../../css/animate.min.css" />
  10. <style>
  11. .mui-bar-nav~.mui-content {
  12. padding-top: 54px;
  13. }
  14. .bg {
  15. padding: 15px;
  16. text-align: center;
  17. }
  18. input {
  19. height: 45px !important;
  20. font-size: 14px;
  21. }
  22. textarea {
  23. font-size: 14px;
  24. }
  25. .m_box {
  26. padding: 10px 10px 25px 15px;
  27. box-shadow: 0 1px 6px #dbdbdb;
  28. }
  29. .btn {
  30. width: 230px;
  31. margin-top: -21px;
  32. }
  33. .img_list {
  34. font-size: 13px;
  35. color: darkgray;
  36. }
  37. .row .sm3 {
  38. padding: 5px;
  39. width: 33.33%;
  40. }
  41. .img {
  42. width: 60px;
  43. border-radius: 3px;
  44. border: 1px solid darkgray;
  45. margin-bottom: 5px;
  46. }
  47. .img.active {
  48. border: 1px solid green;
  49. }
  50. .ht {
  51. text-align: left;
  52. padding-left: 20px;
  53. margin-top: -20px;
  54. padding-bottom: 10px;
  55. font-size: 14px;
  56. }
  57. .row label {
  58. float: left;
  59. padding-bottom: 7px;
  60. font-size: 15px;
  61. }
  62. .sa.active {
  63. color: green;
  64. }
  65. .mb6 {
  66. margin-bottom: -6px !important;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div id="app">
  72. <header class="mui-bar mui-bar-nav">
  73. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  74. <h1 class="mui-title">合同详情</h1>
  75. </header>
  76. <div class="mui-content animated fadeInUp" style="margin-top: 10px;">
  77. <div class="bg">
  78. <div class="m_box">
  79. <div class="input-group">
  80. 合同接收人: {{items.nickName}}
  81. </div>
  82. <div class="row mb6">
  83. <label>合同名称</label>
  84. <input type="tel" v-model="item.contract_content" placeholder="输入合同名称">
  85. <div class="clear"></div>
  86. </div>
  87. <div class="row mb6" style="margin-top: -10px;">
  88. <label>合同金额</label>
  89. <input type="tel" v-model="item.contract_amount" placeholder="输入合同金额">
  90. <div class="clear"></div>
  91. </div>
  92. <div class="row mb6">
  93. <label>附加条款</label>
  94. <textarea rows="3" v-model="item.remark" placeholder="附加条款"> </textarea>
  95. <div class="clear"></div>
  96. </div>
  97. <div class="row">
  98. <label>合同模板</label>
  99. <div class="clear"></div>
  100. </div>
  101. <div class="img_list">
  102. <div class="row">
  103. <div class="sm3">
  104. <img :src="item.contract_url" class="img" @click.stop="view(item.contract_url)" />
  105. <div class="sa">{{item.title}}</div>
  106. </div>
  107. <div class="clear"></div>
  108. </div>
  109. </div>
  110. </div>
  111. <div><button class="btn" @click="save()" v-if="item.status!='1' ">保存</button></div>
  112. <div style="padding-top: 20px;"><button class="btn" @click="ok()"
  113. v-if="item.client_status!='1' ">确认合同</button>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <script src="../../js/mui.min.js"></script>
  119. <script src="../../js/app.js"></script>
  120. <script src="../../js/vue.min.js"></script>
  121. <script>
  122. var vm = new Vue({
  123. el: "#app",
  124. data: {
  125. contract_list: [],
  126. curr: 0,
  127. item: {
  128. },
  129. items: {},
  130. parm: {
  131. client: getUser().id
  132. }
  133. },
  134. mounted: function() {
  135. mui.plusReady(function() {
  136. console.log("res===" + JSON.stringify(plus.webview.currentWebview().param));
  137. if (plus.webview.currentWebview().param != null) {
  138. vm.items = plus.webview.currentWebview().param;
  139. vm.parm.trustee = plus.webview.currentWebview().param.userId;
  140. vm.parm.parttime_id = plus.webview.currentWebview().param.parttime_id;
  141. //vm.item.client_status = 1; //发送表示委托人同意
  142. //获取合同列表
  143. //request(urls().contract_templete_list, {}, function(res) {
  144. // vm.contract_list = res.data;
  145. // setTimeout(() => {
  146. // plus.nativeUI.closeWaiting();
  147. //}, 500)
  148. // })
  149. //获取合同详情
  150. request(urls().u_contract, vm.parm, function(res) {
  151. console.log("res22===" + JSON.stringify(res));
  152. vm.item = res;
  153. setTimeout(() => {
  154. plus.nativeUI.closeWaiting();
  155. }, 500)
  156. })
  157. }
  158. })
  159. },
  160. methods: {
  161. //保存
  162. save: function() {
  163. if (vm.item.templete_id == '') {
  164. mui.alert('请选择合同模板');
  165. return;
  166. }
  167. //this.item.status=0;
  168. request(urls().save_contract, this.item, function(res) {
  169. if (res.result == true) {
  170. mui.toast("操作成功");
  171. plus.webview.getWebviewById("detail").reload(true);
  172. } else {
  173. mui.toast(res.msg);
  174. }
  175. plsetTimeout(() => {
  176. plus.nativeUI.closeWaiting();
  177. }, 500)
  178. })
  179. },
  180. //编辑
  181. ok: function() {
  182. //if (vm.item.templete_id == '') {
  183. // mui.alert('请选择合同模板');
  184. // return;
  185. // }
  186. this.item.status = 1;
  187. this.item.client_status = 1;
  188. request(urls().save_contract, this.item, function(res) {
  189. if (res.result == true) {
  190. mui.toast("操作成功");
  191. plus.webview.getWebviewById("detail").reload(true);
  192. } else {
  193. mui.toast(res.msg);
  194. }
  195. plsetTimeout(() => {
  196. plus.nativeUI.closeWaiting();
  197. }, 500)
  198. })
  199. },
  200. //选择合同模板
  201. select: function(item, index) {
  202. this.curr = index;
  203. this.item.templete_id = item.id;
  204. },
  205. view: function(img) {
  206. plus.nativeUI.previewImage([img], {
  207. current: 0,
  208. loop: true,
  209. indicator: 'number'
  210. });
  211. }
  212. }
  213. })
  214. </script>
  215. </body>
  216. </html>