shop-applet/pages/users/online_warehousing/index.vue

471 lines
9.7 KiB
Vue

<template>
<view class="center">
<view class="top">
<view class="top-header">
<view class="search">
<view class="search-content acea-row row-middle">
<text class="iconfont icon-sousuo"></text>
<input v-model="where.store_name" confirm-type="search" placeholder="请输收货人手机号或订单号搜索"
class="input" @confirm="handleSearch" />
</view>
</view>
</view>
</view>
<view class="bgc_img" v-if="this.shopList == ![]">
<image src="@/static/images/empty-box.png" mode="widthFix"></image>
<view class="txt">
暂无商品订单~
</view>
</view>
<view class='list' v-else>
<block>
<view class='item' v-for="(item,index) in shopList" :key="index">
<view>
<view class='title acea-row row-between-wrapper'>
<view class="acea-row row-middle left-wrapper">
{{item.merchant.mer_name}}
</view>
</view>
<view>
<view>
<block>
<view class="_order">
订单号: {{item.order_sn}}
</view>
<view class='item-info acea-row row-between row-top'
v-for="(items,indexs) in item.orderProduct" :key="indexs">
<view class='pictrue'>
<image :src="items.cart_info.product.image">
</image>
</view>
<view class='text'>
<view class='_left'>
{{items.cart_info.product.store_name}}
<view class="">
{{items.cart_info.productAttr.sku}}
</view>
</view>
<view class="_right">
<view class='name'>¥{{items.cart_info.productAttr.price}}</view>
<view class='name'>x {{items.product_num}}</view>
</view>
<!-- <view class="totalfooter">
<view class='bnt b-color' v-if="items.is_imported == 0 && item.orderProduct.length > 1"
@click="importshop(items.order_id,items.product_id,items.product_sku)">
立即导入</view>
</view> -->
</view>
<view class="totalfooter" v-if="items.is_imported == 1 ">
<view class='bnt b-color'>
已导入</view>
</view>
<view class="totalfooter" v-else>
<view class='bnt b-color'
@click="importshop(item.order_id,item.orderProduct[indexs].product_id,item.orderProduct[indexs].product_sku)">
立即导入</view>
</view>
<!-- <view class="totalfooter">
<view class='bnt b-color'
@click="importshop(item.order_id,item.orderProduct[indexs].product_id,item.orderProduct[indexs].product_sku)">
立即导入</view>
</view> -->
</view>
</block>
</view>
</view>
<view class='totalPrice'>
共{{item.orderProduct.length}}件商品,总金额
<text class='money'>¥{{item.pay_price}}</text>
</view>
<!-- <view class="totalfooter">
<view class='bnt b-color' v-if="item.orderProduct[index]"
@click="importshop(item.order_id,item.orderProduct[index].product_id,item.orderProduct[index].cart_info.productAttr.product_sku)">
立即导入</view>
</view> -->
</view>
</view>
</block>
</view>
<u-popup :show="show" @close="close" mode="center" bgColor='transparent'>
<image src="@/static/images/xianshang.png" mode="widthFix"></image>
<view class="popen">
<h4>{{title}}</h4>
<view class="shuru">
点击确定,返回商品管理
</view>
<view class="btn">
<button class="btn_l" @click="closeasd()">取消</button>
<button class="btn_r" @click="getback()">确定</button>
</view>
</view>
</u-popup>
<!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
</view>
</template>
<script>
import {
getPreviewProDetail,
} from '@/api/store.js'
import {
postImport
} from '@/api/product.js'
import {
getOrderList
} from '@/api/order.js'
import Loading from '@/components/Loading/index'
export default {
data() {
return {
shopList: [],
shopinfo: {},
mer_id: '',
keyword: '',
where: {
page: 1,
limit: 10,
status: 20,
product_type: 98,
store_name: '',
},
data: {
product_id: '',
unique: "",
order_id: '',
order_product_id: '',
order_unique: ''
},
show: false,
title: '',
loaded: false,
}
},
onLoad(option) {
// console.log(option);
this.mer_id = option.mer_id
this.getList();
this.data.product_id = option.product_id
this.data.unique = option.unique
},
methods: {
handleSearch() {
let that = this
that.loaded = false;
that.where.page = 1;
that.shopList = [];
getOrderList(that.where, that.mer_id).then(res => {
// console.log(res);
that.shopList = res.data.list
console.log(that.shopList);
})
},
getList: function() {
if (this.loading || this.loaded) return;
this.loading = true;
getOrderList(this.where, this.mer_id).then(res => {
// console.log(res);
this.shopList = res.data.list
// console.log(this.shopList);
})
},
importshop(order_id, product_id, unique) {
this.data.order_id = order_id
this.data.order_product_id = product_id
this.data.order_unique = unique
console.log(this.data)
this.show = true
postImport(this.mer_id, this.data).then(res => {
console.log(res);
this.title = res.message
this.$util.Tips({
title: res.message
})
})
},
close() {
this.show = false
},
closeasd: function() {
this.show = false
getOrderList(this.where, this.mer_id).then(res => {
console.log(res);
this.shopList = res.data.list
console.log(this.shopList);
})
},
getback() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style lang="scss" scoped>
.top {
background-color: red;
.top-header {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
background-color: #fff;
.search {
padding: 17rpx 30rpx;
.search-content {
width: 100%;
height: 60rpx;
padding: 0 30rpx;
border-radius: 30rpx;
background-color: #F5F5F5;
font-size: 26rpx;
}
.iconfont {
margin-right: 10rpx;
font-size: 26rpx;
color: #999999;
}
.input-placeholder {
font-size: 26rpx;
color: #999999;
}
.input {
flex: 1;
}
}
}
}
.bgc_img {
position: absolute;
top: 30vh;
left: 10vw;
image {
width: 300px;
}
.txt {
text-align: center;
}
}
.list {
width: 690rpx;
margin: 50px auto 0 auto;
.title {
height: 84rpx;
padding: 0 30rpx;
border-bottom: 1px solid #CCCCCC;
font-size: 32rpx;
font-weight: 700;
color: #282828;
.left-wrapper {
.iconfont {
margin-top: 5rpx;
}
.store-name {
margin: 0 10rpx;
}
.icon-xiangyou {
font-size: 20rpx;
}
}
.sign {
font-size: 24rpx;
padding: 0 7rpx;
height: 36rpx;
margin-right: 15rpx;
}
}
.item {
background-color: #fff;
margin: 5px 0 5px 0;
.item-info {
padding: 0 30rpx;
margin-top: 22rpx;
.pictrue {
width: 120rpx;
height: 120rpx;
margin-bottom: 20rpx;
image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
}
.text {
width: 486rpx;
font-size: 28rpx;
color: #999;
margin-top: 6rpx;
display: flex;
justify-content: space-between;
._left {
width: 300rpx;
color: #282828;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name {
width: 100rpx;
color: #282828;
}
.money {
text-align: right;
float: right;
}
}
}
.event_name {
display: inline-block;
margin-right: 9rpx;
color: #fff;
font-size: 20rpx;
padding: 0 8rpx;
line-height: 30rpx;
text-align: center;
border-radius: 6rpx;
}
.event_ship {
font-size: 20rpx;
margin-top: 10rpx;
}
._order {
font-size: 28rpx;
margin: 5px 0 0 15px;
}
.totalPrice {
font-size: 26rpx;
color: #282828;
text-align: right;
margin: 27rpx 0 0 30rpx;
padding: 0 30rpx 30rpx 0;
.money {
font-size: 34rpx;
font-weight: bold;
color: rgb(233, 51, 35);
}
}
.totalfooter {
width: 100%;
height: 50px;
position: relative;
border-top: 1px solid #CCCCCC;
.bnt {
position: absolute;
right: 10px;
width: 176rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rpx;
font-size: 27rpx;
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
color: white;
margin-left: 70%;
margin-top: 5px;
}
}
.bottom {
height: 107rpx;
padding: 0 30rpx;
border-top: 1px solid #f0f0f0;
}
}
.event_price {
margin: 0 0 50rpx 120rpx;
}
}
.popen {
position: absolute;
top: 110px;
width: 100%;
margin: auto;
padding: 10px;
h4 {
font-weight: 400;
font-size: 20px;
padding: 5px;
text-align: center;
}
.guige {
margin: 10px 0 10px 20px;
}
.shuru {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
padding: 5px;
}
.btn {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 10px;
.btn_l {
padding: 5px;
width: 100px;
border-radius: 4px;
}
.btn_r {
width: 100px;
padding: 5px;
border-radius: 4px;
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
border-radius: 27px 27px 27px 27px;
color: white;
}
}
}
</style>