123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315 |
- <template>
- <view>
- <view class="location">
- <view class="contacts">
- <view class="name">
- {{order.poststation.contacts}}
- </view>
- <view class="phone">
- {{order.poststation.phone}}
- </view>
- </view>
- <view class="address">
- {{order.poststation.address}}
- </view>
- </view>
- <view class="order">
- <view class="order-head">
- <view class="factory-name">{{order.seller.nickname?order.seller.nickname:'省心直供(该厂家暂未设置昵称)'}}</view>
- <view v-if="order.status === 'wait_pay'" class="order-status">待付款</view>
- <view v-if="order.status === 'wait_deliver'" class="order-status">待发货</view>
- <view v-if="order.status === 'wait_sign'" class="order-status">待签收</view>
- <view v-if="order.status === 'complete'" class="order-status">已完成</view>
- <view v-if="order.status === 'invalid'" class="order-status">已失效</view>
- </view>
- <view class="order-info">
- <view class="product-item" v-for="product in order.products_json">
- <view class="product-image">
- <image class="image" :src="product.spec_image" mode="scaleToFill"></image>
- </view>
- <view class="product-info">
- <view class="row">
- <view class="name">{{product.name}}</view>
- <view class="price">¥{{product.spec_price}}</view>
- </view>
- <view class="row">
- <view class="spec">{{product.spec_name}}</view>
- <view class="num">×{{product.num}}</view>
- </view>
- </view>
- </view>
- </view>
- <view class="total-price">
- 总价 <text class="warning">¥{{order.total_amount}}</text>
- </view>
- </view>
- <view class="info">
- <view class="title">订单信息</view>
- <view class="row">
- <view class="label">订单编号</view>
- <view>{{order.order_no}}</view>
- </view>
- <view class="row">
- <view class="label">支付宝交易号</view>
- <view>456451512316545113215645</view>
- </view>
- <view class="row">
- <view class="label">创建时间</view>
- <view>{{order.createtime|datetimeFilter}}</view>
- </view>
- <view class="row" v-if="order.paytime">
- <view class="label">付款时间</view>
- <view>{{order.paytime|datetimeFilter}}</view>
- </view>
- <view class="row" v-if="order.deliver_time">
- <view class="label">发货时间</view>
- <view>{{order.deliver_time|datetimeFilter}}</view>
- </view>
- <view v-if="false" class="option">
- <view class="option-item">
- <uni-icons class="icon" color="#666666" type="chatboxes-filled"></uni-icons>
- 联系卖家
- </view>
- <view class="option-item">
- <uni-icons class="icon" color="#666666" type="phone-filled"></uni-icons>
- 拨打电话
- </view>
- </view>
- </view>
- <view v-if="order.status === 'wait_pay' || order.status === 'wait_sign'" class="footer">
- <view class="option">
- <button v-if="order.status === 'wait_pay'" class="pay-btn" type="default" @tap="goToCashier">立即支付</button>
- <button v-if="order.status === 'wait_sign'" class="confirm-btn" type="default">确认收货</button>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- order: {
- seller: {}
- }
- }
- },
- onLoad(option) {
- this.order.id = option.id;
- this.getOrderData();
- },
- methods: {
- getOrderData() {
- this.$http.get({
- url: "/order",
- data: {
- id: this.order.id
- },
- success: (res) => {
- res.data.data.products_json = JSON.parse(res.data.data.products_snapshot)
- this.order = res.data.data
- }
- })
- },
- goToCashier() {
- uni.navigateTo({
- url: "/pages/order/cashier?order_no=" + this.order.order_no
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .location {
- padding: 40upx 20upx;
- background: white url(../../static/images/location.png) no-repeat;
- // background-color: white;
- background-size: 75upx 75upx;
- background-position: 30upx;
- .contacts {
- display: flex;
- align-items: center;
- margin-left: 100upx;
- .name {
- margin-right: 20upx;
- font-size: 28upx;
- }
- .phone {
- font-size: 24upx;
- color: #999999;
- }
- }
- .address {
- margin-left: 100upx;
- font-size: 28upx;
- margin-top: 10upx;
- }
- }
- .order {
- background: white;
- margin-top: 20upx;
- padding: 20upx;
- // border-radius: 20upx;
- .order-head {
- display: flex;
- justify-content: space-between;
- margin-bottom: 20upx;
- .order-status {
- color: $primary-color;
- font-size: 24upx;
- }
- }
- .factory-name {
- font-size: 28upx;
- font-weight: bold;
- }
- .product-item {
- display: flex;
- .product-image {
- width: 120upx;
- height: 120upx;
- margin-right: 20upx;
- margin-top: 10upx;
- .image {
- width: 120upx;
- height: 120upx;
- }
- }
- .product-info {
- flex-grow: 1;
- font-size: 28upx;
- .name {
- font-size: 28upx;
- white-space: normal;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- }
- .num {
- color: #999999;
- }
- .spec {
- font-size: 26upx;
- background: #CCCCCC;
- color: white;
- padding: 0 10upx;
- border-radius: 10upx;
- }
- }
- .row {
- display: flex;
- justify-content: space-between;
- margin-bottom: 10upx;
- }
- }
- .total-price {
- text-align: right;
- font-size: 28upx;
- padding: 10upx 0;
- .warning {
- color: $primary-color;
- font-weight: bold;
- }
- }
- }
- .info {
- background: white;
- margin-top: 20upx;
- padding: 20upx;
- .title {
- font-size: 30upx;
- margin-bottom: 20upx;
- font-weight: bold;
- }
- .row {
- display: flex;
- font-size: 26upx;
- margin: 10upx 0;
- & .label {
- width: 200upx;
- }
- }
- .option {
- display: flex;
- justify-content: space-around;
- text-align: center;
- padding: 20upx 0 0 0;
- border-top: 2upx solid #EEEEEE;
- color: #666666;
- margin-top: 40upx;
- .icon {
- margin-right: 10upx;
- }
- .option-item {
- flex: 1;
- }
- .option-item:first-child {
- border-right: 2upx solid #EEEEEE;
- }
- }
- }
- .footer {
- height: 80upx;
- background: white;
- position: fixed;
- bottom: 0;
- width: 100%;
- box-shadow: 0 0 10upx #EEEEEE;
- .option {
- text-align: right;
- margin: 15upx;
- .pay-btn,
- .confirm-btn {
- background: white;
- border: 2upx solid $primary-color;
- display: inline-block;
- line-height: normal;
- font-size: 28upx;
- color: $primary-color;
- border-radius: 40upx;
- padding: 5upx 10upx;
- }
- }
- }
- </style>
|