549 lines
16 KiB
Vue
549 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 收货人信息 -->
|
||
<!-- 收货人信息 -->
|
||
<view class="form-title d-b-c" v-if="form.deliveryWay == 4">
|
||
<text>
|
||
{{ $t("w_0065") }}
|
||
</text>
|
||
<view class="d-c-c" @click="gotoPage('/pages/user/address/add')">
|
||
<u-icon name="plus-circle-fill" size="38rpx" color="#fff"></u-icon>
|
||
<text class="ml10">{{ $t("w_0328") }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="prefecture form-group mb20" v-if="form.deliveryWay == 4">
|
||
<!-- 收货人 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t("MY_ORD_10") }}
|
||
</view>
|
||
<input
|
||
class="form-input"
|
||
type="text"
|
||
v-model="form.recName"
|
||
placeholder=""
|
||
/>
|
||
</view>
|
||
<!-- 联系方式 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t("w_0052") }}
|
||
</view>
|
||
<input
|
||
class="form-input"
|
||
type="text"
|
||
v-model="form.recPhone"
|
||
placeholder=""
|
||
/>
|
||
</view>
|
||
<!-- 收货地址 -->
|
||
<view class="form-item" @click="showAddPicker">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t("w_0068") }}
|
||
</view>
|
||
<input
|
||
class="form-input"
|
||
disabled
|
||
type="text"
|
||
v-model="form.nameList"
|
||
placeholder=""
|
||
/>
|
||
<text class="icon iconfont icon-jiantou"></text>
|
||
</view>
|
||
<!-- 详细地址 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t("S_C_27") }}
|
||
</view>
|
||
<textarea
|
||
auto-height
|
||
class="form-textarea"
|
||
v-model="form.recAddress"
|
||
placeholder=""
|
||
/>
|
||
</view>
|
||
<!-- 邮费 -->
|
||
<!-- <view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t('w_0071') }}
|
||
</view>
|
||
<input class="form-input" disabled type="text" :value="formatNum(form.postage)" />
|
||
</view> -->
|
||
<!-- 备注 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t("MY_WAL_22") }}
|
||
</view>
|
||
<textarea
|
||
auto-height
|
||
class="form-textarea"
|
||
v-model="form.remark"
|
||
placeholder=""
|
||
/>
|
||
</view>
|
||
<template v-if="shareType">
|
||
<!-- 发货方式 -->
|
||
<picker
|
||
:disabled="userCountry == 1"
|
||
:range="deliveryList"
|
||
range-key="label"
|
||
@change="changeDelivery"
|
||
>
|
||
<view class="form-item" v-if="deliveryList[deliveryIndex]">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t("w_0061") }}
|
||
</view>
|
||
<input
|
||
class="form-input"
|
||
disabled
|
||
type="text"
|
||
:value="deliveryList[deliveryIndex].label"
|
||
placeholder=""
|
||
/>
|
||
<text
|
||
v-if="userCountry != 1"
|
||
class="icon iconfont icon-jiantou"
|
||
></text>
|
||
</view>
|
||
</picker>
|
||
<!-- 运输方式 -->
|
||
<!-- <picker :disabled="userCountry == 1" :range="transportType" range-key="label" @change="changeTransport">
|
||
<view class="form-item" v-if="transportType[transportIndex]">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
{{ $t('w_0063') }}
|
||
</view>
|
||
<input class="form-input" disabled type="text" :value="transportType[transportIndex].label" placeholder="" />
|
||
<text v-if="userCountry != 1" class="icon iconfont icon-jiantou"></text>
|
||
</view>
|
||
</picker> -->
|
||
<!-- 会员店铺 -->
|
||
<picker
|
||
:range="storeList"
|
||
v-if="userCountry != 1"
|
||
range-key="storeName"
|
||
@change="changeStore"
|
||
>
|
||
<view class="form-item" style="border-bottom: 1rpx solid #eee">
|
||
<view class="form-label">
|
||
<text class="white mr10">*</text>
|
||
{{ $t("w_0100") }}
|
||
</view>
|
||
<input
|
||
class="disabled-input"
|
||
disabled
|
||
type="text"
|
||
:value="
|
||
(storeList &&
|
||
storeList[storeIndex] &&
|
||
storeList[storeIndex].storeName) ||
|
||
''
|
||
"
|
||
placeholder=""
|
||
/>
|
||
<text class="icon iconfont icon-jiantou"></text>
|
||
</view>
|
||
</picker>
|
||
<!-- 仓库 -->
|
||
<!-- <picker :range="storehouse" v-if="userCountry != 1" range-key="name" @change="changeStorehouse">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="white mr10">*</text>
|
||
{{ $t('w_0102') }}
|
||
</view>
|
||
<input
|
||
class="disabled-input"
|
||
disabled
|
||
type="text"
|
||
:value="(storehouse && storehouse[storehouseIndex] && storehouse[storehouseIndex].name) || ''"
|
||
placeholder=""
|
||
/>
|
||
<text class="icon iconfont icon-jiantou"></text>
|
||
</view>
|
||
</picker> -->
|
||
</template>
|
||
</view>
|
||
<!-- 历史地址 -->
|
||
<template
|
||
v-if="!shareType && memberAddress.length > 0 && form.deliveryWay == 4"
|
||
>
|
||
<view class="form-title">
|
||
{{ $t("w_0073") }}
|
||
</view>
|
||
<view class="prefecture form-group mb20">
|
||
<view
|
||
class="d-b-s address-item"
|
||
v-for="(item, index) in memberAddress"
|
||
:key="index"
|
||
>
|
||
<view
|
||
class="radio-check d-c-c"
|
||
:class="{ checked: checkedindex == index }"
|
||
@click.stop="checkedFunc(item, index)"
|
||
>
|
||
<u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view class="f28 gray3 fb mb10 d-s-s">
|
||
{{ item.recName }}
|
||
<text class="small-text-btn" v-if="item.isDefault == 1">{{
|
||
$t("w_0263")
|
||
}}</text>
|
||
</view>
|
||
<view class="f24 gray9">{{ item.recArea }}</view>
|
||
</view>
|
||
<view class="d-c-c">
|
||
<view
|
||
class="icon-box plus d-c-c ml30"
|
||
@click="gotoPage('/pages/user/address/edit?pkId=' + item.pkId)"
|
||
>
|
||
<image
|
||
class="add_icon_img edit"
|
||
src="/static/icon/add-edit.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
<view
|
||
class="icon-box plus d-c-c ml30"
|
||
@click="delAddress(item.pkId)"
|
||
>
|
||
<image
|
||
class="add_icon_img delete"
|
||
src="/static/icon/add-delete.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="product-box" @click="testFunc(form)">
|
||
<view class="product-title">
|
||
<!-- 商品信息 -->
|
||
{{ $t("w_0077") }}
|
||
</view>
|
||
<view class="product-list order-product">
|
||
<view
|
||
v-for="(item, index) in form.orderItemsParams"
|
||
:key="index"
|
||
class="product-item"
|
||
>
|
||
<view class="d-b-s mb20">
|
||
<image
|
||
class="product-img"
|
||
:src="item.cover1 || item.cover"
|
||
mode=""
|
||
></image>
|
||
<view class="product-info d-c d-b-s flex-1">
|
||
<view class="text-ellipsis-2 f28 gray3">{{
|
||
item.waresName || item.productName
|
||
}}</view>
|
||
<view v-if="item.waresSkuList" class="f22 gray6">{{
|
||
item.waresSkuList[0].specValueNames
|
||
}}</view>
|
||
<view class="price-color f24">
|
||
<view
|
||
v-if="
|
||
(cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
|
||
userinfo.pkSettleCountry != userCountry
|
||
"
|
||
>
|
||
{{ borderunits
|
||
}}<text class="f32 fb">{{
|
||
formatNum(item.borderPrice)
|
||
}}</text>
|
||
({{ currencyIcon() }}
|
||
<text class="f32 fb">{{
|
||
formatNum(item.price || item.waresPrice)
|
||
}}</text
|
||
>)
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}
|
||
<text class="f32 fb">{{
|
||
formatNum(item.price || item.waresPrice)
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray9 ml20">X{{ item.quantity }}</view>
|
||
</view>
|
||
<view class="mb10 gray9 f26" v-if="cid != 30"
|
||
>{{ $t("ENU_TOTAL_V_1") }}：{{
|
||
formatNum(item.achieve || item.pv)
|
||
}}</view
|
||
>
|
||
<view class="secend-product" v-if="cid != 21">
|
||
<view
|
||
class="d-b-s mb20"
|
||
v-for="(sitem, sindex) in item.waresItemsParamList"
|
||
:key="sindex"
|
||
>
|
||
<view class="d-s-c">
|
||
<image
|
||
:src="sitem.specCover"
|
||
mode=""
|
||
class="s-product-img"
|
||
></image>
|
||
<view class="f28">
|
||
{{ sitem.productName }}
|
||
<text class="ml20">{{ sitem.skuInfo }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray9 ml20">X{{ sitem.quantity }}</view>
|
||
</view>
|
||
<view class="d-b-c mb20" v-if="cid!=30">
|
||
<view class="flex-1 f26 gray9">{{ $t("w_0080") }}</view>
|
||
<view class="f26 gray3">
|
||
{{ formatNum(item.achieveAmount) }}
|
||
</view>
|
||
</view>
|
||
<view class="d-b-c">
|
||
<view class="flex-1 f26 gray9">{{ $t("w_0093") }}</view>
|
||
<view class="f26 gray3">
|
||
<view
|
||
v-if="
|
||
(cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
|
||
userinfo.pkSettleCountry != userCountry
|
||
"
|
||
>
|
||
{{ borderunits }}{{ formatNum(item.borderAmount) }}({{
|
||
currencyIcon()
|
||
}}{{ formatNum(item.priceAmount) }})
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}{{ formatNum(item.priceAmount) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ww100 pt30" v-if="cid != 21">
|
||
<view class="d-b-c mb20">
|
||
<view class="flex-1 f26 gray9">{{ $t("w_0083") }}</view>
|
||
<view class="f26 gray3">
|
||
<view
|
||
v-if="
|
||
(cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
|
||
userinfo.pkSettleCountry != userCountry
|
||
"
|
||
>
|
||
{{ borderunits }}{{ formatNum(form.borderPriceAmount) }} ({{
|
||
currencyIcon()
|
||
}}{{ formatNum(form.priceAmount) }})
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}{{ formatNum(form.priceAmount) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-b-c mb20">
|
||
<view class="flex-1 f26 gray9">{{ $t("w_0071") }}</view>
|
||
<view class="f26 gray3">
|
||
<view
|
||
v-if="
|
||
(cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
|
||
userinfo.pkSettleCountry != userCountry
|
||
"
|
||
>
|
||
{{ borderunits }}{{ formatNum(form.postage) || "0.00" }} ({{
|
||
currencyIcon()
|
||
}}{{ formatNum(form.postage) || "0.00" }})
|
||
</view>
|
||
<view v-else>
|
||
{{ currencyIcon() }}{{ formatNum(form.postage) || "0.00" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="d-b-c mb20">
|
||
<view class="flex-1 f26 gray9">复购券抵扣</view>
|
||
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
||
</view> -->
|
||
<!-- <view class="d-b-c mb20">
|
||
<view class="flex-1 f26 gray9">总价</view>
|
||
<view class="f26 gray3">{{currencyIcon()}}{{form.priceAmount}}</view>
|
||
</view> -->
|
||
<view class="d-b-c mb20" v-if="cid != 30">
|
||
<view class="flex-1 f26 gray9" >{{ $t("ENU_TOTAL_V_1") }}</view>
|
||
<view class="f26 gray3"
|
||
>{{ performanceCurrency()
|
||
}}{{ formatNum(form.achieveAmount) }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
checkedindex: 0,
|
||
deliveryIndex: 0,
|
||
transportIndex: 0,
|
||
storeIndex: "",
|
||
storehouseIndex: "",
|
||
userinfo: {},
|
||
};
|
||
},
|
||
props: [
|
||
"shareType",
|
||
"memberAddress",
|
||
"transportType",
|
||
"deliveryList",
|
||
"userCountry",
|
||
"storeList",
|
||
"storehouse",
|
||
"cid",
|
||
"borderunits",
|
||
],
|
||
inject: ["form"],
|
||
mounted() {
|
||
this.getInfo();
|
||
console.log(this.form, "form");
|
||
},
|
||
methods: {
|
||
getInfo() {
|
||
let self = this;
|
||
self._get("member/api/member/get-info", {}, (res) => {
|
||
self.userinfo = res.data;
|
||
});
|
||
},
|
||
changeStore(e) {
|
||
this.storeIndex = e.detail.value;
|
||
this.form.pkMemberStore = this.storeList[this.storeIndex].pkId;
|
||
},
|
||
changeStorehouse(e) {
|
||
this.storehouseIndex = e.detail.value;
|
||
this.form.pkStorehouse = this.storehouse[this.storehouseIndex].pkId;
|
||
},
|
||
delAddress(e) {
|
||
this.$emit("delAddress", e);
|
||
},
|
||
showAddPicker() {
|
||
this.$emit("showAddPicker");
|
||
},
|
||
checkedFunc(e, n) {
|
||
this.checkedindex = n;
|
||
this.form.recName = e.recName;
|
||
this.form.recPhone = e.recPhone;
|
||
this.form.recProvince = e.recProvince;
|
||
this.form.recCity = e.recCity;
|
||
this.form.recCounty = e.recCounty;
|
||
this.form.nameList = e.recArea;
|
||
this.form.recAddress = e.recAddress;
|
||
this.form.dizhi = [e.recProvince, e.recCity, e.recCounty];
|
||
this.$emit("queryOrderPostage");
|
||
},
|
||
changeDelivery(e) {
|
||
this.deliveryIndex = e.detail.value;
|
||
this.form.deliveryWay = this.deliveryList[this.deliveryIndex].value;
|
||
this.$emit("queryOrderPostage");
|
||
},
|
||
changeTransport(e) {
|
||
this.transportIndex = e.detail.value;
|
||
this.form.transType = this.transportType[this.transportIndex].value;
|
||
this.$emit("queryOrderPostage");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.product-box {
|
||
padding: 26rpx 18rpx 36rpx 20rpx;
|
||
background: #ffffff;
|
||
margin-bottom: 20rpx;
|
||
|
||
.product-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
font-weight: bold;
|
||
border-bottom: 1rpx solid #eee;
|
||
padding-bottom: 28rpx;
|
||
}
|
||
}
|
||
|
||
.form-title {
|
||
width: 750rpx;
|
||
height: 106rpx;
|
||
background: #fb3024;
|
||
padding-left: 44rpx;
|
||
padding-right: 25rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
line-height: 106rpx;
|
||
font-weight: bold;
|
||
z-index: 1;
|
||
}
|
||
|
||
.form-title.redtitle {
|
||
width: 750rpx;
|
||
height: 106rpx;
|
||
background: #fb3024;
|
||
padding-left: 44rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
line-height: 106rpx;
|
||
font-weight: bold;
|
||
z-index: 1;
|
||
}
|
||
|
||
.form-title::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
left: 25rpx;
|
||
width: 6rpx;
|
||
height: 24rpx;
|
||
background-color: #fb3024;
|
||
z-index: 1;
|
||
}
|
||
|
||
.redtitle.form-title::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
left: 25rpx;
|
||
width: 6rpx;
|
||
height: 24rpx;
|
||
background-color: #fff;
|
||
z-index: 1;
|
||
}
|
||
|
||
.radio-check {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: #ffffff;
|
||
border: 1rpx solid #dddddd;
|
||
border-radius: 50%;
|
||
box-sizing: border;
|
||
position: relative;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.radio-check.checked {
|
||
border: 1rpx solid #fb3024;
|
||
background: #fb3024;
|
||
}
|
||
</style>
|