|
|
@@ -0,0 +1,323 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="address" v-if="order.delivery">
|
|
|
+ <view class="icon">
|
|
|
+ <text class="cell-icon yticon icon-dizhi" style="color: #ffffff"></text>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="name">{{order.delivery.username}}<text class="mobile">{{order.delivery.mobile}}</text></view>
|
|
|
+ <view class="address">{{order.delivery.address}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product" v-if="order.products">
|
|
|
+ <view class="goods-box-single" v-for="(goodsItem, goodsIndex) in order.products" :key="goodsIndex" @click="navTo('/pages/product/product?id='+goodsItem.id+'&flash=0')">
|
|
|
+ <image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
|
|
|
+ <view class="right">
|
|
|
+ <text class="title clamp">{{goodsItem.title}}</text>
|
|
|
+ <text class="attr-box">{{goodsItem.spec}} x {{goodsItem.number}}</text>
|
|
|
+ <text class="price">{{goodsItem.price}}</text>
|
|
|
+ <button class="action-btn" v-if="order.have_received != 0 && goodsItem.evaluate == false" @click.stop="button('evaluate', goodsItem)">评价</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="price">
|
|
|
+ <view>商品总价 <text>￥ {{order.order_price}}</text></view>
|
|
|
+ <view>运费 <text>￥ {{order.delivery_price}}</text></view>
|
|
|
+ <view>优惠 <text>￥ {{order.discount_price}}</text></view>
|
|
|
+ <view class="total">实付款（含运费） <text>￥ {{order.total_price}}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order" v-if="order.createtime">
|
|
|
+ <view class="title">订单信息</view>
|
|
|
+ <view>订单编号：{{order.out_trade_no}}</view>
|
|
|
+ <view>创建时间：{{order.createtime}}</view>
|
|
|
+ <view>付款时间：{{order.have_paid ? order.paidtime : '未付款'}}</view>
|
|
|
+ <view>发货时间：{{order.have_delivered ? order.deliveredtime : '未发货'}}</view>
|
|
|
+ <view v-if="order.have_received">成交时间：{{order.receivedtime}}</view>
|
|
|
+ <view v-if="order.have_refunded">退货时间：{{order.refundedtime}}</view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 10rpx;">
|
|
|
+ <!--兼容苹果系统下margin-bottom不生效-->
|
|
|
+ </view>
|
|
|
+ <view class="bottom" v-if="order.state != 9">
|
|
|
+ <button class="action-btn" v-if="order.have_paid != 0 && order.have_received == 0" @click.stop="recerved()">确认核销该订单</button>
|
|
|
+ <span class="success" v-else>已经核销成功</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ // pages/tabbar/index/index.js
|
|
|
+ import {
|
|
|
+ mapMutations,
|
|
|
+ } from 'vuex';
|
|
|
+ var app = getApp();
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ uid: "",
|
|
|
+ order_id: "",
|
|
|
+ token: "",
|
|
|
+ order: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function(options) {
|
|
|
+ this.uid = options.uid;
|
|
|
+ this.order_id = options.order_id;
|
|
|
+ this.token = options.token;
|
|
|
+ //this.puid = options.puid||'';
|
|
|
+ this.bind();
|
|
|
+ },
|
|
|
+ onShareAppMessage: function() {},
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(['login']),
|
|
|
+ async bind() {
|
|
|
+ let [error, loginRes] = await uni.login({
|
|
|
+ provider: 'weixin'
|
|
|
+ });
|
|
|
+ let res = await this.$api.request('/order/detail', 'GET', {
|
|
|
+ order_id: this.order_id
|
|
|
+ });
|
|
|
+ this.order = res;
|
|
|
+ },
|
|
|
+ async recerved() {
|
|
|
+ let res = await this.$api.request('/order/writeOffIpl', 'POST', {
|
|
|
+ order_id: this.order_id,
|
|
|
+ user_id: this.uid,
|
|
|
+ token: this.token
|
|
|
+ });
|
|
|
+ this.bind();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background: #F5F5F5;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .header {
|
|
|
+ height: 200rpx;
|
|
|
+ background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
|
|
|
+
|
|
|
+ .left {
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 200rpx;
|
|
|
+ padding-left: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .delivery {
|
|
|
+ color: #545454;
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 1px solid #e9e9e9;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background: #00a7c8;
|
|
|
+ height: 60rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ margin: 50rpx 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 600rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .right {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ color: #545454;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
|
|
|
+ height: 60rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ margin: 50rpx 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 600rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .mobile {
|
|
|
+ color: #9b9b9b;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product {
|
|
|
+ background: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+
|
|
|
+ /* 单条商品 */
|
|
|
+ .goods-box-single {
|
|
|
+ display: flex;
|
|
|
+ padding: 20upx 0;
|
|
|
+ border-bottom: 1rpx solid #eaeaea;
|
|
|
+
|
|
|
+ .goods-img {
|
|
|
+ display: block;
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0 30upx 0 24upx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: $font-base + 2upx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .attr-box {
|
|
|
+ font-size: $font-sm + 2upx;
|
|
|
+ color: $font-color-light;
|
|
|
+ padding: 10upx 12upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: $font-base + 2upx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ margin-top: 0;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '￥';
|
|
|
+ font-size: $font-sm;
|
|
|
+ margin: 0 2upx 0 8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #303133;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 100px;
|
|
|
+ float: right;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: #9b9b9b;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ font-size: 35rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #F56C6C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order {
|
|
|
+ background: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ border-left: 4rpx solid #F56C6C;
|
|
|
+ padding-left: 17rpx;
|
|
|
+ color: #898989;
|
|
|
+ font-size: 35rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #9b9b9b;
|
|
|
+ line-height: 60rpx;
|
|
|
+ margin-bottom: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ bottom: 0;
|
|
|
+ border-top: 1px solid #e9e9e9;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin: 20rpx 50rpx 20rpx 20rpx;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #303133;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 100px;
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.recom {
|
|
|
+ background: #fff9f9;
|
|
|
+ color: $base-color;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ border-color: #f7bcc8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .success {
|
|
|
+ float: right;
|
|
|
+ width: 8em;
|
|
|
+ line-height: 2.4em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
xiezongxing