addBacklog.vue 4.6 KB

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