forked from angelo/web-retail-h5
644 lines
16 KiB
Vue
644 lines
16 KiB
Vue
<template>
|
||
<view class="main">
|
||
<u-popup
|
||
:show="pswShow"
|
||
class="pspopup"
|
||
mode="center"
|
||
closeable
|
||
@close="pswShow = false"
|
||
>
|
||
<view class="t_tit">二级密码</view>
|
||
<view class="box">
|
||
<u--input
|
||
border="surround"
|
||
type="password"
|
||
v-model="password"
|
||
></u--input>
|
||
<u-button
|
||
type="success"
|
||
class="uBtn"
|
||
shape="circle"
|
||
loadingText="支付中"
|
||
@tap="surePsw"
|
||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||
>{{ '立即支付' }}
|
||
</u-button>
|
||
</view>
|
||
</u-popup>
|
||
<view class="contents">
|
||
<view class="height-auto">
|
||
<view class="lines"></view>
|
||
<view class="text">收货信息</view>
|
||
</view>
|
||
<u-form :model="addressForm" labelWidth="auto" ref="uForm">
|
||
<view class="view-class">
|
||
<u-form-item :label="'收货人'" label-width="100px" prop="recName">
|
||
<u-input
|
||
v-model="addressForm.recName"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入收货人姓名"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item :label="'联系方式'" label-width="100px" prop="recPhone">
|
||
<u-input
|
||
v-model="addressForm.recPhone"
|
||
:maxlength="userInfo.pkSettleCountry == 1 ? 11 : 20"
|
||
type="number"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入联系方式"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view
|
||
class="view-class"
|
||
@click="getDiqu"
|
||
style="height: 110rpx; display: flex; align-items: center"
|
||
>
|
||
<u-form-item
|
||
:label="'收货地址'"
|
||
label-width="100px"
|
||
prop="recProvince"
|
||
>
|
||
<view
|
||
v-if="address"
|
||
style="font-size: 28rpx; color: #333; margin-left: 20rpx"
|
||
>{{ address }}</view
|
||
>
|
||
<view
|
||
style="
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
color: rgb(192, 196, 204);
|
||
"
|
||
v-else
|
||
>请选择</view
|
||
>
|
||
</u-form-item>
|
||
<view class="drop">
|
||
<image src="../../static/images/drop.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
:label="'详细地址'"
|
||
class="label-style"
|
||
label-width="100px"
|
||
prop="recAddress"
|
||
>
|
||
<u-input
|
||
v-model="addressForm.recAddress"
|
||
placeholder-class="place-class"
|
||
maxlength="200"
|
||
class="border-color"
|
||
:placeholder="'请输入详细地址'"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item :label="'备注'" label-width="100px" prop="address">
|
||
<u-input
|
||
v-model="addressForm.remark"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder=""
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
<view style="margin-top: 20rpx">
|
||
<view class="height-auto bgcolors">
|
||
<view class="lines color-styles"></view>
|
||
<view class="text" style="color: #333">商品信息</view>
|
||
</view>
|
||
<view style="background-color: #fff">
|
||
<view class="goods-info1" v-for="item in allData">
|
||
<view class="goods-infot">
|
||
<img :src="item.cover" class="cover" alt="" />
|
||
<view class="disFlex">
|
||
<view style="color: #333; font-size: 28rpx">{{
|
||
item.productName
|
||
}}</view>
|
||
<view style="color: #999; font-size: 22rpx"
|
||
>X{{ item.quantity }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="goods_infob" style="color: #999; font-size: 28rpx"
|
||
>产品规格:{{ item.specsName }}</view
|
||
>
|
||
</view>
|
||
<view class="goods-info" style="border: none">
|
||
<view style="color: #333; font-size: 28rpx">{{ '邮费' }}</view>
|
||
<view style="color: #333; font-size: 24rpx">￥{{ postage }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 成功 -->
|
||
<u-modal
|
||
:show="showSucce"
|
||
showConfirmButton
|
||
:content="content"
|
||
confirmColor="#DE3932"
|
||
@confirm="reset"
|
||
ref="uModal"
|
||
:asyncClose="true"
|
||
></u-modal>
|
||
<!-- 二维码 -->
|
||
<u-popup :show="wxPopup" mode="center" closeable @close="closewxPopup">
|
||
<view class="t_tits">{{ '微信支付' }}</view>
|
||
<view class="pay_code">
|
||
<div ref="qrCodeUrlWx" class="qrcode"></div>
|
||
</view>
|
||
</u-popup>
|
||
<v-address
|
||
ref="address"
|
||
@getAddressData="AddressData"
|
||
:defaultCode="defaultCode"
|
||
@addressData="addressData"
|
||
></v-address>
|
||
<u-button type="success" shape="circle" class="btn" @click="paySubmit"
|
||
>购 买</u-button
|
||
>
|
||
<view style="height: 20rpx"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var payStatus
|
||
import * as api from '@/config/pay.js'
|
||
import * as apis from '@/config/order.js'
|
||
import { setToken } from '@/config/auth.js'
|
||
import * as min from '@/config/balance.js'
|
||
import address from '@/components/address.vue'
|
||
import store from '@/store'
|
||
export default {
|
||
data() {
|
||
return {
|
||
content: '支付成功',
|
||
showSucce: false,
|
||
paramsPost: {},
|
||
wxPopup: false,
|
||
postage: 0,
|
||
password: '',
|
||
pswShow: false,
|
||
userInfo: '',
|
||
check: false,
|
||
address: '',
|
||
defaultCode: [],
|
||
urls: '/member/api/maker-space/update-file',
|
||
addressForm: {
|
||
recName: '',
|
||
recPhone: '',
|
||
recProvince: '',
|
||
recCity: '',
|
||
recCounty: '',
|
||
recAddress: '',
|
||
isDefault: 0,
|
||
pkId: '',
|
||
postage: 0,
|
||
},
|
||
num: 0,
|
||
rules: {
|
||
recName: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '姓名不能为空',
|
||
},
|
||
],
|
||
recAddress: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '详细地址不能为空',
|
||
},
|
||
],
|
||
recProvince: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: '地址不能为空',
|
||
},
|
||
],
|
||
recPhone: [
|
||
{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur'],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return this.$u.test.mobile(value)
|
||
},
|
||
message: '手机号格式不正确',
|
||
trigger: ['blur'],
|
||
},
|
||
],
|
||
},
|
||
allData: [],
|
||
orderCode: '',
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
let allData = decodeURIComponent(window.location.href).split('=')
|
||
this.num = allData[2].split('#')[0]
|
||
// 幂等性
|
||
this.getGenerate()
|
||
this.getApiList()
|
||
this.userInfo = uni.getStorageSync('User')
|
||
},
|
||
onUnload() {},
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
components: {
|
||
'v-address': address,
|
||
},
|
||
methods: {
|
||
getApiList() {
|
||
let allData = decodeURIComponent(window.location.href).split('=')
|
||
let num = allData[2].split('#')[0]
|
||
apis
|
||
.pickDetails({
|
||
quantity: allData[2].split('#')[0],
|
||
pkId: allData[1].split('&')[0],
|
||
})
|
||
.then(res => {
|
||
if (res.code == '200') {
|
||
this.allData = res.data.detailList
|
||
}
|
||
})
|
||
},
|
||
getGenerate() {
|
||
api.generate().then(res => {
|
||
uni.setStorageSync('mToken', res.msg)
|
||
})
|
||
},
|
||
paySubmit() {
|
||
this.$refs.uForm.validate().then(res => {
|
||
let allData = decodeURIComponent(window.location.href).split('=')
|
||
let obj = {
|
||
quantity: allData[2].split('#')[0],
|
||
pkId: allData[1].split('&')[0],
|
||
recName: this.addressForm.recName,
|
||
recPhone: this.addressForm.recPhone,
|
||
recProvince: this.addressForm.recProvince,
|
||
recCity: this.addressForm.recCity,
|
||
recCounty: this.addressForm.recCounty,
|
||
recAddress: this.addressForm.recAddress,
|
||
remark: this.addressForm.remark,
|
||
}
|
||
// this.pswShow = true
|
||
api.payPickOrder(obj).then(res => {
|
||
if (res.code == 200) {
|
||
// this.scanPayBfWx(8)
|
||
|
||
this.orderCode = res.data
|
||
this.pswShow = true
|
||
// this.paramsPost = { orderCode: res.data, specialArea: 8 }
|
||
}
|
||
})
|
||
})
|
||
},
|
||
reset() {
|
||
this.$store.dispatch('GetInfo').then(res => {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index',
|
||
})
|
||
})
|
||
},
|
||
// 查询订单状态
|
||
checkPayStatus(data) {
|
||
let that = this
|
||
// 定时器
|
||
payStatus = setInterval(() => {
|
||
if (that.sucPay == 1) {
|
||
// 清除定时器
|
||
clearInterval(payStatus)
|
||
this.wxPopup = false
|
||
this.showSucce = true
|
||
} else {
|
||
api.payStatus(data).then(res => {
|
||
that.sucPay = res.data
|
||
})
|
||
}
|
||
}, 2000)
|
||
},
|
||
closewxPopup() {
|
||
this.wxPopup = false
|
||
this.$refs.qrCodeUrlWx.innerHTML = ''
|
||
clearInterval(payStatus)
|
||
},
|
||
scanPayBfWx(val) {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
this.wxPopup = true
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx,
|
||
{
|
||
width: 280,
|
||
height: 280,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
getPostAge(data) {
|
||
apis.pickPostAge(data).then(res => {
|
||
this.postage = res.data
|
||
// this.totalAmont =
|
||
// parseFloat(this.allGoodsData.priceAmount) +
|
||
// parseFloat(res.data.postage)
|
||
})
|
||
},
|
||
surePsw() {
|
||
min
|
||
.checkPwd({
|
||
pwd: this.password,
|
||
})
|
||
.then(res => {
|
||
if (res.code == 200) {
|
||
let allData = decodeURIComponent(window.location.href).split('=')
|
||
let obj = {
|
||
orderCode: this.orderCode,
|
||
specialArea: 8,
|
||
payPwd: this.password,
|
||
pkSettleCountry: this.pkCountry || 1,
|
||
pkCountry: this.pkCountry || 1,
|
||
}
|
||
api
|
||
.payOthOrder(obj)
|
||
.then(res => {
|
||
if (res.code == 200) {
|
||
this.pswShow = false
|
||
uni.showToast({
|
||
title: '提货成功',
|
||
icon: 'none',
|
||
})
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/mine/order/index',
|
||
})
|
||
}, 500)
|
||
// this.scanPayBfWx(8)
|
||
// this.pswShow = false
|
||
// let paramsPost = { orderCode: res.data, specialArea: 8 }
|
||
// uni.navigateTo({
|
||
// url:
|
||
// '/pages/pay/index?paramsPost=' +
|
||
// JSON.stringify(paramsPost) +
|
||
// '&businessType=1',
|
||
// })
|
||
// this.paramsPost = { orderCode: res.data, specialArea: 8 }
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.isLoading.close()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
AddressData(name) {
|
||
this.address = name
|
||
},
|
||
getDiqu() {
|
||
this.$refs.address.setShow()
|
||
},
|
||
addressData(diqu, obj) {
|
||
this.address = diqu
|
||
this.addressForm.recProvince = obj.province
|
||
this.addressForm.recCity = obj.city
|
||
this.addressForm.recCounty = obj.county
|
||
let allData = decodeURIComponent(window.location.href).split('=')
|
||
let data = {
|
||
quantity: allData[2].split('#')[0],
|
||
pkId: allData[1].split('&')[0],
|
||
recProvince: obj.province,
|
||
recCity: obj.city,
|
||
}
|
||
this.getPostAge(data)
|
||
this.$forceUpdate()
|
||
// this.getPostAge()
|
||
// this.queryAdressPostage()
|
||
},
|
||
checkTap() {
|
||
if (this.addressForm.isDefault == 0) {
|
||
this.addressForm.isDefault = 1
|
||
} else {
|
||
this.addressForm.isDefault = 0
|
||
}
|
||
},
|
||
getAddressData(e) {
|
||
console.error(e)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pay_code {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding: 20rpx;
|
||
.qrcodeWx {
|
||
}
|
||
}
|
||
.qrcode {
|
||
display: inline-block;
|
||
img {
|
||
width: 132px;
|
||
height: 132px;
|
||
background-color: #fff; //设置白色背景色
|
||
padding: 6px; // 利用padding的特性，挤出白边
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.t_tits {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
.goods-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1rpx solid #eee;
|
||
border-bottom: 1rpx solid #eee;
|
||
// background-color: #fff;
|
||
height: 95rpx;
|
||
line-height: 95rpx;
|
||
padding: 0 30rpx;
|
||
// width: 750rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
.goods-info1 {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
border-top: 1rpx solid #eee;
|
||
border-bottom: 1rpx solid #eee;
|
||
// background-color: #fff;
|
||
// height: 95rpx;
|
||
// line-height: 95rpx;
|
||
padding: 0 30rpx;
|
||
// width: 750rpx;
|
||
margin: 0 20rpx;
|
||
.goods-infot {
|
||
display: flex;
|
||
}
|
||
.goods_infob {
|
||
padding: 10rpx 0;
|
||
}
|
||
.cover {
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
background: #ffffff;
|
||
border: 1px solid #eeeeee;
|
||
border-radius: 10rpx;
|
||
margin-right: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
.disFlex {
|
||
flex: 1;
|
||
display: flex;
|
||
// align-items: center;
|
||
margin-top: 10px;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.color-styles {
|
||
background-color: #e03030 !important;
|
||
}
|
||
.bgcolors {
|
||
background-color: #fff !important;
|
||
}
|
||
.height-auto {
|
||
height: 94rpx;
|
||
background: #005bac;
|
||
line-height: 94rpx;
|
||
padding: 0 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.lines {
|
||
width: 6rpx;
|
||
height: 24rpx;
|
||
background: #ffffff;
|
||
}
|
||
.text {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
margin-left: 10rpx;
|
||
}
|
||
.pspopup {
|
||
// padding: 30rpx;
|
||
.t_tit {
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.c_tit {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.box {
|
||
padding: 40rpx 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.uBtn {
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
:v-deep .u-form-item__body__right__message {
|
||
margin-left: 215rpx !important;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.drop {
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
}
|
||
}
|
||
.check {
|
||
position: relative;
|
||
view {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1rpx solid #dddddd;
|
||
border-radius: 50%;
|
||
margin-top: 25rpx;
|
||
}
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
right: 0rpx;
|
||
top: 25rpx;
|
||
// margin-top: 20rpx;
|
||
}
|
||
}
|
||
.flex-s {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
}
|
||
.label-style {
|
||
display: block !important;
|
||
}
|
||
:v-deep .label-style .u-form-item__body__left {
|
||
display: block !important;
|
||
margin-top: 20rpx;
|
||
}
|
||
.uni-textarea {
|
||
height: 100rpx;
|
||
}
|
||
.view-class {
|
||
border-bottom: 1rpx solid #eee;
|
||
margin: 0 30rpx;
|
||
position: relative;
|
||
}
|
||
.border-color {
|
||
border: none;
|
||
}
|
||
page {
|
||
background-color: #f2f2f2;
|
||
}
|
||
.contents {
|
||
background-color: #fff;
|
||
}
|
||
.btn {
|
||
background-color: #005bac;
|
||
border: none;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 30rpx;
|
||
margin: 100rpx auto auto auto;
|
||
width: 690rpx;
|
||
}
|
||
</style>
|