wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
dev
liudan 1 year ago
parent c21e88f45e
commit 72aa390b96
13 changed files with 3476 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 178
      pages/news3/components/afterSales.vue
  2. 134
      pages/news3/dispatch.vue
  3. 588
      pages/news3/fenxiao.vue
  4. 679
      pages/news3/fenxiaoDetails.vue
  5. 585
      pages/news3/serviceOrder.vue
  6. 653
      pages/news3/shopOrder.vue
  7. 659
      pages/news3/shopOrderDetails.vue
  8. BIN
      static/news3/filter.png
  9. BIN
      static/news3/fx.png
  10. BIN
      static/news3/kefu.png
  11. BIN
      static/news3/phone.png
  12. BIN
      static/news3/time.png
  13. BIN
      static/news3/walletBg.png

178
pages/news3/components/afterSales.vue
Unescape View File

@ -0,0 +1,178 @@
<template>
<view>
<u-popup v-model="afterSale" width="80%" border-radius="10" :closeable="true" mode="center">
<view class="afterSales">
<view class="filterTitle">
确定转移至售后
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
上传照片 <text style="color:#FF5042">*</text><text>最多可传5张图片</text>
</view>
<u-upload
:fileList="finishImageList"
:previewFullImage="true"
@afterRead="afterRead"
:maxCount="8" width="180" height="180"
upload-text="上传照片"
@delete="deletePic"
name="1"
multiple
></u-upload>
</view>
<view class="filterItemContent">
<view class="itemTitle">
备注
</view>
<u-input v-model="remark" placeholder="请输入您的留言" type="textarea" :auto-height="true" />
</view>
</view>
<view class="submit">
确定
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default{
data(){
return{
afterSale:false,
finishImageList:[],
remark:'',
}
},
methods:{
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
if(JSON.parse(result).code==1){
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}else{
this[`fileList${event.name}`].splice(fileListLen, 1)
}
}
},
//上传照片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
// let a = uni.uploadFile({
// url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
// filePath: url,
// name: 'file',
// formData: {
// user: 'test',
// token:getToken()
// },
// success: (res) => {
// if(JSON.parse(res.data).code==1){
// setTimeout(() => {
// this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
// resolve(res.data)
// }, 1000)
// }else{
// uni.$u.toast(JSON.parse(res.data).msg)
// resolve(res.data)
// }
// },
// fail: (res) => {
// console.log(res,"rrr")
// }
// });
})
},
//删除图片
deletePic(event) {
this.finishImageList.splice(event.index, 1)
},
}
}
</script>
<style lang="scss" scoped>
.afterSales{
padding:32upx;
.filterTitle{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
text-align: center;
}
.filterItem{
.filterItemContent{
margin-top:40upx;
.itemTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
margin-bottom:20upx;
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #B5B5B5;
}
}
}
::v-deep .u-input{
height: 160upx;
background: #F7F8FA;
border-radius: 3px 3px 3px 3px;
opacity: 1;
}
::v-deep .u-input__textarea{
padding: 20upx;
}
}
.submit{
width: 100%;
height: 100rpx;
background: #FFAAA4;
border-radius: 6px 6px 6px 6px;
opacity: 1;
line-height: 100rpx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top:40upx;
text-align: center;
}
}
</style>

134
pages/news3/dispatch.vue
Unescape View File

@ -0,0 +1,134 @@
<template>
<view class="dispatch">
<view class="dispatchItem">
<image src="/static/news3/filter.png" mode="aspectFill"></image>
<view class="right">
<view class="title">
上门回收服务
</view>
<view class="num">
x1
</view>
<view class="price">
<text style="font-size: 26upx;">¥</text>
<text>288</text>
</view>
</view>
</view>
<view class="selectContent">
<view class="left">
接单师傅
</view>
<view class="right">
<text>请选择接单师傅</text>
<u-icon name="arrow-right" color="#C3C3C3" size="28"></u-icon>
</view>
</view>
<view class="btn">
确认派单
</view>
</view>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
page{
min-height: 100%;
background-color: #F7F8FA;
}
.dispatchItem{
display: flex;
align-items: center;
padding:40upx;
background-color: #fff;
border-top:1px solid #EBEBEB;
image{
width: 180upx;
height:150upx;
}
.right{
flex:1;
margin-left:40upx;
.title{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
margin-top:44upx;
}
.price{
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
}
}
}
.selectContent{
padding:40upx;
background-color: #fff;
border-top:1px solid #EBEBEB;
display: flex;
align-items: center;
justify-content: space-between;
.left{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.right{
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B0B0B0;
}
}
}
.btn{
width: 80%;
height: 100upx;
background: #FFAAA4;
border-radius: 6px 6px 6px 6px;
opacity: 1;
line-height: 100upx;
text-align: center;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin:66upx auto;
}
</style>

588
pages/news3/fenxiao.vue
Unescape View File

@ -0,0 +1,588 @@
<template>
<view>
<view class="head-info">
<!-- 搜索 -->
<view class="searchContent">
<u-input v-model="searchText" placeholder="输入订单编号/收件人名字/电话商品名称"/>
<u-icon name="search" class="search"></u-icon>
<view class="filter" @click="show=true">
<image src="/static/news3/filter.png" mode="widthFix"></image>
<text>筛选</text>
</view>
</view>
</view>
<!-- 分类列表 -->
<view class="container">
<view class="classify-list">
<view class="list" v-for="(item,index) in classList"
:class="{'action':classifyShow==index}"
@click="onClassify(item,index)"
:key="index">
<text>{{item.name}}</text>
<text class="line" v-show="classifyShow==index"></text>
</view>
</view>
</view>
<view class="shopContent">
<view class="shopItem" v-for="(item,index) in goodsList" :key="index">
<view class="orderInfo">
<text>订单号：{{item.orderNum}}</text>
<text class="statusText">{{getLable(item.status)}}</text>
</view>
<view class="shopItemInfo" v-for="(p,i) in item.children" :key="i">
<image :src="p.image"></image>
<view class="priceCon">
<text class="num">x{{p.num}}</text>
<view class="priceText">
<text style="font-size: 26upx;">¥</text>
<text>{{p.price}}</text>
</view>
</view>
</view>
<view class="totalNum">
<text>含运费¥{{item.yunfei}}</text>
<text>共计：</text>
<text>¥{{item.total}}</text>
</view>
<view class="remark">
<view class="remarkTitle">
收件人姓名 {{item.phone}}
</view>
<view class="remarkContent">
{{item.remark}}
</view>
</view>
<view class="btnGroup">
<view class="btn info" v-show="item.status==2||item.status==1">修改地址</view>
<view class="btn primary" v-show="item.status==2||item.status==1">修改价格</view>
<view class="btn primary" v-show="item.status==2">发货</view>
<view class="btn info" v-show="item.status==23">拒绝</view>
<view class="btn primary" v-show="item.status==3">同意</view>
<view class="btn info" v-show="item.status==4||item.status==6">删除订单</view>
<view class="btn info" v-show="item.status==7">转至售后</view>
<view class="btn primary" v-show="item.status==7">修改物流</view>
</view>
</view>
</view>
<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
<view class="filterContent">
<view class="filterTitle">
订单筛选
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
下单时间
</view>
<view class="timeContainer">
<u-input v-model="startTime" type="select" @click="getTime('start')" disabled placeholder="起始时间"/>
<text>-</text>
<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
来源
</view>
<view class="selectContainer">
<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
支付方式
</view>
<view class="selectContainer">
<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
</view>
<view class="btnGroup">
<view class="resetBtn">
重置
</view>
<view class="confrim">
确定
</view>
</view>
</view>
<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker>
</u-popup>
</view>
</template>
<script>
export default {
data(){
return{
searchText:'',
classifyShow: 0,
classList: [
{
id: 0,
name: '全部',
},{
id: 1,
name: '待付款',
},{
id: 2,
name: '待发货',
},{
id: 3,
name: '售后订单',
},{
id: 4,
name: '已退款',
},{
id: 5,
name: '已完成',
},{
id: 6,
name: '已删除',
},
{
id: 7,
name: '待收货',
}
],
goodsList:[
{
orderNum:7868867676878676876,
status:1, //待付款
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:2, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:3, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},
],
show:false,
timeShow:false,
selectList:[
{id:1,name:'预售'},
{id:2,name:'秒杀'},
{id:3,name:'拼团'},
{id:4,name:'砍价'},
],
payList:[
{id:1,name:'微信支付'},
{id:2,name:'好友代付'},
{id:3,name:'线下支付'},
],
sourceIndex:0,
payIndex:0,
startTime:null,
endTime:null,
}
},
onReady() {
// uni.setNavigationBarTitle({
// title: '首页',
// })
// uni.setNavigationBarColor({
// frontColor: '#ffffff',
// backgroundColor: '#fe3b0f',
// })
},
onLoad() {
},
onPageScroll(e){
},
onReachBottom(){
},
methods:{
getLable(val){
let arr = this.classList.filter(item=>{
return val==item.id
})
return arr[0].name
},
onSearch(){
uni.navigateTo({url:''})
},
onClassify(item,index){
this.classifyShow = index;
},
setResourceIndex(index){
this.sourceIndex = index;
},
setpayIndex(index){
this.payIndex = index;
},
getTime(val){
console.log("ooo")
this.timeShow = true;
}
}
};
</script>
<style scoped lang="scss">
page{
background-color: #F7F8FA;
min-height:100%;
}
.head-info{
margin:22upx 20upx;
.searchContent{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
::v-deep .uni-input-placeholder{
margin-left:90upx;
z-index:10;
}
.search{
position: absolute;
top:20upx;
left:26upx;
z-index:9;
}
::v-deep .u-input{
flex:1;
margin-right:28upx;
}
::v-deep .uni-input-input{
background: #FFFFFF;
border-radius: 30px 30px 30px 30px;
opacity: 1;
padding-left:80upx;
width:calc(100% - 80upx);
}
.filter{
display: flex;
width: 100upx;
flex-direction: column;
align-items: center;
justify-content: center;
image{
width:34upx;
height:auto;
}
text{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #616161;
}
}
}
}
.container{
background-color: #fff;
}
.classify-list{
white-space:nowrap;
width: 100%;
height: 100rpx;
overflow-x: auto;
overflow-y: hidden;
.list{
position: relative;
display:inline-block;
width: 18%;
height: 100%;
line-height: 100rpx;
text-align: center;
text{
font-size: 28rpx;
color: #3B3B3B;
}
.line{
position: absolute;
left: 50%;
bottom: 10rpx;
// width: 60%;
// height: 8rpx;
background: linear-gradient(to right,#f8f893,#fe9d00);
// border-radius: 10rpx;
transform: translate(-50%,0);
width: 60upx;
height: 8upx;
background: #FF6257;
border-radius: 29px 29px 29px 29px;
opacity: 1;
}
}
.action{
text{
font-size: 32rpx;
opacity: 1;
}
}
}
.shopContent{
.shopItem{
margin-bottom:14upx;
padding:36upx;
background-color: #fff;
.orderInfo{
display: flex;
align-items: center;
justify-content:space-between;
text{
font-size: 28upx;
color: #707070;
}
}
.shopItemInfo{
display: flex;
margin-top:40upx;
image{
width:180upx;
height:180upx;
flex-shrink: 0;
}
.priceCon{
flex:1;
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-left:40upx;
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.priceText{
display: flex;
align-items: center;
text{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
font-weight: bold;
}
}
}
}
.totalNum{
text-align: right;
margin-top:70upx;
text:first-child{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin:0 10upx;
}
text:nth-child(3){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.remark{
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding:20upx;
margin-top:20upx;
.remarkTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkContent{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #939393;
margin-top:8upx;
}
}
.btnGroup{
display: flex;
margin-top:28upx;
flex-wrap: wrap;
justify-content: flex-end;
.btn{
width: 180upx;
height: 56upx;
background: #FFFFFF;
border-radius: 50px 50px 50px 50px;
opacity: 1;
font-size: 14px;
line-height: 56upx;
text-align: center;
margin-left:12upx;
}
.info{
border: 1px solid #9F9F9F;
color: #8B8B8B;
}
.primary{
border: 1px solid #F63116;
color: #F83F11;
}
}
}
}
.filterContent{
padding:32upx;
.filterTitle{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
text-align: center;
}
.filterItem{
.filterItemContent{
margin-top:40upx;
.itemTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
margin-bottom:20upx;
}
.timeContainer{
display: flex;
align-items: center;
::v-deep .uni-input-wrapper{
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
text-align: center;
}
::v-deep .u-input__right-icon{
display: none;
}
text{
margin:16upx;
}
}
.selectContainer{
display: flex;
.selectItem{
flex:1;
margin:0 10upx;
height: 70upx;
line-height: 66upx;
text-align: center;
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #A1A1A1;
}
.active{
border: 1px solid #F83F11;
color:#F21A1C;
background-color: #fff;
}
}
}
}
.btnGroup{
display: flex;
justify-content: center;
margin-top:100upx;
padding-bottom:60upx;
.resetBtn{
width: 216upx;
height: 70upx;
line-height: 66upx;
background: #DBDBDB;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #585858;
text-align: center;
}
.confrim{
width: 216upx;
height: 70upx;
text-align: center;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 50px 50px 50px 50px;
opacity: 1;
line-height: 66upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:24upx;
}
}
}
</style>

679
pages/news3/fenxiaoDetails.vue
Unescape View File

@ -0,0 +1,679 @@
<template>
<view>
<view style="width:100%;position: fixed;top:0;z-index:99">
<view class="navBarContent">
<u-icon name="arrow-left" style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#000" size="24"></u-icon>
<text>确认订单</text>
</view>
</view>
<image src="/static/news3/walletBg.png" mode="widthFix" class="bgImg"></image>
<view class="contentDes">
<!-- 订单状态 -->
<view class="order-status">
<view class="status">
<image src="/static/news3/time.png" mode="widthFix"></image>
<text>{{status==1?'待用户付款':status==2?'待用户确认订单':status==4?'订单取消':''}}</text>
</view>
<view class="reason" v-if="status!=4">
<text>58分钟38秒</text>
<text style="color:#666666">后{{status==1?'自动取消':status==2?'自动收货':''}}</text>
</view>
</view>
<view class="personInfo">
<view class="infoTitle">
<text>分销员信息</text>
<view class="phone">
<image src="/static/news3/fx.png" mode=""></image>
<text>1898888979799</text>
</view>
</view>
<view class="fxContent">
<view class="fxPic">
<image src="/static/empty.png" mode=""></image>
<view class="peopleText">
<view class="name">Deioio</view>
<view class="realName">
真实姓名：张三
</view>
</view>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<!-- 收货地址 -->
<view class="shipping-address">
<view class="name-phone">
<text>王哈哈</text>
<text>1788****8888</text>
</view>
<view class="address">
<text>黑龙江道里区爱建路按揭贷款接啊禄口街道克拉克爱神的箭阿拉斯加刷卡机卡</text>
</view>
</view>
<view class="remark">
<view class="remarkTitle">订单备注</view>
<view class="remarkText">这里是备注内容</view>
<view class="img">
<image src="/static/news3/filter.png" mode=""></image>
<image src="/static/news3/filter.png" mode=""></image>
</view>
</view>
<!-- 订单商品 -->
<view class="order-goods">
<view class="goods-list">
<view class="list" v-for="(item,index) in list" :key="index">
<image :src="item.image" mode="aspectFill" class="thumb"></image>
<view class="item">
<view class="title">{{item.name}}</view>
<view class="num-size">{{item.config}}</view>
<view class="price">
<text class="num">x{{item.num}}</text>
<view>
<text class="moneyFlag">¥</text>
<text class="numText">{{item.price}}</text>
</view>
</view>
</view>
</view>
<view class="descInfo">
<view class="descItem">
<view class="descLeft">
<text>配送方式</text>
</view>
<view class="descRight">
快速发货
</view>
</view>
<view class="descItem">
<view class="descLeft">
<text>配送费</text>
<view class="descText">
2件商品，共计20.4kg
</view>
</view>
<view class="descRight">
<text style="font-size:26upx">¥</text>
<text>5.00</text>
</view>
</view>
<view class="descItem">
<view class="descLeft">
<text>商品金额</text>
</view>
<view class="descRight">
<text style="font-size:26upx">¥</text>
<text>2500</text>
</view>
</view>
</view>
<view class="totalNum">
<text>含运费¥5</text>
<text>共计：</text>
<text>¥5000</text>
</view>
<view class="btnContent">
<view class="btnItem">
<image src="/static/news3/phone.png" mode="widthFix"></image>
<text>联系客户</text>
</view>
<view class="btnItem" style="border-left:1px solid #F4F4F4">
<image src="/static/news3/kefu.png" mode="widthFix"></image>
<text>联系商家</text>
</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="order-info">
<view class="info-list">
<view class="list">
<view class="title">订单编号:</view>
<view class="content">
15551231231231
</view>
<text class="btn">复制</text>
</view>
<view class="list">
<view class="title">下单时间:</view>
<view class="content">
2020-12-12 13:11:11
</view>
</view>
<view class="list">
<view class="title">付款时间:</view>
<view class="content">
2023-02-01 12:21:00
</view>
</view>
<view class="list">
<view class="title">支付方式:</view>
<view class="content">
微信支付
</view>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="footer-btn" v-if="status==1">
<view class="del">
修改地址
</view>
<view class="btn">
修改价格
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[
{name:'联想小新笔记本电脑2023年新款',image:'/static/news3/filter.png',config:'16GB，128GB',num:1,price:2500},
{name:'联想小新笔记本电脑2023年新款',image:'/static/news3/filter.png',config:'16GB，128GB',num:1,price:2500},
],
// 0全部1待付款2待发货3售后订单4已退款5已完成6已删除7待收货
status:1,
};
},
methods:{
/**
* 售后点击
*/
onApplyAftersales(){
uni.navigateTo({
url: '/pages/AfterSaleType/AfterSaleType',
})
}
}
}
</script>
<style scoped lang="scss">
page{
background-color: #F7F8FA;
min-height: 100%;
padding-bottom: 140upx;
}
.bgImg{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
z-index:1;
}
.contentDes{
position:relative;
z-index:2;
margin:0upx 26upx;
padding-top:120upx;
}
.navBarContent{
height:88upx;
line-height: 88upx;
text-align: center;
position: relative;
text{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000;
}
}
.page{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f6f6f6;
}
/* 订单状态 */
.order-status{
width: 100%;
.status{
display: flex;
align-items: center;
// justify-content: center;
width: 100%;
image{
width:54upx;
height:auto;
}
text{
font-size: 40upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin-left:20upx;
}
}
.reason{
display: flex;
align-items: center;
margin-top:14upx;
text{
font-size: 30upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF6F6F;
}
}
}
.personInfo{
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
padding:28upx 40upx;
margin-top:80upx;
.infoTitle{
display: flex;
justify-content: space-between;
align-items: center;
&>text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.phone{
display: flex;
align-items: center;
image{
width:32upx;
height:32upx;
}
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin-left:10upx;
}
}
}
.fxContent{
display: flex;
align-items: center;
margin-top:40upx;
.fxPic{
display: flex;
align-items: center;
flex:1;
image{
width:114upx;
height:114upx;
flex-shrink: 0;
}
.peopleText{
margin-left:28upx;
.name{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #2F2F2F;
}
.realName{
margin-top:10upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #8B8B8B;
}
}
}
}
}
/* 收货地址 */
.shipping-address{
height: 180upx;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
margin-top:16upx;
padding:0 40upx;
.name-phone{
display: flex;
align-items: center;
height: 80rpx;
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
}
.address{
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B0B0B0;
}
}
}
.remark{
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
padding:26upx 40upx;
margin:16upx 0;
.remarkTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkText{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #BEBEBE;
margin:20upx 0;
}
.img{
display: flex;
image{
width:100upx;
height:100upx;
margin:0 10upx;
}
}
}
/* 订单商品 */
.order-goods{
width: 100%;
background-color: #FFFFFF;
border-radius: 4px;
.goods-list{
padding:40upx 40upx 0 40upx;
.list{
display: flex;
align-items: center;
width: 100%;
.thumb{
width:150upx;
height:150upx;
}
.item{
margin-top:20upx;
flex:1;
margin-left:30upx;
.title{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
}
.num-size{
margin:14upx 0;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #7C7C7C;
}
.price{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.moneyFlag{
font-size: 26upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
}
.numText{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
}
}
.order-btn{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100rpx;
.btn{
padding: 10rpx 30rpx;
color: #555555;
font-size: 26rpx;
border: 2rpx solid #EEEEEE;
border-radius: 100rpx;
}
}.order-btn{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100rpx;
.btn{
padding: 10rpx 30rpx;
color: #555555;
font-size: 26rpx;
border: 2rpx solid #EEEEEE;
border-radius: 100rpx;
}
}
}
}
}
}
.descInfo{
.descItem{
display: flex;
justify-content: space-between;
align-items: center;
margin-top:20upx;
.descLeft{
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3B3B3B;
}
.descText{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #B7B7B7;
}
}
.descRight{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #515151;
}
}
}
.totalNum{
text-align: right;
margin-top:30upx;
text:first-child{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin:0 10upx;
}
text:nth-child(3){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.btnContent{
display: flex;
border-top:1px solid #F4F4F4;
margin-top:26upx;
.btnItem{
justify-content: center;
flex:1;
display: flex;
align-items: center;
margin:20upx 0;
image{
width:30upx;
height: auto;
}
text{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
margin-left:14upx;
}
}
}
/* 订单信息 */
.order-info{
width: 100%;
background-color: #FFFFFF;
border-radius: 4px;
.info-list{
padding:24upx 34upx;
margin-top:20upx;
.list{
display: flex;
align-items: center;
width: 100%;
position: relative;
margin:20upx 0;
.btn{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F63016;
position: absolute;
right:0;
}
.title{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #7E7E7E;
}
.content{
margin-left:20upx;
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
}
}
}
}
.footer-btn{
position: fixed;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content:flex-end;
width: 100%;
height: 100rpx;
background-color: #FFFFFF;
border-top: 2rpx solid #EEEEEE;
padding: 0 40upx;
.del{
width: 140upx;
height: 68upx;
background: #FFFFFF;
border-radius: 38px 38px 38px 38px;
opacity: 1;
border: 1px solid #D9D9D9;
line-height: 68upx;
font-size: 24upx;
text-align: center;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #828282;
}
.btn{
text-align: center;
width: 140upx;
height: 68upx;
background: #FFFFFF;
border-radius: 38px 38px 38px 38px;
opacity: 1;
border: 1px solid #F21A1C;
line-height: 68upx;
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
margin-left:14upx;
}
}
</style>

585
pages/news3/serviceOrder.vue
Unescape View File

@ -0,0 +1,585 @@
<template>
<view>
<view class="head-info">
<!-- 搜索 -->
<view class="searchContent">
<u-input v-model="searchText" placeholder="输入订单编号/收件人名字/电话商品名称"/>
<u-icon name="search" class="search"></u-icon>
<view class="filter" @click="show=true">
<image src="/static/news3/filter.png" mode="widthFix"></image>
<text>筛选</text>
</view>
</view>
</view>
<!-- 分类列表 -->
<view class="container">
<view class="classify-list">
<view class="list" v-for="(item,index) in classList"
:class="{'action':classifyShow==index}"
@click="onClassify(item,index)"
:key="index">
<text>{{item.name}}</text>
<text class="line" v-show="classifyShow==index"></text>
</view>
</view>
</view>
<view class="shopContent">
<view class="shopItem" v-for="(item,index) in goodsList" :key="index">
<view class="orderInfo">
<text>订单号：{{item.orderNum}}</text>
<text class="statusText">{{getLable(item.status)}}</text>
</view>
<view class="shopItemInfo" v-for="(p,i) in item.children" :key="i">
<image :src="p.image"></image>
<view class="priceCon">
<text class="num">x{{p.num}}</text>
<view class="priceText">
<text style="font-size: 26upx;">¥</text>
<text>{{p.price}}</text>
</view>
</view>
</view>
<view class="totalNum">
<text>含运费¥{{item.yunfei}}</text>
<text>共计：</text>
<text>¥{{item.total}}</text>
</view>
<view class="remark">
<view class="remarkTitle">
收件人姓名 {{item.phone}}
</view>
<view class="remarkContent">
{{item.remark}}
</view>
</view>
<view class="btnGroup">
<view class="btn info" v-show="item.status==2||item.status==1">修改地址</view>
<view class="btn primary" v-show="item.status==2||item.status==1">修改价格</view>
<view class="btn primary" v-show="item.status==2">发货</view>
<view class="btn info" v-show="item.status==23">拒绝</view>
<view class="btn primary" v-show="item.status==3">同意</view>
<view class="btn info" v-show="item.status==4||item.status==6">删除订单</view>
<view class="btn info" v-show="item.status==7">转至售后</view>
<view class="btn primary" v-show="item.status==7">修改物流</view>
</view>
</view>
</view>
<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
<view class="filterContent">
<view class="filterTitle">
订单筛选
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
下单时间
</view>
<view class="timeContainer">
<u-input v-model="startTime" type="select" @click="getTime('start')" disabled placeholder="起始时间"/>
<text>-</text>
<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
来源
</view>
<view class="selectContainer">
<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
支付方式
</view>
<view class="selectContainer">
<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
</view>
<view class="btnGroup">
<view class="resetBtn">
重置
</view>
<view class="confrim">
确定
</view>
</view>
</view>
<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker>
</u-popup>
</view>
</template>
<script>
export default {
data(){
return{
searchText:'',
classifyShow: 0,
classList: [
{
id: 0,
name: '全部',
},{
id: 1,
name: '待发货',
},{
id: 2,
name: '待验收',
},{
id: 3,
name: '售后订单',
},{
id: 4,
name: '已完成',
},{
id: 5,
name: '已退款',
},{
id: 6,
name: '已删除',
},
],
goodsList:[
{
orderNum:7868867676878676876,
status:1, //待付款
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:2, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:3, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},
],
show:false,
timeShow:false,
selectList:[
{id:1,name:'预售'},
{id:2,name:'秒杀'},
{id:3,name:'拼团'},
{id:4,name:'砍价'},
],
payList:[
{id:1,name:'微信支付'},
{id:2,name:'好友代付'},
{id:3,name:'线下支付'},
],
sourceIndex:0,
payIndex:0,
startTime:null,
endTime:null,
}
},
onReady() {
// uni.setNavigationBarTitle({
// title: '首页',
// })
// uni.setNavigationBarColor({
// frontColor: '#ffffff',
// backgroundColor: '#fe3b0f',
// })
},
onLoad() {
},
onPageScroll(e){
},
onReachBottom(){
},
methods:{
getLable(val){
let arr = this.classList.filter(item=>{
return val==item.id
})
return arr[0].name
},
onSearch(){
uni.navigateTo({url:''})
},
onClassify(item,index){
this.classifyShow = index;
},
setResourceIndex(index){
this.sourceIndex = index;
},
setpayIndex(index){
this.payIndex = index;
},
getTime(val){
console.log("ooo")
this.timeShow = true;
}
}
};
</script>
<style scoped lang="scss">
page{
background-color: #F7F8FA;
min-height:100%;
}
.head-info{
padding:22upx 20upx;
.searchContent{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
::v-deep .uni-input-placeholder{
margin-left:90upx;
z-index:10;
}
.search{
position: absolute;
top:20upx;
left:26upx;
z-index:9;
}
::v-deep .u-input{
flex:1;
margin-right:28upx;
}
::v-deep .uni-input-input{
background: #FFFFFF;
border-radius: 30px 30px 30px 30px;
opacity: 1;
padding-left:80upx;
width:calc(100% - 80upx);
}
.filter{
display: flex;
width: 100upx;
flex-direction: column;
align-items: center;
justify-content: center;
image{
width:34upx;
height:auto;
}
text{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #616161;
}
}
}
}
.container{
background-color: #fff;
}
.classify-list{
white-space:nowrap;
width: 100%;
height: 100rpx;
overflow-x: auto;
overflow-y: hidden;
.list{
position: relative;
display:inline-block;
width: 18%;
height: 100%;
line-height: 100rpx;
text-align: center;
text{
font-size: 28rpx;
color: #3B3B3B;
}
.line{
position: absolute;
left: 50%;
bottom: 10rpx;
// width: 60%;
// height: 8rpx;
background: linear-gradient(to right,#f8f893,#fe9d00);
// border-radius: 10rpx;
transform: translate(-50%,0);
width: 60upx;
height: 8upx;
background: #FF6257;
border-radius: 29px 29px 29px 29px;
opacity: 1;
}
}
.action{
text{
font-size: 32rpx;
opacity: 1;
}
}
}
.shopContent{
.shopItem{
margin-bottom:14upx;
padding:36upx;
background-color: #fff;
.orderInfo{
display: flex;
align-items: center;
justify-content:space-between;
text{
font-size: 28upx;
color: #707070;
}
}
.shopItemInfo{
display: flex;
margin-top:40upx;
image{
width:180upx;
height:180upx;
flex-shrink: 0;
}
.priceCon{
flex:1;
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-left:40upx;
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.priceText{
display: flex;
align-items: center;
text{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
font-weight: bold;
}
}
}
}
.totalNum{
text-align: right;
margin-top:70upx;
text:first-child{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin:0 10upx;
}
text:nth-child(3){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.remark{
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding:20upx;
margin-top:20upx;
.remarkTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkContent{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #939393;
margin-top:8upx;
}
}
.btnGroup{
display: flex;
margin-top:28upx;
flex-wrap: wrap;
justify-content: flex-end;
.btn{
width: 180upx;
height: 56upx;
background: #FFFFFF;
border-radius: 50px 50px 50px 50px;
opacity: 1;
font-size: 14px;
line-height: 56upx;
text-align: center;
margin-left:12upx;
}
.info{
border: 1px solid #9F9F9F;
color: #8B8B8B;
}
.primary{
border: 1px solid #F63116;
color: #F83F11;
}
}
}
}
.filterContent{
padding:32upx;
.filterTitle{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
text-align: center;
}
.filterItem{
.filterItemContent{
margin-top:40upx;
.itemTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
margin-bottom:20upx;
}
.timeContainer{
display: flex;
align-items: center;
::v-deep .uni-input-wrapper{
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
text-align: center;
}
::v-deep .u-input__right-icon{
display: none;
}
text{
margin:16upx;
}
}
.selectContainer{
display: flex;
.selectItem{
flex:1;
margin:0 10upx;
height: 70upx;
line-height: 66upx;
text-align: center;
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #A1A1A1;
}
.active{
border: 1px solid #F83F11;
color:#F21A1C;
background-color: #fff;
}
}
}
}
.btnGroup{
display: flex;
justify-content: center;
margin-top:100upx;
padding-bottom:60upx;
.resetBtn{
width: 216upx;
height: 70upx;
line-height: 66upx;
background: #DBDBDB;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #585858;
text-align: center;
}
.confrim{
width: 216upx;
height: 70upx;
text-align: center;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 50px 50px 50px 50px;
opacity: 1;
line-height: 66upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:24upx;
}
}
}
</style>

653
pages/news3/shopOrder.vue
Unescape View File

@ -0,0 +1,653 @@
<template>
<view>
<view class="head-info">
<!-- 搜索 -->
<view class="searchContent">
<u-input v-model="searchText" placeholder="输入订单编号/收件人名字/电话商品名称"/>
<u-icon name="search" class="search"></u-icon>
<view class="filter" @click="getFilterHandle">
<image src="/static/news3/filter.png" mode="widthFix"></image>
<text>筛选</text>
</view>
</view>
</view>
<!-- 分类列表 -->
<view class="container">
<view class="classify-list">
<view class="list" v-for="(item,index) in classList"
:class="{'action':classifyShow==index}"
@click="onClassify(item,index)"
:key="index">
<text>{{item.name}}</text>
<text class="line" v-show="classifyShow==index"></text>
</view>
</view>
</view>
<view class="shopContent">
<view class="shopItem" v-for="(item,index) in goodsList" :key="index">
<view class="orderInfo">
<text>订单号：{{item.orderNum}}</text>
<text class="statusText">{{getLable(item.status)}}</text>
</view>
<view class="shopItemInfo" v-for="(p,i) in item.children" :key="i">
<image :src="p.image"></image>
<view class="priceCon">
<text class="num">x{{p.num}}</text>
<view class="priceText">
<text style="font-size: 26upx;">¥</text>
<text>{{p.price}}</text>
</view>
</view>
</view>
<view class="totalNum">
<text>含运费¥{{item.yunfei}}</text>
<text>共计：</text>
<text>¥{{item.total}}</text>
</view>
<view class="remark">
<view class="remarkTitle">
收件人姓名 {{item.phone}}
</view>
<view class="remarkContent">
{{item.remark}}
</view>
</view>
<view class="btnGroup">
<view class="btn info" v-show="item.status==2||item.status==1">修改地址</view>
<view class="btn primary" v-show="item.status==2||item.status==1">修改价格</view>
<view class="btn primary" v-show="item.status==2">发货</view>
<view class="btn info" v-show="item.status==23">拒绝</view>
<view class="btn primary" v-show="item.status==3">同意</view>
<view class="btn info" v-show="item.status==4||item.status==6">删除订单</view>
<view class="btn info" @click="afterSale=true" v-show="item.status==7">转至售后</view>
<view class="btn primary" v-show="item.status==7">修改物流</view>
</view>
</view>
</view>
<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
<view class="filterContent">
<view class="filterTitle">
订单筛选
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
下单时间
</view>
<view class="timeContainer">
<u-input v-model="startTime" type="select" @click="getTime('start')" disabled placeholder="起始时间"/>
<text>-</text>
<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
来源
</view>
<view class="selectContainer">
<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
<view class="filterItemContent">
<view class="itemTitle">
支付方式
</view>
<view class="selectContainer">
<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id">
{{item.name}}
</view>
</view>
</view>
</view>
<view class="btnGroup">
<view class="resetBtn">
重置
</view>
<view class="confrim">
确定
</view>
</view>
</view>
<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker>
</u-popup>
<u-popup v-model="afterSale" width="80%" border-radius="10" :closeable="true" mode="center">
<view class="afterSales">
<view class="filterTitle">
确定转移至售后
</view>
<view class="filterItem">
<view class="filterItemContent">
<view class="itemTitle">
上传照片 <text style="color:#FF5042">*</text><text>最多可传5张图片</text>
</view>
<u-upload
:fileList="finishImageList"
:previewFullImage="true"
@afterRead="afterRead"
:maxCount="8" width="180" height="180"
upload-text="上传照片"
@delete="deletePic"
name="1"
multiple
></u-upload>
</view>
<view class="filterItemContent">
<view class="itemTitle">
备注
</view>
<u-input v-model="remark" placeholder="请输入您的留言" type="textarea" :auto-height="true" />
</view>
</view>
<view class="submit">
确定
</view>
</view>
</u-popup>
<afterSale ref='afterSales'></afterSale>
</view>
</template>
<script>
import afterSale from './components/afterSales.vue'
export default {
components:{afterSale},
data(){
return{
searchText:'',
classifyShow: 0,
classList: [
{
id: 0,
name: '全部',
},{
id: 1,
name: '待发货',
},{
id: 2,
name: '待验收',
},{
id: 3,
name: '售后订单',
},{
id: 4,
name: '已完成',
},{
id: 5,
name: '已退款',
},{
id: 6,
name: '已删除',
},
],
goodsList:[
{
orderNum:7868867676878676876,
status:7,
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:2, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},{
orderNum:7868867676878676876,
status:3, //待发货
total:5000,
yunfei:5,
name:'收件人姓名',
phone:'188989988900',
remark:'这里是备注',
children:[
{image:'/static/news3/filter.png',num:1,price:2500},
{image:'/static/news3/filter.png',num:1,price:2500},
]
},
],
show:false,
timeShow:false,
selectList:[
{id:1,name:'预售'},
{id:2,name:'秒杀'},
{id:3,name:'拼团'},
{id:4,name:'砍价'},
],
payList:[
{id:1,name:'微信支付'},
{id:2,name:'好友代付'},
{id:3,name:'线下支付'},
],
sourceIndex:0,
payIndex:0,
startTime:null,
endTime:null,
classList: [
{
id: 0,
name: '全部',
},{
id: 1,
name: '待付款',
},{
id: 2,
name: '待发货',
},{
id: 3,
name: '售后订单',
},{
id: 4,
name: '已退款',
},{
id: 5,
name: '已完成',
},{
id: 6,
name: '已删除',
},
{
id: 7,
name: '待收货',
}
],
}
},
onReady() {
// uni.setNavigationBarTitle({
// title: '首页',
// })
// uni.setNavigationBarColor({
// frontColor: '#ffffff',
// backgroundColor: '#fe3b0f',
// })
},
onLoad() {
},
onPageScroll(e){
},
onReachBottom(){
},
methods:{
getLable(val){
let arr = this.classList.filter(item=>{
return val==item.id
})
return arr[0].name
},
onSearch(){
uni.navigateTo({url:''})
},
onClassify(item,index){
this.classifyShow = index;
},
setResourceIndex(index){
this.sourceIndex = index;
},
setpayIndex(index){
this.payIndex = index;
},
getTime(val){
console.log("ooo")
this.timeShow = true;
},
getFilterHandle(){
console.log("uu")
this.$refs.afterSales.afterSale = true;
}
}
};
</script>
<style scoped lang="scss">
page{
background-color: #F7F8FA;
min-height:100%;
}
.head-info{
padding:22upx 20upx;
.searchContent{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
::v-deep .uni-input-placeholder{
margin-left:90upx;
z-index:10;
}
.search{
position: absolute;
top:20upx;
left:26upx;
z-index:9;
}
::v-deep .u-input{
flex:1;
margin-right:28upx;
}
::v-deep .uni-input-input{
background: #FFFFFF;
border-radius: 30px 30px 30px 30px;
opacity: 1;
padding-left:80upx;
width:calc(100% - 80upx);
}
.filter{
display: flex;
width: 100upx;
flex-direction: column;
align-items: center;
justify-content: center;
image{
width:34upx;
height:auto;
}
text{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #616161;
}
}
}
}
.container{
background-color: #fff;
}
.classify-list{
white-space:nowrap;
width: 100%;
height: 100rpx;
overflow-x: auto;
overflow-y: hidden;
.list{
position: relative;
display:inline-block;
width: 18%;
height: 100%;
line-height: 100rpx;
text-align: center;
text{
font-size: 28rpx;
color: #3B3B3B;
}
.line{
position: absolute;
left: 50%;
bottom: 10rpx;
// width: 60%;
// height: 8rpx;
background: linear-gradient(to right,#f8f893,#fe9d00);
// border-radius: 10rpx;
transform: translate(-50%,0);
width: 60upx;
height: 8upx;
background: #FF6257;
border-radius: 29px 29px 29px 29px;
opacity: 1;
}
}
.action{
text{
font-size: 32rpx;
opacity: 1;
}
}
}
.shopContent{
.shopItem{
margin-bottom:14upx;
padding:36upx;
background-color: #fff;
.orderInfo{
display: flex;
align-items: center;
justify-content:space-between;
text{
font-size: 28upx;
color: #707070;
}
}
.shopItemInfo{
display: flex;
margin-top:40upx;
image{
width:180upx;
height:180upx;
flex-shrink: 0;
}
.priceCon{
flex:1;
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-left:40upx;
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.priceText{
display: flex;
align-items: center;
text{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
font-weight: bold;
}
}
}
}
.totalNum{
text-align: right;
margin-top:70upx;
text:first-child{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin:0 10upx;
}
text:nth-child(3){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.remark{
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding:20upx;
margin-top:20upx;
.remarkTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkContent{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #939393;
margin-top:8upx;
}
}
.btnGroup{
display: flex;
margin-top:28upx;
flex-wrap: wrap;
justify-content: flex-end;
.btn{
width: 180upx;
height: 56upx;
background: #FFFFFF;
border-radius: 50px 50px 50px 50px;
opacity: 1;
font-size: 14px;
line-height: 56upx;
text-align: center;
margin-left:12upx;
}
.info{
border: 1px solid #9F9F9F;
color: #8B8B8B;
}
.primary{
border: 1px solid #F63116;
color: #F83F11;
}
}
}
}
.filterContent{
padding:32upx;
.filterTitle{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
text-align: center;
}
.filterItem{
.filterItemContent{
margin-top:40upx;
.itemTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #303030;
margin-bottom:20upx;
}
.timeContainer{
display: flex;
align-items: center;
::v-deep .uni-input-wrapper{
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
text-align: center;
}
::v-deep .u-input__right-icon{
display: none;
}
text{
margin:16upx;
}
}
.selectContainer{
display: flex;
.selectItem{
flex:1;
margin:0 10upx;
height: 70upx;
line-height: 66upx;
text-align: center;
background: #F3F3F3;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #A1A1A1;
}
.active{
border: 1px solid #F83F11;
color:#F21A1C;
background-color: #fff;
}
}
}
}
.btnGroup{
display: flex;
justify-content: center;
margin-top:100upx;
padding-bottom:60upx;
.resetBtn{
width: 216upx;
height: 70upx;
line-height: 66upx;
background: #DBDBDB;
border-radius: 22px 22px 22px 22px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #585858;
text-align: center;
}
.confrim{
width: 216upx;
height: 70upx;
text-align: center;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 50px 50px 50px 50px;
opacity: 1;
line-height: 66upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:24upx;
}
}
}
</style>

659
pages/news3/shopOrderDetails.vue
Unescape View File

@ -0,0 +1,659 @@
<template>
<view>
<view style="width:100%;position: fixed;top:0;z-index:99">
<view class="navBarContent">
<u-icon name="arrow-left" style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#000" size="24"></u-icon>
<text>确认订单</text>
</view>
</view>
<image src="/static/news3/walletBg.png" mode="widthFix" class="bgImg"></image>
<view class="contentDes">
<!-- 订单状态 -->
<view class="order-status">
<view class="status">
<image src="/static/news3/time.png" mode="widthFix"></image>
<text>{{status==1?'待用户付款':status==2?'待用户确认订单':status==4?'订单取消':''}}</text>
</view>
<view class="reason" v-if="status!=4">
<text>58分钟38秒</text>
<text style="color:#666666">后{{status==1?'自动取消':status==2?'自动收货':''}}</text>
</view>
</view>
<!-- 收货地址 -->
<view class="shipping-address">
<view class="name-phone">
<text>王哈哈</text>
<text>1788****8888</text>
</view>
<view class="address">
<text>黑龙江道里区爱建路按揭贷款接啊禄口街道克拉克爱神的箭阿拉斯加刷卡机卡</text>
</view>
</view>
<view class="remark">
<view class="remarkTitle">订单备注</view>
<view class="remarkText">这里是备注内容</view>
<view class="img">
<image src="/static/news3/filter.png" mode=""></image>
<image src="/static/news3/filter.png" mode=""></image>
</view>
</view>
<!-- 订单商品 -->
<view class="order-goods">
<view class="goods-list">
<view class="list" v-for="(item,index) in list" :key="index">
<image :src="item.image" mode="aspectFill" class="thumb"></image>
<view class="item">
<view class="title">{{item.name}}</view>
<view class="num-size">{{item.config}}</view>
<view class="price">
<text class="num">x{{item.num}}</text>
<view>
<text class="moneyFlag">¥</text>
<text class="numText">{{item.price}}</text>
</view>
</view>
</view>
</view>
<view class="descInfo">
<view class="descItem">
<view class="descLeft">
<text>配送方式</text>
</view>
<view class="descRight">
快速发货
</view>
</view>
<view class="descItem">
<view class="descLeft">
<text>配送费</text>
<view class="descText">
2件商品，共计20.4kg
</view>
</view>
<view class="descRight">
<text style="font-size:26upx">¥</text>
<text>5.00</text>
</view>
</view>
<view class="descItem">
<view class="descLeft">
<text>商品金额</text>
</view>
<view class="descRight">
<text style="font-size:26upx">¥</text>
<text>2500</text>
</view>
</view>
</view>
<view class="totalNum">
<text>含运费¥5</text>
<text>共计：</text>
<text>¥5000</text>
</view>
<view class="btnContent">
<view class="btnItem">
<image src="/static/news3/phone.png" mode="widthFix"></image>
<text>联系客户</text>
</view>
<view class="btnItem" style="border-left:1px solid #F4F4F4">
<image src="/static/news3/kefu.png" mode="widthFix"></image>
<text>联系商家</text>
</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="order-info">
<view class="info-list">
<view class="list">
<view class="title">订单编号:</view>
<view class="content">
15551231231231
</view>
<text class="btn">复制</text>
</view>
<view class="list">
<view class="title">下单时间:</view>
<view class="content">
2020-12-12 13:11:11
</view>
</view>
<view class="list">
<view class="title">付款时间:</view>
<view class="content">
2023-02-01 12:21:00
</view>
</view>
<view class="list">
<view class="title">支付方式:</view>
<view class="content">
微信支付
</view>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="footer-btn" v-if="status==1">
<view class="del">
修改地址
</view>
<view class="btn">
修改价格
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[
{name:'联想小新笔记本电脑2023年新款',image:'/static/news3/filter.png',config:'16GB，128GB',num:1,price:2500},
{name:'联想小新笔记本电脑2023年新款',image:'/static/news3/filter.png',config:'16GB，128GB',num:1,price:2500},
],
// 0全部1待付款2待发货3售后订单4已退款5已完成6已删除7待收货
status:1,
};
},
methods:{
/**
* 售后点击
*/
onApplyAftersales(){
uni.navigateTo({
url: '/pages/AfterSaleType/AfterSaleType',
})
}
}
}
</script>
<style scoped lang="scss">
page{
background-color: #F7F8FA;
min-height: 100%;
padding-bottom: 140upx;
}
.bgImg{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
z-index:1;
}
.contentDes{
position:relative;
z-index:2;
margin:0upx 26upx;
padding-top:120upx;
}
.navBarContent{
height:88upx;
line-height: 88upx;
text-align: center;
position: relative;
text{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000;
}
}
.page{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f6f6f6;
}
/* 订单状态 */
.order-status{
width: 100%;
.status{
display: flex;
align-items: center;
// justify-content: center;
width: 100%;
image{
width:54upx;
height:auto;
}
text{
font-size: 40upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin-left:20upx;
}
}
.reason{
display: flex;
align-items: center;
margin-top:14upx;
text{
font-size: 30upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF6F6F;
}
}
}
.personInfo{
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
padding:28upx 40upx;
margin-top:80upx;
.infoTitle{
display: flex;
justify-content: space-between;
align-items: center;
&>text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.phone{
display: flex;
align-items: center;
image{
width:32upx;
height:32upx;
}
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin-left:10upx;
}
}
}
.fxContent{
display: flex;
align-items: center;
margin-top:40upx;
.fxPic{
display: flex;
align-items: center;
flex:1;
image{
width:114upx;
height:114upx;
flex-shrink: 0;
}
.peopleText{
margin-left:28upx;
.name{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #2F2F2F;
}
.realName{
margin-top:10upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #8B8B8B;
}
}
}
}
}
/* 收货地址 */
.shipping-address{
height: 180upx;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
margin-top:16upx;
padding:0 40upx;
.name-phone{
display: flex;
align-items: center;
height: 80rpx;
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
}
.address{
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B0B0B0;
}
}
}
.remark{
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
padding:26upx 40upx;
margin:16upx 0;
.remarkTitle{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkText{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #BEBEBE;
margin:20upx 0;
}
.img{
display: flex;
image{
width:100upx;
height:100upx;
margin:0 10upx;
}
}
}
/* 订单商品 */
.order-goods{
width: 100%;
background-color: #FFFFFF;
border-radius: 4px;
.goods-list{
padding:40upx 40upx 0 40upx;
.list{
display: flex;
align-items: center;
width: 100%;
.thumb{
width:150upx;
height:150upx;
}
.item{
margin-top:20upx;
flex:1;
margin-left:30upx;
.title{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
}
.num-size{
margin:14upx 0;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #7C7C7C;
}
.price{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.num{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.moneyFlag{
font-size: 26upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
}
.numText{
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
}
}
.order-btn{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100rpx;
.btn{
padding: 10rpx 30rpx;
color: #555555;
font-size: 26rpx;
border: 2rpx solid #EEEEEE;
border-radius: 100rpx;
}
}.order-btn{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100rpx;
.btn{
padding: 10rpx 30rpx;
color: #555555;
font-size: 26rpx;
border: 2rpx solid #EEEEEE;
border-radius: 100rpx;
}
}
}
}
}
}
.descInfo{
.descItem{
display: flex;
justify-content: space-between;
align-items: center;
margin-top:20upx;
.descLeft{
text{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3B3B3B;
}
.descText{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #B7B7B7;
}
}
.descRight{
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #515151;
}
}
}
.totalNum{
text-align: right;
margin-top:30upx;
text:first-child{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin:0 10upx;
}
text:nth-child(3){
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.btnContent{
display: flex;
border-top:1px solid #F4F4F4;
margin-top:26upx;
.btnItem{
justify-content: center;
flex:1;
display: flex;
align-items: center;
margin:20upx 0;
image{
width:30upx;
height: auto;
}
text{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
margin-left:14upx;
}
}
}
/* 订单信息 */
.order-info{
width: 100%;
background-color: #FFFFFF;
border-radius: 4px;
.info-list{
padding:24upx 34upx;
margin-top:20upx;
.list{
display: flex;
align-items: center;
width: 100%;
position: relative;
margin:20upx 0;
.btn{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F63016;
position: absolute;
right:0;
}
.title{
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #7E7E7E;
}
.content{
margin-left:20upx;
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
}
}
}
}
.footer-btn{
position: fixed;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content:flex-end;
width: 100%;
height: 100rpx;
background-color: #FFFFFF;
border-top: 2rpx solid #EEEEEE;
padding: 0 40upx;
.del{
width: 140upx;
height: 68upx;
background: #FFFFFF;
border-radius: 38px 38px 38px 38px;
opacity: 1;
border: 1px solid #D9D9D9;
line-height: 68upx;
font-size: 24upx;
text-align: center;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #828282;
}
.btn{
text-align: center;
width: 140upx;
height: 68upx;
background: #FFFFFF;
border-radius: 38px 38px 38px 38px;
opacity: 1;
border: 1px solid #F21A1C;
line-height: 68upx;
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
margin-left:14upx;
}
}
</style>

BIN
static/news3/filter.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
static/news3/fx.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 B

BIN
static/news3/kefu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
static/news3/phone.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
static/news3/time.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
static/news3/walletBg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

Write Preview
Loading…
Cancel
Save