update todo 到时候根据合伙人id

xuxueyang

2024-08-13 4384c7a5256b3b96afc30ad6f636f235fde2e296

 sub_pages/customer/shopping/confirm.vue

@@ -1,103 +1,535 @@
<script>
import {
  mapState
} from 'vuex'
   import {
      mapState
   } from 'vuex'

export default {
  name: "订单详情",
  computed: {
    ...mapState({
      address: state => {
        return state.defaultaddress || {}
      },
    }),
  },
  watch: {
    // address(nv, ov) {
    //   if (nv && nv.id) {
    //     //尝试更新一下
    //
    //   }
    // }
  },
  async onShow() {
    setTimeout(async () => {
      if (this.address && this.address.id && this.cacheAddressId !== this.address.id) {
        this.$message.showLoading()
        const {code, data} = await this.$http.request('get', '/api/flower/customer/order/confirm/transports', {
          data: {
            addressId: this.address.id,
            weight: this.dto.totalWeight || 0
          }
        })
        this.$message.hideLoading()
        this.transportList = []
        if (code === 0) {
          this.transportList = data || []
        }
      }
    }, 200)
  },
  onLoad(options) {
    let item = JSON.parse(decodeURIComponent(options.query.dto));
    this.dto = {
      ...this.dto,
      ...item
    }
    //先获取直接的全部地址
    // @ApiModelProperty(value = "订单商品")
    //   private List<FlowerCartListDTO> flowers;
    // @ApiModelProperty(value = "打包费")
    //   private BigDecimal packing;
    //todo 显示打包费等，然后再确认
    // https://lanhuapp.com/web/#/item/project/detailDetach?pid=05830e81-7c59-4655-8253-4deb7c913b51&project_id=05830e81-7c59-4655-8253-4deb7c913b51&image_id=f7cc3e57-5367-4b99-a84e-99c38249aa66&fromEditor=true
   export default {
      name: "订单详情",
      computed: {
         ...mapState({
            address: state => {
               return state.defaultaddress || {}
            },
         }),

  },
  data() {
    return {
      dto: {},
      cacheAddressId: '',
      transportList: [],
      // private Long id;
      // @ApiModelProperty(value = "名称")
      // private String name;
      // @ApiModelProperty(value = "英文名")
      // private String enName;
      // @ApiModelProperty(value = "运费")
      // private BigDecimal fee;
    }
  }
}
      },
      async onShow() {

      },
      onLoad(options) {
         // console.log('dto',options)

         // let item = JSON.parse(decodeURIComponent(options.query.dto));
         let item = JSON.parse(this.$storage.getItem('_cache_shopping_dto') || '{}') || {}
         this.dto = {
            ...this.dto,
            ...item
         }
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'SPEC_REQ'
            }
         }).then(res => {
            var data = res.data
            this.need_columns = [data || []]
            this.need_columns[0].unshift({
               label: '暂无',
               value: ''
            })
         })
         if (this.address.id) {
            this.loadTransportList()
            this.cacheAddressId = this.address.id
         }
         // 
         //先获取直接的全部地址
         // @ApiModelProperty(value = "订单商品")
         //   private List<FlowerCartListDTO> flowers;
         // @ApiModelProperty(value = "打包费")
         //   private BigDecimal packing;

         // 两种情况,我合伙人是A,我进入页面前改成了B,我进去后还是获取了A——可以通过

         if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) {
            //todo 考虑一下，由后台实时获取，如果获取的合伙人id不一样，那么就刷新当前用户信息。

            // await this.refrehCurrentInfo()

            this.$http.request('get', '/api/partner/page/view', {
               params: {
                  id: this.currentInfo.customerDTO.partnerId
               }
            }).then(res => {
               if (res.code == 0) {
                  this.partnerInfo = res.data || {}
                  if (this.partnerInfo.id !== this.currentInfo.customerDTO.partnerId) {
                     //刷新用户信息
                     // await dispatch('getCurrentInfo')
                  }
               }
            })


         }

      },
      data() {
         return {
            dto: {
               remarks: '',
               specialNeeds: '',
               specialNeedsStr: '',
               transportId: '',
               addressId: '',
               flowers: [],
            },
            current_transport: {},
            cacheAddressId: '',
            transportList: [],
            show_select_need: false,
            need_columns: [
               []
            ],
            partnerInfo: {},

         }
      },
      watch: {
         address(nv, ov) {
            if (nv && nv.id !== this.cacheAddressId) {
               this.loadTransportList()
               this.cacheAddressId = nv.id

            } else if (!nv.id) {
               //说明id清空了
               if (!this.cacheAddressId) {
                  transportList = []
                  this.cacheAddressId = ''
               }
            }
         }
      },
      methods: {
         select_need(e) {
            this.show_select_need = false
            this.dto.specialNeedsStr = e.value[0].label
            this.dto.specialNeeds = e.value[0].value
         },
         async loadTransportList() {
            if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) {
               return
            }
            let that = this;
            // console.log('address', that.address, that.cacheAddressId)
            if (that.address && that.address.id && that.cacheAddressId !== that.address.id) {
               that.$message.showLoading()
               const {
                  code,
                  data
               } = await that.$http.request('post', '/api/customer/flower/order/confirm/transports', {
                  data: {
                     addressId: that.address.id,
                     weight: that.dto.totalWeight || 0
                  }
               })
               that.$message.hideLoading()
               that.transportList = []
               if (code === 0) {
                  that.transportList = data || []
               }
            }

         },
         async submitOrder() {
            console.log('submitOrder', this.dto)
            if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.partnerId) {

            } else {
               if (!this.dto.transportId) {
                  this.$message.showToast('请选择配送方式')
                  return
               }
            }

            if (!this.address.id) {
               this.$message.showToast('请选择收货地址', {
                  duration: 2000
               })
               return
            }
            this.dto.addressId = this.address.id

            let tmp = this
            wx.login({
               success: async res => {
                  console.log(res)
                  if (res.code) {
                     tmp.$message.showLoading()
                     const {
                        code,
                        data
                     } = await tmp.$http.request('post', '/api/customer/flower/order/commit', {
                        data: {
                           ...tmp.dto,
                           wxcode: res.code
                        }
                     })
                     tmp.$message.hideLoading()
                     if (code === 0) {
                        //提交信息
                        console.log('pay,', data)
                        if (data && data['_testOrderId']) {
                           //回调
                           tmp.$message.showLoading()
                           const res2 = await tmp.$http.request('get',
                              '/api/customer/flower/order/callback/tmp', {
                                 params: {
                                    id: res2.data['_testOrderId']
                                 }
                              })
                           tmp.$message.hideLoading()
                        } else if (data) {
                           wx.requestPayment({
                              ...data,
                              async success(res) {
                                 console.log('pay success', res)
                                 tmp.$message.showToast('支付成功')
                                 //返回上一页
                                 await tmp.$store.dispatch('sign_add', 'shopping')
                                 uni.navigateBack()
                              },
                              async fail(err) {
                                 console.error('pay fail', err)
                                 tmp.$message.showToast('支付失败')
                                 await tmp.$store.dispatch('sign_add', 'shopping')
                                 uni.navigateBack()
                              }
                           })

                        }
                     }

                  } else {
                     tmp.$message.showToast('获取微信信息失败');
                  }
               },
               error: res => {
                  tmp.$message.showToast('获取微信信息失败:' + res);
               }
            });


         }
      }
   }
</script>

<template>
  <view class="page-confirm">
    <view>
      <common-address-select ref="addressselect"></common-address-select>
    </view>
    <view>
<!--     todo 查看商品列表，和选择运费 -->
    </view>
    <view class="bottom-price flex">
      <view>
        合计:￥ {{ dto.totalAmount||0 }} 元
      </view>
      <view class="button-green-1">
        提交订单
      </view>
    </view>
  </view>
   <view class="page-confirm">
      <view class="p10 bg-white br-4">
         <common-address-select ref="addressselect"></common-address-select>
      </view>
      <view>
         <view class="flower-container m-t-12 br-4 p10">
            <view class="shopping-item " v-for="(item,index) of dto.flowers" :key="index">
               <!-- <view class="line-gray" v-if></view> -->
               <view class="sup-title flex">
                  <image class="icon-dp img100 m-r-10" src="/static/common/icon-dp.png"></image>
                  <view>{{ item.supplierName || '-' }}</view>
               </view>
               <view class="item-each m-t-12 flex">
                  <image class="img img100 m-r-6" :src="item.url||item.cover"></image>
                  <view>
                     <view class="title"><span class="m-r-5"
                           style="display: inline-block;">{{item.categoryStr||''}}</span><span
                           v-if="item.levelStr" class="m-r-5"
                           style="display: inline-block;">{{ item.levelStr || '' }}</span>{{ item.name || '-' }}
                     </view>
                     <view class="price">
                        {{ item.price || 0 }}*{{ item.num }}扎
                     </view>
                     <view class="desc m-t-12">
                        <view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="price">
               <view class="m-l-a m-r-0 text-right">
                  共{{ dto.flowers.length }}件，小计<span class="t-red">￥{{ dto.totalAmount || 0 }}</span>
               </view>
            </view>
         </view>
         <view class="p10 bg-white m-t-20 br-4" v-if="partnerInfo&&partnerInfo.id">
            <view class="form-item  flex ">
               <view class="label">仓位名称</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  <view>{{partnerInfo.cityWarehouse|| '-'}}</view>
               </view>
            </view>
            <view class="form-item  flex ">
               <view class="label">合伙人名称</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  <view>{{partnerInfo.name|| '-'}}</view>
               </view>
            </view>
            <view class="form-item  flex ">
               <view class="label">联系方式</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  <view>{{partnerInfo.contactTel|| '-'}}</view>
               </view>
            </view>
            <view class="form-item  flex ">
               <view class="label">提货地址</view>
               <view class="m-l-a m-r-0 flex desc-gray">
                  {{ partnerInfo['province'] || '' }}{{ partnerInfo['city'] && ('/' + partnerInfo['city']) || '' }}{{
                    partnerInfo['region'] && ('/' + partnerInfo['region']) || ''
                  }}{{partnerInfo.address|| '-'}}
               </view>
            </view>
         </view>

         <!--    查看商品列表，和选择运费 -->
         <view class="br-4 transform-container m-t-12 p10"
            v-if="!currentInfo.customerDTO||!currentInfo.customerDTO.partnerId">
            <view class="title">
               <view>运输方式：</view>
               <view class="flex transform-list flex-wrap-normal">
                  <view v-for="(transform,index) of transportList"
                     :class="[transform.id===dto.transportId?'cur':'']" :key="index" class="transform-item"
                     @click="()=>{
                    dto.transportId = transform.id;
                    current_transport = transform
                  }">
                     <view class="title">{{ transform.name }}</view>
                     <view class="price">￥{{ transform.fee }}</view>
                  </view>
               </view>
            </view>
            <view class="m-t-20" v-if="true">
               <view class="desc-red">
                  10kg以下的零买订单将收取打包费，花店建议购满20kg， 可选冷链物流
               </view>
               <view class="desc">
                  <!-- 预计装1Mini件，运费约18.00元(5公斤内18元，不满5公斤按5公斤计费，每件货不能超过5公斤)， -->
                  第一次下单预计次日凌晨发货，备货高峰期除外，冷链汽车运输，发货后72小时左右到货，三线城市会推迟6-12小时送货到店。
                  <!-- 优势:价格便宜，顺丰配送 -->
                  <!-- 弊端:订单必须是5kg以内 -->
               </view>
            </view>
         </view>

         <view class="p10 bg-white m-t-20 br-4">
            <view class="form-item  flex ">
               <view class="label">特殊需求</view>

               <view class="m-l-a m-r-0 flex " :class="[!dto.specialNeeds?'desc-gray':'']" @click="()=>{
                  show_select_need=true
               }">
                  <view>{{dto.specialNeedsStr||dto.specialNeeds || '请选择'}}</view>
                  <u-icon class="m-l-a" name="arrow-right"></u-icon>
               </view>
            </view>
            <view class="form-item  m-t-12 ">
               <view class="label">留言</view>
               <view class="m-l-a m-r-0 flex1">
                  <view class="m-t-12 m-b-12">
                     <u-textarea v-model="dto.remarks" clearable placeholder="填写内容需与卖家协商并确认">

                     </u-textarea>
                  </view>
               </view>
            </view>
         </view>

      </view>
      <view class="m-t-20 br-4 info-container p10 bg-white">
         <view class="desc flex">
            <view>商品金额:</view>
            <view class="m-l-a m-r-0 text-right">
               {{ (dto.totalAmount || 0)  || 0 }}
            </view>
         </view>
         <view class="desc flex">
            <view>打包费:</view>
            <view class="m-l-a m-r-0 text-right">
               {{ (dto.packing || 0) }}
            </view>
         </view>
         <view class="desc flex">
            <view>运费:</view>
            <view class="m-l-a m-r-0 text-right">
               {{ (current_transport.fee || 0) }}
            </view>
         </view>
      </view>


      <view style="min-height:200rpx">
      </view>
      <view class="bottom-price flex">
         <view class="m-t-12 m-l-0 m-r-a">
            合计 <span class="t-red">￥
               {{ (dto.totalAmount || 0) + (dto.packing || 0) + (current_transport.fee || 0) || 0 }} </span>元
         </view>
         <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder">
            提交订单
         </view>
      </view>

      <u-picker :show="show_select_need" @confirm="select_need" keyName="label" :columns="need_columns"
         @cancel="show_select_need=false"></u-picker>
   </view>
</template>

<style scoped lang="scss">
.page-confirm{
   .page-confirm {
      padding: 20rpx 30rpx;

  .bottom-price {
    position: fixed;
    left: 0rpx;
    padding: 20rpx;
    right: 0rpx;
    bottom: 160rpx;
  }
}
      .bottom-price {
         position: fixed;
         background-color: #ffffff;
         left: 0rpx;
         padding: 20rpx;
         z-index: 99;
         z-index: 11;
         right: 0rpx;
         bottom: 0rpx;
      }

      .flower-container {
         background-color: #ffffff;

         .shopping-item {
            padding: 10rpx 22rpx;
            position: relative;

            .sup-title {
               border-bottom: 2rpx solid #EEEEEE;
               line-height: 50rpx;

               .icon-dp {
                  width: 36rpx;
                  height: 36rpx;
                  margin-top: 7rpx;
               }
            }

            .item-each {
               padding-left: 20rpx;

               .img {
                  width: 124rpx;
                  height: 124rpx;
               }

               .title {
                  font-weight: 600;
                  font-size: 28rpx;

                  color: #000000;
                  line-height: 40rpx;

                  .level {
                     color: #20613D;
                  }
               }

               .price {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #CF0000;
                  line-height: 40rpx;
               }

               .desc {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
                  line-height: 34rpx;

               }
            }

            .button-icons {
               position: absolute;
               line-height: 40rpx;

            }
         }

      }

      .info-container {
         .desc {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;

            .value {
               text-align: right;
            }
         }
      }

      .transform-container {
         background-color: #ffffff;

         .transform-list {
            overflow-x: scroll;

            .transform-item {
               background: rgba(225, 240, 231, 0.38);
               border-radius: 8rpx;
               //min-height: 112rpx;
               border: 2rpx solid rgba(225, 240, 231, 0.38);
               padding: 10rpx;
               text-align: center;
               //margin: 0 auto;
               margin-left: 10rpx;
               margin-top: 10rpx;
               margin-right: auto;
               max-width: 32%;
               width: 130rpx;
               min-width: 130rpx;

               .title {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #000000;
                  line-height: 40rpx;
                  word-break: break-word;
                  min-height: 90rpx
               }

               .price {
                  font-weight: 600;
                  font-size: 30rpx;
                  color: #20613D;
                  //line-height: 44rpx;
               }
            }

            .transform-item.cur {
               background: #E1F0E7;
               border-radius: 8rpx;
               border: 2rpx solid #20613D;
            }
         }

         .transform-list:nth-child(3n+0) {
            margin-left: 0
         }

         .transform-list:nth-child(3n+2) {
            margin-right: 0;
         }

         .desc-red {}

         .desc {}
      }

   }
</style>