Orderdetails.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. <template>
  2. <view class="billall">
  3. <view class="u-listdata">
  4. <view class="Orderstatus">
  5. <view class="Orderstatus1">
  6. 订单状态:{{alldata.status}}
  7. </view>
  8. <view class="Orderstatus1">
  9. 支付金额:{{alldata.payAmount}}
  10. </view>
  11. <view class="Orderstatus1">
  12. 支付时间:{{alldata.payAt}}
  13. </view>
  14. </view>
  15. <u-list :pagingEnabled='true'>
  16. <u-list-item v-for="(item, index) in indexList" :key="index">
  17. <view class="companylist">
  18. <!-- <view class="outstanding" v-if='item.status==2'>
  19. 未支付
  20. </view>
  21. <view class="settled" v-if='item.status==1'>
  22. 已支付
  23. </view>
  24. <view class="guanbi" v-if="item.status=='3'">
  25. 支付失败
  26. </view> -->
  27. <view class="Currentamount" style="margin-top: 20rpx;">
  28. 金额: <span>¥{{item.amount}}</span>
  29. </view>
  30. <view class="Currentamount">
  31. 账单类型: {{item.billType}}
  32. </view>
  33. <view class="Currentamount">
  34. 计费周期: {{item.costCycle}}
  35. </view>
  36. <view class="Currentamount">
  37. 创建时间: {{item.createDate}}
  38. </view>
  39. </view>
  40. </u-list-item>
  41. </u-list>
  42. </view>
  43. <view class="dibu" v-show="dibucaidan">
  44. <!-- <view class="yucun">
  45. <u-button type="success" text="预存" @click="prestore('预存')"></u-button>
  46. </view>
  47. <view class="yucun">
  48. <u-button type="primary" text="补助" @click="prestore('补助')"></u-button>
  49. </view> -->
  50. <view class="yucun" v-if='tk'>
  51. <u-button type="error" text="退费" @click="prestore('退费')"></u-button>
  52. </view>
  53. </view>
  54. <!-- <u-modal :show="showtype" @cancel='showtype=false' @confirm="confirmtf" :showCancelButton=true title="提示"
  55. content='请确定是否退费?'></u-modal> -->
  56. <u-popup :show="showpayjine" @close="closepay1" @open="openpay1" mode="bottom" :round="10" :closeable='true' :closeOnClickOverlay='false'>
  57. <view class="paytall1">
  58. <!-- <text>请选择支付方式</text> -->
  59. <view class="hejitop">
  60. 退费
  61. </view>
  62. <view class="zhifufs">
  63. <u--form labelWidth="130" labelPosition="left" :model="model1" ref="uForm">
  64. <u-form-item label="退费金额:" prop="userInfo.amount" borderBottom ref="item1">
  65. <u--input v-model="model1.userInfo.amount" border="none"></u--input>
  66. </u-form-item>
  67. <u-form-item label="退费原因:" prop="userInfo.refundReason" borderBottom ref="item1">
  68. <u--input v-model="model1.userInfo.refundReason" border="none"></u--input>
  69. </u-form-item>
  70. </u--form>
  71. </view>
  72. <view class="dcc">
  73. <view class="">
  74. <u-button type="primary" :plain="true" text="取消" @click="closepay1"></u-button>
  75. </view>
  76. <view class="">
  77. <u-button type="primary" text="确定" @click="confirmtf"></u-button>
  78. </view>
  79. </view>
  80. </view>
  81. </u-popup>
  82. <u-notify ref="uNotify" message=""></u-notify>
  83. </view>
  84. </template>
  85. <script>
  86. //import { isEmpty, getDictDataList } from "@/utils/index";
  87. export default {
  88. components: {
  89. },
  90. data() {
  91. return {
  92. tk:false,
  93. zhifucanvas: false,
  94. dibucaidan: true,
  95. prestorename: '',
  96. totalnumber: 0,
  97. setyesno: true,
  98. indexList: [],
  99. dataList: [],
  100. showtype: false,
  101. showdct: false,
  102. myid: '',
  103. alldata: {},
  104. showfloor: false,
  105. loading: false,
  106. columns: [],
  107. columnData: [],
  108. myday: '',
  109. mytype: '全部',
  110. showPicker: false,
  111. //myday: currentDate,
  112. showpayjine: false,
  113. model1: {
  114. userInfo: {
  115. amount: '',
  116. refundReason:'',
  117. },
  118. },
  119. billstype:[],
  120. // rules: {
  121. // 'userInfo.amount': {
  122. // type: 'string',
  123. // required: true,
  124. // message: '请填写退费金额',
  125. // trigger: [ '']
  126. // },
  127. // 'userInfo.refundReason': {
  128. // type: 'string',
  129. // required: true,
  130. // message: '请填写退费原因',
  131. // trigger: ['blur', 'change']
  132. // },
  133. // },
  134. }
  135. },
  136. //监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参
  137. onLoad(options) {
  138. // console.log(options.companyOrgId);
  139. this.myid = options.companyOrgId;
  140. this.getalldata(this.myid)
  141. let getDictDataList = uni.getStorageSync('getDictDataList');
  142. // console.log('111111111111111111', getDictDataList)
  143. for (let i = 0; i < getDictDataList.length; i++) {
  144. if (getDictDataList[i].dictType == 'PayType') {
  145. this.billstype = getDictDataList[i].dataList
  146. }
  147. }
  148. },
  149. //监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
  150. onReady() {
  151. // 微信小程序需要用此写法
  152. },
  153. //监听页面隐藏
  154. onHide() {},
  155. //监听窗口尺寸变化
  156. onResize() {},
  157. //监听页面卸载
  158. onUnload() {},
  159. //监听用户下拉动作,一般用于下拉刷新
  160. onPullDownRefresh() {},
  161. methods: {
  162. prestore() {
  163. this.showpayjine = true;
  164. },
  165. confirmtf() {
  166. if(this.model1.userInfo.amount==''){
  167. this.$refs.uNotify.error('退款金额不能为空')
  168. }else if(this.model1.userInfo.refundReason==''){
  169. this.$refs.uNotify.error('退款原因不能为空')
  170. }else{
  171. if(this.model1.userInfo.amount>this.alldata.payAmount){
  172. this.$refs.uNotify.error('您输入的退款金额不能大于支付金额')
  173. }else{
  174. let postdata = {
  175. amount: this.model1.userInfo.amount,
  176. id: '',
  177. orderId:this.alldata.id,
  178. refundReason: this.model1.userInfo.refundReason
  179. }
  180. this.$api.post('/refundinfo', postdata)
  181. .then(res => {
  182. if (res.data.code == 0) {
  183. this.$refs.uNotify.success('退费申请成功')
  184. } else {
  185. this.$refs.uNotify.error(res.data.msg)
  186. }
  187. this.showpayjine = false;
  188. })
  189. }
  190. }
  191. },
  192. getalldata(e) {
  193. this.indexList=[];
  194. this.$api.get('/order/' + e, {})
  195. .then(res => {
  196. // console.log('111111111111111111', res.data.data)
  197. if (res.data.data.status == '-1') {
  198. res.data.data.status = '已关闭';
  199. this.tk=false;
  200. } else if (res.data.data.status == '0') {
  201. res.data.data.status = '待支付';
  202. this.tk=false;
  203. } else if (res.data.data.status == '1') {
  204. res.data.data.status = '已支付';
  205. this.tk=true;
  206. }
  207. this.alldata = res.data.data;
  208. this.model1.userInfo.amount=this.alldata.payAmount;
  209. //this.$refs.uForm.validateField('userInfo.amount')
  210. //this.indexList = res.data.data.billLists;
  211. if(res.data.data.billLists.length==0){
  212. this.indexList=[];
  213. }else{
  214. function transform(a, b) {
  215. loop: for (let i = 0; i < a.length; i++) {
  216. for (let j = 0; j < b.length; j++) {
  217. if (a[i].billType == b[j].dictValue) {
  218. a[i].billType = b[j].dictLabel;
  219. continue loop;
  220. }
  221. }
  222. a[i].billType = a[i].billType;
  223. }
  224. return a;
  225. }
  226. this.indexList=transform(res.data.data.billLists, this.billstype)
  227. }
  228. // console.log('111111111111111111',this.indexList)
  229. })
  230. },
  231. closepay1() {
  232. this.showpayjine = false;
  233. },
  234. openpay1() {
  235. console.log('open');
  236. },
  237. }
  238. }
  239. </script>
  240. <style lang="scss">
  241. .Currentamount {
  242. padding-left: 30rpx;
  243. height: 50rpx;
  244. line-height: 50rpx;
  245. color: #BCB3A7;
  246. span {
  247. color: #FA5555;
  248. padding-left: 9rpx;
  249. }
  250. }
  251. .hejitop {
  252. width: 750rpx;
  253. text-align: center;
  254. font-weight: bold;
  255. font-size: 40rpx;
  256. margin-bottom: 30rpx;
  257. }
  258. .zhifufs {
  259. width: 750rpx;
  260. height: 250rpx;
  261. }
  262. .paytall1 {
  263. width: 750rpx;
  264. height: 450rpx;
  265. background-color: #fff;
  266. }
  267. .dcc {
  268. margin: 0 30rpx;
  269. display: flex;
  270. align-items: center;
  271. justify-content: space-around;
  272. view {
  273. width: 200rpx;
  274. }
  275. }
  276. .tuifeiyy {
  277. height: 400rpx;
  278. background-color: #fff;
  279. width: 750rpx;
  280. }
  281. .Orderstatus {
  282. padding: 30rpx;
  283. }
  284. .Orderstatus1 {
  285. height: 50rpx;
  286. line-height: 50rpx;
  287. }
  288. .Callfee {
  289. width: 100rpx;
  290. height: 45rpx;
  291. text-align: center;
  292. line-height: 45rpx;
  293. color: #5C8FFF;
  294. border: 1px solid #5C8FFF;
  295. font-size: 22rpx;
  296. position: absolute;
  297. bottom: 10rpx;
  298. right: 10px;
  299. font-weight: bold;
  300. }
  301. .companylist {
  302. margin: 20rpx 30rpx;
  303. background: #fff;
  304. height: 230rpx;
  305. border-radius: 10px;
  306. position: relative;
  307. h3 {
  308. height: 70rpx;
  309. line-height: 70rpx;
  310. padding-left: 30rpx;
  311. }
  312. }
  313. .settled {
  314. background-color: #09C700;
  315. width: 100rpx;
  316. height: 40rpx;
  317. text-align: center;
  318. line-height: 40rpx;
  319. color: #fff;
  320. font-size: 14rpx;
  321. position: absolute;
  322. top: 0px;
  323. right: 0px;
  324. border-top-right-radius: 10rpx;
  325. border-bottom-left-radius: 10rpx;
  326. }
  327. .outstanding {
  328. background-color: #30D3A2;
  329. width: 100rpx;
  330. height: 40rpx;
  331. text-align: center;
  332. line-height: 40rpx;
  333. color: #fff;
  334. font-size: 14rpx;
  335. position: absolute;
  336. top: 0px;
  337. right: 0px;
  338. border-top-right-radius: 10rpx;
  339. border-bottom-left-radius: 10rpx;
  340. }
  341. .guanbi {
  342. background-color: red;
  343. width: 100rpx;
  344. height: 40rpx;
  345. text-align: center;
  346. line-height: 40rpx;
  347. color: #fff;
  348. font-size: 14rpx;
  349. position: absolute;
  350. top: 0px;
  351. right: 0px;
  352. border-top-right-radius: 10rpx;
  353. border-bottom-left-radius: 10rpx;
  354. }
  355. .dibu {
  356. position: fixed;
  357. right: 0;
  358. left: 0;
  359. bottom: 0;
  360. width: 750rpx;
  361. height: 100rpx;
  362. display: flex;
  363. align-items: center;
  364. justify-content: space-around;
  365. background-color: #fff;
  366. }
  367. .yucun {
  368. width: 200rpx;
  369. }
  370. .billall {}
  371. .topbill {
  372. display: flex;
  373. justify-content: center;
  374. align-items: center;
  375. height: 100rpx;
  376. background-color: #e6e6e6;
  377. }
  378. .topbilledit {
  379. display: flex;
  380. justify-content: space-around;
  381. align-items: center;
  382. }
  383. .changetime1 {
  384. padding-right: 10rpx;
  385. }
  386. </style>