chenkainan
1 year ago
7 changed files with 1545 additions and 5 deletions
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="logo flex-center">LOGO</view> |
|||
|
|||
<view :class="['btn', 'flex-center', {'btns': flag}]" @click="getUserInfo()">快捷登录</view> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/user/tips.png" class="tips" v-show="!flag"></image> |
|||
<footer class="flex-between"> |
|||
<view @click="flag = !flag" :style="{border: flag ? 'none' : ''}"><image src="https://static.ticket.sz-trip.com/yandu/images/user/dui.png" v-show="flag"></image></view> |
|||
我已阅读并同意 <span @click="gotoPath('/subPackages/user/privacy')">《用户服务协议》、《隐私政策》</span> |
|||
</footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
flag: false |
|||
} |
|||
}, |
|||
methods: { |
|||
getUserInfo() { |
|||
if(!this.flag) return; |
|||
|
|||
var _this = this |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
success(loginRes) { |
|||
uni.getUserInfo({ |
|||
withCredentials: true, |
|||
success(res) { |
|||
_this.Post({ |
|||
code: loginRes.code, |
|||
userInfo: res.userInfo, |
|||
encryptedData: res.encryptedData, |
|||
iv: res.iv, |
|||
wechat_qrcode: uni.getStorageSync('wechat_qrcode')?uni.getStorageSync('wechat_qrcode'):'' |
|||
}, '/api/mini_program/login').then(resTwo => { |
|||
_this.$store.commit('changeUserInfo', resTwo.data.userinfo) |
|||
if (_this.$store.state.user.toPath.includes('user/user')) { |
|||
uni.switchTab({ |
|||
url: _this.$store.state.user.toPath |
|||
}) |
|||
} else { |
|||
uni.navigateBack({}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
fail(err) { |
|||
console.log(err); |
|||
}, |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
height: 100vh; |
|||
} |
|||
|
|||
.logo { |
|||
width: 156rpx; |
|||
height: 156rpx; |
|||
background: #87CD93; |
|||
border-radius: 50%; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
top: 66.67rpx; |
|||
left: 50%; |
|||
transform: translate(-50%, 0); |
|||
} |
|||
|
|||
.btn { |
|||
width: 667rpx; |
|||
height: 93rpx; |
|||
background: #CCCCCC; |
|||
border-radius: 20rpx; |
|||
font-weight: 500; |
|||
font-size: 35rpx; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
top: 301rpx; |
|||
left: 50%; |
|||
transform: translate(-50%,0) |
|||
} |
|||
.btns { |
|||
background: #71B580; |
|||
} |
|||
|
|||
.tips { |
|||
position: absolute; |
|||
left: 54rpx; |
|||
bottom: 155rpx; |
|||
width: 293.33rpx; |
|||
height: 72.67rpx; |
|||
} |
|||
|
|||
footer { |
|||
padding: 0 68rpx; |
|||
position: absolute; |
|||
bottom: 94rpx; |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #333333; |
|||
width: 100%; |
|||
|
|||
view { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
border: 1rpx solid #666666; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
span { |
|||
color: rgba(113, 181, 128, 1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,681 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="title-box"> |
|||
<span class="iconfont" @click="goBack"></span> |
|||
<view>订单状态</view> |
|||
</view> |
|||
<view class="top-box"> |
|||
<view>{{info.status_text}}</view> |
|||
|
|||
<!-- 待支付时会显示自动取消时间 --> |
|||
<view v-if="info.status=='WAIT_PAYMENT'" class="close-time">订单将在{{info.close_time.slice(-8)}}自动取消</view> |
|||
</view> |
|||
|
|||
<!-- 子订单里info.order_child[0].goods_genre：景点ticket、酒店hotel、美食food、邮寄自提pgoods、 --> |
|||
|
|||
<!-- 景点订单 --> |
|||
<view v-if="info.order_child[0].goods_genre == 'ticket'"> |
|||
<!-- 景点详情 --> |
|||
<view class="scenic-detail"> |
|||
<view> |
|||
<view class="scenic-title"> |
|||
{{info.order_child[0].goods_title}} |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/order/rightIcon.png"></image> |
|||
</view> |
|||
<view class="scenic-subtitle"> |
|||
出行时间：<span>{{info.order_child[0].use_date}}</span> |
|||
</view> |
|||
<view class="scenic-subtitle" v-if="info.order_child[0].scenic_data.open_description"> |
|||
开放时间：<span>{{info.order_child[0].scenic_data.open_description}}</span> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 子订单规格 --> |
|||
<view> |
|||
<view v-for="(item,index) in info.order_child" :key="index" class="specifications-item flex-between"> |
|||
<view>{{item.specifications_name}}</view> |
|||
<view class="flex-between" style="width: 150rpx;"> |
|||
<view>￥{{item.pay_money / 100}}</view> |
|||
<view>x{{item.num}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 商品价格 --> |
|||
<view class="public-price"> |
|||
<view class="flex-between"> |
|||
商品总额：<span>￥{{info.money / 100}}</span> |
|||
</view> |
|||
<view class="flex-between" v-if="info.discounts"> |
|||
优惠券：<span>-￥{{info.discounts / 100}}</span> |
|||
</view> |
|||
<view class="flex-between"> |
|||
实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 出行人 --> |
|||
<view class="novice-box"> |
|||
出行人 |
|||
<view v-for="(item,index) in info.order_child" :key="index" class="novice-item"> |
|||
<view class="novice-title">{{item.specifications_name}}</view> |
|||
<view class="novice-subtitle"> |
|||
<span>姓名：</span>{{item.contact_name}} |
|||
</view> |
|||
<view class="novice-subtitle"> |
|||
<span>身份证：</span>{{item.id_number}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 邮寄、自提订单 --> |
|||
<view v-if="info.order_child[0].goods_genre == 'pgoods'"> |
|||
<view class="shipping-address" v-if="info.order_child[0].consignee_id"> |
|||
收货地址 |
|||
<view>{{info.order_child[0].consignee.name}} {{info.order_child[0].consignee.tel}}</view> |
|||
<view class="text-overflowRows">{{info.order_child[0].consignee.address}}</view> |
|||
</view> |
|||
|
|||
<!-- 产品详情 --> |
|||
<view class="pgoods-detail" :style="{marginTop: info.order_child[0].consignee_id ? '20rpx' : '-66rpx'}"> |
|||
商家名称 |
|||
<view class="pgoods-product" v-for="(item,index) in info.order_child" :key="index"> |
|||
<image :src="showImg(item.specifications_image)" mode="aspectFill" class="product-img"></image> |
|||
<view class="product-content flex-column"> |
|||
<view class="product-title">{{item.goods_title}}</view> |
|||
<view class="product-subtitle flex-between"> |
|||
{{item.specifications_name}} |
|||
<span>x{{item.num}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 商品价格 --> |
|||
<view class="public-price"> |
|||
<view class="flex-between"> |
|||
商品总额：<span>￥{{info.money / 100}}</span> |
|||
</view> |
|||
<view class="flex-between" v-if="info.discounts"> |
|||
优惠券：<span>-￥{{info.discounts / 100}}</span> |
|||
</view> |
|||
<view class="flex-between"> |
|||
实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 自提信息 --> |
|||
<view class="pickup-box" v-if="info.order_child[0].contact_id && info.order_child[0].extract_id"> |
|||
自提信息 |
|||
<view class="pickup-user"> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/order/user.png" class="picker-userImg"></image> |
|||
<view>{{info.order_child[0].contact.name}}</view> |
|||
<view>{{info.order_child[0].contact.tel}}</view> |
|||
</view> |
|||
<view class="pickup-address"> |
|||
<image></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 订单信息 --> |
|||
<view class="order-info"> |
|||
订单信息 |
|||
<view class="order-subtitle" style="display: flex;align-items: center;"> |
|||
<span>订单账号：</span>{{info.order_id}} |
|||
<view class="copy flex-around" @click="clickCopy"> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/order/copy.png" class="copy-img"></image> |
|||
复制 |
|||
</view> |
|||
</view> |
|||
<view class="order-subtitle"> |
|||
<span>下单时间：</span>{{info.create_time}} |
|||
</view> |
|||
<view class="order-subtitle" v-if="info.pay_time"> |
|||
<span>支付时间：</span>{{info.pay_time}} |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 联系客服 --> |
|||
<view class="kefu-box" @click="clickPhone('110')"> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/order/kefu.png" mode="" class="kefu-img"></image> |
|||
联系客服 |
|||
</view> |
|||
|
|||
<!-- 底部按钮 --> |
|||
<footer> |
|||
<view class="bottom-price" v-if="info.status == 'WAIT_PAYMENT'"> |
|||
合计： |
|||
<span class="price">{{info.pay_money/100}}</span> |
|||
</view> |
|||
<view class="btn-box"> |
|||
<view class="btn" v-if="['PAYMENT_SUCCESSFULLY','WAIT_PAYMENT'].includes(info.status)" @click="closeOrder(info.order_id)"> |
|||
取消订单 |
|||
</view> |
|||
|
|||
<view class="btn" v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE','CLOSED'].includes(info.status)" @click="gotoDetail"> |
|||
再次购买 |
|||
</view> |
|||
|
|||
<view class="btn pay-btn" v-if="info.status == 'WAIT_PAYMENT'" @click="setOrderId(info.order_id)"> |
|||
立即支付 |
|||
</view> |
|||
</view> |
|||
</footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
order_id: '', |
|||
info: {}, |
|||
|
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.order_id = option.id |
|||
this.getDetail() |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 获取订单详情 |
|||
getDetail() { |
|||
this.Post({ |
|||
order_id: this.order_id |
|||
},'/api/order/orderDetail').then(res => { |
|||
this.info = res.data; |
|||
}) |
|||
}, |
|||
// 复制订单号 |
|||
clickCopy() { |
|||
uni.setClipboardData({ |
|||
data: this.info.order_id, //要被复制的内容 |
|||
success: () => { |
|||
//复制成功的回调函数 |
|||
uni.showToast({ |
|||
title: '复制成功', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 再次购买：跳转产品详情 |
|||
gotoDetail() { |
|||
|
|||
}, |
|||
// 取消订单 |
|||
closeOrder(id, index) { |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否关闭订单？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post({ |
|||
order_id: id |
|||
},'/api/order/closeOrder').then(res => { |
|||
if (res.code == 1) { |
|||
uni.showToast({ |
|||
title: '关闭成功', |
|||
icon: 'success' |
|||
}); |
|||
that.getDetail(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 立即支付 |
|||
setOrderId(id) { |
|||
let that = this; |
|||
that.orderId = id; |
|||
that.Post({ |
|||
order_id: id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
},'/api/pay/unify').then(res => { |
|||
if (res.data) { |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp, |
|||
success:()=>{ |
|||
that.getDetail(); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
overflow-x: hidden; |
|||
min-height: 100vh; |
|||
background-color: #F7F7F7; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.title-box { |
|||
position: absolute; |
|||
left: 5rpx; |
|||
top: 101rpx; |
|||
font-size: 40rpx; |
|||
padding: 0 26.67rpx; |
|||
z-index: 2; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
|
|||
view { |
|||
font-weight: 400; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
margin-left: 245rpx; |
|||
} |
|||
} |
|||
|
|||
.top-box { |
|||
width: 750rpx; |
|||
height: 414rpx; |
|||
background: linear-gradient(180deg, #DDF2E2, #DDF2E2, #DDF2E2, #DDF2E2, #DDF2E2, #F7F7F7); |
|||
padding: 200rpx 0 0 50rpx; |
|||
font-weight: bold; |
|||
font-size: 43rpx; |
|||
color: #000000; |
|||
|
|||
.close-time { |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
// 景点订单详情 |
|||
.scenic-detail { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 26rpx; |
|||
margin: -66rpx auto 0; |
|||
|
|||
&>view:nth-child(2) { |
|||
margin: 30rpx 0; |
|||
border-top: 1rpx solid #D8D8D8; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
} |
|||
|
|||
.scenic-title { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
|
|||
image { |
|||
width: 17.33rpx; |
|||
height: 29.33rpx; |
|||
margin-left: 20rpx; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
|
|||
.scenic-subtitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
margin-top: 20rpx; |
|||
|
|||
span { |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
.specifications-item { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
margin: 25rpx 0; |
|||
} |
|||
} |
|||
|
|||
.novice-box { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 26rpx; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #010101; |
|||
margin: 20rpx auto; |
|||
|
|||
.novice-item { |
|||
view { |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
.novice-title { |
|||
font-weight: 800; |
|||
font-size: 27rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.novice-subtitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
width: 130rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
} |
|||
.novice-item:nth-child(n+2) { |
|||
border-top: 1rpx solid #D8D8D8; |
|||
} |
|||
} |
|||
|
|||
// 邮寄订单详情 |
|||
.shipping-address { |
|||
width: 697rpx; |
|||
height: 235rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 26rpx; |
|||
margin: -66rpx auto 0; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
|
|||
&>view { |
|||
margin-top: 25rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
&>view:first-child { |
|||
font-size: 31rpx; |
|||
color: #222222; |
|||
} |
|||
|
|||
&>view:last-child { |
|||
font-size: 31rpx; |
|||
color: #222222; |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
|
|||
.pgoods-detail { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 26rpx; |
|||
margin: 20rpx auto; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
|
|||
.pgoods-product { |
|||
display: flex; |
|||
margin-top: 24rpx; |
|||
padding-bottom: 33rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
|
|||
.product-img { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.product-content { |
|||
width: 485rpx; |
|||
height: 140rpx; |
|||
margin-left: 18rpx; |
|||
padding: 5rpx 0 12rpx; |
|||
justify-content: space-between; |
|||
|
|||
.product-title { |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.product-subtitle { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 自提点信息 |
|||
.pickup-box { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 20rpx auto; |
|||
padding: 33rpx 26rpx; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
|
|||
&>view { |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.pickup-user { |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
|
|||
.picker-userImg { |
|||
width: 33.33rpx; |
|||
height: 33.33rpx; |
|||
} |
|||
|
|||
&>view:first-of-type { |
|||
margin: 0 63rpx 0 19rpx; |
|||
} |
|||
} |
|||
|
|||
.pickup-address { |
|||
display: flex; |
|||
|
|||
.pickup-addressImg { |
|||
width: 33.33rpx; |
|||
height: 33.33rpx; |
|||
} |
|||
|
|||
&>view:first-of-type { |
|||
width: 305rpx; |
|||
margin-left: 18rpx; |
|||
} |
|||
|
|||
.picker-shopName { |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #222222; |
|||
} |
|||
|
|||
.picker-shopAddress { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
margin-top: 15rpx; |
|||
} |
|||
|
|||
.pickup-icon { |
|||
margin-left: auto; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
|
|||
&>view { |
|||
text-align: center; |
|||
} |
|||
&>view:last-child { |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
image { |
|||
width: 56rpx; |
|||
height: 56rpx; |
|||
margin-bottom: 5rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 商品价格 |
|||
.public-price { |
|||
|
|||
view { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
margin-top: 25rpx; |
|||
|
|||
span { |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #111111; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 订单信息 |
|||
.order-info { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 20rpx auto; |
|||
padding: 33rpx 26rpx; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
|
|||
.order-subtitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000; |
|||
margin: 30rpx 0; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
width: 130rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
|
|||
.copy { |
|||
width: 93rpx; |
|||
height: 37rpx; |
|||
border-radius: 11rpx; |
|||
border: 1rpx solid #71B580; |
|||
font-weight: 500; |
|||
font-size: 22rpx; |
|||
color: #71B580; |
|||
margin-left: 30rpx; |
|||
|
|||
.copy-img { |
|||
width: 22rpx; |
|||
height: 23.33rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 客服 |
|||
.kefu-box { |
|||
width: 697rpx; |
|||
height: 96rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 20rpx auto; |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
padding-left: 27rpx; |
|||
|
|||
.kefu-img { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
margin-right: 14rpx; |
|||
} |
|||
} |
|||
|
|||
// 底部按钮 |
|||
footer { |
|||
width: 750rpx; |
|||
height: 167rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #fff; |
|||
border-top: 10rpx solid #F7F7F7; |
|||
padding: 0 26rpx; |
|||
|
|||
.bottom-price { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
|
|||
span { |
|||
font-weight: bold; |
|||
font-size: 48rpx; |
|||
color: #EE3E3B; |
|||
} |
|||
span::before { |
|||
content: '￥'; |
|||
font-size: 27rpx; |
|||
} |
|||
} |
|||
.btn-box { |
|||
margin-left: auto; |
|||
display: flex; |
|||
|
|||
.btn { |
|||
width: 213rpx; |
|||
line-height: 71rpx; |
|||
border-radius: 37rpx; |
|||
border: 1rpx solid #999999; |
|||
text-align: center; |
|||
margin-right: 14rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
.btn:last-of-type { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.pay-btn { |
|||
height: 73rpx; |
|||
background: linear-gradient(270deg, #FD6F34, #F4A61F); |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,701 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="top-bg"> |
|||
<view class="search-box"> |
|||
<view class="left"> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" mode="aspectFill"></image> |
|||
<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" /> |
|||
</view> |
|||
|
|||
<!-- <view class="btn" @click="search()">搜索</view> --> |
|||
</view> |
|||
<view class="common-box"> |
|||
<view class="common-types com-flex-tao"> |
|||
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id" :class="['common-type', typeIndex == index ? 'active' : '']"> |
|||
{{ item.name }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-common-empty" v-if="list.length == 0"> |
|||
<img :src="showImg('/uploads/20221201/8f97261b8eddffcc55342eca0ed0249c.png')" /> |
|||
<p class="list-common-empty-tip">暂无订单~</p> |
|||
</view> |
|||
<view class="trade-list" v-if="list.length > 0"> |
|||
<view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)" @click="() => choseType(item)"> |
|||
<view class="trade-item-head"> |
|||
<view class="trade-item-head-tid">订单号:{{ item.order_id }}</view> |
|||
<!-- <view class="trade-item-head-name" v-else> |
|||
<image src="https://testtaihu.https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20221209/49c148d8753ae5aaf50949b2b09e696e.png" mode="aspectFill"></image> |
|||
<view class="sj-name">{{ item.list_merchant_name }}</view> |
|||
</view> --> |
|||
<view class="trade-item-head-state">{{ item.status_text }}</view> |
|||
</view> |
|||
<view class="trade-item-pros"> |
|||
<view |
|||
class="trade-item-pro" |
|||
v-for="(pro, proIndex) in item.order_child" |
|||
:key="pro.child_id" |
|||
> |
|||
<view class="trade-item-pro-img" v-if="pro.specifications_image"><image :src="showImg(pro.specifications_image)" mode="aspectFill"></image></view> |
|||
<view class="trade-item-pro-title">{{ pro.goods_title + pro.specifications_name }}</view> |
|||
<view class="trade-item-pro-price"> |
|||
<view class="trade-item-pro-price-pri">￥{{ pro.pay_money / 100 }}</view> |
|||
<view class="trade-item-pro-num">x{{ pro.num }}</view> |
|||
<!-- <view v-if="pro.status=='WAIT_COMMENT'"> |
|||
<navigator catchtap="emptyFunc" |
|||
:url="'/subPackages1/order/rate?id='+pro.goods_id+'&tid='+pro.child_id+'&num='+pro.num" |
|||
tag="view" class="comment-btn">评价 |
|||
</navigator> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="trade-item-info"> |
|||
合计￥ |
|||
<text>{{ item.pay_money / 100 }}</text> |
|||
</view> |
|||
<view class="trade-item-btns"> |
|||
<view @click.stop="() => refund(item.order_id, key)" v-if="item.status == 'PAYMENT_SUCCESSFULLY'">申请退款</view> |
|||
<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.status == 'WAIT_PAYMENT'">关闭订单</view> |
|||
<view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view> |
|||
<view class="pay-btn" @click.native="setOrderId(item.order_id)" v-if="item.status == 'WAIT_PAYMENT'">立即支付</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view v-if="list.length === 0 && finished" class="noDate"> |
|||
<view>暂无订单</view> |
|||
</view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Trades', |
|||
data() { |
|||
return { |
|||
finished: false, |
|||
list: [], |
|||
typeList: [ |
|||
{ |
|||
id: 'ALL', |
|||
name: '全部' |
|||
}, |
|||
{ |
|||
id: 'WAIT_PAYMENT', |
|||
name: '待付款' |
|||
}, |
|||
{ |
|||
id: 'PAYMENT_SUCCESSFULLY', |
|||
name: '待使用' |
|||
}, |
|||
{ |
|||
id: 'PAYMENT_SUCCESSFULLY', |
|||
name: '待发货' |
|||
}, |
|||
{ |
|||
id: 'WAIT_CONFIRM', |
|||
name: '待收货' |
|||
}, |
|||
{ |
|||
id: 'WAIT_COMMENT', |
|||
name: '待评价' |
|||
}, |
|||
{ |
|||
id: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART', |
|||
name: '退款/售后' |
|||
} |
|||
], |
|||
typeIndex: 0, |
|||
ajaxFlag: true, |
|||
keywords: '', |
|||
orderId: null, |
|||
dateRange: [], |
|||
type: '' |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
console.log(options); |
|||
if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type); |
|||
this.getList(); |
|||
|
|||
uni.$on("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
onUnload () { |
|||
uni.$off("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
onReachBottom() { |
|||
if (this.finished) return false; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
getDataByConnect(data) { |
|||
if (data.msgType == "updateOrderTrades") { |
|||
this.list = []; |
|||
this.finished = false; |
|||
this.getList() |
|||
} |
|||
}, |
|||
emptyFunc() { |
|||
|
|||
}, |
|||
showItem(item) { |
|||
let flag = true; |
|||
// if (this.typeIndex == 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false |
|||
return flag; |
|||
}, |
|||
onReload() { |
|||
this.list = []; |
|||
this.finished = false; |
|||
this.getList(); |
|||
}, |
|||
setType(index) { |
|||
this.typeIndex = index; |
|||
this.onReload(); |
|||
}, |
|||
// 去详情 |
|||
goOrderDetail(item) { |
|||
console.log(item); |
|||
this.orderId = item.order_id; |
|||
// (item.order_child[0].consignee || item.order_child[0].extract) |
|||
let url = item.order_child[0] && item.order_child[0].consignee ? `/subPages/order/postOrderInfo?id=${item.order_id}` : `/subPages/order/orderInfo?id=${item.order_id}`; |
|||
if (item.status && item.status == 'WAIT_PAYMENT') url += `&status=WAIT_PAYMENT`; |
|||
console.log(url); |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
setOrderId(id) { |
|||
let that = this; |
|||
that.orderId = id; |
|||
that.Post( |
|||
{ |
|||
order_id: id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
}, |
|||
'/api/pay/unify' |
|||
).then(res => { |
|||
if (res.data) { |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 确认收货 |
|||
confirmpost(id, index) { |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否确认收货？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/confirmPost' |
|||
).then(res => { |
|||
if (res.code == 200) { |
|||
list[index].order_child.map(item => { |
|||
item.status = 'WAIT_COMMENT'; |
|||
}); |
|||
list[index].status = 'WAIT_COMMENT'; |
|||
list[index].postFlag = false; |
|||
that.list = list; |
|||
uni.showToast({ |
|||
title: '操作成功' |
|||
}); |
|||
that.$forceUpdate(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭订单 |
|||
closeOrder(id, index) { |
|||
console.log(id); |
|||
console.log(index); |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否关闭订单？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/closeOrder' |
|||
).then(res => { |
|||
if (res.code == 200) { |
|||
uni.showToast({ |
|||
title: '关闭成功', |
|||
icon: 'success' |
|||
}); |
|||
that.list = []; |
|||
that.finished = false; |
|||
that.getList(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
//删除订单 |
|||
deletOrder(id) { |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否删除订单？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/delOrder' |
|||
).then(res => { |
|||
if (res.code == 200) { |
|||
uni.showToast({ |
|||
title: '删除成功', |
|||
icon: 'success' |
|||
}); |
|||
that.list = []; |
|||
that.finished = false; |
|||
that.getList(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 申请退款 |
|||
refund(id, index) { |
|||
console.log(id); |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否申请退款？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
that.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/applyRefund' |
|||
).then(res => { |
|||
if (res.code == 200) { |
|||
uni.showToast({ |
|||
title: '申请成功', |
|||
icon: 'success' |
|||
}); |
|||
that.onReload(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
search(e) { |
|||
this.list = []; |
|||
this.getList(); |
|||
// if (e.keyCode == 13) { |
|||
// // 提交 |
|||
// this.keywords = e.target.value; |
|||
// } |
|||
}, |
|||
getList() { |
|||
let data = { |
|||
status: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].true_id || this.typeList[this.typeIndex].id, |
|||
offset: this.list.length, |
|||
limit: 5, |
|||
name: this.keywords |
|||
}; |
|||
this.Post(data, '/api/order/orderList').then(res => { |
|||
// this.list = res.data; |
|||
// let arr = res.data; |
|||
// arr.forEach(item => { |
|||
// item.order_child.forEach((itemX, index) => { |
|||
// if (index > 0) { |
|||
// item.order_child[0].data = [...item.order_child[0].data, ...itemX.data]; |
|||
// } else { |
|||
// itemX.f_order_id = item.order_id; |
|||
// itemX.f_status_text = item.status_text; |
|||
// itemX.f_status = item.status; |
|||
// itemX.f_pay_money = item.pay_money; |
|||
// console.log(itemX); |
|||
// this.list.push(itemX); |
|||
// } |
|||
// }); |
|||
// }); |
|||
// console.log(this.list); |
|||
// res.data.map(item => { |
|||
// let num = 0, |
|||
// postFlag = true; |
|||
// item.order_child.map(order => { |
|||
// num = num + order.num; |
|||
// if (order.status != 'POST') { |
|||
// postFlag = false |
|||
// } |
|||
// }) |
|||
// item.postFlag = postFlag; |
|||
// item.totalNumber = num; |
|||
// }) |
|||
this.list = [...this.list, ...res.data] |
|||
if (res.data.length < 5) { |
|||
this.finished = true; |
|||
} |
|||
}); |
|||
}, |
|||
UpdateOrder(id) { |
|||
this.ajaxFlag = false; |
|||
let list = this.list; |
|||
this.Post( |
|||
{ |
|||
order_id: id |
|||
}, |
|||
'/api/order/orderDetail' |
|||
).then(res => { |
|||
this.ajaxFlag = true; |
|||
list.map(item => { |
|||
if (item.order_id == id) { |
|||
item = res.data; |
|||
} |
|||
}); |
|||
this.list = list; |
|||
}); |
|||
}, |
|||
choseType(item) { |
|||
uni.navigateTo({ |
|||
url:'/subPackages/order/detail?id='+item.order_id |
|||
}); |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.common-box { |
|||
height: 90rpx; |
|||
} |
|||
|
|||
.common-types { |
|||
background: white; |
|||
height: 90rpx; |
|||
font-size: 31rpx; |
|||
z-index: 10; |
|||
margin: auto; |
|||
color: #666; |
|||
overflow-x: scroll; |
|||
padding: 0 27rpx; |
|||
} |
|||
|
|||
.common-types::-webkit-scrollbar { |
|||
width: 0rpx; |
|||
height: 0; |
|||
display: none; |
|||
} |
|||
|
|||
.common-type { |
|||
flex-shrink: 0; |
|||
margin: 0 26rpx; |
|||
line-height: 90rpx; |
|||
height: 90rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.common-type.active { |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #71B580; |
|||
} |
|||
|
|||
.common-type.active:after { |
|||
display: block; |
|||
width: 60%; |
|||
background-color: rgba(0, 215, 237, 1); |
|||
font-size: 0; |
|||
content: '1'; |
|||
margin: auto; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 1rpx; |
|||
height: 4rpx; |
|||
background: #71B580; |
|||
border-radius: 2rpx; |
|||
} |
|||
|
|||
.bg { |
|||
min-height: 100vh; |
|||
background-color: #f7f7f7; |
|||
} |
|||
|
|||
.noDate { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 200rpx; |
|||
} |
|||
|
|||
.noDate img { |
|||
width: 514rpx; |
|||
height: auto; |
|||
} |
|||
|
|||
.noDate view { |
|||
font-size: 24rpx; |
|||
color: #777777; |
|||
} |
|||
|
|||
.trade-list { |
|||
padding: 28rpx 26rpx; |
|||
} |
|||
|
|||
.trade-items { |
|||
background-color: white; |
|||
margin-bottom: 28rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.trade-item-head { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 28rpx 20rpx; |
|||
border-bottom: 1rpx solid #d8d8d8; |
|||
} |
|||
|
|||
.trade-item-head-tid { |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666666; |
|||
} |
|||
|
|||
.trade-item-head-state { |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #71B580; |
|||
} |
|||
|
|||
.trade-item-head-name { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
|
|||
image { |
|||
width: 33rpx; |
|||
height: 31rpx; |
|||
} |
|||
|
|||
view { |
|||
margin-left: 13rpx; |
|||
} |
|||
} |
|||
|
|||
.trade-item-pros { |
|||
display: flex; |
|||
/* background-color: #F2F2F2; */ |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.trade-item-pro { |
|||
display: flex; |
|||
padding: 20rpx; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.trade-item-pro-img { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.trade-item-pro-img image { |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.trade-item-pro-price { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.trade-item-pro-title { |
|||
text-align: left; |
|||
flex: 1; |
|||
padding: 0 20rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.trade-item-pro-price view { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
text-wrap: none; |
|||
white-space: nowrap; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.trade-item-pro-price-pri { |
|||
font-size: 27rpx; |
|||
color: #fc514b; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
.trade-item-pro-num { |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
margin-top: 24rpx; |
|||
} |
|||
|
|||
.trade-item-info { |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
background-color: white; |
|||
padding: 0rpx 20rpx; |
|||
margin-top: -6rpx; |
|||
/* border-bottom: 1px solid #B6B6B6; */ |
|||
} |
|||
|
|||
.trade-item-info text { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
.trade-item-btns { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.trade-item-btns view { |
|||
margin-left: 20rpx; |
|||
background: rgba(237, 237, 237, 0); |
|||
border: 1rpx solid #999999; |
|||
border-radius: 27rpx; |
|||
padding: 8rpx 16rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
.trade-item-btns .pay-btn { |
|||
color: #FFFFFF; |
|||
background: linear-gradient(90deg, #FD6F34, #F4A61F); |
|||
border: none; |
|||
padding: 10rpx 16rpx; |
|||
} |
|||
|
|||
.comment-btn { |
|||
width: 100rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
border-radius: 20rpx; |
|||
border: 1px solid #999999; |
|||
color: #333333; |
|||
justify-content: center !important; |
|||
font-size: 24rpx; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.list-common-empty { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
min-height: 50vh; |
|||
} |
|||
|
|||
.list-common-empty img { |
|||
width: 483rpx; |
|||
height: 254rpx; |
|||
} |
|||
|
|||
.list-common-empty-tip { |
|||
margin-top: 61rpx; |
|||
|
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #8599b5; |
|||
} |
|||
|
|||
.com-flex-tao { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.search-box { |
|||
width: 697rpx; |
|||
height: 67rpx; |
|||
background: #f2f2f2; |
|||
border-radius: 33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 8rpx 0 28rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
|
|||
input { |
|||
margin-left: 20rpx; |
|||
font-size: 31rpx; |
|||
font-weight: 400; |
|||
color: #333; |
|||
width: 450rpx; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 107rpx; |
|||
height: 53rpx; |
|||
background: #71B580; |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 53rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.top-bg { |
|||
background: #fff; |
|||
padding-top: 20rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue