fix bug 接口对接和样式调整

xuxueyang

2024-07-26 2d5090c2b215a5ea7e489d4b50fbf30aae569324

fix bug 接口对接和样式调整

 common/self.scss

@@ -104,6 +104,9 @@
.bg-white {
    background-color: #FFFFFF;
}
.br-4{
    border-radius: 8rpx;
}

.bg-app-white {
    background-color: #FFFFFF;

 components/common-address-select/common-address-select.vue

@@ -7,7 +7,9 @@
            </view>
            <view class="name">{{address.name || '-'}}<span class="tel">{{address.tel || '-'}}</span>
            </view>
            <view class="address">{{address.schoolAreaStr || ''}} {{address.blockStr || ''}} {{address.room || ''}} {{address.address || ''}}</view>
      <view class="address">{{ address.schoolAreaStr || '' }} {{ address.blockStr || '' }} {{ address.room || '' }}
        {{ address.address || '' }}
      </view>
        </view>
        <view class="right-icon" style="padding-top: 16rpx;">
            <uni-icons type="right" size="18" color="#B3B3B3"></uni-icons>
@@ -21,6 +23,7 @@
    import {
        mapState
    } from 'vuex'

    export default {
        computed: {
            ...mapState({
@@ -34,16 +37,15 @@
        },
        name:"common-address-select",
        data() {
            return {
            };
    return {};
        },
        async onShow(){
			
  async mounted() {
    await this.init()
        },
        methods:{
            async init(){
                //获取默认地址并且填充
                if(!this.address.id){
      if (!this.address.id && this.currentInfo.id) {
                    this.$message.showLoading()
                    const {data} = await this.$http.request('get','/api/address/default/detail')
                    this.$message.hideLoading()
@@ -85,12 +87,14 @@
            font-size: 32rpx;
            color: #000000;
            margin-left: 6rpx;

            .tel{
                margin-left: 6rpx;
                font-size: 28rpx;
                color: #666666;
            }
        }

        .address{
            font-size: 24rpx;
            color: #666666;
@@ -102,6 +106,7 @@
        }
        
    }

    .right-icon{
        margin-left: auto;
        margin-right: 0rpx;

 mixin/mixin.js

@@ -278,6 +278,10 @@
                    }
                })
                if (data) {
                    if (data && Array.isArray(data)) {
                        this.list = data || []
                        this.page.total = data.length || 0
                    } else {
                    if (this.page.current === 1) {
                        this.list = data.records || []
                    } else {
@@ -294,6 +298,8 @@

                    }
                    this.page.total = data.total || 0
                    }

                    if (this.getList_after) {
                        this.getList_after()
                    }

 pages/user/address/address.vue

@@ -28,12 +28,13 @@
      </view>
      <view class="v-line"></view>
      <view class="flex">
        <!--        @click="changeDefaultAddress(item,index)"-->
        <!--        -->
        <view class="flex">
          <view class="radio m-t-2 m-r-10" :class="[item.defaulted?'select':'']">
          <view class="radio m-t-2 m-r-10" :class="[item.isDefault?'select':'']"
                @click="changeDefaultAddress(item,index)">

          </view>
          <span class="desc">{{ item.defaulted ? '默认地址:' : '当前地址:' }}{{ item.address || '' }}</span>
          <span class="desc">{{ item.isDefault ? '默认地址:' : '当前地址:' }}{{ item.address || '' }}</span>
          <!-- 当前地址/默认地址勾选 -->
        </view>
        <view class="desc del t-red" @click="deleteAddress(item)">
@@ -77,13 +78,13 @@
          </view>
          <view class="form-item">
            <view class="form-item-label require">
              请选择收获地址
              收获地址
            </view>
            <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">
              <uni-data-picker :area="true" @change="(e)=>{PickArea(dto,e)}" placeholder=""
              <uni-data-picker :area="true" @change="(e)=>{PickArea(submitForm,e)}" placeholder=""
                               :localdata="regionDataPlus">
                {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{
                  dto['region'] && ('/' + dto['region']) || ''
                {{ submitForm['province'] || '请选择' }}{{ submitForm['city'] && ('/' + submitForm['city']) || '' }}{{
                  submitForm['region'] && ('/' + submitForm['region']) || ''
                }}
              </uni-data-picker>
              <u-icon class="m-l-a" name="arrow-right"></u-icon>
@@ -154,35 +155,36 @@

      },
      regionDataPlus: [],
      list:[],
    };
  },
  methods: {
    PickArea(item, e) {
      console.log('PickArea', item, e)
      if (e.detail.value) {
        this.dto.province = ''
        this.dto.city = ''
        this.dto.region = ''
        this.submitForm.province = ''
        this.submitForm.city = ''
        this.submitForm.region = ''
        if (e.detail.value.length <= 3) {
          if (!!e.detail.value[0])
            this.dto.province = e.detail.value[0].value
            this.submitForm.province = e.detail.value[0].value
          if (!!e.detail.value[1])
            this.dto.city = e.detail.value[1].value
            this.submitForm.city = e.detail.value[1].value
          if (!!e.detail.value[2])
            this.dto.region = e.detail.value[2].value
            this.submitForm.region = e.detail.value[2].value
        } else {
          //说明有重复的
          var plusnum = e.detail.value.length - 3
          if (!!e.detail.value[plusnum + 0])
            this.dto.province = e.detail.value[plusnum + 0].value
            this.submitForm.province = e.detail.value[plusnum + 0].value
          if (!!e.detail.value[plusnum + 1])
            this.dto.city = e.detail.value[plusnum + 1].value
            this.submitForm.city = e.detail.value[plusnum + 1].value
          if (!!e.detail.value[plusnum + 2])
            this.dto.region = e.detail.value[plusnum + 2].value
            this.submitForm.region = e.detail.value[plusnum + 2].value
        }

        this.$forceUpdate()

        console.log('submit forn',this.submitForm)
      }
    },
    async init_area() {
@@ -247,7 +249,7 @@
          this.$message.showLoading()
          var {
            code
          } = await this.$http.request('post', '/api/address/customer/default/' +
          } = await this.$http.request('post', '/api/address/set/default/' +
              item.id, {})
          this.$message.hideLoading()
          if (code === 0) {
@@ -285,7 +287,7 @@
      this.$message.showLoading()
      var {
        code
      } = await this.$http.request('get', '/api/address/customer/delete/' + item.id, {})
      } = await this.$http.request('get', '/api/address/delete?id=' + item.id, {})
      this.$message.hideLoading()
      if (code === 0) {
        this.$message.showToast('删除成功')
@@ -301,7 +303,7 @@
        this.$message.showLoading()
        var {
          data
        } = await this.$http.request('get', '/api/address/list/detail/' + this.submitForm.id, {})
        } = await this.$http.request('get', '/api/address/list/detail?id=' + this.submitForm.id, {})


        if (data) {
@@ -339,7 +341,7 @@
      const {
        code
      } = await this.$http.request('post', '/api/address/' + (this.submitForm.id ? 'update' :
          'edit'), {
          'add'), {
        data: this.submitForm
      })
      this.$message.hideLoading()

 sub_pages/customer/shopping/confirm.vue

@@ -13,34 +13,14 @@
    }),

  },
  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));
    // 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
@@ -61,24 +41,56 @@
        addressId: '',
        flowers: [],
      },
      current_transport: {},
      cacheAddressId: '',
      transportList: [],


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

      }
    }
  },
  methods: {
    async loadTransportList() {
      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.dto.transportId) {
        this.$message.toast('请选择配送方式')
        this.$message.showToast('请选择配送方式')
        return
      }
      if (!this.dto.addressId) {
        this.$message.toast('请选择收货地址')
      if (!this.address.id) {
        this.$message.showToast('请选择收货地址')
        return
      }
      this.dto.addressId = this.address.id
      this.$message.showLoading()
      const {code, data} = await this.$http.request('post', '/api/customer/flower/order/confirm', {
      const {code, data} = await this.$http.request('post', '/api/customer/flower/order/commit', {
        data: {
          ...this.dto
        }
@@ -127,18 +139,18 @@

<template>
  <view class="page-confirm">
    <view class="p10">
    <view class="p10 bg-white br-4">
      <common-address-select ref="addressselect"></common-address-select>
    </view>
    <view>
      <view class="flower-container">
        <view class="shopping-item m-t-20" v-for="(item,index) of dto.flowers" :key="index">
      <view class="flower-container br-4 p10">
        <view class="shopping-item m-b-20" v-for="(item,index) of dto.flowers" :key="index">
          <u-divider v-if="index>0"></u-divider>
          <view class="sup-title">
            <image class="icon-dp" src="/static/common/icon-dp.png"></image>
            {{ item.supplierName || '-' }}
          <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 flex">
          <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>{{ item.levelStr || '-' }}</span>&nbsp;&nbsp;{{ item.name || '-' }}</view>
@@ -152,25 +164,25 @@
          </view>
        </view>
        <view class="price">
          <view class="desc">打包费用:{{ dto.packing || 0 }}}</view>
          <view class="m-l-a m-r-0">
          <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="transform-container p10">
        <view class="title flex">
      <view class="br-4 transform-container p10">
        <view class="title">
          <view>运输方式：</view>
          <!--          <view>约</view>-->
          <view class="flex transform-list">
            <view v-for="(transform,index) of transportList" :class="[transform.id===dto.transportId?'cur':'']"
                  :key="index" class="transform-item" @click="dto.transportId = transform.id">
                  :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="false">
          <view class="desc-red">
@@ -184,19 +196,20 @@
        </view>
      </view>

      <view class="form-item p10">
      <view class="p10 bg-white m-t-20 br-4">
        <view class="form-item  ">
        <view class="label">特殊需求</view>
        <view class="m-l-a m-r-0 flex1 text-right">
          <view class="m-l-a m-r-0 flex1">
          <view  class="m-t-12 m-b-12">
            <u-textarea v-model="dto.remarks" placeholder="请输入特殊需求">
              <u-textarea v-model="dto.specialNeeds" placeholder="请输入特殊需求">

            </u-textarea>
          </view>
        </view>
      </view>
      <view class="form-item p10">
        <view class="form-item  m-t-12 ">
        <view class="label">留言</view>
        <view class="m-l-a m-r-0 flex1 text-right">
          <view class="m-l-a m-r-0 flex1">
          <view  class="m-t-12 m-b-12">
            <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认">

@@ -204,13 +217,37 @@
          </view>
        </view>
      </view>
      </view>

    </view>
    <view class="bottom-price flex">
      <view>
        合计:￥ {{ dto.totalAmount || 0 }} 元
    <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) - (dto.packing) || 0 }}
      </view>
      <view class="button-green-1" @click="submitOrder">
      </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">
        合计:￥ {{ (dto.totalAmount || 0) + (current_transport.fee || 0) || 0 }} 元
      </view>
      <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder">
        提交订单
      </view>
    </view>
@@ -219,17 +256,36 @@

<style scoped lang="scss">
.page-confirm {
  padding: 20rpx 30rpx;
  .bottom-price {
    position: fixed;
    background-color: #ffffff;
    left: 0rpx;
    padding: 20rpx;
    right: 0rpx;
    bottom: 0rpx;
  }

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

    .shopping-item {
      padding: 28rpx 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: 88rpx;
        padding-left: 20rpx;

        .img {
          width: 124rpx;
@@ -260,27 +316,49 @@
          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 {
      .transform-item {
        background: rgba(225, 240, 231, 0.38);
        border-radius: 8rpx;
        min-height: 112rpx;
        //min-height: 112rpx;
        border: 2rpx solid rgba(225, 240, 231, 0.38);
        padding: 14rpx;
        text-align: center;
        margin: 0 auto;
        //margin: 0 auto;
        margin-left: 20rpx;
        margin-top: 10rpx;
        margin-right: auto;
        max-width: 32%;
        min-width: 120rpx;

        .title {
          font-weight: 400;
@@ -293,7 +371,7 @@
          font-weight: 600;
          font-size: 32rpx;
          color: #20613D;
          line-height: 44rpx;
          //line-height: 44rpx;
        }
      }

@@ -314,12 +392,5 @@

  }

  .bottom-price {
    position: fixed;
    left: 0rpx;
    padding: 20rpx;
    right: 0rpx;
    bottom: 160rpx;
  }
}
</style>

 sub_pages/customer/shopping/shopping.vue

@@ -14,30 +14,33 @@
    <view class="">
      <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
      <view class="shopping-item m-t-20" v-for="(item,index) of list" :key="index">
        <u-swipe-action>
          <u-swipe-action-item
              :options="options1"
              @click="(e)=>{clickSwipeButton(item)}"
          >


            <view class="sup-title">
              <radio :checked="ids.indexOf(item.id)>=0" @change="changeItem(item,'supplier')">></radio>
          <radio :checked="ids.indexOf(item.id)>=0" @click="changeItem(item,'supplier')"></radio>
              {{ item.supplierName || '-' }}
            </view>
            <u-divider></u-divider>
            <view v-for="(dto,j) of item.flowerList" :key="j">
              <u-divider v-if="j>0"></u-divider>
          <u-swipe-action>
            <u-swipe-action-item
                :options="options1"
                @click="(e)=>{clickSwipeButton(dto)}"
            >
              <view class="item-each flex">
                <radio :checked="ids.indexOf(dto.id)>=0" @change="changeItem(dto,'flower')"></radio>
                <radio :checked="ids.indexOf(dto.id)>=0" @click="changeItem(dto,'flower')"></radio>
                <image class="img img100 m-r-6" :src="dto.url||dto.cover"></image>
                <view>
                <view class="flex1">
                  <view class="title"><span>{{ dto.levelStr || '-' }}</span>&nbsp;&nbsp;{{ dto.name || '-' }}</view>
                  <view class="price">
                    {{ dto.price || '-' }}元/扎
                  </view>
                  <view class="flex">
                  <view class="desc m-t-12">
                    <view class="m-r-15">剩余:{{ dto.stock || 0 }}</view>
                  </view>
                  <view class="button-icons flex">
                    <view class="button-icons flex m-l-a m-r-0">
                    <uni-icons v-if="dto.num&&dto.num>=1" type="minus" size="32"
                               @click="addnum(dto,-1)"></uni-icons>
                    <view class="curnums" v-if="dto.num&&dto.num>=1">{{ dto.num }}</view>
@@ -48,6 +51,9 @@
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
        </view>


      </view>

    </view>
@@ -61,7 +67,7 @@
      <view class="m-t-12 m-l-a m-r-20 text-center">
        合计:<span class="t-red">￥ {{ totalprice || 0 }}</span> 元
      </view>
      <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx">
      <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitPay">
        提交订单
      </view>
    </view>
@@ -82,7 +88,8 @@
      checkall: false,
      options1: [{
        text: '删除'
      }]
      }],
      list: []
    }
  },
  onShow() {
@@ -90,7 +97,7 @@
      this.init()
    }
  },
  onLoad() {
  mounted() {
    this.init()
  },
  computed: {
@@ -111,20 +118,28 @@
    async submitPay() {
      // order/confirm/info
      var arr = []
      for (var j = 0; j < this.list.flowerList; j++) {

        if (this.ids.indexOf(this.list.flowerList[j].id) >= 0) {
      for (var j = 0; j < this.list.length; j++) {
        if(!this.list[j].flowerList){
          continue
        }
        for (var k = 0; k < this.list[j].flowerList.length; k++) {
          if (this.ids.indexOf(this.list[j].flowerList[k].id) >= 0) {
          arr.push({
            id: this.list.flowerList[j].id,
            num: this.list.flowerList[j].num
              id: this.list[j].flowerList[k].id,
              num: this.list[j].flowerList[k].num
          })
          } else {
            // console.log('skip', arr, this.list.flowerList[j],this.list.flowerList[j].id)
        }
      }
      if (this.arr.length < 1) {

      }
      if (arr.length < 1) {
        console.log('请选择商品', arr, this.ids)
        return
      }
      this.$message.showLoading()
      const {code, data} = await http.request('post', '/api/api/customer/order/confirm/info', {
      const {code, data} = await http.request('post', '/api/customer/flower/order/confirm/info', {
            data: {
              flowers: arr,
            }
@@ -132,8 +147,9 @@
      )
      this.$message.hideLoading()
      if (code === 0) {
        this.$storage.setItem('_cache_shopping_dto',JSON.stringify(data))
        uni.navigateTo({
          url: '/sub_pages/customer/shopping/confirm?dto=' + +encodeURIComponent(JSON.stringify(data))
          url: '/sub_pages/customer/shopping/confirm'
        })
      }
    },
@@ -141,10 +157,9 @@
      //删除商品，重新加载数据？

      this.$message.showLoading()
      const {code} = await http.request('post', '/api/customer/flower/cart/change-num', {
            data: {
              id: dto.id,
              num: addnum
      const {code} = await http.request('get', '/api/customer/flower/cart/delete', {
            params: {
              id: item.id,
            }
          }
      )
@@ -154,11 +169,11 @@
          this.ids.splice(this.ids.indexOf(item.id), 1)
        }
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].id === dto.supplierId) {
          if (this.list[i].id === item.supplierId) {
            this.list[i].splice(i, 1)
            if (this.list.flowerList.length === 1) {
              if (this.ids.indexOf(this.list[i].id) >= 0) {
                this.ids.splice(this.ids.indexOf(this.list[i].id), 1)
            if (this.list[i].flowerList.length === 1) {
              if (this.ids.indexOf('supplier@' + this.list[i].supplierId) >= 0) {
                this.ids.splice(this.ids.indexOf('supplier@' + this.list[i].supplierId), 1)
              }
              this.list[i].flowerList.splice(0, 1)
              this.list.splice(i, 1)
@@ -200,10 +215,11 @@
      }
    },
    changeItem(dto, type) {
      console.log('click changeItem', dto, type, this.ids)
      if (type === 'supplier') {
        //全选上
        if (this.ids.indexOf(dto.id) < 0) {
          this.ids.push(dto.id)
        if (this.ids.indexOf('supplier@' + dto.supplierId) < 0) {
          this.ids.push('supplier@' + dto.supplierId)
          dto.flowerList.forEach(item => {
            if (this.ids.indexOf(item.id) < 0) {
              this.ids.push(item.id)
@@ -211,9 +227,9 @@
          })
        } else {
          this.checkall = false
          this.ids.splice(this.ids.indexOf(dto.id), 1)
          this.ids.splice(this.ids.indexOf('supplier@' + dto.supplierId), 1)
          dto.flowerList.forEach(item => {
            this.ids.splice(this.ids.indexOf(item.id), 1)
            this.ids.splice(this.ids.indexOf('supplier@' + item.supplierId), 1)
          })
        }

@@ -224,8 +240,8 @@
        } else {
          this.checkall = false

          if (this.ids.indexOf(dto.supplierId) >= 0) {
            this.ids.splice(this.ids.indexOf(dto.supplierId), 1)
          if (this.ids.indexOf(dto.id) >= 0) {
            this.ids.splice(this.ids.indexOf(dto.id), 1)
          }
        }

@@ -251,13 +267,17 @@
      }
    },
    async init() {
      if (!this.currentInfo.customerDTO) {
        this.$message.showToast('请先前往个人中心补充个人信息')
        return
      }
      this.$message.showLoading()
      await this.$store.dispatch('sign_clear', 'shopping');
      const {code, data} = await this.$http.request('get', '/api/customer/flower/cart/list', {})
      this.$message.hideLoading()
      this.list = []
      if (code === 0) {
        this.list = data.list || []
        this.list = data || []

      }
    }
@@ -282,13 +302,15 @@
  .shopping-item {
    padding: 28rpx 22rpx;
    position: relative;
    background-color: #ffffff;

    .sup-title {

      margin-left: 10rpx;
      margin-top: 10rpx;
    }

    .item-each {
      padding-left: 88rpx;
      padding-left: 40rpx;

      .img {
        width: 124rpx;
@@ -323,7 +345,14 @@
    }

    .button-icons {
      position: absolute;
      //position: absolute;
      //z-index: 10;
      line-height: 40rpx;

      .curnums {
        margin-left: 10rpx;
        margin-right: 10rpx;
      }
    }
  }