detail_upload.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <view class="container">
  3. <view class="detail-desc">
  4. <view class="cu-bar bg-white ">
  5. <view class="action">
  6. 库点照片
  7. </view>
  8. </view>
  9. <view class="cu-form-group">
  10. <view class="grid col-2 grid-square flex-sub">
  11. <view class="bg-img" v-if="storeImg != ''" @tap="ViewImage" :data-url="storeImg">
  12. <image :src="storeImg" mode="aspectFit"></image>
  13. <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="0" >
  14. <text class='cuIcon-close'></text>
  15. </view>
  16. </view>
  17. <view class="solids" @tap="ChooseImage" v-if="storeImg == ''">
  18. <text class='cuIcon-cameraadd'></text>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="cu-bar bg-white ">
  23. <view class="action">
  24. 粮食照片
  25. </view>
  26. </view>
  27. <view class="cu-form-group">
  28. <view class="grid col-2 grid-square flex-sub">
  29. <view class="bg-img" v-if="foodsImg != ''" @tap="ViewImage" :data-url="foodsImg">
  30. <image :src="foodsImg" mode="aspectFit"></image>
  31. <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="1" >
  32. <text class='cuIcon-close'></text>
  33. </view>
  34. </view>
  35. <view class="solids" @tap="ChooseImage2" v-if="foodsImg == ''">
  36. <text class='cuIcon-cameraadd'></text>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="cu-bar bg-white ">
  41. <view class="action">
  42. 装车现场照片
  43. </view>
  44. </view>
  45. <view class="cu-form-group">
  46. <view class="grid col-2 grid-square flex-sub">
  47. <view class="bg-img" v-if="carImg != ''" @tap="ViewImage" :data-url="carImg">
  48. <image :src="carImg" mode="aspectFit"></image>
  49. <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="2">
  50. <text class='cuIcon-close'></text>
  51. </view>
  52. </view>
  53. <view class="solids" @tap="ChooseImage3" v-if="carImg == ''">
  54. <text class='cuIcon-cameraadd'></text>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="page-bottom">
  60. <view class="action-btn-group">
  61. <button type="primary" class=" action-btn no-border add-cart-btn" @click="finish">确认上传</button>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. import uploadImage from '@/components/ossutil/uploadFile.js';
  68. export default {
  69. data(){
  70. return{
  71. userId:'',
  72. storeImg:'',
  73. foodsImg:'',
  74. carImg:'',
  75. id:''
  76. };
  77. },
  78. onLoad(tmp){
  79. this.id = tmp.id
  80. this.loadData()
  81. },
  82. onPullDownRefresh() {
  83. this.loadData()
  84. },
  85. methods: {
  86. loadData(){
  87. },
  88. ChooseImage() {
  89. uni.chooseImage({
  90. count: 1, //默认9
  91. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  92. sourceType: ['album','camera'], //从相册选择
  93. success: (res) => {
  94. //上传图片
  95. //图片路径可自行修改
  96. uploadImage(res.tempFilePaths[0], 'storeImg/',
  97. result => {
  98. this.storeImg = result
  99. uni.hideLoading();
  100. }
  101. )
  102. }
  103. });
  104. },
  105. ChooseImage2() {
  106. uni.chooseImage({
  107. count: 1, //默认9
  108. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  109. sourceType: ['album','camera'], //从相册选择
  110. success: (res) => {
  111. //上传图片
  112. //图片路径可自行修改
  113. uploadImage(res.tempFilePaths[0], 'foodsImg/',
  114. result => {
  115. this.foodsImg = result
  116. uni.hideLoading();
  117. }
  118. )
  119. }
  120. });
  121. },
  122. ChooseImage3() {
  123. uni.chooseImage({
  124. count: 1, //默认9
  125. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  126. sourceType: ['album','camera'], //从相册选择
  127. success: (res) => {
  128. //上传图片
  129. //图片路径可自行修改
  130. uploadImage(res.tempFilePaths[0], 'carImg/',
  131. result => {
  132. this.carImg = result
  133. uni.hideLoading();
  134. }
  135. )
  136. }
  137. });
  138. },
  139. ViewImage(e) {
  140. var img = [];
  141. img = e.currentTarget.dataset.url.split(' ')
  142. uni.previewImage({
  143. current:0,
  144. urls: img
  145. });
  146. },
  147. DelImg(e) {
  148. uni.showModal({
  149. title: '提示',
  150. content: '确定要删除该照片吗?',
  151. cancelText: '取消',
  152. confirmText: '确定',
  153. success: res => {
  154. if (res.confirm) {
  155. if(e.currentTarget.dataset.index == 0){
  156. this.storeImg = "";
  157. }
  158. else if(e.currentTarget.dataset.index == 1){
  159. this.foodsImg = "";
  160. }
  161. else if(e.currentTarget.dataset.index == 2){
  162. this.carImg = "";
  163. }
  164. }
  165. }
  166. })
  167. },
  168. finish(){
  169. const that = this
  170. if(!that.storeImg){
  171. this.$api.msg('请上传库点照片');
  172. return;
  173. }
  174. if(!that.foodsImg){
  175. this.$api.msg('请上传粮食照片');
  176. return;
  177. }
  178. if(!that.carImg){
  179. this.$api.msg('请上传装车现场照片');
  180. return;
  181. }
  182. uni.showLoading({
  183. title: '正在提交',
  184. mask:true
  185. })
  186. that.$api.request('sale', 'addImg', {
  187. id:that.id,
  188. storeImg:that.storeImg,
  189. foodsImg:that.foodsImg,
  190. carImg:that.carImg,
  191. }, failres => {
  192. if(failres.errmsg){
  193. uni.showToast({
  194. title: failres.errmsg,
  195. icon: 'none',
  196. duration: 2000
  197. })
  198. }
  199. else{
  200. uni.showToast({
  201. title: "系统异常,请联系管理员",
  202. icon: 'none',
  203. duration: 2000
  204. })
  205. }
  206. uni.hideLoading()
  207. }).then(res => {
  208. uni.hideLoading()
  209. that.$api.msg('上传成功')
  210. setTimeout(()=>{uni.navigateBack({})},1000);
  211. })
  212. },
  213. },
  214. }
  215. </script>
  216. <style>
  217. </style>