ngfrontend/src/views/user/welcome-pack.vue

<template>
	<div v-loading="loading">
		<div class="white-box" style="padding: 0 25px; margin-top: 25px;">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="24" :lg="14">
					<el-form ref="form" label-width="180px" :label-position="labelPosition" class="form-page">

						<el-form-item :label="$t('user.welcomePackWay')">
							<el-radio-group v-model="form.decType" @change="decTypeChange">
								<el-radio size="small" label="normal">{{ $t('user.normal') }}</el-radio>
								<el-radio size="small" label="ba">{{ $t('user.BAUpgrade') }}</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-divider content-position="left">{{ $t('user.accountInformation') }}</el-divider>
						<el-form-item :label="$t('user.newMemberCode')">
							<el-input v-model.trim="form.insertUserName" @blur="checkBaUser" :readonly="userReadOnly"></el-input>
						</el-form-item>
						<el-form-item :label="$t('user.entryLevel')">
							<el-select v-model="form.decLv" :placeholder="$t('user.selectEntryLevel')" style="width: 100%;">
								<el-option v-for="item in allDecLevel" :key="item.ID" :label="item.LEVEL_NAME" :value="item.ID"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('user.stockistCode')">
							<el-input v-model.trim="form.decUserName" readonly></el-input>
						</el-form-item>

						<el-form-item>
							<template slot="label">
								{{ $t('user.selectWelcomePack') }}
							</template>
							<el-tabs type="border-card" v-model="decWay" style="position: relative; width: 100%;">
								<el-tab-pane :label="$t('shop.product')" name="2">
									<el-collapse accordion v-model="activeName">
										<el-collapse-item name="product">
											<el-table :data="tableData" :show-header="false" @selection-change="handleSelectionChange">
												<el-table-column type="selection" width="30" align="center" style="top: -30px;"></el-table-column>
												<el-table-column align="center">
													<template slot-scope="{row, $index}">
														<el-container>
															<el-aside width="80px" style=" padding: 0; margin-bottom: 0; background-color: #ffffff;">
																<el-image style="width: 80px; height: 80px" :src="tool.getArImage(row.COVER, '/files/')"></el-image>
															</el-aside>
															<el-main style="padding: 0;">
																<div style="text-align: left; line-height: 25px;">
																	<span style="font-weight: bold; cursor: pointer;" @click="handleProduct(row)">{{ row.GOODS_NAME }}</span><br />
																	<span>{{ row.GOODS_NO }}</span><br />
																	<span style="color: tomato;">{{ $t('shop.productPrice') }}：{{ $t('currency.sign') }} {{ row.SELL_PRICE | amountFilter }}</span><br />
																	<span>{{ $t('shop.productBV') }}：{{ row.PRICE_PV | amountFilter }}</span><br />
																	<span style="display: inline-block; float: right; ">
																	<el-input-number size="mini" v-model="storeNums[$index]" :min="1" :max="Number(row.STORE_NUMS)" @change="handleInputNumber($event, row)"></el-input-number>
																</span>
																	<br />
																</div>
															</el-main>
														</el-container>
													</template>
												</el-table-column>
											</el-table>
										</el-collapse-item>
									</el-collapse>

									<div class="white-box-footer">
										<div class="flex data" style="float: right; display: inline-block; line-height: 30px; font-size: 14px; margin-top: 15px; margin-bottom: 10px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 5px;">
											<div style="margin-right: 1rem; display: inline-block;">{{ $t('shop.productPrice') }}：{{ $t('currency.sign') }} {{ sellPriceSum | amountFilter }}</div>
											<div style="margin-right: 1rem; display: inline-block;">{{ $t('shop.productBV') }}：{{ pricePvSum | amountFilter }}</div>
											<div style="display: inline-block;">{{ $t('shop.taxAmount') }}：{{ $t('currency.sign') }} {{ taxSum }}</div>
										</div>
									</div>
								</el-tab-pane>
							</el-tabs>
						</el-form-item>

						<el-divider content-position="left">{{ $t('atlas.networkInformation') }}</el-divider>
						<el-form-item :label="$t('shop.sponsorCode')">
							<el-input v-model.trim="form.recUserName" @change="handleChkRecUser" :readonly="recReadOnly"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="recRealName" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item :label="$t('atlas.placementCode')">
							<el-input v-model.trim="form.conUserName" @change="handleChkConUser"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="conRealName" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item :label="$t('atlas.placementTree')">
							<el-radio-group border v-model="form.location">
								<el-radio :label="1">{{ $t('atlas.left') }}</el-radio>
								<el-radio :label="2">{{ $t('atlas.right') }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item><!--自动安置区位-->
							<el-row :gutter="5">
								<el-col :xs="24" :sm="24" :lg="12">
									<el-button size="small" type="primary" @click="setAutoPlace('left')">{{ $t('atlas.placementAutoLeft') }}</el-button>
								</el-col>
								<el-col :xs="24" :sm="24" :lg="12">
									<el-button size="small" type="primary" @click="setAutoPlace('right')">{{ $t('atlas.placementAutoRight') }}</el-button>
								</el-col>
							</el-row>
						</el-form-item>

						<el-divider content-position="left">{{ $t('profile.personalInformation') }}</el-divider>
						<el-form-item :label="$t('shop.memberName')">
							<el-input v-model.trim="form.realName"></el-input>
						</el-form-item>
						<el-form-item :label="$t('shop.phoneNumber')">
							<el-input v-model.trim="form.mobile"></el-input>
						</el-form-item>
						<el-form-item :label="$t('user.email')">
							<el-input v-model.trim="form.email"></el-input>
						</el-form-item>
						<el-form-item :label="$t('profile.loginPassword')">
							<el-input v-model.trim="form.password" maxlength="32" :placeholder="$t('profile.enterLoginPassword')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('profile.paymentPassword')">
							<el-input v-model.trim="form.payPassword" maxlength="32" :placeholder="$t('profile.enterPaymentPassword')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('shop.recipientName')">
							<el-input v-model.trim="form.consignee"></el-input>
						</el-form-item>
						<el-form-item :label="$t('shop.phoneNumber')">
							<el-input v-model.trim="form.acceptMobile"></el-input>
						</el-form-item>
						<el-form-item :label="$t('shop.shipping')">
							<el-radio-group v-model="form.way" @change="wayChange">
								<el-radio label="express">{{ $t('shop.delivery') }}</el-radio>
								<el-radio label="pickup">{{ $t('shop.selfPickUp') }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item prop="areaSelected" :label="$t('config.state')">
							<el-cascader :disabled="areaDisabled" size="large" :placeholder="$t('shop.delivery')" :options="regionData" v-model="form.areaSelected" style="width: 100%;"></el-cascader>
						</el-form-item>
						<el-form-item :label="$t('config.detailedAddress')">
							<el-input :disabled="addressDisabled" v-model.trim="form.address"></el-input>
						</el-form-item>
						<el-form-item :label="$t('config.city')">
							<el-input :disabled="addressDisabled" v-model.trim="form.cityName"></el-input>
						</el-form-item>
						<el-form-item :label="$t('config.localGovernmentArea')">
							<el-input :disabled="addressDisabled" v-model.trim="form.lgaName"></el-input>
						</el-form-item>

						<el-divider content-position="left">{{ $t('finance.bankInformation') }}</el-divider>
						<el-form-item :label="$t('finance.bankName')">
							<el-select v-model="form.openBank" :placeholder="$t('finance.selectBank')" style="width: 100%;">
								<el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME" :value="item.BANK_CODE"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('finance.accountName')">
							<el-input v-model.trim="form.bankAddress"></el-input>
						</el-form-item>
						<el-form-item :label="$t('finance.bankAccount')">
							<el-input v-model.number="form.bankNo" maxlength="19"></el-input>
						</el-form-item>

						<el-divider content-position="left">{{ $t('user.payInfo') }}</el-divider>
						<el-form-item :label="$t('shop.paymentMethod')" required>
							<el-radio-group v-model="form.payType" @change="chosePayType">
								<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label" style="margin: 5px;">
									{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">（{{ $t('currency.sign') }} {{ userBalance.cash }}）</span>
								</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item>
							<el-button size="small" type="primary" @click="onSubmit" :loading="submitButtonStat">{{ $t('common.save') }}</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>

		<!-- payStack模态框 -->
		<el-dialog :title="$t('shop.goPay')" :visible.sync="visible" :width="payStackScreenWidth" v-loading="payStackLoading" :before-close="handleClose">
			<section>
				<el-form :model="payForm">
					<el-form-item :label="$t('user.email')" label-width="100px" required>
						<el-input v-model="payForm.email" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item :label="$t('shop.amount')" label-width="100px" required>
						<el-input v-model="payForm.amount" autocomplete="off" readonly></el-input>
					</el-form-item>
				</el-form>
			</section>
			<paystack
				:firstname="payForm.firstname"
				:lastname="payForm.lastname"
				:amount="payForm.amount * 100"
				:email="payForm.email"
				:metadata="payForm.metadata"
				:currency="payForm.currency"
				:paystackkey="payForm.publicKey"
				:reference="reference"
				:channels="channels"
				:callback="processPayment"
				:close="handleClose"
			>
				<el-button type="primary" size="small">{{ $t('shop.goPay') }}</el-button>
			</paystack>
			<el-button type="danger" size="small" class="cancelButton" @click="handleClose" style="margin-left: 10px;">{{ $t('common.cancel') }}</el-button>
		</el-dialog>

		<!-- 倒计时页面 -->
		<el-dialog :title="$t('common.hint')" :visible.sync="payDialog" :width="payStackScreenWidth" :show-close="false" :close="handleOrderList">
			<el-card shadow="always">
				<el-result icon="success" :title="$t('common.successfully')" :subTitle="$t('shop.successOrderTips')">
					<template slot="extra">
						<el-button type="primary" size="medium" @click="handleOrderList">{{ $t('shop.goBack') }}({{ countdown }})</el-button>
					</template>
				</el-result>
			</el-card>
		</el-dialog>

		<!-- 商品详情 -->
		<el-dialog :title="product.GOODS_NO" :visible.sync="visibleProduct" :width="screenWidth" style="margin-top: -95px;">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12" :lg="12">
					<el-image style="width: 100%; height: 100%" :style="imageStyle" :src="tool.getArImage(product.COVER, '/files/')"></el-image>
				</el-col>
				<el-col :xs="24" :sm="12" :lg="12">
					<div style="text-align: left; line-height: 50px; font-size: 16px;">
						<span style="font-weight: bold; font-size: 20px;">{{ product.GOODS_NAME }}</span><br />
						<span style="font-weight: bold; font-size: 15px;">{{ $t('shop.productCode') }}：{{ product.GOODS_NO }}</span><br />
						<span style="color: tomato;">{{ $t('shop.productPrice') }}：{{ $t('currency.sign') }} {{ product.SELL_PRICE }}</span><br />
						<span>{{ $t('shop.productBV') }}：{{ product.PRICE_PV }}</span><br />
						<span>{{ $t('shop.taxRate') }}：{{ product.TAX_RATE / 100 }}</span><br />
						<span>{{ $t('shop.taxAmount') }}：{{ $t('currency.sign') }} {{ product.taxAmount }}</span><br />
						<span>{{ $t('shop.inventory') }}：{{ product.STORE_NUMS }}</span>
					</div>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import {fetchFullInfo, fetchBrandAmbassadorInfo, fetchAutoPlace, fetchWelcomePack, createWelcomePack} from '@/api/user'
import waves from '@/directive/waves'
import {formatAmount, getScreenWidth} from "@/utils"
import Pagination from '@/components/Pagination'
import paystack from 'vue-paystack'
import tool from "@/utils/tool"
import usersInfo from "@/utils/usersInfo"
import {deleteApproachOrder} from "@/api/shop"
import region from "@/store/modules/region"

export default {
  name: 'welcomePack',
  components: { Pagination, paystack },
  directives: { waves },
	filters: {
		bvFilter(row) {
			return tool.calculateBV(row.REAL_PV, row.BUY_NUMS)
		},
		taxAmountFilter(row) {
			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
		},
		priceAmountFilter(row) {
			return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
		},
		amountFilter(amount) {
			return formatAmount(amount)
		},
		statusFilter(status) {
			const statusMap = {
				Unpaid: 'info',
				Paid: 'success'
			}
			return statusMap[status]
		}
	},
	computed: {
		// PayStack混淆串
		reference() {
			let text = ''
			let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
			for (let i = 0; i < 10; i++) {
				text += possible.charAt(Math.floor(Math.random() * possible.length))
			}
			return text
		}
	},
  data() {
    return {
			loading: false,
			tool: tool,

			allGoods: [],
			numList: [],
			categoryType: '',
			sellType: [],
			payList: [],
			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
			payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',

			dialog: false,
			dialogLoading: false,

			multipleSelection: [],
			sellPriceSum: 0.00,
			pricePvSum: 0.00,
			taxSum: 0.00,
			storeNums: [],
			tableData: null,
			payAmount: 0.00,

			cashCurrency: '',
			currency: {},
			pointsSum: 0,
			cashSum: 0,
			pointFreight: 0,
			freeShipping: '',
			goodsId: '',
			goodsNum: '',
			payPassword: '',
			submitButtonStat: false,
			sn: '',
			orderType: '',
			payDialog: false,
			countdown: 5,
			visible: false,
			totalAmount: 0.00,
			freight: 0.00,
			userBalance: {
				cash: 0,
			},

			payType: 'cash',
			payStackLoading: false,
			channels: ["card", "bank", "ussd", "qr"],
			payForm: {
				publicKey: process.env.VUE_APP_BASE_PAY_STACK_PUBLIC_KEY,
				currency: 'NGN',
				firstname: usersInfo.userName(),
				lastname: '',
				email: usersInfo.userEmail(),
				amount: 0,
				orderSn: '',
				metadata: {
					cart_id: '',
					custom_fields: [
						{
							display_name: 'orderSn',
							variable_name: 'orderSn',
							value: this.sn,
						},
						{
							display_name: 'orderType',
							variable_name: 'orderType',
							value: 'baDec'
						},
					]
				},
			},

			addressId: '',
			selfPickUpAddressId: '100000000000000000',
			shippingAddressList: [],

			visibleProduct: false,
			product: {
				GOODS_NAME: '',
				GOODS_NO: '',
				COVER: '',
				SELL_PRICE: 0,
				PRICE_PV: 0,
				TAX_RATE: 0,
				taxAmount: 0,
			},
			imageStyle: 'margin-top: -50px;',

			decWay: '2',
			regionData: region.regionInfo.regionData,
			form: {
				decType: 'normal',
				realName: '',
				decLv: '',
				insertUserName: '',
				decUserName: usersInfo.userName(),
				recUserName: '',
				conUserName: '',
				insertUserIdCard: '',
				consignee: '',
				acceptMobile: '',
				areaSelected: [],
				address: '',
				openBank: '',
				bankAddress: '',
				bankProvince: '',
				bankCity: '',
				bankCounty: '',
				bankNo: '',
				bankAreaSelected: [],
				password: '111111',
				payPassword: '111111',
				mobile: '',
				email: '',
				packageId: '',
				goodsId: [],
				goodsNum: [],
				province: '',
				cityName: '',
				lgaName: '',
				way: 'express',
				payType: '',
				autoPlace: '',
				location: ''
			},

			conRealName: '-',
			recRealName: '-',
			areaDisabled: false,
			addressDisabled: false,

			userReadOnly: true,
			recReadOnly: false,
			allDecLevel: usersInfo.getBaseInfo().decLevels,
			allOpenBank: [],

			activeName: 'product',
    }
  },
  created() {
			let regionInfo = this.$store.getters.regionInfo
		// console.log(this.$store.state.region)
    this.fetchWelcomePack()
  },
  methods: {
		// 会员报单/BA升级
		fetchWelcomePack() {
			this.loading = true
			fetchWelcomePack().then(response => {
				this.form.insertUserName = response.data.userName
				this.allOpenBank = response.data.allOpenBank
				this.allDecPackage = response.data.allDecPackage
				this.allGoods = response.data.allGoods
				this.userBalance = response.data.userBalance
				this.categoryType = 1

				let settingObj = this.allGoods
				for (let i in this.allGoods) {
					this.storeNums[i] = 1
					settingObj[i].goodsNum = 0
				}

				this.tableData = Object.values(settingObj)
				let pageList = this.multipleSelection
				this.$nextTick(function () {
					for (let i in this.tableData) {
						for( let j in  pageList) {
							if( pageList[j].ID === this.tableData[i].ID ) {
								this.$data.storeNums[i] = pageList[j].goodsNum
								this.tableData[i].goodsNum = pageList[j].goodsNum
								break
							}
						}
					}
				})

				// 支付方式
				this.payList = response.data.sellType[0]['sell_type']
				// 支付方式的第一项默认选中
				this.form.payType = Object.values(this.payList)[1]['label']

        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
		// 商品详情
		handleProduct(row) {
			this.product = row
			this.product.taxAmount = tool.calculateTax(row.SELL_PRICE, row.TAX_RATE)
			this.visibleProduct = true
		},
		// 选择商品计数
		handleInputNumber(current, row){
			let pageList = this.multipleSelection
			let selectStatus = false
			for (let i in pageList) {
				if (pageList[i].ID === row.ID) {
					pageList[i].goodsNum = current
					selectStatus = true
					break
				}
			}
			if (selectStatus) {
				this.multipleSelection = pageList
				this.handleSureChange()
			}
		},
		// 统计商品
		handleSureChange() {
			if (this.multipleSelection.length > 0) {
				let accumulatorSellPrice = 0, accumulatorPricePv = 0, accumulatorTax = 0
				this.multipleSelection.forEach(accumulator => {
					accumulatorSellPrice += accumulator.SELL_PRICE * accumulator.goodsNum;
					accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.goodsNum);
					accumulatorTax += tool.calculateTax(Number(accumulator.SELL_PRICE), Number(accumulator.TAX_RATE), Number(accumulator.goodsNum));
				})

				this.sellPriceSum = tool.formatPrice(accumulatorSellPrice)
				this.pricePvSum = tool.formatPrice(accumulatorPricePv)
				this.taxSum = tool.formatPrice(accumulatorTax)

				this.display = true
			} else {
				this.sellPriceSum = this.pricePvSum = this.taxSum = 0.00
				this.display = true
			}
		},
		// 选择商品
		handleSelectionChange(val) {
			let idx = -1, num
			for (let i in this.tableData) {
				for (let v in val){
					if (val[v].ID === this.tableData[i].ID) {
						idx = i
						num = this.storeNums[idx]
						val[v]['goodsNum'] = num
						break
					}
				}
			}
			this.multipleSelection = val
			// 计算统计
			this.handleSureChange()
		},
		// 选择收货地址
		choseAddress (addressId) {
			this.addressId = addressId
			// 设置运费
			this.setFreight()
			// 计算价格
			this.getSumMoney()
		},
		// 切换支付方式
		chosePayType(type) {
			this.payType = type
		},
		// 关闭支付回调
		handleClose() {
			this.$confirm(this.$t('shop.confirmClose')).then(_ => {
				deleteApproachOrder({ orderSn: this.form.orderSn }).then(() => {
					// 关闭支付模态框
					this.visible = false
					// 关闭购物车
					this.visibleShoppingCart = false
					this.submitButtonStat = false
				})
			})
		},
		// 支付成功回调
		processPayment() {
			// 关闭支付页面
			this.visible = false
			this.payStackLoading = false
			// 显示支付成功模态框
			this.payDialog = true;
			// 启动支付成功倒计时
			this.handleCountdown()
		},
		// 倒计时结束跳转
		handleOrderList () {
			this.$router.push({path: `/shop/dec-order-list`})
		},
		// 启动倒计时
		handleCountdown () {
			// 创建定时器
			setInterval(() => {
				// 每隔1秒把time的值减一，赋值给span标签
				this.countdown--
				if (this.countdown === 0) {
					// 倒计时结束,跳转到订单列表
					this.$router.push({path: `/shop/dec-order-list`});
				}
			}, 1000)
		},
		// 会员查询
		handleChkRecUser() {
			this.form.conUserName = ''
			this.conRealName = '-'
			this.form.autoPlace = ''
			if (this.form.recUserName) {
				this.loading = true
				fetchFullInfo({ userName: this.form.recUserName }).then(response => {
					this.recRealName = response.data.REAL_NAME
					this.loading = false
				}).catch(() => {
					this.recRealName = '-'
					this.loading = false
				})
			}
		},
		// 返回方式
		wayChange () {
			if (this.form.way === 'pickup') {
				this.areaDisabled = true
				this.addressDisabled = true
			} else {
				this.areaDisabled = false
				this.addressDisabled = false
			}
		},
		// 会员报单/BA升级
		onSubmit() {
			if (!this.form.decLv) {
				this.$message({
					message: this.$t('profile.selectLevel'),
					type: 'error'
				})
				return false
			}
			// 已选择商品
			this.selectProduct()
			if (this.multipleSelection.length <= 0) {
				this.$message.error(this.$t('shop.chooseTips'))
				return false
			}
			// 余额
			let amountBalance = this.userBalance[this.form.payType] || 0
			// 余额是否充足
			if ((this.form.payType === 'cash') && ((amountBalance - this.payAmount) < 0)) {
				// 账户类型提示信息
				let accountType = this.currency[this.form.payType].name || ''
				this.$message({
					message: accountType + this.$t('shop.balanceNotAllow'),
					type: 'error'
				})
				return false
			}

			this.submitButtonStat = true

			let params = {
				consignee: this.form.consignee,
				acceptMobile: this.form.acceptMobile,
				province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
				city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
				county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
				address: this.form.address,
				decType: this.form.decType,
				insertUserName: this.form.insertUserName,
				decLv: this.form.decLv,
				realName: this.form.realName,
				decUserName: this.form.decUserName,
				conUserName: this.form.conUserName,
				recUserName: this.form.recUserName,
				insertUserIdCard: this.form.insertUserIdCard,
				openBank: this.form.openBank,
				bankAddress: this.form.bankAddress,
				mobile: this.form.mobile,
				email: this.form.email,
				cityName: this.form.cityName,
				lgaName: this.form.lgaName,

				bankProvince: this.form.bankAreaSelected[0] ? this.form.bankAreaSelected[0] : '',
				bankCity: this.form.bankAreaSelected[1] ? this.form.bankAreaSelected[1] : '',
				bankCounty: this.form.bankAreaSelected[2] ? this.form.bankAreaSelected[2] : '',

				bankNo: this.form.bankNo,
				password: this.form.password,
				payPassword: this.form.payPassword,
				packageId: this.form.packageId,
				goodsId: this.form.goodsId,
				goodsNum: this.form.goodsNum,
				location: this.form.location,
				decWay: this.decWay,
				payType: this.form.payType
			}
			createWelcomePack(params).then(response => {
				if (this.form.payType !== 'pay_stack') {
					// 余额支付
					this.$message({
						message: this.$t('common.successfully'),
						type: 'success'
					})
					this.submitButtonStat = false
					this.$router.push({path: `/shop/order-list`})
				} else {
					this.submitButtonStat = false
					this.payForm.orderSn = response.data.SN
					this.payForm.amount = response.data.ORDER_AMOUNT
					this.payForm.metadata.custom_fields[0].value = response.data.SN
					if (this.form.decType === 'ba') {
						this.payForm.metadata.custom_fields[1].value = 'baUpgrade';
					} else {
						this.payForm.metadata.custom_fields[1].value = 'userDec';
					}
					this.visible = true
				}
			})
		},
		// 已选择商品
		selectProduct() {
			this.payAmount = 0
			this.form.goodsId = []
			this.form.goodsNum = []
			this.multipleSelection.map((item) => {
				this.form.goodsId.push(item.ID)
				this.form.goodsNum.push(item.goodsNum)
				this.payAmount += item.goodsNum * item.SELL_PRICE
			})
		},
		// 报单方式
		decTypeChange() {
			if (this.form.decType === 'ba') {
				this.form.insertUserName = ''
				this.userReadOnly = false
			} else {
				this.form.recUserName = ''
				this.recRealName = '-'
				this.recReadOnly = false
				this.userReadOnly = true
				this.fetchWelcomePack()
			}
		},
		// BA会员查询
		checkBaUser() {
			if (this.form.decType === 'ba' && this.form.insertUserName !== '') {
				this.loading = true
				fetchBrandAmbassadorInfo({ userName: this.form.insertUserName }).then(response => {
					this.form.recUserName = response.data.REC_USER_NAME
					this.form.realName = response.data.REAL_NAME
					this.handleChkRecUser()
					this.recReadOnly = true
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			}
		},
		// 查询安置人
		handleChkConUser() {
			if (this.form.conUserName) {
				this.loading = true
				fetchFullInfo( { userName: this.form.conUserName }).then(response => {
					this.conRealName = response.data.REAL_NAME + response.data.isLocation
					this.loading = false
				}).catch(() => {
					this.conRealName = '-'
					this.loading = false
				})
			}
		},
		// 自动设置区位
		setAutoPlace(side) {
			if (this.recRealName !== '-') {
				this.loading = true
				fetchAutoPlace( { userName: this.form.recUserName, side: side }).then(response => {
					this.form.conUserName = response.data.USER_NAME
					this.handleChkConUser()
					this.form.location = 1
					this.form.autoPlace = side
					this.loading = false
				}).catch(() => {
					this.conRealName = '-'
					this.loading = false
				})
			} else {
				this.form.autoPlace = ''
				return false
			}
		},
  }
}
</script>

<style>
.el-table th.el-table__cell > .cell {
	white-space: nowrap;
}

.el-table td.el-table__cell > .cell {
	word-break: keep-all;
	white-space: pre-wrap;
}
.el-tabs--border-card > .el-tabs__content {
	padding: 5px;
}

.el-radio.is-bordered + .el-radio.is-bordered {
	margin: 5px 0;
}
.el-radio--medium.is-bordered {
	margin: 5px 0;
}
</style>