web-base-h5/pages/shareArea/hiOrder.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <!-- <view class="index_header">

    </view> -->

    <view class="context">
      <view class="subTxt">
        <view class="subTxt1">{{ '会员信息' }}</view>
      </view>
      <u-form :model="form" labelWidth="75" :rules="rules" ref="uForm">
        <view class="kuang">
          <u-form-item
            :label="'会员姓名'"
            prop="memberName"
            borderBottom
            required
          >
            <u-input
              :placeholder="'请输入会员姓名'"
              v-model.trim="form.memberName"
              border="none"
            />
          </u-form-item>
          <u-form-item :label="'联系方式'" prop="phone" borderBottom required>
            <u-input
              :placeholder="'请输入联系方式'"
              type="number"
              v-model.trim="form.phone"
              :maxlength="user.pkSettleCountry == 1 ? 11 : 20"
              border="none"
            />
          </u-form-item>

          <!-- <u-form-item :label="'运输方式'" borderBottom>
            <view class="pickerHui">
              <u-input
                v-model="form.transTypeVal"
                disabled
                border="none"
              ></u-input>
            </view>
          </u-form-item> -->
          <!-- <u-form-item :label="'发货方式'" borderBottom>
            <view class="pickerHui">
              <u-input
                v-model="form.deliveryName"
                disabled
                :placeholder="'请选择发货方式'"
                border="none"
              ></u-input>
            </view>
          </u-form-item> -->
        </view>
        <view class="subTxt">
          <view class="subTxt1">收货人信息</view>
        </view>
        <view class="kuang">
          <view class="disFlex tit_t">
            <view></view>
          </view>
          <u-form-item :label="'收货人'" prop="recName" borderBottom required>
            <u-input
              v-model.trim="form.recName"
              :placeholder="'请输入收货人'"
              border="none"
            />
          </u-form-item>
          <u-form-item
            :label="'收货电话'"
            prop="recPhone"
            borderBottom
            required
          >
            <u-input
              v-model.trim="form.recPhone"
              type="number"
              maxlength="20"
              :placeholder="'请输入收货电话'"
              border="none"
            />
          </u-form-item>
          <u-form-item
            :label="'收货地址'"
            prop="diqu"
            @click="getDiqu"
            required
            borderBottom
          >
            <view class="picker">
              <u-input
                v-model.trim="form.diqu"
                :placeholder="'请选收货地址'"
                border="none"
              ></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
          <u-form-item
            required
            :label="'详细地址'"
            prop="recAddress"
            borderBottom
          >
            <u--textarea
              v-model.trim="form.recAddress"
              maxlength="200"
              :placeholder="'请输入详细地址'"
            ></u--textarea>
          </u-form-item>
          <u-form-item :label="'邮费'" borderBottom>
            <u-input disabled v-model="form.postage" />
          </u-form-item>
          <u-form-item :label="'备注'" borderBottom>
            <u--textarea
              v-model="form.remark"
              :placeholder="'请输入备注'"
            ></u--textarea>
          </u-form-item>
        </view>
      </u-form>
      <view class="subTxt">
        <view class="subTxt1">商品信息</view>
      </view>
      <view class="goodList">
        <view class="goodList_i">
          <view class="goodList_it">
            <img :src="allData.cover1" class="cover" alt="" />
            <view class="goodList_ir">
              <view class="goodList_ib">
                <view class="tit1">
                  {{ allData.waresName }}
                </view>
                <view class="tit5"> x{{ allData.quantity }} </view>
              </view>
              <view class="goodList_ib">
                <view class="tit2">
                  {{ allData.waresPrice | numberToCurrency }}
                </view>
                <!-- <view class="tit3">业绩: {{ item.achieve | numberToCurrency | isLocal}}</view> -->
              </view>
            </view>
          </view>
          <view
            v-for="(item, sndex) in allData.specsSkuParamsList"
            :key="sndex"
            class="product_i"
          >
            <img :src="item.cover" alt="" />
            <view class="product_il">
              <view class="tit4"
                >{{ item.productName }} {{ item.specsName }}</view
              >
              <view class="tit5">x{{ item.quantity }}</view>
            </view>
          </view>
          <view class="fen">
            <!-- <view class="disFlex justBwn">
              <view class="tit3">{{'商品业绩'}}</view>
              <view class="tit1">{{ item.achieveAmount | numberToCurrency}}</view>
            </view> -->
            <view class="disFlex justBwn">
              <view class="tit3">{{ '金额小计' }}</view>
              <view class="tit1">{{
                allData.waresPrice | numberToCurrency
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 占空 -->
    <view style="height: 150rpx"></view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_l">
          <view class="disFlex">
            <view class="h1">总价</view>
            <view class="r1">{{ allData.waresPrice | numberToCurrency }}</view>
          </view>
          <!-- <view class="disFlex">
            <view class="h1">{{'业绩'}}</view>
            <view class="l1">¥{{ achiveAmount | numberToCurrency}}</view>
          </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="isCountry"
      @cancel="isCountry = false"
      @confirm="sureCountry"
      :columns="countryList"
      keyName="label"
    ></u-picker>
    <v-address
      ref="address"
      :defaultCode="defaultCode"
      @addressData="addressData"
    ></v-address>
  </view>
</template>

<script>
import address from '@/components/address.vue'
import * as api from '@/config/goods'
import * as regiest from '@/config/regiest'

export default {
  components: {
    'v-address': address,
  },
  data() {
    return {
      specialArea: 7,
      isCountry: false,
      defaultCode: [],
      form: {
        deliveryName: '快递发货',
        deliveryWay: 1,
        postage: 0,
        transType: 1,
        transTypeVal: '陆运',
        pkSettleCountry: '',
        pkSettleCountryLabel: '',
        pkSettleCountryImg: '',
        pkCountry: '',
        pkCountryLabel: '',
        pkCountryImg: '',
      },
      deliList: [],
      diqu: '',
      allData: [],
      goodsNum: 1,
      agreementShow: [],
      priceAmount: 0, //商品总价
      achiveAmount: 0, //总业绩
      totalMont: 0,
      waresList: [],
      isLoading: false,
      centerCodeId: '',
      rules: {
        memberName: [
          {
            required: true,
            message: '请输入会员姓名',
            trigger: ['blur'],
          },
        ],
        phone: [{ validator: this.phonePass, trigger: ['blur'] }],
        recName: [
          {
            required: true,
            message: '请输入收货人',
            trigger: ['change', 'blur'],
          },
        ],
        recPhone: [
          {
            required: true,
            message: '请输入收货电话',
            trigger: ['change', 'blur'],
          },
          {
            min: 6,
            message: '请输入正确联系电话',
            trigger: 'blur',
          },
          {
            max: 20,
            message: '请输入正确联系电话',
            trigger: 'blur',
          },
        ],
        diqu: [
          {
            required: true,
            message: '请选择收货地址',
            trigger: ['change', 'blur'],
          },
        ],
        recAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['change', 'blur'],
          },
        ],
      },
      countryList: [],
      placeParent: '',
      user: '',
    }
  },
  onLoad(options) {
    this.user = uni.getStorageSync('User')
    this.centerCodeId = this.user.memberCode
    this.pkCountry = 1
    this.allData = JSON.parse(options.allData)
    console.log(
      '%c [ this.allData ]-336',
      'font-size:13px; background:#f67b85; color:#ffbfc9;',
      this.allData
    )
    this.placeParent = uni.getStorageSync('placeParent')
    this.allData.quantity = 1
    this.setGoodlistType()
    this.getGenerate()
    this.getCountry()
    // 发货方式
    // this.getDeliveryList()
  },
  onShow() {},
  methods: {
    phonePass(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入联系电话'))
        return false
      }
      if (value.length < 6 || value.length > 20) {
        callback(new Error('请输入正确联系方式'))
        return false
      } else {
        regiest
          .validPhone({
            memberName: this.form.memberName,
            phone: this.form.phone,
            placeParent: this.placeParent,
          })
          .then(res => {
            if (res.code == 200) {
              callback()
            } else {
              callback(new Error(res.msg))
            }
          })
      }
    },
    getCountry() {
      regiest.countryList().then(res => {
        let data = res.data.map(item => {
          return {
            img: item.nationalFlag2,
            id: item.pkId,
            label: item.shortName,
          }
        })
        this.countryList = [data]
        this.countryList[0].forEach(item => {
          if (item.id == this.pkCountry) {
            this.form.pkSettleCountry = item.id
            this.form.pkSettleCountryLabel = item.label
            this.form.pkSettleCountryImg = item.img
            this.form.pkCountry = item.id
            this.form.pkCountryLabel = item.label
            this.form.pkCountryImg = item.img
          }
          // if (item.id == this.userInfo.pkCountry) {
          //     this.form.pkCountry = item.id
          //     this.form.pkCountryLabel = item.label
          //     this.form.pkCountryImg = item.img
          // }
        })
      })
    },
    changeCountry(index) {
      this.isCountry = true
      this.countryIndex = index
    },
    sureCountry(e) {
      console.log(
        '%c [ e ]-418',
        'font-size:13px; background:#b131b9; color:#f575fd;',
        e
      )
      const { value } = e
      this.form.pkCountry = value[0].id
      this.form.pkCountryLabel = value[0].label
      this.form.pkCountryImg = value[0].img
      this.isCountry = false
    },
    // addAdress() {
    //   uni.navigateTo({
    //     url: '/pages/address/index',
    //   })
    // },

    getGenerate() {
      api.generate().then(res => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    goBuy() {
      this.$refs.uForm.validate().then(res => {
        this.isLoading = true
        api
          .fansConfirm(
            Object.assign({}, this.form, {
              waresList: this.waresList,
            })
          )
          .then(res => {
            this.isLoading = false
            if (res.code == 200) {
              uni.navigateTo({
                url: '/pages/pay/hiPay?paramsPost=' + JSON.stringify(res.data),
              })
            }
          })
      })
    },
    setGoodlistType() {
      let carList = {
        quantity: 1,
        pkWares: this.allData.pkId,
        skuList: [],
      }
      console.log(
        '%c [ carList ]-419',
        'font-size:13px; background:#b131b9; color:#f575fd;',
        this.allData
      )
      this.allData.productGroup.forEach(item => {
        carList.skuList.push({
          pkWaresSku: item.pkSkuId,
          quantity: item.quantity,
        })
      })
      this.waresList = [carList]
    },
    checkboxChange() {},
    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.setGoodlistType()
      // this.queryAdressPostage()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
}
.index_header {
  background: #f9f9f9;
  height: 330rpx;
}
.context {
  position: relative;
  // padding: 24rpx;
  // margin-top: -360rpx;
}
.disFlex {
  display: flex;
  align-items: center;
}
.just {
  justify-content: space-between;
  font-size: 12px;
  font-family:
    PingFang SC-Medium,
    PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}
.kuang {
  // margin-top: 20rpx;
  // padding: 20rpx 40rpx;
  background: #fff;
  // box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
  // border-radius: 10px 10px 10px 10px;
  .tit_t {
    justify-content: space-between;
    font-size: 14px;
    font-family:
      PingFang SC-Semibold,
      PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  .lan {
    font-size: 10px;
    font-family:
      PingFang SC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #289fff;
  }
}
.picker {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 6px 9px;
}
.pickerHui {
  display: flex;
  justify-content: space-between;
  width: 100%;

  border-radius: 4px;
  // padding: 6px 9px;
  // background: #f5f7fa;
}
.kuang_t {
  display: flex;
  .kuang_tl {
    flex: 1;
    img {
      width: 40px;
      height: 40px;
      border-radius: 6px 6px 6px 6px;
    }
  }
  .kuang_tr {
    flex: 1;
  }
}
.sTit {
  font-size: 12px;
  font-family:
    PingFang SC-Medium,
    PingFang SC;
  font-weight: 500;
  color: #999999;
  margin: 14rpx 0;
}
.cTit {
  font-size: 13px;
  font-family:
    PingFang SC-Medium,
    PingFang SC;
  font-weight: 500;
  color: #333333;

  margin-bottom: 14rpx;
}
.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx 40rpx 20rpx;
  background: #fff;
  .footer_l {
  }
  .footer_r {
    // flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}
.h1 {
  font-size: 10px;
  font-family:
    PingFang SC-Medium,
    PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 20rpx;
}
.r1 {
  font-size: 18px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #ed4623;
}
.l1 {
  font-size: 16px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #384a8a;
}
.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: #333;
}
.justBwn {
  width: 100%;
  justify-content: space-between;
}
.countImg {
  width: 62rpx;
  height: 41rpx;
  margin-right: 20rpx;
}
.ge {
  padding: 6px 9px;
  border: 0.5px solid #dadbde;
  border-radius: 4px;
  font-size: 16px;
}
.hui {
  background: #f5f7fa;
}
.subTxt {
  background: #005bac;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #fff;
  padding: 35rpx 27rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .subTxt1 {
    border-left: 4px solid #fff;
    padding: 0 20rpx;
  }
  .subTxt2 {
    display: flex;
    align-items: center;
    view {
      margin-left: 20rpx;
    }
  }
}
.goodList {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.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;
}
.u-form-item {
  ::v-deep .u-form-item__body {
    padding: 20rpx 30rpx !important;
  }
}
</style>