index.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <template>
  2. <!-- 扫码入库确认页面 -->
  3. <view>
  4. <u-modal v-model="show" :show-title="false" @confirm="confirm">
  5. <view style="width: 100%;height: 42rpx;margin-top: 30rpx;margin-bottom: 10rpx;text-align: center;">成功信息</view>
  6. <u-table border-color="#f2f2f2">
  7. <u-tr class="u-tr">
  8. <u-td class="u-td">{{successCount}}条</u-td>
  9. <u-td class="u-td">成功入库轮胎</u-td>
  10. </u-tr>
  11. </u-table>
  12. <view style="width: 100%;height: 42rpx;margin-top: 30rpx;margin-bottom: 10rpx;text-align: center;">失败信息</view>
  13. <u-table border-color="#f2f2f2">
  14. <u-tr class="u-tr">
  15. <u-th class="u-th">轮胎胎号</u-th>
  16. <u-th class="u-th">失败原因</u-th>
  17. </u-tr>
  18. <u-tr class="u-tr" v-for="(item,index) in notBelongStoreBrandTyreNumbers" :key="index">
  19. <u-td class="u-td">{{item}}</u-td>
  20. <u-td class="u-td">非门店经营品牌</u-td>
  21. </u-tr>
  22. <u-tr class="u-tr" v-for="(item,index) in nonRegularTyreNumbers" :key="index">
  23. <u-td class="u-td">{{item}}</u-td>
  24. <u-td class="u-td">非正规胎号</u-td>
  25. </u-tr>
  26. <u-tr class="u-tr" v-for="(item,index) in alreadyExistsTyreNumbers" :key="index">
  27. <u-td class="u-td">{{item}}</u-td>
  28. <u-td class="u-td">库存中已存在</u-td>
  29. </u-tr>
  30. </u-table>
  31. <view style="width: 100%;height: 42rpx;margin-top: 30rpx;margin-bottom: 10rpx;text-align: center;">奖励合计</view>
  32. <u-table border-color="#f2f2f2">
  33. <u-tr class="u-tr">
  34. <u-td class="u-td">奖励:{{rewardMoney}}元</u-td>
  35. <u-td class="u-td">积分:{{rewardIntegral}}个</u-td>
  36. </u-tr>
  37. </u-table>
  38. </u-modal>
  39. <view class="header">
  40. <view class="behind"></view>
  41. <view class="content">
  42. <view class="content-one">
  43. <view>胎号</view>
  44. <view>物料</view>
  45. <view>预计奖励</view>
  46. </view>
  47. <view v-for="(item,index) in dalist" :key="index">
  48. <view class="content-two">
  49. <view>{{item.tireNumber}}</view>
  50. <view>{{item.maktx}}</view>
  51. <view>{{item.rewardMoney}}元</view>
  52. </view>
  53. </view>
  54. <view class="content-three">
  55. <view>
  56. 合计:{{total}}元
  57. </view>
  58. </view>
  59. </view>
  60. <view class="content-four">
  61. 注:请完善请完善请完善请完善请完善请完善请完善
  62. </view>
  63. </view>
  64. <u-toast ref="repeat" position="bottom" />
  65. <view class="tail" @click="location">
  66. 扫码确认
  67. </view>
  68. </view>
  69. </template>
  70. <script>
  71. const app = getApp()
  72. var QQMapWX = require('../../../components/mi-map/qqmap-wx-jssdk.min.js')
  73. var qqmapsdk = new QQMapWX({
  74. key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
  75. })
  76. import {
  77. request
  78. } from '../../../common/request/request'
  79. require("promise.prototype.finally").shim()
  80. import {
  81. mapMutations
  82. } from 'vuex'
  83. export default {
  84. data() {
  85. return {
  86. dalist: [],
  87. total: 0,
  88. show: false,
  89. successCount: '', //成功条数
  90. notBelongStoreBrandTyreNumbers: [], //非门店经营品牌胎号
  91. nonRegularTyreNumbers: [], //非正规胎号
  92. alreadyExistsTyreNumbers: [], //库存中已存在轮胎号
  93. rewardMoney: '', //奖励金额
  94. rewardIntegral: '', //奖励积分
  95. longitude: '', //经度
  96. latitude: '', //纬度
  97. address: '' //中文地址
  98. }
  99. },
  100. created() {
  101. uni.getNetworkType({
  102. success: function(res) {
  103. let none = res.networkType
  104. console.log(res.networkType);
  105. if (none == 'none') {
  106. uni.showToast({
  107. icon: 'none',
  108. title: '无网络,请连接网络后再试~',
  109. position: "bottom"
  110. })
  111. }
  112. }
  113. });
  114. this.getDatalist()
  115. },
  116. onBackPress(options) {
  117. if (options.from == 'backbutton') {
  118. this.$u.route({
  119. url: 'pages/home/scancode/index'
  120. })
  121. uni.$emit('data', {
  122. lisi: this.datalist
  123. })
  124. console.log(this.datalist)
  125. console.log("到此一游")
  126. }
  127. return true;
  128. },
  129. methods: {
  130. ...mapMutations(["inStore"]),
  131. confirm() {
  132. this.$u.route({
  133. type: 'redirectTo',
  134. url: 'pages/me/Warehousing-details/index'
  135. })
  136. },
  137. getDatalist() {
  138. uni.showLoading({
  139. title: '加载中...'
  140. });
  141. setTimeout(function() {
  142. uni.hideLoading();
  143. }, 1000);
  144. uni.$on('update', data => {
  145. this.datalist = data.materialList
  146. request({
  147. url: '/storeScan/getTyreReword',
  148. method: 'Post',
  149. data: {
  150. storeId: this.$store.state.storeInfo.storeId,
  151. userId: this.$store.state.storeInfo.userId,
  152. materialList: this.datalist
  153. }
  154. }).then(res => {
  155. console.log(res.data.code)
  156. if (res.data.code == 0) {
  157. this.dalist = res.data.data
  158. for (let i = 0; i < this.dalist.length; i++) {
  159. this.total += parseInt(this.dalist[i].rewardMoney)
  160. }
  161. this.inStore()
  162. return this.total
  163. } else {
  164. uni.showToast({
  165. icon: 'none',
  166. title: '出错啦~'
  167. })
  168. }
  169. }).catch(err => {
  170. console.log(err)
  171. uni.showToast({
  172. icon: 'none',
  173. title: '无网络,请连接网络后再试~'
  174. })
  175. }).finally(() => {
  176. // Loading.close()
  177. })
  178. })
  179. },
  180. location() {
  181. uni.getNetworkType({
  182. success: function(res) {
  183. let none = res.networkType
  184. console.log(res.networkType);
  185. if (none == 'none') {
  186. uni.showToast({
  187. icon: 'none',
  188. title: '无网络,请连接网络后再试~',
  189. position: "bottom"
  190. })
  191. }
  192. }
  193. });
  194. let this_s = this
  195. uni.getLocation({
  196. type: 'wgs84', // 返回国测局坐标
  197. geocode: true,
  198. success: function(res) {
  199. console.log(res);
  200. this_s.longitude = res.longitude
  201. this_s.latitude = res.latitude
  202. this_s.address = res.address.country + res.address.province + res.address.city + res.address.district + res.address
  203. .street
  204. if (res.address.length == 0) {
  205. uni.showToast({
  206. icon: 'none',
  207. title: '获取地址失败, 请检查是否开启定位权限~~',
  208. position: "bottom"
  209. })
  210. console.log("定位失败出去啦")
  211. return
  212. }
  213. this_s.Submit()
  214. },
  215. fail: function(e) {
  216. uni.showToast({
  217. icon: 'none',
  218. title: '获取地址失败, 请检查是否开启定位权限~~'
  219. })
  220. }
  221. })
  222. },
  223. Submit() {
  224. this.show = true;
  225. request({
  226. url: '/storeScan/storeScanTyres',
  227. method: 'Post',
  228. data: {
  229. storeId: this.$store.state.storeInfo.storeId,
  230. userId: this.$store.state.storeInfo.userId,
  231. scanAddress: this.address, //地址
  232. longitude: this.longitude, //纬度
  233. latitude: this.latitude, //经度
  234. materialList: this.datalist //轮胎参数
  235. }
  236. }).then(res => {
  237. console.log(res)
  238. console.log(res.data.msg)
  239. if (res.data.code == 500) {
  240. this.$refs.repeat.show({
  241. title: res.data.msg,
  242. type: 'default',
  243. position: 'bottom'
  244. })
  245. }
  246. this.notBelongStoreBrandTyreNumbers = res.data.data.notBelongStoreBrandTyreNumbers //非门店经营品牌胎号
  247. this.successCount = res.data.data.successCount //成功条数
  248. this.nonRegularTyreNumbers = res.data.data.nonRegularTyreNumbers //非正规胎号
  249. this.alreadyExistsTyreNumbers = res.data.data.alreadyExistsTyreNumbers //库存中已存在轮胎号
  250. this.rewardMoney = res.data.data.rewardMoney //奖励金额
  251. this.rewardIntegral = res.data.data.rewardIntegral //奖励积分
  252. console.log(res)
  253. this.datalist = ''
  254. }).catch(err => {
  255. console.log(err.data.msg)
  256. }).finally(() => {
  257. // Loading.close()
  258. })
  259. }
  260. },
  261. }
  262. </script>
  263. <style lang="scss" scoped>
  264. .behind {
  265. width: 100%;
  266. height: 230rpx;
  267. margin-bottom: -200rpx;
  268. background-color: #0094FE;
  269. }
  270. .header {
  271. width: 100%;
  272. }
  273. .content {
  274. width: 711rpx;
  275. // height: 852rpx;
  276. background: #FFFFFF;
  277. box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(101, 176, 249, 0.41);
  278. border-radius: 20rpx;
  279. padding-top: 10rpx;
  280. padding-bottom: 10rpx;
  281. margin: 0 auto;
  282. }
  283. .content-one {
  284. display: flex;
  285. justify-content: space-between;
  286. }
  287. .content-one:nth-child(1) {
  288. margin-left: 90rpx;
  289. margin-right: 50rpx;
  290. font-weight: bold;
  291. margin-top: 30rpx;
  292. }
  293. .content-two {
  294. display: flex;
  295. justify-content: space-between;
  296. margin-top: 30rpx;
  297. line-height: 115rpx;
  298. width: 666rpx;
  299. margin: 0 auto;
  300. color: #9c9c9c;
  301. font-size: 28rpx;
  302. border-bottom: 1rpx solid #E8E8E8;
  303. }
  304. .content-two>view:nth-child(2) {
  305. width: 240rpx;
  306. line-height: 53rpx;
  307. text-align: center;
  308. margin-right: 100rpx;
  309. }
  310. .content-two>view:nth-child(3) {
  311. color: #149EE2;
  312. margin-right: 50rpx;
  313. }
  314. .tail {
  315. width: 678rpx;
  316. line-height: 83rpx;
  317. background: #0095FF;
  318. color: #fff;
  319. text-align: center;
  320. margin: 0 auto;
  321. margin-top: 60rpx;
  322. border-radius: 15rpx;
  323. }
  324. .content-three>view:nth-child(1) {
  325. margin-left: 500rpx;
  326. line-height: 80rpx;
  327. font-weight: bolder;
  328. }
  329. .content-four {
  330. color: #acacac;
  331. font-size: 24rpx;
  332. margin-top: 30rpx;
  333. margin-left: 20rpx;
  334. margin-bottom: 50rpx;
  335. }
  336. </style>