家具第一次提交
commit
50d0180714
|
|
@ -0,0 +1,9 @@
|
||||||
|
/vendor
|
||||||
|
/node_modules
|
||||||
|
/public/storage
|
||||||
|
/unpackage
|
||||||
|
/.hbuilderx
|
||||||
|
Homestead.yaml
|
||||||
|
Homestead.json
|
||||||
|
.env
|
||||||
|
.idea
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onLaunch: function() {
|
||||||
|
console.log('App Launch')
|
||||||
|
},
|
||||||
|
onShow: function() {
|
||||||
|
console.log('App Show')
|
||||||
|
},
|
||||||
|
onHide: function() {
|
||||||
|
console.log('App Hide')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content{
|
||||||
|
/* padding-right: 40rpx;
|
||||||
|
padding-left: 40rpx; */
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
/*每个页面公共css */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<template>
|
||||||
|
<view :style="{'height':customBar}" class="head" :class="brF?'br':''">
|
||||||
|
<view :style="{'height':customBar}" class="headCom" :class="brF?'br':''">
|
||||||
|
<image @click="navigateBackFun()" class="imh" v-if="navState" src="../static/fh.png" mode=""></image>
|
||||||
|
<view class="textInt">
|
||||||
|
{{text}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
customBar:"170rpx"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
text:String,
|
||||||
|
brF:Boolean,
|
||||||
|
navState:Boolean,
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: (e) => {
|
||||||
|
let statusBar = 0
|
||||||
|
let customBar = 0
|
||||||
|
|
||||||
|
|
||||||
|
// #ifdef MP
|
||||||
|
statusBar = e.statusBarHeight
|
||||||
|
customBar = e.statusBarHeight + 45
|
||||||
|
if (e.platform === 'android') {
|
||||||
|
this.$store.commit('SET_SYSTEM_IOSANDROID', false)
|
||||||
|
customBar = e.statusBarHeight + 50
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
statusBar = e.statusBarHeight
|
||||||
|
// @ts-ignore
|
||||||
|
const custom = wx.getMenuButtonBoundingClientRect()
|
||||||
|
customBar = custom.bottom + custom.top - e.statusBarHeight
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
statusBar = e.statusBarHeight
|
||||||
|
customBar = e.statusBarHeight + e.titleBarHeight
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
console.log('app-plus', e)
|
||||||
|
statusBar = e.statusBarHeight
|
||||||
|
customBar = e.statusBarHeight + 45
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
statusBar = 0
|
||||||
|
customBar = e.statusBarHeight + 45
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
this.customBar=customBar+100+"rpx"
|
||||||
|
console.log( this.customBar)
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
navigateBackFun(){
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.head{
|
||||||
|
width: 100%;
|
||||||
|
background-color: #F5F5F5
|
||||||
|
|
||||||
|
}
|
||||||
|
.headCom{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
left: 0px;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
top: 0rpx;
|
||||||
|
}
|
||||||
|
.imh{
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 40rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
.br{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.textInt{
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<view class="tabBottom">
|
||||||
|
<navigator url="/pages/index/index" class="con" hover-class="none" open-type="reLaunch">
|
||||||
|
<image class="img" v-if="stateTab=='index'" src="../static/homea.png" mode=""></image>
|
||||||
|
<image class="img" v-else src="../static/home.png" mode=""></image>
|
||||||
|
<view class="text">
|
||||||
|
首页
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<navigator url="/pages/classify/classify" class="con" hover-class="none" open-type="reLaunch">
|
||||||
|
<image class="img" v-if="stateTab=='classify'" src="../static/fla.png" mode=""></image>
|
||||||
|
<image class="img" v-else src="../static/fl.png" mode=""></image>
|
||||||
|
<view class="text">
|
||||||
|
分类
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<navigator class="con" hover-class="none" url="/pages/personalCenter/personalCenter" open-type="reLaunch">
|
||||||
|
<image class="img" v-if="stateTab=='center'" src="../static/may.png" mode=""></image>
|
||||||
|
<image class="img" v-else src="../static/my.png" mode=""></image>
|
||||||
|
<view class="text" :class="stateTab=='center'?'on':''">
|
||||||
|
我的
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
stateTab:String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tab{
|
||||||
|
|
||||||
|
}
|
||||||
|
.tabBottom{
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 130rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 0 105rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 35rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabBottom .con{
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
.tabBottom .img{
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.tabBottom .text{
|
||||||
|
text-align: center;
|
||||||
|
color: #8c8c9b;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
font-size: 24rpx
|
||||||
|
}
|
||||||
|
.tabBottom .on{
|
||||||
|
color:#d33333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import Request from "@/static/xuan-linkAddress/request.js"
|
||||||
|
//创建Request对象
|
||||||
|
let request=new Request();
|
||||||
|
|
||||||
|
export default{
|
||||||
|
//data 参数值
|
||||||
|
get_linkAddress_api:function(data){
|
||||||
|
|
||||||
|
return request.http('/api/address/area',data,'GET');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,407 @@
|
||||||
|
<template>
|
||||||
|
<view class="popup-layout-wrap " :class="popuplayoutClass" >
|
||||||
|
<view class="popup-layout-content" :class="popupContentClass" :style="[{height:height}]">
|
||||||
|
<view class="link-address-wrap">
|
||||||
|
<view class="link-adress-content">
|
||||||
|
<view class="head-wrap">
|
||||||
|
<text class="cancel" @click="btn_cancel">取消</text>
|
||||||
|
<text class="confirm" @click="btn_confirm">确认</text>
|
||||||
|
</view>
|
||||||
|
<view class="head-selected">
|
||||||
|
<text class="selected-txt">已选择:{{selected_address}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="operation-wrap">
|
||||||
|
<view class="operation-container">
|
||||||
|
<view class="operation-content" v-for="(base_items,base_index) of linkAddress_area">
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
class="province"
|
||||||
|
show-scrollbar="false">
|
||||||
|
<view
|
||||||
|
@click="choosefun(base_items.clickfun,items.id)"
|
||||||
|
v-model="items.id"
|
||||||
|
v-for="(items , index) of base_items.info"
|
||||||
|
:class="[index==base_items.current ? 'province-txt-click' : 'province-txt']"
|
||||||
|
>
|
||||||
|
{{items.name}}
|
||||||
|
<view class="pic" v-show="index===base_items.current">
|
||||||
|
<image src="../../static/xuan-linkAddress/yes.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="maskShow" class="popup-layout-mask" @tap="close(maskClick)"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import linkAddress_p from '../../static/xuan-linkAddress/get_linkAddress_p.js'
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
newActive:"",
|
||||||
|
newTransition:true,
|
||||||
|
//省0市1区2
|
||||||
|
linkAddress_area:[
|
||||||
|
{
|
||||||
|
current:null,
|
||||||
|
info: [],
|
||||||
|
clickfun:'province_txt_click'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
current:null,
|
||||||
|
info: [],
|
||||||
|
clickfun:'city_txt_click'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
current:null,
|
||||||
|
info: [],
|
||||||
|
clickfun:'district_txt_click'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
/*请求提交的*/
|
||||||
|
submission:{
|
||||||
|
province:'',//省
|
||||||
|
city:'',//市
|
||||||
|
county:'',//区
|
||||||
|
town:''//镇
|
||||||
|
},
|
||||||
|
/*用户选择的地址*/
|
||||||
|
user_address:{
|
||||||
|
province:'',//省
|
||||||
|
city:'',//市
|
||||||
|
district:''//区
|
||||||
|
},
|
||||||
|
selected_address:''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
/*底部弹窗的属性*/
|
||||||
|
active:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
height:{
|
||||||
|
type:[String],
|
||||||
|
default:"100%"
|
||||||
|
},
|
||||||
|
//遮盖层显示
|
||||||
|
maskShow:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
//遮盖层点击
|
||||||
|
maskClick:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
//回掉
|
||||||
|
callback:{
|
||||||
|
type:Function,
|
||||||
|
default:function () {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
popuplayoutClass:function(){
|
||||||
|
let _class="";
|
||||||
|
if(this.newActive){
|
||||||
|
_class+="popup-layout-active";
|
||||||
|
}
|
||||||
|
_class+=" popup-layout-bottom";
|
||||||
|
return _class;
|
||||||
|
},
|
||||||
|
popupContentClass:function () {
|
||||||
|
let _class = "";
|
||||||
|
if (this.newTransition&&this.transition!=='none') {
|
||||||
|
_class+="popup-layout-transition-slider"
|
||||||
|
}
|
||||||
|
return _class;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//显示弹窗
|
||||||
|
show:function () {
|
||||||
|
//提交的数据置为空
|
||||||
|
this.submission={
|
||||||
|
province:'',
|
||||||
|
city:'',
|
||||||
|
county:'',
|
||||||
|
town:''
|
||||||
|
},
|
||||||
|
//请求市数据
|
||||||
|
linkAddress_p.get_linkAddress(this,"province",this.submission,(revert)=>{
|
||||||
|
this.submission.province='1';
|
||||||
|
});
|
||||||
|
|
||||||
|
this.newActive = true;
|
||||||
|
let _this = this;
|
||||||
|
setTimeout(function () {
|
||||||
|
_this.newTransition = false;
|
||||||
|
},50)
|
||||||
|
},
|
||||||
|
|
||||||
|
//关闭弹窗
|
||||||
|
close:function (v) {
|
||||||
|
let close = v || true;
|
||||||
|
if (close) {
|
||||||
|
this.newTransition = true;
|
||||||
|
let _this=this;
|
||||||
|
setTimeout(function () {
|
||||||
|
_this.newActive = false;
|
||||||
|
|
||||||
|
},300)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
//选择点击事件
|
||||||
|
choosefun(targetfun,targetid){
|
||||||
|
this[targetfun](targetid);
|
||||||
|
},
|
||||||
|
//省点击选择
|
||||||
|
province_txt_click(target){
|
||||||
|
//区数据置为空
|
||||||
|
this.linkAddress_area[2].info= [];
|
||||||
|
//市、区的选择计数置为null
|
||||||
|
this.linkAddress_area[1].current=null;
|
||||||
|
this.linkAddress_area[2].current=null;
|
||||||
|
let province;
|
||||||
|
//得到点击的数据，改变样式
|
||||||
|
for (let i = 0; i < this.linkAddress_area[0].info.length; i++) {
|
||||||
|
if (this.linkAddress_area[0].info[i].id === target) {
|
||||||
|
this.linkAddress_area[0].current = i;
|
||||||
|
province=this.linkAddress_area[0].info[i].name;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//用户选择
|
||||||
|
this.user_address={
|
||||||
|
province:province,
|
||||||
|
city:'',
|
||||||
|
district:''
|
||||||
|
}
|
||||||
|
//请求提交的数据先置为空
|
||||||
|
this.submission={
|
||||||
|
province:'',
|
||||||
|
city:'',
|
||||||
|
county:'',
|
||||||
|
town:''
|
||||||
|
};
|
||||||
|
//再赋值
|
||||||
|
this.submission.province=target;
|
||||||
|
this.selected_address=this.user_address.province;
|
||||||
|
//请求市数据
|
||||||
|
linkAddress_p.get_linkAddress(this,"city",this.submission,(revert)=>{
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//市点击选择
|
||||||
|
city_txt_click(target){
|
||||||
|
//区的选择计数置为null
|
||||||
|
this.linkAddress_area[2].current=null;
|
||||||
|
let city;
|
||||||
|
//得到点击的数据，改变样式
|
||||||
|
for (let i = 0; i < this.linkAddress_area[1].info.length; i++) {
|
||||||
|
if (this.linkAddress_area[1].info[i].id === target) {
|
||||||
|
this.linkAddress_area[1].current = i;
|
||||||
|
city=this.linkAddress_area[1].info[i].name;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//得到市
|
||||||
|
this.user_address.city=city;
|
||||||
|
//把区的信息置为空
|
||||||
|
this.user_address.district='';
|
||||||
|
|
||||||
|
this.submission.city=target;
|
||||||
|
|
||||||
|
this.selected_address=this.user_address.province+"-"+this.user_address.city;
|
||||||
|
//请求区数据
|
||||||
|
linkAddress_p.get_linkAddress(this,"district",this.submission,(revert)=>{
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//区点击选择
|
||||||
|
district_txt_click(target){
|
||||||
|
let district;
|
||||||
|
//得到点击的数据，改变样式
|
||||||
|
for (let i = 0; i < this.linkAddress_area[2].info.length; i++) {
|
||||||
|
if (this.linkAddress_area[2].info[i].id === target) {
|
||||||
|
// this.district_current = i;
|
||||||
|
this.linkAddress_area[2].current = i;
|
||||||
|
district=this.linkAddress_area[2].info[i].name;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//得到区信息
|
||||||
|
this.user_address.district=district;
|
||||||
|
this.selected_address=this.user_address.province+"-"+this.user_address.city+"-"+this.user_address.district;
|
||||||
|
},
|
||||||
|
|
||||||
|
//取消按钮
|
||||||
|
btn_cancel:function(){
|
||||||
|
this.close();
|
||||||
|
|
||||||
|
//全部置为空
|
||||||
|
this.submission={
|
||||||
|
province:'',
|
||||||
|
city:'',
|
||||||
|
county:'',
|
||||||
|
town:''
|
||||||
|
}
|
||||||
|
this.linkAddress_area[1].info= [];
|
||||||
|
this.linkAddress_area[2].info= [];
|
||||||
|
this.linkAddress_area[0].current=null;
|
||||||
|
this.linkAddress_area[1].current=null;
|
||||||
|
this.linkAddress_area[2].current=null;
|
||||||
|
this.selected_address='';
|
||||||
|
},
|
||||||
|
//确定按钮
|
||||||
|
btn_confirm:function(){
|
||||||
|
this.close();
|
||||||
|
|
||||||
|
this.$emit('confirmCallback',this.user_address);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
popup-layout-wrap{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.popup-layout-wrap{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 998;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: none;
|
||||||
|
&.popup-layout-active{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&.popup-layout-bottom{
|
||||||
|
align-items: flex-end;
|
||||||
|
.popup-layout-transition-slider{
|
||||||
|
transform: translate3d(0,100%,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popup-layout-content{
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 2;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transform: translate3d(0,0,0) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
transition: transform .3s ease-in-out,opacity .3s ease-in-out;
|
||||||
|
&.popup-layout-transition-fade{
|
||||||
|
transform: translate3d(0,0,0) scale(0.3);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popup-layout-mask{
|
||||||
|
position: absolute;
|
||||||
|
transition:all 1s ;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(#000, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/***省市区选择器***/
|
||||||
|
.link-address-wrap{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.link-address-wrap .link-adress-content{
|
||||||
|
margin:8px 10px 10px 10px;
|
||||||
|
.head-wrap{
|
||||||
|
padding-bottom: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
.cancel{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.confirm{
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.head-selected{
|
||||||
|
text-align: center;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
.operation-wrap{
|
||||||
|
.operation-container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.operation-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 33.333%;
|
||||||
|
.province{
|
||||||
|
//scroll-view区域的固定高度
|
||||||
|
height: 420rpx;
|
||||||
|
font-size: 17px;
|
||||||
|
.province-txt{
|
||||||
|
margin: 18px 12px;
|
||||||
|
font-size: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.province-txt-click{
|
||||||
|
margin: 18px 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: red;
|
||||||
|
font-size: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.pic{
|
||||||
|
padding-left: 15rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto 0;
|
||||||
|
image{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
|
||||||
|
<title></title>
|
||||||
|
<!--preload-links-->
|
||||||
|
<!--app-context-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import App from './App'
|
||||||
|
|
||||||
|
// #ifndef VUE3
|
||||||
|
import Vue from 'vue'
|
||||||
|
Vue.prototype.host = "https://jiajumall.scdxtc.cn"
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
import pageHead from './component/pageHead.vue'
|
||||||
|
Vue.component('page-head',pageHead)
|
||||||
|
Vue.prototype.request =async ({url = '', type = '', data = {}, success}) => {
|
||||||
|
if(uni.getStorageSync('userData')){
|
||||||
|
let userData=uni.getStorageSync('userData')
|
||||||
|
uni.request({
|
||||||
|
method: type,
|
||||||
|
url:url,
|
||||||
|
data: data,
|
||||||
|
success: success,
|
||||||
|
header: {
|
||||||
|
"Authorization":"Bearer "+userData.token,
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
uni.request({
|
||||||
|
method: type,
|
||||||
|
url:url,
|
||||||
|
data: data,
|
||||||
|
success: success,
|
||||||
|
complete: (res) => {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
Vue.prototype.requestToken =async ({url = '', type = '', data = {}, success,contentType="application/x-www-form-urlencoded"}) => {
|
||||||
|
if(uni.getStorageSync('userData')){
|
||||||
|
let userData=uni.getStorageSync('userData')
|
||||||
|
uni.request({
|
||||||
|
method: type,
|
||||||
|
url:url,
|
||||||
|
data: data,
|
||||||
|
header: {
|
||||||
|
"Authorization":"Bearer "+userData.token,
|
||||||
|
'content-type': contentType
|
||||||
|
},
|
||||||
|
success: success,
|
||||||
|
complete: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}else{
|
||||||
|
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/index/login'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
App.mpType = 'app'
|
||||||
|
const app = new Vue({
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef VUE3
|
||||||
|
import { createSSRApp } from 'vue'
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App)
|
||||||
|
return {
|
||||||
|
app
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
{
|
||||||
|
"name" : "jiaju",
|
||||||
|
"appid" : "__UNI__ECAE687",
|
||||||
|
"description" : "",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"nvueStyleCompiler" : "uni-app",
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : true,
|
||||||
|
"waiting" : true,
|
||||||
|
"autoclose" : true,
|
||||||
|
"delay" : 0
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"modules" : {},
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"distribute" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"android" : {
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"ios" : {},
|
||||||
|
/* SDK配置 */
|
||||||
|
"sdkConfigs" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
"appid" : "",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : false
|
||||||
|
},
|
||||||
|
"usingComponents" : true,
|
||||||
|
"permission" : {
|
||||||
|
"scope.userLocation" : {
|
||||||
|
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mp-alipay" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-toutiao" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"uniStatistics" : {
|
||||||
|
"enable" : false
|
||||||
|
},
|
||||||
|
"vueVersion" : "2"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
{
|
||||||
|
|
||||||
|
|
||||||
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "首页",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false //去掉app+h5顶部导航
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/personalCenter/changeInformation",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "pages/commodity/commodity",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "pages/disclaimer/disclaimer",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/aboutUs/aboutUs",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/personalCenter/personalCenter",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "pages/index/login",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "pages/search/search",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/classify/classify",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "uni-app"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"onReachBottomDistance": 30,
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "uni-app",
|
||||||
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
|
"backgroundColor": "#F8F8F8",
|
||||||
|
"navigationStyle":"custom"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<view class="avaout">
|
||||||
|
<page-head text="关于我们" brF="true" navState="true" ></page-head>
|
||||||
|
<view class="mapCon">
|
||||||
|
<map id="map" class="map" :show-location="true" scale="9" :latitude="aboutData.lat" :longitude="aboutData.lon"></map>
|
||||||
|
</view>
|
||||||
|
<view class="daohang" @click="daohang()">
|
||||||
|
导航到我们
|
||||||
|
</view>
|
||||||
|
<view class="title">
|
||||||
|
关于我们
|
||||||
|
</view>
|
||||||
|
<view class="text" v-html="aboutData.content">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const img = '/static/logo.png';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
latitude: 23.099994,
|
||||||
|
aboutData: {},
|
||||||
|
longitude: 113.324520,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getabout()
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
this._mapContext = uni.createMapContext("map", this);
|
||||||
|
this._mapContext.initMarkerCluster({
|
||||||
|
enableDefaultStyle: false,
|
||||||
|
zoomOnClick: true,
|
||||||
|
gridSize: 60,
|
||||||
|
complete(res) {
|
||||||
|
console.log('initMarkerCluster', res)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this._mapContext.on("markerClusterCreate", (e) => {
|
||||||
|
console.log("markerClusterCreate", e);
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getabout() {
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/index/about",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
is_gome: 0,
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.aboutData = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
daohang() {
|
||||||
|
|
||||||
|
wx.getLocation({ //获取当前经纬度
|
||||||
|
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||||||
|
success: (res) => {
|
||||||
|
wx.openLocation({ //使用微信内置地图查看位置。
|
||||||
|
address:this.aboutData.address,
|
||||||
|
latitude: this.aboutData.lat * 1, //要去的纬度-地址
|
||||||
|
longitude: this.aboutData.lon * 1, //要去的经度-地址
|
||||||
|
fail: err => {
|
||||||
|
this.$toolAll.tools.showToast('地址信息错误');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.avaout {
|
||||||
|
padding: 0rpx 40rpx 40rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapCon {
|
||||||
|
width: 100%;
|
||||||
|
height: 390rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
.daohang{
|
||||||
|
width: 667rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 98rpx;
|
||||||
|
background-color: #000;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 48rpx;
|
||||||
|
padding: 85rpx 0rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8c8c9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,389 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<page-head text="分类" brF="true"></page-head>
|
||||||
|
<view class="classifyMain">
|
||||||
|
<view class="navList">
|
||||||
|
<view class="navListCon">
|
||||||
|
<view class="text" @click="navStateFun(index)" :class="item.state?'on':''"
|
||||||
|
v-for="(item,index) in navData">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="classifyCon">
|
||||||
|
<view class="navClassify">
|
||||||
|
<view class="navClassifyCon">
|
||||||
|
<view @click="navStateTow(index)" v-for="(item,index) in classifyConData" class="text"
|
||||||
|
:class="item.state?'on':''">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y="true" lower-threshold="100rpx" class="classifyConList" @scrolltolower="lower">
|
||||||
|
<view class="classifyConListCon">
|
||||||
|
<view class="list" v-for="(item,index) in HomeData" @click="details(item.id)">
|
||||||
|
<view class="imgCon">
|
||||||
|
<image class="img" :src="item.cover" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="text">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
<view class="textA">
|
||||||
|
<view class="money">
|
||||||
|
|
||||||
|
￥{{item.price_text}}
|
||||||
|
</view>
|
||||||
|
<view class="btn" v-if="item.customized==1">
|
||||||
|
可定制
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<uni-load-more :status="moreState"></uni-load-more>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<tab stateTab="classify"></tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tab from "../../component/tab.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
tab
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
classifyConData: [],
|
||||||
|
moreState: "more",
|
||||||
|
navData: [],
|
||||||
|
HomeData: [],
|
||||||
|
num:10,
|
||||||
|
total: "",
|
||||||
|
arr: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
is_home: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getNavData()
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
lower: function(e) {
|
||||||
|
this.arr.size = this.arr.size + this.num
|
||||||
|
console.log(123123)
|
||||||
|
if ((this.arr.page * this.arr.size) <= this.total + this.num) {
|
||||||
|
if ((this.arr.page * this.arr.size) != this.total) {
|
||||||
|
this.getHomeData()
|
||||||
|
} else {
|
||||||
|
this.moreState = "no-more"
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.moreState = "no-more"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
details(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/commodity/commodity?id=' + id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
navStateFun(index) {
|
||||||
|
for (var i = 0; i < this.navData.length; i++) {
|
||||||
|
this.navData[i] = {
|
||||||
|
...this.navData[i],
|
||||||
|
state: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.classifyId = this.navData[index].id
|
||||||
|
this.navData[index].state = true
|
||||||
|
if (this.navData[index].children.length >= 1) {
|
||||||
|
this.classifyConData = this.navData[index].children
|
||||||
|
for (var i = 0; i < this.classifyConData.length; i++) {
|
||||||
|
this.classifyConData[i] = {
|
||||||
|
...this.classifyConData[i],
|
||||||
|
state: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.classifyConData[0].state = true
|
||||||
|
this.classifyId = this.classifyConData[0].id
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.classifyId = 0
|
||||||
|
this.classifyConData = []
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.getHomeData()
|
||||||
|
this.navData = [...this.navData]
|
||||||
|
},
|
||||||
|
getHomeData() {
|
||||||
|
this.moreState="loading"
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/spu/home",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
...this.arr,
|
||||||
|
category_id: this.classifyId
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.HomeData = res.data.data.list
|
||||||
|
this.total = res.data.data.total
|
||||||
|
if ((this.arr.page * this.arr.size) <= this.total) {
|
||||||
|
|
||||||
|
} else {
|
||||||
|
console.log("----------")
|
||||||
|
this.moreState = "no-more"
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getNavData() {
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/spu/condition",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
is_home: "0",
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.navData = res.data.data
|
||||||
|
for (var i = 0; i < this.navData.length; i++) {
|
||||||
|
this.navData[i] = {
|
||||||
|
...this.navData[i],
|
||||||
|
state: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.navData[0].state = true
|
||||||
|
this.navStateFun(0)
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
navState(index) {
|
||||||
|
for (var i = 0; i < this.classifyConData.length; i++) {
|
||||||
|
this.classifyConData[i].state = false
|
||||||
|
}
|
||||||
|
this.classifyConData[index].state = true
|
||||||
|
},
|
||||||
|
navStateTow(index) {
|
||||||
|
|
||||||
|
for (var i = 0; i < this.classifyConData.length; i++) {
|
||||||
|
this.classifyConData[i] = {
|
||||||
|
...this.classifyConData[i],
|
||||||
|
state: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(this.classifyConData)
|
||||||
|
this.classifyId = this.classifyConData[index].id
|
||||||
|
this.classifyConData[index].state = true
|
||||||
|
this.classifyConData = [...this.classifyConData]
|
||||||
|
this.getHomeData()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.navList {
|
||||||
|
width: 128rpx;
|
||||||
|
height: 88vh;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navListCon {
|
||||||
|
height: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view_H {
|
||||||
|
height: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-Y {
|
||||||
|
height: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navListCon .text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 30rpx 24rpx;
|
||||||
|
width: 100%;
|
||||||
|
color: #666;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navListCon .on {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navListCon .on::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -40rpx;
|
||||||
|
width: 9rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #D43939;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyCon {
|
||||||
|
width: 623rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navClassify {
|
||||||
|
margin: auto;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 3;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navClassifyCon {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navClassifyCon::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navClassify .text {
|
||||||
|
width: 136rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
flex: none;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #8c8c9b;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 64rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navClassify .on {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #D33333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyMain {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList {
|
||||||
|
height: 88vh;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-bottom: 119rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
padding-top: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.classifyConListCon{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.classifyConList .list {
|
||||||
|
width: 276rpx;
|
||||||
|
height: 373rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
margin-right: 28rpx;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list:nth-child(2n) {
|
||||||
|
margin-right: 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .img {
|
||||||
|
width:100%;
|
||||||
|
height: 188rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.classifyConList .list .text {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 0rpx;
|
||||||
|
bottom: 32rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA .money {
|
||||||
|
font-size: 28rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
width: 130rpx;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA .btn {
|
||||||
|
font-size: 18rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 86rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 28rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,467 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<page-head text="详情" navState="true"></page-head>
|
||||||
|
<swiper class="swiper" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)"
|
||||||
|
:indicator-dots="indicatorDots">
|
||||||
|
<swiper-item v-for="(item,index) in commodityData.detail.images">
|
||||||
|
<view class="swiper-item uni-bg-red">
|
||||||
|
<image class="img" :src="item" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
|
||||||
|
</swiper>
|
||||||
|
<view class="commodityTitle">
|
||||||
|
<view class="title">
|
||||||
|
{{ commodityData.detail.name}}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="dz">
|
||||||
|
可定制
|
||||||
|
</view>
|
||||||
|
<view class="money">
|
||||||
|
<text >￥</text>{{ commodityData.detail.price_text}}
|
||||||
|
</view>
|
||||||
|
<view class="specification" @click="specificationFun()">
|
||||||
|
<view class="text">
|
||||||
|
<image src="../../static/guig.png" class="img" mode=""></image>
|
||||||
|
<view class="p">
|
||||||
|
规格：查看详细规格
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<image class="jt" src="../../static/jta.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="commodityCon">
|
||||||
|
<view class="title">
|
||||||
|
商品信息
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<view class="p" v-html="commodityData.detail.content"></view>
|
||||||
|
<!-- <view class="p">类别：布艺沙发 </view>
|
||||||
|
<view class="p">型号：1502 </view>
|
||||||
|
<view class="p">家具材质：布艺 </view>
|
||||||
|
<view class="p">国产/进口：国产 </view>
|
||||||
|
<view class="p">家装风格：简约现代 </view>
|
||||||
|
<view class="p">是否可定制：不可定制 </view>
|
||||||
|
<view class="p">是否可拆洗：不可拆洗 </view>
|
||||||
|
<view class="p">面料材质：其它 </view>
|
||||||
|
<view class="p">沙发骨架材质：实木 是否带储物空间：不带储物空间 沙发
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="similarity">
|
||||||
|
<view class="title">
|
||||||
|
为您找到以下相似商品
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="classifyConList">
|
||||||
|
<view class="list" v-for="(item,index) in commodityData.similarGoods" @click="details(item.id)">
|
||||||
|
<image class="img" :src="item.cover" mode="aspectFill"></image>
|
||||||
|
<view class="text">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
<view class="textA">
|
||||||
|
<view class="money">
|
||||||
|
|
||||||
|
<text >￥</text>{{item.price_text}}
|
||||||
|
</view>
|
||||||
|
<view class="btn" v-if="item.customized==1">
|
||||||
|
可定制
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="subscriptionButton" @click="makePhoneCallFun()">
|
||||||
|
立即订阅
|
||||||
|
</view>
|
||||||
|
<view class="make" :class="popupState?'makedis':''">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="popup" :class="popupState?'popupB':''">
|
||||||
|
<image class="imgGb" @click="specificationFunState()" src="../../static/47.png" mode=""></image>
|
||||||
|
<view class="popupTitle">
|
||||||
|
<image class="img" @click="previewImg(commodityData.detail.cover)" :src="commodityData.detail.cover" mode="aspectFill"></image>
|
||||||
|
<view class="money" v-if="money">
|
||||||
|
{{money}}
|
||||||
|
</view>
|
||||||
|
<view class="money" v-else>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="text">
|
||||||
|
（点击上方封面可查看大图）
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="popupList">
|
||||||
|
<view class="tit">
|
||||||
|
规格
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<view class="list" @click="popupListFun(index)" :class="item.state?'on':''" v-for="(item,index) in commodityData.sku">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="button" @click="makePhoneCallFun()">
|
||||||
|
立即订购
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
indicatorDots: true,
|
||||||
|
commodityData:{},
|
||||||
|
money:"",
|
||||||
|
popupState:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(option) {
|
||||||
|
this.id=option.id
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
makePhoneCallFun(){
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: this.commodityData.purchase_phone //仅为示例
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
specificationFun(){
|
||||||
|
this.popupState=true
|
||||||
|
this.money=this.commodityData.sku[0].price_text
|
||||||
|
for (var i = 0; i < this.commodityData.sku.length; i++) {
|
||||||
|
this.commodityData.sku[i].state=false
|
||||||
|
}
|
||||||
|
this.commodityData.sku[0].state =true
|
||||||
|
},
|
||||||
|
specificationFunState(){
|
||||||
|
this.popupState=false
|
||||||
|
},
|
||||||
|
|
||||||
|
previewImg(logourl) {
|
||||||
|
let _this = this;
|
||||||
|
let imgsArray = [];
|
||||||
|
imgsArray[0] = logourl
|
||||||
|
uni.previewImage({
|
||||||
|
current: 0,
|
||||||
|
urls: imgsArray
|
||||||
|
});
|
||||||
|
},
|
||||||
|
popupListFun(index){
|
||||||
|
for (var i = 0; i < this.commodityData.sku.length; i++) {
|
||||||
|
this.commodityData.sku[i].state=false
|
||||||
|
}
|
||||||
|
this.commodityData.sku[index].state =true
|
||||||
|
this.money=this.commodityData.sku[index].price
|
||||||
|
|
||||||
|
this.commodityData.sku=[...this.commodityData.sku]
|
||||||
|
},
|
||||||
|
details(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/commodity/commodity?id=' + id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/spu/detail",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
id: this.id,
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.commodityData=res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 480rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper .img {
|
||||||
|
width: 100%;
|
||||||
|
height: 480rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodityTitle {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 40rpx 40rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodityCon {
|
||||||
|
padding: 40rpx 40rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodityTitle .dz {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodityTitle .money {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #D33333;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specification {
|
||||||
|
width: 100%;
|
||||||
|
height: 86rpx;
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
align-items: center;
|
||||||
|
border: 4rpx solid #000000;
|
||||||
|
margin-top: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specification .text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specification .img {
|
||||||
|
width: 37rpx;
|
||||||
|
height: 37rpx;
|
||||||
|
margin-right: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specification .p {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specification .jt {
|
||||||
|
width: 14rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodityCon .title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commodityCon .p {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
color: #8c8c9b;
|
||||||
|
line-height: 46rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.similarity .title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #d33333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
.subscriptionButton{
|
||||||
|
width: 668rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
background-color: #D33333;color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 98rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10rpx;
|
||||||
|
left: 50%;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-left: -334rpx;
|
||||||
|
}
|
||||||
|
.popup{
|
||||||
|
position: fixed;
|
||||||
|
left: 0rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
height: 950rpx;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
z-index: 5;
|
||||||
|
bottom: -1200rpx;
|
||||||
|
border: 0rpx;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
.popupB{
|
||||||
|
bottom: -0rpx;
|
||||||
|
}
|
||||||
|
.make{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
display: none;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
.makedis{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.popupTitle .img{
|
||||||
|
width: 284rpx;
|
||||||
|
height: 284rpx;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin-top: -184rpx;
|
||||||
|
}
|
||||||
|
.popupTitle{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.popupTitle .money{
|
||||||
|
font-size: 48rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #D33333;
|
||||||
|
}
|
||||||
|
.popupTitle .text{
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #c0c0c0;
|
||||||
|
}
|
||||||
|
.popupList .tit{
|
||||||
|
margin-top: 32rpx;
|
||||||
|
font-size: 30rpx
|
||||||
|
}
|
||||||
|
.popupList .list{
|
||||||
|
border: 2rpx solid #666666;
|
||||||
|
width: 100%;
|
||||||
|
height: 106rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 0 42rpx;
|
||||||
|
font-size: 24rpx;line-height: 45rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popupList .button{
|
||||||
|
width: 668rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
background-color: #D33333;border-radius: 30rpx;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 34rpx;
|
||||||
|
line-height: 98rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 36rpx
|
||||||
|
}
|
||||||
|
.popupList .on{
|
||||||
|
background-color: #D33333;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.popup .imgGb{
|
||||||
|
width: 66rpx;
|
||||||
|
height: 66rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
|
||||||
|
padding-bottom: 150rpx;
|
||||||
|
align-content: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list {
|
||||||
|
width: 320rpx;
|
||||||
|
height: 433rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .img {
|
||||||
|
width: 100%;
|
||||||
|
height: 214rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .text {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA .money {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA .btn {
|
||||||
|
font-size: 18rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 86rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 28rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<view class="dics" >
|
||||||
|
<page-head text="免责声明" brF="true" navState="true" ></page-head>
|
||||||
|
<view class="title">
|
||||||
|
免责声明
|
||||||
|
</view>
|
||||||
|
<view class="text" v-html="aboutData.content">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
aboutData:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.getabout()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getabout() {
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/index/statement",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
is_gome: 0,
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.aboutData = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.title{
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8c8c9b;
|
||||||
|
}
|
||||||
|
.dics{
|
||||||
|
padding: 0 40rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,368 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<page-head text="首页"></page-head>
|
||||||
|
<navigator class="int" url="/pages/search/search">
|
||||||
|
<image class="intImg" src="../../static/ss.png" mode=""></image>
|
||||||
|
<input placeholder="搜索" placeholder-class="InputC" class="input" type="text" value="" />
|
||||||
|
</navigator>
|
||||||
|
<swiper class="swiper" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)"
|
||||||
|
:indicator-dots="indicatorDots">
|
||||||
|
<swiper-item v-for="(item,index) in bannerData ">
|
||||||
|
<view @click="navD(item.spu_id)" class="swiper-item uni-bg-red">
|
||||||
|
<image class="img" :src="item.src" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<view class="title">
|
||||||
|
推荐商品
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="navList">
|
||||||
|
<view class="navListCon">
|
||||||
|
<view v-for="(item,index) in navData" class="text" @click="navState(index)" :class="item.state?'on':''">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="list">
|
||||||
|
<view class="listCon" v-for="(item,index) in HomeData" @click="details(item.id)">
|
||||||
|
<image :src="item.cover" class="img" mode=""></image>
|
||||||
|
<view class="text">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="money">
|
||||||
|
<view class="moneyNum">
|
||||||
|
<text >￥</text>{{item.price_text}}
|
||||||
|
</view>
|
||||||
|
<view class="btn" v-if="item.customized==1">
|
||||||
|
可定制
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uni-load-more :status="moreState"></uni-load-more>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<tab stateTab="index"></tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tab from "../../component/tab.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
tab
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loadState:true,
|
||||||
|
title: 'Hello',
|
||||||
|
navDataState: 0,
|
||||||
|
indicatorDots: true,
|
||||||
|
bannerData: [],
|
||||||
|
moreState:"more",
|
||||||
|
HomeData: [],
|
||||||
|
classifyId: "",
|
||||||
|
num:10,
|
||||||
|
listData: [{}],
|
||||||
|
navData: [],
|
||||||
|
arr: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
is_home: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getbannerData()
|
||||||
|
this.getNavData()
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.arr.size=this.arr.size+this.num
|
||||||
|
|
||||||
|
if( (this.arr.page*this.arr.size) <=this.total+ this.num){
|
||||||
|
if((this.arr.page*this.arr.size)!=this.total){
|
||||||
|
this.getHomeData()
|
||||||
|
}else{
|
||||||
|
this.moreState="no-more"
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
console.log(123)
|
||||||
|
this.moreState="no-more"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getHomeData() {
|
||||||
|
this.moreState="loading"
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/spu/home",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
...this.arr,
|
||||||
|
category_id: this.classifyId
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
|
||||||
|
this.HomeData = res.data.data.list
|
||||||
|
this.total = res.data.data.total
|
||||||
|
|
||||||
|
if( (this.arr.page*this.arr.size) <=this.total){
|
||||||
|
|
||||||
|
}else{
|
||||||
|
console.log("----------")
|
||||||
|
this.moreState="no-more"
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
details(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/commodity/commodity?id=' + id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
navD(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/commodity/commodity?id=' + id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getbannerData() {
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/common/slides",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
size: "1000",
|
||||||
|
position: "home-banner"
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.bannerData = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getNavData() {
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/spu/condition",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
is_home: "1",
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.navData = res.data.data
|
||||||
|
for (var i = 0; i < this.navData.length; i++) {
|
||||||
|
this.navData[i] = {
|
||||||
|
...this.navData[i],
|
||||||
|
state: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.navData[0].state = true
|
||||||
|
this.classifyId = this.navData[0].id
|
||||||
|
this.getHomeData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
navState(index) {
|
||||||
|
this.arr.size=this.num
|
||||||
|
for (var i = 0; i < this.navData.length; i++) {
|
||||||
|
this.navData[i] = {
|
||||||
|
...this.navData[i],
|
||||||
|
state: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.classifyId = this.navData[index].id
|
||||||
|
this.navData[index].state = true
|
||||||
|
this.navData = [...this.navData]
|
||||||
|
this.getHomeData()
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.int {
|
||||||
|
margin: auto;
|
||||||
|
width: 670rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
background-color: #DEDEDE;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dis {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.int .input {
|
||||||
|
padding-left: 107rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.InputC {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #8c8c9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intImg {
|
||||||
|
width: 40rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
width: 670rpx;
|
||||||
|
margin: auto;
|
||||||
|
height: 331rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper .img {
|
||||||
|
width: 100%;
|
||||||
|
height: 331rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 48rpx;
|
||||||
|
width: 670rpx;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 75rpx;
|
||||||
|
height: 5rpx;
|
||||||
|
background-color: #000;
|
||||||
|
border-radius: 2.5rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
bottom: -30rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navList {
|
||||||
|
padding-left: 40rpx;
|
||||||
|
margin: auto;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
padding-bottom: 54rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navListCon {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navListCon::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navList .text {
|
||||||
|
width: 136rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
flex: none;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #8c8c9b;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 64rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navList .on {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #D33333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listCon {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 68rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.listCon .img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
max-height: 450rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listCon .text {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 23rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moneyNum {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 115rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 46rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 23rpx;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding-bottom: 139rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
|
||||||
|
<button class="popup-btn" @tap="popup_bottom()">请选择</button>
|
||||||
|
<view>{{address}}</view>
|
||||||
|
<linkAddress
|
||||||
|
ref="linkAddress"
|
||||||
|
:height="height"
|
||||||
|
@confirmCallback="confirmCallback()"
|
||||||
|
>
|
||||||
|
</linkAddress>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import linkAddress from '../../components/xuan-linkAddress/xuan-linkAddress.vue'
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
linkAddress
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: '500px',
|
||||||
|
address:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//点击弹出弹窗
|
||||||
|
popup_bottom: function() {
|
||||||
|
this.height = '550rpx';
|
||||||
|
//显示
|
||||||
|
this.show_popup();
|
||||||
|
|
||||||
|
},
|
||||||
|
//显示弹窗
|
||||||
|
show_popup: function() {
|
||||||
|
this.$refs.linkAddress.show();
|
||||||
|
},
|
||||||
|
//回掉
|
||||||
|
confirmCallback: function() {
|
||||||
|
let ads=this.$store.state.user_address;
|
||||||
|
this.address=ads.province+ads.city+ads.district;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.popup-btn{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
<view class="logo">
|
||||||
|
<image class="img" src="../../static/23.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="name">
|
||||||
|
家具
|
||||||
|
</view>
|
||||||
|
<button open-type="getUserInfo" @click="getUserProfile()" type="default" class="button">
|
||||||
|
微信授权
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<view class="text">
|
||||||
|
登录代表您已同意 <navigator class="on" url="">《用户服务协议》</navigator>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getUserProfile(e) {
|
||||||
|
let that = this
|
||||||
|
wx.getUserProfile({
|
||||||
|
desc: '用于完善会员资料',
|
||||||
|
success: (userRes) => {
|
||||||
|
console.log(userRes)
|
||||||
|
wx.login({
|
||||||
|
success(res) {
|
||||||
|
that.request({
|
||||||
|
url: that.host + "/api/user/login",
|
||||||
|
type:"POST",
|
||||||
|
data: {
|
||||||
|
code: res.code,
|
||||||
|
nickname: userRes.userInfo.nickName,
|
||||||
|
headimgurl: userRes.userInfo.avatarUrl
|
||||||
|
},
|
||||||
|
success:function(data){
|
||||||
|
uni.setStorageSync('userData',data.data.data);
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/personalCenter/personalCenter'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.logo {
|
||||||
|
width: 200rpx;
|
||||||
|
margin: auto;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-top: 150rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
width: 630rpx;
|
||||||
|
background-color: #1aad19 !important;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 30vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text .on {
|
||||||
|
color: #007AFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,536 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<page-head text="修改信息" navState="true" brF="true"></page-head>
|
||||||
|
<view class="list">
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text">
|
||||||
|
头像
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
<image @click="headPortrait()" class="headPortrait" :src="userData.headimgurl" mode="aspectFill">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text">
|
||||||
|
昵称
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint">
|
||||||
|
<view class="text">
|
||||||
|
Anita Rose
|
||||||
|
</view>
|
||||||
|
<view class="arrows">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text">
|
||||||
|
真实姓名
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" @click="modification()">
|
||||||
|
<view class="text">
|
||||||
|
{{userData.real_name}}
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text">
|
||||||
|
联系电话
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<button class="hint hintBUTTON" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||||||
|
<view class="text">
|
||||||
|
{{userData.mobile}}
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text">
|
||||||
|
联系地址
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" @tap="popup_bottom()">
|
||||||
|
<view class="text">
|
||||||
|
{{userData.address}}
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text">
|
||||||
|
详细地址
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" @click="modificationA()">
|
||||||
|
<view class="text">
|
||||||
|
{{userData.address_detail}}
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<view class="text" v-if="!userData.vip_code" >
|
||||||
|
会员码输入
|
||||||
|
</view>
|
||||||
|
<view class="text" v-else>
|
||||||
|
会员码
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" v-if="!userData.vip_code" @click="vipAoolyState()">
|
||||||
|
<view class="text">
|
||||||
|
输入会员码成为会员
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<view class="hint" v-if="userData.vip_code" >
|
||||||
|
<view class="text" v-if="userData.vip_code" >
|
||||||
|
{{userData.vip_code}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="make" v-if="makeState">
|
||||||
|
<view class="member">
|
||||||
|
<image class="memberGb" @click="cancelName()" src="../../static/gb.png" mode=""></image>
|
||||||
|
<view class="title">
|
||||||
|
姓名
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
姓名
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="name" placeholder="请输入姓名" placeholder-class="inpal" type="text"
|
||||||
|
value="" />
|
||||||
|
|
||||||
|
<view class="button" @click="changeInformation('real_name',name)">
|
||||||
|
提交修改
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="make" v-if="makeStateA">
|
||||||
|
<view class="member memberTextarea">
|
||||||
|
<image class="memberGb" @click="cancelTel()" src="../../static/gb.png" mode=""></image>
|
||||||
|
<view class="title">
|
||||||
|
详细地址
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
详细地址
|
||||||
|
</view>
|
||||||
|
<!-- <input placeholder="请输入详细地址" placeholder-class="inpal" type="text" value="" /> -->
|
||||||
|
<textarea class="inputTextarea" v-model="address_detail" placeholder-style="color:#000" placeholder="请输入详细地址"/>
|
||||||
|
<view class="button" @click="changeInformationAddress_detail()">
|
||||||
|
提交修改
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="make" v-if="memberStateApply">
|
||||||
|
<view class="member">
|
||||||
|
<image class="memberGb" @click="canceVipState()" src="../../static/gb.png" mode=""></image>
|
||||||
|
<view class="title">
|
||||||
|
会员码
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
会员码
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="invitee_vip_code" placeholder="请输入6位会员邀请码" placeholder-class="inpal" type="text" value="" />
|
||||||
|
|
||||||
|
<view class="button" @click="SubmitValidation()">
|
||||||
|
提交验证
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<linkAddress ref="linkAddress" :height="height" @confirmCallback="confirmCallback">
|
||||||
|
</linkAddress>
|
||||||
|
<tab stateTab="center"></tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tab from "../../component/tab.vue";
|
||||||
|
import linkAddress from '../../components/xuan-linkAddress/xuan-linkAddress.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
linkAddress,
|
||||||
|
tab
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: "请您输入姓名",
|
||||||
|
height: '500px',
|
||||||
|
makeState: false,
|
||||||
|
makeStateA: false,
|
||||||
|
invitee_vip_code:"",
|
||||||
|
address_detail:"",
|
||||||
|
memberStateApply:false,
|
||||||
|
tel: "",
|
||||||
|
name: "",
|
||||||
|
userData: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
this.getUserData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
canceVipState() {
|
||||||
|
this.memberStateApply = false
|
||||||
|
},
|
||||||
|
SubmitValidation(){
|
||||||
|
if(this.invitee_vip_code){
|
||||||
|
this.memberStateApply = false
|
||||||
|
this.changeInformation("vip_code",this.invitee_vip_code)
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
title: '请填写会员码',
|
||||||
|
icon:"error",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
getPhoneNumber(e) {
|
||||||
|
console.log()
|
||||||
|
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/user/bind-phone",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
iv: e.detail.iv,
|
||||||
|
encryptedData:e.detail.encryptedData
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.getUserData()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
vipAooly() {
|
||||||
|
this.memberStateApply = true
|
||||||
|
},
|
||||||
|
changeInformationAddress_detail(){
|
||||||
|
if(this.address_detail){
|
||||||
|
this.makeStateA=false
|
||||||
|
this.changeInformation("address_detail",this.address_detail)
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
title: '请正确填写地址',
|
||||||
|
icon:"error",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
getUserData(){
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/user/info",
|
||||||
|
type: "post",
|
||||||
|
success: (res) => {
|
||||||
|
|
||||||
|
this.userData = res.data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeInformation(key, value) {
|
||||||
|
this.makeState = false
|
||||||
|
console.log(key, value)
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/user/editInfo",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
field: key,
|
||||||
|
value: value
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.getUserData()
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
changeInformationTel() {
|
||||||
|
this.requestToken({
|
||||||
|
url: "/api/user/bind-phone",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
field: key,
|
||||||
|
value: value
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 打开姓名修改弹窗
|
||||||
|
modification(text) {
|
||||||
|
|
||||||
|
this.makeState = true
|
||||||
|
},
|
||||||
|
modificationA(text) {
|
||||||
|
|
||||||
|
this.makeStateA = true
|
||||||
|
},
|
||||||
|
cancelName() {
|
||||||
|
this.makeState = false
|
||||||
|
},
|
||||||
|
cancelTel() {
|
||||||
|
this.makeStateA = false
|
||||||
|
},
|
||||||
|
//点击弹出弹窗
|
||||||
|
popup_bottom: function() {
|
||||||
|
this.height = '550rpx';
|
||||||
|
//显示
|
||||||
|
this.show_popup();
|
||||||
|
|
||||||
|
},
|
||||||
|
//显示弹窗
|
||||||
|
show_popup: function() {
|
||||||
|
this.$refs.linkAddress.show();
|
||||||
|
},
|
||||||
|
//回掉
|
||||||
|
confirmCallback: function(data) {
|
||||||
|
let ads = data
|
||||||
|
this.address=""
|
||||||
|
if(ads.province){
|
||||||
|
this.address+= ads.province
|
||||||
|
}
|
||||||
|
if(ads.city){
|
||||||
|
this.address+="-"+ads.city
|
||||||
|
}
|
||||||
|
if(ads.district){
|
||||||
|
this.address+= "-"+ads.district
|
||||||
|
}
|
||||||
|
this.changeInformation("address",this.address)
|
||||||
|
},
|
||||||
|
headPortrait() {
|
||||||
|
let userData = uni.getStorageSync('userData')
|
||||||
|
uni.chooseImage({
|
||||||
|
success: (chooseImageRes) => {
|
||||||
|
console.log(chooseImageRes)
|
||||||
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||||
|
console.log(tempFilePaths)
|
||||||
|
uni.uploadFile({
|
||||||
|
url: this.host + '/api/file/upload/image', //仅为示例，非真实的接口地址
|
||||||
|
filePath: tempFilePaths[0],
|
||||||
|
header: {
|
||||||
|
"Authorization": "Bearer " + userData.token,
|
||||||
|
},
|
||||||
|
name: 'image',
|
||||||
|
success: (uploadFileRes) => {
|
||||||
|
|
||||||
|
this.changeInformation("headimgurl", JSON.parse(uploadFileRes
|
||||||
|
.data).data.src)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.list {
|
||||||
|
margin-top: 13rpx;
|
||||||
|
padding-bottom: 32rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 40rpx 40rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .con {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
padding: 15rpx 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listName {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listName .img {
|
||||||
|
width: 43rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listName .text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
width: 14rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hintBUTTON {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
margin: 0rpx;
|
||||||
|
border: none;
|
||||||
|
padding: 0rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint .text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8c8c9b;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hintBUTTON::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headPortrait {
|
||||||
|
width: 136rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
height: 136rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.makeCon {
|
||||||
|
width: 600rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.makeList {}
|
||||||
|
|
||||||
|
.makeList .button {
|
||||||
|
width: 160rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.makeList .input {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #8c8c9b;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding-left: 28rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.makeList .textarea {
|
||||||
|
height: 200rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intPal {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.make {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
left: 0rpx;
|
||||||
|
top: 0rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
width: 658rpx;
|
||||||
|
height: 494rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
padding: 58rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .name {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .input {
|
||||||
|
border-bottom: 1px #e6e6e6 solid;
|
||||||
|
padding: 0rpx 0rpx 20rpx 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inpal {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 30rpx
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .button {
|
||||||
|
width: 559rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 98rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
margin-top: 73rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberGb {
|
||||||
|
width: 77rpx;
|
||||||
|
height: 77rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: -38rpx;
|
||||||
|
top: -38rpx;
|
||||||
|
}
|
||||||
|
.memberTextarea{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.inputTextarea{
|
||||||
|
/* background-color: rgba(0,0,0,0.1) */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,438 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<page-head text="个人中心" brF="true"></page-head>
|
||||||
|
<view class="centerTop">
|
||||||
|
<view class="imgCon">
|
||||||
|
<image class="img" :src="userInfo.headimgurl" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="name">
|
||||||
|
{{userInfo.nickname}}
|
||||||
|
</view>
|
||||||
|
<view class="Id" v-if="userInfo.is_active==1">
|
||||||
|
（尊贵会员：{{userInfo}}）
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="list">
|
||||||
|
<navigator url="/pages/personalCenter/changeInformation" class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<image class="img" src="../../static/grzl.png" mode="widthFix"></image>
|
||||||
|
<view class="text">
|
||||||
|
个人资料
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<view class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<image class="img" src="../../static/hy.png" mode="widthFix"></image>
|
||||||
|
<view class="text" v-if="!userInfo.vip_code" >
|
||||||
|
会员码输入
|
||||||
|
</view>
|
||||||
|
<view class="text" v-else>
|
||||||
|
会员码
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" v-if="!userInfo.vip_code" @click="vipAoolyState()">
|
||||||
|
<view class="text">
|
||||||
|
输入会员码成为会员
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<view class="hint" v-if="userInfo.vip_code" >
|
||||||
|
<view class="text" v-if="userInfo.vip_code" >
|
||||||
|
{{userInfo.vip_code}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="con" v-if="!userInfo.vip_code">
|
||||||
|
<view class="listName">
|
||||||
|
<image class="img" src="../../static/sq.png" mode="widthFix"></image>
|
||||||
|
<view class="text">
|
||||||
|
会员申请
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint" @click="vipAooly()">
|
||||||
|
<view class="text">
|
||||||
|
申请成为会员可查看低价
|
||||||
|
</view>
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<navigator url="../aboutUs/aboutUs" class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<image class="img" src="../../static/gy.png" mode="widthFix"></image>
|
||||||
|
<view class="text">
|
||||||
|
关于我们
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<navigator url="../disclaimer/disclaimer" class="con">
|
||||||
|
<view class="listName">
|
||||||
|
<image class="img" src="../../static/nz.png" mode="widthFix"></image>
|
||||||
|
<view class="text">
|
||||||
|
免责声明
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
<image class="arrows" src="../../static/jt.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
</view>
|
||||||
|
<view class="make" v-if="memberState">
|
||||||
|
<view class="member">
|
||||||
|
<image class="memberGb" @click="canceVipState()" src="../../static/gb.png" mode=""></image>
|
||||||
|
<view class="title">
|
||||||
|
会员码
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
会员码
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="invitee_vip_code" placeholder="请输入6位会员邀请码" placeholder-class="inpal" type="text" value="" />
|
||||||
|
|
||||||
|
<view class="button" @click="SubmitValidation()">
|
||||||
|
提交验证
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="make" v-if="memberStateApply">
|
||||||
|
|
||||||
|
<view class="member">
|
||||||
|
|
||||||
|
<image class="memberGb" @click="canceVip()" src="../../static/gb.png" mode=""></image>
|
||||||
|
<view class="title">
|
||||||
|
会员申请
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
姓名
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="MembershipApplication.username" placeholder="请输入姓名" placeholder-class="inpal" type="text" value="" />
|
||||||
|
<view class="name">
|
||||||
|
联系电话
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="MembershipApplication.phone" placeholder="请输入联系电话" placeholder-class="inpal" type="text" value="" />
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
邀请人
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="MembershipApplication.invitee" placeholder="请输入邀请人姓名" placeholder-class="inpal" type="text" value="" />
|
||||||
|
|
||||||
|
<view class="name">
|
||||||
|
推荐码
|
||||||
|
</view>
|
||||||
|
<input class="input" v-model="MembershipApplication.invitee_vip_code" placeholder="请输入邀请人会员码" placeholder-class="inpal" type="text" value="" />
|
||||||
|
|
||||||
|
<view class="button" @click="applyMembership()">
|
||||||
|
提交验证
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<tab stateTab="center"></tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tab from "../../component/tab.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
tab
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
memberState: false,
|
||||||
|
memberStateApply: false,
|
||||||
|
userData: {},
|
||||||
|
userInfo:{},
|
||||||
|
invitee_vip_code:"",
|
||||||
|
MembershipApplication: {
|
||||||
|
username: "",
|
||||||
|
phone: "",
|
||||||
|
invitee: "",
|
||||||
|
invitee_vip_code: ""
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (uni.getStorageSync('userData')) {
|
||||||
|
this.userData = uni.getStorageSync('userData')
|
||||||
|
if (uni.getStorageSync('userData').is_write_vip_code== 0) {
|
||||||
|
this.userData.is_write_vip_code=1
|
||||||
|
uni.setStorageSync('userData',this.userData);
|
||||||
|
this.memberState = true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/index/login'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
console.log(uni.getStorageSync('userData'))
|
||||||
|
this.getUserData()
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getUserData(){
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/user/info",
|
||||||
|
type: "post",
|
||||||
|
success: (res) => {
|
||||||
|
|
||||||
|
this.userInfo = res.data.data
|
||||||
|
console.log(this.userInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeInformation(key, value) {
|
||||||
|
this.makeState = false
|
||||||
|
console.log(key, value)
|
||||||
|
this.requestToken({
|
||||||
|
url: this.host + "/api/user/editInfo",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
field: key,
|
||||||
|
value: value
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
this.getUserData()
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
SubmitValidation(){
|
||||||
|
if(this.invitee_vip_code){
|
||||||
|
this.memberState = false
|
||||||
|
this.changeInformation("vip_code",this.invitee_vip_code)
|
||||||
|
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
title: '请填写会员码',
|
||||||
|
icon:"error",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
applyMembership(){
|
||||||
|
|
||||||
|
|
||||||
|
if(!this.MembershipApplication.username){
|
||||||
|
uni.showToast({
|
||||||
|
title: '请填写姓名',
|
||||||
|
icon:"error",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
|
||||||
|
|
||||||
|
if( !reg_tel.test(this.MembershipApplication.phone)){
|
||||||
|
uni.showToast({
|
||||||
|
title: '请正确填写手机号',
|
||||||
|
icon:"error",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.requestToken({
|
||||||
|
url:this.host+"/api/user/apply-vip",
|
||||||
|
type:"post",
|
||||||
|
data:this.MembershipApplication,
|
||||||
|
success:(res)=>{
|
||||||
|
console.log(res)
|
||||||
|
uni.showToast({
|
||||||
|
title: res.data.msg,
|
||||||
|
icon:"success",
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
this.memberStateApply = false
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
vipAooly() {
|
||||||
|
this.memberStateApply = true
|
||||||
|
},
|
||||||
|
canceVip() {
|
||||||
|
this.memberStateApply = false
|
||||||
|
},
|
||||||
|
vipAoolyState() {
|
||||||
|
this.memberState = true
|
||||||
|
},
|
||||||
|
canceVipState() {
|
||||||
|
this.memberState = false
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.centerTop {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding-top: 33rpx;
|
||||||
|
padding-bottom: 44rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon {
|
||||||
|
width: 224rpx;
|
||||||
|
height: 224rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon .img {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Id {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #d33333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
margin-top: 13rpx;
|
||||||
|
padding-bottom: 32rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 40rpx 40rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .con {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
padding: 15rpx 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listName {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listName .img {
|
||||||
|
width: 43rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listName .text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
width: 14rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint .text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8c8c9b;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.make {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
left: 0rpx;
|
||||||
|
top: 0rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
width: 658rpx;
|
||||||
|
height: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
position: relative;
|
||||||
|
padding: 58rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberGb {
|
||||||
|
width: 77rpx;
|
||||||
|
height: 77rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: -38rpx;
|
||||||
|
top: -38rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .name {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .input {
|
||||||
|
border-bottom: 1px #e6e6e6 solid;
|
||||||
|
padding: 0rpx 0rpx 20rpx 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inpal {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 30rpx
|
||||||
|
}
|
||||||
|
|
||||||
|
.member .button {
|
||||||
|
width: 559rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 98rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
margin-top: 73rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
<template>
|
||||||
|
<view class="content pt">
|
||||||
|
<page-head text="搜索" navState="true" ></page-head>
|
||||||
|
<view class="top">
|
||||||
|
<view class="int">
|
||||||
|
<image class="intImg" src="../../static/ss.png" mode=""></image>
|
||||||
|
<input placeholder="搜索" v-model="inputVal" @input="inputFun()" placeholder-class="InputC" class="input" type="text" value="" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title" v-if="inputVal">
|
||||||
|
结果：{{inputVal}} <text class="cor">（{{total}}） </text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="classifyConList">
|
||||||
|
<view class="list" @click="details(item.id)" v-for="(item,index) in HomeData">
|
||||||
|
<image class="img" :src="item.cover" mode="aspectFill"></image>
|
||||||
|
<view class="text">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
<view class="textA">
|
||||||
|
<view class="money">
|
||||||
|
<text >￥</text>{{item.price_text}}
|
||||||
|
</view>
|
||||||
|
<view class="btn" v-if="item.customized==1">
|
||||||
|
可定制
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<uni-load-more v-if="loadStateIf" :status="loadState"></uni-load-more>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputVal:"",
|
||||||
|
total:0,
|
||||||
|
HomeData:[],
|
||||||
|
loadStateIf:false,
|
||||||
|
num:10,
|
||||||
|
record:"",
|
||||||
|
loadState:"more",
|
||||||
|
arr: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.arr.size= this.arr.size+this.num
|
||||||
|
|
||||||
|
if( (this.arr.page*this.arr.size) <=this.total+this.num ){
|
||||||
|
this.inputFun()
|
||||||
|
}else{
|
||||||
|
this.loadState="no-more"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
details(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/commodity/commodity?id=' + id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
inputFun(){
|
||||||
|
if(!this.inputVal){
|
||||||
|
this.HomeData=[]
|
||||||
|
this.loadStateIf=false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(this.record!=this.inputVal){
|
||||||
|
this.arr.size=this.num
|
||||||
|
this.record=this.inputVal
|
||||||
|
uni.pageScrollTo({
|
||||||
|
scrollTop: 0,
|
||||||
|
duration: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.loadState="loading"
|
||||||
|
this.request({
|
||||||
|
url: this.host + "/api/spu/home",
|
||||||
|
type: "post",
|
||||||
|
data: {
|
||||||
|
...this.arr,
|
||||||
|
keyword:this.inputVal
|
||||||
|
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
if(res.data.data.list.length>1){
|
||||||
|
this.loadStateIf=true
|
||||||
|
}
|
||||||
|
this.loadState="more",
|
||||||
|
|
||||||
|
this.HomeData = res.data.data.list
|
||||||
|
this.total = res.data.data.total
|
||||||
|
if( (this.arr.page*this.arr.size) <=this.total ){
|
||||||
|
|
||||||
|
}else{
|
||||||
|
this.loadState="no-more"
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.top{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
left: 0rpx;
|
||||||
|
padding-top: 170rpx;
|
||||||
|
top: 0rpx;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
padding-right: 40rpx;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.int {
|
||||||
|
width: 670rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
background-color: #DEDEDE;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dis {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.int .input {
|
||||||
|
padding-left: 107rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.InputC {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #8c8c9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intImg {
|
||||||
|
width: 40rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #000;
|
||||||
|
padding: 40rpx 0rpx 15rpx 0rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.title .cor{
|
||||||
|
color: #f8551c;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding-right: 40rpx;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
}
|
||||||
|
.classifyConList {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 200rpx;
|
||||||
|
padding-bottom: 60rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list {
|
||||||
|
width: 320rpx;
|
||||||
|
height: 433rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .img {
|
||||||
|
width: 319rpx;
|
||||||
|
height: 221rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .text {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 35rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA .money {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classifyConList .list .textA .btn {
|
||||||
|
font-size: 18rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 86rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 28rpx;
|
||||||
|
background-color: #D33333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
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.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
Binary file not shown.
|
After Width: | Height: | Size: 787 B |
Binary file not shown.
|
After Width: | Height: | Size: 721 B |
Binary file not shown.
|
After Width: | Height: | Size: 727 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
Binary file not shown.
|
After Width: | Height: | Size: 835 B |
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,33 @@
|
||||||
|
import api from '@/components/xuan-linkAddress/api.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/*
|
||||||
|
*_this:全局this
|
||||||
|
* data:数据(参数)
|
||||||
|
* callback:回掉
|
||||||
|
*/
|
||||||
|
get_linkAddress: function(_this,tag,data,callback) {
|
||||||
|
//请求
|
||||||
|
api.get_linkAddress_api(data).then((res) => {
|
||||||
|
let revert=res.data.data;
|
||||||
|
|
||||||
|
if(res.data.code==1){
|
||||||
|
if(tag==="province"){
|
||||||
|
console.log("province")
|
||||||
|
_this.linkAddress_area[0].info=revert;
|
||||||
|
callback(true);//回掉
|
||||||
|
}
|
||||||
|
if(tag==="city"){
|
||||||
|
console.log("city")
|
||||||
|
_this.linkAddress_area[1].info=revert;
|
||||||
|
callback(true);//回掉
|
||||||
|
}
|
||||||
|
if(tag==="district"){
|
||||||
|
console.log("district")
|
||||||
|
_this.linkAddress_area[2].info=revert;
|
||||||
|
callback(true);//回掉
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
//网络请求
|
||||||
|
export default class Request{
|
||||||
|
/*
|
||||||
|
*paramete 参数
|
||||||
|
* data 参数值
|
||||||
|
* method 请求方式
|
||||||
|
*/
|
||||||
|
http(paramete,data,method){
|
||||||
|
//根地址
|
||||||
|
let BASE_API="http://admin.farmereasy.com";
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
uni.request({
|
||||||
|
url:`${BASE_API}${paramete}`,
|
||||||
|
data:data,
|
||||||
|
method:method,
|
||||||
|
success:(res)=>{
|
||||||
|
resolve(res);
|
||||||
|
},
|
||||||
|
fail:(res)=>{
|
||||||
|
resolve(0);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,76 @@
|
||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$uni-color-primary: #007aff;
|
||||||
|
$uni-color-success: #4cd964;
|
||||||
|
$uni-color-warning: #f0ad4e;
|
||||||
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
$uni-text-color:#333;//基本色
|
||||||
|
$uni-text-color-inverse:#fff;//反色
|
||||||
|
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-text-color-disable:#c0c0c0;
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
$uni-bg-color:#ffffff;
|
||||||
|
$uni-bg-color-grey:#f8f8f8;
|
||||||
|
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||||
|
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||||
|
|
||||||
|
/* 边框颜色 */
|
||||||
|
$uni-border-color:#c8c7cc;
|
||||||
|
|
||||||
|
/* 尺寸变量 */
|
||||||
|
|
||||||
|
/* 文字尺寸 */
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-font-size-lg:16;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$uni-img-size-sm:20px;
|
||||||
|
$uni-img-size-base:26px;
|
||||||
|
$uni-img-size-lg:40px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
$uni-border-radius-sm: 2px;
|
||||||
|
$uni-border-radius-base: 3px;
|
||||||
|
$uni-border-radius-lg: 6px;
|
||||||
|
$uni-border-radius-circle: 50%;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
|
||||||
|
/* 垂直间距 */
|
||||||
|
$uni-spacing-col-sm: 4px;
|
||||||
|
$uni-spacing-col-base: 8px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
|
||||||
|
/* 透明度 */
|
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
|
/* 文章场景相关 */
|
||||||
|
$uni-color-title: #2C405A; // 文章标题颜色
|
||||||
|
$uni-font-size-title:20px;
|
||||||
|
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle:26px;
|
||||||
|
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph:15px;
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
## 1.3.3（2022-01-20）
|
||||||
|
- 新增 showText属性 ，是否显示文本
|
||||||
|
## 1.3.2（2022-01-19）
|
||||||
|
- 修复 nvue 平台下不显示文本的bug
|
||||||
|
## 1.3.1（2022-01-19）
|
||||||
|
- 修复 微信小程序平台样式选择器报警告的问题
|
||||||
|
## 1.3.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
## 1.2.1（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.2.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.8（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.7（2021-03-30）
|
||||||
|
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
|
||||||
|
## 1.1.6（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "Pull up to show more",
|
||||||
|
"uni-load-more.contentrefresh": "loading...",
|
||||||
|
"uni-load-more.contentnomore": "No more data"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉显示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加载...",
|
||||||
|
"uni-load-more.contentnomore": "没有更多数据了"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉顯示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加載...",
|
||||||
|
"uni-load-more.contentnomore": "沒有更多數據了"
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"id": "uni-load-more",
|
||||||
|
"displayName": "uni-load-more 加载更多",
|
||||||
|
"version": "1.3.3",
|
||||||
|
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"加载更多",
|
||||||
|
"load-more"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
|
||||||
|
### LoadMore 加载更多
|
||||||
|
> **组件名：uni-load-more**
|
||||||
|
> 代码块： `uLoadMore`
|
||||||
|
|
||||||
|
|
||||||
|
用于列表中，做滚动加载使用，展示 loading 的各种状态。
|
||||||
|
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
## 1.0.3（2022-01-21）
|
||||||
|
- 优化 组件示例
|
||||||
|
## 1.0.2（2021-11-22）
|
||||||
|
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||||
|
## 1.0.1（2021-11-22）
|
||||||
|
- 修复 vue3中scss语法兼容问题
|
||||||
|
## 1.0.0（2021-11-18）
|
||||||
|
- init
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import './styles/index.scss';
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
{
|
||||||
|
"id": "uni-scss",
|
||||||
|
"displayName": "uni-scss 辅助样式",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-ui",
|
||||||
|
"辅助样式"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"JS SDK",
|
||||||
|
"通用 SDK"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "n",
|
||||||
|
"联盟": "n"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import './setting/_variables.scss';
|
||||||
|
@import './setting/_border.scss';
|
||||||
|
@import './setting/_color.scss';
|
||||||
|
@import './setting/_space.scss';
|
||||||
|
@import './setting/_radius.scss';
|
||||||
|
@import './setting/_text.scss';
|
||||||
|
@import './setting/_styles.scss';
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.uni-border {
|
||||||
|
border: 1px $uni-border-1 solid;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
|
||||||
|
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
|
||||||
|
// @mixin get-styles($k,$c) {
|
||||||
|
// @if $k == size or $k == weight{
|
||||||
|
// font-#{$k}:#{$c}
|
||||||
|
// }@else{
|
||||||
|
// #{$k}:#{$c}
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
$uni-ui-color:(
|
||||||
|
// 主色
|
||||||
|
primary: $uni-primary,
|
||||||
|
primary-disable: $uni-primary-disable,
|
||||||
|
primary-light: $uni-primary-light,
|
||||||
|
// 辅助色
|
||||||
|
success: $uni-success,
|
||||||
|
success-disable: $uni-success-disable,
|
||||||
|
success-light: $uni-success-light,
|
||||||
|
warning: $uni-warning,
|
||||||
|
warning-disable: $uni-warning-disable,
|
||||||
|
warning-light: $uni-warning-light,
|
||||||
|
error: $uni-error,
|
||||||
|
error-disable: $uni-error-disable,
|
||||||
|
error-light: $uni-error-light,
|
||||||
|
info: $uni-info,
|
||||||
|
info-disable: $uni-info-disable,
|
||||||
|
info-light: $uni-info-light,
|
||||||
|
// 中性色
|
||||||
|
main-color: $uni-main-color,
|
||||||
|
base-color: $uni-base-color,
|
||||||
|
secondary-color: $uni-secondary-color,
|
||||||
|
extra-color: $uni-extra-color,
|
||||||
|
// 背景色
|
||||||
|
bg-color: $uni-bg-color,
|
||||||
|
// 边框颜色
|
||||||
|
border-1: $uni-border-1,
|
||||||
|
border-2: $uni-border-2,
|
||||||
|
border-3: $uni-border-3,
|
||||||
|
border-4: $uni-border-4,
|
||||||
|
// 黑色
|
||||||
|
black:$uni-black,
|
||||||
|
// 白色
|
||||||
|
white:$uni-white,
|
||||||
|
// 透明
|
||||||
|
transparent:$uni-transparent
|
||||||
|
) !default;
|
||||||
|
@each $key, $child in $uni-ui-color {
|
||||||
|
.uni-#{"" + $key} {
|
||||||
|
color: $child;
|
||||||
|
}
|
||||||
|
.uni-#{"" + $key}-bg {
|
||||||
|
background-color: $child;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-shadow-sm {
|
||||||
|
box-shadow: $uni-shadow-sm;
|
||||||
|
}
|
||||||
|
.uni-shadow-base {
|
||||||
|
box-shadow: $uni-shadow-base;
|
||||||
|
}
|
||||||
|
.uni-shadow-lg {
|
||||||
|
box-shadow: $uni-shadow-lg;
|
||||||
|
}
|
||||||
|
.uni-mask {
|
||||||
|
background-color:$uni-mask;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
@mixin radius($r,$d:null ,$important: false){
|
||||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||||
|
// Key exists within the $uni-radius variable
|
||||||
|
@if (map-has-key($uni-radius, $r) and $d){
|
||||||
|
@if $d == t {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == r {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == b {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == l {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}@else if $d == tl {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
}@else if $d == tr {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == br {
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == bl {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
border-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $key} {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius-#{$direction} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
|
||||||
|
@mixin fn($space,$direction,$size,$n) {
|
||||||
|
@if $n {
|
||||||
|
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||||
|
} @else {
|
||||||
|
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin get-styles($direction,$i,$space,$n){
|
||||||
|
@if $direction == t {
|
||||||
|
@include fn($space, top,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == r {
|
||||||
|
@include fn($space, right,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == b {
|
||||||
|
@include fn($space, bottom,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == l {
|
||||||
|
@include fn($space, left,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == x {
|
||||||
|
@include fn($space, left,$i,$n);
|
||||||
|
@include fn($space, right,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == y {
|
||||||
|
@include fn($space, top,$i,$n);
|
||||||
|
@include fn($space, bottom,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == a {
|
||||||
|
@if $n {
|
||||||
|
#{$space}:#{$i*$uni-space-root}px;
|
||||||
|
} @else {
|
||||||
|
#{$space}:#{-$i*$uni-space-root}px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $orientation in m,p {
|
||||||
|
$space: margin;
|
||||||
|
@if $orientation == m {
|
||||||
|
$space: margin;
|
||||||
|
} @else {
|
||||||
|
$space: padding;
|
||||||
|
}
|
||||||
|
@for $i from 0 through 16 {
|
||||||
|
@each $direction in t, r, b, l, x, y, a {
|
||||||
|
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||||
|
@include get-styles($direction,$i,$space,true);
|
||||||
|
}
|
||||||
|
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||||
|
@include get-styles($direction,$i,$space,false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
|
||||||
|
$-color-white:#fff;
|
||||||
|
$-color-black:#000;
|
||||||
|
@mixin base-style($color) {
|
||||||
|
color: #fff;
|
||||||
|
background-color: $color;
|
||||||
|
border-color: mix($-color-black, $color, 8%);
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: mix($-color-black, $color, 10%);
|
||||||
|
border-color: mix($-color-black, $color, 20%);
|
||||||
|
color: $-color-white;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin is-color($color) {
|
||||||
|
@include base-style($color);
|
||||||
|
&[loading] {
|
||||||
|
@include base-style($color);
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
color: $-color-white;
|
||||||
|
border-color: mix(darken($color,10%), $-color-white);
|
||||||
|
background-color: mix($color, $-color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@mixin base-plain-style($color) {
|
||||||
|
color:$color;
|
||||||
|
background-color: mix($-color-white, $color, 90%);
|
||||||
|
border-color: mix($-color-white, $color, 70%);
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: mix($-color-white, $color, 80%);
|
||||||
|
color: $color;
|
||||||
|
outline: none;
|
||||||
|
border-color: mix($-color-white, $color, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin is-plain($color){
|
||||||
|
&[plain] {
|
||||||
|
@include base-plain-style($color);
|
||||||
|
&[loading] {
|
||||||
|
@include base-plain-style($color);
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
&,
|
||||||
|
&:active {
|
||||||
|
color: mix($-color-white, $color, 40%);
|
||||||
|
background-color: mix($-color-white, $color, 90%);
|
||||||
|
border-color: mix($-color-white, $color, 80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-btn {
|
||||||
|
margin: 5px;
|
||||||
|
color: #393939;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 200;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
// TODO 暂时处理边框隐藏一边的问题
|
||||||
|
overflow: visible;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([type]),&[type=default] {
|
||||||
|
color: #999;
|
||||||
|
&[loading] {
|
||||||
|
background: none;
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&[disabled]{
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:active {
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
background-color: mix($-color-white,$-color-black , 98%);
|
||||||
|
border-color: mix($-color-white, #999, 85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[plain] {
|
||||||
|
color: #999;
|
||||||
|
background: none;
|
||||||
|
border-color: $uni-border-1;
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: none;
|
||||||
|
color: mix($-color-white, $-color-black, 80%);
|
||||||
|
border-color: mix($-color-white, $-color-black, 90%);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
&[disabled]{
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:active {
|
||||||
|
background: none;
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
border-color: mix($-color-white, #999, 85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
color: mix($-color-white, $-color-black, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[size=mini] {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 200;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.uni-btn-small {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&.uni-btn-mini {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.uni-btn-radius {
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
&[type=primary] {
|
||||||
|
@include is-color($uni-primary);
|
||||||
|
@include is-plain($uni-primary)
|
||||||
|
}
|
||||||
|
&[type=success] {
|
||||||
|
@include is-color($uni-success);
|
||||||
|
@include is-plain($uni-success)
|
||||||
|
}
|
||||||
|
&[type=error] {
|
||||||
|
@include is-color($uni-error);
|
||||||
|
@include is-plain($uni-error)
|
||||||
|
}
|
||||||
|
&[type=warning] {
|
||||||
|
@include is-color($uni-warning);
|
||||||
|
@include is-plain($uni-warning)
|
||||||
|
}
|
||||||
|
&[type=info] {
|
||||||
|
@include is-color($uni-info);
|
||||||
|
@include is-plain($uni-info)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
@mixin get-styles($k,$c) {
|
||||||
|
@if $k == size or $k == weight{
|
||||||
|
font-#{$k}:#{$c}
|
||||||
|
}@else{
|
||||||
|
#{$k}:#{$c}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-headings {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
.container .uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
// @use "sass:math";
|
||||||
|
@import '../tools/functions.scss';
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2 !default;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px !default;
|
||||||
|
$uni-radius: () !default;
|
||||||
|
// 边框半径断点
|
||||||
|
$uni-radius: map-deep-merge(
|
||||||
|
(
|
||||||
|
0: 0,
|
||||||
|
// TODO 当前版本暂时不支持 sm 属性
|
||||||
|
// 'sm': math.div($uni-radius-root, 2),
|
||||||
|
null: $uni-radius-root,
|
||||||
|
'lg': $uni-radius-root * 2,
|
||||||
|
'xl': $uni-radius-root * 6,
|
||||||
|
'pill': 9999px,
|
||||||
|
'circle': 50%
|
||||||
|
),
|
||||||
|
$uni-radius
|
||||||
|
);
|
||||||
|
// 字体家族
|
||||||
|
$body-font-family: 'Roboto', sans-serif !default;
|
||||||
|
// 文本
|
||||||
|
$heading-font-family: $body-font-family !default;
|
||||||
|
$uni-headings: () !default;
|
||||||
|
$letterSpacing: -0.01562em;
|
||||||
|
$uni-headings: map-deep-merge(
|
||||||
|
(
|
||||||
|
'h1': (
|
||||||
|
size: 32px,
|
||||||
|
weight: 300,
|
||||||
|
line-height: 50px,
|
||||||
|
// letter-spacing:-0.01562em
|
||||||
|
),
|
||||||
|
'h2': (
|
||||||
|
size: 28px,
|
||||||
|
weight: 300,
|
||||||
|
line-height: 40px,
|
||||||
|
// letter-spacing: -0.00833em
|
||||||
|
),
|
||||||
|
'h3': (
|
||||||
|
size: 24px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 32px,
|
||||||
|
// letter-spacing: normal
|
||||||
|
),
|
||||||
|
'h4': (
|
||||||
|
size: 20px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 30px,
|
||||||
|
// letter-spacing: 0.00735em
|
||||||
|
),
|
||||||
|
'h5': (
|
||||||
|
size: 16px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 24px,
|
||||||
|
// letter-spacing: normal
|
||||||
|
),
|
||||||
|
'h6': (
|
||||||
|
size: 14px,
|
||||||
|
weight: 500,
|
||||||
|
line-height: 18px,
|
||||||
|
// letter-spacing: 0.0125em
|
||||||
|
),
|
||||||
|
'subtitle': (
|
||||||
|
size: 12px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 20px,
|
||||||
|
// letter-spacing: 0.00937em
|
||||||
|
),
|
||||||
|
'body': (
|
||||||
|
font-size: 14px,
|
||||||
|
font-weight: 400,
|
||||||
|
line-height: 22px,
|
||||||
|
// letter-spacing: 0.03125em
|
||||||
|
),
|
||||||
|
'caption': (
|
||||||
|
'size': 12px,
|
||||||
|
'weight': 400,
|
||||||
|
'line-height': 20px,
|
||||||
|
// 'letter-spacing': 0.03333em,
|
||||||
|
// 'text-transform': false
|
||||||
|
)
|
||||||
|
),
|
||||||
|
$uni-headings
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||||
|
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||||
|
$uni-success: #18bc37 !default;
|
||||||
|
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||||
|
$uni-success-light: lighten($uni-success,25%) !default;
|
||||||
|
|
||||||
|
$uni-warning: #f3a73f !default;
|
||||||
|
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||||
|
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||||
|
|
||||||
|
$uni-error: #e43d33 !default;
|
||||||
|
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||||
|
$uni-error-light: lighten($uni-error,25%) !default;
|
||||||
|
|
||||||
|
$uni-info: #8f939c !default;
|
||||||
|
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||||
|
$uni-info-light: lighten($uni-info,25%) !default;
|
||||||
|
|
||||||
|
// 中性色
|
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||||
|
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||||
|
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||||
|
$uni-secondary-color: #909399 !default; // 次要文字
|
||||||
|
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #F0F0F0 !default;
|
||||||
|
$uni-border-2: #EDEDED !default;
|
||||||
|
$uni-border-3: #DCDCDC !default;
|
||||||
|
$uni-border-4: #B9B9B9 !default;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000 !default;
|
||||||
|
$uni-white: #ffffff !default;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f7f7f7 !default;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-sm: 8px !default;
|
||||||
|
$uni-spacing-base: 15px !default;
|
||||||
|
$uni-spacing-lg: 30px !default;
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||||
|
|
||||||
|
// 蒙版
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
// 合并 map
|
||||||
|
@function map-deep-merge($parent-map, $child-map){
|
||||||
|
$result: $parent-map;
|
||||||
|
@each $key, $child in $child-map {
|
||||||
|
$parent-has-key: map-has-key($result, $key);
|
||||||
|
$parent-value: map-get($result, $key);
|
||||||
|
$parent-type: type-of($parent-value);
|
||||||
|
$child-type: type-of($child);
|
||||||
|
$parent-is-map: $parent-type == map;
|
||||||
|
$child-is-map: $child-type == map;
|
||||||
|
|
||||||
|
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||||
|
$result: map-merge($result, ( $key: $child ));
|
||||||
|
}@else {
|
||||||
|
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $result;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px;
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff;
|
||||||
|
// 辅助色
|
||||||
|
$uni-success: #4cd964;
|
||||||
|
// 警告色
|
||||||
|
$uni-warning: #f0ad4e;
|
||||||
|
// 错误色
|
||||||
|
$uni-error: #dd524d;
|
||||||
|
// 描述色
|
||||||
|
$uni-info: #909399;
|
||||||
|
// 中性色
|
||||||
|
$uni-main-color: #303133;
|
||||||
|
$uni-base-color: #606266;
|
||||||
|
$uni-secondary-color: #909399;
|
||||||
|
$uni-extra-color: #C0C4CC;
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f5f5f5;
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #DCDFE6;
|
||||||
|
$uni-border-2: #E4E7ED;
|
||||||
|
$uni-border-3: #EBEEF5;
|
||||||
|
$uni-border-4: #F2F6FC;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000;
|
||||||
|
$uni-white: #ffffff;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
@import './styles/setting/_variables.scss';
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px;
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff;
|
||||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||||
|
$uni-success: #18bc37;
|
||||||
|
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||||
|
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||||
|
|
||||||
|
$uni-warning: #f3a73f;
|
||||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||||
|
|
||||||
|
$uni-error: #e43d33;
|
||||||
|
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||||
|
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||||
|
|
||||||
|
$uni-info: #8f939c;
|
||||||
|
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||||
|
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||||
|
|
||||||
|
// 中性色
|
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||||
|
$uni-main-color: #3a3a3a; // 主要文字
|
||||||
|
$uni-base-color: #6a6a6a; // 常规文字
|
||||||
|
$uni-secondary-color: #909399; // 次要文字
|
||||||
|
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #F0F0F0;
|
||||||
|
$uni-border-2: #EDEDED;
|
||||||
|
$uni-border-3: #DCDCDC;
|
||||||
|
$uni-border-4: #B9B9B9;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000;
|
||||||
|
$uni-white: #ffffff;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f7f7f7;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-sm: 8px;
|
||||||
|
$uni-spacing-base: 15px;
|
||||||
|
$uni-spacing-lg: 30px;
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||||
|
|
||||||
|
// 蒙版
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
||||||
Loading…
Reference in New Issue