web-base-pc/src/views/register/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2023-01-29 17:32:44
-->
<template>
	<div>
		<!-- 用户头 -->
		<personInfo></personInfo>
		<div class="rt dis_flex">
			<div class="rti dis_flex">
				<div :class="['zc', 0 == isClick ? 'zca' : '']" @click="toRegiest(0)">
					{{ '快速注册' }}
				</div>
				<div @click="setHowRegiest(0)" style="cursor: pointer">
					{{ howRegiest == 0 ? '默认' : '设为默认' }}
				</div>
			</div>
			<div class="dis_flex">
				<div :class="['zc', 1 == isClick ? 'zca' : '']" @click="toRegiest(1)">
					{{ '普通注册' }}
				</div>
				<div @click="setHowRegiest(1)" style="cursor: pointer">
					{{ howRegiest == 1 ? '默认' : '设为默认' }}
				</div>
			</div>
		</div>
		<!-- 表单 -->
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" status-icon class="demo-ruleForm">
			<el-row :gutter="40" class="padRow">
				<el-col :span="6">
					<el-form-item :label="'服务中心'" prop="fwzx">
						<!-- <div class="dis_flex"> -->
						<el-input v-model="ruleForm.fwzx" disabled></el-input>
						<!-- </div> -->
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="'申请级别'" prop="pkGradeVal">
						<el-input v-model="ruleForm.pkGradeVal" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<!-- <el-form-item :label="'自然国家'"
                        prop="pkCountry"
                        class="guoqikang">
            <el-select v-model="ruleForm.pkCountry"
                       placeholder=""
                       @change="changeSelection"
                       ref="select"
                       popper-class="guoqi">
              <el-option v-for="item in countryList"
                         :key="item.pkId"
                         :label="item.name"
                         :value="item.pkId">
                <img :src="item.nationalFlag2"
                     class="imgSize" />
                <div class="shortName">{{ item.shortName }}</div>
              </el-option>
            </el-select>
          </el-form-item> -->
					<el-form-item :label="'自然国家'" prop="pkCountry" class="guoqikang">
						<el-select v-model="ruleForm.pkCountry" placeholder="" @change="changeSelection" ref="select"
							popper-class="guoqi">
							<el-option v-for="item in countryList" :key="item.pkId" :label="item.name"
								:value="item.pkId">
								<div class="option_box">
									<el-image class="option_img" :src="item.nationalFlag2"></el-image>
									<span v-text="item.shortName"></span>
								</div>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<!-- <el-form-item :label="'结算国家'"
                        class="guoqikang"
                        prop="pkSettleCountry">
            <el-select v-model="ruleForm.pkSettleCountry"
                       :disabled="true"
                       placeholder=""
                       ref="select1"
                       popper-class="guoqi">
              <el-option v-for="item in countryList"
                         :key="item.pkId"
                         :label="item.name"
                         :value="item.pkId">
                <img :src="item.nationalFlag2"
                     class="imgSize" />
                <div class="shortName">{{ item.shortName }}</div>
              </el-option>
            </el-select>
          </el-form-item> -->
					<el-form-item :label="'结算国家'" class="guoqikang" prop="pkSettleCountry">
						<el-select v-model="ruleForm.pkSettleCountry" :disabled="true" @change="changeSelection1"
							placeholder="" ref="select1" popper-class="guoqi">
							<el-option v-for="item in countryList" :key="item.pkId" :label="item.name"
								:value="item.pkId">
								<div class="option_box">
									<el-image class="option_img" :src="item.nationalFlag2"></el-image>
									<span v-text="item.shortName"></span>
								</div>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="40" class="padRow">
				<el-col :span="6">
					<el-form-item :label="'推荐编号'" prop="parent">
						<el-input v-model="ruleForm.parent" @blur="isClick == 0 ? getQuickReg() : getValidPcode()"
							:placeholder="'请输入推荐编号'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="'推荐姓名'" prop="parentName">
						<el-input v-model="ruleForm.parentName" :placeholder="'请输入推荐姓名'" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="'安置编号'" prop="placeParent">
						<el-input :disabled="pt" v-model="ruleForm.placeParent" :placeholder="'请输入安置编号'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="'安置姓名'" prop="placeParentName">
						<el-input v-model="ruleForm.placeParentName" :placeholder="'请输入安置姓名'" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="40" class="padRow">
				<el-col :span="6">
					<el-form-item :label="'安置位置'" prop="placeDept">
						<!-- <div class="dis_flex"> -->
						<el-select :disabled="pt" v-model="ruleForm.placeDept" :placeholder="'请选择安置位置'">
							<el-option v-for="item in deptOption" :key="item.value" :label="item.name"
								:value="item.value">
							</el-option>
						</el-select>
						<!-- </div> -->
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="userInfo.specialRegistration == 1">
					<el-form-item :label="'会员姓名'" prop="memberName">
						<el-input v-model="ruleForm.memberName" :maxlength="40" :placeholder="'请输入会员姓名'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="userInfo.specialRegistration == 1">
					<el-form-item :label="'联系方式'" prop="phone" v-if="pkCountry == 1">
						<el-input v-model="ruleForm.phone" :maxlength="11" oninput="value=value.replace(/[^\d.]/g,'')"
							:placeholder="'请输入联系方式'"></el-input>
					</el-form-item>
					<el-form-item :label="'联系方式'" prop="phone" v-else>
						<el-input v-model="ruleForm.phone" :maxlength="30" :placeholder="'请输入联系方式'">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="userInfo.specialRegistration == 0">
					<el-form-item :label="'会员姓名'" prop="memberName">
						<el-input v-model="ruleForm.memberName" :maxlength="40" :placeholder="'请输入会员姓名'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="userInfo.specialRegistration == 0">
					<el-form-item :label="'联系方式'" prop="phone">
						<el-input v-model="ruleForm.phone" :maxlength="30" :placeholder="'请输入联系方式'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="pageList.card">
					<el-form-item :label="'证件号码'">
						<el-input v-model="ruleForm.idCard" :placeholder="'请输入证件号码'"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="40" class="padRow">
				<el-col :span="6" v-if="pageList.bankName">
					<el-form-item :label="'银行名称'">
						<el-select v-model="ruleForm.pkBank" :placeholder="'请选择银行名称'">
							<el-option v-for="item in bankLists" :key="item.pkId" :label="item.bankName"
								:value="item.pkId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="pageList.bankNo">
					<el-form-item :label="'银行卡号'">
						<el-input v-model="ruleForm.cardNumber" oninput="value=value.replace(/[^\d.]/g,'')"
							:placeholder="'请输入银行卡号'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="pageList.accountBranch">
					<el-form-item :label="'开户支行'">
						<el-input v-model="ruleForm.subBankName" :placeholder="'请输入开户支行'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="pageList.mail">
					<el-form-item :label="'邮箱'" prop="email">
						<el-input v-model="ruleForm.email" type="email" :placeholder="'请输入邮箱'"></el-input>
					</el-form-item>
				</el-col>
				<!-- </el-row>
      <el-row :gutter="40"
              class="padRow"> -->
				<el-col :span="6">
					<el-form-item :label="'发货方式'" prop="deliveryWay">
						<el-select v-model="ruleForm.deliveryWay" :disabled="pkCountry == 1" @change="selDelivery"
							:placeholder="'请选择发货方式'">
							<el-option v-for="item in deliList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="'运输方式'" :required="isDeliveryWay" prop="transType">
						<el-select v-model="ruleForm.transType" :disabled="pkCountry == 1" :placeholder="'请选择运输方式'">
							<el-option v-for="item in transList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="howSure">
					<el-form-item :label="'创客空间'" prop="makerSpaceMember">
						<el-select v-model="ruleForm.makerSpaceMember" :placeholder="'请选择'">
							<el-option v-for="item in queryCardList" :key="item.pkMember" :label="item.storeName"
								:value="item.pkMember">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="pkCountry != 1">
					<el-form-item :label="'会员店铺'">
						<el-select v-model="ruleForm.pkMemberStore" :placeholder="'请选择会员店铺'">
							<el-option v-for="item in storeList" :key="item.pkId" :label="item.storeName"
								:value="item.pkId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" v-if="pkCountry != 1">
					<el-form-item :label="'仓库'">
						<el-select v-model="ruleForm.pkStorehouse" :placeholder="'请选择仓库'">
							<el-option v-for="item in storehouseList" :key="item.pkId" :label="item.name"
								:value="item.pkId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- 收货人信息 -->
			<div v-show="isDeliveryWay">
				<div class="xian1">
					<div class="title">{{ '收货人信息' }}</div>
					<div class="lan" v-if="pkCountry == userInfo.pkCountry" @click="openAddress">
						{{ '新增收货人地址' }}
					</div>
				</div>
				<el-row :gutter="40" class="padRow">
					<el-col :span="6">
						<el-form-item :label="'收货人'" prop="recName">
							<el-input v-model="ruleForm.recName" :maxlength="40" :placeholder="'请输入收货人'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="pkCountry == 1">
						<el-form-item :label="'联系方式'" prop="recPhone">
							<el-input v-model="ruleForm.recPhone" :maxlength="11"
								oninput="value=value.replace(/[^\d]/g,'')" :placeholder="'请输入联系方式'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-else>
						<el-form-item :label="'联系方式'" prop="recPhone">
							<el-input v-model="ruleForm.recPhone" :maxlength="30"
								:placeholder="'请输入联系方式'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="'收货地址'" class="dizhi" prop="dizhi">
							<el-cascader v-model="ruleForm.dizhi" @change="setDizhi" :options="areaData"
								:props="regionParams" :placeholder="'请选择收货地址'"></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="'详细地址'" prop="recAddress">
							<el-input v-model="ruleForm.recAddress" maxlength="200"
								:placeholder="'请输入详细地址'"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="40" class="padRow">
					<el-col :span="6">
						<el-form-item :label="'邮费'">
							<el-input v-model="ruleForm.postage" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="'备注'">
							<el-input v-model="ruleForm.remark" :placeholder="'请输入备注'"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</div>
		</el-form>
		<!-- 历史地址 -->
		<div v-show="isDeliveryWay && pkCountry == userInfo.pkCountry">
			<div class="nox">
				<div class="title">{{ '历史地址' }}</div>
			</div>
			<div class="local">
				<div :class="['local_i', item.pkId == moren ? 'local_a' : '']" v-for="item in addressList"
					:key="item.pkId">
					<el-radio v-model="moren" @input="checkRadio" :label="item.pkId">{{ }}</el-radio>
					<div class="local1">
						{{ item.recArea }}{{ item.recAddress }}({{ item.recName }} 收)
					</div>
					<div class="local2" v-show="item.isDefault == 1">
						{{ '默认地址' }}
					</div>
					<div class="local2 local3" v-show="item.isDefault == 0" @click="setDefaultAds(item.pkId)">
						{{ '设置默认地址' }}
					</div>
					<div class="local2" @click="changeAds(item.pkId)">
						{{ '编辑' }}
					</div>
					<div class="local3" @click="delAds(item.pkId)">
						{{ '删除' }}
					</div>
				</div>
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="nox">
			<div class="title">{{ '商品信息' }}</div>
		</div>
		<el-table :data="allData" :row-style="{ height: '60px', fontSize: '15px', color: '#333333' }"
			:cell-style="{ padding: '0' }" :fit="true" :header-cell-style="{
        background: '#C8161D',
        color: '#fff',
        fontWeight: 'bold',
        fontSize: '15px',
      }" :row-class-name="tableRowClassName">
			<el-table-column align="center" prop="waresName" width="400" :label="'商品名称'">
				<template slot-scope="scope">
					<!-- <span>{{ scope.row.goodsPrice | numberToCurrency}}</span> -->
					<div class="goods">
						<div class="goods_t">
							<img :src="scope.row.cover1" alt="" />
							<div>{{ scope.row.waresName }}</div>
						</div>
						<div class="goods_tit" v-for="item in scope.row.waresItemsParamList"
							v-if="scope.row.energySilo != 1" :key="item.pkWaresSpecsSku">
							<div class="goods_tit_l">
								<img :src="item.specCover" alt="" />
								<div class="goods_tit_lr">
									<div>
										{{ item.productName }}
									</div>
									<div>x {{ item.quantity }}</div>
								</div>
							</div>
							<div class="goods_tit_r">
								{{ item.skuInfo }}
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="goodsPrice" :label="'商品单价'">
				<template slot-scope="scope">
					<span>{{ scope.row.price | numberToCurrency }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="goodsAchive" :label="'商品业绩' + '(PV)'">
				<template slot-scope="scope">
					<span>{{ scope.row.achieve | numberToCurrency }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="quantity" :label="'商品数量'">
			</el-table-column>
			<el-table-column align="center" prop="spyjxj" :label="'业绩小计' + 'PV'">
				<template slot-scope="scope">
					<span>{{ scope.row.achieveAmount | numberToCurrency }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="pvxj" :label="'金额小计'">
				<template slot-scope="scope">
					<span>{{ scope.row.priceAmount | numberToCurrency }}</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="tab_b">
			<div>
				{{ '商品金额总计' }}:{{ userInfo.currencyIcon
        }}{{ allGoodsData.priceAmount | numberToCurrency }}
			</div>
			<div>
				{{ '邮费' }}:{{ userInfo.currencyIcon
        }}{{ ruleForm.postage | numberToCurrency }}
			</div>
		</div>
		<AddAddress ref="addAddress" @getAdList="getAddressList"></AddAddress>
		<div class="zhan"></div>
		<!-- 购买 -->
		<div class="tfooter">
			<div class="footer_t">
				<div class="footer_tt">
					<div class="dis_flex">
						<div class="f1">{{ '总价' }}:</div>
						<div class="f2">
							{{ userInfo.currencyIcon }}{{ totalAmont | numberToCurrency }}
						</div>
					</div>
					<div class="dis_flex">
						<div class="f1">{{ '业绩' }}:</div>
						<div class="f3">
							{{ allGoodsData.achieveAmount | numberToCurrency }}
						</div>
					</div>
				</div>
				<div class="footer_tt" v-show="
            ruleForm.recAddress &&
            ruleForm.recName &&
            ruleForm.recPhone &&
            ruleForm.nameList
          ">
					<div class="f2 f4">
						{{ '寄送至' }}：{{ ruleForm.nameList }}{{ ruleForm.recAddress }}
					</div>
					<div class="f4">
						{{ '收货人' }}：{{ ruleForm.recName }}
						{{ ruleForm.recPhone }}
					</div>
				</div>
			</div>
			<div class="footer_b">
				<!-- 协议 -->
				<agreement :isShow="agreementShow" ref="agree" @agree="agree"></agreement>
				<div class="btn" @click="submitRegister('ruleForm')">
					{{ '购买' }}
				</div>
			</div>
		</div>
		<!-- 强制阅读协议 -->
		<mustAgreeMent :waresCodeList="waresCodeList"></mustAgreeMent>
		<Pay :isPay="isPay" @closePay="closePay" :paramsPost="paramsPost"></Pay>
	</div>
</template>

<script>
	import personInfo from "@/components/personInfo.vue";
	import AddAddress from "@/components/AddAddress.vue";
	import agreement from "@/components/agreement.vue";
	import mustAgreeMent from "@/components/mustAgreeMent.vue";
	import {
		mapGetters
	} from "vuex";
	import * as api from "@/api/register.js";
	import * as goods from "@/api/goods.js";
	import {
		setTokenMi
	} from "@/util/auth";
	import Pay from "@/components/Pay.vue";
	export default {
		components: {
			personInfo,
			AddAddress,
			agreement,
			Pay,
			mustAgreeMent,
		},
		data() {
			// 验证活动名称的函数
			let validateRecName = (rule, value, callback) => {
				if (this.ruleForm.recName === "" && this.isDeliveryWay) {
					callback(new Error("请输入收货人"));
				} else {
					callback();
				}
			};
			let validateRecPhone = (rule, value, callback) => {
				if (this.ruleForm.recPhone === "" && this.isDeliveryWay) {
					callback(new Error('请输入联系方式'));
				} else if (this.pkCountry == 1 && this.ruleForm.recPhone.length != 11) {
					callback(new Error('请输入正确联系方式'));
				} else if (this.pkCountry == 1 && this.ruleForm.recPhone[0] != 1) {
					callback(new Error('请输入正确联系方式'));
				} else {
					callback();
				}
			};
			let validateRecAddress = (rule, value, callback) => {
				if (this.ruleForm.recAddress === "" && this.isDeliveryWay) {
					callback(new Error('请输入详细地址'));
				} else {
					callback();
				}
			};
			let validateRecDizhi = (rule, value, callback) => {
				if (this.ruleForm.dizhi.length == 0 && this.isDeliveryWay) {
					callback(new Error('请选择收货地址'));
				} else {
					callback();
				}
			};
			let validateRecTransType = (rule, value, callback) => {
				if (this.ruleForm.transType == "" && this.isDeliveryWay) {
					callback(new Error('请选择运输方式'));
				} else {
					callback();
				}
			};
			return {
				agreementData: "",
				isPay: false,
				paramsPost: {},
				isClick: "",
				isDeliveryWay: true,
				pkCountry: "",
				ruleForm: {
					fwzx: "",
					placeDept: "",
					pkGradeVal: "",
					dizhi: [],
					dzName: ["", "", ""],
					postage: "",
					pkCountry: "",
					pkSettleCountry: "",
					parent: "",
					parentName: "",
					placeParent: "",
					placeParentName: "",
					recName: "",
					recPhone: "",
					recAddress: "",
					nameList: "",
					memberName: "",
					phone: "",
					idCard: "",
					pkBank: "",
					cardNumber: "",
					subBankName: "",
					email: "",
					deliveryWay: "",
					transType: "",
				},
				rules: {
					fwzx: [{
						required: true,
						message: "请输入活动名称",
						trigger: "change"
					}, ],
					pkGradeVal: [{
						required: true,
						message: '请输入申请级别',
						trigger: "change"
					}, ],
					memberName: [{
						required: true,
						message: '请输入会员名称',
						trigger: "blur"
					}, ],
					// recName: [{ message: '请输入收件人', trigger: 'blur' }],
					recName: [{
						validator: validateRecName
					}],
					// recPhone: [{ message: '请输入联系方式', trigger: 'blur' }],
					recPhone: [{
						validator: validateRecPhone,
						trigger: "blur"
					}],
					// recAddress: [{ message: '请输入详细地址', trigger: 'blur' }],
					recAddress: [{
						validator: validateRecAddress
					}],
					dizhi: [{
						validator: validateRecDizhi
					}],

					// dizhi: [{ message: '请选择收货地址', trigger: 'change' }],
					parent: [{
						required: true,
						validator: this.parentPass,
						trigger: "blur"
					}, ],
					parentName: [{
						required: true,
						message: '请输入推荐姓名',
						trigger: "change"
					}, ],
					placeParent: [{
						required: true,
						validator: this.placeParentPass,
						trigger: "blur"
					}, ],
					placeParentName: [{
						required: true,
						message: '请输入安置姓名',
						trigger: "change"
					}, ],
					phone: [{
						required: true,
						validator: this.phonePass,
						trigger: "blur"
					}],
					pkCountry: [{
						required: true,
						message: '请选择自然国',
						trigger: "change",
					}, ],
					pkSettleCountry: [{
						required: true,
						message: '请选择结算国',
						trigger: "change",
					}, ],
					deliveryWay: [{
						required: true,
						message: '请选择发货方式',
						trigger: "change",
					}, ],
					placeDept: [{
						required: true,
						validator: this.placeDeptPass,
						trigger: "change",
					}, ],
					makerSpaceMember: [{
						required: true,
						message: '请选择',
						trigger: "change",
					}, ],
					// transType: [
					//   {
					//     required: true,
					//     message: '请选择运输方式',
					//     trigger: 'change',
					//   },
					// ],
					transType: [{
						validator: validateRecTransType
					}],
					email: [{
							required: false,
							trigger: "blur"
						},
						{
							pattern: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
							message: '商品信息',
							trigger: "blur",
						},
					],
				},
				addressList: [],
				moren: "",
				deptOption: [{
						value: 1,
						name: '安置左区',
					},
					{
						value: 2,
						name: '安置右区',
					},
				],
				allGoodsData: {},
				allData: [],
				agreementShow: false,
				countryList: [],
				transList: [
					// {
					//   value: 1,
					//   label: '陆运',
					// },
					// {
					//   value: 2,
					//   label: '空运',
					// },
					// {
					//   value: 3,
					//   label: '海运',
					// },
				],
				deliList: [],
				bankLists: [],
				areaData: [],
				regionParams: {
					label: "name",
					value: "id",
					children: "children",
					expandTrigger: "hover",
				},
				totalPrice: 0,
				totalAchive: 0,
				isLoading: "",
				shoppingArr: [],
				totalAmont: 0,
				pageList: {
					mail: false,
					card: false,
					bankName: false,
					bankNo: false,
					accountBranch: false,
				},
				pt: false,
				howRegiest: 0,
				waresCodeList: [],
				storeList: [],
				storehouseList: [],
				specialArea: "",
				moneySymbol: "",
				selTable: [],
				queryCardList: [],
				howSure: false,
			};
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		mounted() {
			// 获取默认
			this.getHowRegiest();
			this.pkCountry = parseInt(localStorage.getItem("pkCountry"));
			this.specialArea = this.$route.query.specialArea;
			// 数据源
			this.shoppingArr = JSON.parse(localStorage.getItem("allGoods"));
			if (this.$route.query.selTable) {
				let a = JSON.parse(this.$route.query.selTable);
				let b = a.map((item) => {
					return {
						waresCode: item.waresCode,
						quantity: item.quantity,
						waresItemsParamList: item.productGroup,
						waresName: item.waresName,
						achieve: 0,
						achieveAmount: 0,
						price: 0,
						priceAmount: 0,
						cover1: item.cover1,
						energySilo: 1,
					};
				});
				b.forEach((item) => {
					item.waresItemsParamList = item.waresItemsParamList.map((ctem) => {
						return {
							pkWaresSpecsSku: ctem.pkSkuId,
							quantity: ctem.quantity,
						};
					});
				});
				this.selTable = b;
			}

			// 获取购物车详情
			this.getCatDetail();
			// 获取页面权限
			this.getPageList();
			if (this.pkCountry != 1) {
				//获取会员店铺
				this.getStoreList();
				//获取仓库
				this.getStorehouseList();
			}
			// this.howRegiest = localStorage.getItem('howRegiest') || 0
			// 幂等性
			api.generate().then((res) => {
				setTokenMi(res.msg);
			});
			// this.getMoneySymbol()
		},
		methods: {
			getMoneySymbol() {
				goods
					.getCurrency({
						pkCountry: this.pkCountry,
					})
					.then((res) => {
						this.moneySymbol = res.data.symbol;
					});
			},
			getHowRegiest() {
				api.queryDefault().then((res) => {
					this.howRegiest = res.data.displayDefault;
					this.isClick = this.howRegiest;
				});
			},
			getStoreList() {
				api.storeList({
					pkCountry: this.pkCountry
				}).then((res) => {
					this.storeList = res.rows;
				});
			},
			getQueryCard() {
				api
					.queryCard({
						specialArea: this.specialArea,
						parent: this.ruleForm.parent,
					})
					.then((res) => {
						this.queryCardList = res.data;
					});
			},
			getStorehouseList() {
				api.storehouseList({
					pkCountry: this.pkCountry
				}).then((res) => {
					this.storehouseList = res.rows;
				});
			},
			// 设为默认
			setHowRegiest(index) {
				this.howRegiest = index;
				api
					.updateDefault({
						displayDefault: index,
					})
					.then((res) => {});
			},
			getPageList() {
				api.registerList().then((res) => {
					res.data.forEach((item) => {
						if (item.field == "MAILBOX") {
							this.pageList.mail = true;
						} else if (item.field == "CREDENTIALS") {
							this.pageList.card = true;
						} else if (item.field == "BANK_NAME") {
							this.pageList.bankName = true;
						} else if (item.field == "BANK_NO") {
							this.pageList.bankNo = true;
						} else if (item.field == "Account_Branch") {
							this.pageList.accountBranch = true;
						}
					});
				});
			},
			getCatDetail() {
				api
					.shoppingWaresDetail({
						shoppingIds: this.shoppingArr,
						specialArea: this.specialArea,
						pkCountry: this.pkCountry,
					})
					.then((res) => {
						this.allGoodsData = res.data;
						this.waresCodeList = res.data.orderItemsParams.map((item) => {
							return item.waresCode;
						});
						this.allGoodsData.specialArea = this.specialArea;
						this.allGoodsData.pkCountry = this.pkCountry;
						this.allGoodsData.pkSettleCountry = this.pkCountry;
						this.allData = this.allGoodsData.orderItemsParams;
						this.selTable.forEach((item) => {
							this.allData.push(item);
						});
						let howSure = this.allData.some((item) => (item.isMakerGift == 4 || item.isMakerGift == 0));
						this.howSure = howSure;
						this.totalAmont = this.allGoodsData.priceAmount;
						// 服务中心赋值
						this.ruleForm.fwzx = this.userInfo.memberCode;
						// 快速注册/普通注册
						this.toRegiest(this.isClick);

						// 获取地址
						this.getAddressList();
						// 获取国家
						this.getCountry();
						// 获取运输方式
						this.getTransList();
						// 获取发货方式
						this.getDeliveryList();
						// 获取银行
						this.getBank();
						// 获取省市县
						this.getAllArea();
						// 获取会员等级
						this.getMember();
					});
			},
			selDelivery(e) {
				if (e == 2 || e == 3) {
					this.isDeliveryWay = false;
				} else {
					this.isDeliveryWay = true;
				}
			},
			openLoading() {
				this.isLoading = this.$loading({
					lock: true,
					text: "Loading",
					spinner: "el-icon-loading",
					background: "rgba(0, 0, 0, 0.7)",
				});
			},
			toRegiest(val) {
				this.isClick = val;
				this.resetAll();
				if (val == 0) {
					// 推荐编号赋值
					this.ruleForm.parent = this.userInfo.memberCode;
					// 推荐姓名赋值
					this.ruleForm.parentName = this.userInfo.memberName;
					this.pt = false;
					// 从推荐编号获取安置信息
					this.getQuickReg();
				} else {}
				if (this.pkCountry == 1) {
					this.ruleForm.transType = 1;
					this.ruleForm.deliveryWay = 1;
				}
			},
			resetAll() {
				this.ruleForm.parent = "";
				this.ruleForm.parentName = "";
				this.ruleForm.placeParent = "";
				this.ruleForm.placeParentName = "";
				this.ruleForm.placeDept = "";
				this.ruleForm.memberName = "";
				this.ruleForm.phone = "";
				this.ruleForm.idCard = "";
				this.ruleForm.pkBank = "";
				this.ruleForm.cardNumber = "";
				this.ruleForm.subBankName = "";
				this.ruleForm.email = "";
				this.ruleForm.deliveryWay = "";
				this.ruleForm.transType = "";
				this.$nextTick(() => {
					this.$refs.ruleForm.clearValidate();
				});
			},
			closePay(val) {
				if (val) {
					this.isPay = false;
					this.$router.push({
						path: "/vipCenter",
						query: {
							id: 1
						},
					});
				} else {
					this.$confirm('确认取消支付' + "?")
						.then((_) => {
							this.isPay = false;
							this.$router.push({
								path: "/vipCenter",
								query: {
									id: 1
								},
							});
						})
						.catch((_) => {});
				}
			},
			// 注册
			submitRegister(formName) {
				let deleteList = [];
				this.shoppingArr.forEach((item) => {
					deleteList.push({
						shoppingId: item,
					});
				});
				this.$refs[formName].validate((valid) => {
					if (!this.agreementShow) {
						this.$message({
							message: '请阅读并同意购买协议',
							type: "warning",
						});
						return;
					}
					if (valid) {
						this.openLoading();

						let obj = Object.assign({}, this.allGoodsData, this.ruleForm, {
							deleteList: deleteList,
						});
						api
							.confirmRegOrder(obj)
							.then((res) => {
								this.isLoading.close();
								if (res.code == 200) {
									this.paramsPost = Object.assign({
											makerSpaceMember: this.ruleForm.makerSpaceMember
										},
										res.data
									);
									this.isPay = true;
								}
							})
							.catch((err) => {
								this.isLoading.close();
							});
					} else {
						return false;
					}
				});
				// let obj = Object.assign({}, this.allGoodsData[0], this.ruleForm)
				// console.log(
				//   '%c [ obj ]-498',
				//   'font-size:13px; background:#88187e; color:#cc5cc2;',
				//   obj
				// )
			},
			flatten(arr) {
				return arr.reduce((result, item) => {
					return result.concat(
						item,
						Array.isArray(item.children) ? this.flatten(item.children) : []
					);
				}, []);
			},
			setDizhi(e, val) {
				let arr = this.flatten(this.areaData);
				let nameList = "";
				arr.forEach((item) => {
					this.ruleForm.dizhi.forEach((ctem) => {
						if (ctem == item.id) {
							nameList += item.name;
						}
					});
				});
				this.ruleForm.nameList = nameList;
				this.allGoodsData.recProvince = this.ruleForm.dizhi[0];
				this.allGoodsData.recCity = this.ruleForm.dizhi[1];
				this.allGoodsData.recCounty = this.ruleForm.dizhi[2] || "";
				this.allGoodsData.recName = this.ruleForm.recName;
				this.allGoodsData.recPhone = this.ruleForm.recPhone;
				this.allGoodsData.recAddress = this.ruleForm.recAddress;
				this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay;
				this.allGoodsData.transType = this.ruleForm.transType;
				this.getPostAge();
			},
			checkRadio() {
				this.$set(this.ruleForm, "dizhi", []);
				let arr = [];
				this.addressList.forEach((item) => {
					if (this.pkCountry == this.userInfo.pkCountry) {
						if (item.pkId == this.moren) {
							this.ruleForm.recName = item.recName;
							this.ruleForm.nameList = item.recArea;
							this.ruleForm.recPhone = item.recPhone;
							this.ruleForm.recAddress = item.recAddress;
							arr = [
								item.recProvince + "",
								item.recCity + "",
								(item.recCounty || "") + "",
							];
						}
					}
				});
				arr = arr.filter((s) => {
					return s && s.trim();
				});

				this.$set(this.ruleForm, "dizhi", arr);
				this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay;
				this.allGoodsData.transType = this.ruleForm.transType;
				this.allGoodsData.recProvince = this.ruleForm.dizhi[0];
				this.allGoodsData.recCity = this.ruleForm.dizhi[1];
				this.allGoodsData.recCounty = this.ruleForm.dizhi[2];

				this.allGoodsData.recName = this.ruleForm.recName;
				this.allGoodsData.recPhone = this.ruleForm.recPhone;
				this.allGoodsData.recAddress = this.ruleForm.recAddress;
				this.getPostAge();
				this.$forceUpdate();
			},
			getPostAge() {
				let deleteList = [];
				this.shoppingArr.forEach((item) => {
					deleteList.push({
						shoppingId: item,
					});
				});
				this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay;
				this.allGoodsData.transType = this.ruleForm.transType;
				this.allGoodsData.deleteList = deleteList;
				api.queryPostage(this.allGoodsData).then((res) => {
					this.ruleForm.postage = Number(res.data.postage).toFixed(2);
					this.totalAmont =
						parseFloat(this.allGoodsData.priceAmount) +
						parseFloat(res.data.postage);
				});
			},
			getMember() {
				let deleteList = [];
				this.shoppingArr.forEach((item) => {
					deleteList.push({
						shoppingId: item,
					});
				});
				this.allGoodsData.deleteList = deleteList;
				api.memLevel(this.allGoodsData).then((res) => {
					this.ruleForm.pkGradeVal = res.data.pkGradeVal;
				});
			},
			phonePass(rule, value, callback) {
				if (!value) {
					callback(new Error('请输入联系电话'));
				} else {
					api
						.validPhone({
							pkSettleCountry: this.pkCountry,
							memberName: this.ruleForm.memberName,
							phone: this.ruleForm.phone,
							placeParent: this.ruleForm.placeParent,
						})
						.then((res) => {
							if (res.code == 200) {
								callback();
							} else {
								callback(new Error(res.msg));
							}
						});
				}
			},
			parentPass(rule, value, callback) {
				if (!value) {
					callback(new Error('请输入推荐编号'));
				} else {
					// if (this.isClick == 0) {
					//   this.getQuickReg()
					// } else {

					// }
					// this.getValidPcode()
					callback();
				}
			},
			// 安置编号校验
			placeParentPass(rule, value, callback) {
				if (!value) {
					callback(new Error('请输入安置编号'));
				} else {
					api
						.validPPcode({
							parent: this.ruleForm.parent,
							placeParent: value,
							placeDept: this.ruleForm.placeDept,
							pkSettleCountry: this.pkCountry,
						})
						.then((res) => {
							if (res.code == 200) {
								this.ruleForm.placeParentName = res.data.placeParentName;
								this.$forceUpdate();
								callback();
							} else {
								callback(new Error(res.msg));
							}
						});
				}
			},
			placeDeptPass(rule, value, callback) {
				if (!value) {
					callback(new Error('请选择安置位置'));
				} else {
					api
						.validPPcode({
							parent: this.ruleForm.parent,
							placeParent: this.ruleForm.placeParent,
							placeDept: value,
							pkSettleCountry: this.pkCountry,
						})
						.then((res) => {
							if (res.code == 200) {
								this.ruleForm.placeParentName = res.data.placeParentName;
								this.$forceUpdate();
								callback();
							} else {
								callback(new Error(res.msg));
							}
						});
				}
			},
			getAllArea() {
				api.allArea({
					pkCountry: this.pkCountry
				}).then((res) => {
					this.areaData = res.data;
				});
			},
			getBank() {
				api.bankList().then((res) => {
					this.bankLists = res.data;
				});
			},
			getTransList() {
				api.transportList({
					pkCountry: this.pkCountry
				}).then((res) => {
					this.transList = res.data;
				});
			},
			getDeliveryList() {
				api.deliveryList({
					pkCountry: this.pkCountry
				}).then((res) => {
					this.deliList = res.data;
				});
			},
			getQuickReg() {
				api
					.quickReg({
						parent: this.ruleForm.parent,
						specialArea: this.specialArea,
						pkSettleCountry: this.pkCountry,
					})
					.then((res) => {
						if (res.code == 200) {
							this.ruleForm.placeDept = res.data.placeDept;
							this.ruleForm.placeParent = res.data.placeParent;
							this.ruleForm.placeParentName = res.data.placeParentName;
							this.ruleForm.parentName = res.data.parentName;
							if (res.data.isFirst) {
								// 普通注册首单
								this.pt = true;
							} else {
								// 普通注册首单
								this.pt = false;
							}
							// 根据推荐人编号获取安置信息覆盖快速注册信息
							// this.getValidPcode()
							// 获取创客空间
							if (this.howSure) {
								this.getQueryCard();
							}
							this.$forceUpdate();
						}
					});
			},
			getValidPcode() {
				api
					.validPcode({
						parent: this.ruleForm.parent,
						pkSettleCountry: this.pkCountry,
					})
					.then((res) => {
						if (res.code == 200) {
							if (this.isClick == 0) {
								this.ruleForm.placeDept = res.data.placeDept;
								this.ruleForm.placeParent = res.data.placeParent;
								this.ruleForm.placeParentName = res.data.placeParentName;
							} else {
								this.ruleForm.parentName = res.data.parentName;

								if (res.data.isFirst) {
									// 普通注册首单
									this.pt = true;
									this.ruleForm.placeDept = res.data.placeDept;
									this.ruleForm.placeParent = res.data.placeParent;
								} else {
									// 普通注册首单
									this.pt = false;
								}
							}
							// 获取创客空间
							if (this.howSure) {
								this.getQueryCard();
							}
							this.$forceUpdate();
						}
					});
			},
			// 自然国选择国旗
			changeSelection(e) {
				let optionsImg = this.countryList,
					i = optionsImg.findIndex((item) => item.pkId == e);
				this.$refs["select"].$el.children[0].children[0].setAttribute(
					"style",
					`
				background: url(${optionsImg[i].nationalFlag2}) no-repeat; 
				background-position: 10px center; 
				background-size: 28px 19px; 
				text-indent: 30px;
				`
				);
			},
			// 结算国选择国旗
			changeSelection1(e) {
				let optionsImg = this.countryList,
					i = optionsImg.findIndex((item) => item.pkId == e);
				this.$refs["select"].$el.children[0].children[0].setAttribute(
					"style",
					`
				background: url(${optionsImg[i].nationalFlag2}) no-repeat; 
				background-position: 10px center; 
				background-size: 28px 19px; 
				text-indent: 30px;
				`
				);
			},
			getCountry() {
				api.currencyList().then((res) => {
					this.countryList = res.data;
					this.countryList.forEach((item) => {
						if (item.pkId == this.pkCountry) {
							this.ruleForm.pkCountry = item.pkId;
							this.ruleForm.pkSettleCountry = item.pkId;
							// 自然国图片赋值
							this.$refs["select"].$el.children[0].children[0].setAttribute(
								"style",
								`
				background: url(${item.nationalFlag2}) no-repeat; 
				background-position: 10px center; 
				background-size: 28px 19px; 
				text-indent: 30px;
				`
							);
							// 结算国图片赋值
							this.$refs["select1"].$el.children[0].children[0].setAttribute(
								"style",
								`
				background: url(${item.nationalFlag2}) no-repeat; 
				background-position: 10px center; 
				background-size: 28px 19px; 
				text-indent: 30px;
				`
							);
						}
					});
				});
			},
			delAds(id) {
				this.$confirm('确定要删除该收货地址吗' + "?", "", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: "warning",
				}).then(() => {
					api.delAddress(id).then((res) => {
						this.$message({
							type: "success",
							message: '删除成功' + "!",
						});
						this.getAddressList();
					});
				});
			},
			changeAds(id) {
				this.$refs.addAddress.isShowAddress(true, this.areaData, id);
			},
			setDefaultAds(id) {
				api.addressDefault(id).then((res) => {
					this.getAddressList();
				});
			},
			// 同意协议
			agree(val) {
				this.agreementShow = val;
			},
			openAddress() {
				this.$refs.addAddress.isShowAddress(true, this.areaData);
			},
			getAddressList() {
				api
					.addressList({
						pkCountry: this.pkCountry,
					})
					.then((res) => {
						this.addressList = res.data;
						this.addressList.forEach((item) => {
							if (item.isDefault == 1) {
								this.moren = item.pkId;
								this.checkRadio();
							}
						});
						// this.moren = this.addressList[0].pkId
					});
			},
			// 斑马线
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 0) {
					return "warning-row";
				} else if (rowIndex % 2 == 1) {
					return "success-row";
				}
				return "";
			},
		},
	};
</script>

<style lang="scss" scoped>
	.dis_flex {
		display: flex;
		align-items: center;
	}

	.rt {
		border-bottom: 5px solid rgba(7, 7, 7, 0.05);
		padding: 45px 60px 15px 60px;

		.rti {
			margin-right: 80px;
		}

		.zc {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
			margin-right: 20px;
			cursor: pointer;
		}

		.zca {
			font-size: 18px;
			font-weight: bold;
			color: #b42b2a;
		}
	}

	.demo-ruleForm {
		margin-top: 20px;
		overflow: hidden;
	}

	.padRow {
		padding: 0 60px;
	}

	::v-deep .el-input__suffix {
		right: auto;

		.el-input__validateIcon {
			position: absolute;
		}
	}

	::v-deep .el-select {
		width: 100%;
	}

	::v-deep .el-select .el-input__suffix {
		right: 0;
	}

	::v-deep .el-icon-circle-check {
		color: #009900;
	}

	::v-deep .el-form-item__label {
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 28px;
	}

	.xian1 {
		padding: 10px 60px;
		border-bottom: 5px solid rgba(7, 7, 7, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.nox {
		padding: 10px 60px;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.lan {
		font-size: 18px;
		font-weight: 400;
		color: #3499ff;
		cursor: pointer;
	}

	.local {
		padding: 0px 60px;

		.local_i {
			display: flex;
			align-items: center;
			padding: 30px 90px;
		}

		.local_a {
			background: #eeeeee;
			border-radius: 8px 8px 8px 8px;
		}

		.local1 {
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			margin-right: 50px;
		}

		.local2 {
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			margin-right: 70px;
			cursor: pointer;
		}

		.local3 {
			font-size: 14px;
			font-weight: 400;
			color: #f92a28;
			cursor: pointer;
		}
	}

	::v-deep .el-radio {
		margin-right: 0;
	}

	.guoqi {
		// .el-select-dropdown__item {
		//   height: 26px;
		//   // text-align: center;
		//   margin-bottom: 10px;
		//   display: flex;
		//   align-items: center;
		// }
		// .shortName {
		//   margin-left: 10px;
		// }
	}

	.guoqikang {
		::v-deep input {
			// height: 100px;
		}
	}

	.imgSize {
		height: 20px;
	}

	.dizhi {
		::v-deep .el-cascader {
			width: 100%;
		}
	}

	::v-deep .el-cascader .el-input__suffix {
		right: 0;
	}

	.zhan {
		height: 250px;
	}

	.tfooter {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 10;

		.footer_t {
			padding: 5px 60px 15px 60px;
			background: #ededed;

			.footer_tt {
				justify-content: right;
				display: flex;
				margin-top: 10px;
			}
		}

		.footer_b {
			text-align: right;
			padding: 10px 60px 10px 60px;
			background: #fff;
		}
	}

	.f1 {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}

	.f2 {
		font-size: 18px;
		font-weight: 500;
		color: #f43c3a;
		margin-right: 40px;
	}

	.f3 {
		font-size: 14px;
		font-weight: 400;
		color: #384a8a;
	}

	.f4 {
		font-size: 14px;
		font-weight: 400;
		color: #666;
	}

	.btn {
		background: #d61820;
		border-radius: 8px 8px 8px 8px;
		padding: 12px 40px;
		display: inline-block;
		color: #fff;
		font-size: 18px;
		margin-top: 10px;
		cursor: pointer;
	}

	.goods {
		text-align: left;
		padding-top: 20px;
		padding-left: 50px;
	}

	.goods_t {
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #333333;

		// justify-content: center;
		img {
			width: 88px;
			height: 88px;
			margin-right: 10px;
		}
	}

	.goods_tit {
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 10px;
		display: flex;

		img {
			width: 35px;
			height: 35px;
			margin-right: 10px;
		}

		.goods_tit_l {
			flex: 1;
			display: flex;
			align-items: center;
		}

		.goods_tit_r {
			width: 200px;
		}
	}

	.tab_b {
		text-align: right;
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		padding: 20px 60px 0 0;
	}

	.option_box {
		display: flex;
		align-items: center;
	}

	.option_img {
		width: 35px;
		height: 22px;
		margin-right: 7px;
	}
</style>