3
0
Fork 0
web-store-retail-h5/pages/other/haiConfirm.vue

855 lines
22 KiB
Vue
Raw 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>{{'收货人信息'}}</view>
</view>
<u-form-item :label="'收货人'"
borderBottom
prop="recName">
<u-input v-model="form.recName"
border="none"
:placeholder="'请输入收货人'" />
</u-form-item>
<u-form-item :label="'收货电话'"
borderBottom
prop="recPhone">
<u-input v-model="form.recPhone" maxlength="20"
border="none"
type="number"
:placeholder="'请输入收货电话'" />
</u-form-item>
<u-form-item :label="'收货地址'"
borderBottom
prop="diqu"
@click='getDiqu'>
<view class="disFlex justBwn">
<u-input v-model="form.diqu"
:placeholder="'请选收货地址'"
border="none"></u-input>
<u-icon name="arrow-right"></u-icon>
</view>
</u-form-item>
<u-form-item :label="'详细地址'"
borderBottom
prop="recAddress">
<u-input v-model="form.recAddress"
border="none"
maxlength="200"
:placeholder="'请输入详细地址'" />
</u-form-item>
<u-form-item :label="'邮费'"
borderBottom>
<u-input disabled
border="none"
v-model="form.postage" />
</u-form-item>
<u-form-item :label="'备注'"
borderBottom>
<u-input v-model="form.remark"
border="none"
:placeholder="'请输入备注'" />
</u-form-item>
</u-form>
<view class="heng">
</view>
<view class="subTxt">
<view>{{'历史地址'}}</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">{{'默认'}}</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">{{'商品业绩'}}(PV)</view>
<view class="tit1">{{ item.pvAmount | numberToCurrency}}</view>
</view>
<view class="disFlex justBwn">
<view class="tit3">{{'金额小计'}}</view>
<view class="tit1">{{ item.priceAmount | numberToCurrency}}</view>
</view>
</view>
</view>
</view>
<view class="pad">
<!-- <view class="disFlex justBwn">
<view class="tit3">{{'商品金额总计'}}(¥)</view>
<view class="tit1">{{ priceAmount | numberToCurrency | isLocal}}</view>
</view> -->
<view class="disFlex justBwn">
<view class="tit3">{{'邮费'}}:</view>
<view class="tit1">{{ form.postage | numberToCurrency | isLocal}}</view>
</view>
<view class="disFlex justBwn">
<view class="tit3">{{'总价'}}</view>
<view class="tit1">{{ totalAmont | numberToCurrency | isLocal}}</view>
</view>
<!-- <view class="disFlex justBwn">
<view class="tit3">{{'业绩'}}</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">{{'请阅读并同意'}}</view>
<view class="tit2"> 《{{'购买协议'}}》</view>
</view>
<view class="footer_r">
<u-button type="success"
class="uBtn"
shape="circle"
:loading="isLoading"
:loadingText="'购买中'"
@tap="goBuy"
color="linear-gradient(to right, #fb3024, #fb3024 )">{{'购买'}}</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="'确定要删除该收货地址吗'+''"
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: '安置左区',
},
{
id: 2,
label: '安置右区',
},
],
],
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: '快递发货',
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: '请输入收货人',
trigger: ['change', 'blur'],
},
],
recPhone: [
{
required: true,
message: '请输入收货电话',
trigger: ['change', 'blur'],
},
],
diqu: [
{
required: true,
message: '请选择收货地址',
trigger: ['change', 'blur'],
},
],
recAddress: [
{
required: true,
message: '请输入详细地址',
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: '删除成功',
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('请输入会员编号'))
} 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: '请阅读并同意购买协议',
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>