静态页完成
parent
5a2e999eae
commit
35dad8f61c
|
|
@ -79,6 +79,7 @@ image{vertical-align: middle;}
|
|||
.fe{justify-content: flex-end;}
|
||||
.ae{align-items: flex-end;}
|
||||
.flexs{flex-shrink: 0;}
|
||||
.disn{display: none;}
|
||||
|
||||
|
||||
.wh42{width: 42rpx;height: 42rpx;}
|
||||
|
|
@ -87,7 +88,7 @@ image{vertical-align: middle;}
|
|||
button:after{content: none!important;}
|
||||
.borbot{border-bottom: 2rpx solid #EEEEEE;}
|
||||
.borbot:last-child{border-bottom: none;}
|
||||
.bbot{border-bottom: 2rpx solid #EEEEEE;}
|
||||
.bbot{border-bottom: 2rpx solid #f0f0f0;}
|
||||
.tbot{border-top: 2rpx solid #EEEEEE;}
|
||||
.borbot-df{border: 2rpx solid #DFDFDF;}
|
||||
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3180711 */
|
||||
src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
|
||||
src: url('https://at.alicdn.com/t/c/font_3180711_cro3lw1rkdj.woff2?t=1659581262124') format('woff2'),
|
||||
url('https://at.alicdn.com/t/c/font_3180711_cro3lw1rkdj.woff?t=1659581262124') format('woff'),
|
||||
url('https://at.alicdn.com/t/c/font_3180711_cro3lw1rkdj.ttf?t=1659581262124') format('truetype'),
|
||||
url('https://at.alicdn.com/t/c/font_3180711_cro3lw1rkdj.svg?t=1659581262124#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -13,6 +14,66 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-add01:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-add02:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-add03:before {
|
||||
content: "\e63b";
|
||||
}
|
||||
|
||||
.icon-add04:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-shouye:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.icon-back:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-fenlei:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-shop:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-sj-left-top:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-sj-top:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-sj-right-top:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-sj-bottom:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-sj-right-bottom:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-sj-left:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-zsj:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.icon-del:before {
|
||||
content: "\e718";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,3 +76,9 @@
|
|||
color: #FFFFFF;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.tips-box{
|
||||
border: 8rpx solid #a6a7a9;width: 518rpx;height: 314rpx;
|
||||
}
|
||||
.tips-btn{
|
||||
border: 2rpx solid #f37717;color: #f37717;width: 146rpx;height: 54rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 物流信息弹框 start -->
|
||||
<view class="posAll bac5 disjcac" v-if="ifLogistics">
|
||||
<view class="bacf radius12 tips-box pad-zy30 animated" :class="ifAnimated?'bounceInDown':'bounceOutDown'">
|
||||
<view class="bbot pad-s30 pad-x20 tcenter fon28 bold col26">{{tipsTitle}}</view>
|
||||
<view class="fon22 col26 disjcac fc mar-sx30" v-if="showType==1">
|
||||
<view class="disac" style="width: 60%;">
|
||||
<view class="" style="width: 120rpx;">物流公司</view>
|
||||
<view class="">京东物流</view>
|
||||
</view>
|
||||
<view class="disac mar-s20" style="width: 60%;">
|
||||
<view class="" style="width: 120rpx;">物流单号</view>
|
||||
<view class="">JD123456767899</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fon22 col26 disjcac mar-sx40" v-if="showType==2 || showType==3 || showType==4">
|
||||
<image src="/static/public/icon-success.png" mode="" style="width: 56rpx;height: 50rpx;" lazy-load></image>
|
||||
<view class="mar-z20">{{['','','已确认收货','支付成功','签到成功'][showType]}}</view>
|
||||
</view>
|
||||
<view class="fon22 col26 disjcac mar-sx40" v-if="showType==5 || showType==6">
|
||||
<input v-if="showType==5" class="tips-input fon22 radius4 width100 pad-zy20" type="text" maxlength="8" v-model="dynamicObj.content" placeholder="请输入真实姓名" placeholder-style="color:#aaaaaa;">
|
||||
<input v-else class="tips-input fon22 radius4 width100 pad-zy20" type="number" maxlength="11" v-model="dynamicObj.content" placeholder="请输入联系电话" placeholder-style="color:#aaaaaa;">
|
||||
</view>
|
||||
<view class="disjcac" v-if="showType!=5 && showType!=6">
|
||||
<view class="radius26 disjcac fon24 tips-btn" @tap="closePop">关闭</view>
|
||||
</view>
|
||||
<view class="disjcac" v-else>
|
||||
<view class="radius26 disjcac fon24 tips-btn" @tap="closePop">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 物流信息弹框 end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"dynamic-frame",
|
||||
props:{
|
||||
showType:{
|
||||
type:Number | String
|
||||
},
|
||||
tipsTitle:{
|
||||
type:String,
|
||||
default:'提示信息'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ifLogistics:false,//控制蒙层
|
||||
ifAnimated:false,//控制白色弹框内容
|
||||
dynamicObj:{
|
||||
content:''
|
||||
},
|
||||
tempText:''
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
closePop(){
|
||||
if(this.showType==5 || this.showType ==6){
|
||||
if(this.dynamicObj.content){
|
||||
this.executeEv();
|
||||
this.$emit('returnEv',this.dynamicObj);
|
||||
} else {
|
||||
if(this.tempText){
|
||||
this.$toolAll.tools.showToast(this.showType==5?'请输入真实姓名':'请输入电话号码')
|
||||
} else {
|
||||
this.executeEv();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.executeEv();
|
||||
}
|
||||
},
|
||||
// 执行动画
|
||||
executeEv(){
|
||||
this.ifAnimated=false;
|
||||
setTimeout(()=>{
|
||||
this.ifLogistics = false;
|
||||
this.dynamicObj = {
|
||||
content:''
|
||||
}
|
||||
},600)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tips-input{
|
||||
border: 2rpx solid #dcdcdc;
|
||||
height: 54rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<template>
|
||||
<view @click="toggle" class="evan-switch" :class="{'evan-switch--disabled':disabled}" :style="{width:2*size+'px',height:switchHeight,borderRadius:size+'px',backgroundColor:currentValue===activeValue?activeColor:inactiveColor}">
|
||||
<view class="evan-switch__circle" :style="{width:size+'px',height:size+'px',transform:currentValue===activeValue?`translateX(${size}px)`:`translateX(0)`}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EvanSwitch',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#108ee9'
|
||||
},
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: true
|
||||
},
|
||||
inactiveValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
beforeChange: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
extraData: null,
|
||||
contextLevel: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
switchHeight() {
|
||||
// #ifdef APP-NVUE
|
||||
return this.size + 2 + 'px'
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
return this.size + 'px'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
this.currentValue = value
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentValue: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
if (!this.disabled) {
|
||||
if (this.beforeChange && typeof this.beforeChange === 'function') {
|
||||
let context = this
|
||||
for (let i = 0; i < this.contextLevel; i++) {
|
||||
context = context.$options.parent
|
||||
}
|
||||
const result = this.beforeChange(this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue,
|
||||
this.extraData, context)
|
||||
if (typeof result === 'object') {
|
||||
result.then(() => {
|
||||
this.toggleValue()
|
||||
}).catch(() => {})
|
||||
} else if (typeof result === 'boolean' && result) {
|
||||
this.toggleValue()
|
||||
}
|
||||
} else {
|
||||
this.toggleValue()
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleValue() {
|
||||
this.currentValue = this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue
|
||||
this.$emit('input', this.currentValue)
|
||||
this.$emit('change', this.currentValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.evan-switch {
|
||||
position: relative;
|
||||
border-width: 1px;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-style: solid;
|
||||
transition: background-color 0.3s;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: content-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.evan-switch--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.evan-switch__circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
box-shadow: 1px 0 0px 0 rgba(0, 0, 0, 0.05);
|
||||
/* #endif */
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<template>
|
||||
<view class="disac fw bacf" :style="{paddingBottom:itemTop}">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
|
||||
<view class="disjcac" :style="{height: maxHeight+'rpx'}">
|
||||
<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
|
||||
</view>
|
||||
<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'column-function',
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return [
|
||||
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||
{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||
{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||
{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
]
|
||||
}
|
||||
},
|
||||
// 一排显示数量
|
||||
rowNum:{
|
||||
type:String,
|
||||
default:'5'
|
||||
},
|
||||
// 标题颜色
|
||||
titlec:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
// 字体大小
|
||||
fonts:{
|
||||
type:String,
|
||||
default:'28rpx'
|
||||
},
|
||||
// 字体距离图标的距离
|
||||
titleTop:{
|
||||
type:String,
|
||||
default:'20rpx'
|
||||
},
|
||||
// item的顶部距离
|
||||
itemTop:{
|
||||
type:String,
|
||||
default:'30rpx'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// 找图标高度最大值
|
||||
maxHeight() {
|
||||
let arr = [];
|
||||
this.list.forEach(item=>{arr.push(item.iconHeight);})
|
||||
let max = arr.reduce((a,b)=>{return b > a ? b : a})
|
||||
return max;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 列表选择事件
|
||||
chooseGe(url,index) {
|
||||
// 抛出事件
|
||||
this.$emit('chooseGe',{url,index})
|
||||
if(url) {
|
||||
uni.navigateTo({url})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
11
pages.json
11
pages.json
|
|
@ -188,6 +188,15 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "second-level/second-level",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -199,7 +208,7 @@
|
|||
}
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTextStyle": "#FFFFFF",
|
||||
"navigationBarBackgroundColor": "#FFFFFF", //导航栏背景色
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"backgroundColor":"#FFFFFF",//下拉显示出来的窗口的背景色
|
||||
|
|
|
|||
|
|
@ -29,12 +29,15 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 八宫格 -->
|
||||
<view class="pad-zy20">
|
||||
<view class="posir bacf disac fw pad-x50 boxshow2" style="z-index: 1;">
|
||||
<view @tap="chooseFun(index)" class="width25 disjcac fc flexs mar-s50" v-for="(item,index) in funList" :key="index">
|
||||
<view class="">
|
||||
<!-- 图标 -->
|
||||
<image class="radius_100" :src="item.src" mode="" style="width: 86rpx;height: 86rpx;" lazy-load></image>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="fon24 col26 mar-s20">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||
dataList:[],
|
||||
ifloading:false,
|
||||
flag:true
|
||||
|
|
|
|||
|
|
@ -2,7 +2,22 @@
|
|||
<view>
|
||||
<status-container titlet="我的地址" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf"></view>
|
||||
<view class="bacf pad-x30 pad-zy20" v-for="(item,index) in 10" :key="index">
|
||||
<view class="pad-sx30 pad-zy20 disjbac bbot">
|
||||
<view class="fon22 col26">
|
||||
<view class="" style="color: #676767;">四川省成都市武侯区</view>
|
||||
<view class="mar-sx10">成华奥园广场三期6栋1418-1419</view>
|
||||
<view class="">郑珊珊 182****1234</view>
|
||||
</view>
|
||||
<image class="flexs" @tap="$toolAll.tools.goPage(`/pagesB/add-address/add-address?id=${index}`)" src="/static/tabbar/icon-edit.png" mode="aspectFill" style="width: 32rpx;height: 34rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="disjcac pad-s50">
|
||||
<view class="disjcac radius34" style="width: 396rpx;height: 72rpx;background-color: #f37717;color: #FFFFFF;">
|
||||
<view class="icon icon-add04 fon28"></view>
|
||||
<view class="fon26 mar-z10" @tap="$toolAll.tools.goPage('/pagesB/add-address/add-address')">新增收货地址</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -2,23 +2,79 @@
|
|||
<view>
|
||||
<status-container titlet="基本资料" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="pad-zy30 bacf">
|
||||
|
||||
<view class="bacf pad-x50 pad-zy20">
|
||||
<view class="pad-sx30 pad-zy10 disjbac bbot">
|
||||
<view class="fon24 col26">头像</view>
|
||||
<view class="disac">
|
||||
<image class="radius_100" src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" style="width: 92rpx;height: 92rpx;"></image>
|
||||
<view class="icon icon-next fon24 mar-z10" style="color: #7f7f7f;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-sx30 fon24 pad-zy10 disjbac bbot">
|
||||
<view class="col26">昵称</view>
|
||||
<view class="disac">
|
||||
<view class="">zhengsnan</view>
|
||||
<view class="icon icon-next fon24 mar-z10" style="color: #FFFFFF;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-sx30 fon24 pad-zy10 disjbac bbot" @tap="chooseEv(5)">
|
||||
<view class="col26">真实姓名</view>
|
||||
<view class="disac">
|
||||
<view class="">{{realName || '未填写'}}</view>
|
||||
<view class="icon icon-next fon24 mar-z10" style="color: #7f7f7f;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-sx30 fon24 pad-zy10 disjbac bbot mar-x30" @tap="chooseEv(6)">
|
||||
<view class="col26">联系电话</view>
|
||||
<view class="disac">
|
||||
<view class="">{{phone || '未填写'}}</view>
|
||||
<view class="icon icon-next fon24 mar-z10" style="color: #7f7f7f;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
<dynamic-frame ref="refFrame" :showType="showType" :tipsTitle="tipsTitle" @returnEv="returnEv"></dynamic-frame>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicFrame from '@/components/dynamic-frame.vue';
|
||||
export default {
|
||||
components:{
|
||||
dynamicFrame
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
showType:5,
|
||||
tipsTitle:'真实姓名',
|
||||
realName:'',//真实姓名字段
|
||||
phone:'',//联系电话
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
chooseEv(index){
|
||||
this.showType = index;
|
||||
this.tipsTitle = index==5?'真实姓名':'电话号码';
|
||||
this.$refs.refFrame.ifLogistics = true;
|
||||
this.$refs.refFrame.ifAnimated = true;
|
||||
if(this.showType==5){
|
||||
this.$refs.refFrame.dynamicObj.content = this.realName || '';
|
||||
this.$refs.refFrame.tempText = JSON.parse(JSON.stringify(this.realName || ''));
|
||||
}
|
||||
if(this.showType==6){
|
||||
this.$refs.refFrame.dynamicObj.content = this.phone || '';
|
||||
this.$refs.refFrame.tempText = JSON.parse(JSON.stringify(this.phone || ''));
|
||||
}
|
||||
},
|
||||
returnEv(obj){
|
||||
if(this.showType==5){
|
||||
this.realName = obj.content;
|
||||
}
|
||||
if(this.showType==6){
|
||||
this.phone = obj.content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,30 @@
|
|||
<view>
|
||||
<status-container titlet="我的推广" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf"></view>
|
||||
<view class="bacf pad-zy20 boxshow2">
|
||||
<view class="disjcac pad-sx30 bbot">
|
||||
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" style="width: 242rpx;height: 242rpx;" lazy-load></image>
|
||||
</view>
|
||||
<view class="disjbac pad-sx20 pad-zy10">
|
||||
<view class="fon22 col26">推广获取积分</view>
|
||||
<view class="fon26 bold col-e42417">500</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mar-s30 pad-zy20 bacf boxshow2">
|
||||
<view class=" col26 pad-sx20 pad-zy10 disac borbot" v-for="(item,index) in 20" :key="index" @tap="$toolAll.tools.goPage(`/pagesB/second-level/second-level?id=${0}`)">
|
||||
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" class="flexs radius_100 mar-y20" style="width: 78rpx;height: 78rpx;" mode="aspectFill" lazy-load></image>
|
||||
<view class="width100">
|
||||
<view class="disjbac">
|
||||
<view class="fon24 colb">爱健身房</view>
|
||||
<view class="col-e42417 fon24">10</view>
|
||||
</view>
|
||||
<view class="disjbac" style="margin-top: 6rpx;">
|
||||
<view class="fon20" style="color: #747474;">2022.07.03 12:03:03</view>
|
||||
<view class="fon24">扫码注册</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
</view>
|
||||
</status-container>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<view class="fon26">积分：6548</view>
|
||||
<view class="disac pad-zy12 pad-sx8 radius6" style="border: 2rpx solid #adadad;">
|
||||
<image src="/static/tabbar/icon-score-rili.png" mode="" style="width: 24rpx;height: 24rpx;" lazy-load></image>
|
||||
<view class="fon24 mar-z10" style="color: #adadad;">签到</view>
|
||||
<view class="fon24 mar-z10" style="color: #adadad;" @tap="$toolAll.tools.goPage('/pagesA/my-sign/my-sign')">签到</view>
|
||||
</view>
|
||||
</view>
|
||||
<swiper-tab id="tab" :ifBetween="false" :ifPadding="true" :list="tabList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||
|
|
|
|||
|
|
@ -5,19 +5,36 @@
|
|||
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||
</view>
|
||||
<view class="bacf mar-s20 pad-x20">
|
||||
<view @tap="$toolAll.tools.goPage(`/pagesB/order-detail/order-detail?id=${0}`)" class="bbot disac pad30 col26" v-for="(item,index) in 3" :key="index">
|
||||
<image class="flexs mar-y20" src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="width: 192rpx;height: 134rpx;" mode="aspectFill" lazy-load></image>
|
||||
<view class="fon24 width100 disjbac fc" style="height: 134rpx;">
|
||||
<view class="dis width100">
|
||||
<view class="clips2">武术用品商品名称后用品商品名称后 台上传基础动作教学</view>
|
||||
<view class="mar-z50">x3</view>
|
||||
</view>
|
||||
<view class="disjbac width100">
|
||||
<view class="">实付：￥199.00</view>
|
||||
<view @tap.stop="clickBtn(index)" class="fon22 radius26 disjcac" :style="{backgroundColor:['#FFFFF','#f37717','#FFFFF'][index],color:['#f37717','#FFFFFF','#969696'][index],borderColor:['#f37717','#f37717','#c9c9c9'][index]}" style="border: 2rpx solid #f37717;color: #f37717;width: 134rpx;height: 50rpx;">{{['确认收货','去付款','查看物流'][index]}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-zy20">
|
||||
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
<dynamic-frame ref="refFrame" :showType="showType" :tipsTitle="tipsTitle"></dynamic-frame>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
import dynamicFrame from '@/components/dynamic-frame.vue';
|
||||
export default {
|
||||
components:{swiperTab,pitera},
|
||||
components:{swiperTab,pitera,dynamicFrame},
|
||||
data() {
|
||||
return {
|
||||
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||
|
|
@ -29,6 +46,11 @@
|
|||
{title:'待收货'},
|
||||
{title:'已完成'},
|
||||
],
|
||||
showType:-1,
|
||||
tipsTitle:'提示信息',
|
||||
dynamicText:{
|
||||
content:''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -38,6 +60,13 @@
|
|||
// tab点击事件
|
||||
clickTab(index){
|
||||
this.current = index;
|
||||
},
|
||||
// 按钮点击
|
||||
clickBtn(index){
|
||||
this.tipsTitle = index==2?'物流信息':'提示信息';
|
||||
this.showType = [2,3,1][index];
|
||||
this.$refs.refFrame.ifLogistics = true;
|
||||
this.$refs.refFrame.ifAnimated = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,22 @@
|
|||
<view>
|
||||
<view class="" :style="{paddingTop:statusBarHeight+'px'}">
|
||||
<image src="/static/tabbar/my-back.png" mode="" class="width100 posia" style="top: 0;z-index: -1;" lazy-load :style="{height:newHeight+'px'}"></image>
|
||||
<view class="disac colf fon42" style="height: 42px;padding: 0 30rpx;"><view class="icon icon-return fon38 colf"></view>每日签到</view>
|
||||
<view class="disac colf fon42" style="height: 42px;padding: 0 30rpx;"><view class="icon icon-return fon38 colf" @tap="goBack"></view><span @tap="goBack">每日签到</span></view>
|
||||
</view>
|
||||
<view class="disjcac mar-x20">
|
||||
<view class="posir disjcac" @tap="signEv">
|
||||
<image src="/static/public/icon-sign-box.png" mode="" style="width: 166rpx;height: 166rpx;" lazy-load></image>
|
||||
<view class="disjcac fc posia fon38 bold" style="color: #f37c20;">
|
||||
<image class="mar-x10" src="/static/public/icon-sign.png" mode="" style="width: 40rpx;height: 36rpx;" lazy-load></image>
|
||||
{{signText}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-zy30">
|
||||
<view class="disjbac pad-sx30" style="background: linear-gradient(to bottom, #fefcfc 0%, #f8efed 100%);border-radius: 24rpx 24rpx 0 0;">
|
||||
<view class="width33 disjcac fc">
|
||||
<view class="fon20" style="color: #3e3e3e;">我的积分</view>
|
||||
<view class="fon36 bold">99999</view>
|
||||
</view>
|
||||
<view class="width33 disjcac fc" style="border-left: 2rpx solid #f1e8e7;border-right: 2rpx solid #f1e8e7;">
|
||||
<view class="fon20" style="color: #3e3e3e;">我的优惠券(张)</view>
|
||||
<view class="fon36 bold">99</view>
|
||||
</view>
|
||||
<view class="width33 disjcac">
|
||||
<view class="fon24 col-e42417 radius30 flexs disjcac" style="width: 180rpx;height: 60rpx;border: 2rpx solid #e42417;">积分商城</view>
|
||||
<view class="disjbac" style="background: linear-gradient(to bottom, #fefcfc 0%, #f8efed 100%);border-radius: 24rpx 24rpx 0 0;">
|
||||
<view class="disjcac fc fon24 pad-sx30 width100" :class="sameDay==index?'activeDay':''" v-for="(item,index) in signList" :key="index">
|
||||
<view class="">{{item.score}}</view>
|
||||
<view class="mar-s10">{{item.day}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -27,11 +29,16 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<dynamic-frame ref="refFrame" :showType="showType"></dynamic-frame>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicFrame from '@/components/dynamic-frame.vue';
|
||||
export default {
|
||||
components:{
|
||||
dynamicFrame
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||
|
|
@ -46,16 +53,43 @@
|
|||
{price:10,time:'2022.07.23'},
|
||||
{price:10,time:'2022.07.23'},
|
||||
{price:10,time:'2022.07.23'},
|
||||
]
|
||||
],
|
||||
signList:[
|
||||
{score:'+5',day:'7-11'},
|
||||
{score:'+5',day:'7-12'},
|
||||
{score:'+5',day:'7-13'},
|
||||
{score:'+5',day:'7-14'},
|
||||
{score:'+5',day:'7-15'},
|
||||
{score:'+5',day:'7-16'},
|
||||
{score:'+5',day:'7-17'},
|
||||
],
|
||||
sameDay:1,
|
||||
signText:'签到',
|
||||
showType:4
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 返回
|
||||
goBack(){
|
||||
uni.navigateBack({
|
||||
delta:1
|
||||
})
|
||||
},
|
||||
signEv(){
|
||||
this.signText = "已签到";
|
||||
this.$refs.refFrame.ifLogistics = true;
|
||||
this.$refs.refFrame.ifAnimated = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.activeDay{
|
||||
background-color: #f37717;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,25 +2,63 @@
|
|||
<view>
|
||||
<status-container titlet="地址新增" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf"></view>
|
||||
<view class="bacf pad-x30 pad-zy20">
|
||||
<view class="pad20 disjbac bbot">
|
||||
<view class="fon24 col26 flexs width140">姓名</view>
|
||||
<input type="text" class="width100 fon24" placeholder="收货人姓名" placeholder-style="color:#969696;">
|
||||
</view>
|
||||
<view class="pad20 disjbac bbot">
|
||||
<view class="fon24 col26 flexs width140">电话</view>
|
||||
<input type="text" class="width100 fon24" placeholder="收货人手机号" placeholder-style="color:#969696;">
|
||||
</view>
|
||||
<view class="pad20 disjbac bbot">
|
||||
<view class="fon24 col26 flexs width140">地区</view>
|
||||
<input type="text" class="width100 fon24" disabled placeholder="选择省/市/区" placeholder-style="color:#969696;">
|
||||
</view>
|
||||
<view class="pad20 disjbac bbot">
|
||||
<view class="fon24 col26 flexs width140">详细地址</view>
|
||||
<input type="text" class="width100 fon24" placeholder="街道门牌、楼层房间号等信息" placeholder-style="color:#969696;">
|
||||
</view>
|
||||
<view class="pad20 disjbac bbot">
|
||||
<view class="fon24 col26 flexs width140">邮政编码</view>
|
||||
<input type="text" class="width100 fon24" placeholder="邮政编码" placeholder-style="color:#969696;">
|
||||
</view>
|
||||
<view class="pad20 disjbac">
|
||||
<view class="fon24 col26 flexs">设为默认收货地址</view>
|
||||
<evan-switch v-model="moAddress" @change="setMoAddress" :size="28" inactive-color="#dedede" active-color="#f37717"></evan-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="disjcac fc fon28 pad-s50">
|
||||
<!-- 保存 -->
|
||||
<view class="disjcac radius34" style="width: 670rpx;height: 80rpx;background-color: #f37717;color: #FFFFFF;border: 2rpx solid #f37717;">保存</view>
|
||||
<!-- 删除 -->
|
||||
<view class="disjcac radius34 mar-s20 borbot-df" style="width: 670rpx;height: 80rpx;background-color: #FFFFFF;">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import evanSwitch from '@/components/evan-switch/evan-switch.vue';
|
||||
export default {
|
||||
components:{
|
||||
evanSwitch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
moAddress:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 是否设为默认地址
|
||||
setMoAddress(status){
|
||||
this.moAddress = status;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.width140{width: 140rpx;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
<view class="bacf boxshowb posi-sticky" :style="{top:newtop+'px'}">
|
||||
<view class="pad-zy30 pad-sx24 disjbac pad-zy30 pad-sx20">
|
||||
<view class="fon26 col26">四川省成都市武侯区</view>
|
||||
<image src="/static/tabbar/icon-edit.png" mode="" style="width: 26rpx;height: 28rpx;" lazy-load></image>
|
||||
<image @tap="$toolAll.tools.goPage(`/pagesB/add-address/add-address?id=${0}`)" src="/static/tabbar/icon-edit.png" mode="" style="width: 26rpx;height: 28rpx;" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bacf mar-s30 pad-zy30 pad-x30 boxshowb">
|
||||
<view v-if="datalist.length" class="bacf mar-s30 pad-zy30 pad-x30 boxshowb">
|
||||
<view class="disac animated pad-sx30 bbot" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}" v-for="(item,index) in datalist" :key="index">
|
||||
<!-- 选择 -->
|
||||
<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<pitera v-else textStr="您的购物车：这也空空，那也空空(*^▽^*)" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
<!-- 热门产品推荐 -->
|
||||
<view class="pad-zy30 mar-x30 mar-s40">
|
||||
<view class="disjcac" style="border-bottom: 2rpx solid #ebe3e2;">
|
||||
|
|
@ -70,8 +71,9 @@
|
|||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import list from '@/components/list.vue';
|
||||
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{'foot-tab' :footTab,list,swiperPu},
|
||||
components:{'foot-tab' :footTab,list,swiperPu,pitera},
|
||||
data() {
|
||||
return {
|
||||
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||
|
|
@ -164,6 +166,11 @@
|
|||
// 减 ，如果当前商品数量大于最小值
|
||||
if(this.datalist[index].num > this.minNum) {
|
||||
this.datalist[index].num--;
|
||||
} else {
|
||||
this.datalist[index].ifExit = false;
|
||||
setTimeout(()=>{
|
||||
this.datalist.splice(index,1);
|
||||
},500)
|
||||
}
|
||||
}
|
||||
console.log(this.allPrice,'总价');
|
||||
|
|
|
|||
|
|
@ -2,7 +2,40 @@
|
|||
<view>
|
||||
<status-container titlet="订单详情" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf"></view>
|
||||
<view class="bacf disjcac fc pad-sx40 boxshow2">
|
||||
<view class="fon28 mar-x20">待付款</view>
|
||||
<view class="fon26 radius30 disjcac" :style="{backgroundColor:['#FFFFF','#f37717','#FFFFF'][1],color:['#f37717','#FFFFFF','#969696'][1],borderColor:['#f37717','#f37717','#c9c9c9'][1]}" style="border: 2rpx solid #f37717;color: #f37717;width: 204rpx;height: 62rpx;">{{['确认收货','去付款','查看物流'][1]}}</view>
|
||||
</view>
|
||||
<view class="bacf mar-s20 pad-x20 boxshow2">
|
||||
<view @tap="$toolAll.tools.goPage(`/pagesB/order-detail/order-detail?id=${0}`)" class="bbot disac pad30 col26" v-for="(item,index) in 3" :key="index">
|
||||
<image class="flexs mar-y20" src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="width: 192rpx;height: 134rpx;" mode="aspectFill" lazy-load></image>
|
||||
<view class="fon24 width100 disjbac fc" style="height: 134rpx;">
|
||||
<view class="dis width100">
|
||||
<view class="clips2">武术用品商品名称后用品商品名称后 台上传基础动作教学</view>
|
||||
<view class="mar-z50">x3</view>
|
||||
</view>
|
||||
<view class="width100 disje">
|
||||
<view class="">实付：￥199.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="col26 fon24 line-h46 pad-zy30 pad-sx20 bbot">
|
||||
<view class="">订单编号：<span style="color:#707070;">1234578454545</span></view>
|
||||
<view class="">下单时间：<span style="color:#707070;">2022.07.20 11:23:45</span></view>
|
||||
<view class="">支付时间：<span style="color:#707070;">2022.07.08 12:12:12</span></view>
|
||||
<view class="">快递公司：<span style="color:#707070;">京东快递</span></view>
|
||||
<view class="">快递单号：<span style="color:#707070;">JD120231651302</span></view>
|
||||
</view>
|
||||
<view class="col26 fon24 line-h46 pad-zy30 pad-sx20 bbot">
|
||||
<view class="disjbac">订单总额<span class="colb">￥199.00</span></view>
|
||||
<view class="disjbac">运费<span class="colb">+￥0.00</span></view>
|
||||
<view class="disjbac">优惠券抵扣<span class="colb">-￥10.00</span></view>
|
||||
<view class="disjbac">积分抵扣<span class="colb">-￥15.00</span></view>
|
||||
</view>
|
||||
<view class="col26 fon24 line-h46 pad-zy30 pad-s30 pad-x20">
|
||||
<view class="disjbac">实付金额<span class="colb">￥174.00</span></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
|
|
@ -14,6 +47,9 @@
|
|||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
|
@ -21,6 +57,4 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="我的推广" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf pad-zy20 boxshow2">
|
||||
<view class="disjcac pad-sx30 bbot">
|
||||
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" style="width: 242rpx;height: 242rpx;" lazy-load></image>
|
||||
</view>
|
||||
<view class="disjbac fon24 col26 pad-sx20 pad-zy10">
|
||||
<view class="">代理登记</view>
|
||||
<view class="">二级</view>
|
||||
</view>
|
||||
<view class="disjbac pad-x20 pad-zy10">
|
||||
<view class="fon22 col26">我的佣金</view>
|
||||
<view class="fon26 bold col-e42417">500</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mar-s30 pad-zy20 bacf boxshow2">
|
||||
<view class=" col26 pad-sx20 pad-zy10 disac borbot" v-for="(item,index) in 20" :key="index">
|
||||
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" class="flexs radius_100 mar-y20" style="width: 78rpx;height: 78rpx;" mode="aspectFill" lazy-load></image>
|
||||
<view class="width100">
|
||||
<view class="disjbac">
|
||||
<view class="fon24 colb">爱健身房</view>
|
||||
<view class="col-e42417 fon24">10</view>
|
||||
</view>
|
||||
<view class="disjbac" style="margin-top: 6rpx;">
|
||||
<view class="fon20" style="color: #747474;">2022.07.03 12:03:03</view>
|
||||
<view class="fon24">扫码注册</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue