web-zk-h5/pages/other/haiConfirm.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="context">
      <u-form :model="form"
              labelWidth="75"
              :rules="rules"
              ref="uForm">
        <view class="subTxt">
          <view>{{'收货人信息'}}</view>
        </view>
        <u-form-item :label="'收货人'"
                     borderBottom
                     prop="recName">
          <u-input v-model="form.recName"
                   border="none"
                   :placeholder="'请输入收货人'" />
        </u-form-item>
        <u-form-item :label="'收货电话'"
                     borderBottom
                     prop="recPhone">
          <u-input v-model="form.recPhone" maxlength="20"
                   border="none"
                   type="number"
                   :placeholder="'请输入收货电话'" />
        </u-form-item>
        <u-form-item :label="'收货地址'"
                     borderBottom
                     prop="diqu"
                     @click='getDiqu'>
          <view class="disFlex justBwn">
            <u-input v-model="form.diqu"
                     :placeholder="'请选收货地址'"
                     border="none"></u-input>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </u-form-item>
        <u-form-item :label="'详细地址'"
                     borderBottom
                     prop="recAddress">
          <u-input v-model="form.recAddress"
                   border="none"
                   maxlength="200"
                   :placeholder="'请输入详细地址'" />
        </u-form-item>
        <u-form-item :label="'邮费'"
                     borderBottom>
          <u-input disabled
                   border="none"
                   v-model="form.postage" />
        </u-form-item>
        <u-form-item :label="'备注'"
                     borderBottom>
          <u-input v-model="form.remark"
                   border="none"
                   :placeholder="'请输入备注'" />
        </u-form-item>
      </u-form>
      <view class="heng">

      </view>
      <view class="subTxt">
        <view>{{'历史地址'}}</view>
      </view>
      <u-radio-group v-model="moren"
                     shape="circle"
                     placement="column"
                     @change="checkRadio">
        <view v-for="item in addressList"
              :key="item.pkId"
              class="disFlex address_a">
          <u-radio activeColor="red"
                   :name="item.pkId"></u-radio>
          <view class="address_r">
            <view class="disFlex justBwn">
              <view class="disFlex">
                <view>{{item.recName}}</view>
                <view class="mr"  v-show="item.isDefault == 1">{{'默认'}}</view>
              </view>
              <view class="disFlex">
                <u-icon name="edit-pen"
                        @click="editAddress(item)"
                        style="margin-right:20rpx"
                        color="#999999"
                        size="20"></u-icon>
                <u-icon name="trash"
                        @click="delAds(item.pkId)"
                        color="#999999"
                        size="20"></u-icon>
              </view>
            </view>
            <view class="address_rc">{{item.recPhone}}</view>
            <view class="tit3">{{item.recArea}}{{item.recAddress}}</view>
          </view>
        </view>
      </u-radio-group>
      <view v-for="(item, index) in goodList"
            :key="index"
            class="goodList">
        <view class="goodList_i">
          <view class="goodList_it">
            <img :src="item.cover"
                 class="cover"
                 alt="">
            <view class="goodList_ir">
              <view class="goodList_ib">
                <view class="tit1">
                  {{ item.productName }}
                </view>
                <view class="tit5">
                  x{{ item.quantity }}
                </view>
              </view>
              <view class="goodList_ib">
                <view class="tit2">
                  {{ item.waresPrice | numberToCurrency | isLocal}}
                </view>
                <view class="tit3">PV: {{ item.pv | numberToCurrency | isLocal}}</view>
              </view>
            </view>
          </view>
          <view v-for="(stem,sndex) in item.waresSkuList"
                :key="sndex"
                class="product_i">
            <img :src="stem.image"
                 alt="">
            <view class="product_il">
              <view class="tit4">{{ stem.specValueNames }} </view>
              <!-- <view class="tit5">x{{ stem.quantity }}</view> -->
            </view>
          </view>
          <view class="fen">
            <view class="disFlex justBwn">
              <view class="tit3">{{'商品业绩'}}(PV)</view>
              <view class="tit1">{{ item.pvAmount | numberToCurrency}}</view>
            </view>
            <view class="disFlex justBwn">
              <view class="tit3">{{'金额小计'}}</view>
              <view class="tit1">{{ item.priceAmount | numberToCurrency}}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="pad">
        <!-- <view class="disFlex justBwn">
          <view class="tit3">{{'商品金额总计'}}(¥)：</view>
          <view class="tit1">{{ priceAmount | numberToCurrency | isLocal}}</view>
        </view> -->
        <view class="disFlex justBwn">
          <view class="tit3">{{'邮费'}}:</view>
          <view class="tit1">{{ form.postage | numberToCurrency | isLocal}}</view>
        </view>
        <view class="disFlex justBwn">
          <view class="tit3">{{'总价'}}：</view>
          <view class="tit1">{{ totalAmont | numberToCurrency | isLocal}}</view>
        </view>
        <!-- <view class="disFlex justBwn">
          <view class="tit3">{{'业绩'}}</view>
          <view class="tit1">{{ allGoodsData.achieveAmount | numberToCurrency | isLocal}}</view>
        </view> -->
      </view>
    </view>
    <!-- 占空 -->
    <view style="height:296rpx"></view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_l">
          <u-checkbox-group v-model="agreementShow"
                            shape="circle"
                            activeColor="#005BAC"
                            @change="checkboxChange">
            <u-checkbox :name="1">
            </u-checkbox>
          </u-checkbox-group>
          <view class="tit3">{{'请阅读并同意'}}</view>
          <view class="tit2"> 《{{'购买协议'}}》</view>
        </view>
        <view class="footer_r">
          <u-button type="success"
                    class="uBtn"
                    shape="circle"
                    :loading="isLoading"
                    :loadingText="'购买中'"
                    @tap="goBuy"
                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'购买'}}</u-button>
        </view>
      </view>
    </view>
    <!-- 发货方式 -->
    <u-picker :show="isDelivery"
              @cancel='isDelivery=false'
              @confirm="sureDelivery"
              :columns="deliList"
              keyName="label"></u-picker>
    <!-- 运输方式 -->
    <u-picker :show="isTrans"
              @cancel='isTrans=false'
              @confirm="sureTrans"
              :columns="transList"
              keyName="label"></u-picker>
    <!-- 强制阅读协议 -->
    <mustAgreeMent :waresCodeList='waresCodeList'></mustAgreeMent>

    <u-modal :show="delAddress"
             showConfirmButton
             showCancelButton
             :content="'确定要删除该收货地址吗'+'？'"
             confirmColor='#DE3932'
             @confirm="toDel"
             @cancel="delAddress=false"
             ref="uModal"
             :asyncClose="true"></u-modal>
    <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>

  </view>
</template>

<script>
import address from '@/components/address.vue'
import * as api from '@/config/regiest'
import mustAgreeMent from '@/components/mustAgreeMent.vue'
export default {
  components: {
    'v-address': address,
    mustAgreeMent,
  },
  data() {
    return {
      delAddress:false,
      waresCodeList: [],
      defaultCode: [],
      moren: '',
      addressList: [],
      deliList: [],
      transList: [],
      bankList: [],
      isDelivery: false,
      isBank: false,
      isTrans: false,
      placeList: [
        [
          {
            id: 1,
            label: '安置左区',
          },
          {
            id: 2,
            label: '安置右区',
          },
        ],
      ],
      isPlace: false,
      countryIndex: 0,
      isCountry: false,
      userInfo: '',
      countryList: [],
      isClick: 0,
      specialArea: 21,
      shoppingArr: [],
      allGoodsData: {
        specialArea: 21,
      },
      pageList: {
        mail: false,
        card: false,
        bankName: false,
        bankNo: false,
        accountBranch: false,
      },

      form: {
        deliveryName: '快递发货',
        deliveryWay: 1,
        postage: 0,
        transType: 1,
        pkGradeVal: '',
      },
      deliList: [],
      diqu: '',
      allData: [],
      goodsNum: 1,
      agreementShow: [],
      priceAmount: 0, //商品总价
      achiveAmount: 0, //总业绩
      totalAmont: 0,
      orderItemsParams: [],
      isLoading: false,
      centerCodeId: '',
      rules: {
        upgradeMemberCode: [
          {
            required: true,
            validator: this.upgradeMemberCodePass,
            trigger: ['blur'],
          },
        ],

        recName: [
          {
            required: true,
            message: '请输入收货人',
            trigger: ['change', 'blur'],
          },
        ],
        recPhone: [
          {
            required: true,
            message: '请输入收货电话',
            trigger: ['change', 'blur'],
          },
        ],
        diqu: [
          {
            required: true,
            message: '请选择收货地址',
            trigger: ['change', 'blur'],
          },
        ],
        recAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['change', 'blur'],
          },
        ],
      },
      allDataObj: {
        pgpList: [],
      },
      goodList: [],
      postList: [],
      delId:''
    }
  },
  onLoad(options) {
    // // 数据源
    // this.allData = JSON.parse(options.allData)
    this.allData = JSON.parse(uni.getStorageSync('haiConfirm'))
    let confirmOrderWaresInfoParamsList = []
    this.allData.forEach((item) => {
      item.waresSkuList.forEach((ctem) => {
        confirmOrderWaresInfoParamsList.push({
          pkTWares: ctem.pkTWares,
          pkTWaresSku:ctem.pkTWaresSku||ctem.pkThWaresSku,
          quantity: item.quantity,
          source: item.source,
        })
      })
    })
    this.shoppingArr = JSON.parse(options.shoppArr)
    // 获取购物车详情
    this.getCatDetail(confirmOrderWaresInfoParamsList)
    // 幂等性
    this.getGenerate()
    //  登录信息
    this.userInfo = uni.getStorageSync('User')
    this.form.upgradeMemberCode = this.userInfo.memberCode
    this.getUserName()
  },
  onShow() {
      // 获取地址
      this.getAddressList()
  },
  methods: {
    editAddress(item) {
      uni.navigateTo({
        url: '/pages/address/index?pkId=' + item.pkId,
      })
    },
    delAds(id) {
      this.delId = id
      this.delAddress = true
    },
    toDel() {
      api.delAddress(this.delId).then((res) => {
        uni.showToast({
          title: '删除成功',
          icon: 'none',
        })
        this.getAddressList()
      })
      this.delAddress = false
    },
    getCatDetail(confirmOrderWaresInfoParamsList) {
      api
        .waresinfo({
          confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
        })
        .then((res) => {
          this.goodList = res.data
          let price = 0
          this.goodList.forEach((item) => {
            item.waresItemsParamList = []
            price += parseFloat(item.priceAmount)
            item.waresSkuList.forEach((ctem) => {
              item.waresItemsParamList.push({
                pkWaresSpecsSku: ctem.pkId,
              })
            })
          })
          this.priceAmount = price
          this.totalAmont = price
          let arr = []
          this.goodList.forEach((item) => {
            arr.push({
              channel: item.source,
              pkId: item.pkId,
              quantity: item.quantity,
              waresItemsParamList: item.waresItemsParamList,
            })
          })
          this.postList = arr
          this.allGoodsData.specialArea = 21
          // 获取地址
          // this.getAddressList()
          // 获取运输方式
          this.getTransList()
          // 获取发货方式
          this.getDeliveryList()
        })
    },
    checkAddress() {},
    // 升级编号获取name
    upgradeMemberCodePass(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入会员编号'))
      } else {
        api
          .upgRel({
            upgradeMemberCode: value,
          })
          .then((res) => {
            if (res.code == 200) {
              this.form.upgradeMemberName = res.data.upgradeMemberName
              // this.getMember()
              this.$forceUpdate()
              callback()
            } else {
              callback(new Error(res.msg))
            }
          })
          .catch((err) => {
            callback(new Error(err))
          })
      }
    },
    getAddressList() {
      api.addressList().then((res) => {
        this.addressList = res.data
        this.addressList.forEach((item) => {
          if (item.isDefault == 1) {
            this.moren = item.pkId
            this.checkRadio()
          }
        })
      })
    },
    getUserName() {
      api
        .upgRel({
          upgradeMemberCode: this.form.upgradeMemberCode,
        })
        .then((res) => {
          if (res.code == 200) {
            this.form.upgradeMemberName = res.data.upgradeMemberName
            this.$forceUpdate()
          }
        })
    },
    checkboxChange(e) {
      console.log(
        '%c [ e ]-749',
        'font-size:13px; background:#384d26; color:#7c916a;',
        e
      )
    },
    checkRadio() {
      let arr = []
      this.addressList.forEach((item) => {
        if (item.pkId == this.moren) {
          this.form.recName = item.recName
          this.form.nameList = item.recArea
          this.form.recPhone = item.recPhone
          this.form.recAddress = item.recAddress
          this.form.recProvince = item.recProvince
          this.form.recCity = item.recCity
          if (item.recCounty) {
            this.form.diqu = `${item.recProvinceVal}-${item.recCityVal}-${item.recCountyVal}`
            this.form.recCounty = item.recCounty
          } else {
            this.form.diqu = `${item.recProvinceVal}-${item.recCityVal}`
            this.form.recCounty = ''
          }
          this.defaultCode = [
            item.recProvince,
            item.recCity,
            item.recCounty || '',
          ]
        }
      })
      this.allGoodsData.deliveryWay = this.form.deliveryWay
      this.allGoodsData.transType = this.form.transType
      this.getPostAge()
      this.$forceUpdate()
    },
    getPostAge() {
      let deleteList = []
      this.shoppingArr.forEach((item) => {
        deleteList.push({
          shoppingId: item,
        })
      })
      this.allGoodsData.deleteList = deleteList
      api.queryPostage(Object.assign({specialArea:21},this.allGoodsData,this.form)).then((res) => {
        this.form.postage = res.data.postage
        this.totalAmont =
          parseFloat(this.priceAmount) +
          parseFloat(res.data.postage)
      })
    },
    getTransList() {
      api.transportList().then((res) => {
        let data = res.data.map((item) => {
          return {
            id: item.value,
            label: item.label,
          }
        })
        this.transList = [data]
        if (this.userInfo.pkCountry == 1) {
          this.form.transType = 1
          data.forEach((item) => {
            if (item.id == 1) {
              this.form.transTypeLabel = item.label
            }
          })
        }
      })
    },
    getDeliveryList() {
      api.deliveryList().then((res) => {
        let data = res.data.map((item) => {
          return {
            id: item.value,
            label: item.label,
          }
        })
        this.deliList = [data]
        if (this.userInfo.pkCountry == 1) {
          this.form.deliveryWay = 1
          data.forEach((item) => {
            if (item.id == 1) {
              this.form.deliveryWayLabel = item.label
            }
          })
        }
      })
    },
    sureTrans(e) {
      const { value } = e
      this.form.transType = value[0].id
      this.form.transTypeLabel = value[0].label
      this.isTrans = false
    },
    sureDelivery(e) {
      const { value } = e
      this.form.deliveryWay = value[0].id
      this.form.deliveryWayLabel = value[0].label
      this.isDelivery = false
    },
    getGenerate() {
      api.generate().then((res) => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    goBuy() {
      this.$refs.uForm.validate().then((res) => {
        if (this.agreementShow.length == 0) {
          uni.showToast({
            title: '请阅读并同意购买协议',
            icon: 'none',
            duration: 1500,
          })
          return
        }
        this.isLoading = true
        let deleteList = []
        this.shoppingArr.forEach((item) => {
          deleteList.push({
            shoppingId: item,
          })
        })

        api.confirmShareOrder(
          Object.assign({}, this.form, this.allGoodsData, {
            orderItemsParams: this.postList,
            deleteList: deleteList,
          })
        ).then((res) => {
          this.isLoading = false
          if (res.code == 200) {
            uni.navigateTo({
              url:
                '/pages/pay/index?paramsPost=' +
                JSON.stringify(res.data) +
                '&businessType=1',
            })
          }
        })
      })
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    confirmPopup() {},
    addressData(diqu, obj) {
      this.form.diqu = diqu
      this.form.recProvince = obj.province
      this.form.recCity = obj.city
      this.form.recCounty = obj.county
      this.$forceUpdate()
      this.getPostAge()
      // this.queryAdressPostage()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  .con_top {
    width: 100%;
    position: fixed;
    display: flex;
    background: #005BAC;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    padding: 24rpx 0;
    z-index: 1;
    .con_top_i {
      flex: 1;
      text-align: center;
      .bai {
        width: 52rpx;
        height: 6rpx;
        background: #ffffff;
        margin: 0 auto;
        margin-top: 10rpx;
      }
    }
  }
  .zhan {
    height: 96rpx;
  }
}
.countImg {
  width: 62rpx;
  height: 41rpx;
  margin-right: 20rpx;
}
.context {
}
::v-deep .u-form-item__body {
  padding: 10px 20px;
}
::v-deep .u-input__content {
  padding: 0px 20rpx;
}
::v-deep .u-form-item__body__right__message {
  margin-left: 105px !important;
}
.disFlex {
  display: flex;
  align-items: center;
}
.justBwn {
  width: 100%;
  justify-content: space-between;
}

.goodList {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}
.cover {
  width: 136rpx;
  height: 136rpx;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 10rpx;
}
.goodList_i {
  flex: 1;
}
.goodList_it {
  display: flex;
  padding: 0rpx 0 20rpx 0rpx;

  .goodList_ir {
    margin-left: 20rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .goodList_ib {
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
}
.product_i {
  display: flex;
  align-items: center;
  background: #F6F6F6;
  padding: 28rpx;
  .product_il {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    margin-left: 20rpx;
  }
  img {
    width: 50rpx;
    height: 50rpx;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10rpx;
  }
}
.fen {
  background: #F6F6F6;
  padding: 0 28rpx 28rpx 28rpx;
}
.pad {
  padding: 28rpx;
}
.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  background: #f2f2f2;
  height: 296rpx;
}
.footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 24rpx 40rpx 20rpx;

  .footer_l {
    display: flex;
    justify-content: center;
    margin: 30rpx 0 40rpx 0;
  }
  .footer_r {
    // flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}
.tit1 {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}
.tit2 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #005BAC;
}
.tit3 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}
.tit4 {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.tit5 {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}
.heng {
  height: 20rpx;
  background: #f2f2f2;
}
.subTxt {
  background: #005BAC;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #fff;
  padding: 35rpx 27rpx;
  view {
    border-left: 4px solid #fff;
    padding: 0 20rpx;
  }
}
.address_a {
  padding: 27rpx;
  border-bottom: 2rpx solid #eee;
}
.address_r {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}
.address_rc {
  margin: 6rpx 0;
}
.mr {
  margin-left: 20rpx;
  background: #181818;
  border-radius: 16rpx;
  font-size: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  padding: 6rpx 16rpx;
  border-radius: 20px;
}
</style>