TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

拼团模块新增完善对接接口等

Browse Source
This commit is contained in:
张冬雪
2022-08-24 16:47:25 +08:00
parent aa5c4a2c61
commit bb04fd3439
37 changed files with 11551 additions and 5425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
uni_modules/oct-order-pin/components/oct-order-pin/index.vue Normal file
View File

@@ -0,0 +1,297 @@
<template>
<view>
<view class="order--content" :class="[pattern ? 'chunk': 'broad']">
<block v-if="!stores">
<view class="order--group--header" @click="$emit('onBtn', {type: 'shopsDetail', order: orderInfo})">
<image class="logo" v-if="orderInfo.shop.cover != ''" :src="orderInfo.shop.cover" mode="aspectFill"></image>
<view class="store">
{{orderInfo.shop.name}} <uni-icons type="right" size="16" color="#666" />
</view>
<view class="stateText" :style="{color: stateColor}">
{{orderInfo.stateText}}
</view>
</view>
<view class="order--header">
<view class="order--no">
订单号：{{orderInfo.no}}
</view>
</view>
<view class="order--flex" @click="$emit('onBtn', {type: 'goodsDetail', order: orderInfo})">
<image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image>
<view class="order--title">
{{orderInfo.name}}
<view class="unit"> {{orderInfo.unit}} </view>
</view>
<view class="order--count">
<view class="order--price">{{orderInfo.price}}<text>DT积分</text></view>
<view class="order--sum">共{{orderInfo.sum}} 件</view>
</view>
</view>
</block>
<block v-else>
<view class="order--group">
<view class="order--group--header">
<image class="logo" v-if="orderInfo.store.logo != ''" :src="orderInfo.store.logo" mode="aspectFill"></image>
<view class="store">
{{orderInfo.store.name}}
</view>
<view class="stateText" :style="{color: stateColor}">
{{orderInfo.stateText}}
</view>
</view>
<view class="order--group--flex" v-for="(storeItem, storeGood) in orderInfo.storesGoods" :key="storeGood">
<image class="order--cover" :src="storeItem.cover" mode="aspectFill"></image>
<view class="order--title">{{storeItem.name}}</view>
<view class="order--count">
<view class="order--price">{{storeItem.price}}<text>DT积分</text></view>
<view class="order--sum"> X {{storeItem.sum}} </view>
</view>
</view>
</view>
</block>
<slot name="btns" v-if="orderInfo.cans">
<view class="order--btns">
<view v-show="orderInfo.cans.cancel" class="item item--cancel" @click="$emit('onBtn', {type: 'cancel', order: orderInfo})">取消订单</view>
<view v-show="orderInfo.cans.refund_money" class="item item--cancel" @click="$emit('onBtn', {type: 'refundMoney', order: orderInfo})">申请退款</view>
<view v-show="orderInfo.cans.refund" class="item item--cancel" @click="$emit('onBtn', {type: 'refund', order: orderInfo})">申请售后</view>
<view v-show="orderInfo.cans.delete" class="item item--delete" @click="$emit('onBtn', {type: 'delete', order: orderInfo})">删除订单</view>
<view v-show="orderInfo.cans.logistic_show" class="item item--logistic" @click="$emit('onBtn', {type: 'logistic', order: orderInfo})">查看物流</view>
<view v-show="orderInfo.cans.pay" class="item item--pay" @click="$emit('onBtn', {type: 'pay', order: orderInfo})">立即支付</view>
<view v-show="orderInfo.cans.sign" class="item item--sign" @click="$emit('onBtn', {type: 'sign', order: orderInfo})">确认签收</view>
</view>
</slot>
</view>
</view>
</template>
<script>
export default{
props:{
// 订单样式否为块
pattern: {
type: Boolean,
default: true
},
// 店铺模式
stores: {
type: Boolean,
default: false
},
// 订单信息
orderInfo: {
type: Object,
default: () => {
return {
cover : "",
name : "",
price : "",
sum : 1,
stateText : ""
}
}
},
// 状态标签颜色
stateColor: {
type : String,
default : "#FF6160"
},
// 可操作按钮组
orderBtns: {
type : Array,
default : () => {
return [
{
text: "订单详情",
type: "info"
},{
text : "删除订单",
type : "delete",
style: { color: "#FF6160" }
}
]
}
}
}
}
</script>
<style scoped lang="scss">
$margin: 30rpx;
$radius: 10rpx;
.text-nowrap {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-ellipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.order--content{
background: white;
&.chunk{
margin: $margin $margin;
border-radius: $radius;
padding: $margin;
}
&.broad{
padding: $margin;
border-bottom: solid 1rpx #ddd;
}
.order--header{
display: flex;
justify-content: space-between;
padding-bottom: $margin;
border-top: solid 1rpx #f9f9f9;
align-items: center;
& > .order--no{
flex: 1;
margin-right: $margin;
font-size: 26rpx;
line-height: 40rpx;
color: #555;
@extend .text-nowrap;
padding-top: 10rpx;
}
&> .stateText{
font-size: 26rpx;
color: $text-price;
}
}
.order--flex{
display: flex;
align-items: center;
.order--cover{
vertical-align: top;
width: 128rpx;
height: 128rpx;
}
.order--title{
@extend .text-ellipsis;
text-align: left;
flex: 1;
padding-left: $margin;
font-size: 28rpx;
line-height: 40rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
.unit{
color: #999;
font-size: 26rpx;
padding-top: 10rpx;
}
}
.order--count{
text-align: right;
padding-left: $margin;
line-height: 40rpx;
// color: $text-price;
.order--price{
font-size: 30rpx;
font-weight: bold;
&>text{
font-size: 24rpx;
font-weight: normal;
padding-left: 10rpx;
}
}
.order--sum{
font-size: 26rpx;
color: #777;
}
}
}
.order--group{
.order--group--header{
padding-bottom: $margin;
display: flex;
justify-content: space-between;
align-items: center;
&> .logo{
width: 38rpx;
height: 38rpx;
vertical-align: middle;
margin-right: $margin/2;
}
&> .store{
@extend .text-nowrap;
flex: 1;
margin-right: $margin;
font-size: 28rpx;
line-height: 40rpx;
color: #555;
}
&> .stateText{
font-size: 26rpx;
}
}
.order--group--flex{
@extend .order--flex;
margin-bottom: $margin - 10;
&:last-child{
margin: 0;
}
}
}
.order--group--header{
padding-bottom: $margin;
display: flex;
justify-content: space-between;
align-items: center;
&> .logo{
width: 38rpx;
height: 38rpx;
vertical-align: middle;
margin-right: $margin/2;
}
&> .store{
@extend .text-nowrap;
flex: 1;
margin-right: $margin;
font-size: 28rpx;
line-height: 40rpx;
color: #555;
}
&> .stateText{
font-size: 26rpx;
}
}
.order--group--flex{
@extend .order--flex;
margin-bottom: $margin - 10;
&:last-child{
margin: 0;
}
}
.order--btns{
display: flex;
justify-content: flex-end;
padding-top: $margin - 10;
&> .item{
font-size: 26rpx;
margin-left: $margin/2;
color: #333;
line-height: 56rpx;
border: solid 1rpx #ddd;
padding: 0 ($margin - 10);
border-radius: 28rpx;
&--cancel,
&--delete,
&--logistic{
color: #666;
}
&--pay,
&--sign{
color: #34CE98;
border-color: #34CE98;
}
}
}
}
</style>