Orderdetails.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  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">
  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. zhifucanvas: false,
  93. dibucaidan: true,
  94. prestorename: '',
  95. totalnumber: 0,
  96. setyesno: true,
  97. indexList: [],
  98. dataList: [],
  99. showtype: false,
  100. showdct: false,
  101. myid: '',
  102. alldata: {},
  103. showfloor: false,
  104. loading: false,
  105. columns: [],
  106. columnData: [],
  107. myday: '',
  108. mytype: '全部',
  109. showPicker: false,
  110. //myday: currentDate,
  111. showpayjine: false,
  112. model1: {
  113. userInfo: {
  114. amount: '',
  115. refundReason:'',
  116. },
  117. },
  118. billstype:[],
  119. // rules: {
  120. // 'userInfo.amount': {
  121. // type: 'string',
  122. // required: true,
  123. // message: '请填写退费金额',
  124. // trigger: [ '']
  125. // },
  126. // 'userInfo.refundReason': {
  127. // type: 'string',
  128. // required: true,
  129. // message: '请填写退费原因',
  130. // trigger: ['blur', 'change']
  131. // },
  132. // },
  133. }
  134. },
  135. //监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参
  136. onLoad(options) {
  137. // console.log(options.companyOrgId);
  138. this.myid = options.companyOrgId;
  139. this.getalldata(this.myid)
  140. let getDictDataList = uni.getStorageSync('getDictDataList');
  141. // console.log('111111111111111111', getDictDataList)
  142. for (let i = 0; i < getDictDataList.length; i++) {
  143. if (getDictDataList[i].dictType == 'PayType') {
  144. this.billstype = getDictDataList[i].dataList
  145. }
  146. }
  147. },
  148. //监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
  149. onReady() {
  150. // 微信小程序需要用此写法
  151. },
  152. //监听页面隐藏
  153. onHide() {},
  154. //监听窗口尺寸变化
  155. onResize() {},
  156. //监听页面卸载
  157. onUnload() {},
  158. //监听用户下拉动作,一般用于下拉刷新
  159. onPullDownRefresh() {},
  160. methods: {
  161. prestore() {
  162. this.showpayjine = true;
  163. },
  164. confirmtf() {
  165. if(this.model1.userInfo.amount==''){
  166. this.$refs.uNotify.error('退款金额不能为空')
  167. }else if(this.model1.userInfo.refundReason==''){
  168. this.$refs.uNotify.error('退款原因不能为空')
  169. }else{
  170. if(this.model1.userInfo.amount>this.alldata.payAmount){
  171. this.$refs.uNotify.error('您输入的退款金额不能大于支付金额')
  172. }else{
  173. let postdata = {
  174. amount: this.model1.userInfo.amount,
  175. id: '',
  176. orderId:this.alldata.id,
  177. refundReason: this.model1.userInfo.refundReason
  178. }
  179. this.$api.post('/refundinfo', postdata)
  180. .then(res => {
  181. if (res.data.code == 0) {
  182. this.$refs.uNotify.success('退费成功')
  183. } else {
  184. this.$refs.uNotify.error(res.data.msg)
  185. }
  186. this.showpayjine = false;
  187. })
  188. }
  189. }
  190. },
  191. getalldata(e) {
  192. this.indexList=[];
  193. this.$api.get('/order/' + e, {})
  194. .then(res => {
  195. // console.log('111111111111111111', res.data.data)
  196. if (res.data.data.status == '-1') {
  197. res.data.data.status = '已关闭'
  198. } else if (res.data.data.status == '0') {
  199. res.data.data.status = '待支付'
  200. } else if (res.data.data.status == '1') {
  201. res.data.data.status = '已支付'
  202. }
  203. this.alldata = res.data.data;
  204. this.model1.userInfo.amount=this.alldata.payAmount;
  205. //this.$refs.uForm.validateField('userInfo.amount')
  206. //this.indexList = res.data.data.billLists;
  207. if(res.data.data.billLists.length==0){
  208. this.indexList=[];
  209. }else{
  210. function transform(a, b) {
  211. loop: for (let i = 0; i < a.length; i++) {
  212. for (let j = 0; j < b.length; j++) {
  213. if (a[i].billType == b[j].dictValue) {
  214. a[i].billType = b[j].dictLabel;
  215. continue loop;
  216. }
  217. }
  218. a[i].billType = a[i].billType;
  219. }
  220. return a;
  221. }
  222. this.indexList=transform(res.data.data.billLists, this.billstype)
  223. }
  224. // console.log('111111111111111111',this.indexList)
  225. })
  226. },
  227. closepay1() {
  228. this.showpayjine = false;
  229. },
  230. openpay1() {
  231. console.log('open');
  232. },
  233. }
  234. }
  235. </script>
  236. <style lang="scss">
  237. .Currentamount {
  238. padding-left: 30rpx;
  239. height: 50rpx;
  240. line-height: 50rpx;
  241. color: #BCB3A7;
  242. span {
  243. color: #FA5555;
  244. padding-left: 9rpx;
  245. }
  246. }
  247. .hejitop {
  248. width: 750rpx;
  249. text-align: center;
  250. font-weight: bold;
  251. font-size: 40rpx;
  252. margin-bottom: 30rpx;
  253. }
  254. .zhifufs {
  255. width: 750rpx;
  256. height: 250rpx;
  257. }
  258. .paytall1 {
  259. width: 750rpx;
  260. height: 450rpx;
  261. background-color: #fff;
  262. }
  263. .dcc {
  264. margin: 0 30rpx;
  265. display: flex;
  266. align-items: center;
  267. justify-content: space-around;
  268. view {
  269. width: 200rpx;
  270. }
  271. }
  272. .tuifeiyy {
  273. height: 400rpx;
  274. background-color: #fff;
  275. width: 750rpx;
  276. }
  277. .Orderstatus {
  278. padding: 30rpx;
  279. }
  280. .Orderstatus1 {
  281. height: 50rpx;
  282. line-height: 50rpx;
  283. }
  284. .Callfee {
  285. width: 100rpx;
  286. height: 45rpx;
  287. text-align: center;
  288. line-height: 45rpx;
  289. color: #5C8FFF;
  290. border: 1px solid #5C8FFF;
  291. font-size: 22rpx;
  292. position: absolute;
  293. bottom: 10rpx;
  294. right: 10px;
  295. font-weight: bold;
  296. }
  297. .companylist {
  298. margin: 20rpx 30rpx;
  299. background: #fff;
  300. height: 230rpx;
  301. border-radius: 10px;
  302. position: relative;
  303. h3 {
  304. height: 70rpx;
  305. line-height: 70rpx;
  306. padding-left: 30rpx;
  307. }
  308. }
  309. .settled {
  310. background-color: #09C700;
  311. width: 100rpx;
  312. height: 40rpx;
  313. text-align: center;
  314. line-height: 40rpx;
  315. color: #fff;
  316. font-size: 14rpx;
  317. position: absolute;
  318. top: 0px;
  319. right: 0px;
  320. border-top-right-radius: 10rpx;
  321. border-bottom-left-radius: 10rpx;
  322. }
  323. .outstanding {
  324. background-color: #30D3A2;
  325. width: 100rpx;
  326. height: 40rpx;
  327. text-align: center;
  328. line-height: 40rpx;
  329. color: #fff;
  330. font-size: 14rpx;
  331. position: absolute;
  332. top: 0px;
  333. right: 0px;
  334. border-top-right-radius: 10rpx;
  335. border-bottom-left-radius: 10rpx;
  336. }
  337. .guanbi {
  338. background-color: red;
  339. width: 100rpx;
  340. height: 40rpx;
  341. text-align: center;
  342. line-height: 40rpx;
  343. color: #fff;
  344. font-size: 14rpx;
  345. position: absolute;
  346. top: 0px;
  347. right: 0px;
  348. border-top-right-radius: 10rpx;
  349. border-bottom-left-radius: 10rpx;
  350. }
  351. .dibu {
  352. position: fixed;
  353. right: 0;
  354. left: 0;
  355. bottom: 0;
  356. width: 750rpx;
  357. height: 100rpx;
  358. display: flex;
  359. align-items: center;
  360. justify-content: space-around;
  361. background-color: #fff;
  362. }
  363. .yucun {
  364. width: 200rpx;
  365. }
  366. .billall {}
  367. .topbill {
  368. display: flex;
  369. justify-content: center;
  370. align-items: center;
  371. height: 100rpx;
  372. background-color: #e6e6e6;
  373. }
  374. .topbilledit {
  375. display: flex;
  376. justify-content: space-around;
  377. align-items: center;
  378. }
  379. .changetime1 {
  380. padding-right: 10rpx;
  381. }
  382. </style>