1435 lines
38 KiB
Vue
1435 lines
38 KiB
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" v-if="specialArea == 33">
|
||
{{ $t("APP_ADD_28") }}
|
||
</div>
|
||
<div class="rti dis_flex" v-else>{{ $t("w_0244") }}</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="$t('ENU_REG_AU_2')"
|
||
prop="fwzx">
|
||
<el-input v-model="ruleForm.fwzx"
|
||
disabled></el-input>
|
||
</el-form-item>
|
||
</el-col> -->
|
||
<el-col :span="6">
|
||
<el-form-item
|
||
v-if="specialArea == 33"
|
||
:label="$t('APP_ADD_29')"
|
||
prop="upgradeMemberCode"
|
||
>
|
||
<el-input
|
||
v-model="ruleForm.upgradeMemberCode"
|
||
:disabled="toShow"
|
||
:placeholder="$t('APP_ADD_29')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-else :label="$t('w_0245')" prop="upgradeMemberCode">
|
||
<el-input
|
||
v-model="ruleForm.upgradeMemberCode"
|
||
:disabled="toShow"
|
||
:placeholder="$t('w_0280')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item
|
||
v-if="specialArea == 33"
|
||
:label="$t('APP_ADD_30')"
|
||
prop="upgradeMemberName"
|
||
>
|
||
<el-input
|
||
v-model="ruleForm.upgradeMemberName"
|
||
:placeholder="$t('APP_ADD_30')"
|
||
disabled
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-else :label="$t('w_0246')" prop="upgradeMemberName">
|
||
<el-input
|
||
v-model="ruleForm.upgradeMemberName"
|
||
:placeholder="$t('w_0281')"
|
||
disabled
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('w_0061')" prop="deliveryWay">
|
||
<el-select
|
||
v-model="ruleForm.deliveryWay"
|
||
@change="selDelivery"
|
||
:disabled="this.userInfo.pkSettleCountry == 1"
|
||
:placeholder="$t('w_0062')"
|
||
>
|
||
<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="$t('w_0063')" prop="transType">
|
||
<el-select v-model="ruleForm.transType" :disabled="this.userInfo.pkSettleCountry == 1" :placeholder="$t('w_0064')">
|
||
<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="userInfo.pkSettleCountry != 1 && ruleForm.deliveryWay != 2"
|
||
>
|
||
<!-- <el-form-item :label="$t('w_0100')" prop="pkMemberStore">
|
||
<el-select
|
||
filterable
|
||
v-model="ruleForm.pkMemberStore"
|
||
:placeholder="$t('w_0101')"
|
||
>
|
||
<el-option
|
||
v-for="item in storeList"
|
||
:key="item.pkId"
|
||
:label="item.storeName"
|
||
:value="item.pkId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item> -->
|
||
<div @click="handleInputClick">
|
||
<el-form-item :label="$t('w_0100')" prop="selectedStoreName">
|
||
<el-input
|
||
v-model="ruleForm.selectedStoreName"
|
||
:placeholder="$t('w_0101')"
|
||
readonly
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<el-dialog
|
||
:title="$t('w_0100')"
|
||
:visible.sync="dialogVisible"
|
||
width="80%"
|
||
class="titles-dialog"
|
||
>
|
||
<div class="topbox">
|
||
<el-form label-width="80px" :model="queryParams" inline>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('MN_F_T_1206')">
|
||
<el-input v-model="queryParams.storeCode"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('S_C_27')" class="dizhi">
|
||
<el-cascader
|
||
clearable
|
||
v-model="queryParams.address"
|
||
:options="areaData"
|
||
:props="regionParams"
|
||
@change="handleChange1"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="searchbox"
|
||
:style="userInfo.pkCountry == 1 ? 'margin-left:10px' : ''"
|
||
>
|
||
<el-button class="btn2" @click="research">{{
|
||
$t("N_I_183")
|
||
}}</el-button>
|
||
<el-button class="btn1" @click="reChongzhi()">{{
|
||
$t("CK_KS_6")
|
||
}}</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<div>
|
||
<el-table
|
||
:data="storeLists"
|
||
@row-click="handleRowClick"
|
||
highlight-current-row
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
prop="storeName"
|
||
:label="$t('MN_F_T_1207')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="storeCode"
|
||
:label="$t('MN_F_T_1206')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="storePerson"
|
||
:label="$t('S_C_86')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="storePhone"
|
||
:label="$t('w_0052')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
:label="$t('S_C_27')"
|
||
></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getStoreLists"
|
||
/>
|
||
<div slot="footer">
|
||
<el-button @click="dialogVisible = false">{{
|
||
$t("MY_ORD_24")
|
||
}}</el-button>
|
||
<el-button type="primary" @click="handleConfirm">{{
|
||
$t("MN_F_32")
|
||
}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="40" class="padRow">
|
||
<!-- <el-col :span="6" v-if="userInfo.pkSettleCountry != 1 && ruleForm.deliveryWay != 2">
|
||
<el-form-item :label="$t('w_0100')" prop="pkMemberStore">
|
||
<el-select v-model="ruleForm.pkMemberStore" :placeholder="$t('w_0101')">
|
||
<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="userInfo.pkSettleCountry != 1">
|
||
<el-form-item :label="$t('w_0102')">
|
||
<el-select
|
||
v-model="ruleForm.pkStorehouse"
|
||
:placeholder="$t('w_0103')"
|
||
>
|
||
<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="xian">
|
||
<div class="title">{{ $t('w_0065') }}</div>
|
||
<div class="lan"
|
||
@click="openAddress">{{ $t('w_0066') }}</div>
|
||
</div>
|
||
</div> -->
|
||
<!-- 收货人信息 -->
|
||
<div v-if="isDeliveryWay">
|
||
<div class="xian">
|
||
<div class="title">{{ $t("w_0065") }}</div>
|
||
<div class="lan" @click="openAddress">{{ $t("w_0066") }}</div>
|
||
</div>
|
||
<el-row :gutter="40" class="padRow">
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('MY_ORD_10')" prop="recName"
|
||
><el-input
|
||
v-model="ruleForm.recName"
|
||
:placeholder="$t('w_0067')"
|
||
></el-input
|
||
></el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('w_0052')" prop="recPhone"
|
||
><el-input
|
||
v-model="ruleForm.recPhone"
|
||
:placeholder="$t('w_0053')"
|
||
></el-input
|
||
></el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('w_0068')" class="dizhi" prop="dizhi">
|
||
<el-cascader
|
||
v-model="ruleForm.dizhi"
|
||
@change="setDizhi"
|
||
:options="areaData"
|
||
:props="regionParams"
|
||
:placeholder="$t('w_0069')"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('S_C_27')" prop="recAddress">
|
||
<el-input
|
||
v-model="ruleForm.recAddress"
|
||
maxlength="200"
|
||
:placeholder="$t('w_0070')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="40" class="padRow">
|
||
<!-- <el-col :span="6">
|
||
<el-form-item :label="$t('w_0071')"><el-input v-model="ruleForm.postage" disabled></el-input></el-form-item>
|
||
</el-col> -->
|
||
<el-col :span="6">
|
||
<el-form-item :label="$t('MY_WAL_22')"
|
||
><el-input
|
||
v-model="ruleForm.remark"
|
||
:placeholder="$t('w_0072')"
|
||
></el-input
|
||
></el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
<div class="nox" v-if="isDeliveryWay">
|
||
<div class="title">{{ $t("w_0073") }}</div>
|
||
</div>
|
||
<div class="local" v-if="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">
|
||
{{ $t("w_0074") }}
|
||
</div>
|
||
<div
|
||
class="local2 local3"
|
||
v-show="item.isDefault == 0"
|
||
@click="setDefaultAds(item.pkId)"
|
||
>
|
||
{{ $t("w_0075") }}
|
||
</div>
|
||
<div class="local2" @click="changeAds(item.pkId)">
|
||
{{ $t("w_0076") }}
|
||
</div>
|
||
<div class="local3" @click="delAds(item.pkId)">
|
||
{{ $t("ENU_CONTROL_TYPE_3") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 商品信息 -->
|
||
<div class="nox">
|
||
<div class="title">{{ $t("w_0077") }}</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="$t('w_0078')"
|
||
>
|
||
<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"
|
||
: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="$t('w_0079')">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.price | numberToCurrency }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="goodsAchive"
|
||
:label="$t('w_0080') + '(PV)'"
|
||
v-if="specialArea != 30"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.achieve | numberToCurrency }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="quantity"
|
||
:label="$t('w_0081')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="spyjxj"
|
||
:label="$t('w_0082') + 'PV'"
|
||
v-if="specialArea != 30"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.achieveAmount | numberToCurrency }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="pvxj" :label="$t('w_0093')">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.priceAmount | numberToCurrency }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tab_b">
|
||
<div>
|
||
{{ $t("w_0083") }}:{{ userInfo.currencyIcon
|
||
}}{{ allGoodsData.priceAmount | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
{{ $t("w_0071") }}:{{ 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">{{ $t("w_0325") }}:</div>
|
||
<div class="f2">
|
||
{{ userInfo.currencyIcon }}{{ totalAmont | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
<div class="dis_flex" v-if="specialArea != 30">
|
||
<div class="f1">{{ $t("ENU_TOTAL_V_1") }}:</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">
|
||
{{ $t("w_0084") }}：{{ ruleForm.nameList }}{{ ruleForm.recAddress }}
|
||
</div>
|
||
<div class="f4">
|
||
{{ $t("MY_ORD_10") }}：{{ 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')">
|
||
{{ $t("w_0085") }}
|
||
</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 { Loading } from "element-ui";
|
||
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(this.$t("w_0064")));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
return {
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
storeCode: "",
|
||
address: ["", "", ""],
|
||
},
|
||
selectedStoreId: "",
|
||
dialogVisible: false,
|
||
storeLists: [],
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
waresCodeList: [],
|
||
isPay: false,
|
||
paramsPost: "",
|
||
isClick: 0,
|
||
ruleForm: {
|
||
upgradeMemberCode: "",
|
||
dizhi: [],
|
||
fwzx: "",
|
||
upgradeMemberName: "",
|
||
postage: "",
|
||
recName: "",
|
||
recPhone: "",
|
||
recAddress: "",
|
||
deliveryWay: "",
|
||
transType: "",
|
||
pkMemberStore: "",
|
||
selectedStoreName: "",
|
||
},
|
||
rules: {
|
||
upgradeMemberCode: [
|
||
{
|
||
required: true,
|
||
validator: this.upgradeMemberCodePass,
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
fwzx: [
|
||
{
|
||
required: true,
|
||
message: "请输入活动名称",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
gradeName: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0086"),
|
||
trigger: "change",
|
||
},
|
||
],
|
||
upgradeMemberName: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0097"),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
recName: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0087"),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
recPhone: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0053"),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
recAddress: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0070"),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
deliveryWay: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0062"),
|
||
trigger: "change",
|
||
},
|
||
],
|
||
pkMemberStore: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0101"),
|
||
trigger: "change",
|
||
},
|
||
],
|
||
selectedStoreName: [
|
||
{
|
||
required: true,
|
||
message: this.$t("w_0101"),
|
||
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: false,
|
||
shoppingArr: "",
|
||
totalAmont: 0,
|
||
specialArea: "",
|
||
storeList: [],
|
||
storehouseList: [],
|
||
toShow: false,
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
filteredStoreList() {
|
||
// 使用分页计算开始索引和结束索引
|
||
const startIndex = (this.currentPage - 1) * this.pageSize;
|
||
const endIndex = this.currentPage * this.pageSize;
|
||
// 过滤 storeList 并返回分页数据
|
||
return this.storeLists.filter(
|
||
(store, index) => index >= startIndex && index < endIndex
|
||
);
|
||
},
|
||
},
|
||
mounted() {
|
||
// // 数据源
|
||
// this.allGoodsData = JSON.parse(localStorage.getItem('allGoods'))
|
||
// 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.specialArea = this.$route.query.specialArea;
|
||
if (
|
||
this.specialArea == 12 ||
|
||
this.specialArea == 22 ||
|
||
this.specialArea == 14 ||
|
||
this.specialArea == 33
|
||
) {
|
||
this.toShow = true;
|
||
this.$forceUpdate();
|
||
}
|
||
// // 服务中心赋值
|
||
this.ruleForm.upgradeMemberCode = this.userInfo.memberCode;
|
||
this.getUserName();
|
||
if (this.userInfo.pkSettleCountry != 1) {
|
||
//获取会员店铺
|
||
this.getStoreList();
|
||
//获取仓库
|
||
this.getStorehouseList();
|
||
}
|
||
// // 获取地址
|
||
// this.getAddressList()
|
||
// // 获取运输方式
|
||
// this.getTransList()
|
||
// // 获取发货方式
|
||
// this.getDeliveryList()
|
||
// this.getAllArea()
|
||
// // 获取会员等级
|
||
// // this.getMember()
|
||
// 数据源
|
||
this.shoppingArr = JSON.parse(localStorage.getItem("allGoods"));
|
||
// 获取购物车详情
|
||
this.getCatDetail();
|
||
// 幂等性
|
||
api.generate().then((res) => {
|
||
setTokenMi(res.msg);
|
||
});
|
||
if (this.userInfo.pkSettleCountry == 1) {
|
||
this.ruleForm.transType = 1;
|
||
this.ruleForm.deliveryWay = 1;
|
||
}
|
||
},
|
||
methods: {
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val;
|
||
},
|
||
handleInputClick(event) {
|
||
// 检查点击的目标元素是否是输入框
|
||
if (event.target.tagName.toLowerCase() === "input") {
|
||
this.showDialog();
|
||
}
|
||
},
|
||
showDialog() {
|
||
this.dialogVisible = true;
|
||
this.getStoreLists();
|
||
},
|
||
handleRowClick(row) {
|
||
if (row.address && row.storeCode) {
|
||
this.ruleForm.selectedStoreName =
|
||
row.storeName + "(" + row.storeCode + ")";
|
||
this.ruleForm.pkMemberStore = row.pkId;
|
||
} else {
|
||
row.storeCode == null
|
||
? this.$message.warning(this.$t("该店铺未设置编号"))
|
||
: this.$message.warning(this.$t("该店铺未设置地址"));
|
||
}
|
||
this.selectedStoreId = row.pkId;
|
||
},
|
||
handleConfirm() {
|
||
this.dialogVisible = false;
|
||
},
|
||
handleChange1(val) {
|
||
this.queryParams.province = val[0];
|
||
this.queryParams.city = val[1];
|
||
this.queryParams.county = val[2] || "";
|
||
},
|
||
research() {
|
||
const loading = Loading.service({
|
||
lock: true,
|
||
text: "Loading",
|
||
background: "rgba(0, 0, 0, 0.7)",
|
||
});
|
||
setTimeout(() => {
|
||
loading.close();
|
||
this.getStoreLists();
|
||
}, 1000);
|
||
},
|
||
reChongzhi() {
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
};
|
||
this.queryParams.province = "";
|
||
this.queryParams.city = "";
|
||
this.queryParams.address = "";
|
||
this.getStoreLists();
|
||
},
|
||
getStoreLists() {
|
||
this.queryParams.pkCountry = this.pkCountry;
|
||
// this.queryParams.province = this.areaData.address[0];
|
||
// this.queryParams.city = this.areaData.address[1];
|
||
// delete this.queryParams.address;
|
||
api.storeLists(this.queryParams).then((res) => {
|
||
this.storeLists = res.rows;
|
||
this.total = res.total;
|
||
});
|
||
},
|
||
getStoreList() {
|
||
api.storeList().then((res) => {
|
||
this.storeList = res.rows;
|
||
});
|
||
},
|
||
getStorehouseList() {
|
||
api.storehouseList().then((res) => {
|
||
this.storehouseList = res.rows;
|
||
});
|
||
},
|
||
// 升级编号获取name
|
||
upgradeMemberCodePass(rule, value, callback) {
|
||
if (!value) {
|
||
callback(new Error("请输入复购编号"));
|
||
} else {
|
||
api
|
||
.upgRel({
|
||
upgradeMemberCode: value,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
this.ruleForm.upgradeMemberName = res.data.upgradeMemberName;
|
||
// this.getMember()
|
||
this.$forceUpdate();
|
||
callback();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
callback(new Error(err));
|
||
});
|
||
}
|
||
},
|
||
getCatDetail() {
|
||
api
|
||
.shoppingWaresDetail({
|
||
shoppingIds: this.shoppingArr,
|
||
specialArea: this.specialArea,
|
||
})
|
||
.then((res) => {
|
||
this.allGoodsData = res.data;
|
||
this.waresCodeList = res.data.orderItemsParams.map((item) => {
|
||
return item.waresCode;
|
||
});
|
||
this.allGoodsData.specialArea = this.specialArea;
|
||
this.allData = this.allGoodsData.orderItemsParams;
|
||
this.totalAmont = this.allGoodsData.priceAmount;
|
||
// 服务中心赋值
|
||
this.ruleForm.fwzx = this.userInfo.memberCode;
|
||
|
||
// 获取地址
|
||
this.getAddressList();
|
||
// 获取运输方式
|
||
this.getTransList();
|
||
// 获取发货方式
|
||
this.getDeliveryList();
|
||
// 获取省市县
|
||
this.getAllArea();
|
||
// 获取会员等级
|
||
// this.getMember()
|
||
});
|
||
},
|
||
getUserName() {
|
||
api
|
||
.upgRel({
|
||
upgradeMemberCode: this.ruleForm.upgradeMemberCode,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
this.ruleForm.upgradeMemberName = res.data.upgradeMemberName;
|
||
this.$forceUpdate();
|
||
}
|
||
});
|
||
},
|
||
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)",
|
||
});
|
||
},
|
||
resetAll() {
|
||
this.ruleForm.parent = "";
|
||
this.ruleForm.upgradeMemberName = "";
|
||
this.ruleForm.deliveryWay = "";
|
||
this.ruleForm.transType = "";
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleForm.clearValidate();
|
||
});
|
||
},
|
||
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.getPostAge();
|
||
},
|
||
closePay(val) {
|
||
if (val) {
|
||
this.isPay = false;
|
||
this.$router.push({
|
||
path: "/vipCenter",
|
||
query: {
|
||
id: 1,
|
||
},
|
||
});
|
||
} else {
|
||
this.$confirm(this.$t("w_0090"), "", {
|
||
confirmButtonText: this.$t("w_0035"),
|
||
cancelButtonText: this.$t("ENU_P_TYPE0"),
|
||
type: "warning",
|
||
})
|
||
.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,
|
||
});
|
||
});
|
||
|
||
if (this.isDeliveryWay && !this.ruleForm.recPhone) {
|
||
this.$message({
|
||
message: this.$t("w_0092"),
|
||
type: "warning",
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.openLoading();
|
||
let obj = Object.assign({}, this.allGoodsData, this.ruleForm, {
|
||
deleteList: deleteList,
|
||
});
|
||
if (!this.isDeliveryWay) {
|
||
delete obj.recName;
|
||
delete obj.recPhone;
|
||
delete obj.recAddress;
|
||
delete obj.recProvince;
|
||
delete obj.recCity;
|
||
}
|
||
api
|
||
.confirmOthOrder(obj)
|
||
.then((res) => {
|
||
this.isLoading.close();
|
||
if (res.code == 200) {
|
||
this.isPay = true;
|
||
this.paramsPost = res.data;
|
||
}
|
||
})
|
||
.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) : []
|
||
);
|
||
}, []);
|
||
},
|
||
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.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() {
|
||
// 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;
|
||
/* 暂时 默认店铺自提 */
|
||
if (this.deliList) {
|
||
this.ruleForm.deliveryWay = this.deliList[0].value;
|
||
this.isDeliveryWay = false;
|
||
}
|
||
});
|
||
},
|
||
delAds(id) {
|
||
this.$confirm(this.$t("w_0088") + "?", "", {
|
||
confirmButtonText: this.$t("w_0035"),
|
||
cancelButtonText: this.$t("ENU_P_TYPE0"),
|
||
type: "warning",
|
||
}).then(() => {
|
||
api.delAddress(id).then((res) => {
|
||
this.$message({
|
||
type: "success",
|
||
message: this.$t("w_0089") + "!",
|
||
});
|
||
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>
|
||
::v-deep .el-table__body tr.current-row > td.el-table__cell {
|
||
background-color: red;
|
||
}
|
||
|
||
.titles-dialog ::v-deep .el-dialog__body {
|
||
height: 500px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.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: #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;
|
||
}
|
||
|
||
.xian {
|
||
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;
|
||
}
|
||
</style>
|