send-good.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. <template>
  2. <view class="test">
  3. <custom-nav ref="ltm" :title="title" />
  4. <view class="content">
  5. <view class="address">
  6. <view class="name-tel">
  7. <text class="name">收货人:{{ address.con_name || '' }}</text>
  8. <text class="tel">{{ address.con_mobile }}</text>
  9. </view>
  10. <viwe class="address-text">{{ address | getAddressString }}</viwe>
  11. </view>
  12. <view class="divice-order">
  13. <view class="swiper-nav">
  14. <view class="item" :class="{ active: MIXIN_ActiveIndex == 0 }" @tap="switchSwiper(0)">{{ '发货单(' + sendTotal + ')' }}</view>
  15. <view class="item" :class="{ active: MIXIN_ActiveIndex == 1 }" @tap="switchSwiper(1)">{{ '转货单(' + forwardTotal + ')' }}</view>
  16. <view class="moveBar" :style="{ left: MIXIN_MoveBarLeft + 'px', width: '50%' }"><text></text></view>
  17. </view>
  18. <view class="swiper-area">
  19. <swiper class="swiper" :current="MIXIN_ActiveIndex" :duration="234" @change="MIXIN_change">
  20. <swiper-item>
  21. <scroll-view scroll-y :style="{ height: MIXIN_ScrollViewHeight + 'px' }">
  22. <view v-if="sendTotal">
  23. <view class="item" v-for="(item, index) in sendList" :key="index" v-if="hasNum(item)">
  24. <view class="info">
  25. <image :src="item.img"></image>
  26. <view class="name ellipsis">{{ item.name }}</view>
  27. </view>
  28. <view class="type" v-for="(tyepItem, typeIndex) in item.typeList" :key="typeIndex">
  29. <view class="type-size-counter"
  30. v-for="(sizeValue, sizeIndex) in tyepItem.size" :key="sizeIndex"
  31. v-if="sendList[index].typeList[typeIndex].num[sizeIndex]"
  32. >
  33. <view class="type-size">
  34. <text>款式:{{ tyepItem.name }} 尺码: {{ sizeValue }}</text>
  35. </view>
  36. <custom-counter v-model="sendList[index].typeList[typeIndex].num[sizeIndex]"
  37. :args="[index, typeIndex, sizeIndex]" @change="sendChange"
  38. :max="list[index].typeList[typeIndex].num[sizeIndex]"
  39. />
  40. </view>
  41. </view>
  42. </view>
  43. <view class="express-order">
  44. <text>物流单号:</text>
  45. <input type="number" v-model="remark" placeholder="请填写物流单号(选填)" />
  46. </view>
  47. </view>
  48. <view v-else class="none">-发货单暂无商品-</view>
  49. </scroll-view>
  50. </swiper-item>
  51. <swiper-item>
  52. <scroll-view scroll-y :style="{ height: MIXIN_ScrollViewHeight + 'px' }">
  53. <view v-if="forwardTotal">
  54. <view class="item" v-for="(item, index) in forwardList" :key="index" v-if="hasNum(item)">
  55. <view class="info">
  56. <image :src="item.img"></image>
  57. <view class="name ellipsis">{{ item.name }}</view>
  58. </view>
  59. <view class="type" v-for="(tyepItem, typeIndex) in item.typeList" :key="typeIndex">
  60. <view class="type-size-counter"
  61. v-for="(sizeValue, sizeIndex) in tyepItem.size" :key="sizeIndex"
  62. v-if="forwardList[index].typeList[typeIndex].num[sizeIndex]"
  63. >
  64. <view class="type-size">
  65. <text>款式:{{ tyepItem.name }} 尺码: {{ sizeValue }}</text>
  66. </view>
  67. <custom-counter v-model="forwardList[index].typeList[typeIndex].num[sizeIndex]"
  68. :args="[index, typeIndex, sizeIndex]" @change="forwardChange"
  69. :max="list[index].typeList[typeIndex].num[sizeIndex]"
  70. />
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. <view v-else class="none">-转货单暂无商品-</view>
  76. </scroll-view>
  77. </swiper-item>
  78. </swiper>
  79. </view>
  80. </view>
  81. <view class="confirm-order" @tap="sendOrFowared">确认{{ MIXIN_ActiveIndex == 0 ? '发货' : '转单' }}({{ MIXIN_ActiveIndex == 0 ? sendTotal : forwardTotal }})</view>
  82. </view>
  83. </view>
  84. </template>
  85. <script>
  86. import { deepClone, divideOrder } from "@/common/util/index.js"
  87. import customCounter from '../../components/public/custom-counter.vue'
  88. import { _API_OrderDetail, _API_OrderSend } from '@/apis/order.js'
  89. export default {
  90. components: { customCounter },
  91. data() {
  92. return {
  93. title: '发货确认',
  94. address: {}, // 地址
  95. list: [], // 订单商品列表
  96. sendList: [], // 发货单
  97. forwardList: [], // 转货单
  98. order_num: '', // 订单号
  99. remark: '', // 物流单号
  100. MIXIN_ActiveIndex: 1, // 默认转货单
  101. MIXIN_ScrollViewHeight: 0, // scrollview 高
  102. MIXIN_MoveBarLeft: this.$store.state.device.screenWidth / 2,
  103. MIXIN_ScreenWidth: this.$store.state.device.screenWidth, // 屏幕宽
  104. status: -1, // 0表示未转单,1表示全部转单,2表示部分转单
  105. actionType: -1, // 用户提交发货时点的按钮 1 发货 2 转单
  106. }
  107. },
  108. computed: {
  109. sendTotal() { // 发货单商品数量
  110. return this.sendList.reduce((t, e) => {
  111. return e.typeList.reduce((tt, ee) => {
  112. return ee.num.reduce((ttt, eee) => {
  113. return ttt + (+eee)
  114. }, tt)
  115. }, t)
  116. }, 0)
  117. },
  118. forwardTotal() { // 转货单商品数量
  119. return this.forwardList.reduce((t, e) => {
  120. return e.typeList.reduce((tt, ee) => {
  121. return ee.num.reduce((ttt, eee) => {
  122. return ttt + (+eee)
  123. }, tt)
  124. }, t)
  125. }, 0)
  126. },
  127. numTotal() { // 订单商品总数量
  128. return this.sendTotal + this.forwardTotal
  129. },
  130. hasNum() { // 计算某件商品数量是否为空
  131. return item => {
  132. return item.typeList.reduce((tt, ee) => {
  133. return ee.num.reduce((ttt, eee) => {
  134. return ttt + (+eee)
  135. }, tt)
  136. }, 0) ? true : false
  137. }
  138. }
  139. },
  140. onShow() {
  141. if (this.onShowed) { // 当页面从发货成功返回
  142. if (!this.numTotal) { // 如果发货单和转货单都为空
  143. // uni. // 将待发货订单移动至已发货//////////////////////////////////////////////////////////////////
  144. uni.navigateBack() // 触发路由返回,不让用户在此页面停留
  145. }
  146. } else {
  147. this.onShowed = true
  148. }
  149. },
  150. onLoad(opt) {
  151. this.$refs.ltm.loading()
  152. this.num = +opt.num // 获取订单数量
  153. this.index = +opt.index // 获取订单下标
  154. _API_OrderDetail({ order_num: opt.order_num, type: 'normal' }).then(res => { // 获取订单详情
  155. this.list = deepClone(res.data.goodList) // 备份商品列表
  156. this.forwardList = deepClone(res.data.goodList) // 生成转货单
  157. this.sendList = deepClone(res.data.goodList) // 生成发货单
  158. this.sendList.forEach(e => e.typeList.forEach(ee => ee.num = Array(ee.size.length).fill(0))) // 将发货单数量清空
  159. this.address = res.data.address
  160. this.order_num = res.data.order_num
  161. this.$nextTick(() => {
  162. this.$offset('.swiper').then(res => { this.MIXIN_ScrollViewHeight = res.height }) // 设置scrollview 高
  163. })
  164. })
  165. },
  166. methods: {
  167. MIXIN_change({ detail: { current } }) {
  168. this.MIXIN_ActiveIndex = current
  169. this.MIXIN_MoveBarLeft = this.MIXIN_ActiveIndex * (this.MIXIN_ScreenWidth / 2)
  170. },
  171. switchSwiper(index) { // 点击导航栏切换
  172. this.MIXIN_ActiveIndex = index
  173. this.MIXIN_MoveBarLeft = this.MIXIN_ActiveIndex * (this.MIXIN_ScreenWidth / 2)
  174. },
  175. sendChange(value, GoodIndex, typeIndex, sizeIndex) { // 发货单数量变化 修改转货单数量
  176. const forward = deepClone(this.forwardList)
  177. forward[GoodIndex].typeList[typeIndex].num[sizeIndex] = this.list[GoodIndex].typeList[typeIndex].num[sizeIndex] - value
  178. this.forwardList = forward
  179. this.sendList = deepClone(this.sendList)
  180. },
  181. forwardChange(value, GoodIndex, typeIndex, sizeIndex) { // 转货单数量变化 修改发货单数量
  182. const send = deepClone(this.sendList)
  183. send[GoodIndex].typeList[typeIndex].num[sizeIndex] = this.list[GoodIndex].typeList[typeIndex].num[sizeIndex] - value
  184. this.sendList = send
  185. this.forwardList = deepClone(this.forwardList)
  186. },
  187. sendOrFowared() { // 点击确认发货/转单
  188. if (this.MIXIN_ActiveIndex === 0) { // 如果是发货
  189. if (this.sendTotal) { // 发货单是否有货
  190. if (this.sendTotal == this.numTotal) { // 如果是全部发货
  191. this.$refs.ltm.modal('发货确认', ['确定全部发货?', `总计: ${this.sendTotal} 套`]).then(() => {
  192. this.status = 0 // 该订单类型为 未转单
  193. this.actionType = 1 // 用户行为为 发货
  194. this.sendRequest() // 发起请求
  195. }).catch(() => {
  196. this.$refs.ltm.toast('取消发货')
  197. })
  198. } else { // 如果是部分发货
  199. this.$refs.ltm.modal('发货确认', [
  200. '您选择了部分发货,该订单剩余部分会自动转单(该操作不可逆)',
  201. `发货部分总计: ${this.sendTotal} 套`,
  202. `转单部分总计: ${this.forwardTotal} 套`,
  203. ]).then(() => {
  204. this.status = 2 // 该订单类型为 部分转单
  205. this.actionType = 1 // 用户行为为 发货
  206. this.sendRequest() // 发起请求
  207. }).catch(() => {
  208. this.$refs.ltm.toast('取消发货')
  209. })
  210. }
  211. } else {
  212. this.$refs.ltm.toast('发货单暂无商品')
  213. }
  214. } else if (this.MIXIN_ActiveIndex === 1) { // 如果是转单
  215. if (this.forwardTotal) { // 转货单是否有货
  216. if (this.forwardTotal == this.numTotal) { // 如果是全部转单
  217. this.$refs.ltm.modal('转单确认', ['确定全部转单?', `总计: ${this.forwardTotal} 套`]).then(() => {
  218. this.status = 0 // 该订单类型为 全部转单
  219. this.actionType = 2 // 用户行为为 转单
  220. this.sendRequest() // 发起请求
  221. }).catch(() => {
  222. this.$refs.ltm.toast('取消转单')
  223. })
  224. } else { // 如果是部分发货
  225. this.$refs.ltm.modal('转单确认', [
  226. '您选择了部分转单,该订单剩余部分会自动发货(该操作不可逆)',
  227. `转单部分总计: ${this.forwardTotal} 套`,
  228. `发货部分总计: ${this.sendTotal} 套`,
  229. ]).then(() => {
  230. this.status = 2 // 该订单类型为 部分转单
  231. this.actionType = 2 // 用户行为为 转单
  232. this.sendRequest() // 发起请求
  233. }).catch(() => {
  234. this.$refs.ltm.toast('取消转单')
  235. })
  236. }
  237. } else {
  238. this.$refs.ltm.toast('转货单暂无商品')
  239. }
  240. }
  241. },
  242. sendRequest() { // 发货转单网路请求
  243. this.$refs.ltm.loading()
  244. _API_OrderSend({ order_num: this.order_num, status: this.status, list: divideOrder(this.forwardList), remark: this.remark }).then(res => {
  245. if (res.code === 200) { // 发货成功
  246. uni.$emit('SENDGOOD', this.index) // 将订单从待发货列表删除
  247. uni.redirectTo({ url: `../send-success/send-success?type=${this.actionType}&numTotal=${this.num}` })
  248. } else {
  249. this.$refs.ltm.toast('发货失败,请稍后重试')
  250. }
  251. })
  252. }
  253. }
  254. }
  255. </script>
  256. <style lang="scss" scoped>
  257. .test {
  258. @include page();
  259. .content {
  260. @include flex(column);
  261. .address {
  262. width: 100%;
  263. font-size: 26rpx;
  264. background: #FFFFFF;
  265. padding: 20rpx 30rpx;
  266. margin-bottom: 10rpx;
  267. box-sizing: border-box;
  268. .name-tel {
  269. @include flex();
  270. margin-bottom: 20rpx;
  271. justify-content: space-between;
  272. .name {
  273. font-size: 32rpx;
  274. }
  275. }
  276. }
  277. .divice-order {
  278. @include flex(column);
  279. flex: 1;
  280. width: 100%;
  281. .swiper-nav {
  282. margin-bottom: 1rpx;
  283. text {
  284. width: 56rpx;
  285. }
  286. }
  287. .swiper-area {
  288. flex: 1;
  289. width: 100%;
  290. .swiper {
  291. height: 100%;
  292. scroll-view {
  293. .none {
  294. @include flex();
  295. height: 100%;
  296. }
  297. .item, .express-order {
  298. padding: 0 30rpx;
  299. font-size: 26rpx;
  300. background: #FFFFFF;
  301. margin-bottom: 10rpx;
  302. box-sizing: border-box;
  303. &.express-order {
  304. @include flex();
  305. height: 90rpx;
  306. margin-top: 10rpx;
  307. input {
  308. flex: 1;
  309. height: 100%;
  310. }
  311. }
  312. .info {
  313. @include flex();
  314. height: 180rpx;
  315. justify-content: flex-start;
  316. image {
  317. width: 140rpx;
  318. height: 140rpx;
  319. margin-right: 40rpx;
  320. }
  321. .name {
  322. font-size: 32rpx;
  323. }
  324. }
  325. .type-size-counter {
  326. @include flex();
  327. height: 90rpx;
  328. box-sizing: border-box;
  329. justify-content: space-between;
  330. border-bottom: 1rpx solid $app-base-bg;
  331. }
  332. }
  333. }
  334. }
  335. }
  336. }
  337. .confirm-order {
  338. @include flex();
  339. width: 100%;
  340. height: 98rpx;
  341. color: #FFFFFF;
  342. font-size: 32rpx;
  343. background: $app-base-color;
  344. }
  345. }
  346. }
  347. </style>