修改物流弹窗及个人中心企业工具弹窗及员工模块的发货单管理，退换货管理新增
This commit is contained in:
269
components/store-order-details/store-order-details.vue
Normal file
269
components/store-order-details/store-order-details.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="OrderInfo">
|
||||
<!-- 订单状态 -->
|
||||
<view class="order-status">
|
||||
<block v-if="listType == 'deliver'">
|
||||
<view class="info">
|
||||
{{info.state_text}}
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="info" v-if="info.state">
|
||||
{{info.state.text}}
|
||||
<span>{{info.state.remark}}</span>
|
||||
</view>
|
||||
</block>
|
||||
<image src="../../static/icons/fire.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="goods-info1">
|
||||
<view class="top">
|
||||
<view class="company">
|
||||
<view class="company-logo" v-if="info.shop">
|
||||
<image :src="info.shop.cover" mode="aspectFill" />
|
||||
<view class="name nowrap">{{info.shop.name}}</view>
|
||||
</view>
|
||||
<view class="flexrow">
|
||||
<view class="no nowrap" v-if="listType == 'deliver'">发货单号： {{info.shipment_no}}</view>
|
||||
<view class="no nowrap" v-else>退货单号： {{info.refund_no}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<image class="goods-img" v-if="info.goods_sku" :src="info.goods_sku.cover" mode="aspectFill" />
|
||||
<view class="goods" v-if="info.goods_sku">
|
||||
<view class="nowrap name">{{info.goods_sku.goods_name}}</view>
|
||||
<view class="sku">数权个数 <span>x {{info.qty}}</span> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info1" >
|
||||
<view class="goods-type">创建{{listType == 'deliver'?'发货':'退货'}}时间 <span>{{info.created_at}}</span></view>
|
||||
<view class="goods-type">运费 <span>自行承担运费</span></view>
|
||||
<view class="goods-type">{{listType === 'deliver'?'发货':'退货'}}数量 <span>{{info.qty}}个</span></view>
|
||||
</view>
|
||||
|
||||
<view class="goods-info1" v-if="listType === 'deliver' && info.express">
|
||||
<view class="goods-type" v-if="info.express">收件人姓名 <span>{{info.express.name || '--'}}</span></view>
|
||||
<view class="goods-type" v-if="info.express" @click="call(info.express.mobile)">收件人电话 <span>{{info.express.mobile || '--'}}</span></view>
|
||||
<view class="goods-type" v-if="info.express">收货地址 <span>{{info.express.full_address || '--'}}</span></view>
|
||||
<view class="goods-type" v-if="info.express">发货快递 <span>{{info.express.express_name || '--'}}</span></view>
|
||||
<view class="goods-type" v-if="info.express">快递单号 <span>{{info.express.express_no || '--'}}</span></view>
|
||||
</view>
|
||||
<view class="goods-info1" v-else>
|
||||
<view class="goods-type" v-if="info.express">退货单快递<span>{{info.express.company || '--'}}</span></view>
|
||||
<view class="goods-type" v-if="info.express">退货快递单号 <span>{{info.express.number || '--'}}</span></view>
|
||||
</view>
|
||||
|
||||
<!-- 操作相关 -->
|
||||
<view class="actions">
|
||||
<view class="nowPay" @click="orderRun">返回列表</view>
|
||||
<view v-if="listType != 'deliver'" @click="$Router.push({name: 'storeJournal', params: {id: info.refund_id}})" class="nowPay">查看退货日志</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"storeOrderDet",
|
||||
props:{
|
||||
// 数据列表
|
||||
info : {},
|
||||
listType: ''
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
orderRun() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
call(number){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber:number
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.OrderInfo {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-color: #F7F7F7;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
.order-status {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
background-image: linear-gradient(to bottom, $mian-color,$mian-color-light);
|
||||
color: #Fff;
|
||||
font-size: 36rpx;
|
||||
padding: 30rpx 50rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
.info {
|
||||
font-size: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
font-size: 28rpx;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 订单信息
|
||||
.goods-info1 {
|
||||
padding: 20rpx 40rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: $margin;
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: solid 1rpx #EFF4F2;
|
||||
.company-logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.name {
|
||||
width: 600rpx;
|
||||
font-size: 30rpx;
|
||||
color: #484848;
|
||||
font-weight: bold;
|
||||
}
|
||||
.no {
|
||||
margin-top: 30rpx !important;
|
||||
font-size: $title-size*0.8;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin-top: 40rpx;
|
||||
.goods-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.goods {
|
||||
width: calc(100% - 120rpx);
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.sku {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: solid 1rpx #f2f2f2;
|
||||
padding-top: 18rpx;
|
||||
padding-right: 30rpx;
|
||||
padding-left: 30rpx;
|
||||
height: 110rpx;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
.nowPay {
|
||||
margin-left: 20rpx;
|
||||
height: 54rpx;
|
||||
line-height: 50rpx;
|
||||
box-sizing: border-box;
|
||||
border: solid 1rpx #747788;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
&.actions-color {
|
||||
color: #e1293f;
|
||||
border-color: #ec96a0;
|
||||
}
|
||||
}
|
||||
.cancelOrder {
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #DD524D;
|
||||
}
|
||||
.logistics {
|
||||
background-color: $mian-color;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.sign {
|
||||
background-color: #DD524D;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.evaluate {
|
||||
background-color: $mian-color;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
288
components/store-order/store-order.vue
Normal file
288
components/store-order/store-order.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<view class="returnCont">
|
||||
<block v-if="list.length > 0">
|
||||
<view class="returnList" v-for="(item, index) in list" :key="index">
|
||||
<view class="MallRefundsTemplate">
|
||||
<view class="top">
|
||||
<view class="company">
|
||||
<view class="company-logo" v-if="item.shop">
|
||||
<image :src="item.shop.cover" mode="aspectFill" />
|
||||
<view class="company-name nowrap">{{item.shop.name}}</view>
|
||||
</view>
|
||||
<view class="no nowrap" v-if="listType == 'deliver'">退货单号： {{item.shipment_no}}</view>
|
||||
<view class="no nowrap" v-else>退货单号： {{item.refund_no}}</view>
|
||||
</view>
|
||||
<view class="status" style="color:#ff5500;" v-if="listType == 'deliver'">{{item.state_text}}
|
||||
</view>
|
||||
<view class="status" style="color:#ff5500;" v-else>{{item.state.text}}</view>
|
||||
</view>
|
||||
<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)" v-if="item.goods_sku">
|
||||
<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
|
||||
<view class="goods">
|
||||
<view class="name nowrap">{{item.goods_sku.goods_name}}</view>
|
||||
<view class="sku">数权个数 <span>x {{item.qty}}</span> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="actions">
|
||||
<view v-if="item.can">
|
||||
<view v-if="item.can.audit"
|
||||
@click="$Router.push({name: 'Examine', params: {id: item.refund_id}})"
|
||||
class="nowPay actions-color">订单审核</view>
|
||||
<view v-if="item.can.sign" @click="goSigns(item.refund_id, index)" class="nowPay actions-color">
|
||||
订单签收</view>
|
||||
<view v-if="item.can.reToken" @click="goReTokens(item.refund_id, index)"
|
||||
class="nowPay actions-color">确认退货</view>
|
||||
<view v-if="item.can.logistic"
|
||||
@click="$Router.push({name: 'Logistic', params: {id: item.shipment_no}})"
|
||||
class="nowPay actions-color">查看物流</view>
|
||||
<view v-if="item.can.deliver"
|
||||
@click="$Router.push({name: 'DeliverForm', params: {id: item.shipment_no}})"
|
||||
class="nowPay actions-color">我要发货</view>
|
||||
</view>
|
||||
<view v-if="listType == 'deliver'" class="nowPay"
|
||||
@click="$Router.push({name: 'storeOrderDetails', params: {id: item.shipment_no, type: listType}})">
|
||||
查看详情</view>
|
||||
<view v-else class="nowPay"
|
||||
@click="$Router.push({name: 'storeOrderDetails', params: {id: item.refund_id, type: 'return'}})">
|
||||
查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-else class="pack-center">
|
||||
<image src="/static/icons/order-null.png"></image>
|
||||
<view>{{toast}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "goodsList",
|
||||
props: {
|
||||
// 数据列表
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return new Array
|
||||
}
|
||||
},
|
||||
listType: '',
|
||||
// 列表空提示
|
||||
toast: {
|
||||
type: String,
|
||||
default: '暂无订单数据 -_-!'
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
goSigns(id,index) {
|
||||
this.$emit('goSign',{id:id,index:index});
|
||||
},
|
||||
goReTokens(id,index){
|
||||
this.$emit('goReToken',{id:id,index:index});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 列表
|
||||
.returnList {
|
||||
background-color: #FFFFFF;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin;
|
||||
}
|
||||
|
||||
.MallRefundsTemplate {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// 顶部信息
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
.company-logo {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 30rpx;
|
||||
color: #484848;
|
||||
font-weight: bold;
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.no {
|
||||
margin-top: 10rpx;
|
||||
font-size: $title-size*0.8;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #999;
|
||||
font-size: $title-size*.9;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 商品信息
|
||||
.goods-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin-top: 36rpx;
|
||||
|
||||
.goods-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.goods {
|
||||
flex: 1;
|
||||
width: calc(100% - 120rpx);
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.sku {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flexrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.copy {
|
||||
color: $mian-color;
|
||||
font-size: $title-size*0.8;
|
||||
font-weight: 400;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
border-top: solid 1rpx #EFF4F2;
|
||||
margin-top: $margin;
|
||||
|
||||
.nowPay {
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #999;
|
||||
border: solid 1rpx #cacaca;
|
||||
|
||||
&.actions-color {
|
||||
color: #e1293f;
|
||||
border-color: #ec96a0;
|
||||
}
|
||||
}
|
||||
|
||||
.cancelOrder {
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #DD524D;
|
||||
}
|
||||
|
||||
.logistics {
|
||||
background-color: $mian-color;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.sign {
|
||||
background-color: #DD524D;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.evaluate {
|
||||
background-color: $mian-color;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 暂无订单
|
||||
.pack-center {
|
||||
text-align: center;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
padding-top: 50%;
|
||||
|
||||
image {
|
||||
width: $uni-img-size-lg * 2;
|
||||
height: $uni-img-size-lg * 2;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
pages.json
72
pages.json
@@ -195,6 +195,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "pages/user/order/mallShipmentsRefund",
|
||||
"name": "MallShipments",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退货申请",
|
||||
"navigationBarTextStyle": "white",
|
||||
"app-plus":{
|
||||
"titleNView": {
|
||||
"backgroundImage": "linear-gradient(to right, #7c52fc, #976dff)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "pages/user/order/mallRefundsInfo",
|
||||
"name": "MallRefundsInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退货申请",
|
||||
"navigationBarTextStyle": "white",
|
||||
"app-plus":{
|
||||
"titleNView": {
|
||||
"backgroundImage": "linear-gradient(to right, #7c52fc, #976dff)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"path": "pages/user/order/logistics",
|
||||
"name": "Orderlogistics",
|
||||
@@ -395,7 +419,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
"path": "pages/coupons/magDetails",
|
||||
"name": "couponsDetails",
|
||||
"style": {
|
||||
@@ -731,7 +756,50 @@
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/store/return",
|
||||
"name": "Return",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退货单处理",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/store/orderDetails",
|
||||
"name": "storeOrderDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/store/deliver",
|
||||
"name": "Deliver",
|
||||
"style": {
|
||||
"navigationBarTitleText": "发货单处理",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/store/deliverForm",
|
||||
"name": "DeliverForm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我要发货",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/store/logistic",
|
||||
"name": "Logistic",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提货单物流",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/store/journal",
|
||||
"name": "storeJournal",
|
||||
"style": {
|
||||
"navigationBarTitleText": "操作日志",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"backgroundColor": "#F5F5F5",
|
||||
|
||||
249
pages/store/Spread.vue
Normal file
249
pages/store/Spread.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="codeContent">
|
||||
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image>
|
||||
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
|
||||
<view class="textContent">
|
||||
<view class="company">
|
||||
<image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
|
||||
<view class="company-cont">
|
||||
<view class="nowrap company-name">{{companyInfo.name}}</view>
|
||||
<view class="company-tips">易货平台</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="code">
|
||||
<image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
|
||||
<!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
|
||||
</view>
|
||||
<!-- @click="shareCanvas" -->
|
||||
<view class="codeBnt">
|
||||
扫码推广
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<canvas class="codeImg" canvas-id="qrcodeCard"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { companiesCode } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
companyInfo : ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
companiesCode().then(res=>{
|
||||
this.companyInfo = res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 绘制图片
|
||||
shareCanvas(e){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
|
||||
// 下载头像
|
||||
let avatarImg = new Promise(success=>{
|
||||
uni.getImageInfo({
|
||||
src : this.companyInfo.cover,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 下载二维码
|
||||
let codeImg = new Promise(success => {
|
||||
uni.getImageInfo({
|
||||
src : this.companyInfo.code,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Promise.all([avatarImg, codeImg]).then(res => {
|
||||
console.log(res[0],'0')
|
||||
console.log(res[1],'1')
|
||||
// 绘制海报
|
||||
const ctx = uni.createCanvasContext('qrcodeCard')
|
||||
ctx.save()
|
||||
|
||||
// 绘制背景图片
|
||||
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603)
|
||||
|
||||
// 绘制头像
|
||||
ctx.drawImage(res[0], 0, 0, 60, 60)
|
||||
|
||||
// 绘制二维码
|
||||
ctx.drawImage(res[1], 140, 250, 110, 110)
|
||||
|
||||
// 文字
|
||||
ctx.setFontSize(16)
|
||||
ctx.fillText(this.companyInfo.name, 194, 180 , 270)
|
||||
|
||||
ctx.setFontSize(16)
|
||||
ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath(); //开始绘制
|
||||
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
|
||||
ctx.clip();
|
||||
|
||||
// 保存图片
|
||||
ctx.draw(true, () => {
|
||||
uni.hideLoading()
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'qrcodeCard',
|
||||
x: 0,
|
||||
y: 0,
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success : res=>{
|
||||
if (res.errMsg == "saveImageToPhotosAlbum:ok"){
|
||||
uni.showToast({
|
||||
title: '分享海报已保存至相册',
|
||||
icon : 'none'
|
||||
})
|
||||
}else{
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
fail : err=>{
|
||||
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
|
||||
confirmColor: '#d82526',
|
||||
confirmText : '去设置',
|
||||
success : res=>{
|
||||
if (res.confirm){
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: '海报下载，请检查网络',
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #e93340;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.codeContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.codeContent-back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
.codeContent-cont {
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
top: 100px;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
.codeContent-tips {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
width: 200rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
.textContent {
|
||||
position: absolute;
|
||||
padding: 20rpx 20rpx 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
width: 70%;
|
||||
z-index: 3;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
top: 140px;
|
||||
}
|
||||
.company {
|
||||
width: 100%;
|
||||
.company-logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.company-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 230rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 20rpx 20rpx 30rpx 210rpx;
|
||||
font-size: $title-size;
|
||||
.company-name {
|
||||
font-weight: 600;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.company-tips {
|
||||
font-size: 26rpx;
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
}
|
||||
.code {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: $margin;
|
||||
.code-img {
|
||||
width: 90%;
|
||||
}
|
||||
.code-text {
|
||||
color: #787878;
|
||||
margin-top: $margin - 10;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.codeBnt {
|
||||
background-color: #e1293f;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
line-height: 90rpx;
|
||||
font-weight: 600;
|
||||
font-size: $title-size;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* canvas */
|
||||
.codeImg {
|
||||
position: absolute;
|
||||
left: -1000%;
|
||||
height: 603px;
|
||||
width: 375px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
538
pages/store/basics.vue
Normal file
538
pages/store/basics.vue
Normal file
@@ -0,0 +1,538 @@
|
||||
<template>
|
||||
<view class="ios-bottom">
|
||||
<view class="info">
|
||||
<view class="item info-logo" @click="updImg('logo', '')">
|
||||
<label>企业LOGO</label>
|
||||
<image :src="logo" mode="aspectFill"></image>
|
||||
<uni-icons class="icon" color="#999" size="18" type="arrowright"></uni-icons>
|
||||
</view>
|
||||
<view class="item info-text">
|
||||
<label>企业简介</label>
|
||||
<textarea v-model="description" placeholder="输入企业简介" />
|
||||
</view>
|
||||
<view class="item info-text">
|
||||
<label>企业地址</label>
|
||||
<input v-model="address" placeholder="输入企业地址" />
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(module, moduleIndex) in modules" :key="moduleIndex">
|
||||
<view class="module-item" v-if="module.type === 1">
|
||||
<view class="module-title">
|
||||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-textarea">
|
||||
<textarea placeholder="输入文字内容" v-model="module.content.content" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-item" v-if="module.type === 2">
|
||||
<view class="module-title">
|
||||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-imgs">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in module.content.image"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="cover"
|
||||
:src="item.showpath"
|
||||
mode="aspectFill"
|
||||
@click="openImg(module.content.image, index, 'imgs')"
|
||||
@longpress="removeImg('imgs', moduleIndex, index)"
|
||||
/>
|
||||
<view class="item-input">
|
||||
<input type="text" v-model="item.title" placeholder="输入标题" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="updImgs(moduleIndex)">
|
||||
<view class="item-upd cover">
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<view>上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-hint">点击查看图片，长按删除图片</view>
|
||||
</view>
|
||||
<view class="module-item" v-if="module.type === 3">
|
||||
<view class="module-title">
|
||||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-videos">
|
||||
<view class="item">
|
||||
<block v-if="module.content.video_image.showpath != ''">
|
||||
<image
|
||||
class="cover"
|
||||
:src="module.content.video_image.showpath"
|
||||
mode="aspectFill"
|
||||
@click="openImg([module.content.video_image.showpath], 0, 'videos')"
|
||||
@longpress="removeImg('videoCover', moduleIndex, '')"
|
||||
/>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="item-upd" @click="updImg('videoCover', moduleIndex)">
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<view>上传视频封面</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="item">
|
||||
<video
|
||||
class="cover"
|
||||
v-if="module.content.video_url.showpath != ''"
|
||||
:src="module.content.video_url.showpath"
|
||||
@longpress="removeImg('video', moduleIndex, '')"
|
||||
/>
|
||||
<view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<view>上传视频</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-hint">点击查看封面/视频，长按删除封面
|
||||
<span class='delVideo' v-if="module.content.video_url.showpath != ''"
|
||||
@longpress="removeImg('video', moduleIndex, '')">长按删除视频</span>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="add-modules" @click="addModule">
|
||||
<uni-icons class="icon" type="plus" size="18" color="#c82626"/> 添加展示模块
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { basicsInfo, basicsConfig } from '@/apis/interfaces/store'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logo : '',
|
||||
description : '',
|
||||
address : '',
|
||||
modules : [],
|
||||
modulesType : []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
Promise.all([basicsInfo('GET', {}), basicsConfig()]).then(res => {
|
||||
console.log(res)
|
||||
|
||||
let info = res[0]
|
||||
this.logo = info.base.cover
|
||||
this.description = info.base.description
|
||||
this.modules = info.extends
|
||||
this.address = info.info.address
|
||||
this.modulesType = res[1]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 图片预览
|
||||
openImg(paths, index, type){
|
||||
if(type === 'imgs'){
|
||||
paths = paths.map(val => {
|
||||
return val.showpath
|
||||
})
|
||||
}
|
||||
uni.previewImage({
|
||||
urls : paths,
|
||||
current : index,
|
||||
indicator: 'number'
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
removeImg(type, moduleIndex, index){
|
||||
let modulesObj = this.modules[moduleIndex]
|
||||
if(type === 'videoCover'){
|
||||
modulesObj.content.video_image.showpath = ''
|
||||
modulesObj.content.video_image.path = ''
|
||||
}
|
||||
if(type === 'imgs'){
|
||||
modulesObj.content.image.splice(index, 1)
|
||||
}
|
||||
if(type === 'video'){
|
||||
modulesObj.content.video_url.showpath = ''
|
||||
modulesObj.content.video_url.path = ''
|
||||
}
|
||||
this.$set(this.modules, moduleIndex, modulesObj)
|
||||
},
|
||||
// 单图上传
|
||||
updImg(type, index){
|
||||
switch(type){
|
||||
case 'logo':
|
||||
uni.chooseImage({
|
||||
crop: {width: 300, height: 300},
|
||||
success: path=> {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.logo = res.url[0]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'videoCover':
|
||||
uni.chooseImage({
|
||||
crop: {width: 500, height: 350},
|
||||
success: path=> {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
let modulesObj = this.modules[index]
|
||||
modulesObj.content.video_image.showpath = res.url[0]
|
||||
modulesObj.content.video_image.path = res.path[0]
|
||||
this.$set(this.modules, index, modulesObj)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'video':
|
||||
uni.chooseVideo({
|
||||
success: path=> {
|
||||
uploads([{
|
||||
name: 'video',
|
||||
uri : path.tempFilePath
|
||||
}]).then(res => {
|
||||
let modulesObj = this.modules[index]
|
||||
modulesObj.content.video_url.showpath = res.url[0]
|
||||
modulesObj.content.video_url.path = res.path[0]
|
||||
this.$set(this.modules, index, modulesObj)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
// 批量上传图片
|
||||
updImgs(index){
|
||||
uni.chooseImage({
|
||||
success: res=>{
|
||||
let path = res.tempFiles.map((val, index) => {
|
||||
return {
|
||||
name: 'uploads' + index,
|
||||
uri : val.path
|
||||
}
|
||||
})
|
||||
uploads(path).then(pathRes => {
|
||||
let modulesObj = this.modules[index],
|
||||
paths = []
|
||||
for(let i in pathRes.path){
|
||||
paths.push({
|
||||
showpath: pathRes.url[i],
|
||||
path : pathRes.path[i],
|
||||
title : ''
|
||||
})
|
||||
}
|
||||
modulesObj.content.image = [...modulesObj.content.image, ...paths]
|
||||
this.$set(this.modules, index, modulesObj)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加展示模块
|
||||
addModule(){
|
||||
console.log('添加模板，，，，')
|
||||
let modulesList = this.modulesType.map(val => {
|
||||
return val.value
|
||||
})
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: modulesList,
|
||||
success : res => {
|
||||
let content
|
||||
switch(this.modulesType[res.tapIndex].id){
|
||||
case 1:
|
||||
content = {
|
||||
content: ''
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
content = {
|
||||
image: [{
|
||||
showpath: '',
|
||||
path : '',
|
||||
title : ''
|
||||
}]
|
||||
}
|
||||
break
|
||||
case 3:
|
||||
content = {
|
||||
video_image: {
|
||||
showpath: '',
|
||||
path : ''
|
||||
},
|
||||
video_url : {
|
||||
showpath: '',
|
||||
path : ''
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
this.modules.push({
|
||||
type : this.modulesType[res.tapIndex].id,
|
||||
title : '',
|
||||
content : content
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 删除展示模块
|
||||
removeModule(index){
|
||||
this.modules.splice(index, 1)
|
||||
},
|
||||
|
||||
// 保存基础信息
|
||||
onNavigationBarButtonTap(e){
|
||||
basicsInfo('PUT', {
|
||||
cover : this.logo,
|
||||
description : this.description,
|
||||
address : this.address,
|
||||
extends : this.modules
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '基本信息已保存',
|
||||
showCancel : false,
|
||||
success : modalRes=> {
|
||||
if(modalRes.confirm){
|
||||
this.$Router.back()
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 基础信息
|
||||
.info{
|
||||
background: white;
|
||||
padding: 0 $padding;
|
||||
.item{
|
||||
position: relative;
|
||||
padding: $padding 0 $padding 200rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: -$padding;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: #eee;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.info-logo{
|
||||
text-align: right;
|
||||
padding-right: 40rpx;
|
||||
label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
image{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
background: $border-color-lg;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
.info-text{
|
||||
label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
textarea{
|
||||
line-height: 40rpx;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
}
|
||||
input{
|
||||
height: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 模块
|
||||
.add-modules{
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: $text-price;
|
||||
background: white;
|
||||
margin-top: $margin;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.icon{
|
||||
vertical-align: middle;
|
||||
margin-right: $margin/3;
|
||||
}
|
||||
}
|
||||
// 展示模块
|
||||
.module-item{
|
||||
background: white;
|
||||
padding: $padding/2 $padding;
|
||||
margin-top: $margin;
|
||||
.module-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: $padding/2;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
.title-input{
|
||||
width: calc(100% - 150rpx);
|
||||
height: 70rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
.remove-btn{
|
||||
line-height: 70rpx;
|
||||
color: $text-price;
|
||||
text-align: right;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
.module-textarea{
|
||||
padding: $padding 0 $padding/2;
|
||||
width: 100%;
|
||||
font-size: $title-size;
|
||||
line-height: 50rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.module-imgs{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: $padding/2;
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.item{
|
||||
position: relative;
|
||||
background: #F8F8F8;
|
||||
width: calc(25% - 20rpx);
|
||||
padding-top: calc(25% - 20rpx);
|
||||
margin: 10rpx;
|
||||
.cover{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-input{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba($color: #000000, $alpha: .7);
|
||||
input{
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.item-upd{
|
||||
@extend .vertical;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-hint{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
padding: $padding/2 0;
|
||||
line-height: 50rpx;
|
||||
.delVideo{
|
||||
display: inline-block;
|
||||
background-color: $mian-color;
|
||||
color: #fff;
|
||||
margin-left: 30rpx;
|
||||
padding:2rpx 20rpx ;
|
||||
}
|
||||
}
|
||||
.module-videos{
|
||||
display: flex;
|
||||
padding: $padding 0 ($padding/2);
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.item{
|
||||
position: relative;
|
||||
width: calc(50% - #{$margin/2});
|
||||
padding-top: calc(35% - #{$margin/2});
|
||||
background: #f8f8f8;
|
||||
margin: 0 10rpx;
|
||||
.item-upd{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
line-height: 40rpx;
|
||||
@extend .vertical;
|
||||
}
|
||||
.cover{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
368
pages/store/customer.vue
Normal file
368
pages/store/customer.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tabs -->
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日成交</view>
|
||||
<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月成交</view>
|
||||
<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年成交</view>
|
||||
</view>
|
||||
<!-- 统计信息 -->
|
||||
<view class="statistics">
|
||||
<view class="statistics-flex">
|
||||
<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
|
||||
<view class="statistics-date">
|
||||
{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="statistics-lay" :class="{ 'show' : sort != '' || payType != '' || channel != ''}" @click="onScreening">
|
||||
筛选 <uni-icons class="arrowdown" type="settings" color="gray"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statistics-text">
|
||||
<text>成交产品数量 {{visitor.goods_count}} 人</text>
|
||||
<text>成交产品金额 {{visitor.total}} 元</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数据列表 -->
|
||||
<view class="lists">
|
||||
<block v-if="orders.length > 0">
|
||||
<view class="item" v-for="(item, index) in orders" :key="index">
|
||||
<image class="cover" :src="item.user.avatar" mode="aspectFill"></image>
|
||||
<view class="title nowrap">
|
||||
{{item.user.nickname}}
|
||||
<view class="type">{{item.amount}}</view>
|
||||
</view>
|
||||
<view class="sub-title nowrap">订单号码: {{item.order_no}}</view>
|
||||
<view class="sub-title nowrap">订单时间: {{item.created_at}}</view>
|
||||
<view class="sub-tabs">
|
||||
<text>{{item.driver}}</text>
|
||||
<text>{{item.channel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="list-null">
|
||||
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">暂无相关成交客户记录</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 列表筛选 -->
|
||||
<uni-popup ref="settingsPopup" background-color="#FFFFFF" @maskClick="onReset">
|
||||
<view class="popup-content">
|
||||
<view class="title">排序方式</view>
|
||||
<view class="popup-choose-flex">
|
||||
<view class="item" :class="{'show' : sort == 'money_asc'}" @click="sort = 'money_asc'">金额从低到高</view>
|
||||
<view class="item" :class="{'show' : sort == 'money_desc'}" @click="sort = 'money_desc'">金额从高到低</view>
|
||||
<view class="item" :class="{'show' : sort == 'sold_asc'}" @click="sort = 'sold_asc'">销量从低到高</view>
|
||||
<view class="item" :class="{'show' : sort == 'sold_desc'}" @click="sort = 'sold_desc'">销量从高到低</view>
|
||||
</view>
|
||||
<view class="title">支付方式</view>
|
||||
<view class="popup-choose-flex">
|
||||
<view class="item" :class="{'show' : payType == 'eb'}" @click="payType = 'eb'">易币交易</view>
|
||||
<view class="item" :class="{'show' : payType == 'money'}" @click="payType = 'money'">现金交易</view>
|
||||
</view>
|
||||
<view class="title">成交渠道</view>
|
||||
<view class="popup-choose-flex">
|
||||
<view class="item" :class="{'show' : channel == 'app'}" @click="channel = 'app'">APP</view>
|
||||
<view class="item" :class="{'show' : channel == 'mini'}" @click="channel = 'mini'">自媒体</view>
|
||||
</view>
|
||||
<view class="popup-btns">
|
||||
<view class="item" @click="onReset">重置</view>
|
||||
<view class="item" @click="onSettings">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</uni-popup>
|
||||
<!-- :status="more" -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getDate from '@/public/date'
|
||||
import { orderUsers } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsIndex : 'day',
|
||||
dateValue : '',
|
||||
endDate : '',
|
||||
visitor : {
|
||||
day: 0,
|
||||
all: 0
|
||||
},
|
||||
orders : [],
|
||||
sort : '',
|
||||
payType : '',
|
||||
channel : '',
|
||||
// 分页
|
||||
pageStatus : '',
|
||||
page : 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getDate().then(res => {
|
||||
this.dateValue = res
|
||||
this.endDate = res
|
||||
this.getLists()
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// tabs筛选
|
||||
onTbas(type){
|
||||
getDate(type).then(res => {
|
||||
this.tabsIndex = type
|
||||
this.dateValue = res
|
||||
this.page = 1
|
||||
this.getLists()
|
||||
})
|
||||
},
|
||||
onReset(){
|
||||
this.sort = ''
|
||||
this.payType = ''
|
||||
this.channel = ''
|
||||
},
|
||||
onSettings(){
|
||||
this.getLists()
|
||||
this.$refs.settingsPopup.close()
|
||||
},
|
||||
// 日期筛选
|
||||
pickerDate(e){
|
||||
let dateValue = e.detail.value
|
||||
this.dateValue = dateValue
|
||||
this.getLists()
|
||||
},
|
||||
// 列表筛选
|
||||
onScreening(){
|
||||
this.$refs.settingsPopup.open('bottom')
|
||||
},
|
||||
// 获取列表
|
||||
getLists(){
|
||||
orderUsers({
|
||||
type : this.tabsIndex,
|
||||
date : this.dateValue,
|
||||
sort : this.sort,
|
||||
pay_type : this.payType,
|
||||
channel : this.channel,
|
||||
page : this.page
|
||||
}).then(res => {
|
||||
if(res.orders.page.current === 1){
|
||||
this.orders = []
|
||||
}
|
||||
this.visitor = res.visitor
|
||||
this.orders = this.orders.concat(res.orders.data)
|
||||
this.page = res.orders.page.current
|
||||
this.pageStatus = res.orders.page.has_more ? 'more': 'noMore'
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.pageStatus == 'more'){
|
||||
this.pageStatus = 'loading'
|
||||
this.page += 1
|
||||
this.getLists()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 筛选层
|
||||
.popup-content{
|
||||
padding: $padding * 2;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
margin-top: $margin;
|
||||
}
|
||||
.popup-choose-flex{
|
||||
padding: $padding /2 0;
|
||||
margin: 0 -($margin - 20rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
width: calc(33.33% - #{$margin - 10});
|
||||
font-size: $title-size-sm;
|
||||
text-align: center;
|
||||
background: $border-color-lg;
|
||||
line-height: 68rpx;
|
||||
margin: $margin - 20;
|
||||
color: $text-gray;
|
||||
border:solid 1rpx $border-color-lg;
|
||||
box-sizing: border-box;
|
||||
&.show{
|
||||
border:solid 1rpx $text-price;
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-btns{
|
||||
padding-top: $padding*2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 -$margin/2;
|
||||
.item{
|
||||
margin: $margin/2;
|
||||
color: $text-price;
|
||||
background: rgba($color: $text-price, $alpha: .1);
|
||||
width: calc(50% - #{$margin});
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
&:last-child{
|
||||
background-color: $text-price;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
background: white;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
}
|
||||
// content
|
||||
.content{
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
// tabs
|
||||
.tabs{
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
//#ifdef H5
|
||||
top: 100rpx;
|
||||
//#endif
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: white;
|
||||
justify-content: space-around;
|
||||
line-height: 80rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
.item.show{
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 统计信息
|
||||
.statistics{
|
||||
margin-top: $margin;
|
||||
background-color: white;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
padding: $padding;
|
||||
.statistics-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.statistics-date{
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
line-height: 60rpx;
|
||||
.arrowdown{
|
||||
margin-left: $margin/2;
|
||||
}
|
||||
}
|
||||
.statistics-lay{
|
||||
font-size: $title-size-sm;;
|
||||
color: gray;
|
||||
line-height: 50rpx;
|
||||
&.show{
|
||||
color: $text-price;
|
||||
}
|
||||
.arrowdown{
|
||||
margin-left: $margin/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistics-text{
|
||||
font-size: $title-size-sm;
|
||||
color: gray;
|
||||
line-height: 50rpx;
|
||||
text{
|
||||
margin-left: $margin;
|
||||
&:first-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 客户列表
|
||||
.lists{
|
||||
padding: $padding/2 0;
|
||||
background: white;
|
||||
.item{
|
||||
padding: ($padding - 10) $padding ($padding - 10) ($padding*2 + 68);
|
||||
position: relative;
|
||||
min-height: 68rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $padding*2 + 68;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: ' ';
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
}
|
||||
&:first-child::after{
|
||||
display: none;
|
||||
}
|
||||
.cover{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: $padding - 10;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
padding-right: 200rpx;
|
||||
position: relative;
|
||||
line-height: 58rpx;
|
||||
font-size: $title-size-lg;
|
||||
.type{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 180rpx;
|
||||
text-align: right;
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
.sub-title{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
}
|
||||
.sub-tabs{
|
||||
padding-top: $padding/2;
|
||||
font-size: $title-size-sm;
|
||||
text{
|
||||
margin-right: $margin - 10;
|
||||
background: $border-color-lg;
|
||||
color: $text-gray;
|
||||
padding: 0 ($padding/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
162
pages/store/deliver.vue
Normal file
162
pages/store/deliver.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 订单分类 -->
|
||||
<scroll-view class="nav" scroll-x="true" scroll-with-animation="true">
|
||||
<view :class="['nav-item', selectNavId === item.state ? 'nav-item-selected':'']" v-for="(item,index) in navList" :key="index" @click="selectNav(item.state)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<store-order :list="returnInfo" listType="deliver" />
|
||||
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16" v-if="returnInfo.length > 0"></uni-load-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeDeliver } from '@/apis/interfaces/store'
|
||||
import storeOrder from '@/components/store-order/store-order'
|
||||
export default {
|
||||
comments:{
|
||||
storeOrder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
returnInfo : [] ,// 列表
|
||||
navList : [{
|
||||
name : '待发货',
|
||||
state : '1'
|
||||
},{
|
||||
name : '已发货',
|
||||
state : '2'
|
||||
},{
|
||||
name : '待提货',
|
||||
state : '3'
|
||||
},{
|
||||
name : '已提货',
|
||||
state : '4'
|
||||
}
|
||||
],
|
||||
selectNavId : '1',
|
||||
|
||||
// 分页
|
||||
pageStatus : '',
|
||||
page : 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
onShow() {
|
||||
// 获取退货单列表
|
||||
this.returnData();
|
||||
},
|
||||
methods: {
|
||||
// 退货单列表
|
||||
returnData(){
|
||||
storeDeliver({
|
||||
state: this.selectNavId,
|
||||
page : this.goodsPage
|
||||
}).then(res=>{
|
||||
if(res.page.current === 1){
|
||||
this.returnInfo = []
|
||||
}
|
||||
this.returnInfo = this.returnInfo.concat(res.data)
|
||||
this.goodsPage = res.page.current
|
||||
this.pageStatus = res.page.has_more ? 'more': 'noMore'
|
||||
})
|
||||
},
|
||||
|
||||
// 选择订单
|
||||
selectNav(id) {
|
||||
if (this.selectNavId !== id) {
|
||||
this.selectNavId = id
|
||||
this.returnData()
|
||||
}
|
||||
},
|
||||
|
||||
// 我要发货
|
||||
goSend(orderNo) {
|
||||
console.log(orderNo)
|
||||
return
|
||||
uni.showModal({
|
||||
title: '是否签收此订单？',
|
||||
success: res => {
|
||||
if(res.confirm) {
|
||||
storeSign(orderNo).then(() => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '签收成功'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.returnData()
|
||||
},3000)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 下拉加载
|
||||
onReachBottom() {
|
||||
if(this.pageStatus == 'more'){
|
||||
this.pageStatus = 'loading'
|
||||
if(this.selectNavId === '1') {
|
||||
this.goodsPage += 1
|
||||
// 获取退货单列表
|
||||
this.returnData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 订单nav
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
font-size: $title-size*0.95;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
position: sticky;
|
||||
top: 0rpx;
|
||||
z-index: 1;
|
||||
.nav-item {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-bottom: solid 4rpx #fff;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
.nav-item-selected {
|
||||
color: $mian-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 暂无订单
|
||||
.pack-center {
|
||||
text-align: center;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
padding-top: 50%;
|
||||
image {
|
||||
width: $uni-img-size-lg * 2;
|
||||
height:$uni-img-size-lg * 2;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
pages/store/deliverForm.vue
Normal file
166
pages/store/deliverForm.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view>
|
||||
<form @submit="sendSubmit">
|
||||
<view class="nickname">
|
||||
<view class="examineTitle">
|
||||
选择发货方式
|
||||
</view>
|
||||
<view class="toExamine" v-if="send.sendWay[send.sendIndex]">
|
||||
<picker mode="selector" :value="send.sendIndex" range-key="name" :range="send.sendWay" @change="wayChange">
|
||||
<view>{{send.sendWay[send.sendIndex].name}}</view>
|
||||
</picker>
|
||||
<image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname" v-if="send.sendIndex == 0">
|
||||
<view class="examineTitle">
|
||||
选择物流公司
|
||||
</view>
|
||||
<view class="toExamine" v-if="state.array[state.index]">
|
||||
<picker mode="selector" :value="state.index" range-key="name" :range="state.array" @change="sexChange">
|
||||
<view>{{state.array[state.index].name}}</view>
|
||||
</picker>
|
||||
<image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname" v-if="send.sendIndex == 0">
|
||||
<view class="examineTitle">
|
||||
填写物流单号
|
||||
</view>
|
||||
<input class="remarks" @blur="bindExpressNo" auto-height placeholder="" />
|
||||
</view>
|
||||
|
||||
<!-- 选择其他方式显示 -->
|
||||
<view class="nickname" v-if="send.sendIndex == 1">
|
||||
<view class="examineTitle">
|
||||
送货人姓名
|
||||
</view>
|
||||
<input class="remarks" name="courier_name" auto-height placeholder="" />
|
||||
</view>
|
||||
<view class="nickname" v-if="send.sendIndex == 1">
|
||||
<view class="examineTitle">
|
||||
送货人联系方式
|
||||
</view>
|
||||
<input class="remarks" name="courier_mobile" auto-height placeholder="" />
|
||||
</view>
|
||||
<button class="submit" form-type="submit" type="default">提交</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deliverFront, deliverForm } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
send : {
|
||||
sendWay : [{
|
||||
id : 'post',
|
||||
name : '邮寄'
|
||||
},{
|
||||
id : 'other',
|
||||
name : '其他'
|
||||
}],
|
||||
sendIndex : 0,
|
||||
},
|
||||
state : {
|
||||
// 快递筛选
|
||||
array : [],
|
||||
// 快递筛选默认下标
|
||||
index : 0,
|
||||
},
|
||||
expressNo : '',
|
||||
courierName : '',
|
||||
courierMobile : ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
deliverFront(this.$Route.query.id).then(res=>{
|
||||
this.state.array = res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 选择发货方式
|
||||
wayChange(e) {
|
||||
this.send.sendIndex = e.detail.value
|
||||
this.expressNo = ''
|
||||
this.courierName = ''
|
||||
this.courierMobile = ''
|
||||
},
|
||||
|
||||
// 筛选
|
||||
sexChange(e) {
|
||||
this.state.index = e.detail.value
|
||||
},
|
||||
|
||||
// 物流单号
|
||||
bindExpressNo(val) {
|
||||
this.expressNo = val.detail.value
|
||||
},
|
||||
|
||||
// 送货人姓名
|
||||
bindCourierName(val) {
|
||||
this.courierName = val.detail.value
|
||||
},
|
||||
|
||||
// 送货人联系方式
|
||||
bindCourierMobile(val) {
|
||||
this.courierMobile = val.detail.value
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
sendSubmit() {
|
||||
deliverForm(this.$Route.query.id,{
|
||||
type : this.send.sendWay[this.send.sendIndex].id || '',
|
||||
express_id : this.state.array[this.state.index].id || '',
|
||||
express_no : this.expressNo || '',
|
||||
courier_name : this.courierName || '',
|
||||
courier_mobile : this.courierMobile || ''
|
||||
}).then(res=>{
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '发送成功'
|
||||
})
|
||||
this.$Router.back()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nickname {
|
||||
background-color: #FFFFFF;
|
||||
padding: $padding;
|
||||
margin-bottom: $margin;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: $title-size-lg;
|
||||
.examineTitle {
|
||||
width: 210rpx;
|
||||
}
|
||||
.remarks {
|
||||
width: calc(100% - 210rpx);
|
||||
font-size: $title-size-lg;
|
||||
color: $text-color;
|
||||
}
|
||||
.toExamine {
|
||||
position: absolute;
|
||||
top: $padding;
|
||||
right: $padding;
|
||||
display: flex;
|
||||
.toExamine-row {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 6rpx;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
background: #e93340;
|
||||
color: white;
|
||||
border-color: #e93340;
|
||||
margin: $margin*4 $margin 0;
|
||||
}
|
||||
</style>
|
||||
114
pages/store/examine.vue
Normal file
114
pages/store/examine.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view>
|
||||
<form @submit="sendSubmit">
|
||||
<view class="nickname">
|
||||
<view class="examineTitle">
|
||||
退换单操作
|
||||
</view>
|
||||
<view class="toExamine">
|
||||
<picker mode="selector" :value="state.index" range-key="name" :range="state.array" @change="sexChange">
|
||||
<view>{{state.array[state.index].name}}</view>
|
||||
</picker>
|
||||
<image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname">
|
||||
<view class="examineTitle">
|
||||
退换单备注：
|
||||
</view>
|
||||
<textarea class="remarks" @blur="bindTextAreaBlur" auto-height placeholder="请填写备注" />
|
||||
</view>
|
||||
|
||||
<button class="submit" form-type="submit" type="default">提交</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeAudit } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
state : {
|
||||
// 退货单-筛选
|
||||
array : [{
|
||||
id : 'agree',
|
||||
name: '审核通过'
|
||||
},{
|
||||
id : 'refuse',
|
||||
name: '审核驳回'
|
||||
}],
|
||||
|
||||
// 退货单筛选默认下标
|
||||
index : 0,
|
||||
},
|
||||
remarks : ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur(val) {
|
||||
this.remarks = val.detail.value
|
||||
},
|
||||
|
||||
// 筛选
|
||||
sexChange(e) {
|
||||
this.state.index = e.detail.value
|
||||
},
|
||||
|
||||
sendSubmit(){
|
||||
let newState = this.state.array[this.state.index].id,
|
||||
newRemark = this.remarks
|
||||
storeAudit(this.$Route.query.id, {
|
||||
state : newState,
|
||||
remark: newRemark
|
||||
}).then(res=>{
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '审核成功'
|
||||
})
|
||||
this.$Router.back()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nickname {
|
||||
background-color: #FFFFFF;
|
||||
padding: $padding;
|
||||
margin-bottom: $margin;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: $title-size-lg;
|
||||
.examineTitle {
|
||||
width: 210rpx;
|
||||
}
|
||||
.remarks {
|
||||
width: calc(100% - 210rpx);
|
||||
font-size: $title-size-lg;
|
||||
color: $text-color;
|
||||
}
|
||||
.toExamine {
|
||||
position: absolute;
|
||||
top: $padding;
|
||||
right: $padding;
|
||||
display: flex;
|
||||
.toExamine-row {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 6rpx;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
background: #e93340;
|
||||
color: white;
|
||||
border-color: #e93340;
|
||||
margin: $margin*4 $margin 0;
|
||||
}
|
||||
</style>
|
||||
306
pages/store/index.vue
Normal file
306
pages/store/index.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<view class="content" v-if="!loding">
|
||||
<block v-if="this.$store.state.token != ''">
|
||||
<block v-if="!certification">
|
||||
<!-- 企业认证 -->
|
||||
<view class="statusBar">
|
||||
<view class="statusBar-title">企业工具</view>
|
||||
</view>
|
||||
<view class="store-login">
|
||||
<block v-if="appliesState.code === -1">
|
||||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">{{appliesState.message}}</view>
|
||||
<button type="default" @click="onRightBtn">认证并开通</button>
|
||||
</block>
|
||||
<block v-if="appliesState.code === -2">
|
||||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">{{appliesState.message}}</view>
|
||||
<button type="default" @click="onRightBtn1">企业未注册</button>
|
||||
</block>
|
||||
<block v-else-if="appliesState.code === 2">
|
||||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||
<view class="title">认证失败</view>
|
||||
<view class="sub-title">{{appliesState.message}}</view>
|
||||
<button type="default" @click="$Router.push({name: 'Approve', params: {formType: 'put'}})">重新提交认证</button>
|
||||
</block>
|
||||
<block v-else-if="appliesState.code === 0">
|
||||
<image class="icon" src="@/static/icons/audit-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">{{appliesState.message}}</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="statusBar">
|
||||
<view class="statusBar-box">
|
||||
<image class="logo" :src="company.logo" mode="aspectFill"></image>
|
||||
<view class="company">
|
||||
<view class="name">{{company.name}}<image v-if="!employee" @click="$Router.push({name: 'Basics'})" class="name-img" src="../../static/icons/store_icon_pen.png" mode="aspectFill"></image></view>
|
||||
<view class="tool">
|
||||
<view class="faith"><image class="faith-img" src="../../static/icons/store_icon_row.png" mode="aspectFill"></image>诚信{{company.faith}}</view>
|
||||
<view class="btn"><image class="btn-img" src="../../static/icons/store_icon_icon.png" mode="aspectFill"></image>{{company.identity}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 老板 -->
|
||||
<boss v-if="!employee" :word-data="workbench"/>
|
||||
<!-- 员工 -->
|
||||
<staff v-if="employee" :tool-list="toolList"/>
|
||||
</block>
|
||||
</block>
|
||||
<!-- 登录提示 -->
|
||||
<block v-else>
|
||||
<view class="statusBar">
|
||||
<view class="statusBar-title">企业工具</view>
|
||||
</view>
|
||||
<view class="store-login">
|
||||
<image class="icon" src="@/static/icons/login-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">一键开启您的易货之旅</view>
|
||||
<button type="default" @click="login">登录</button>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index } from '@/apis/interfaces/store'
|
||||
import { isallow, appliesQuery } from '@/apis/interfaces/company'
|
||||
import { employeesTool } from '@/apis/interfaces/employees'
|
||||
import boss from '@/components/store-boss/store-boss'
|
||||
import staff from '@/components/store-staff/store-staff'
|
||||
import userAuth from '@/public/userAuth'
|
||||
export default {
|
||||
components:{
|
||||
boss,
|
||||
staff
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loding : true,
|
||||
appliesState : {},
|
||||
certification: false,
|
||||
employee : false,
|
||||
workbench : {},
|
||||
company : {},
|
||||
toolList : ''
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
this.getIndex()
|
||||
},
|
||||
methods: {
|
||||
// 首页数据
|
||||
getIndex(){
|
||||
if(this.$store.state.token == ''){
|
||||
this.loding = false
|
||||
return
|
||||
}
|
||||
index().then(res => {
|
||||
this.certification = res.is_certification
|
||||
if(!res.is_certification){
|
||||
this.getAppliesQuery()
|
||||
return
|
||||
}
|
||||
this.company = {
|
||||
logo : res.cover,
|
||||
name : res.name,
|
||||
identity: res.company_identity,
|
||||
faith : res.integrity
|
||||
}
|
||||
this.workbench = {
|
||||
identity: res.identity_time,
|
||||
grade : res.identity_sign,
|
||||
top : res.top,
|
||||
middle : res.middle,
|
||||
order : res.order
|
||||
}
|
||||
this.employee = res.is_employee
|
||||
this.loding = false
|
||||
|
||||
// 若为员工身份-则调取员工管理信息
|
||||
if(res.is_employee) {
|
||||
employeesTool().then(res=>{
|
||||
this.toolList = res.permission
|
||||
})
|
||||
}
|
||||
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查询企业认证状态
|
||||
getAppliesQuery(){
|
||||
appliesQuery().then(res=>{
|
||||
this.appliesState = res
|
||||
this.loding = false
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 登录
|
||||
login(){
|
||||
let auth = new userAuth()
|
||||
auth.Login().then(res => {
|
||||
if(res.auth) this.getIndex()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 开通vip
|
||||
onRightBtn(){
|
||||
isallow().then(res =>{
|
||||
this.$Router.push({name: 'Approve'})
|
||||
}).catch(err =>{
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '暂未开通商家vip无法开通店铺工具',
|
||||
confirmText : '立即开通',
|
||||
success : res=> {
|
||||
if(res.confirm){
|
||||
this.$Router.push({name: 'Vip'})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 跳转到创建企业选择企业类型的页面
|
||||
onRightBtn1(){
|
||||
this.$Router.push({name: 'Registered'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 登录提示
|
||||
.store-login{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9;
|
||||
background: white;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
button{
|
||||
margin-top: $margin*3;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: $radius/2;
|
||||
background: $text-price;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
}
|
||||
// Bar
|
||||
.statusBar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
background: $text-price;
|
||||
@extend .ios-top;
|
||||
.statusBar-box{
|
||||
min-height: 90rpx;
|
||||
position: relative;
|
||||
padding: $padding $padding $padding ($padding + 88);
|
||||
color: white;
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
width: 94rpx;
|
||||
height: 94rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #ed8483;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4rpx 15rpx rgba(109,1,0,.8);
|
||||
background-color: #fff;
|
||||
}
|
||||
.company{
|
||||
width: calc(100% - 94rpx);
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.name{
|
||||
line-height: 40rpx;
|
||||
@extend .nowrap;
|
||||
font-size: $title-size;
|
||||
.name-img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin: 7rpx 0 0 15rpx;
|
||||
}
|
||||
}
|
||||
.tool {
|
||||
display: flex;
|
||||
margin-top: 13rpx;
|
||||
.faith{
|
||||
line-height: 40rpx;
|
||||
height: 38rpx;
|
||||
@extend .nowrap;
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
padding: 0 15rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
display: flex;
|
||||
.faith-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 5rpx 4rpx 0 0;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
line-height: 40rpx;
|
||||
height: 38rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 15rpx 0 30rpx;
|
||||
background-color: #913335;
|
||||
display: inline-block;
|
||||
border-radius: 0 60rpx 60rpx 0;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
.btn-img {
|
||||
position: absolute;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
left: -20rpx;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.statusBar-title{
|
||||
line-height: 88rpx;
|
||||
min-height: 88rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding-top: calc(var(--status-bar-height) + #{$padding * 2} + 65rpx);
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
</style>
|
||||
83
pages/store/journal.vue
Normal file
83
pages/store/journal.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="logsBack">
|
||||
<view class="logsList" v-for="(item ,index) in logArr" :key="index">
|
||||
<view class="logsLabel">
|
||||
<view class="logsLabel-name">操作来源：</view>
|
||||
<view class="logsTips" :class="[item.isMy ? 'active' : '']">{{ item.isMy ? '个人' : '商家' }}</view>
|
||||
</view>
|
||||
<view class="logsLabel" v-if="item.title">
|
||||
<view class="logsLabel-name">申请原因：</view>
|
||||
<view class="logsLabel-text">{{ item.title }}</view>
|
||||
</view>
|
||||
<view class="logsLabel" v-if="item.state_text">
|
||||
<view class="logsLabel-name">申请状态：</view>
|
||||
<view class="logsLabel-text">{{ item.state_text }}</view>
|
||||
</view>
|
||||
<view class="logsLabel" v-if="item.remark">
|
||||
<view class="logsLabel-name">补充描述：</view>
|
||||
<view class="logsLabel-text">{{ item.remark }}</view>
|
||||
</view>
|
||||
<view class="logsLabel">
|
||||
<view class="logsLabel-name">退款时间：</view>
|
||||
<view class="logsLabel-text">{{ item.created_at }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderJournal } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logArr : '', //订单数组列表
|
||||
}
|
||||
},
|
||||
created() {
|
||||
orderJournal(this.$Route.query.id).then(res=>{
|
||||
this.logArr = res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logsBack {
|
||||
background: #f7f7f7;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-sm;
|
||||
.logsList {
|
||||
background: #fff;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: $margin;
|
||||
position: relative;
|
||||
}
|
||||
.logsTips {
|
||||
color: #e1293f;
|
||||
&.active {
|
||||
color: #e1293f;
|
||||
}
|
||||
}
|
||||
.logsLabel {
|
||||
padding: $padding 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.logsLabel-name {
|
||||
margin-right: $margin;
|
||||
width: 140rpx;
|
||||
}
|
||||
.logsLabel-text {
|
||||
color: $text-gray;
|
||||
width: calc(100% - 140rpx - #{$margin});
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
pages/store/logistic.vue
Normal file
161
pages/store/logistic.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 物流状态 start -->
|
||||
<view class="state" v-if="logistic.length > 0">
|
||||
<view class="take">
|
||||
<view class="take-tips">
|
||||
收
|
||||
</view>
|
||||
<view class="take-text">
|
||||
收货地址：发接口返回绝对是放假客户端上看见发货数据库大黄蜂教科书的浩丰科技
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<!-- v-for="(item, index) in logistic" :key="index" -->
|
||||
<view class="list-label">
|
||||
<view class="list-name">
|
||||
<text>发货中</text> 2020-15-12
|
||||
</view>
|
||||
<view class="list-time">
|
||||
华东师范邯郸市科技发货圣诞节客服
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pack-center" v-else>
|
||||
<image src="../../static/icons/store_logistic.png" mode="aspectFill"></image>
|
||||
<view>{{message}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deliverLogistic } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
message : '',
|
||||
logistic: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
deliverLogistic(this.$Route.query.id).then(res=>{
|
||||
console.log(res)
|
||||
}).catch(err => {
|
||||
this.message = err.message
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
// 物流状态
|
||||
.state {
|
||||
background-color: $uni-bg-color;
|
||||
margin-top: $margin;
|
||||
padding: $padding;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
.take {
|
||||
display: flex;
|
||||
padding-bottom: $padding;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: $uni-img-size-sm / 3 + 2;
|
||||
top: $margin;
|
||||
background-color: $uni-text-color-grey;
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
}
|
||||
.take-tips {
|
||||
background-color: #e53d4c;
|
||||
width: $uni-img-size-sm;
|
||||
height: $uni-img-size-sm;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
font-size: $title-size-sm;
|
||||
transform: scale(.9);
|
||||
text-align: center;
|
||||
color: $uni-text-color-inverse;
|
||||
margin-top: 10rpx;
|
||||
margin-left: -4rpx;
|
||||
}
|
||||
.take-text {
|
||||
margin-left: $margin;
|
||||
line-height: 40rpx;
|
||||
margin-top: $margin - 10;
|
||||
width: calc(100% - #{$uni-img-size-sm} + #{$margin});
|
||||
}
|
||||
}
|
||||
.list {
|
||||
font-size: $title-size-sm;
|
||||
.list-label {
|
||||
padding-left: $padding * 3;
|
||||
padding-bottom: $padding;
|
||||
padding-top: $padding - 10;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: $uni-img-size-sm / 3 - 4;
|
||||
top: $margin;
|
||||
background-color: $uni-text-color-grey;
|
||||
width: $uni-img-size-sm / 3;
|
||||
height: $uni-img-size-sm / 3;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
z-index: 9;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: $uni-img-size-sm / 3 + 2;
|
||||
top: $margin;
|
||||
background-color: $uni-text-color-grey;
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
}
|
||||
&:first-child {
|
||||
color: #e53d4c;
|
||||
}
|
||||
&:last-child::before {
|
||||
background-color: $uni-bg-color;
|
||||
}
|
||||
&:first-child::after {
|
||||
background-color: #e53d4c;
|
||||
}
|
||||
.list-name {
|
||||
margin-bottom: $margin - 10;
|
||||
text {
|
||||
font-weight: 600;
|
||||
padding-right: $padding;
|
||||
}
|
||||
}
|
||||
.list-time {
|
||||
font-size: $uni-font-size-sm;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暂无订单
|
||||
.pack-center {
|
||||
text-align: center;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
padding-top: 50%;
|
||||
image {
|
||||
width: $uni-img-size-lg * 2;
|
||||
height:$uni-img-size-lg * 2;
|
||||
margin: 0 auto $margin;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
pages/store/orderDetails.vue
Normal file
38
pages/store/orderDetails.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 订单详情 -->
|
||||
<store-order-details :info="info" :listType="newType" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deliverDetails, orderDetails } from '@/apis/interfaces/store'
|
||||
import storeOrderDet from '@/components/store-order-details/store-order-details'
|
||||
export default {
|
||||
comments:{
|
||||
storeOrderDet
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info : '',
|
||||
newType : ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.newType = this.$Route.query.type
|
||||
if(this.$Route.query.type == 'deliver') {
|
||||
deliverDetails(this.$Route.query.id).then(res=>{
|
||||
this.info = res
|
||||
})
|
||||
return
|
||||
}
|
||||
orderDetails(this.$Route.query.id).then(res=>{
|
||||
this.info = res
|
||||
})
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
196
pages/store/return.vue
Normal file
196
pages/store/return.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 订单分类 -->
|
||||
<scroll-view class="nav" scroll-x="true" scroll-with-animation="true">
|
||||
<view :class="['nav-item', selectNavId === item.id ? 'nav-item-selected':'']"
|
||||
v-for="(item,index) in navList" :key="index" @click="selectNav(item.id)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<store-order :list="returnInfo" @goSign="goSign" @goReToken="goReToken" />
|
||||
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16" v-if="returnInfo.length > 0"></uni-load-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
storeReturn,
|
||||
storeSign,
|
||||
storeToken
|
||||
} from '@/apis/interfaces/store'
|
||||
import storeOrder from '@/components/store-order/store-order'
|
||||
export default {
|
||||
comments: {
|
||||
storeOrder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
returnInfo: [], // 列表
|
||||
navList: [{
|
||||
name: '待审核',
|
||||
id: 'apply'
|
||||
}, {
|
||||
name: '已驳回',
|
||||
id: 'refuse'
|
||||
}, {
|
||||
name: '待返货',
|
||||
id: 'deliver'
|
||||
}, {
|
||||
name: '待签收',
|
||||
id: 'delivered'
|
||||
},
|
||||
// {
|
||||
// name: '已签收',
|
||||
// id: 'signed'
|
||||
// },
|
||||
{
|
||||
name: '待确认退货',
|
||||
id: 'process'
|
||||
},
|
||||
{
|
||||
name: '完成退货',
|
||||
id: 'completed'
|
||||
}
|
||||
],
|
||||
selectNavId: 'apply',
|
||||
|
||||
// 分页
|
||||
pageStatus: '',
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
onShow() {
|
||||
// 获取退货单列表
|
||||
this.returnData();
|
||||
},
|
||||
methods: {
|
||||
// 退货单列表
|
||||
returnData() {
|
||||
storeReturn({
|
||||
state: this.selectNavId,
|
||||
page: this.goodsPage
|
||||
}).then(res => {
|
||||
if (res.page.current === 1) {
|
||||
this.returnInfo = []
|
||||
}
|
||||
this.returnInfo = this.returnInfo.concat(res.data)
|
||||
this.goodsPage = res.page.current
|
||||
this.pageStatus = res.page.has_more ? 'more' : 'noMore'
|
||||
})
|
||||
},
|
||||
|
||||
// 选择订单
|
||||
selectNav(id) {
|
||||
if (this.selectNavId !== id) {
|
||||
this.selectNavId = id
|
||||
this.returnData()
|
||||
}
|
||||
},
|
||||
|
||||
// 签收订单
|
||||
goSign(info) {
|
||||
console.log('goSign',info)
|
||||
let id = info.id
|
||||
let index = info.index
|
||||
uni.showModal({
|
||||
title: '是否签收此订单？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
storeSign(id).then(() => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '签收成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.returnInfo.splice(index,1)
|
||||
// this.returnData()
|
||||
}, 500)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 确认退货
|
||||
goReToken(info) {
|
||||
let id = info.id
|
||||
let index = info.index
|
||||
uni.showModal({
|
||||
title: '是否确认退货此订单？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
storeToken(id).then(() => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '退货成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
// this.returnData()
|
||||
this.returnInfo.splice(index,1)
|
||||
}, 500)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 下拉加载
|
||||
onReachBottom() {
|
||||
if (this.pageStatus == 'more') {
|
||||
this.pageStatus = 'loading'
|
||||
if (this.tabIndex === 'apply') {
|
||||
this.goodsPage += 1
|
||||
// 获取退货单列表
|
||||
this.returnData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 订单nav
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
font-size: $title-size*0.95;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
position: sticky;
|
||||
top: 0rpx;
|
||||
z-index: 1;
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
border-bottom: solid 4rpx #fff;
|
||||
padding: 30rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.nav-item-selected {
|
||||
border-bottom: solid 4rpx $mian-color;
|
||||
color: $mian-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
pages/store/visitors.vue
Normal file
209
pages/store/visitors.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tabs -->
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日访客</view>
|
||||
<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月访客</view>
|
||||
<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年访客</view>
|
||||
</view>
|
||||
<!-- 统计信息 -->
|
||||
<view class="statistics">
|
||||
<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
|
||||
<view class="statistics-date">
|
||||
{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="statistics-text">
|
||||
<text>访客量 {{visitor.factor}} 人</text>
|
||||
<text>累计访客量 {{visitor.all}} 人</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数据列表 -->
|
||||
<block v-if="orders.length > 0">
|
||||
<view class="lists">
|
||||
<view class="item" v-for="(item, index) in orders" :key="index">
|
||||
<image class="cover" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="title">{{item.nickname || '-'}}</view>
|
||||
<view class="sub-title">访问记录: {{item.content || '-'}}</view>
|
||||
<view class="sub-title">手机号码: {{item.mobile || '-'}}</view>
|
||||
<view class="sub-title">访问时间: {{item.date || '-'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="list-null">
|
||||
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">暂无相关访客记录</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { visitors } from '@/apis/interfaces/store'
|
||||
import getDate from '@/public/date'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsIndex: 'day',
|
||||
dateValue: '',
|
||||
endDate : '',
|
||||
visitor : {
|
||||
factor: 0,
|
||||
all: 0
|
||||
},
|
||||
orders : []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getDate().then(res => {
|
||||
this.dateValue = res
|
||||
this.endDate = res
|
||||
this.getLists()
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// tabs筛选
|
||||
onTbas(type){
|
||||
getDate(type).then(res => {
|
||||
this.tabsIndex = type
|
||||
this.dateValue = res
|
||||
this.getLists()
|
||||
})
|
||||
},
|
||||
// 日期筛选
|
||||
pickerDate(e){
|
||||
let dateValue = e.detail.value
|
||||
this.dateValue = dateValue
|
||||
this.getLists()
|
||||
},
|
||||
// 获取列表
|
||||
getLists(){
|
||||
visitors({
|
||||
type: this.tabsIndex,
|
||||
date: this.dateValue
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.visitor = res.total
|
||||
this.orders = res.lists.data
|
||||
this.pages = res.lists.page
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
background: white;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
}
|
||||
// content
|
||||
.content{
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
// tabs
|
||||
.tabs{
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
//#ifdef H5
|
||||
top: 100rpx;
|
||||
//#endif
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: white;
|
||||
justify-content: space-around;
|
||||
line-height: 80rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
.item.show{
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 统计信息
|
||||
.statistics{
|
||||
margin-top: $margin;
|
||||
background-color: white;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
padding: $padding;
|
||||
.statistics-date{
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
line-height: 60rpx;
|
||||
.arrowdown{
|
||||
margin-left: $margin/2;
|
||||
}
|
||||
}
|
||||
.statistics-text{
|
||||
font-size: $title-size-sm;
|
||||
color: gray;
|
||||
line-height: 50rpx;
|
||||
text{
|
||||
margin-left: $margin;
|
||||
&:first-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 客户列表
|
||||
.lists{
|
||||
padding: $padding/2 0;
|
||||
background: white;
|
||||
.item{
|
||||
padding: ($padding/2) $padding ($padding/2) ($padding*2 + 68);
|
||||
position: relative;
|
||||
min-height: 68rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $padding*2 + 68;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: ' ';
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
}
|
||||
&:first-child::after{
|
||||
display: none;
|
||||
}
|
||||
.cover{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: $padding/2;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
}
|
||||
.title{
|
||||
position: relative;
|
||||
line-height: 58rpx;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.sub-title{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -203,6 +203,14 @@
|
||||
<image class="tool-label-img" src="/static/user/userTool-06.png" mode=""></image>
|
||||
<view class="tool-label-name">扫码核销</view>
|
||||
</view>
|
||||
<view class="tool-label" v-if="permission.orderShipment" @click="$Router.push({name: 'Deliver'})" >
|
||||
<image class="tool-label-img" src="/static/user/userTool-06.png" mode=""></image>
|
||||
<view class="tool-label-name">发货单管理</view>
|
||||
</view>
|
||||
<view class="tool-label" v-if="permission.orderRefund" @click="$Router.push({name: 'Return'})">
|
||||
<image class="tool-label-img" src="/static/user/userTool-06.png" mode=""></image>
|
||||
<view class="tool-label-name">退换货管理</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="userPartner" style="display: flex;flex-direction: column;" v-else>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="LogisticsIndex" v-if="loaded">
|
||||
<view class="LogisticsIndex">
|
||||
<block v-if="list.length>0">
|
||||
<view class="logistics-top">
|
||||
<view>{{express.express_name}} <span class="copy" @click='copy(express.express_no)'>复制单号</span></view>
|
||||
@@ -34,7 +34,6 @@
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loaded:false,
|
||||
no: '', // 快递单号
|
||||
express:{},// 地址信息
|
||||
}
|
||||
@@ -50,12 +49,11 @@
|
||||
mallShipmentsLogistic(no).then(res => {
|
||||
this.list = res.logistics
|
||||
this.express = res.express
|
||||
this.loaded = true
|
||||
}).catch(err => {
|
||||
this.$refs.uToast.show({
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
icon:'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
@@ -245,6 +245,11 @@
|
||||
longitude: Number(info.longitude),
|
||||
success: function() {}
|
||||
});
|
||||
},
|
||||
nowLogistics(no){
|
||||
uni.navigateTo({
|
||||
url:'/pages/user/order/logistics?no='+no
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user