1058 lines
29 KiB
Vue
1058 lines
29 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: 王三华
|
||
* @Date: 2023-05-16 13:54:04
|
||
-->
|
||
<!--
|
||
* @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>
|
||
</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="upgradeMemberCode">
|
||
<el-input v-model="ruleForm.upgradeMemberCode"
|
||
placeholder="请输入会员编号"></el-input>
|
||
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="会员姓名"
|
||
prop="upgradeMemberName">
|
||
<el-input v-model="ruleForm.upgradeMemberName"
|
||
placeholder="请输入会员姓名"
|
||
disabled></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="发货方式"
|
||
prop="deliveryWay">
|
||
<el-select v-model="ruleForm.deliveryWay"
|
||
@change="selDelivery"
|
||
:disabled="this.userInfo.pkCountry == 1"
|
||
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="this.userInfo.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-row> -->
|
||
<div v-show="isDeliveryWay">
|
||
<div class="xian1">
|
||
<div class="title">{{ '收货人信息' }}</div>
|
||
<div class="lan"
|
||
@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"
|
||
:placeholder="'请输入收货人'"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item :label="'联系方式'"
|
||
prop="recPhone">
|
||
<el-input v-model="ruleForm.recPhone"
|
||
:maxlength="userInfo.pkSettleCountry == 1?11:20"
|
||
: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 class="nox"
|
||
v-show="addressList.length>0">
|
||
<div class="title">{{ '历史地址' }}</div>
|
||
</div>
|
||
<div class="local"
|
||
v-show="isDeliveryWay">
|
||
<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 class="nox">
|
||
<div class="title">{{ '产品信息' }}</div>
|
||
</div>
|
||
<el-table :data="goodList"
|
||
:row-style="{ height: '60px', fontSize: '15px', color: '#333333' }"
|
||
:cell-style="{ padding: '0' }"
|
||
:fit="true"
|
||
:header-cell-style="{
|
||
background: 'var(--primary-color)',
|
||
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.cover"
|
||
alt="">
|
||
<div>
|
||
<div>{{ scope.row.productName }}</div>
|
||
|
||
<div class="goods_tit"
|
||
v-for="item in scope.row.waresSkuList"
|
||
:key="item.pkId">
|
||
{{ item.specValueNames }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center"
|
||
prop="waresPrice"
|
||
:label="'商品单价'">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.waresPrice | numberToCurrency}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center"
|
||
prop="pv"
|
||
:label="'商品业绩'+'(PV)'">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.pv | numberToCurrency}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center"
|
||
prop="quantity"
|
||
:label="'商品数量'">
|
||
</el-table-column>
|
||
<el-table-column align="center"
|
||
prop="pvAmount"
|
||
:label="'业绩小计'+'PV'">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
scope.row.pvAmount | numberToCurrency
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center"
|
||
prop="priceAmount"
|
||
:label="'金额小计'">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.priceAmount | numberToCurrency}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tab_b">
|
||
<!-- <div>{{ '商品金额总计' }}:¥{{ 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 { mapGetters } from 'vuex'
|
||
import * as api from '@/api/register.js'
|
||
import { setTokenMi } from '@/util/auth'
|
||
import Pay from '@/components/Pay.vue'
|
||
import mustAgreeMent from '@/components/mustAgreeMent.vue'
|
||
|
||
export default {
|
||
components: {
|
||
personInfo,
|
||
AddAddress,
|
||
agreement,
|
||
Pay,
|
||
mustAgreeMent,
|
||
},
|
||
data() {
|
||
let validateRecTransType = (rule, value, callback) => {
|
||
if (this.ruleForm.transType == '' && this.isDeliveryWay) {
|
||
callback(new Error('请选择运输方式'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validPhone = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback(new Error('请输入电话号码'))
|
||
} else if (!this.isvalidPhone(value)) {
|
||
//判断用户输入的值是否符合规则
|
||
callback(new Error('请输入正确的手机号码'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
return {
|
||
waresCodeList: [],
|
||
isPay: false,
|
||
paramsPost: '',
|
||
isClick: 0,
|
||
ruleForm: {
|
||
dizhi: [],
|
||
fwzx: '',
|
||
postage: '',
|
||
recName: '',
|
||
recPhone: '',
|
||
recAddress: '',
|
||
deliveryWay: '',
|
||
transType: '',
|
||
},
|
||
rules: {
|
||
gradeName: [
|
||
{ required: true, message: '请输入申请级别', trigger: 'change' },
|
||
],
|
||
upgradeMemberName: [
|
||
{ required: true, message: '请输入会员姓名', trigger: 'change' },
|
||
],
|
||
recName: [
|
||
{ required: true, message: '请输入收件人', trigger: 'blur' },
|
||
],
|
||
recPhone: [{ required: true, validator: validPhone, trigger: 'blur' }],
|
||
recAddress: [
|
||
{ required: true, message: '请输入详细地址', trigger: 'blur' },
|
||
],
|
||
deliveryWay: [
|
||
{
|
||
required: true,
|
||
message: '请选择发货方式',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
// transType: [
|
||
// {
|
||
// required: true,
|
||
// message: '请选择运输方式',
|
||
// trigger: 'change',
|
||
// },
|
||
// ],
|
||
transType: [{ validator: validateRecTransType }],
|
||
},
|
||
addressList: [],
|
||
moren: '',
|
||
allGoodsData: {},
|
||
allData: [],
|
||
agreementShow: true,
|
||
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: '',
|
||
isDeliveryWay: true,
|
||
shoppingArr: [],
|
||
totalAmont: 0,
|
||
allDataObj: {
|
||
pgpList: [],
|
||
},
|
||
allData: [],
|
||
postList: [],
|
||
goodList: [],
|
||
hasChecked: '',
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
},
|
||
mounted() {
|
||
// // 数据源
|
||
this.allData = JSON.parse(this.$route.query.allData)
|
||
console.log(
|
||
'%c [ this.allData ]-409',
|
||
'font-size:13px; background:#c8340b; color:#ff784f;',
|
||
this.allData
|
||
)
|
||
let confirmOrderWaresInfoParamsList = []
|
||
this.hasChecked = this.$route.query.hasChecked || ''
|
||
this.allData.forEach((item) => {
|
||
item.waresSkuList.forEach((ctem) => {
|
||
confirmOrderWaresInfoParamsList.push({
|
||
pkTWares: ctem.pkTWares,
|
||
pkTWaresSku: ctem.pkTWaresSku || ctem.pkThWaresSku,
|
||
quantity: item.quantity,
|
||
source: 0,
|
||
})
|
||
})
|
||
})
|
||
// waresSkuList
|
||
// this.allGoodsData[0].orderItemsParams.forEach((item) => {
|
||
// item.goodsPrice = 0
|
||
// item.goodsAchive = 0
|
||
// item.waresItemsParamList.forEach((ctem) => {
|
||
// item.goodsPrice += parseFloat(ctem.priceTotal)
|
||
// item.goodsAchive += parseFloat(ctem.achieveTotal)
|
||
// })
|
||
// })
|
||
// let totalPrice = 0
|
||
// let totalAchive = 0
|
||
// this.allGoodsData[0].orderItemsParams.forEach((item) => {
|
||
// totalPrice += parseFloat(item.goodsPrice * item.quantity)
|
||
// totalAchive += parseFloat(item.goodsAchive * item.quantity)
|
||
// })
|
||
// this.totalPrice = totalPrice
|
||
// this.totalAchive = totalAchive
|
||
// this.allData = this.allGoodsData[0].orderItemsParams
|
||
// // 服务中心赋值
|
||
// this.getUserName()
|
||
|
||
// // 获取运输方式
|
||
// this.getTransList()
|
||
// // 获取发货方式
|
||
// this.getDeliveryList()
|
||
this.getAllArea()
|
||
// // 获取会员等级
|
||
// // this.getMember()
|
||
// 数据源
|
||
this.shoppingArr = JSON.parse(localStorage.getItem('allGoods'))
|
||
// 获取购物车详情
|
||
this.getCatDetail(confirmOrderWaresInfoParamsList)
|
||
// 幂等性
|
||
api.generate().then((res) => {
|
||
setTokenMi(res.msg)
|
||
})
|
||
if (this.userInfo.pkCountry == 1) {
|
||
this.ruleForm.transType = 1
|
||
this.ruleForm.deliveryWay = 1
|
||
}
|
||
},
|
||
methods: {
|
||
isvalidPhone(phone) {
|
||
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
|
||
return reg.test(phone)
|
||
},
|
||
// this.allData
|
||
getCatDetail(confirmOrderWaresInfoParamsList) {
|
||
api
|
||
.waresinfo({
|
||
confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
|
||
})
|
||
.then((res) => {
|
||
this.goodList = res.data
|
||
let price = 0
|
||
this.goodList.forEach((item) => {
|
||
item.waresItemsParamList = []
|
||
price += Number(item.priceAmount)
|
||
item.waresSkuList.forEach((ctem) => {
|
||
item.waresItemsParamList.push({
|
||
pkWaresSpecsSku: ctem.pkId,
|
||
})
|
||
})
|
||
})
|
||
this.allDataObj.price = price
|
||
this.totalAmont = this.allDataObj.price
|
||
let arr = []
|
||
this.goodList.forEach((item) => {
|
||
arr.push({
|
||
channel: item.source,
|
||
pkId: item.pkId,
|
||
quantity: item.quantity,
|
||
waresItemsParamList: item.waresItemsParamList,
|
||
})
|
||
})
|
||
this.postList = arr
|
||
this.allGoodsData.specialArea = 21
|
||
// 获取地址
|
||
this.getAddressList()
|
||
// 获取运输方式
|
||
this.getTransList()
|
||
// 获取发货方式
|
||
this.getDeliveryList()
|
||
// 获取省市县
|
||
this.getAllArea()
|
||
// 获取地址
|
||
// this.getAddressList()
|
||
// 获取会员等级
|
||
// this.getMember()
|
||
})
|
||
},
|
||
selDelivery(e) {
|
||
if (e == 2 || e == 3) {
|
||
this.isDeliveryWay = false
|
||
} else {
|
||
this.isDeliveryWay = true
|
||
}
|
||
},
|
||
openLoading() {
|
||
this.isLoading = this.$loading({
|
||
lock: true,
|
||
text: '订单生成中',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
})
|
||
},
|
||
resetAll() {
|
||
this.ruleForm.parent = ''
|
||
this.ruleForm.deliveryWay = ''
|
||
this.ruleForm.transType = ''
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleForm.clearValidate()
|
||
})
|
||
},
|
||
// getUserName() {
|
||
// api
|
||
// .upgRel({
|
||
// upgradeMemberCode: this.ruleForm.upgradeMemberCode,
|
||
// })
|
||
// .then((res) => {
|
||
// if (res.code == 200) {
|
||
// this.ruleForm.upgradeMemberName = res.data.upgradeMemberName
|
||
// this.$forceUpdate()
|
||
// }
|
||
// })
|
||
// },
|
||
closePay(val) {
|
||
if (val) {
|
||
this.isPay = false
|
||
this.$store.dispatch('GetInfo').then((response) => {
|
||
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 = []
|
||
if (this.isDeliveryWay && !this.ruleForm.recPhone) {
|
||
this.$message({
|
||
message: '请选择收货人信息',
|
||
type: 'warning',
|
||
})
|
||
return
|
||
}
|
||
if (!this.agreementShow) {
|
||
this.$message({
|
||
message: '请阅读并同意购买协议',
|
||
type: 'warning',
|
||
})
|
||
return
|
||
}
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.openLoading()
|
||
let obj = Object.assign(
|
||
{},
|
||
this.ruleForm,
|
||
{
|
||
recProvince: this.allGoodsData.recProvince,
|
||
recCounty: this.allGoodsData.recCounty,
|
||
recCity: this.allGoodsData.recCity,
|
||
},
|
||
{
|
||
orderItemsParams: this.postList,
|
||
specialArea: 21,
|
||
}
|
||
)
|
||
api
|
||
.confirmShareOrder(obj)
|
||
.then((res) => {
|
||
this.isLoading.close()
|
||
if (res.code == 200) {
|
||
// 下单成功，领取礼包
|
||
// this.getGifts()
|
||
this.isPay = true
|
||
this.paramsPost = res.data
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.isLoading.close()
|
||
})
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
// 领取礼包
|
||
getGifts() {
|
||
let obj = {
|
||
pkMember: this.userInfo.memberCode,
|
||
pkBaseId: this.allDataObj.pkBaseId,
|
||
pkNewPeople: this.allDataObj.pkNewPeople,
|
||
}
|
||
api.peoplePick(obj).then((res) => {})
|
||
},
|
||
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 (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() {
|
||
if (this.userInfo.registerShare == 0 || this.userInfo.registerFans == 0) {
|
||
this.setGoodlistType()
|
||
this.queryAdressPostage()
|
||
} else {
|
||
let deleteList = []
|
||
this.shoppingArr.forEach((item) => {
|
||
deleteList.push({
|
||
shoppingId: item,
|
||
})
|
||
})
|
||
this.allGoodsData.deleteList = deleteList
|
||
api.queryPostage(this.allGoodsData).then((res) => {
|
||
this.ruleForm.postage = Number(res.data.postage).toFixed(2)
|
||
this.totalAmont =
|
||
parseFloat(this.allDataObj.price) + parseFloat(res.data.postage)
|
||
this.totalAmont = this.totalAmont.toFixed(2)
|
||
})
|
||
}
|
||
},
|
||
setGoodlistType() {
|
||
let carList = {
|
||
channel: this.allData.source,
|
||
pkId: this.allData.pkId,
|
||
quantity: this.goodsNum,
|
||
waresItemsParamList: [
|
||
{
|
||
pkWaresSpecsSku: this.hasChecked,
|
||
},
|
||
],
|
||
}
|
||
this.orderItemsParams = [carList]
|
||
},
|
||
queryAdressPostage() {
|
||
api
|
||
.queryAdressPostage(
|
||
Object.assign({}, this.allGoodsData, {
|
||
orderItemsParams: this.postList,
|
||
})
|
||
)
|
||
.then((res) => {
|
||
this.ruleForm.postage = res.data.postage
|
||
this.totalAmont =
|
||
parseFloat(this.allDataObj.price) + parseFloat(res.data.postage)
|
||
})
|
||
},
|
||
// getMember() {
|
||
// this.allGoodsData.upgradeMemberCode = this.ruleForm.upgradeMemberCode
|
||
// api.memLevel(this.allGoodsData).then((res) => {
|
||
// if (res.data.isEnough) {
|
||
// this.ruleForm.gradeName = res.data.gradeName
|
||
// } else {
|
||
// this.isLoading.close()
|
||
// }
|
||
// })
|
||
// },
|
||
getTransList() {
|
||
api.transportList().then((res) => {
|
||
this.transList = res.data
|
||
})
|
||
},
|
||
getDeliveryList() {
|
||
api.deliveryList().then((res) => {
|
||
this.deliList = res.data
|
||
})
|
||
},
|
||
delAds(id) {
|
||
this.$confirm('确定要删除该收货地址吗' + '?', '', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
api.delAddress(id).then((res) => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功' + '!',
|
||
})
|
||
this.getAddressList()
|
||
})
|
||
})
|
||
},
|
||
getAllArea() {
|
||
api.allArea().then((res) => {
|
||
this.areaData = res.data
|
||
})
|
||
},
|
||
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({}).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;
|
||
}
|
||
.zca {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #00417C;
|
||
}
|
||
}
|
||
.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: var(--primary-color);
|
||
border-radius: 8px 8px 8px 8px;
|
||
padding: 12px 40px;
|
||
display: inline-block;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
margin-top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.goods {
|
||
padding: 20px 0;
|
||
|
||
img {
|
||
width: 88px;
|
||
height: 88px;
|
||
}
|
||
}
|
||
.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;
|
||
|
||
.goods_tit_l {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.goods_tit_r {
|
||
// width: 150px;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
</style> |