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

969 lines
25 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" v-if="isDeliveryWay">
<view class="subTxt1">{{$t('w_0065')}}</view>
<!-- <span class="subTxt2"
@click="addAdress">
<u-icon color="#fb3024"
name="plus-circle-fill"></u-icon>
<view>{{$t('w_0328')}}</view>
</span> -->
</view>
<view v-if="isDeliveryWay">
<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>
</view>
</u-form>
<view class="heng">
</view>
<!-- <view class="subTxt" v-show="isDeliveryWay">
<view>{{$t('w_0073')}}</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">{{$t('w_0080')}}(PV)</view>
<view class="tit1">{{ item.achieveAmount | 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">{{ allGoodsData.priceAmount | numberToCurrency | isLocal}}</view>
</view>
<view class="disFlex justBwn">
<view class="tit3">{{$t('w_0071')}}</view>
<view class="tit1">{{ form.postPrice | numberToCurrency | isLocal}}</view>
</view> -->
<view class="disFlex justBwn">
<view class="tit3">{{$t('w_0325')}}</view>
<view class="tit1">{{ allDataObj.price | numberToCurrency | isLocal}}</view>
</view>
<!-- <view class="disFlex justBwn">
<view class="tit3">{{$t('ENU_TOTAL_V_1')}}</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">{{$t('w_0207')}}</view>
<view class="tit2"
@click="toAgree"> 《{{$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>
<!-- 发货仓库 -->
<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="$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'
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: 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: '',
shoppingArr: [],
allGoodsData: '',
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'],
},
],
transTypeLabel: [
{ validator: this.transPass, trigger: ['change'] },
],
deliveryWayLabel: [{
required: true,
message: this.$t('w_0062'),
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: this.$t('w_0089'),
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(this.$t('w_0064')))
} else {
callback()
}
} else {
callback()
}
},
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
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>