zfire-newmall-admin/src/views/auxiliaryFittings/salesManagement/components/attachmentSalesOrderDetail.vue

<template>
	<div class="s-page">
		<el-page-header @back="goBack" :content="title"></el-page-header>
		<el-divider></el-divider>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>单据信息</span>
			</div>
			<div class="mymain-container">
				<el-form ref="formData" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
					<el-row :gutter="20" justify="start">
						<el-col :span="8" v-if="id">
							<el-form-item label="单据状态">
								<el-input type="text" :value="formData.flag == 'SAVE'?'已保存':formData.flag == 'SUBMIT'?'已提交':formData.flag == 'CANCEL'?'取消订单':formData.flag == 'PAY_NOT_TAKE'?'已支付,未提货':formData.flag == 'PAY_TAKE'?'已支付,已提货':''" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="id">
							<el-form-item label="单据编号">
								<el-input type="text" :value="formData.salesId" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="所属商户" :required="true" >
								<el-input type="text" :value="companyName" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="网点名称" prop="websitId" :required="true">
								<el-select v-model="formData.websit" :disabled="formType == 2" value-key="websitId" @change="changeWebsit" placeholder="请选择" style="width: 100%;">
								    <el-option
								      v-for="item in websitList"
								      :key="item.websitId"
								      :label="item.name"
								      :value="item">
								    </el-option>
								  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="购买方" :required="true" style="padding-bottom: 1px;">
								<el-radio-group v-model="formData.buyPeople" @change="formData.workerName = '';formData.workerMobile=''">
								    <el-radio :disabled="(formData.flag != 'SAVE' && formType!=0) || formData.salesType == '工程'" label="WORKER">内部师傅</el-radio>
								    <el-radio :disabled="(formData.flag != 'SAVE' && formType!=0) || formData.salesType == '工程'" label="CUSTOMER">客户</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<template v-if="formData.buyPeople == 'CUSTOMER'">
							<el-col :span="8">
								<el-form-item label="客户姓名" prop="workerName" :required="true">
									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerName" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="客户联系电话" prop="workerMobile" :required="true">
									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerMobile" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
						</template>
						<template v-else>
							<el-col :span="8">
								<el-form-item label="师傅姓名" prop="worker" :required="true">
									<el-select v-model="formData.worker" :disabled="formType == 2" value-key="nickName" @focus="()=>{
										if(!this.formData.websitId){return this.$message.warning('请先选择网点名称！');}
									}" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
									    <el-option
									      v-for="item in workerList"
									      :key="item.id"
									      :label="item.nickName + '-' + item.mobile"
									      :value="item">
									    </el-option>
									  </el-select>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="8">
								<el-form-item label="师傅身份证" prop="identity" :required="true">
									<el-input type="text" v-model="formData.identity" :disabled="formType == 2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col> -->
							<el-col :span="8">
								<el-form-item label="师傅联系电话" prop="workerMobile" :required="true">
									<el-input type="text" v-model="formData.workerMobile" :disabled="formType == 2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
						</template>
						<el-col :span="8">
							<el-form-item label="销售类型" :required="true" style="padding-bottom: 1px;">
								<el-radio-group v-model="formData.salesType" @change="changeSale">
								    <el-radio :disabled="formData.flag != 'SAVE' && formType!=0" label="零售">零售</el-radio>
								    <el-radio :disabled="formData.flag != 'SAVE' && formType!=0" label="工程">工程</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="6" v-if="id">
							<el-form-item label="单据金额">
								<el-input type="text" :value="formData.totalAmount" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="订单来源" prop="source" :required="true">
								<el-select v-model="formData.source" :disabled="true" placeholder="请选择" style="width: 100%;">
								    <el-option
								      v-for="item in [{name: '在线订单',id: 'ONLINE'},{name: '自建订单',id: 'SELF'}]"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id">
								    </el-option>
								  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="支付方式" prop="payType" :required="true">
								<el-radio-group v-model="formData.payType">
								    <el-radio :disabled="formType == 2" label="CASH">现金</el-radio>
								    <el-radio :disabled="formType == 2" label="WECHAT">微信</el-radio>
									<el-radio v-if="formData.salesType == '工程'" :disabled="formData.flag != 'SAVE' && formType!=0" label="ENGIN">工程支付</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="2" v-if="formData.flag == 'SUBMIT' && formData.payType == 'WECHAT'">
							<div style="height: 32px;display: flex;align-items: center;cursor: pointer;" @click="wxPay()">微信支付<i class="el-icon-full-screen"></i></div>
						</el-col>
						<el-col :span="2" v-else>
							<div style="opacity: 0;">隐藏</div>
						</el-col>
						<template v-if="formData.salesType == '工程'">
							<el-col :span="8">
								<el-form-item label="工程名称" prop="project" :required="true">
									<el-select v-model="formData.project" value-key="id" @change="(e)=>{
											formData.orderEnginBaseId = e.id
										}" :disabled="formData.flag != 'SAVE' && formType!=0" placeholder="请选择" style="width: 100%;">
									    <el-option
										  v-for="(item,index) in projectList"
									      :key="index"
									      :label="item.projectName"
									      :value="item">
									    </el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="工程编号" :required="true">
									<el-input type="text" :disabled="true" v-model="formData.project.projectNo" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="负责人" :required="true">
									<el-input type="text" :disabled="true" v-model="formData.project.manger" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="联系电话" :required="true">
									<el-input type="text" :disabled="true" v-model="formData.project.mobile" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="项目时间" :required="true">
									<el-date-picker
										style="width:50%"
									    v-model="formData.project.startTime"
									    type="date"
										:disabled="true"
										value-format="yyyy-MM-dd"
									    placeholder="开始日期">
									</el-date-picker>
									<el-date-picker
										style="width:50%"
									    v-model="formData.project.endTime"
									    type="date"
										:disabled="true"
										value-format="yyyy-MM-dd"
									    placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="项目地址" prop="province" :required="true">
									<el-row>
										<el-col :span="5" style="margin-right: 12px;">
											<el-input type="text" v-model="formData.project.province" disabled placeholder="请选择省"></el-input>
										</el-col>
										<el-col :span="5" style="margin-right: 12px;">
											<el-input type="text" v-model="formData.project.city" disabled placeholder="请选择市"></el-input>
										</el-col>
										<el-col :span="5" style="margin-right: 12px;">
											<el-input type="text" v-model="formData.project.area" disabled placeholder="请选择区"></el-input>
										</el-col>
										<el-col :span="8">
											<el-input type="text" v-model="formData.project.street" disabled placeholder="请选择街道"></el-input>
										</el-col>
									</el-row>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="" prop="address">
									<el-row :gutter="20">
										<el-col :span="24">
											<el-input type="text" v-model="formData.project.address" :disabled="true" placeholder="详细地址"></el-input>
										</el-col>
										<!-- <el-col :span="2">
											<geographicalPosi :disabled="formType==2" :formData="this.formData" @selectPosi="selectAddress"/>
										</el-col> -->
									</el-row>
								</el-form-item>
							</el-col>
						</template>
						<el-col :span="6" v-if="id">
							<el-form-item label="制单人">
								<el-input type="text" :value="formData.createBy" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" v-if="id">
							<el-form-item label="制单时间">
								<el-input type="text" :value="formData.createTime" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" v-if="id">
							<el-form-item label="审核人">
								<el-input type="text" :value="formData.confirmBy" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" v-if="id">
							<el-form-item label="审核时间">
								<el-input type="text" :value="formData.confirmTime" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="备注">
								<el-input type="textarea" :rows="4" v-model="formData.remark" :disabled="formType == 2" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>配件信息</span>
			</div>
			<el-button size="small" v-if="formData.flag == 'SAVE' || formType==0" type="primary" @click="add()">添加</el-button>
			<div class="table">
				<el-table :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
					<el-table-column label="配件名称" align="center">
						<template slot-scope="scope">
							<el-select v-model="scope.row.goods" @change="changeGoods" value-key="goodsId" :disabled="isEdit != scope.$index || formType == 2" placeholder="请选择" style="width: 100%;">
							    <el-option
							      v-for="item in scope.row.goodsList"
							      :key="item.goodsId"
							      :label="item.goodsName"
							      :value="item">
							    </el-option>
							  </el-select>
						</template>
					</el-table-column>
					<el-table-column prop="goods.goodsSalesUnit" align="center" label="单位" ></el-table-column>
					<el-table-column prop="" align="center" label="数量" >
						<template slot-scope="scope">
							<el-input type="number" v-model="scope.row.salesQty" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="goods.goodsCode" align="center" label="配件编码"></el-table-column>
					<el-table-column prop="goods.brandRelaName" align="center" label="适用品牌"></el-table-column>
					<el-table-column prop="goods.productRelaName" align="center" label="适用产品大类"></el-table-column>
					<el-table-column prop="" align="center" label="销售价格">
						<template slot-scope="scope">
							<el-input type="number" v-model="scope.row.price" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="goods.saleAmount" align="center" label="销售金额" >
						<template slot-scope="scope" v-if="scope.row.salesQty && scope.row.price">
							{{(scope.row.price * 100) * scope.row.salesQty / 100}}
						</template>
					</el-table-column>
					<el-table-column prop="goods.qty" align="center" label="库存数量"></el-table-column>
					<el-table-column label="操作" align="right" width="140">
						<template slot-scope="scope" v-if="formType != 2">
							<el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index">编辑</el-button>
							<el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
		<el-card class="box-card" v-if="formData.salesType == '工程' && formType != 0 && formData.flag == 'SAVE'">
			<div slot="header" class="clearfix">
				<span>收款信息</span>
			</div>
			<div class="mymain-container">
				<el-form ref="formData1" :rules="rules1" :model="formData1" label-width="110px" size="small" label-position="left">
					<el-row :gutter="20" justify="start">
						<el-col :span="24">
							<el-form-item label="收款金额">
								<el-input type="text" style="width: 30%" v-model="formData1.price" placeholder="请输入"></el-input>
								<span style="color: #FF8F47;margin-left: 10px">注:操作【提交】时，系统方可记录收款信息</span>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="收款凭证">
								<ImageUpload :fileList="formData1.fileUrl" :limit="1" :isEdit="formType !== 2" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="备注">
								<el-input type="textarea" :rows="4" v-model="formData1.remark" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card" v-if="formData.salesType == '工程' && formType != 0">
			<div slot="header" class="clearfix">
				<span>收款记录</span>
			</div>
			<div class="table">
				<el-table :data="collectionList" element-loading-text="Loading" border fit highlight-current-row stripe>
					<el-table-column prop="status" label="收款结果" align="center">
						<template slot-scope="scope">
							{{scope.row.status == 'NO'?'未付款':scope.row.status == 'WAIT'?'部分付款':scope.row.status == 'OK'?'已完成':''}}
						</template>
					</el-table-column>
					<el-table-column prop="price" label="收款金额" align="center"></el-table-column>
					<el-table-column prop="" align="center" label="收款凭证" >
						<template slot-scope="scope" v-if="scope.row.urlPrc">
							<el-image style="width: 80px;" :src="scope.row.urlPrc" fit="scale-down" :preview-src-list="[scope.row.urlPrc]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center"></el-table-column>
					<el-table-column prop="updateBy" align="center" label="收款人" ></el-table-column>
					<el-table-column prop="updateTime" align="center" label="收款时间" ></el-table-column>
				</el-table>
			</div>
		</el-card>
		<div class="page-footer">
			<div class="footer">
				<el-button v-if="formType == 0 || (formType == 1 && formData.flag == 'SAVE')" size="small" type="primary" @click="save()">保存</el-button>
				<el-button v-if="formType != 0 && formData.flag == 'SAVE'" size="small" type="primary" @click="submit()">提交</el-button>
				<el-button v-if="formData.flag == 'PAY_NOT_TAKE'" size="small" type="primary"  @click="confirm()">确认收货</el-button>
				<el-button v-if="formData.flag == 'SUBMIT' && formData.payType == 'WECHAT'" size="small" type="primary" @click="wxPay()">微信支付</el-button>
				<el-button size="small" type="info" @click="goBack">返回</el-button>
			</div>
		</div>
		<el-dialog title="微信支付" :visible.sync="isPay" width="50%" :close-on-click-modal="false" :modal-append-to-body="false" @close="payCodeUrl = '';clear()">
			<h3 style="text-align: center;">扫二维码支付</h3>
		<!-- 			<el-image :src="payCodeUrl" fit="fit"></el-image> -->
			<div
			  ref="payQRCode"
			  style="display: flex; justify-content: center;"
			/>
			<div style="color: #EA8000;text-align: center;margin-top: 20px;">注：支付成功后，方可操作确认提货！</div>
			<div style="display: flex;justify-content: flex-end;margin-top: 30px;">
				<el-button size="mini" type="text" @click="isPay = false;clear()">取消</el-button>
				<el-button size="small" type="primary"  @click="isPay = false;getDetail()">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getWebsit } from "@/api/customerManagement";
	import QRCode from "qrcodejs2";
	import { lbsAmapRegion } from '@/api/common.js'
	import geographicalPosi from '@/components/geographicalPosi/index.vue'
	import ImageUpload from '@/components/file-upload'
	import { getWorker, getCategory, getGoods, getDetail, add, edit, confirm, submit, getCode, getProject, getProjectCollectionList } from "@/api/auxiliaryFittings/auxiliarySalesOrder";
	export default {
		components: {geographicalPosi,ImageUpload},
		props: ['id','title','formType'],
		data() {
			return {
				dataList: [],
				websitList: [],
				workerList: [],
				projectList: [],
				collectionList: [],
				isPay: false,
				is_submit: true,
				payCodeUrl: '',
				formData: {
					websit: {},
					websitId: '',
					websitName: '',
					file_url: [],
					salesId: '',
					flag: '',
					createBy: '',
					createTime: '',
					confirmBy: '',
					confirmTime: '',
					worker: {},
					workerName: '',
					workerId: '',
					identity: '',
					workerMobile: '',
					source: 'SELF',
					payType: '',
					totalAmount: '',
					remark: '',
					buyPeople: 'WORKER',
					salesType: '零售',
					province: '',
					provinceId: '',
					city: '',
					cityId: '',
					area: '',
					areaId: '',
					street: '',
					streetId: '',
					address: '',
					lat: '',
					lng: '',
					project: {},
					orderEnginBaseId: '',
				},
				formData1: {
					price: '',
					remark: '',
					fileUrl: []
				},
				provinceList: [],
				cityList: [],
				areaList: [],
				streetList: [],
				isEdit: 0,
				timer: '',
				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
				rules: {
					websitId: [
						{ required: true, message: '请选择网点', trigger: 'change' }
					],
					worker: [
						{ required: true, message: '请选择师傅', trigger: 'change' }
					],
					source: [
						{ required: true, message: '请选择订单来源', trigger: 'change' }
					],
					payType: [
						{ required: true, message: '请选择订单来源', trigger: 'change' }
					],
					identity: [
						{ required: true, message: '请输入师傅身份证', trigger: 'blur' },
						{ pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
					],
					workerMobile: [
						{ required: true, message: '请输入联系电话', trigger: 'blur' },
						{ required: true, message: '请输入联系电话', trigger: 'change' },
						{ pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
					],
					workerName: [
						{ required: true, message: '请输入客户姓名', trigger: 'blur' }
					],
				}
			};
		},
		computed: {},
		created() {
			if(this.id){
				this.getDetail()
			}
			this.getinitlbslist()
			this.getWebsit()
			this.getProject()
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('back');
			},
			async getDetail(){
				const that = this
				getDetail({salesId: this.id}).then(async res => {
					Object.assign(this.formData, res.data, {
						websit: {websitId: res.data.websitId,name: res.data.websitName},
						worker: {nickName: res.data.workerName,userId: res.data.workerId},
						project: {id: res.data.orderEnginBaseId,projectName: res.data.projectName,projectNo: res.data.projectNo,manger: res.data.manger,mobile: res.data.mobile,startTime: res.data.startTime,endTime: res.data.endTime,province: res.data.province,provinceId: res.data.provinceId,city: res.data.city,cityId: res.data.cityId,area: res.data.area,areaId: res.data.areaId,street: res.data.street,streetId: res.data.streetId,address: res.data.address,lat: res.data.lat,lng: res.data.lng}
					})
					this.getWorker()
					if(res.data.salesType == '工程'){
						this.getProjectCollectionList(res.data.orderEnginBaseId)
					}
					for(var item of res.data.items){
						var ress = await that.getGoods(item.goodsName, 1)
						item.goods = {...ress.data,oldPrice:ress.data.price}
						item.goodsList = ress.data ? [{...ress.data,oldPrice:ress.data.price}] : []
					}
					this.dataList = res.data.items
				})
			},
			getWebsit(){
				getWebsit({type: 'C'}).then(res => {
					this.websitList = res.data
				})
			},
			changeWebsit(e){
				this.formData.websitId = e.websitId
				this.formData.websitName = e.name
				this.getWorker()
			},
			getProject(){
				getProject({
					pageNum: 1,
					pageSize: -1,
					params:[]
				}).then(res => {
					this.projectList = res.data.records
				})
			},
			getProjectCollectionList(orderEnginBaseId){
				getProjectCollectionList({orderEnginBaseId,goodsType: 'P'}).then(res => {
					this.collectionList = res.data
				})
			},
			async getGoods(goodsName,type){
				const that = this
				if(type == 1){
					return new Promise((resolve, reject) => {
						getGoods({websitId: this.formData.websitId,type: 'P',goodsName: goodsName,orderEnginBaseId: this.formData.orderEnginBaseId,saleType: this.formData.salesType}).then(res => {
							resolve({
								data: res.data[0]
							})
						})
					})
				}else{
					getGoods({websitId: this.formData.websitId,type: 'P',orderEnginBaseId: this.formData.orderEnginBaseId,saleType: this.formData.salesType}).then(res => {
						that.dataList[that.isEdit].goodsList = res.data
						console.log(this.dataList)
					})
				}
			},
			getWorker(){
				getWorker({pageNum: 1,pageSize: -1,params: [{param: 'b.websit_id',compare: '=',value: this.formData.websitId}]}).then(res => {
					this.workerList = res.data.records
				})
			},
			changeWorker(e){
				this.formData.identity = e.idCard
				this.formData.workerMobile = e.mobile
				this.formData.workerId = e.userId
				this.formData.workerName = e.nickName
			},
			workerBlur(e){
				this.formData.worker = e.target.value
				this.$forceUpdate()
			},
			changeGoods(e){
				console.log(e)
				this.dataList[this.isEdit].goodsId = e.goodsId
				this.dataList[this.isEdit].goodsName = e.goodsName
				this.dataList[this.isEdit].goodsSalesUnit = e.goodsSalesUnit
				this.dataList[this.isEdit].brandRelaName = e.brandRelaName
				this.dataList[this.isEdit].productRelaName = e.productRelaName
				this.dataList[this.isEdit].price = e.price
				this.dataList[this.isEdit].goodsCode = e. goodsCode
				this.dataList[this.isEdit].qty = e.qty
				this.dataList[this.isEdit].itemSourceType = e.itemSourceType
				this.dataList[this.isEdit].itemSourceId = e.itemSourceId
				this.dataList[this.isEdit].normType = e.normType
			},
			add(){
				if(this.dataList.length != 0){this.isEdit = 0}
				this.dataList.unshift({
					goodsList: [],
					goods: {},
					goodsId: '',
					goodsName: '',
					goodsSalesUnit: '',
					brandRelaName: '',
					productRelaName: '',
					goodsCode: '',
					price: '',
					saleAmount: '',
					salesQty: 1,
					qty: '',
					goodsType: 'P',
					itemSourceType: '',
					itemSourceId: '',
					normType: ''
				})
				this.getGoods()
			},
			del(index){
				if(index <= 1){this.isEdit == 0}else{this.isEdit -= 1}
				this.dataList.splice(index,1)
			},
			submit(){
				this.$confirm(`请确定是否提交订单, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					submit({
						salesId: this.formData.salesId,
						price: this.formData1.price,
						urlPrc: this.formData1.fileUrl.length> 0 ?this.formData1.fileUrl[0].url: '',
						remark: this.formData1.remark
					}).then(res => {
						if(res.code == 200){
							this.$message.success('提交成功！')
							if(this.formData.payType == 'WECHAT'){
								this.wxPay()
							}else{
								this.goBack()
							}
						}
					})
				});
			},
			confirm(){
				this.$confirm(`请确定是否确认提货, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					confirm({
						salesId: this.formData.salesId
					}).then(res => {
						if(res.code == 200){
							this.$message.success('审核成功！')
							this.goBack()
						}
					})
				});
			},
			checkPay(){
				this.timer = setInterval(()=>{
					getDetail({salesId: this.id}).then(res => {
						if(res.data.payFlag == 'YES'){
							this.$refs.payQRCode.innerHTML = '';
							this.clear()
							this.$message.success('支付成功！')
							this.goBack()
						}
					})
				},3000)
			},
			clear(){
				clearInterval(this.timer)
			},
			wxPay(){
				if(!this.is_submit){
					return false
				}
				this.is_submit = false
				setTimeout(()=>{
					this.is_submit = true
				},2000)
				getCode({
					salesId: this.formData.salesId
				}).then(res => {
					if(res.code == 200){
						this.payCodeUrl = res.data.codeUrl
						this.$refs.payQRCode.innerHTML = '';
						this.$nextTick(() => {
						  this.payUrl = res.data.codeUrl;
						  new QRCode(this.$refs.payQRCode, {
						    text: res.data.codeUrl,
						    width: 200,
						    height: 200,
						    colorDark: "#333333", // 二维码颜色
						    colorLight: "#ffffff", // 二维码背景色
						    correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
						  });
						  this.checkPay()
						});
					}
				})
				this.isPay = true
			},
			save(){
				this.$refs.formData.validate((valid, invalidFields, errLabels) => {
					if (valid) {
						if(this.formType == 0){
							add({
								goodsType: 'P',
								source: this.formData.source,
								payType: this.formData.payType,
								remark: this.formData.remark,
								websitId: this.formData.websitId,
								websitName: this.formData.websitName,
								workerName: this.formData.workerName,
								workerId: this.formData.workerId,
								identity: this.formData.identity,
								workerMobile: this.formData.workerMobile,
								buyPeople: this.formData.buyPeople,
								items: this.dataList,
								orderEnginBaseId: this.formData.orderEnginBaseId,
								salesType: this.formData.salesType
							}).then(res => {
								if(res.code == 200){
									this.$message.success('提交成功！')
									this.goBack()
								}
							})
						}else if(this.formType == 1){
							edit({
								salesId: this.formData.salesId,
								goodsType: 'P',
								source: this.formData.source,
								payType: this.formData.payType,
								remark: this.formData.remark,
								websitId: this.formData.websitId,
								websitName: this.formData.websitName,
								workerName: this.formData.workerName,
								workerId: this.formData.workerId,
								identity: this.formData.identity,
								workerMobile: this.formData.workerMobile,
								buyPeople: this.formData.buyPeople,
								items: this.dataList,
								orderEnginBaseId: this.formData.orderEnginBaseId,
								salesType: this.formData.salesType
							}).then(res => {
								if(res.code == 200){
									this.dataList = []
									this.$message.success('提交成功！')
									this.goBack()
								}
							})
						}
					}
				})
			},
			changeSale(){
				this.formData.buyPeople = 'CUSTOMER'
			},
			getinitlbslist() {
			  // 初始化请求省市区街道下拉选项数据
			  lbsAmapRegion({ pid: 0 }).then(res => {
			    this.provinceList = res.data
			    // 创建工单时获取ip地址定位赋值
			    if (!this.id && this.$IpAdd.province) {
			      var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
			      if (item) {
			        this.formData.provinceId = item.id
			        this.formData.province = item.name
			      }
			    }
			    if (this.formData.provinceId) {
			      lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
			        this.cityList = res.data
			        // 创建工单时获取ip地址定位赋值
			        if (!this.id && this.$IpAdd.city) {
			          var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
			          if (item2) {
			            this.formData.cityId = item2.id
			            this.formData.city = item2.name
			          }
			        }
			        if (this.formData.cityId) {
			          lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
			            this.areaList = res.data
			          })
			        }
			        if (this.formData.areaId) {
			          lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
			            this.streetList = res.data
			          })
			        }
			      })
			    }
			  })
			},
			selectAddress(data){
				this.formData.lng = data.center[0]
				this.formData.lat = data.center[1]
				// 获取定位的省市区街道
				var { province, city, district, township } = data.data.addressComponent
				// 获取选中省名称id
				var { id, name } = this.provinceList.find(item => item.name === province)
				this.formData.provinceId = id
				this.formData.province = name
				// 请求市选项
				lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
				  // 赋值市选项
				  this.cityList = res.data
				  // 获取选中市名称id
				  var { id, name } = res.data.find(item => item.name === city)
				  this.formData.cityId = id
				  this.formData.city = name
				  // 请求区选项
				  lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
				    // 赋值区选项
				    this.areaList = res.data
				    // 获取选中区名称id
				    var { id, name } = res.data.find(item => item.name === district)
				    this.formData.areaId = id
				    this.formData.area = name
				    // 请求街道选项
				    lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
				      // 赋值街道选项
				      this.streetList = res.data
				      // 获取选中街道名称id
				      var { id, name } = res.data.find(item => item.name === township)
				      this.formData.streetId = id
				      this.formData.street = name
				      // 赋值GPS详细地址
				      this.formData.address = data.name
				    })
				  })
				})
			},
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.s-page {
		padding: 20px;
		background-color: #ffffff;
	}
	.page-footer {
		height: 70px;
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		background: #fff;
		padding: 15px 40px;
		box-sizing: border-box;
		transition: all 0.28s;
		text-align: right;
		box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
	
		&.hideSidebar {
			margin-left: 54px;
			width: calc(100vw - 54px);
		}
	
		&.openSidebar {
			margin-left: 210px;
			width: calc(100vw - 210px);
		}
	
		.tips {
			font-size: 12px;
			color: red;
			margin-top: 10px;
		}
	}
</style>