Skip to content

M
mallapp
Commit a7bbc37c authored by 罗超's avatar 罗超
Browse files
Options

商城管理新增部分页面

parent f842199e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1345 additions and 1 deletion
pages/MallMange/components/orderItem.vue 0 → 100644
View file @ a7bbc37c
<template>
<view class="item">
<view class="flex-between orderNum">
<text>订单号：20211018154423824347</text>
<text style="color: #446dfc">待退款</text>
</view>
<view class="flex-between remarks">
商家备注：20211018154423824347
</view>
<view class="consigneeInfo">
<text style="margin-right: 40rpx">信息</text>
<text style="margin-right: 20rpx">13312341234</text>
<view class="flex-between" style="color: #446dfc">
<u-icon name="phone-circle-o" style="margin-right: 10rpx"></u-icon>
联系收货人
</view>
</view>
<view class="flex-between goodsInfo">
<view class="goodsImg">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/user.png"
mode="aspectFill"
class="img"
/>
</view>
<view class="goodsBox">
<view class="goodsName">测试商品</view>
<view class="weight">重量：</view>
<view class="flex-between">
<text>x1</text>
<text>￥0.01</text>
</view>
</view>
</view>
<view class="priceBox">
<text>合计：</text>
<text style="color: #111">￥0.01</text>
<text>（含运费￥0.01）</text>
</view>
<view class="btnBox">
<button class="btn">备注</button>
<button class="btn">拒绝</button>
<button class="btn">同意</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 700rpx;
// height: 480rpx;
background-color: #fff;
box-sizing: border-box;
padding: 20rpx;
border-radius: 10rpx;
margin: 10rpx auto;
.orderNum {
font-size: 26rpx;
color: #333;
margin-bottom: 20rpx;
}
.remarks{
font-size: 26rpx;
color: #333;
margin-bottom: 20rpx;
}
.consigneeInfo {
width: 100%;
height: 70rpx;
display: flex;
align-items: center;
padding: 0 30rpx;
background-color: #f7f7f7;
font-size: 24rpx;
border-radius: 6rpx;
margin-bottom: 20rpx;
}
.goodsInfo {
margin-bottom: 30rpx;
}
.goodsImg {
width: 160rpx;
height: 160rpx;
border-radius: 6rpx;
overflow: hidden;
box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
margin-right: 20rpx;
.img {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
}
.goodsBox {
height: 160rpx;
flex-grow: 1;
font-size: 24rpx;
color: #333;
.goodsName {
height: 45%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.weight {
height: 35%;
}
}
.priceBox {
text-align: right;
color: #808080;
font-size: 24rpx;
margin-bottom: 30rpx;
}
.btnBox {
display: flex;
justify-content: flex-end;
align-items: center;
.btn {
// width: 90rpx;
// height: 50rpx;
border-radius: 30rpx;
border: 2rpx solid #f7f7f7;
margin: 0 0 0 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 22rpx;
color: #111;
}
}
}
</style>
\ No newline at end of file
pages/MallMange/components/tabbar.vue 0 → 100644
View file @ a7bbc37c
<style scoped>
.tabbarMain {
height: 100upx;
position: fixed;
z-index: 50;
flex: 1;
bottom: 0;
left: 0;
right: 0;
z-index: 99999999;
border-top: 1upx solid #ddd;
padding-top: 96rpx;
background: #fff;
}
.tabbarMainIphone {
height: 156upx;
padding-bottom: 64upx;
}
.tabBtnMina {
width: 750upx;
height: 88upx;
position: absolute;
z-index: 2;
bottom: 0;
flex-direction: row;
/* #ifndef */
padding-bottom: constant(safe-area-inset-top);
padding-bottom: env(safe-area-inset-top);
/* #endif */
display: flex;
left: 0;
right: 0;
z-index: 99999999;
}
.tabBtnMinaIphone {
height: 156upx;
padding-bottom: 64upx;
}
.imgse {
/* width: 48upx; */
height: 48upx;
width: auto;
}
.txtBtn {
font-size: 24upx;
color: #666666;
}
.txtBtnSel {
font-size: 24upx;
color: #333333;
}
.itmMain {
/* width: 250upx; */
width: 150upx;
flex: 1;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
.imgseTs {
width: 150upx;
height: 140upx;
margin-bottom: 90upx;
position: relative;
z-index: 1;
bottom: 0upx;
}
.btnfixMin {
width: 750upx;
height: 178upx;
position: absolute;
z-index: 1;
bottom: 0;
}
.btnfixMinIphone {
bottom: 64upx;
}
.fixTpm {
width: 150upx;
height: 140upx;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
}
.imgseTsAnds {
width: 150upx;
height: 150upx;
position: fixed;
z-index: 1;
bottom: 10upx;
border-radius: 150upx;
}
</style>
<template>
<view>
<view>
<view
class="tabbarMain"
:class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
v-if="navs && navs.length > 0"
>
<view
class="tabBtnMina"
:class="[flagTypeInfo ? 'tabBtnMinaIphone' : '']"
mode=""
>
<view
class="itmMain"
v-for="(x, i) in navs"
:key="i"
@click.stop="goUrl(x.url)"
>
<image
class="imgse"
:fade-show="false"
v-if="active != i"
mode="heightFix"
:src="x.icon"
></image>
<image
class="imgse"
:fade-show="false"
v-if="active === i"
mode="heightFix"
:src="x.active_icon"
></image>
<text
class="txtBtn"
:style="{ color: active == i ? x.active_color : x.color }"
>{{ x.text }}</text
>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
active: 0,
platforms: "",
leftWidth: 0,
flagTypeInfo: false,
crtPath: "",
isShowIcon: 1,
navs:[{
url:"/pages/MallMange/index",
icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/home2.png",
active_icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/home.png",
color:"#CCCED5",
active_color:"#446dfc",
text:"首页",
},{
url:"/pages/MallMange/order",
icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/order_fill2.png",
active_icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/order_fill.png",
color:"#CCCED5",
active_color:"#446dfc",
text:"订单",
},{
url:"/pages/MallMange/goods",
icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/goods2.png",
active_icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/goods.png",
color:"#CCCED5",
active_color:"#446dfc",
text:"商品",
},{
url:"/pages/MallMange/set",
icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/setup-fill2.png",
active_icon:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/setup-fill.png",
color:"#CCCED5",
active_color:"#446dfc",
text:"设置",
}]
};
},
mounted() {
console.log("B join...");
this.flagTypeInfo = this.$uiConfig.is_bang;
let tempSystem = uni.getSystemInfoSync();
this.platforms = tempSystem.platform;
this.$nextTick(() => {
// #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE ||APP-VUE
if (this.platforms == "android") {
let temp = this.$refs.leftWidth;
this.leftWidth = tempSystem.screenWidth / 2;
}
// #endif
});
this.activeHandler();
},
// activated(){
// if(uni.getStorageSync("navs")){
// this.navs = uni.getStorageSync("navs")??[];
// }else{
// setTimeout(()=>{
// this.navs = uni.getStorageSync("navs")??[];
// this.activeHandler();
// },3000)
// }
// this.activeHandler();
// },
methods: {
activeHandler() {
let t = getCurrentPages();
let query = t[t.length - 1].__displayReporter.query;
let queryString = "";
for (var k in query) {
queryString += `&${k}=${query[k]}`;
}
if (queryString != "") {
queryString = "?" + queryString.substring(1, queryString.length);
}
this.crtPath = "/" + t[t.length - 1].route + queryString;
console.log(23,this.crtPath);
this.navs.forEach((x, i) => {
if (x.url == this.crtPath) {
this.active = i;
}
});
},
goUrl(url) {
if (this.crtPath != url) {
uni.redirectTo({
url: url,
});
} else {
uni.reLaunch({
url: url,
});
}
},
},
};
</script>
pages/MallMange/goods.vue 0 → 100644
View file @ a7bbc37c
<template>
<view class="goodsPage">
<view class="searchBox flex-between">
<input type="text" class="input" placeholder="请输入商品名称搜索" />
<view class="addBox">
<u-icon name="add-o" style="margin-right: 10rpx"></u-icon>
添加商品
</view>
</view>
<view class="tabbox">
<u-tabs
:list="list"
:is-scroll="false"
:current="current"
@change="change"
></u-tabs>
</view>
<tabbar></tabbar>
</view>
</template>
<script>
import tabbar from "./components/tabbar.vue";
export default {
components: {
tabbar,
},
data() {
return {
list: [
{
name: "出售中",
},
{
name: "下架中",
count: 5,
},
],
current: 0,
};
},
methods: {
change(index) {
this.current = index;
},
},
onLoad() {
uni.setNavigationBarTitle({
title: "商品管理",
});
},
};
</script>
<style lang="scss" scoped>
.goodsPage {
min-height: 100vh;
background-color: #f7f7f7;
box-sizing: border-box;
padding-bottom: 100rpx;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.searchBox {
width: 100%;
height: 80rpx;
padding: 0 40rpx;
.input {
width: 420rpx;
height: 60rpx;
border-radius: 30rpx;
background-color: #fff;
padding: 0 20rpx;
font-size: 26rpx;
}
.addBox {
width: 180rpx;
height: 58rpx;
border-radius: 29rpx;
background-color: #fff;
border: 2rpx solid #446dfc;
color: #446dfc;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
}
}
.tabbox {
height: 100rpx;
}
</style>
\ No newline at end of file
pages/MallMange/index.vue
View file @ a7bbc37c
This diff is collapsed.
pages/MallMange/order.vue 0 → 100644
View file @ a7bbc37c
<template>
<view class="orderpage">
<view class="typebox flex-center">
<view class="typeItem flex-center">
<view class="typeItem1 flex-center activeType">普通订单</view>
<view class="typeItem1 flex-center">维权订单</view>
</view>
</view>
<view class="searchBox flex-between">
<view class="search flex-center">
<!-- <input type="text"> -->
<u-icon name="search"></u-icon>
<view>搜索</view>
</view>
<view class="flex-center" @click="showModel = true">
{{ timeStr }} <u-icon name="arrow-down"></u-icon
></view>
<u-modal
v-model="showModel"
@confirm="confirm"
:show-cancel-button="true"
title="筛选时间"
contentSlot
width="85%"
>
<view class="contentSlot">
<view class="flex-wrap">
<view
v-for="(item, index) in timeArr"
:key="index"
class="timeItem flex-center"
:class="index === curIndex ? 'timeItemActive' : ''"
@click="changeTime(item, index)"
>
{{ item.name }}
</view>
</view>
<view v-if="curIndex == 4">
<view class="timeTitle">开始时间</view>
<view class="time-picker">
<picker-view
:value="value"
@change="bindChange"
class="picker-view"
:indicator-style="indicatorStyle"
:indicator-class="activeClass"
>
<picker-view-column>
<view
class="picker-item flex-center"
v-for="(item, index) in years"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<view style="line-height: 180rpx">年</view>
<picker-view-column>
<view
class="picker-item flex-center"
v-for="(item, index) in months"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<view style="line-height: 180rpx">月</view>
<picker-view-column>
<view
class="picker-item flex-center"
v-for="(item, index) in days"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<view style="line-height: 180rpx">日</view>
</picker-view>
</view>
<view class="timeTitle">结束时间</view>
<view class="time-picker">
<picker-view
:value="value"
@change="bindChange"
class="picker-view"
indicator-style="height: 60rpx"
indicator-class="activeClass"
>
<picker-view-column>
<view
class="picker-item flex-center"
v-for="(item, index) in years"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<view style="line-height: 180rpx">年</view>
<picker-view-column>
<view
class="picker-item flex-center"
v-for="(item, index) in months"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<view style="line-height: 180rpx">月</view>
<picker-view-column>
<view
class="picker-item flex-center"
v-for="(item, index) in days"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<view style="line-height: 180rpx">日</view>
</picker-view>
</view>
</view>
</view>
</u-modal>
</view>
<view class="tabbox">
<u-tabs
:list="list"
:is-scroll="false"
:current="currentTab"
@change="changeTab"
></u-tabs>
</view>
<view
style="
height: calc(100vh - 50px);
width: calc(100vw);
overflow: hidden;
padding-bottom: 20px;
"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }"
>
<orderItem />
</scroll-view>
</view>
<tabbar></tabbar>
</view>
</template>
<script>
import tabbar from "./components/tabbar.vue";
import orderItem from "./components/orderItem.vue";
export default {
components: {
tabbar,
orderItem,
},
data() {
const date = new Date();
const years = [];
const year = date.getFullYear();
const months = [];
const month = date.getMonth() + 1;
const days = [];
const day = date.getDate();
for (let i = year - 4; i <= date.getFullYear(); i++) {
years.push(i);
}
for (let i = 1; i <= 12; i++) {
months.push(i);
}
for (let i = 1; i <= 31; i++) {
days.push(i);
}
return {
showModel: false,
timeStr: "",
curIndex: 0,
timeArr: [
{
name: "汇总",
key: 1,
},
{
name: "今日",
key: 2,
},
{
name: "昨日",
key: 3,
},
{
name: "7日",
key: 4,
},
{
name: "自定义",
key: 5,
},
],
years,
year,
months,
month,
days,
day,
value: [9999, month - 1, day - 1],
list: [
{
name: "全部",
},
{
name: "待收货",
},
{
name: "待付款",
},
{
name: "待评价",
count: 5,
},
],
currentTab: 0,
msg: {
pageIndex: 1,
pageSize: 15,
OrderId: 0,
OrderType: 0,
DeliveryMethod: 0,
StartTime: "",
EndTime: "",
OrderStatus: 0,
OrderNo: "",
},
};
},
methods: {
confirm() {
console.log(1);
},
changeTime(e, i) {
this.curIndex = i;
this.timeStr = e.name;
},
bindChange(e) {
const val = e.detail.value;
this.year = this.years[val[0]];
this.month = this.months[val[1]];
this.day = this.days[val[2]];
this.value = val;
},
changeTab(index) {
this.currentTab = index;
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
},
},
onLoad() {
this.timeStr = this.timeArr[0].name;
uni.setNavigationBarTitle({
title: "订单管理",
});
},
};
</script>
<style lang="scss" scoped>
.orderpage {
min-height: 100vh;
background-color: #f7f7f7;
box-sizing: border-box;
padding-bottom: 100rpx;
/deep/.u-model {
border-radius: 20rpx;
}
}
.typebox {
width: 100%;
height: 100rpx;
background-color: #fff;
.typeItem {
width: 320rpx;
height: 58rpx;
color: #ccced5;
border-radius: 30rpx;
border: 2rpx solid #446dfc;
font-size: 26rpx;
overflow: hidden;
.typeItem1 {
width: 50%;
height: 100%;
}
.activeType {
color: #fff;
background-color: #446dfc;
}
}
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.searchBox {
height: 90rpx;
background-color: #efeff4;
padding: 0 40rpx 0 20rpx;
.search {
width: 520rpx;
height: 50rpx;
background-color: #fff;
border-radius: 25rpx;
}
}
.contentSlot {
background-color: #fff;
box-sizing: border-box;
padding: 40rpx;
border-radius: 20rpx;
.timeItem {
width: 160rpx;
height: 70rpx;
font-size: 30rpx;
border-radius: 35rpx;
border: 2rpx solid #e5e5e5;
margin-right: 20rpx;
margin-bottom: 10rpx;
}
& .timeItem:nth-child(3n) {
margin-right: 0rpx;
}
.timeItemActive {
color: #446dfc;
border-color: #446dfc;
}
.timeTitle {
margin: 20rpx 0;
font-size: 30rpx;
}
}
.picker-view {
width: 100%;
height: 180rpx;
margin-top: 20rpx;
.picker-item {
height: 100rpx;
}
}
/deep/ .activeClass {
color: #446dfc !important;
}
.tabbox {
margin-bottom: 10rpx;
}
</style>
\ No newline at end of file
pages/MallMange/set.vue 0 → 100644
View file @ a7bbc37c
<template>
<view>
<tabbar></tabbar>
</view>
</template>
<script>
import tabbar from "./components/tabbar.vue";
export default {
components:{
tabbar
},
}
</script>
<style lang="scss">
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment