家具第一次提交
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