Commit 35a35d6a authored by zhangjianguo's avatar zhangjianguo

购物车修改和我的足迹日期选择

parent 2c4edcd2
<template>
<u-popup
mode="bottom"
border-radius="20"
:popup="false"
v-model="show"
:maskCloseAble="true"
length="auto"
:safeAreaInsetBottom="true"
@close="popupClose"
:z-index="9999"
close-icon="cross"
:closeable="true"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
class="ordergoodlist2"
style="margin-bottom: 20rpx;"
>
<view class="title-box">
<view class="title">商品清单</view>
<view class="tips">{{list.length}}</view>
</view>
<view class="goodbox update-goodbox" v-for="(cx, i) in list" :key="i">
<image :src="cx.goods_info.pic_url" style="width: 100px; height: 100px" />
<view style="width: calc(100% - 110px);height: 100px;display: flex;flex-direction: column;margin-left: 10px;justify-content: space-between;">
<Text class='topic_cont_text' >{{cx.goods_info.name}}</Text>
<view style='width: calc(100% - 110px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>
<view v-for="(attr, index2) in cx.goods_info.attr_list" :key="index2" >
<Text style='color: #A0A09D;font-size: 24rpx;margin-right: 5rpx;'>规格:{{attr.attr_name}}</Text>
</view>
</view>
<view style="width: 100%;display: flex;flex-direction: row;align-items:center;justify-content: space-between;">
<view class="left" :style="{ color: mc }">
<text class="small"></text>
<text style='font-size: 40rpx;'>{{ cx.unit_price.split(".")[0] }}</text>
<text class="small"
>.{{ cx.unit_price.split(".")[1] || "00" }}</text
>
</view>
<Text style='color: #A0A09D;font-size: 24rpx;'>X{{cx.num}}</Text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</u-popup>
</template>
<script>
export default {
props: ["list"],
data() {
return {
show: true,
mc: "",
};
},
mounted() {
this.mc = this.$uiConfig.mainColor;
console.log(this.mc)
},
methods: {
popupClose() {
this.$emit("close");
},
},
};
</script>
<style>
.ordergoodlist2 {
height: 75vh;
padding-bottom: 50px;
text-align: left !important;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow-y: auto;
position: relative;
padding: 69px 10px 0 10px;
}
.ordergoodlist2 .title-box {
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
z-index: 2;
}
.ordergoodlist2 .title-box .title {
font-size: 22px;
color: #000;
padding: 20px;
background: #fff;
flex: 1;
}
.ordergoodlist2 .title-box .tips {
font-size: 13px;
color: #777;
flex: 1;
text-align: right;
padding-right: 12px;
}
.ordergoodlist2 .goodbox.update-goodbox {
width: 100%;
padding-bottom: 10px;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 10px;
display: flex;
}
.ordergoodlist2 .goodbox.update-goodbox:last-child {
border: none;
}
.ordergoodlist2 .image{
width: 160rpx;
height: 160rpx;
}
.ordergoodlist2 .topic_cont_text{
font-size: 26rpx;
max-height: 80rpx;
overflow: hidden;
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
}
</style>
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column v-for="(group,gIndex) in range" :key="gIndex">
<view class="w-picker-item" v-for="(item,index) in group" :key="index">{{item[nodeKey]}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:[],
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[Array,String],
default:""
},
defaultType:{
type:String,
default:"label"
},
options:{
type:Array,
default(){
return []
}
},
defaultProps:{
type:Object,
default(){
return{
lable:"label",
value:"value",
children:"children"
}
}
},
level:{
//多级联动层级,表示几级联动
type:[Number,String],
default:2
}
},
computed:{
nodeKey(){
return this.defaultProps.label;
},
nodeVal(){
return this.defaultProps.value;
},
nodeChild(){
return this.defaultProps.children;
}
},
watch:{
value(val){
if(this.options.length!=0){
this.initData();
}
},
options(val){
this.initData();
}
},
created() {
if(this.options.length!=0){
this.initData();
}
},
methods:{
getData(){
//用来处理初始化数据
let options=this.options;
let col1={},col2={},col3={},col4={};
let arr1=options,arr2=[],arr3=[],arr4=[];
let col1Index=0,col2Index=0,col3Index=0,col4Index=0;
let a1="",a2="",a3="",a4="";
let dVal=[],obj={};
let value=this.value;
let data=[];
a1=value[0];
a2=value[1];
if(this.level>2){
a3=value[2];
}
if(this.level>3){
a4=value[3];
};
/*第1列*/
col1Index=arr1.findIndex((v)=>{
return v[this.defaultType]==a1
});
col1Index=value?(col1Index!=-1?col1Index:0):0;
col1=arr1[col1Index];
/*第2列*/
arr2=arr1[col1Index][this.nodeChild];
col2Index=arr2.findIndex((v)=>{
return v[this.defaultType]==a2
});
col2Index=value?(col2Index!=-1?col2Index:0):0;
col2=arr2[col2Index];
/*第3列*/
if(this.level>2){
arr3=arr2[col2Index][this.nodeChild];
col3Index=arr3.findIndex((v)=>{
return v[this.defaultType]==a3;
});
col3Index=value?(col3Index!=-1?col3Index:0):0;
col3=arr3[col3Index];
};
/*第4列*/
if(this.level>3){
arr4=arr3[col4Index][this.nodeChild];
col4Index=arr4.findIndex((v)=>{
return v[this.defaultType]==a4;
});
col4Index=value?(col4Index!=-1?col4Index:0):0;
col4=arr4[col4Index];
};
switch(this.level*1){
case 2:
dVal=[col1Index,col2Index];
obj={
col1,
col2
}
data=[arr1,arr2];
break;
case 3:
dVal=[col1Index,col2Index,col3Index];
obj={
col1,
col2,
col3
}
data=[arr1,arr2,arr3];
break;
case 4:
dVal=[col1Index,col2Index,col3Index,col4Index];
obj={
col1,
col2,
col3,
col4
}
data=[arr1,arr2,arr3,arr4];
break
}
return {
data,
dVal,
obj
}
},
initData(){
let dataData=this.getData();
let data=dataData.data;
let arr1=data[0];
let arr2=data[1];
let arr3=data[2]||[];
let arr4=data[3]||[];
let obj=dataData.obj;
let col1=obj.col1,col2=obj.col2,col3=obj.col3||{},col4=obj.col4||{};
let result="",value=[];
let range=[];
switch(this.level){
case 2:
value=[col1[this.nodeVal],col2[this.nodeVal]];
result=`${col1[this.nodeKey]+col2[this.nodeKey]}`;
range=[arr1,arr2];
break;
case 3:
value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal]];
result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]}`;
range=[arr1,arr2,arr3];
break;
case 4:
value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal],col4[this.nodeVal]];
result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]+col4[this.nodeKey]}`;
range=[arr1,arr2,arr3,arr4];
break;
}
this.range=range;
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=dataData.dVal;
});
this.$emit("change",{
result:result,
value:value,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let col1Index=arr[0],col2Index=arr[1],col3Index=arr[2]||0,col4Index=arr[3]||0;
let arr1=[],arr2=[],arr3=[],arr4=[];
let col1,col2,col3,col4,obj={};
let result="",value=[];
arr1=this.options;
arr2=(arr1[col1Index]&&arr1[col1Index][this.nodeChild])||arr1[arr1.length-1][this.nodeChild]||[];
col1=arr1[col1Index]||arr1[arr1.length-1]||{};
col2=arr2[col2Index]||arr2[arr2.length-1]||{};
if(this.level>2){
arr3=(arr2[col2Index]&&arr2[col2Index][this.nodeChild])||arr2[arr2.length-1][this.nodeChild];
col3=arr3[col3Index]||arr3[arr3.length-1]||{};
}
if(this.level>3){
arr4=(arr3[col3Index]&&arr3[col3Index][this.nodeChild])||arr3[arr3.length-1][this.nodeChild]||[];
col4=arr4[col4Index]||arr4[arr4.length-1]||{};
}
switch(this.level){
case 2:
obj={
col1,
col2
}
this.range=[arr1,arr2];
result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')}`;
value=[col1[this.nodeVal]||'',col2[this.nodeVal]||''];
break;
case 3:
obj={
col1,
col2,
col3
}
this.range=[arr1,arr2,arr3];
result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')}`;
value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||''];
break;
case 4:
obj={
col1,
col2,
col3,
col4
}
this.range=[arr1,arr2,arr3,arr4];
result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')+(col4[this.nodeKey]||'')}`;
value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||'',col4[this.nodeVal]||''];
break;
}
this.checkObj=obj;
this.pickVal=arr;
this.$emit("change",{
result:result,
value:value,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
This diff is collapsed.
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column v-if="!hideArea">
<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
import areaData from "./areadata/areadata.js"
export default {
data() {
return {
pickVal:[],
range:{
provinces:[],
citys:[],
areas:[]
},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[Array,String],
default:""
},
defaultType:{
type:String,
default:"label"
},
hideArea:{
type:Boolean,
default:false
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
getData(){
//用来处理初始化数据
let provinces=areaData;
let dVal=[];
let value=this.value;
let a1=value[0];//默认值省
let a2=value[1];//默认值市
let a3=value[2];//默认值区、县
let province,city,area;
let provinceIndex=provinces.findIndex((v)=>{
return v[this.defaultType]==a1
});
provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
let citys=provinces[provinceIndex].children;
let cityIndex=citys.findIndex((v)=>{
return v[this.defaultType]==a2
});
cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
let areas=citys[cityIndex].children;
let areaIndex=areas.findIndex((v)=>{
return v[this.defaultType]==a3;
});
areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
province=provinces[provinceIndex];
city=citys[cityIndex];
area=areas[areaIndex];
let obj=this.hideArea?{
province,
city
}:{
province,
city,
area
}
return this.hideArea?{
provinces,
citys,
dVal,
obj
}:{
provinces,
citys,
areas,
dVal,
obj
}
},
initData(){
let dataData=this.getData();
let provinces=dataData.provinces;
let citys=dataData.citys;
let areas=this.hideArea?[]:dataData.areas;
let obj=dataData.obj;
let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
this.range=this.hideArea?{
provinces,
citys,
}:{
provinces,
citys,
areas
};
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=dataData.dVal;
});
this.$emit("change",{
result:result,
value:value,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
let provinces=areaData;
let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
let province=provinces[provinceIndex]||provinces[provinces.length-1],
city=citys[cityIndex]||[citys.length-1],
area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
let obj=this.hideArea?{
province,
city
}:{
province,
city,
area
}
if(this.checkObj.province.label!=province.label){
//当省更新的时候需要刷新市、区县的数据;
this.range.citys=citys;
if(!this.hideArea){
this.range.areas=areas;
}
}
if(this.checkObj.city.label!=city.label){
//当市更新的时候需要刷新区县的数据;
if(!this.hideArea){
this.range.areas=areas;
}
}
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=arr;
})
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
this.$emit("change",{
result:result,
value:value,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range" :key="index">{{item[nodeKey]}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
props:{
itemHeight:{
type:String,
default:"44px"
},
options:{
type:[Array,Object],
default(){
return []
}
},
value:{
type:String,
default:""
},
defaultType:{
type:String,
default:"label"
},
defaultProps:{
type:Object,
default(){
return{
label:"label",
value:"value"
}
}
}
},
data() {
return {
pickVal:[]
};
},
computed:{
nodeKey(){
return this.defaultProps.label;
},
nodeValue(){
return this.defaultProps.value;
},
range(){
return this.options
}
},
watch:{
value(val){
if(this.options.length!=0){
this.initData();
}
},
options(val){
this.initData();
}
},
created() {
if(this.options.length!=0){
this.initData();
}
},
methods:{
initData(){
let dVal=this.value||"";
let data=this.range;
let pickVal=[0];
let cur=null;
let label="";
let value,idx;
if(this.defaultType==this.nodeValue){
value=data.find((v)=>v[this.nodeValue]==dVal);
idx=data.findIndex((v)=>v[this.nodeValue]==dVal);
}else{
value=data.find((v)=>v[this.nodeKey]==dVal);
idx=data.findIndex((v)=>v[this.nodeKey]==dVal);
}
pickVal=[idx!=-1?idx:0];
this.$nextTick(()=>{
this.pickVal=pickVal;
});
if(this.defaultType==this.nodeValue){
this.$emit("change",{
result:value?value[this.nodeKey]:data[0][this.nodeKey],
value:dVal||data[0][this.nodeKey],
obj:value?value:data[0]
})
}else{
this.$emit("change",{
result:dVal||data[0][this.nodeKey],
value:value?value[this.nodeValue]:data[0][this.nodeValue],
obj:value?value:data[0]
})
}
},
handlerChange(e){
let arr=[...e.detail.value];
let pickVal=[arr[0]||0];
let data=this.range;
let cur=data[arr[0]];
let label="";
let value="";
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:cur[this.nodeKey],
value:cur[this.nodeValue],
obj:cur
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.dates" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item.label}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:{},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[String,Array,Number],
default:""
},
current:{//是否默认选中当前日期
type:Boolean,
default:false
},
expand:{
type:[Number,String],
default:30
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
formatNum(n){
return (Number(n)<10?'0'+Number(n):Number(n)+'');
},
checkValue(value){
let strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,example="2019-12-12 18:05:00或者2019-12-12 18:05";
if(!strReg.test(value)){
console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
}
return strReg.test(value);
},
resetData(year,month,day){
let curDate=this.getCurrenDate();
let curFlag=this.current;
let curYear=curDate.curYear;
let curMonth=curDate.curMonth;
let curDay=curDate.curDay;
let curHour=curDate.curHour;
let months=[],days=[],sections=[];
let disabledAfter=this.disabledAfter;
let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
for(let month=1;month<=monthsLen;month++){
months.push(this.formatNum(month));
};
for(let day=1;day<=daysLen;day++){
days.push(this.formatNum(day));
}
return{
months,
days,
sections
}
},
getData(dVal){
//用来处理初始化数据
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let dates=[],hours=[],minutes=[];
let curDate=new Date();
let curYear=curDate.getFullYear();
let curMonth=curDate.getMonth();
let curDay=curDate.getDate();
let aDate=new Date(curYear,curMonth,curDay);
for(let i=0;i<this.expand*1;i++){
aDate=new Date(curYear,curMonth,curDay+i);
let year=aDate.getFullYear();
let month=aDate.getMonth()+1;
let day=aDate.getDate();
let label=year+"-"+this.formatNum(month)+"-"+this.formatNum(day);
switch(i){
case 0:
label="今天";
break;
case 1:
label="明天";
break;
case 2:
label="后天";
break
}
dates.push({
label:label,
value:year+"-"+this.formatNum(month)+"-"+this.formatNum(day)
})
};
for(let i=0;i<24;i++){
hours.push({
label:this.formatNum(i),
value:this.formatNum(i)
})
}
for(let i=0;i<60;i++){
minutes.push({
label:this.formatNum(i),
value:this.formatNum(i)
})
}
return {
dates,
hours,
minutes
}
},
getDefaultDate(){
let value=this.value;
let reg=/-/g;
let defaultDate=value?new Date(value.replace(reg,"/")):new Date();
let defaultYear=defaultDate.getFullYear();
let defaultMonth=defaultDate.getMonth()+1;
let defaultDay=defaultDate.getDate();
let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
return{
defaultDate,
defaultYear,
defaultMonth,
defaultDay,
defaultDays
}
},
getDval(){
let value=this.value;
let dVal=null;
let aDate=new Date();
let year=this.formatNum(aDate.getFullYear());
let month=this.formatNum(aDate.getMonth()+1);
let day=this.formatNum(aDate.getDate());
let date=this.formatNum(year)+"-"+this.formatNum(month)+"-"+this.formatNum(day);
let hour=aDate.getHours();
let minute=aDate.getMinutes();
if(value){
let flag=this.checkValue(value);
if(!flag){
dVal=[date,hour,minute]
}else{
let v=value.split(" ");
dVal=[v[0],...v[1].split(":")];
}
}else{
dVal=[date,hour,minute]
}
return dVal;
},
initData(){
let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
let dates=[],hours=[],minutes=[];
let dVal=[],pickVal=[];
let value=this.value;
let reg=/-/g;
let range={};
let result="",full="",date,hour,minute,obj={};
let defaultDate=this.getDefaultDate();
let defaultYear=defaultDate.defaultYear;
let defaultMonth=defaultDate.defaultMonth;
let defaultDay=defaultDate.defaultDay;
let defaultDays=defaultDate.defaultDays;
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let dateData=[];
dVal=this.getDval();
dateData=this.getData(dVal);
dates=dateData.dates;
hours=dateData.hours;
minutes=dateData.minutes;
pickVal=[
dates.findIndex(n => n.value == dVal[0])!=-1?dates.findIndex(n => n.value == dVal[0]):0,
hours.findIndex(n => n.value == dVal[1])!=-1?hours.findIndex(n => n.value == dVal[1]):0,
minutes.findIndex(n => n.value == dVal[2])!=-1?minutes.findIndex(n => n.value == dVal[2]):0,
];
range={dates,hours,minutes};
date=dVal[0]?dVal[0]:dates[0].label;
hour=dVal[1]?dVal[1]:hours[0].label;
minute=dVal[2]?dVal[2]:minutes[0].label;
result=full=`${date+' '+hour+':'+minute}`;
obj={
date,
hour,
minute
}
this.range=range;
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:result,
value:full,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let data=this.range;
let date="",hour="",minute="";
let result="",full="",obj={};
let disabledAfter=this.disabledAfter;
date=(arr[0]||arr[0]==0)?data.dates[arr[0]]||data.dates[data.dates.length-1]:"";
hour=(arr[1]||arr[1]==0)?data.hours[arr[1]]||data.hours[data.hours.length-1]:"";
minute=(arr[2]||arr[2]==0)?data.minutes[arr[2]]||data.minutes[data.minutes.length-1]:"";
result=full=`${date.label+' '+hour.label+':'+minute.label+':00'}`;
obj={
date,
hour,
minute
}
this.checkObj=obj;
this.$emit("change",{
result:result,
value:full,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column v-if="second">
<view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:{},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[String,Array,Number],
default:""
},
current:{//是否默认选中当前日期
type:Boolean,
default:false
},
second:{
type:Boolean,
default:true
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
formatNum(n){
return (Number(n)<10?'0'+Number(n):Number(n)+'');
},
checkValue(value){
let strReg=/^\d{2}:\d{2}:\d{2}$/,example="18:00:05";
if(!strReg.test(value)){
console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
}
return strReg.test(value);
},
resetData(year,month,day,hour,minute){
let curDate=this.getCurrenDate();
let curFlag=this.current;
let curHour=curDate.curHour;
let curMinute=curDate.curMinute;
let curSecond=curDate.curSecond;
for(let hour=0;hour<24;hour++){
hours.push(this.formatNum(hour));
}
for(let minute=0;minute<60;minute++){
minutes.push(this.formatNum(minute));
}
for(let second=0;second<60;second++){
seconds.push(this.formatNum(second));
}
return{
hours,
minutes,
seconds
}
},
getData(curDate){
//用来处理初始化数据
let hours=[],minutes=[],seconds=[];
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let fields=this.fields;
let curHour=curDate.curHour;
let curMinute=curDate.curMinute;
let curSecond=curDate.curSecond;
for(let hour=0;hour<24;hour++){
hours.push(this.formatNum(hour));
}
for(let minute=0;minute<60;minute++){
minutes.push(this.formatNum(minute));
}
for(let second=0;second<60;second++){
seconds.push(this.formatNum(second));
}
return this.second?{
hours,
minutes,
seconds
}:{
hours,
minutes
}
},
getCurrenDate(){
let curDate=new Date();
let curHour=curDate.getHours();
let curMinute=curDate.getMinutes();
let curSecond=curDate.getSeconds();
return this.second?{
curHour,
curMinute,
curSecond
}:{
curHour,
curMinute,
}
},
getDval(){
let value=this.value;
let fields=this.fields;
let dVal=null;
let aDate=new Date();
let hour=this.formatNum(aDate.getHours());
let minute=this.formatNum(aDate.getMinutes());
let second=this.formatNum(aDate.getSeconds());
if(value){
let flag=this.checkValue(value);
if(!flag){
dVal=[hour,minute,second]
}else{
dVal=value?value.split(":"):[];
}
}else{
dVal=this.second?[hour,minute,second]:[hour,minute]
}
return dVal;
},
initData(){
let curDate=this.getCurrenDate();
let dateData=this.getData(curDate);
let pickVal=[],obj={},full="",result="",hour="",minute="",second="";
let dVal=this.getDval();
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let hours=dateData.hours;
let minutes=dateData.minutes;
let seconds=dateData.seconds;
let defaultArr=this.second?[
dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0,
dVal[2]&&seconds.indexOf(dVal[2])!=-1?seconds.indexOf(dVal[2]):0
]:[
dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0
];
pickVal=disabledAfter?defaultArr:(curFlag?(this.second?[
hours.indexOf(this.formatNum(curDate.curHour)),
minutes.indexOf(this.formatNum(curDate.curMinute)),
seconds.indexOf(this.formatNum(curDate.curSecond)),
]:[
hours.indexOf(this.formatNum(curDate.curHour)),
minutes.indexOf(this.formatNum(curDate.curMinute))
]):defaultArr);
this.range=dateData;
this.checkObj=obj;
hour=dVal[0]?dVal[0]:hours[0];
minute=dVal[1]?dVal[1]:minutes[0];
if(this.second)second=dVal[2]?dVal[0]:seconds[0];
result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:result,
value:full,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let data=this.range;
let hour="",minute="",second="",result="",full="",obj={};
hour=(arr[0]||arr[0]==0)?data.hours[arr[0]]||data.hours[data.hours.length-1]:"";
minute=(arr[1]||arr[1]==0)?data.minutes[arr[1]]||data.minutes[data.minutes.length-1]:"";
if(this.second)second=(arr[2]||arr[2]==0)?data.seconds[arr[2]]||data.seconds[data.seconds.length-1]:"";
obj=this.second?{
hour,
minute,
second
}:{
hour,
minute
};
this.checkObj=obj;
result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
this.$emit("change",{
result:result,
value:full,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
.w-picker-flex2{
flex:2;
}
.w-picker-flex1{
flex:1;
}
.w-picker-view {
width: 100%;
height: 476upx;
overflow: hidden;
background-color: rgba(255, 255, 255, 1);
z-index: 666;
}
.d-picker-view{
height: 100%;
}
.w-picker-item {
text-align: center;
width: 100%;
height: 88upx;
line-height: 88upx;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30upx;
}
\ No newline at end of file
<template name="w-picker">
<view class="w-picker" :key="createKey" :data-key="createKey">
<view class="mask" :class="{'visible':visible}" @tap="onCancel" @touchmove.stop.prevent catchtouchmove="true"></view>
<view class="w-picker-cnt" :class="{'visible':visible}">
<view class="w-picker-header" @touchmove.stop.prevent catchtouchmove="true">
<text @tap.stop.prevent="onCancel">取消</text>
<slot></slot>
<text :style="{'color':themeColor}" @tap.stop.prevent="pickerConfirm">确定</text>
</view>
<date-picker
v-if="mode=='date'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:fields="fields"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</date-picker>
<range-picker
v-if="mode=='range'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</range-picker>
<half-picker
v-if="mode=='half'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</half-picker>
<shortterm-picker
v-if="mode=='shortTerm'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
expand="60"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</shortterm-picker>
<time-picker
v-if="mode=='time'"
class="w-picker-wrapper"
:value="value"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
:second="second"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</time-picker>
<selector-picker
v-if="mode=='selector'"
class="w-picker-wrapper"
:value="value"
:item-height="itemHeight"
:options="options"
:default-type="defaultType"
:default-props="defaultProps"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</selector-picker>
<region-picker
v-if="mode=='region'"
class="w-picker-wrapper"
:value="value"
:hide-area="hideArea"
:default-type="defaultType"
:item-height="itemHeight"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</region-picker>
<linkage-picker
v-if="mode=='linkage'"
class="w-picker-wrapper"
:value="value"
:options="options"
:level="level"
:default-type="defaultType"
:default-props="defaultProps"
:item-height="itemHeight"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</linkage-picker>
</view>
</view>
</template>
<script>
import datePicker from "./date-picker.vue"
import rangePicker from "./range-picker.vue"
import halfPicker from "./half-picker.vue"
import shorttermPicker from "./shortterm-picker.vue"
import timePicker from "./time-picker.vue"
import selectorPicker from "./selector-picker.vue"
import regionPicker from "./region-picker.vue"
import linkagePicker from "./linkage-picker.vue"
export default {
name:"w-picker",
components:{
datePicker,
rangePicker,
halfPicker,
timePicker,
selectorPicker,
shorttermPicker,
regionPicker,
linkagePicker
},
props:{
mode:{
type:String,
default:"date"
},
value:{//默认值
type:[String,Array,Number],
default:""
},
current:{//是否默认显示当前时间,如果是,传的默认值将失效
type:Boolean,
default:false
},
themeColor:{//确认按钮主题颜色
type:String,
default:"#f5a200"
},
fields:{//日期颗粒度:year、month、day、hour、minute、second
type:String,
default:"date"
},
disabledAfter:{//是否禁用当前之后的日期
type:Boolean,
default:false
},
second:{//time-picker是否显示秒
type:Boolean,
default:true
},
options:{//selector,region数据源
type:[Array,Object],
default(){
return []
}
},
defaultProps:{//selector,linkagle字段转换配置
type:Object,
default(){
return{
label:"label",
value:"value",
children:"children"
}
}
},
defaultType:{
type:String,
default:"label"
},
hideArea:{//mode=region时,是否隐藏区县列
type:Boolean,
default:false
},
level:{
//多级联动层级,表示几级联动,区间2-4;
type:[Number,String],
default:2
},
timeout:{//是否开启点击延迟,当快速滚动 还没有滚动完毕点击关闭时得到的值是不准确的
type:Boolean,
default:false
},
expand:{//mode=shortterm 默认往后拓展天数
type:[Number,String],
default:30
},
startYear:{
type:[String,Number],
default:1970
},
endYear:{
type:[String,Number],
default:new Date().getFullYear()
}
},
created() {
this.createKey=Math.random()*1000;
},
data() {
return {
itemHeight:`height: ${uni.upx2px(88)}px;`,
visible:false,
result:{},
confirmFlag:true
};
},
methods:{
touchStart(){
if(this.timeout){
this.confirmFlag=false;
}
},
touchEnd(){
if(this.timeout){
setTimeout(()=>{
this.confirmFlag=true;
},500)
}
},
handlerChange(res){
let _this=this;
this.result={...res};
},
show(){
this.visible=true;
},
hide(){
this.visible=false;
},
onCancel(res){
this.visible=false;
this.$emit("cancel");
},
pickerConfirm(){
if(!this.confirmFlag){
return;
};
this.$emit("confirm",this.result);
this.visible=false;
}
}
}
</script>
<style lang="scss">
.w-picker-item {
text-align: center;
width: 100%;
height: 88upx;
line-height: 88upx;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30upx;
}
.w-picker{
z-index: 888;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.mask.visible{
visibility: visible;
opacity: 1;
}
.w-picker-cnt {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 3000;
background-color: #fff;
}
.w-picker-cnt.visible {
transform: translateY(0);
}
.w-picker-header{
display: flex;
align-items: center;
padding: 0 30upx;
height: 88upx;
background-color: #fff;
position: relative;
text-align: center;
font-size: 32upx;
justify-content: space-between;
border-bottom: solid 1px #eee;
.w-picker-btn{
font-size: 30upx;
}
}
.w-picker-hd:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
}
</style>
......@@ -44,7 +44,11 @@
},
{
"path": "pages/order/index"
}
},
{
"path" : "pages/order/index/index"
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
......
This diff is collapsed.
<template>
<view class="footStyle" :style="{'height':contentHeight}">
<view class="footTop">
<!-- <view class="footTop">
<view class="footTop_c" >
<view class="footTop_item" :style="{'background':mainColor}" >
<Text style='color: #fff;'>浏览记录</Text>
......@@ -10,7 +10,7 @@
</view>
</view>
</view>
</view> -->
<view class="footTop_content">
<view style="width: 94%;margin-left: 3%;">
<u-tabs
......@@ -29,7 +29,7 @@
</view>
<view v-if="g.length > 0"
style="
height: calc(100vh - 110px);
height: calc(100vh - 40px);
width: calc(100vw);
overflow: hidden;
padding-top: 10px;
......@@ -40,21 +40,27 @@
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }">
<view class="contentBox">
<view class="cBox_item" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx.goods_id)">
<view class="good-img">
<image :src="cx.goodsWarehouse.cover_pic" style="width: 100%; height: 100%;" />
</view>
<view class="good-info">
<Text class='good-name'>{{cx.goodsWarehouse.name}}</Text>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
<Text :style="{'color':mainColor}">¥{{cx.price}}</Text>
<u-icon name="ellipsis" color="#c8c9cc" size="40" @click='operation(cx)'></u-icon>
<view style="display: flex;flex-direction: column;align-items: center;">
<view v-for="(item, index) in g" :key="index">
<Text style='padding-left: 2.5%;margin: 20rpx 0;color: #c8c9cc;'>{{item.date}}</Text>
<view class="contentBox">
<view class="cBox_item" v-for="(cx, ci) in item.goods" :key="ci" >
<view class="good-img" @click="clickHandler(cx.goods_id)">
<image :src="cx.goodsWarehouse.cover_pic" style="width: 100%; height: 100%;" />
</view>
<view class="good-info">
<Text class='good-name' @click="clickHandler(cx.goods_id)">{{cx.goodsWarehouse.name}}</Text>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
<Text :style="{'color':mainColor}">¥{{cx.price}}</Text>
<u-icon name="ellipsis" color="#c8c9cc" size="40" @click='operation(cx,index,ci)'></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<u-divider
contentPosition="center"
......@@ -68,12 +74,57 @@
<u-loading mode="flower" size="48">></u-loading>
<Text style='color: #fff;margin-top: 10rpx;'>加载中...</Text>
</view>
<w-picker
mode="range"
startYear="2017"
endYear="2030"
:value="rangeVal"
:current="true"
@confirm="onConfirm($event,'range')"
@cancel="onCancel"
ref="range"
></w-picker>
<!-- 自定义弹窗 -->
<view class="Popup" v-show='Popup' @click="Popup=false"></view>
<view class="PopupBox" v-show='Popup'>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;height: 120px;">
<view class="Popupicon">
<view style="display: flex;flex-direction: column;align-items: center;" @click="Collection">
<view class="icon">
<u-icon name="like-o" color="#c8c9cc" size="40" ></u-icon>
</view>
<Text style='margin-top: 10rpx;'>收藏</Text>
</view>
<view style="display: flex;flex-direction: column;align-items: center;" @click="Pdelete">
<view class="icon">
<u-icon name="delete" color="#c8c9cc" size="40" ></u-icon>
</view>
<Text style='margin-top: 10rpx;'>删除</Text>
</view>
</view>
</view>
<view style="display: flex;align-items: center;justify-content: center;width: 100%;height: 50px;border-top: 1px solid #c8c9cc;" @click="Popup=false">
<Text>取消</Text>
</view>
</view>
<u-modal
v-model="showModal"
content="是否删除该足迹?"
:show-cancel-button="true"
:show-title="false"
@confirm="confirm"
></u-modal>
<u-toast ref="uToast" />
</view>
</template>
<script>
import auth from "../../../components/auth/index.vue";
import wPicker from "@/components/w-picker/w-picker.vue"
export default {
data() {
return {
......@@ -97,10 +148,16 @@
g:[],
page_count:1,
isover: false,
Popup:false,
goodId:'',
showModal:false,
index:0,
ci:0
}
},
components:{
auth
auth,
wPicker
},
created(){
this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
......@@ -123,29 +180,22 @@
this.loading=true
this.isover = false;
this.loading2 = true;
let h=this.apiheader()
this.request(
{
url: "",
header:{
'X-Access-Token': 'Tc8G75W5llGY_UPwlHBscYEPs1a32cDJ',
'X-App-Platform': 'wxapp',
'X-App-Version':'4.2.47',
'X-Form-Id-List': JSON.stringify([]),
'X-Requested-With': 'XMLHttpRequest',
'X-User-Id': 21269
},
header:h,
data: {
r: "api/footprint/footprint",
page: this.page,
start_time: this.start_time,
end_time: this.end_time,
page: this.page,
}
},
res => {
if(res.list.length>0){
this.g = this.g.concat(res.list[0].goods);
this.g = this.g.concat(res.list);
this.page_count = res.pagination.page_count;
if (this.page_count == 1) {
this.isover = true;
......@@ -160,7 +210,7 @@
lower(e) {
if (this.page < this.page_count) {
console.log(this.loading2)
if (!this.loading2) {
this.page++;
this.init();
......@@ -183,13 +233,34 @@
this.fun_date(7)
}else if(index==3){
this.fun_date(30)
}else if(index== 4){
this.$refs['range'].show();
}
},
billsummary(){
console.log('跳转菜单总结')
},
operation(e){
console.log(e)
operation(e,index,ci){
this.goodId = e;
this.index = index;
this.ci = ci;
this.Popup= true
},
onConfirm(res){
console.log(res)
let start = res.obj.fyear + "-" + res.obj.fmonth + "-" + res.obj.fday+' '+ '00:00:00';
let end = res.obj.fyear + "-" + res.obj.fmonth + "-" + res.obj.fday+' '+ '23:59:59';
this.start_time= start;
this.end_time=end;
this.page = 1
this.g =[]
this.init()
},
onCancel(){
},
fun_date(num){
let that= this
......@@ -220,6 +291,53 @@
url: '/pages/goods/goods?id='+id,
});
},
Collection(){
let h=this.apiheader()
this.Popup= false;
this.request(
{
url: "",
data: {
r: "api/user/favorite-add",
goods_id: this.goodId.goods_id,
},
header:h
},
(res) => {
this.$refs.uToast.show({title: res.msg,})
}
);
},
Pdelete(){
this.showModal = true;
},
confirm(){
this.showModal = false
this.Popup= false;
let h = this.apiheader();
// h['content-type']='application/x-www-form-urlencoded'
this.request(
{
url: "",
// method: "POST",
header: h,
data: {
r: "api/footprint/footprint-del",
id: this.goodId.id
}
},
res => {
this.g[this.index].goods.splice(this.ci,1)
this.$refs.uToast.show({title: res.msg,})
}
);
}
}
}
......@@ -261,7 +379,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
position: fixed;
left: 50%;
top:30%;
margin-left: -100rpx;
......@@ -305,4 +423,44 @@
font-size: 26rpx;
margin: 14rpx 0;
}
.footStyle .Popup{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top:0;
z-index: 99;
background: rgba(0,0,0,0.3);
}
.footStyle .PopupBox{
width: 100%;
height: 170px;
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
}
.footStyle .Popupicon{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.footStyle .Popupicon .icon{
width: 50px;
height: 50px;
border-radius: 6rpx;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #c8c9cc;
margin: 0 20rpx;
}
</style>
<template>
<view class="orderindexStyle" :style="{'height':contentHeight}">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color='mainColor' bg-color='#f3f4f6'></u-tabs>
<u-empty v-if="g.length==0" text="暂无相关订单" mode="order"></u-empty>
<view v-if="g.length > 0"
style="
height: calc(100vh - 50px);
width: calc(100vw);
overflow: hidden;
padding-top: 10px;
">
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }">
<view class="orderList">
<view class="listBox" v-for="(item, index) in g" :key="index">
<view class="listBox_t">
<Text >订单号:{{item.order_no}}</Text>
<Text>{{item.status_text}}</Text>
</view>
<view class="listBox_c">
<template v-if="item.detail.length == 1">
<view v-for="(cx, ci) in item.detail" :key="ci" class="box_bottom">
<image :src="cx.goods_info.pic_url" style="width: 75px; height: 75px" />
<view style="width: calc(100% - 85px);height: 75px;display: flex;flex-direction: column;margin-left: 10px;justify-content: space-between;">
<Text class='topic_cont_text' >{{cx.goods_info.name}}</Text>
<view style='width: calc(100% - 85px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>
<view v-for="(attr, index2) in cx.goods_info.attr_list" :key="index2" >
<Text style='color: #A0A09D;font-size: 24rpx;margin-right: 5rpx;'>规格:{{attr.attr_name}}</Text>
</view>
</view>
<view style="width: 100%;display: flex;flex-direction: row;align-items:center;justify-content: space-between;">
<Text style='color: #A0A09D;font-size: 24rpx;'>X{{cx.num}}</Text>
<Text style='font-size: 24rpx;'>{{cx.total_price}}</Text>
</view>
</view>
</view>
</template>
<template v-else>
<view class="goodboxmore">
<view class="good-list">
<view style="white-space: nowrap">
<image
v-for="(y, yi) in item.detail"
:key="yi"
:src="y.goods_info.pic_url"
mode="aspectFill"
class="item"
/>
</view>
</view>
<view class="infos">
<view class="text">{{ item.detail.length }}</view>
<u-icon
name="ellipsis"
size="36"
@click="showGoodListHandler(index)"
></u-icon>
</view>
</view>
</template>
<Text style='font-size: 32rpx;text-align: right;width: 100%;'>¥{{item.total_price}}</Text>
<!-- TODO 样式结构修改-->
<view class="handle">
<view class="handle_item" @click="cancel(item,index)">
<Text>取消</Text>
</view>
<view class="handle_item">
<Text>付款</Text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 加载中 -->
<view class="loading" v-if="loading">
<u-loading mode="flower" size="48">></u-loading>
<Text style='color: #fff;margin-top: 10rpx;'>加载中...</Text>
</view>
<!-- 取消提示 -->
<u-modal
v-model="showModal"
content="是否取消订单?"
:show-cancel-button="true"
:show-title="false"
@confirm="confirm"
></u-modal>
<u-toast ref="uToast" />
<good-list :list="goodData" v-if="showGoodList" @close="closeGoodListHandler"></good-list>
</view>
</template>
<script>
import goodList from '@/components/goods/order-good-list2'
export default {
components:{
goodList
},
data() {
return {
current: 0,
list: [{name: '全部'}, {name: '待付款'},{name: '待发货'},{name: '待收货'},{name: '待评价'},],
mainColor: "",
contentHeight:0,
page:1,
page_count:0,
g:[],
loading:false,
showModal:false,
item:'',
index:0,
goodData:[],
showGoodList:false,
};
},
created(){
this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
this.mainColor = this.$uiConfig.mainColor;
},
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
this.current = option.status;
this.loading = true;
this.init()
},
methods: {
change(index){
this.current = index;
this.page= 1;
this.g = [];
this.loading = true;
this.init()
},
init(){
let h=this.apiheader()
this.request(
{
url: "",
header:h,
data: {
r: "api/order/list",
status:this.current,
page: this.page,
}
},
res => {
this.loading = false;
this.g = res.data.list;
}
);
},
cancel(e,index){
this.showModal=true;
this.index=index;
this.item = e;
},
confirm(){
this.showModal = false
let h = this.apiheader();
// h['content-type']='application/x-www-form-urlencoded'
this.request(
{
url: "",
// method: "POST",
header: h,
data: {
r: "api/order/cancel",
id: this.item.id
}
},
res => {
this.$refs.uToast.show({title: res.msg,})
this.g.splice(this.index,1)
}
);
},
closeGoodListHandler(){
this.goodData=[]
this.showGoodList=false
},
showGoodListHandler(i){
this.goodData=this.g[i].detail
console.log(this.goodData)
this.showGoodList=true
},
}
};
</script>
<style>
.orderindexStyle{
width: 100%;
height: 100%;
background: #f3f4f6;
}
.orderindexStyle .orderList{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.orderList .listBox{
width: 94%;
background: #fff;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
margin-bottom: 30rpx;
}
.orderList .listBox .listBox_t{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
margin: 10rpx 0;
}
.orderList .listBox .listBox_c{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.orderList .listBox .box_bottom{
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-bottom: 18rpx;
}
.orderList .handle{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-top: 10rpx;
}
.orderList .handle_item{
padding:0 24rpx;
border: 1px solid #c8c9cc;
margin-left: 20rpx;
height: 50rpx;
border-radius: 25rpx;
line-height: 50rpx;
}
.orderindexStyle .loading{
width: 200rpx;
height: 200rpx;
background: #000000;
opacity: 0.7;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
top:30%;
margin-left: -100rpx;
z-index: 999;
}
.listBox_c .goodboxmore {
margin-bottom: 20px;
display: flex;
width: 100%;
}
.listBox_c .goodboxmore .good-list {
display: flex;
flex: 1;
overflow-x: auto;
}
.listBox_c .goodboxmore .good-list .item {
width: 70px;
height: 70px;
border-radius: 5px;
margin-right: 10px;
}
.listBox_c .goodboxmore .infos {
display: flex;
width: 80px;
}
.listBox_c .goodboxmore .infos .text {
text-align: center;
font-size: 13px;
width: 57px;
margin-right: 5px;
line-height: 70px;
}
.listBox_c .left{
flex: 1;
color: #232323;
font-size: 16px;
flex: 1;
font-family: "oswald";
}
.listBox_c .small {
font-size: 13px;
}
.listBox_c .topic_cont_text{
font-size: 26rpx;
max-height: 70rpx;
overflow: hidden;
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
}
</style>
\ No newline at end of file
......@@ -42,7 +42,14 @@
</view>
</view>
<view style="width: 1rpx;height: 60rpx;background: #EEEEEE;"></view>
<view class="account_bar_item">
<Text :style="{'color':secondary}">{{user_info.balance}}</Text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.balance.icon' style="width: 26rpx;height: 26rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.account_bar.balance.text}}</Text>
</view>
</view>
<view style="width: 1rpx;height: 60rpx;background: #EEEEEE;"></view>
<view class="account_bar_item">
<Text :style="{'color':secondary}">{{user_info.coupon}}</Text>
<view class="footprint_item_bottom">
......@@ -199,7 +206,7 @@
(res) => {
uni.hideNavigationBarLoading()
this.isloading = false;
console.log(res.data)
this.meueData = res.data.config;
this.user_info = res.data.user_info;
}
......
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