123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <template>
- <view class="order">
- <view class="header">
- <view class="title">
- 订单明细
- </view>
- <view class="tabs">
- <view class="tab-item active">全部</view>
- <view class="tab-item">已付款</view>
- <view class="tab-item">已完成</view>
- </view>
- </view>
- <view class="order-list">
- <view class="order-item" v-for="order in orders">
- <view class="order-head">
- <view class="factory-name">{{order.factory}}</view>
- <view v-if="order.status === 0" class="order-status">待付款</view>
- <view v-if="order.status === 2" class="order-status">待收货</view>
- </view>
- <view class="order-info" @tap="openDetails()">
- <view class="product-item" v-for="product in order.products">
- <view class="product-image">
- <image class="image" :src="product.image" mode="scaleToFill"></image>
- </view>
- <view class="product-info">
- <view class="row">
- <view class="name">{{product.name}}</view>
- <view class="price">¥{{product.price}}</view>
- </view>
- <view class="row">
- <view class="spec">{{product.specs_name}}</view>
- <view class="num">×{{product.specs_num}}</view>
- </view>
- </view>
- </view>
- </view>
- <view class="total-price">
- 总价 <text class="warning">¥{{order.total}}</text>
- </view>
- <view class="option">
- <button v-if="order.status === 0" class="pay-btn" type="default">立即支付</button>
- <button v-if="order.status === 2" class="confirm-btn" type="default">确认收货</button>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- orders: [{
- factory: '省心一号工厂',
- products: [{
- name: '泰国Mistine小黄帽防晒霜',
- image: 'https://img.alicdn.com/i4/2929053804/O1CN01RSromv1dyHBcuS4I6_!!2929053804.jpg',
- price: 9.52,
- specs_name: "白色",
- specs_num: 5
- }],
- status: 2,
- total: '99.51'
- }, {
- factory: '省心二号工厂',
- products: [{
- name: '【三只松鼠】元宵送礼坚果礼盒1498g',
- image: 'https://img.alicdn.com/i4/880734502/O1CN01tA7hal1j7xjnwHQZC_!!880734502.jpg',
- price: 9.52,
- specs_name: "白色",
- specs_num: 5
- },
- {
- name: '泰国Mistine小黄帽防晒霜',
- image: 'https://img.alicdn.com/i4/2929053804/O1CN01RSromv1dyHBcuS4I6_!!2929053804.jpg',
- price: 9.52,
- specs_name: "白色",
- specs_num: 5
- }
- ],
- status: 0,
- total: '58.51'
- }]
- }
- },
- methods: {
- openDetails() {
- uni.navigateTo({
- url:"order-details"
- })
- }
- }
- }
- </script>
- <style lang="scss">
- .message {
- overflow: hidden;
- }
- .header {
- margin: 20upx;
- background: white;
- text-align: center;
- border-radius: 20upx;
- .title {
- height: 100upx;
- font-size: 30upx;
- line-height: 100upx;
- // font-weight: bold;
- }
- .tabs {
- display: flex;
- justify-content: space-between;
- .tab-item {
- flex: 1;
- padding: 10upx 0;
- font-size: 28upx;
- color: #999999;
- &.active {
- background: $primary-color;
- color: white;
- border-radius: 20upx;
- }
- }
- }
- }
- .order-list {
- .order-item {
- background: white;
- margin: 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;
- }
-
- }
- .option {
- text-align: right;
- .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>
|