addBacklog.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="back-body">
  3. <view class="back-content">
  4. <!-- 轮播图 -->
  5. <view class="paizhao">
  6. <view class="icon">
  7. <u-icon name="xianchangpaishe" custom-prefix="xd-icon" size="64" color="#888888"></u-icon>
  8. </view>
  9. </view>
  10. <swiper v-if="backlogPhotoList.length" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
  11. <swiper-item v-for="(item,index) in backlogPhotoList" :key="index">
  12. <div class="swiper-item uni-bg-red">
  13. <!-- <image class="swiper-item-imgse" :fade-show='true' :src="item.photo"></image> -->
  14. <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photo"></u-image>
  15. </div>
  16. </swiper-item>
  17. </swiper>
  18. <u-form class="form-content" :model="form" ref="uForm" label-width="180">
  19. <u-form-item label="门店" prop="storeName">
  20. <u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" />
  21. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  22. </u-form-item>
  23. <u-form-item label="考评指标" prop="clsName">
  24. <u-input @click="chooseClsName" input-align="right" v-model="form.clsName" disabled placeholder="请选择考评指标" />
  25. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  26. </u-form-item>
  27. <u-form-item label="处理人" prop="putUser">
  28. <u-input input-align="right" v-model="form.clsName" disabled placeholder="请选择处理人" />
  29. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  30. </u-form-item>
  31. <u-form-item label="抄送人" prop="receiveUser">
  32. <u-input input-align="right" v-model="form.clsName" disabled placeholder="请选择抄送人" />
  33. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  34. </u-form-item>
  35. <u-form-item label="整改到期日" prop="effectiveEndTime" >
  36. <u-input @click="showPicker=true" input-align="right" v-model="form.effectiveEndTime" disabled placeholder="请选择整改到期日" />
  37. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  38. </u-form-item>
  39. </u-form>
  40. <view class="remarks">
  41. <u-input v-model="remarks" type="textarea" placeholder="请输入备注..." />
  42. </view>
  43. </view>
  44. <u-button class="save-btn" type="primary">保存</u-button>
  45. <!-- 时间选择器 -->
  46. <mx-date-picker class="date-picker" :show="showPicker" type="date" format="yyyy-mm-dd" :value="form.effectiveEndTime" :show-tips="true" @confirm="onSelected" @cancel="showPicker=false" />
  47. </view>
  48. </template>
  49. <script>
  50. import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
  51. export default {
  52. components: {
  53. MxDatePicker
  54. },
  55. data() {
  56. return {
  57. // 顶部轮播图片
  58. backlogPhotoList:[],
  59. showPicker: false, // 是否显示时间弹窗
  60. form: {
  61. storeName: '', // 门店
  62. clsName: '',// 考评指标
  63. putUser: '', // 处理人
  64. receiveUser: '', // 抄送人
  65. effectiveEndTime: '' // 整改到期日
  66. },
  67. remarks: '' // 备注
  68. }
  69. },
  70. onLoad(option) {
  71. },
  72. methods: {
  73. // 确认日期选择
  74. onSelected (v) {
  75. console.log(v,'vvvvvvvv')
  76. this.form.effectiveEndTime = v.value
  77. this.showPicker = false
  78. },
  79. // 选择门店
  80. chooseStore () {
  81. uni.navigateTo({
  82. url: '/pages/spotCheckConfigure/evaluateStore'
  83. })
  84. },
  85. // 选择考评指标
  86. chooseClsName () {
  87. uni.navigateTo({
  88. url: '/pages/spotCheckConfigure/evaluateItem'
  89. })
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. .back-body {
  96. height: 100%;
  97. background-color: #eee;
  98. display: flex;
  99. flex-direction: column;
  100. .back-content {
  101. flex: 1;
  102. overflow-y: scroll;
  103. }
  104. .paizhao {
  105. background-color: #fff;
  106. height: 340upx;
  107. display: flex;
  108. align-items: center;
  109. justify-content: center;
  110. .icon{
  111. width: 160upx;
  112. height: 160upx;
  113. border: 1px solid #eee;
  114. display: flex;
  115. align-items: center;
  116. justify-content: center;
  117. }
  118. }
  119. .text-right {
  120. text-align: right;
  121. }
  122. .top-ad-swiper{
  123. background-color: #fff;
  124. height: 340upx;
  125. }
  126. .swiper-item-imgse{
  127. width: 750upx;
  128. height: 340upx;
  129. }
  130. .form-content{
  131. background-color: #fff;
  132. padding: 0 30upx;
  133. }
  134. .remarks{
  135. background-color: #fff;
  136. padding: 0 30upx;
  137. margin-top: 20upx;
  138. }
  139. .save-btn{
  140. width: 90%;
  141. margin-bottom: 20upx;
  142. }
  143. }
  144. </style>