|
@@ -28,21 +28,21 @@
|
|
<view class="img-cont">
|
|
<view class="img-cont">
|
|
<image :src="item.goodsImages"></image>
|
|
<image :src="item.goodsImages"></image>
|
|
</view>
|
|
</view>
|
|
- <view >
|
|
|
|
|
|
+ <view>
|
|
<view class="ellipsis-two">{{item.goodsName}}</view>
|
|
<view class="ellipsis-two">{{item.goodsName}}</view>
|
|
<view class="bundle-num">
|
|
<view class="bundle-num">
|
|
- <view ><text class="price-num">{{item.payGold}}</text> <text class="price-text">乐豆</text></view>
|
|
|
|
- <view >X {{item.buyQty}}</view>
|
|
|
|
|
|
+ <view><text class="price-num">{{item.payGold}}</text> <text class="price-text">乐豆</text></view>
|
|
|
|
+ <view>X {{item.buyQty}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
<u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
<!-- 订单信息 -->
|
|
<!-- 订单信息 -->
|
|
<u-cell-group>
|
|
<u-cell-group>
|
|
- <u-cell-item title="订单编号" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false" >
|
|
|
|
|
|
+ <u-cell-item title="订单编号" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
{{orderInfo.orderSn}}
|
|
{{orderInfo.orderSn}}
|
|
</u-cell-item>
|
|
</u-cell-item>
|
|
- <u-cell-item title="下单时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false" >
|
|
|
|
|
|
+ <u-cell-item title="下单时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
{{orderInfo.orderTime}}
|
|
{{orderInfo.orderTime}}
|
|
</u-cell-item>
|
|
</u-cell-item>
|
|
<u-cell-item v-if="orderInfo.payTime" title="支付时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
<u-cell-item v-if="orderInfo.payTime" title="支付时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
@@ -55,109 +55,145 @@
|
|
<u-cell-item title="运费" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
<u-cell-item title="运费" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
免运费
|
|
免运费
|
|
</u-cell-item>
|
|
</u-cell-item>
|
|
- <u-cell-item :title="(orderInfo.orderState=='待支付'||orderInfo.orderState=='已取消') ? '待支付':'实际支付'" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
|
|
|
|
+ <u-cell-item :title="(orderInfo.orderState=='待支付'||orderInfo.orderState=='已取消') ? '待支付':'实际支付'" :value-style="{color: '#000',fontSize: '28upx'}"
|
|
|
|
+ :arrow="false">
|
|
<text class="price-num">{{orderInfo.originalGold}}</text> <text class="price-text">乐豆</text>
|
|
<text class="price-num">{{orderInfo.originalGold}}</text> <text class="price-text">乐豆</text>
|
|
</u-cell-item>
|
|
</u-cell-item>
|
|
</u-cell-group>
|
|
</u-cell-group>
|
|
</view>
|
|
</view>
|
|
- <view v-if="orderInfo.orderState=='待支付'" class="footer">
|
|
|
|
- <u-button @click="cancleOrder" type="error" >去支付</u-button>
|
|
|
|
|
|
+ <view v-if="orderInfo.orderState=='WAIT_PAY'" class="footer">
|
|
|
|
+ <u-button @click="cancleOrder" type="error">去支付</u-button>
|
|
</view>
|
|
</view>
|
|
|
|
+ <!-- 提示用户设置支付密码 -->
|
|
|
|
+ <u-modal v-model="showSetPswModal"
|
|
|
|
+ content="请先设置支付密码,才能使用乐豆"
|
|
|
|
+ show-cancel-button
|
|
|
|
+ confirm-text="去设置"
|
|
|
|
+ cancel-text="暂时放弃"
|
|
|
|
+ @confirm="toSetPwd"
|
|
|
|
+ @cancel="showSetPswModal=false"
|
|
|
|
+ ></u-modal>
|
|
|
|
+ <!-- 确认取消弹窗 -->
|
|
|
|
+ <u-modal v-model="showLeavePsw"
|
|
|
|
+ title="确认放弃支付吗?"
|
|
|
|
+ content="您的订单在30分钟内未支付将被取消"
|
|
|
|
+ show-cancel-button
|
|
|
|
+ confirm-text="确认放弃"
|
|
|
|
+ cancel-text="继续支付"
|
|
|
|
+ @confirm="canclePay"
|
|
|
|
+ @cancel="payAgain"
|
|
|
|
+ ></u-modal>
|
|
|
|
+ <!-- 确认支付弹窗 -->
|
|
|
|
+ <u-popup mode="center" closeable @close="showLeavePsw=true" v-model="showInputPsw" width="500rpx" >
|
|
|
|
+ <view class="slot-content">
|
|
|
|
+ <view>确认支付</view>
|
|
|
|
+ <view class="text-cont">
|
|
|
|
+ <text class="num-big">{{totalPrice}}</text>乐豆
|
|
|
|
+ </view>
|
|
|
|
+ <view class="footer">
|
|
|
|
+ <u-input v-model="password" maxlength="30" input-align="center" type="password" placeholder="请输入支付密码" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import {orderDetail, cancleOrder} from '@/api/order.js'
|
|
|
|
- import {getLookUpDatas} from '@/api/data.js'
|
|
|
|
- export default{
|
|
|
|
|
|
+ import {
|
|
|
|
+ orderDetail,
|
|
|
|
+ cancleOrder
|
|
|
|
+ } from '@/api/order.js'
|
|
|
|
+ import {
|
|
|
|
+ getLookUpDatas
|
|
|
|
+ } from '@/api/data.js'
|
|
|
|
+ export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- orderInfo: {
|
|
|
|
- address: '陕西省西安市未央区常青二路大明宫小区',
|
|
|
|
- userName: '王明',
|
|
|
|
- phone: '18792701023',
|
|
|
|
- orderTime: "2020-10-28 11:15:59",
|
|
|
|
- orderState: "待支付",
|
|
|
|
- orderNo: 121245465748,
|
|
|
|
- payedAmount: 0,
|
|
|
|
- id: 11,
|
|
|
|
- amount: 450,
|
|
|
|
- totalNum: 3,
|
|
|
|
- itemList: [
|
|
|
|
- {
|
|
|
|
- name: "八九箭冠",
|
|
|
|
- id: 76435,
|
|
|
|
- number: 1,
|
|
|
|
- price: 150,
|
|
|
|
- icon: ''
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "数据库的合法身份觉得很附近发生纠纷解决",
|
|
|
|
- id: 76436,
|
|
|
|
- number: 2,
|
|
|
|
- price: 150,
|
|
|
|
- icon: ''
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- },
|
|
|
|
- src: '',
|
|
|
|
|
|
+ orderInfo: {},
|
|
|
|
+ totalPrice: 0, // 支付合计
|
|
|
|
+ showSetPswModal: false, // 设置支付密码弹窗
|
|
|
|
+ showInputPsw: false, // 打开输入密码弹窗
|
|
|
|
+ showLeavePsw: false, // 打开确定放弃弹窗
|
|
orderStatusList: []
|
|
orderStatusList: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
onLoad(options) {
|
|
|
|
+ // 监听设置密码是否成功
|
|
|
|
+ uni.$once('setPswSuccess', this.setPsw)
|
|
if (options.id) {
|
|
if (options.id) {
|
|
console.log(options.id)
|
|
console.log(options.id)
|
|
this.getOrderDetail(options.id)
|
|
this.getOrderDetail(options.id)
|
|
this.orderStatusList = this.$store.state.vuex_payStatus
|
|
this.orderStatusList = this.$store.state.vuex_payStatus
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- methods:{
|
|
|
|
- getOptionName (list,val) {
|
|
|
|
- if(val){
|
|
|
|
- let p = list.find((item) => {
|
|
|
|
- return item.code == val
|
|
|
|
- })
|
|
|
|
- return p ? p.dispName : '-'
|
|
|
|
- }
|
|
|
|
- return '-'
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ getOptionName(list, val) {
|
|
|
|
+ if (val) {
|
|
|
|
+ let p = list.find((item) => {
|
|
|
|
+ return item.code == val
|
|
|
|
+ })
|
|
|
|
+ return p ? p.dispName : '-'
|
|
|
|
+ }
|
|
|
|
+ return '-'
|
|
},
|
|
},
|
|
// 获取订单详情
|
|
// 获取订单详情
|
|
- getOrderDetail (id) {
|
|
|
|
|
|
+ getOrderDetail(id) {
|
|
let payTypeList = this.$store.state.vuex_payType
|
|
let payTypeList = this.$store.state.vuex_payType
|
|
- orderDetail({id:id}).then(res =>{
|
|
|
|
|
|
+ orderDetail({
|
|
|
|
+ id: id
|
|
|
|
+ }).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.status == 200) {
|
|
this.orderInfo = res.data
|
|
this.orderInfo = res.data
|
|
- this.orderInfo.payType = this.orderInfo.payType ? this.getOptionName(payTypeList,this.orderInfo.payType) : ''
|
|
|
|
} else {
|
|
} else {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: res.message,
|
|
|
|
+ icon: 'none'
|
|
|
|
+ })
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 取消订单
|
|
|
|
- cancleOrder (){
|
|
|
|
- cancleOrder({id:this.orderInfo.id}).then(res=>{
|
|
|
|
- if (res.status==200) {
|
|
|
|
- this.toashMsg(res.message)
|
|
|
|
- setTimeout(()=>{
|
|
|
|
- uni.navigateBack()
|
|
|
|
- },500)
|
|
|
|
- }
|
|
|
|
|
|
+ // 跳转到设置支付密码页
|
|
|
|
+ toSetPwd () {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:"/pages/userCenter/userInfo/paymentPwd"
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 图片预览
|
|
|
|
- showImage (url) {
|
|
|
|
- uni.previewImage({
|
|
|
|
- urls: [url],
|
|
|
|
- longPressActions: {
|
|
|
|
- itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
|
- success: function(data) {
|
|
|
|
- console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
|
|
- },
|
|
|
|
- fail: function(err) {
|
|
|
|
- console.log(err.errMsg);
|
|
|
|
- }
|
|
|
|
|
|
+ // 设置密码成功, 打开输入密码弹窗
|
|
|
|
+ setPsw (e) {
|
|
|
|
+ if (e.success) {
|
|
|
|
+ this.showInputPsw = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //确认放弃
|
|
|
|
+ canclePay() {
|
|
|
|
+ this.showLeavePsw = false
|
|
|
|
+ this.showInputPsw = false
|
|
|
|
+ },
|
|
|
|
+ // 继续支付
|
|
|
|
+ payAgain () {
|
|
|
|
+ this.showLeavePsw = false
|
|
|
|
+ this.showInputPsw = true
|
|
|
|
+ },
|
|
|
|
+ // 支付
|
|
|
|
+ toPay(item) {
|
|
|
|
+ // this.totalPrice = item.payGold
|
|
|
|
+ // this.showSetPswModal = true
|
|
|
|
+ // return
|
|
|
|
+ signPay({id:item.id}).then(res=>{
|
|
|
|
+ this.btnLoading = false
|
|
|
|
+ if(res.status == 200) {
|
|
|
|
+ // 跳转到支付完成界面
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:"/pages/toOrder/payFinish?id=" + this.orderId
|
|
|
|
+ })
|
|
|
|
+ } else{
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: res.message,
|
|
|
|
+ icon: 'none'
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
+ })
|
|
|
|
+ },
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -167,61 +203,73 @@
|
|
height: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
- .order-pages{
|
|
|
|
|
|
+
|
|
|
|
+ .order-pages {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
padding: 0 24upx;
|
|
padding: 0 24upx;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- .order-info{
|
|
|
|
|
|
+
|
|
|
|
+ .order-info {
|
|
width: 100%;
|
|
width: 100%;
|
|
flex: 1;
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
overflow-y: scroll;
|
|
|
|
+
|
|
// 状态
|
|
// 状态
|
|
- .order-status{
|
|
|
|
|
|
+ .order-status {
|
|
padding: 30upx 0;
|
|
padding: 30upx 0;
|
|
text-align: center;
|
|
text-align: center;
|
|
- .status-title{
|
|
|
|
|
|
+
|
|
|
|
+ .status-title {
|
|
font-size: 36upx;
|
|
font-size: 36upx;
|
|
color: #000;
|
|
color: #000;
|
|
}
|
|
}
|
|
- .status-care{
|
|
|
|
|
|
+
|
|
|
|
+ .status-care {
|
|
font-size: 24upx;
|
|
font-size: 24upx;
|
|
margin-top: 10upx;
|
|
margin-top: 10upx;
|
|
color: #a9aaac;
|
|
color: #a9aaac;
|
|
|
|
+
|
|
>text {
|
|
>text {
|
|
color: red;
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
// 地址
|
|
// 地址
|
|
.order-address {
|
|
.order-address {
|
|
font-size: 32upx;
|
|
font-size: 32upx;
|
|
padding: 20upx 0;
|
|
padding: 20upx 0;
|
|
|
|
+
|
|
>view {
|
|
>view {
|
|
line-height: 60upx;
|
|
line-height: 60upx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.address-title {
|
|
.address-title {
|
|
color: #000;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
// 订单中商品列表
|
|
// 订单中商品列表
|
|
.bundle-list {
|
|
.bundle-list {
|
|
display: flex;
|
|
display: flex;
|
|
padding: 20upx 10upx;
|
|
padding: 20upx 10upx;
|
|
font-size: 28upx;
|
|
font-size: 28upx;
|
|
border-bottom: 1px solid #F8F8F8;
|
|
border-bottom: 1px solid #F8F8F8;
|
|
|
|
+
|
|
.img-cont {
|
|
.img-cont {
|
|
width: 158rpx;
|
|
width: 158rpx;
|
|
height: 140upx;
|
|
height: 140upx;
|
|
border-radius: 15upx;
|
|
border-radius: 15upx;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
+
|
|
>image {
|
|
>image {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
>view {
|
|
>view {
|
|
&:last-child {
|
|
&:last-child {
|
|
flex: 1;
|
|
flex: 1;
|
|
@@ -231,26 +279,31 @@
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.bundle-num {
|
|
.bundle-num {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .price-text{
|
|
|
|
|
|
+
|
|
|
|
+ .price-text {
|
|
font-size: 20upx;
|
|
font-size: 20upx;
|
|
margin-left: 10upx;
|
|
margin-left: 10upx;
|
|
}
|
|
}
|
|
- .price-num{
|
|
|
|
|
|
+
|
|
|
|
+ .price-num {
|
|
font-size: 32upx;
|
|
font-size: 32upx;
|
|
color: red;
|
|
color: red;
|
|
}
|
|
}
|
|
- .u-cell{
|
|
|
|
- padding:10rpx 32rpx;
|
|
|
|
|
|
+
|
|
|
|
+ .u-cell {
|
|
|
|
+ padding: 10rpx 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .footer{
|
|
|
|
|
|
+
|
|
|
|
+ .footer {
|
|
padding: 20rpx;
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|