web-retail-h5/pages/other/haiConfirm.vue

855 lines
22 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-11-21 15:11:22
-->
<template>
<view class="content">
<view class="context">
<u-form :model="form"
labelWidth="75"
:rules="rules"
ref="uForm">
<view class="subTxt">
<view>{{$t('w_0065')}}</view>
</view>
<u-form-item :label="$t('MY_ORD_10')"
borderBottom
prop="recName">
<u-input v-model="form.recName"
border="none"
:placeholder="$t('w_0067')" />
</u-form-item>
<u-form-item :label="$t('w_0242')"
borderBottom
prop="recPhone">
<u-input v-model="form.recPhone" maxlength="20"
border="none"
type="number"
:placeholder="$t('w_0321')" />
</u-form-item>
<u-form-item :label="$t('w_0068')"
borderBottom
prop="diqu"
@click='getDiqu'>
<view class="disFlex justBwn">
<u-input v-model="form.diqu"
:placeholder="$t('w_0322')"
border="none"></u-input>
<u-icon name="arrow-right"></u-icon>
</view>
</u-form-item>
<u-form-item :label="$t('S_C_27')"
borderBottom
prop="recAddress">
<u-input v-model="form.recAddress"
border="none"
maxlength="200"
:placeholder="$t('w_0070')" />
</u-form-item>
<u-form-item :label="$t('w_0071')"
borderBottom>
<u-input disabled
border="none"
v-model="form.postage" />
</u-form-item>
<u-form-item :label="$t('MY_WAL_22')"
borderBottom>
<u-input v-model="form.remark"
border="none"
:placeholder="$t('w_0072')" />
</u-form-item>
</u-form>
<view class="heng">
</view>
<view class="subTxt">
<view>{{$t('w_0073')}}</view>
</view>
<u-radio-group v-model="moren"
shape="circle"
placement="column"
@change="checkRadio">
<view v-for="item in addressList"
:key="item.pkId"
class="disFlex address_a">
<u-radio activeColor="red"
:name="item.pkId"></u-radio>
<view class="address_r">
<view class="disFlex justBwn">
<view class="disFlex">
<view>{{item.recName}}</view>
<view class="mr" v-show="item.isDefault == 1">{{$t('w_0263')}}</view>
</view>
<view class="disFlex">
<u-icon name="edit-pen"
@click="editAddress(item)"
style="margin-right:20rpx"
color="#999999"
size="20"></u-icon>
<u-icon name="trash"
@click="delAds(item.pkId)"
color="#999999"
size="20"></u-icon>
</view>
</view>
<view class="address_rc">{{item.recPhone}}</view>
<view class="tit3">{{item.recArea}}{{item.recAddress}}</view>
</view>
</view>
</u-radio-group>
<view v-for="(item, index) in goodList"
:key="index"
class="goodList">
<view class="goodList_i">
<view class="goodList_it">
<img :src="item.cover"
class="cover"
alt="">
<view class="goodList_ir">
<view class="goodList_ib">
<view class="tit1">
{{ item.productName }}
</view>
<view class="tit5">
x{{ item.quantity }}
</view>
</view>
<view class="goodList_ib">
<view class="tit2">
{{ item.waresPrice | numberToCurrency | isLocal}}
</view>
<view class="tit3">PV: {{ item.pv | numberToCurrency | isLocal}}</view>
</view>
</view>
</view>
<view v-for="(stem,sndex) in item.waresSkuList"
:key="sndex"
class="product_i">
<img :src="stem.image"
alt="">
<view class="product_il">
<view class="tit4">{{ stem.specValueNames }} </view>
<!-- <view class="tit5">x{{ stem.quantity }}</view> -->
</view>
</view>
<view class="fen">
<view class="disFlex justBwn">
<view class="tit3">{{$t('w_0080')}}(PV)</view>
<view class="tit1">{{ item.pvAmount | numberToCurrency}}</view>
</view>
<view class="disFlex justBwn">
<view class="tit3">{{$t('w_0093')}}</view>
<view class="tit1">{{ item.priceAmount | numberToCurrency}}</view>
</view>
</view>
</view>
</view>
<view class="pad">
<!-- <view class="disFlex justBwn">
<view class="tit3">{{$t('w_0083')}}(¥)</view>
<view class="tit1">{{ priceAmount | numberToCurrency | isLocal}}</view>
</view> -->
<view class="disFlex justBwn">
<view class="tit3">{{$t('w_0071')}}:</view>
<view class="tit1">{{ form.postage | numberToCurrency | isLocal}}</view>
</view>
<view class="disFlex justBwn">
<view class="tit3">{{$t('w_0325')}}</view>
<view class="tit1">{{ totalAmont | numberToCurrency | isLocal}}</view>
</view>
<!-- <view class="disFlex justBwn">
<view class="tit3">{{$t('ENU_TOTAL_V_1')}}</view>
<view class="tit1">{{ allGoodsData.achieveAmount | numberToCurrency | isLocal}}</view>
</view> -->
</view>
</view>
<!-- 占空 -->
<view style="height:296rpx"></view>
<!-- 底部 -->
<view class="footer_f">
<view class="footer">
<view class="footer_l">
<u-checkbox-group v-model="agreementShow"
shape="circle"
activeColor="#FB3024"
@change="checkboxChange">
<u-checkbox :name="1">
</u-checkbox>
</u-checkbox-group>
<view class="tit3">{{$t('w_0207')}}</view>
<view class="tit2"> 《{{$t('w_0208')}}》</view>
</view>
<view class="footer_r">
<u-button type="success"
class="uBtn"
shape="circle"
:loading="isLoading"
:loadingText="$t('w_0313')"
@tap="goBuy"
color="linear-gradient(to right, #fb3024, #fb3024 )">{{$t('w_0085')}}</u-button>
</view>
</view>
</view>
<!-- 发货方式 -->
<u-picker :show="isDelivery"
@cancel='isDelivery=false'
@confirm="sureDelivery"
:columns="deliList"
keyName="label"></u-picker>
<!-- 运输方式 -->
<u-picker :show="isTrans"
@cancel='isTrans=false'
@confirm="sureTrans"
:columns="transList"
keyName="label"></u-picker>
<!-- 强制阅读协议 -->
<mustAgreeMent :waresCodeList='waresCodeList'></mustAgreeMent>
<u-modal :show="delAddress"
showConfirmButton
showCancelButton
:content="$t('w_0088')+''"
confirmColor='#DE3932'
@confirm="toDel"
@cancel="delAddress=false"
ref="uModal"
:asyncClose="true"></u-modal>
<v-address ref="address"
:defaultCode="defaultCode"
@addressData="addressData"></v-address>
</view>
</template>
<script>
import address from '@/components/address.vue'
import * as api from '@/config/regiest'
import mustAgreeMent from '@/components/mustAgreeMent.vue'
export default {
components: {
'v-address': address,
mustAgreeMent,
},
data() {
return {
delAddress:false,
waresCodeList: [],
defaultCode: [],
moren: '',
addressList: [],
deliList: [],
transList: [],
bankList: [],
isDelivery: false,
isBank: false,
isTrans: false,
placeList: [
[
{
id: 1,
label: this.$t('ENU_PLACE_D_1'),
},
{
id: 2,
label: this.$t('ENU_PLACE_D_2'),
},
],
],
isPlace: false,
countryIndex: 0,
isCountry: false,
userInfo: '',
countryList: [],
isClick: 0,
specialArea: 21,
shoppingArr: [],
allGoodsData: {
specialArea: 21,
},
pageList: {
mail: false,
card: false,
bankName: false,
bankNo: false,
accountBranch: false,
},
form: {
deliveryName: this.$t('ENU_DELIVERY_1'),
deliveryWay: 1,
postage: 0,
transType: 1,
pkGradeVal: '',
},
deliList: [],
diqu: '',
allData: [],
goodsNum: 1,
agreementShow: [],
priceAmount: 0, //商品总价
achiveAmount: 0, //总业绩
totalAmont: 0,
orderItemsParams: [],
isLoading: false,
centerCodeId: '',
rules: {
upgradeMemberCode: [
{
required: true,
validator: this.upgradeMemberCodePass,
trigger: ['blur'],
},
],
recName: [
{
required: true,
message: this.$t('w_0067'),
trigger: ['change', 'blur'],
},
],
recPhone: [
{
required: true,
message: this.$t('w_0321'),
trigger: ['change', 'blur'],
},
],
diqu: [
{
required: true,
message: this.$t('w_0069'),
trigger: ['change', 'blur'],
},
],
recAddress: [
{
required: true,
message: this.$t('w_0070'),
trigger: ['change', 'blur'],
},
],
},
allDataObj: {
pgpList: [],
},
goodList: [],
postList: [],
delId:''
}
},
onLoad(options) {
// // 数据源
// this.allData = JSON.parse(options.allData)
this.allData = JSON.parse(uni.getStorageSync('haiConfirm'))
let confirmOrderWaresInfoParamsList = []
this.allData.forEach((item) => {
item.waresSkuList.forEach((ctem) => {
confirmOrderWaresInfoParamsList.push({
pkTWares: ctem.pkTWares,
pkTWaresSku:ctem.pkTWaresSku||ctem.pkThWaresSku,
quantity: item.quantity,
source: item.source,
})
})
})
this.shoppingArr = JSON.parse(options.shoppArr)
// 获取购物车详情
this.getCatDetail(confirmOrderWaresInfoParamsList)
// 幂等性
this.getGenerate()
// 登录信息
this.userInfo = uni.getStorageSync('User')
this.form.upgradeMemberCode = this.userInfo.memberCode
this.getUserName()
},
onShow() {
// 获取地址
this.getAddressList()
},
methods: {
editAddress(item) {
uni.navigateTo({
url: '/pages/address/index?pkId=' + item.pkId,
})
},
delAds(id) {
this.delId = id
this.delAddress = true
},
toDel() {
api.delAddress(this.delId).then((res) => {
uni.showToast({
title: this.$t('w_0089'),
icon: 'none',
})
this.getAddressList()
})
this.delAddress = false
},
getCatDetail(confirmOrderWaresInfoParamsList) {
api
.waresinfo({
confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
})
.then((res) => {
this.goodList = res.data
let price = 0
this.goodList.forEach((item) => {
item.waresItemsParamList = []
price += parseFloat(item.priceAmount)
item.waresSkuList.forEach((ctem) => {
item.waresItemsParamList.push({
pkWaresSpecsSku: ctem.pkId,
})
})
})
this.priceAmount = price
this.totalAmont = 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()
})
},
checkAddress() {},
// 升级编号获取name
upgradeMemberCodePass(rule, value, callback) {
if (!value) {
callback(new Error(this.$t('w_0046')))
} else {
api
.upgRel({
upgradeMemberCode: value,
})
.then((res) => {
if (res.code == 200) {
this.form.upgradeMemberName = res.data.upgradeMemberName
// this.getMember()
this.$forceUpdate()
callback()
} else {
callback(new Error(res.msg))
}
})
.catch((err) => {
callback(new Error(err))
})
}
},
getAddressList() {
api.addressList().then((res) => {
this.addressList = res.data
this.addressList.forEach((item) => {
if (item.isDefault == 1) {
this.moren = item.pkId
this.checkRadio()
}
})
})
},
getUserName() {
api
.upgRel({
upgradeMemberCode: this.form.upgradeMemberCode,
})
.then((res) => {
if (res.code == 200) {
this.form.upgradeMemberName = res.data.upgradeMemberName
this.$forceUpdate()
}
})
},
checkboxChange(e) {
console.log(
'%c [ e ]-749',
'font-size:13px; background:#384d26; color:#7c916a;',
e
)
},
checkRadio() {
let arr = []
this.addressList.forEach((item) => {
if (item.pkId == this.moren) {
this.form.recName = item.recName
this.form.nameList = item.recArea
this.form.recPhone = item.recPhone
this.form.recAddress = item.recAddress
this.form.recProvince = item.recProvince
this.form.recCity = item.recCity
if (item.recCounty) {
this.form.diqu = `${item.recProvinceVal}-${item.recCityVal}-${item.recCountyVal}`
this.form.recCounty = item.recCounty
} else {
this.form.diqu = `${item.recProvinceVal}-${item.recCityVal}`
this.form.recCounty = ''
}
this.defaultCode = [
item.recProvince,
item.recCity,
item.recCounty || '',
]
}
})
this.allGoodsData.deliveryWay = this.form.deliveryWay
this.allGoodsData.transType = this.form.transType
this.getPostAge()
this.$forceUpdate()
},
getPostAge() {
let deleteList = []
this.shoppingArr.forEach((item) => {
deleteList.push({
shoppingId: item,
})
})
this.allGoodsData.deleteList = deleteList
api.queryPostage(Object.assign({specialArea:21},this.allGoodsData,this.form)).then((res) => {
this.form.postage = res.data.postage
this.totalAmont =
parseFloat(this.priceAmount) +
parseFloat(res.data.postage)
})
},
getTransList() {
api.transportList().then((res) => {
let data = res.data.map((item) => {
return {
id: item.value,
label: item.label,
}
})
this.transList = [data]
if (this.userInfo.pkCountry == 1) {
this.form.transType = 1
data.forEach((item) => {
if (item.id == 1) {
this.form.transTypeLabel = item.label
}
})
}
})
},
getDeliveryList() {
api.deliveryList().then((res) => {
let data = res.data.map((item) => {
return {
id: item.value,
label: item.label,
}
})
this.deliList = [data]
if (this.userInfo.pkCountry == 1) {
this.form.deliveryWay = 1
data.forEach((item) => {
if (item.id == 1) {
this.form.deliveryWayLabel = item.label
}
})
}
})
},
sureTrans(e) {
const { value } = e
this.form.transType = value[0].id
this.form.transTypeLabel = value[0].label
this.isTrans = false
},
sureDelivery(e) {
const { value } = e
this.form.deliveryWay = value[0].id
this.form.deliveryWayLabel = value[0].label
this.isDelivery = false
},
getGenerate() {
api.generate().then((res) => {
uni.setStorageSync('mToken', res.msg)
})
},
goBuy() {
this.$refs.uForm.validate().then((res) => {
if (this.agreementShow.length == 0) {
uni.showToast({
title: this.$t('w_0091'),
icon: 'none',
duration: 1500,
})
return
}
this.isLoading = true
let deleteList = []
this.shoppingArr.forEach((item) => {
deleteList.push({
shoppingId: item,
})
})
api.confirmShareOrder(
Object.assign({}, this.form, this.allGoodsData, {
orderItemsParams: this.postList,
deleteList: deleteList,
})
).then((res) => {
this.isLoading = false
if (res.code == 200) {
uni.navigateTo({
url:
'/pages/pay/index?paramsPost=' +
JSON.stringify(res.data) +
'&businessType=1',
})
}
})
})
},
getDiqu() {
this.$refs.address.setShow()
},
confirmPopup() {},
addressData(diqu, obj) {
this.form.diqu = diqu
this.form.recProvince = obj.province
this.form.recCity = obj.city
this.form.recCounty = obj.county
this.$forceUpdate()
this.getPostAge()
// this.queryAdressPostage()
},
},
}
</script>
<style lang="scss" scoped>
.content {
.con_top {
width: 100%;
position: fixed;
display: flex;
background: #fb3024;
font-size: 28rpx;
font-weight: 400;
color: #ffffff;
padding: 24rpx 0;
z-index: 1;
.con_top_i {
flex: 1;
text-align: center;
.bai {
width: 52rpx;
height: 6rpx;
background: #ffffff;
margin: 0 auto;
margin-top: 10rpx;
}
}
}
.zhan {
height: 96rpx;
}
}
.countImg {
width: 62rpx;
height: 41rpx;
margin-right: 20rpx;
}
.context {
}
::v-deep .u-form-item__body {
padding: 10px 20px;
}
::v-deep .u-input__content {
padding: 0px 20rpx;
}
::v-deep .u-form-item__body__right__message {
margin-left: 105px !important;
}
.disFlex {
display: flex;
align-items: center;
}
.justBwn {
width: 100%;
justify-content: space-between;
}
.goodList {
display: flex;
padding: 20rpx;
border-bottom: 1px solid #eee;
}
.cover {
width: 136rpx;
height: 136rpx;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 10rpx;
}
.goodList_i {
flex: 1;
}
.goodList_it {
display: flex;
padding: 0rpx 0 20rpx 0rpx;
.goodList_ir {
margin-left: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.goodList_ib {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 56rpx;
height: 56rpx;
}
}
}
}
.product_i {
display: flex;
align-items: center;
background: #F6F6F6;
padding: 28rpx;
.product_il {
display: flex;
align-items: center;
flex: 1;
justify-content: space-between;
margin-left: 20rpx;
}
img {
width: 50rpx;
height: 50rpx;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 10rpx;
}
}
.fen {
background: #F6F6F6;
padding: 0 28rpx 28rpx 28rpx;
}
.pad {
padding: 28rpx;
}
.footer_f {
position: fixed;
bottom: 0;
width: 100%;
z-index: 10;
background: #f2f2f2;
height: 296rpx;
}
.footer {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20rpx 24rpx 40rpx 20rpx;
.footer_l {
display: flex;
justify-content: center;
margin: 30rpx 0 40rpx 0;
}
.footer_r {
// flex: 1;
display: flex;
align-items: center;
font-size: 20rpx;
font-weight: 500;
color: #333333;
}
}
.tit1 {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
.tit2 {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #fb3024;
}
.tit3 {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
.tit4 {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
}
.tit5 {
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
.heng {
height: 20rpx;
background: #f2f2f2;
}
.subTxt {
background: #fb3024;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #fff;
padding: 35rpx 27rpx;
view {
border-left: 4px solid #fff;
padding: 0 20rpx;
}
}
.address_a {
padding: 27rpx;
border-bottom: 2rpx solid #eee;
}
.address_r {
flex: 1;
margin-left: 20rpx;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
}
.address_rc {
margin: 6rpx 0;
}
.mr {
margin-left: 20rpx;
background: #181818;
border-radius: 16rpx;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
padding: 6rpx 16rpx;
border-radius: 20px;
}
</style>