Skip to content

C
center-shop-show-h5
提交 3a1cd176 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

订单详情页支持再次支付待付款订单

上级 b2710f96
显示空白字符变更
内嵌 并排
正在显示 包含 134 行增加 和 11 行删除
src/pages/buy/index.vue
浏览文件 @ 3a1cd176
......@@ -210,7 +210,7 @@ export default {
// window.sessionStorage.setItem('isBackFormH5Pay', 1)
window.localStorage.setItem('payment_order_id', res.payment_order_id)
window.localStorage.setItem('order_detail_id', res.order_detail_id)
window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(window.location.href)
window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(this.order_details_url)
} else if (payType === '12') {
// 支付宝网页支付
// window.sessionStorage.setItem('isBackFormH5Pay', 1)
......
src/pages/order/index.vue
浏览文件 @ 3a1cd176
......@@ -101,7 +101,6 @@ export default {
},
methods: {
handlePay(item) {
console.log(item)
const params = {
shop_id: item.shop_id,
spu_id: item.spu_id,
......@@ -117,10 +116,14 @@ export default {
redirect_url: encodeURIComponent(this.order_details_url)
}
if (this.isWxBrowser) {
if (this.openId) {
params.payment_method = '3'
params.open_id = this.openId
this.payment_method = '3'
this.fetchPlaceOrder(params)
} else {
Toast.success('正在准备发起支付数据中，请稍后再试')
}
} else if (this.isAliBrowser) {
params.payment_method = '12'
this.payment_method = '12'
......@@ -204,7 +207,7 @@ export default {
// 微信外微信h5支付
window.localStorage.setItem('payment_order_id', res.payment_order_id)
window.localStorage.setItem('order_detail_id', res.order_detail_id)
window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(window.location.href)
window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(this.order_details_url)
} else if (payType === '12') {
// 支付宝网页支付
window.localStorage.setItem('payment_order_id', res.payment_order_id)
......
src/pages/order/order-details.vue
浏览文件 @ 3a1cd176
......@@ -15,17 +15,25 @@
<van-cell-group>
<van-cell title="订单编号" :value="details.order_detail_id" />
<van-cell title="下单时间" :value="details.pay_time" />
<van-cell title="支付方式" :value="payType" />
<van-cell title="支付方式" :value="payTypeText" />
<van-cell title="商品总额" :value="`￥${details.payment_money}`" />
<van-cell title="支付状态" :value="orderStatus" />
</van-cell-group>
<div class="bottom-bar" v-if="false && orderStatus === '待付款'">
<van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">立即购买</van-button>
<div class="bottom-bar" v-if="orderStatus === '待付款'">
<van-button type="primary" round block color="#C01540" size="small" @click="handlePay(details)">立即购买</van-button>
</div>
<van-dialog v-model="dialogVisiable" title="请选择支付方式" show-cancel-button @confirm="handleDialogConfirm">
<van-radio-group v-model="payType">
<van-radio name="12">支付宝支付</van-radio>
<van-radio name="4">微信支付</van-radio>
</van-radio-group>
</van-dialog>
</div>
</template>
<script>
import { getOrderDetails } from '@/api/common'
import { getOrderDetails, createOrder } from '@/api/common'
import { getOpenId } from '@/api/account.js'
import { mapGetters } from 'vuex'
import { Toast } from 'vant'
const payTypeMap = {
0: '',
......@@ -39,14 +47,21 @@ export default {
return {
details: {},
orderDetailId: '',
isPayBack: false
isPayBack: false,
order_details_url: window.location.origin + '/order-details',
dialogVisiable: false,
payType: '12',
payParams: {},
payment_method: '12',
openId: '' // 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
}
},
computed: {
...mapGetters(['user', 'isWxBrowser', 'isAliBrowser']),
payOrderId() {
return window.localStorage.getItem('payment_order_id') || '6806478305244479488'
},
payType() {
payTypeText() {
const payTypeCode = (this.details.payment_method) || 0
return payTypeMap[payTypeCode]
},
......@@ -63,10 +78,56 @@ export default {
this.orderDetailId = window.localStorage.getItem('order_detail_id') || '6806478305244479488'
this.isPayBack = true
}
let openId = window.localStorage.getItem('openId')
if (openId === 'undefined' || openId === 'null') openId = ''
this.openId = openId // 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
if (this.isWxBrowser && !openId) {
const { code } = this.$route.query
if (code) this.fetchOpenId(code)
else this.getCode()
}
this.fetchOrderDetails()
},
methods: {
handleBuy() {},
handlePay(item) {
console.log(item)
const params = {
shop_id: item.shop_id,
spu_id: item.spu_id,
sku_id: item.sku_id,
order_id: item.order_id,
order_detail_id: item.order_detail_id,
buy_count: item.buy_count,
product_price: item.product_price,
customer_id: item.customer_id,
customer_phone: item.customer_phone,
payment_money: item.payment_money,
app_button_text: item.app_button_text,
redirect_url: encodeURIComponent(this.order_details_url)
}
if (this.isWxBrowser) {
if (this.openId) {
params.payment_method = '3'
params.open_id = this.openId
this.payment_method = '3'
this.fetchPlaceOrder(params)
} else {
Toast.success('正在准备发起支付数据中，请稍后再试')
}
} else if (this.isAliBrowser) {
params.payment_method = '12'
this.payment_method = '12'
this.fetchPlaceOrder(params)
} else {
this.payParams = params
this.dialogVisiable = true
}
},
handleDialogConfirm() {
this.payment_method = this.payType
const params = Object.assign({ payment_method: this.payType }, this.payParams)
this.fetchPlaceOrder(params)
},
imgJsonParse(val) {
if (typeof val === 'string' && typeof JSON.parse(val) === 'object') {
const [first = {}] = JSON.parse(val)
......@@ -85,6 +146,58 @@ export default {
}
}
})
},
getCode() {
const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(window.location.href)}`
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect`
},
// 获取微信openid
fetchOpenId(code) {
getOpenId({ code, identity: 'ezijing' }).then(response => {
if (response.code === 0) {
if (response.openid) {
this.openId = response.openid || ''
window.localStorage.setItem('openId', response.openid || '')
} else window.localStorage.removeItem('openId')
} else {
this.getCode()
}
})
},
fetchPlaceOrder(params) {
createOrder(params).then(res => {
if (res.code === 0 && res.msg === '成功') {
this.placeOrderCallback(res)
} else {
Toast.fail(res.msg || '购买下单失败')
}
})
},
placeOrderCallback(res) {
const payType = this.payment_method
if (payType === '3') {
// 微信内支付
if (typeof res.payment_more_info === 'string') {
const payInfo = JSON.parse(res.payment_more_info)
if (payInfo.appId) {
WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, (res) => {
console.log(res)
})
} else {
console.log('下单失败')
}
}
} else if (payType === '4') {
// 微信外微信h5支付
window.localStorage.setItem('payment_order_id', res.payment_order_id)
window.localStorage.setItem('order_detail_id', res.order_detail_id)
window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(this.order_details_url)
} else if (payType === '12') {
// 支付宝网页支付
window.localStorage.setItem('payment_order_id', res.payment_order_id)
window.localStorage.setItem('order_detail_id', res.order_detail_id)
window.location.href = res.payment_url
}
}
}
}
......@@ -162,4 +275,10 @@ export default {
font-size:0.24rem;
}
}
.van-radio-group{
padding:0.4rem;
.van-radio{
padding:0.2rem;
}
}
</style>
\ No newline at end of file
src/utils/axios.js
浏览文件 @ 3a1cd176
......@@ -7,7 +7,7 @@ const httpRequest = axios.create({
withCredentials: true,
headers: {
'Content-Type': 'application/json',
'spbill_create_ip': window.returnCitySN ? window.returnCitySN.cip : ''
spbill_create_ip: window.returnCitySN ? window.returnCitySN.cip : ''
}
})
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论