web-africa-h5/pages/prefecture/part/product.vue

549 lines
16 KiB
Vue
Raw Permalink Normal View History

2025-03-21 14:49:01 +08:00
<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>