index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="content">
  3. <view v-for="item in orderList" class="order-content">
  4. <view class="item-userInfo item1" @click="itemChange(item)">
  5. <view class="userInfo">
  6. <u-image :src="item.img" width="72" height="72" shape="circle"></u-image>
  7. <view class="userInfo-nameOrPhone">
  8. <view class="name">{{item.name}}</view>
  9. <view class="phone"><u-icon name="phone"></u-icon><text>{{item.phone}}</text></view>
  10. </view>
  11. </view>
  12. <view>
  13. <!-- <u-icon :name="nameType" color='#999' @click="isShow"></u-icon> -->
  14. <u-icon v-show="item.isUp" name="arrow-up" color="#999" size="28"></u-icon>
  15. <u-icon v-show="!item.isUp" name="arrow-down" color="#999" size="28"></u-icon>
  16. <!-- <u-icon name="arrow-up" color='#999' @click="isShow"></u-icon> -->
  17. </view>
  18. </view>
  19. <view v-show="item.isUp">
  20. <u-line color="#e5e5e5" />
  21. <view class="item-userInfo-detail">
  22. <view class="detail-title">用户信息</view>
  23. <view class="detail-title coucntinfo"><text class="coucntname">{{item.coucntname}}</text><text>{{item.coucntphone}}</text></view>
  24. <view class="detail-title address">{{item.address}}</view>
  25. </view>
  26. <u-line color="#e5e5e5"/>
  27. <view class="item-userInfo-detail detail-title">订单信息</view>
  28. <u-line color="#e5e5e5"/>
  29. <view class="item-userInfo item-userInfo-detail"><text class="address">订单编号</text><text class="detail-title">{{item.orderNo}}</text></view>
  30. <u-line color="#e5e5e5"/>
  31. <view class="item-userInfo item-userInfo-detail"><text class="address">预约时间</text><text class="detail-title">{{item.yuyueTime}}</text></view>
  32. <u-line color="#e5e5e5"/>
  33. <view class="item-userInfo item-userInfo-detail"><text class="address">下单时间</text><text class="detail-title">{{item.orderTime}}</text></view>
  34. <u-line color="#e5e5e5"/>
  35. <view class="item-userInfo item-userInfo-detail"><text class="address">预约品类</text><text class="detail-title">{{item.type}}</text></view>
  36. <view class="item-userInfo-detail-image">
  37. <u-image :src="img" v-for=" img in item.imgList" width="120" height="120" class="detail-image"></u-image>
  38. </view>
  39. <u-line color="#e5e5e5"/>
  40. <view class="userInfo cancelBtn"><u-button :custom-style="cancelBtn" :hair-line="false">取消订单</u-button></view>
  41. </view>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. export default{
  47. data(){
  48. return{
  49. cancelBtn:{
  50. width: '106px',
  51. height: '38px',
  52. background: '#E5E5E5',
  53. borderRadius:' 6px'
  54. },
  55. orderList:[
  56. {img:'/static/edit.png',name:'骑手1',phone:'18292887584',coucntname:'用户1',coucntphone:'15991205189',address:'陕西省西安未央区北二环华帝金座A西安车领主网络科技有限公司',orderNo:'20122536987',yuyueTime:'今天中午',orderTime:'2021-12-25 13:15:36',type:'纸质类,塑料类',isUp:true,imgList:[{img:'/static/logo.jpg'},{img:'/static/logo.jpg'},{img:'/static/logo.jpg'}]},
  57. {img:'/static/edit.png',name:'骑手2',phone:'18292887584',coucntname:'用户2',coucntphone:'15991205189',address:'陕西省西安未央区北二环华帝金座A西安车领主网络科技有限公司',orderNo:'20122536987',yuyueTime:'今天中午',orderTime:'2021-12-25 13:15:36',type:'纸质类,塑料类',isUp:false,imgList:[{img:'/static/logo.jpg'},{img:'/static/logo.jpg'},{img:'/static/logo.jpg'}]}
  58. ]
  59. }
  60. },
  61. methods:{
  62. // 数据展开收起
  63. itemChange(item) {
  64. // item.isUp = !item.isUp
  65. this.$nextTick(function(){
  66. item.isUp = !item.isUp
  67. })
  68. },
  69. }
  70. }
  71. </script>
  72. <style lang="less">
  73. .content{
  74. width: 100%;
  75. height: 100vh;
  76. padding: 20upx 30upx;
  77. background-color: #f5f5f5;
  78. .order-content{
  79. padding: 30upx;
  80. background-color: #fff;
  81. display: flex;
  82. flex-direction: column;
  83. border-radius: 12px;
  84. font-family: PingFang SC;
  85. margin-bottom: 20upx;
  86. .item-userInfo{
  87. display: flex;
  88. align-items: center;
  89. justify-content: space-between;
  90. .userInfo{
  91. display: flex;
  92. .userInfo-nameOrPhone{
  93. margin-left: 20upx;
  94. font-size: 28upx;
  95. .name{
  96. font-weight: bold;
  97. color: #222;
  98. }
  99. .phone{
  100. font-weight: 400;
  101. color: #999;
  102. }
  103. }
  104. }
  105. }
  106. .item1{
  107. padding-bottom: 20upx;
  108. }
  109. .item-userInfo-detail{
  110. padding: 30upx 0;
  111. view:not(last-child){
  112. padding-bottom: 10upx;
  113. }
  114. .detail-title{
  115. font-size: 32upx;
  116. font-weight: 400;
  117. color:#222
  118. }
  119. .coucntinfo{
  120. font-size: 28upx;
  121. .coucntname{
  122. display: inline-block;
  123. margin-right: 20upx;
  124. }
  125. }
  126. .address{
  127. font-size: 28upx;
  128. color: #999;
  129. }
  130. }
  131. .item-userInfo-detail-image{
  132. display: flex;
  133. padding-bottom: 30upx;
  134. .detail-image{
  135. margin-right: 20upx;
  136. }
  137. }
  138. .cancelBtn{
  139. display: flex;
  140. justify-content: flex-end;
  141. padding-top: 30upx;
  142. }
  143. }
  144. }
  145. </style>