web-retail-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"
              labelAlign="right"
              labelWidth="75"
              :rules="rules"
              ref="uForm">
        <view class="kuang">
          <u-form-item :label="'会员姓名'"
                       prop="memberName">
            <u-input :placeholder="'请输入会员姓名'"
                     v-model.trim="form.memberName" />
          </u-form-item>
          <u-form-item :label="'联系方式'"
                       prop="phone">
            <u-input :placeholder="'请输入联系方式'" type="number"
                     v-model.trim="form.phone"  :maxlength="user.pkSettleCountry == 1?11:20" />
          </u-form-item>
          <u-form-item :label="'自然国家'"
                       @tap="changeCountry(0)">
            <view class="disFlex justBwn ge">
              <view class="disFlex">
                <img class="countImg"
                     :src="form.pkCountryImg"
                     alt="">
                <view>{{ form.pkCountryLabel }}</view>
              </view>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
          <u-form-item :label="'结算国家'">
            <view class="disFlex justBwn ge hui">
              <view class="disFlex">
                <img class="countImg"
                     :src="form.pkSettleCountryImg"
                     alt="">
                <view>{{ form.pkSettleCountryLabel }}</view>
              </view>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
          <u-form-item :label="'运输方式'">
            <view class="pickerHui">
              <u-input v-model="form.transTypeVal"
                       disabled
                       border="none"></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
          <u-form-item :label="'发货方式'">
            <view class="pickerHui">
              <u-input v-model="form.deliveryName"
                       disabled
                       :placeholder="'请选择发货方式'"
                       border="none"></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
        </view>
        <view class="subTxt">
        <view class="subTxt1">收货人信息</view>
      </view>
        <view class="kuang">
          <view class="disFlex tit_t">
            <view></view>
            <!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
          </view>
          <u-form-item :label="'收货人'"
                       prop="recName">
            <u-input v-model.trim="form.recName"
                     :placeholder="'请输入收货人'" />
          </u-form-item>
          <u-form-item :label="'收货电话'"
                       prop="recPhone">
            <u-input v-model.trim="form.recPhone" type="number" maxlength="20"
                     :placeholder="'请输入收货电话'" />
          </u-form-item>
          <u-form-item :label="'收货地址'"
                       prop="diqu"
                       @click='getDiqu'>
            <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 :label="'详细地址'"
                       prop="recAddress">
            <u--textarea v-model.trim="form.recAddress"
            maxlength="200"
                         :placeholder="'请输入详细地址'"></u--textarea>

          </u-form-item>
          <u-form-item :label="'邮费'">
            <u-input disabled
                     v-model="form.postage" />
          </u-form-item>
          <u-form-item :label="'备注'">
            <u--textarea v-model="form.remark"
                         :placeholder="'请输入备注'"></u--textarea>
          </u-form-item>
        </view>
      </u-form>
      <!-- <view class="kuang">
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品主图'}}</view>
            <img :src="allData.cover1"
                 alt="">
            <view class="sTit">{{'商品名称'}}</view>
            <view class="cTit">{{ allData.waresName }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{'产品'}}</view>
            <view v-for="item,index in allData.specsSkuParamsList"
                  :key="index">
              <view class="cTit">
                {{ item.productName }}{{ item.specsName }}*{{ item.quantity }}
              </view>
            </view>
          </view>
        </view>
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品价格'}}(￥)</view>
            <view class="cTit">{{ allData.waresPrice | numberToCurrency }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{'商品数量'}}</view>
            <view class="cTit">{{ allData.quantity }}</view>
          </view>
        </view>
      </view> -->
      <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">PV: {{ 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">{{'商品业绩'}}(PV)</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 class="kuang disFlex">
        <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"
              @click="toAgree"> 《{{'购买协议'}}》</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>
    <agreement ref="agreement"></agreement>
    <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'

import agreement from '@/components/agreement.vue'
export default {
  components: {
    'v-address': address,
    agreement,
  },
  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',
    //   })
    // },
    toAgree() {
      // agreeMent
      this.$refs.agreement.openDig()
    },
    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
        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: [],
      }
      this.allData.specsSkuParamsList.forEach((item) => {
        carList.skuList.push({
          pkWaresSku: item.pkWaresSpecsSku,
          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%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
}
.pickerHui {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  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;
}
</style>