Skip to content

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

增加个人中心和订单模块

上级 ed6fcd4a
隐藏空白字符变更
内嵌 并排
正在显示 包含 197 行增加 和 80 行删除
src/api/common.js
浏览文件 @ 72537124
......@@ -27,17 +27,17 @@ export function createOrder(data) {
/**
* 查询支付状态
*/
export function checkPayStatus(data) {
return httpRequest.post('/api/shop/pay/order/callback', data)
export function checkPayStatus(params) {
return httpRequest.get('/api/shop/pay/order/callback', { params })
}
/**
* 查询订单列表
*/
export function getOrderList(data) {
return httpRequest.post('/api/shop/order/range/search', data)
return httpRequest.post('/api/shop/order/search', data)
}
/**
* 查询订单列表
* 查询订单详情
*/
export function getOrderDetails(data) {
return httpRequest.post('/api/shop/order/search', data)
......
src/pages/buy/components/BuyPopup.vue
浏览文件 @ 72537124
......@@ -30,8 +30,8 @@
</van-form>
<van-dialog v-model="dialogVisiable" title="请选择支付方式" show-cancel-button @confirm="handleDialogConfirm">
<van-radio-group v-model="payType">
<van-radio name="ali">支付宝支付</van-radio>
<van-radio name="wx">微信支付</van-radio>
<van-radio name="12">支付宝支付</van-radio>
<van-radio name="4">微信支付</van-radio>
</van-radio-group>
</van-dialog>
</van-popup>
......@@ -81,11 +81,12 @@ export default {
}
},
dialogVisiable: false,
payType: 'ali'
payType: '12',
resFields: []
}
},
computed: {
...mapGetters(['isPhone', 'isWxBrowser']),
...mapGetters(['isPhone', 'isWxBrowser', 'isAliBrowser']),
query() {
return this.$route.query
},
......@@ -129,10 +130,19 @@ export default {
this.spec = val.value
},
handleSuccess(val) {
this.dialogVisiable = true
if (this.isWxBrowser) {
this.payType = '3'
this.formParams(val)
} else if (this.isAliBrowser) {
this.payType = '12'
this.formParams(val)
} else {
this.dialogVisiable = true
this.resFields = val
}
},
handleDialogConfirm() {
console.log('关闭弹窗')
this.formParams(this.resFields)
},
formParams(val) {
const fields = []
......@@ -148,6 +158,7 @@ export default {
sku_id: this.spec,
buy_count: this.form.count,
product_price: this.price,
payment_method: this.payType,
payment_money: (parseFloat(this.price) * parseInt(this.form.count)).toFixed(2),
app_button_text: JSON.stringify(fields)
}
......
src/pages/buy/index.vue
浏览文件 @ 72537124
......@@ -52,7 +52,7 @@ import { getGoodsList, getShopList, createOrder, checkPayStatus } from '@/api/co
import { getOpenId } from '@/api/account.js'
import store from '@/store'
import { mapGetters } from 'vuex'
import { Dialog, Toast } from 'vant'
import { Toast } from 'vant'
export default {
components: { BuyPopup, PhoneCodeLoginPopup },
data() {
......@@ -92,16 +92,6 @@ export default {
beforeMount() {
this.fetchGoodsDetails()
this.fetchShopDetails()
if (this.isBackFormH5Pay) {
Dialog.alert({
title: '支付确认',
message: '确认已经完成微信支付',
theme: 'round-button'
}).then(() => {
this.fetchCheckPayStatus()
})
window.sessionStorage.removeItem('isBackFormH5Pay')
}
if (this.isWxBrowser && !this.openId) {
const { code } = this.$route.query
if (code) this.fetchOpenId(code)
......@@ -124,9 +114,9 @@ export default {
async handleBuy() {
const isLogin = store.state.isLogin || (await store.dispatch('checkLogin'))
if (isLogin) {
if (this.isWxBrowser) {
this.payment_method = '3'
}
// if (this.isWxBrowser) {
// this.payment_method = '3'
// }
this.popupVisiable = true
} else {
this.loginPopupVisiable = true
......@@ -138,9 +128,9 @@ export default {
params.customer_id = this.user.id
params.customer_phone = this.user.phone || ''
params.buy_count = (params.buy_count).toString()
params.payment_method = this.payment_method
params.redirect_url = encodeURIComponent(this.order_details_url)
if (this.payment_method === '3') {
this.payment_method = params.payment_method
if (params.payment_method === '3') {
params.open_id = this.openId
}
this.fetchPlaceOrder(params)
......
src/pages/my/index.vue
浏览文件 @ 72537124
......@@ -10,7 +10,7 @@
<span>{{user.realname || user.nickname}}</span>
</div>
<div class="order-cont">
<van-cell title="我的订单" class="van-cell--borderless" is-link value="查看全部" @click="handleNavOrder('all')"/>
<van-cell title="我的订单" class="van-cell--borderless" is-link value="查看全部" @click="handleNavOrder('')"/>
<ul>
<li @click="handleNavOrder('1')">
<img class="error-404" src="@/assets/images/icon_wait_pay.png" alt="页面未找到" />
......
src/pages/order/index.vue
浏览文件 @ 72537124
<template>
<div class="main-container">
<div class="search-bar">
<van-icon name="arrow-left" />
<van-search
v-model="search"
shape="round"
size="small"
background="#f7f7f7"
placeholder="请输入搜索关键词"
/>
</div>
<van-tabs v-model="active" sticky>
<van-tab title="全部"></van-tab>
<van-tab title="待付款"></van-tab>
<van-tab title="待发货"></van-tab>
<van-tab title="已完成"></van-tab>
</van-tabs>
<van-sticky class="top">
<div class="search-bar">
<van-icon name="arrow-left" @click="$router.go(-1)" />
<van-search
v-model="search"
shape="round"
size="small"
background="#f7f7f7"
placeholder="搜索产品"
@input="fetchOrderList"
/>
</div>
<van-tabs v-model="active" @change="fetchOrderList">
<van-tab title="全部" name=""></van-tab>
<van-tab title="待付款" name="1"></van-tab>
<van-tab title="待发货" name="2"></van-tab>
<van-tab title="已完成" name="3"></van-tab>
</van-tabs>
</van-sticky>
<ul class="order-list">
<li class="order-item" v-for="item in list" :key="item.id">
<li class="order-item" v-for="item in list" :key="item.id" @click="navOrderDetails(item)">
<div class="content">
<div class="thumb">
<img :src="item.thumb">
<img :src="imgJsonParse(item.chart_oss)">
</div>
<div class="right">
<div class="status-row">{{item.status | statusFilter}}</div>
<div class="status-row">{{item.order_status | statusFilter}}</div>
<div class="title-row">
<div class="title van-ellipsis">{{item.spu_name}}</div>
<div class="price">￥{{item.price}}</div>
<div class="price">￥{{item.product_price}}</div>
</div>
<div class="spec-row">
<div class="spec">{{item.spec}}</div>
<div>×{{item.num}}</div>
<div>×{{item.buy_count}}</div>
</div>
<div class="sum_pay">需付款￥{{item.sum_pay}}</div>
<div class="sum_pay">需付款￥{{item.payment_money}}</div>
</div>
</div>
<div class="pay_bar" v-if="item.status === 0">
<div class="pay_bar" v-if="false && item.order_status === '1'">
<p><span>更多</span></p>
<van-button plain round type="primary" size="mini" color="#C01540">付款</van-button>
</div>
</li>
</ul>
<van-empty description="暂无订单" v-if="list.length === 0"/>
</div>
</template>
<script>
import { getOrderList } from '@/api/common'
import { mapGetters } from 'vuex'
const statusMap = {
0: '等待买家付款',
1: '卖家已发货',
2: '交易完成'
1: '等待买家付款',
2: '等待卖家发货',
3: '卖家已发货',
4: '交易完成',
5: '订单已关闭'
}
export default {
data() {
return {
search: '',
active: '',
list: [
{ price: '350.00', num: 2, desc: '紫荆-Kelley MSF五期班开学典礼晚宴', spu_name: '紫荆-Kelley MSF五期班开学典礼晚宴', thumb: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-h5/goods_01.png', id: '111', pay_count: 222, status: 0, spec: '红，20', sum_pay: '700.00' },
{ price: '10.00', num: 1, desc: '描述信息', spu_name: '商品标题', thumb: 'https://img01.yzcdn.cn/vant/ipad.jpeg', id: '222', pay_count: 222, status: 1, spec: '红，L', sum_pay: '10.00' }
]
active: '1',
list: []
}
},
computed: {
...mapGetters(['user'])
},
filters: {
statusFilter(val) {
return statusMap[val]
}
},
created() {
const query = this.$route.query
this.active = query.type || ''
this.fetchOrderList()
},
methods: {
navOrderDetails(item) {
console.log(item)
this.$router.push({ path: '/order-details', query: { od_id: item.order_detail_id } })
},
imgJsonParse(val) {
if (typeof val === 'string' && typeof JSON.parse(val) === 'object') {
const [first = {}] = JSON.parse(val)
return first.url
} else {
return ''
}
},
fetchOrderList() {
const params = {
customer_id: this.user.id,
order_status: this.active,
page_size: '20'
}
getOrderList(params).then(res => {
if (res.code === 0 && res.msg === '成功') {
this.list = res.data
} else {
this.list = []
}
})
}
}
}
</script>
<style lang="scss">
.top{
.van-sticky{
padding:0.2rem 0.1rem 0.1rem;
}
.van-sticky--fixed{
background:#fff;
box-shadow: 0 8px 12px #ebedf0;
.van-search{
background:#fff !important;
}
}
}
.search-bar{
display:flex;
>.van-icon{
......@@ -90,23 +143,40 @@ export default {
}
}
}
.van-tabs{
.van-tabs__nav{
background: transparent;
.van-tab{
font-size:0.32rem;
line-height:44rem;
}
.van-tab--active{
color:#C01540;
font-size:0.36rem;
}
.van-tabs__line{
display:none;
}
}
}
.order-item{
background:#fff;
.content{
position:relative;
box-sizing:border-box;
padding:4vw 0 2vw 30vw;
height:36vw;
margin-top:15px;
border-radius:3px;
padding:0.2rem 0 0.2rem 2rem;
height:2.5rem;
margin-bottom:0.3rem;
border-radius:0.06rem;
.thumb{
width:26vw;
height:26vw;
width:2rem;
height:2rem;
position:absolute;
left:0;
top:5vw;
top:0.2rem;
img{
width:80%;
height:80%;
display:block;
margin:10% auto;
}
......@@ -115,34 +185,35 @@ export default {
display:flex;
flex-direction:column;
height:100%;
padding-right:10px;
padding-right:0.2rem;
.status-row{
line-height:0.48rem;
color:#C01540;
text-align:right;
}
.title-row{
line-height:30px;
line-height:0.6rem;
flex:1;
display:flex;
.price{
font-size:13px;
font-size:0.26rem;
}
.title{
font-size:14px;
font-size:0.28rem;
flex:1;
}
}
.spec-row{
color:#9B9B9B;
display:flex;
font-size:0.24rem;
.spec{
flex:1;
}
}
.sum_pay{
text-align:right;
line-height:26px;
line-height:0.52rem;
}
}
}
......@@ -158,5 +229,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
src/pages/order/order-details.vue
浏览文件 @ 72537124
......@@ -19,13 +19,14 @@
<van-cell title="商品总额" :value="`￥${details.payment_money}`" />
<van-cell title="支付状态" :value="orderStatus" />
</van-cell-group>
<div class="bottom-bar" v-if="orderStatus === '待付款'">
<div class="bottom-bar" v-if="false && orderStatus === '待付款'">
<van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">立即购买</van-button>
</div>
</div>
</template>
<script>
import { getOrderDetails } from '@/api/common'
import { getOrderDetails, checkPayStatus } from '@/api/common'
import { getNonce } from '@/utils/utils'
const payTypeMap = {
0: '',
3: '微信支付',
......@@ -36,14 +37,11 @@ const orderStatusMap = { 1: '待付款', 2: '待发货', 3: '已发货', 4: '已
export default {
data() {
return {
order_detail_id: '6806478305244479488',
details: {}
details: {},
orderDetailId: ''
}
},
computed: {
orderDetailId() {
return window.localStorage.getItem('order_detail_id') || '6806478305244479488'
},
payOrderId() {
return window.localStorage.getItem('payment_order_id') || '6806478305244479488'
},
......@@ -57,9 +55,16 @@ export default {
}
},
created() {
if (this.$route.query.od_id) {
this.orderDetailId = this.$route.query.od_id
} else {
this.orderDetailId = window.localStorage.getItem('order_detail_id') || '6806478305244479488'
this.repeatHandle()
}
this.fetchOrderDetails()
},
methods: {
handleBuy() {},
imgJsonParse(val) {
if (typeof val === 'string' && typeof JSON.parse(val) === 'object') {
const [first = {}] = JSON.parse(val)
......@@ -68,8 +73,29 @@ export default {
return ''
}
},
repeatHandle() {
this.timer && clearInterval(this.timer)
this.timer = setInterval(() => {
if (this.paySuccess) {
this.timer && clearInterval(this.timer)
return
}
this.fetchOrderStatus()
}, 3000)
},
fetchOrderStatus() {
const params = {
timestamp: parseInt(Date.now() / 1000),
nonce: getNonce(12),
signature: 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d',
order_id: this.payOrderId
}
checkPayStatus(params).then(res => {
if (res.code === '0' && res.msg === '成功') {}
})
},
fetchOrderDetails() {
getOrderDetails({ order_detail_id: this.order_detail_id }).then(res => {
getOrderDetails({ order_detail_id: this.orderDetailId }).then(res => {
if (res.code === 0 && Array.isArray(res.data)) {
const [first = {}] = res.data
this.details = first
......
src/utils/utils.js 0 → 100644
浏览文件 @ 72537124
/**
* 获取随机字符串
* @param {number} length
* @returns {String}
*/
export function getNonce(length) {
typeof length !== 'number' && (length = 16)
const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'k', 'm', 'n', 'p', 'r', 's', 't', 'w', 'x', 'y', 'z', 2, 3, 4, 5, 6, 7, 8]
const charsLen = chars.length;
let str = ''
for (let i = 0; i < length; i++) {
const idx = parseInt(charsLen * Math.random())
let _char = chars[idx];
if (typeof _char === 'string' && idx % 2) {
_char = _char.toUpperCase()
}
str += _char
}
return str
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论