web-base-h5/pages/other/newGiftPay.vue

969 lines
25 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" v-if="isDeliveryWay">
<view class="subTxt1">{{'收货人信息'}}</view>
<!-- <span class="subTxt2"
@click="addAdress">
<u-icon color="#fb3024"
name="plus-circle-fill"></u-icon>
<view>{{'添加'}}</view>
</span> -->
</view>
<view v-if="isDeliveryWay">
<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>
</view>
</u-form>
<view class="heng">
</view>
<!-- <view class="subTxt" v-show="isDeliveryWay">
<view>{{'历史地址'}}</view>
</view> -->
<view v-for="(item, index) in allDataObj.pgpList"
: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="tit5">
{{ item.specsName}}
</view>
</view>
</view>
</view>
<!-- <view v-for="(stem,sndex) in item.waresItemsParamList"
:key="sndex"
class="product_i">
<img :src="stem.specCover"
alt="">
<view class="product_il">
<view class="tit4">{{ stem.productName }} {{ stem.skuInfo }}</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.achieveAmount | 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">{{ allGoodsData.priceAmount | numberToCurrency | isLocal}}</view>
</view>
<view class="disFlex justBwn">
<view class="tit3">{{'邮费'}}</view>
<view class="tit1">{{ form.postPrice | numberToCurrency | isLocal}}</view>
</view> -->
<view class="disFlex justBwn">
<view class="tit3">{{'总价'}}</view>
<view class="tit1">{{ allDataObj.price | numberToCurrency | isLocal}}</view>
</view>
<!-- <view class="disFlex justBwn">
<view class="tit3">{{'业绩'}}</view>
<view class="tit1">{{ allGoodsData.achieveAmount | numberToCurrency }}</view>
</view>
<view class="disFlex justBwn"
v-if="specialArea==13">
<view class="tit3">BV</view>
<view class="tit1">{{ allGoodsData.assAchieveAmount | numberToCurrency }}</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"
@click="toAgree"> 《{{'购买协议'}}》</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>
<!-- 发货仓库 -->
<u-picker :show="isCk"
@cancel='isCk=false'
@confirm="sureCk"
:columns="storehouseList"
keyName="label"></u-picker>
<!-- 所属店铺 -->
<u-picker :show="isDp"
@cancel='isDp=false'
@confirm="sureDp"
:columns="storeList"
keyName="label"></u-picker>
<!-- 强制阅读协议 -->
<mustAgreeMent :waresCodeList='waresCodeList'></mustAgreeMent>
<agreement ref="agreement"></agreement>
<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'
import agreement from '@/components/agreement.vue'
export default {
components: {
'v-address': address,
mustAgreeMent,
agreement,
},
data() {
return {
isDeliveryWay:true,
isDp: false,
storeList: [],
storehouseList: [],
isCk: false,
strTitle: '',
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: '',
shoppingArr: [],
allGoodsData: '',
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'],
},
],
transTypeLabel: [
{ validator: this.transPass, trigger: ['change'] },
],
deliveryWayLabel: [{
required: true,
message: '请选择发货方式',
trigger: ['change'],
}, ],
},
delId: '',
isSpace:false,
allDataObj:{},
allGoodsData: {},
}
},
onLoad(options) {
this.specialArea =9
// this.shoppingArr = JSON.parse(options.shoppArr)
this.allDataObj = JSON.parse(this.$route.query.data)
this.allGoodsData.pkNewPeople = this.allDataObj.pkNewPeople
// 获取购物车详情
// this.getCatDetail()
// 获取页面权限
// this.getPageList()
// 幂等性
this.getGenerate()
// 登录信息
this.userInfo = uni.getStorageSync('User')
// this.form.upgradeMemberCode = this.userInfo.memberCode
// this.getUserName()
},
onShow() {
// 获取地址
this.getAddressList()
},
methods: {
toAgree() {
// agreeMent
this.$refs.agreement.openDig()
},
getMember() {
let deleteList = []
this.shoppingArr.forEach((item) => {
deleteList.push({
shoppingId: item,
})
})
this.allGoodsData.deleteList = deleteList
this.allGoodsData.upgradeMemberCode = this.form.upgradeMemberCode
api.memLevel(this.allGoodsData).then((res) => {
if (res.data.isEnough) {
this.form.pkGradeVal = res.data.pkGradeVal
} else {
this.isLoading.close()
}
})
},
addAdress() {
uni.navigateTo({
url: '/pages/address/index',
})
},
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
},
getPageList() {
api.registerList().then((res) => {
res.data.forEach((item) => {
if (item.field == 'MAILBOX') {
this.pageList.mail = true
} else if (item.field == 'CREDENTIALS') {
this.pageList.card = true
} else if (item.field == 'BANK_NAME') {
this.pageList.bankName = true
} else if (item.field == 'BANK_NO') {
this.pageList.bankNo = true
} else if (item.field == 'Account_Branch') {
this.pageList.accountBranch = true
}
})
})
},
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.totalAmont = this.allGoodsData.priceAmount
// 获取运输方式
this.getTransList()
// 获取发货方式
this.getDeliveryList()
if (this.specialArea == 2) {
this.getMember()
}
if (this.userInfo.pkSettleCountry != 1) {
//获取会员店铺
this.getStoreList()
//获取仓库
this.getStorehouseList()
}
})
},
transPass(rule, value, callback) {
if (this.isDeliveryWay) {
if (!value) {
callback(new Error('请选择运输方式'))
} else {
callback()
}
} else {
callback()
}
},
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
if (this.specialArea == 2) {
this.getMember()
}
this.$forceUpdate()
callback()
} else {
callback(new Error(res.msg))
}
})
.catch((err) => {
callback(new Error(err))
})
}
},
getStorehouseList() {
api.storehouseList().then((res) => {
let data = res.rows.map((item) => {
return {
id: item.pkId,
label: item.name,
}
})
this.storehouseList = [data]
})
},
getStoreList() {
api.storeList().then((res) => {
let data = res.rows.map((item) => {
return {
id: item.pkId,
label: item.storeName,
}
})
this.storeList = [data]
})
},
sureCk(e) {
const { value } = e
this.form.pkStorehouse = value[0].id
this.form.pkStorehouseLabel = value[0].label
this.isCk = false
},
sureDp(e) {
const { value } = e
this.form.pkMemberStore = value[0].id
this.form.pkMemberStoreLabel = value[0].label
this.isDp = false
},
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(this.allGoodsData).then((res) => {
// this.form.postage = res.data.postage
// this.totalAmont =
// parseFloat(this.allGoodsData.priceAmount) +
// parseFloat(res.data.postage)
// })
// },
getPostAge() {
this.allGoodsData.specialArea = 9
api.queryAdressPostage(this.allGoodsData).then((res) => {
this.form.postage = Number(res.data.postage).toFixed(2)
this.totalAmont =
parseFloat(this.allGoodsData.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.pkSettleCountry == 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.pkSettleCountry == 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
if (value[0].id == 2 || value[0].id == 3) {
this.isDeliveryWay = false
} else {
this.isDeliveryWay = true
}
this.isDelivery = false
},
getGenerate() {
api.generate().then((res) => {
uni.setStorageSync('mToken', res.msg)
})
},
goBuy() {
this.$refs.uForm.validate().then((res) => {
this.isLoading = true
// url(
// Object.assign({}, this.form, this.allGoodsData, {
// deleteList: deleteList,
// })
// ).then((res) => {
// this.isLoading = false
// if (res.code == 200) {
// uni.navigateTo({
// url:
// '/pages/pay/index?paramsPost=' +
// JSON.stringify(res.data) +
// '&businessType=1',
// })
// }
// })
let obj = Object.assign({}, this.allGoodsData, this.form, {
specialArea: 9,
})
api
.confirmGiftOrder(obj)
.then((res) => {
this.isLoading = false
if (res.code == 200) {
// 下单成功,领取礼包
// this.getGifts()
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;
display: flex;
align-items: center;
justify-content: space-between;
.subTxt1 {
border-left: 4px solid #fff;
padding: 0 20rpx;
}
.subTxt2 {
display: flex;
align-items: center;
view {
margin-left: 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>