@ -0,0 +1,18 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "@/uni_modules/uview-ui/index.scss";
|
||||
</style>
|
@ -0,0 +1,294 @@
|
||||
<!--
|
||||
上传图片组件 基于uview upload
|
||||
:action STring 上传文件的接口 可以不传 会有当前默认的参数
|
||||
:maxSize String 最大尺寸
|
||||
:maxNum String 最大数量
|
||||
:upHeaderFild String 请求后端字段头
|
||||
:echoPicList Array 回显图片列表
|
||||
:headerWithJti Object 请求头 可以不传 会有当前默认的参数
|
||||
:showProgress Boolean 是否显示进度条
|
||||
:limitTypeList Array 限制文件类型 ['png', 'jpg', 'jpeg']
|
||||
:showTipsNumber Boolean 是否显示上传数量限制
|
||||
@okCallBack fn 回调上传列表
|
||||
:oneNumberStyle Boolean 当图片最大值为1时可以通过次来使数量显示紧挨后面
|
||||
-->
|
||||
<template>
|
||||
<view style="display: flex;flex-wrap: wrap;" :class="{agreementImage:oneNumberStyle}" class="agreementImage">
|
||||
<span v-for="(item,index) in value" :key="index" :style="{width:width,height:height,marginRight: (value.length == index + 1 )? '' : '16rpx',marginBottom:(value.length == index + 1 )? '' : '10rpx',position:'relative'}" >
|
||||
<u-image :fade="false" :src="item[filePath]" width="100%" height="100%" @click="imageClick(item,index)">
|
||||
<image slot="loading" :style="{width:width,height:height}" :src="loadSrcFn(item[filePath])"></image>
|
||||
</u-image>
|
||||
<view class="del-icon" v-if="delIcon" @tap.stop="deleteItem(item,index)">
|
||||
<u-icon name="close" color="#fff" size="15" ></u-icon>
|
||||
</view>
|
||||
</span>
|
||||
<u-upload ref="uUpload"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:action="actionCompute"
|
||||
:max-size="maxSize * 1024 * 1024"
|
||||
:max-count="maxNum - value.length"
|
||||
:show-upload-list="false"
|
||||
:name="upHeaderFild"
|
||||
:file-list="oldList"
|
||||
:header="headerWithJtiCompute"
|
||||
:show-progress='showProgress'
|
||||
:uploadText="uploadText"
|
||||
defaultMaxCountFlag
|
||||
echoFlag
|
||||
@on-uploaded="loadShow = false"
|
||||
@on-error="upError"
|
||||
@on-success="imageSuccess"
|
||||
@on-choose-complete="imageComplete"
|
||||
:limitType="limitTypeList"
|
||||
></u-upload>
|
||||
<view class="number-tips end" v-if="showTipsNumber">
|
||||
({{value.length}}/{{maxNum}})
|
||||
</view>
|
||||
<my-loading :load-show="loadShow" ref="auiLoading" :mask="true"></my-loading>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// import "common/lixing-pbulic.scss"
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
// 上传数量
|
||||
certificatesNum:"0",
|
||||
// 当前图片列表 会在每次上传删除时回调给父组件
|
||||
nowList:[],
|
||||
// 回显图片
|
||||
oldList:[],
|
||||
// 要删除的图片
|
||||
removeList:[],
|
||||
loadShow:false,
|
||||
lists:[],//本次上传成功的本地图片列表用来当作加载中图片回显用
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
actionCompute(){
|
||||
if(!this.action){
|
||||
return this.$baseURL.baseURL + '/base/file/upload'
|
||||
}else{
|
||||
return this.action
|
||||
}
|
||||
},
|
||||
headerWithJtiCompute(){
|
||||
if(!this.headerWithJti){
|
||||
return {
|
||||
"jti":this.vuex_user.jti // token验证
|
||||
}
|
||||
}else{
|
||||
return this.headerWithJti
|
||||
}
|
||||
}
|
||||
},
|
||||
props:{
|
||||
value:{
|
||||
type: Array,
|
||||
default:() => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:'200rpx'
|
||||
},
|
||||
height:{
|
||||
type:String,
|
||||
default:'200rpx'
|
||||
},
|
||||
// 上传成功后文件id 的 key 回显文件的key
|
||||
fileId: {
|
||||
type: String,
|
||||
default: "fileId",
|
||||
},
|
||||
// 上传成功后文件path 的 key 回显文件的key
|
||||
filePath: {
|
||||
type: String,
|
||||
default: "filePath",
|
||||
},
|
||||
thumbnailPath:{
|
||||
type: String,
|
||||
default: "thumbnailPath",
|
||||
},
|
||||
// 是否可删除
|
||||
delIcon:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 上传成功是否显示sort值
|
||||
sortFlag:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 是否需要缩略图
|
||||
thumbnailFlag:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
loadSrc:{
|
||||
type:String,
|
||||
default:"http://file.hecrab.com/crab-net/yxs-loading.gif"
|
||||
},
|
||||
// 上传文件的接口
|
||||
action:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
// 最大尺寸
|
||||
maxSize:{
|
||||
type:[String,Number],
|
||||
default: '5' //'5 * 1024 * 1024'
|
||||
},
|
||||
// 最大数量
|
||||
maxNum:{
|
||||
type:[String,Number],
|
||||
default:'1'
|
||||
},
|
||||
// 请求后端字段头
|
||||
upHeaderFild:{
|
||||
type:String,
|
||||
default:'multipartFile'
|
||||
},
|
||||
// 回显图片列表
|
||||
echoPicList:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 请求头
|
||||
headerWithJti:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return null
|
||||
}
|
||||
},
|
||||
// 是否显示进度条
|
||||
showProgress:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 限制文件类型
|
||||
limitTypeList:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return ['png', 'jpg', 'jpeg']
|
||||
}
|
||||
},
|
||||
// 是否显示上传数量限制
|
||||
showTipsNumber:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
oneNumberStyle:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 上传区域的提示文字
|
||||
uploadText: {
|
||||
type: String,
|
||||
default: '选择图片'
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
upload(){
|
||||
this.$refs.uUpload.upload()
|
||||
},
|
||||
// 删除图片事件
|
||||
deleteItem(item, index){
|
||||
uni.showModal({
|
||||
title:"提示",
|
||||
content:"您确定要删除此项吗",
|
||||
success:res=>{
|
||||
if(res.confirm){
|
||||
let list = JSON.parse(JSON.stringify(this.value))
|
||||
list.splice(index , 1);
|
||||
this.$emit('input', list)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 上传成功
|
||||
imageSuccess(res, index, file, name) {
|
||||
if(!res.flag){
|
||||
// this.loadShow = false
|
||||
return this.myError(res.msg);
|
||||
}
|
||||
if(this.value.length >= this.maxNum) return this.$u.toast("超出上传图片数量!")
|
||||
let successImg = {
|
||||
[this.fileId]: res.data.id,
|
||||
[this.filePath]: res.data.fullPath,
|
||||
}
|
||||
if(this.sortFlag)successImg.sort = this.value.length
|
||||
if(this.thumbnailFlag){
|
||||
successImg[this.thumbnailPath] = res.data.thumbnailPath
|
||||
}
|
||||
let list = JSON.parse(JSON.stringify(this.value))
|
||||
list.push(successImg)
|
||||
this.$emit('input', list)
|
||||
// this.loadShow = false
|
||||
this.$emit("okCallBack" , list);
|
||||
this.lists = file
|
||||
console.log(file)
|
||||
|
||||
},
|
||||
imageComplete(){
|
||||
this.removeList=[]
|
||||
this.loadShow = true
|
||||
},
|
||||
imageClick(item,index){
|
||||
let list = this.value.map((item) => {
|
||||
return item[this.filePath]
|
||||
});
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current:index
|
||||
});
|
||||
},
|
||||
// 抛错
|
||||
upError(res, index, lists, name){
|
||||
this.loadShow = false
|
||||
// this.$u.toast(res)
|
||||
},
|
||||
// 如果找到了本地图片路径用本地路径加载图片 否则用默认加载中图片
|
||||
loadSrcFn(path){
|
||||
let index = this.lists.findIndex(item=>{
|
||||
return item.response && item.response.data && item.response.data.fullPath == path
|
||||
})
|
||||
return index > -1 ? this.lists[index].url || this.loadSrc : this.loadSrc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.number-tips{
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
text-align: right;
|
||||
}
|
||||
.del-icon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
background-color: #fa3534;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.agreementImage{
|
||||
display: flex;
|
||||
.end{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-tabbar
|
||||
class="tabBar"
|
||||
:value="current?current:0"
|
||||
@change="changeTab"
|
||||
fixed="true"
|
||||
safeAreaInsetBottom="true"
|
||||
active-color="#4D5566"
|
||||
inactive-color="#848FA5"
|
||||
>
|
||||
<u-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text">
|
||||
<image class="tabBarBtn" :src="item.iconPath" slot="inactive-icon"></image>
|
||||
<image class="tabBarBtn" :src="item.selectedIconPath" slot="active-icon"></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"TabBar",
|
||||
props:{
|
||||
current:Number
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
list:[{
|
||||
iconPath:"/static/img/home.png",
|
||||
selectedIconPath:"/static/img/homeHL.png",
|
||||
pagePath:"pages/cloudStore/cloudStoreList",
|
||||
text:"主页",
|
||||
customIcon:false
|
||||
},
|
||||
{
|
||||
iconPath:"/static/img/user.png",
|
||||
selectedIconPath:"/static/img/userHL.png",
|
||||
pagePath:"pages/index/index",
|
||||
text:'我的',
|
||||
customIcon:false
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//页面跳转
|
||||
changeTab(e){
|
||||
//console.log(e)
|
||||
uni.switchTab({
|
||||
url:'/'+this.list[e].pagePath
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tabBar{
|
||||
font-size: 20rpx;
|
||||
color: #0066D6;
|
||||
}
|
||||
.tabBarBtn{
|
||||
width: 36rpx;
|
||||
height: 39rpx;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<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,24 @@
|
||||
import App from './App'
|
||||
import uView from '@/uni_modules/uview-ui'
|
||||
Vue.use(uView)
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
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,72 @@
|
||||
{
|
||||
"name" : "3",
|
||||
"appid" : "",
|
||||
"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
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="cloudStoreDeatil">
|
||||
<u-navbar
|
||||
fixed="true"
|
||||
leftIconColor="#FFF"
|
||||
:bgColor="background"
|
||||
></u-navbar>
|
||||
<view class="topImgCon">
|
||||
<image src="https://wx1.sinaimg.cn/large/006WYq6ngy1hrj1dubvugj30u00u0n09.jpg" class="topBg" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="shopTip">
|
||||
<view class="left">
|
||||
<image src="https://wx3.sinaimg.cn/large/006TzZ4Ugy1hs3zsj97f8j31jk1jkqep.jpg"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
|
||||
<view class="box2">
|
||||
<u-rate :count="count" v-model="value" allowHalf="true"></u-rate>
|
||||
<text class="rateValue"> {{value}}</text>
|
||||
</view>
|
||||
<view class="box3">
|
||||
<view class="label1">
|
||||
<image src="https://files.hecrab.com/crab-net/cloud-store-list-5.png" mode="aspectFit"></image>
|
||||
<text>三码合一</text>
|
||||
</view>
|
||||
<view class="label2">
|
||||
<image src="https://files.hecrab.com/crab-net/cloud-store-list-1.png" mode="aspectFit"></image>
|
||||
<text>验蟹师品质保</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopBody">
|
||||
<view class="bodyHeader">
|
||||
<view v-for="(item,index) in tabList" :key="item.value" class="itemBox" @click="clickTab(item)" :class="index==activeID ? 'active'+activeID : ''">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<dropshipping v-if="activeID==0"></dropshipping>
|
||||
<coupons-act v-if="activeID==1"></coupons-act>
|
||||
<whole-sales v-if="activeID==2"></whole-sales>
|
||||
<shop-introduce v-if="activeID==3"></shop-introduce>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dropshipping from './components/dropshipping.vue';
|
||||
import couponsAct from './components/couponsAct.vue';
|
||||
import wholeSales from './components/wholeSales.vue'
|
||||
import shopIntroduce from './components/shopIntroduce.vue';
|
||||
export default {
|
||||
components:{dropshipping,couponsAct,wholeSales,shopIntroduce},
|
||||
data(){
|
||||
return{
|
||||
background:'transparent',
|
||||
count:5,
|
||||
value:4.5,
|
||||
tabList:[{
|
||||
name:'一键代发',
|
||||
value:'0'
|
||||
},
|
||||
{
|
||||
name:'卡券激活',
|
||||
value:'1'
|
||||
},
|
||||
{
|
||||
name:'批量采购',
|
||||
value:'2'
|
||||
},
|
||||
{
|
||||
name:'商家介绍',
|
||||
value:'3'
|
||||
}],
|
||||
activeID:2
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
clickTab(item){
|
||||
this.activeID = item.value;
|
||||
// console.log(item.value);
|
||||
// console.log("activeID",this.activeID);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cloudStoreDeatil{
|
||||
min-height: 100vh;
|
||||
background: #F5F5F6;
|
||||
}
|
||||
.topImgCon{
|
||||
height: 300rpx;
|
||||
width: 752rpx;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.topBg{
|
||||
width: 752rpx;
|
||||
position: relative;
|
||||
}
|
||||
.shopTip{
|
||||
width: 678rpx;
|
||||
height: 176rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 248rpx;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
.left>image{
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid rgba(0,0,0,0.1);
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.box1{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
width: 490rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.box2{
|
||||
display: flex;
|
||||
}
|
||||
.box3{
|
||||
display: flex;
|
||||
.label1{
|
||||
width: 156rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid rgba(6,115,237,0.3);
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding-top: 1rpx;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
>text{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #0673ED;
|
||||
}
|
||||
}
|
||||
.label2{
|
||||
width: 204rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid rgba(155,118,56,0.3);
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding-top: 1rpx;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
>text{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #9B7638;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shopBody{
|
||||
position: absolute;
|
||||
top: 452rpx;
|
||||
background: #FFFFFF;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
.bodyHeader{
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
|
||||
display: flex;
|
||||
.itemBox{
|
||||
width: 196rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
padding-top: 36rpx;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.active0{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #0066D6;
|
||||
text-align: center;
|
||||
background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-left.png");
|
||||
background-size: cover;
|
||||
width: 198rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
.active0{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #0066D6;
|
||||
text-align: center;
|
||||
background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-left.png");
|
||||
background-size: cover;
|
||||
width: 224rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
.active1{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #0066D6;
|
||||
text-align: center;
|
||||
background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-center.png");
|
||||
background-size: cover;
|
||||
width: 224rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
.active2{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #0066D6;
|
||||
text-align: center;
|
||||
background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-center.png");
|
||||
background-size: cover;
|
||||
width: 224rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
.active3{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #0066D6;
|
||||
text-align: center;
|
||||
background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-rate-tab-right.png");
|
||||
background-size: cover;
|
||||
width: 224rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<view class="coupousAct">
|
||||
<view class="activeCode">
|
||||
<u-input shape="square" maxlength="-1" placeholder="输入激活码"></u-input>
|
||||
<view ></view>
|
||||
</view>
|
||||
<view class="cardBody">
|
||||
<view class="card">
|
||||
<view class="left"></view>
|
||||
<view class="right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.coupousAct{
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<view class="dropshipping">
|
||||
<view class="searchTop">
|
||||
<u-search placeholder="搜索商品" shape="round" height="56rpx" style="width: 270rpx;" :showAction="false" ></u-search>
|
||||
<view :class="['filter-item',{act:activeId === item.value}]" v-for="item in filterList" :key="item.value" @clear="getData" @click="filterClick(item)" >
|
||||
<text class="filter-name">{{item.name}}</text>
|
||||
<u-icon name="arrow-down-fill" size="10"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail">
|
||||
<view class="goodsBox"v-for="(item,index) in 10">
|
||||
<image src="https://wx4.sinaimg.cn/large/006TzZ4Ugy1hs3zsjzgkfj31jk1jkwvr.jpg"></image>
|
||||
<text class="goodsName">商品名称</text>
|
||||
<view class="bottom">
|
||||
<text class="goodsPrice">0.60</text>
|
||||
<text class="sales">销量470,000+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
searchKeyword:"",
|
||||
filterList:[
|
||||
{name:"综合",value:0},
|
||||
{name:"价格",value:1},
|
||||
{name:"筛选",value:2},
|
||||
],
|
||||
activeId:0,
|
||||
dataList:[],
|
||||
searchForm: {
|
||||
//页码
|
||||
pageNum: 1,
|
||||
//每页多少条
|
||||
pageSize: 4,
|
||||
// 筛选 1 综合 2销量 es修改后只使用于物料
|
||||
sortType: 1,
|
||||
// 商品名称
|
||||
goodsName:'',
|
||||
// 店铺id
|
||||
flagshipShopId: '1',
|
||||
// 最低价格
|
||||
bottomPrice:'',
|
||||
// 最高价格
|
||||
topPrice:'',
|
||||
// 价格排序
|
||||
priceOrderFlag:'',
|
||||
},
|
||||
scrollTop: 636,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
filterClick(item){
|
||||
this.activeId = item.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dropshipping{
|
||||
min-height: 100vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
.searchTop{
|
||||
width: 750rpx;
|
||||
height: 92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rpx;
|
||||
box-sizing: border-box;
|
||||
.filter-item{
|
||||
width: 124rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F8FAFB;
|
||||
font-size: 28rpx;
|
||||
color: #868A9B;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 18rpx;
|
||||
margin-left: 8rpx ;
|
||||
&.act{
|
||||
color: #222222;
|
||||
background: #EDEEEF;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
padding: 36rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.goodsBox{
|
||||
width: 328rpx;
|
||||
height: 422rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 22rpx;
|
||||
margin-right: 10rpx;
|
||||
>image{
|
||||
width: 328rpx;
|
||||
height: 320rpx;
|
||||
}
|
||||
.goodsName{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
height: 42rpx;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
.goodsPrice{
|
||||
font-family: OPPOSans, OPPOSans;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FF0000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
&::before{
|
||||
content: "¥";
|
||||
font-size: 24rpx;
|
||||
color: #FF3C26;
|
||||
}
|
||||
}
|
||||
.sales{
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="shopDeatilCard">
|
||||
<view class="left">
|
||||
<view class="top">
|
||||
<view class="shopName">店铺名称</view>
|
||||
<view class="bodyName">公司名称</view>
|
||||
</view>
|
||||
<view class="bottom">提交申请后由对应云拣仓负责人进行审核</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="rightText">正在申请</view>
|
||||
<image class="rightIamge" src="https://wx4.sinaimg.cn/large/006joT8tgy1hs17gom6tnj30k00k0q4l.jpg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopDeatilCard{
|
||||
width: 678rpx;
|
||||
height: 220rpx;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("https://files.hecrab.com/crab-net/yxs-cloudStore-shopDetialCard-bg1.png");
|
||||
display: flex;
|
||||
.left{
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.shopName{
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.bodyName{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
}
|
||||
.bottom{
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
.rightText{
|
||||
margin-top: 16rpx;
|
||||
padding-left: 46rpx;
|
||||
right: 0;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.rightIamge{
|
||||
margin:28rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: #E7E7E7;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view class="shopIntroduce">这是商家介绍页面</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view class="shopItem">
|
||||
<view class="left">
|
||||
<image class="shopIcon" :src="shopIcon"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="shopTitle">{{shopName}}</text>
|
||||
<view class="secondPart">
|
||||
<u-rate :count="count" v-model="value" allowHalf="true"></u-rate>
|
||||
<text class="rateValue">{{value}}</text>
|
||||
<text class="sales">月售 {{sales}}</text>
|
||||
</view>
|
||||
<view class="thridPart">
|
||||
<view class="label1">
|
||||
<image src="https://files.hecrab.com/crab-net/cloud-store-list-1.png" mode="aspectFit"></image>
|
||||
<text>验蟹师品质保</text>
|
||||
</view>
|
||||
<view class="label2">
|
||||
<image src="https://files.hecrab.com/crab-net/cloud-store-list-2.png" mode="aspectFit"></image>
|
||||
<text>一件代发</text>
|
||||
</view>
|
||||
<view class="label3">
|
||||
<image src="https://files.hecrab.com/crab-net/cloud-store-list-3.png" mode="aspectFit"></image>
|
||||
<text>批发</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopCommodity" >
|
||||
<view class="shopCommodityCon" v-for="(item) in 10">
|
||||
<image src="https://wx3.sinaimg.cn/large/006upAuggy1hs44n9w981j30u00u0te3.jpg"></image>
|
||||
<text> susu福福 </text>
|
||||
<view class="price"> 0.60 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
shopName:{
|
||||
type:String,
|
||||
required:true
|
||||
},
|
||||
shopIcon:{
|
||||
type:String,
|
||||
required:true
|
||||
},
|
||||
value:{
|
||||
type:Number,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
count: 5,
|
||||
sales:28773,
|
||||
value:this.value,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopItem{
|
||||
width: 678rpx;
|
||||
height: 396rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.shopIcon{
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
border: 2rpx solid rgba(0,0,0,0.1);
|
||||
}
|
||||
.right{
|
||||
margin-left: 12rpx;
|
||||
width: 490rpx;
|
||||
height: 364rpx;
|
||||
.shopTitle{
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.secondPart{
|
||||
width: 490rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
margin-top: 16rpx;
|
||||
position: relative;
|
||||
.rateValue{
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FF480B;
|
||||
line-height: 34rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
.sales{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.thridPart{
|
||||
width: 492rpx;
|
||||
height: 42rpx;
|
||||
margin-top: 18rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.label1{
|
||||
width: 204rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid rgba(155,118,56,0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
>text{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #9B7638;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.label2{
|
||||
width: 156rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid rgba(6,115,237,0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
>text{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #0673ED;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
}
|
||||
.label3{
|
||||
width: 108rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid rgba(249,64,64,0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
>text{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #F94040;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shopCommodity{
|
||||
width: 506rpx;
|
||||
height: 196rpx;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
.shopCommodityCon{
|
||||
width: 120rpx;
|
||||
height: 196rpx;
|
||||
margin-right: 20rpx;
|
||||
>image{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
>text{
|
||||
font-weight: 300;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.price{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FF3C26;
|
||||
&::before {
|
||||
content: "¥";
|
||||
font-size: 20rpx;
|
||||
color: #FF3C26;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
</view>
|
||||
<tabBar :current="1"></tabBar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabBar from '@/components/tab-bar.vue'
|
||||
export default {
|
||||
components:{
|
||||
tabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 794 B |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,10 @@
|
||||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
|
||||
});
|
||||
},
|
||||
});
|
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 www.uviewui.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
@ -0,0 +1,52 @@
|
||||
export default {
|
||||
props: {
|
||||
// 头像图片组
|
||||
urls: {
|
||||
type: Array,
|
||||
default: uni.$u.props.avatarGroup.urls
|
||||
},
|
||||
// 最多展示的头像数量
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.avatarGroup.maxCount
|
||||
},
|
||||
// 头像形状
|
||||
shape: {
|
||||
type: String,
|
||||
default: uni.$u.props.avatarGroup.shape
|
||||
},
|
||||
// 图片裁剪模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.avatarGroup.mode
|
||||
},
|
||||
// 超出maxCount时是否显示查看更多的提示
|
||||
showMore: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.avatarGroup.showMore
|
||||
},
|
||||
// 头像大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.avatarGroup.size
|
||||
},
|
||||
// 指定从数组的对象元素中读取哪个属性作为图片地址
|
||||
keyName: {
|
||||
type: String,
|
||||
default: uni.$u.props.avatarGroup.keyName
|
||||
},
|
||||
// 头像之间的遮挡比例
|
||||
gap: {
|
||||
type: [String, Number],
|
||||
validator(value) {
|
||||
return value >= 0 && value <= 1
|
||||
},
|
||||
default: uni.$u.props.avatarGroup.gap
|
||||
},
|
||||
// 需额外显示的值
|
||||
extraValue: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.avatarGroup.extraValue
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,46 @@
|
||||
$u-button-active-opacity:0.75 !default;
|
||||
$u-button-loading-text-margin-left:4px !default;
|
||||
$u-button-text-color: #FFFFFF !default;
|
||||
$u-button-text-plain-error-color:$u-error !default;
|
||||
$u-button-text-plain-warning-color:$u-warning !default;
|
||||
$u-button-text-plain-success-color:$u-success !default;
|
||||
$u-button-text-plain-info-color:$u-info !default;
|
||||
$u-button-text-plain-primary-color:$u-primary !default;
|
||||
.u-button {
|
||||
&--active {
|
||||
opacity: $u-button-active-opacity;
|
||||
}
|
||||
|
||||
&--active--plain {
|
||||
background-color: rgb(217, 217, 217);
|
||||
}
|
||||
|
||||
&__loading-text {
|
||||
margin-left:$u-button-loading-text-margin-left;
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__loading-text {
|
||||
color:$u-button-text-color;
|
||||
}
|
||||
|
||||
&__text--plain--error {
|
||||
color:$u-button-text-plain-error-color;
|
||||
}
|
||||
|
||||
&__text--plain--warning {
|
||||
color:$u-button-text-plain-warning-color;
|
||||
}
|
||||
|
||||
&__text--plain--success{
|
||||
color:$u-button-text-plain-success-color;
|
||||
}
|
||||
|
||||
&__text--plain--info {
|
||||
color:$u-button-text-plain-info-color;
|
||||
}
|
||||
|
||||
&__text--plain--primary {
|
||||
color:$u-button-text-plain-primary-color;
|
||||
}
|
||||
}
|
@ -0,0 +1,80 @@
|
||||
// nvue下hover-class无效
|
||||
$u-button-before-top:50% !default;
|
||||
$u-button-before-left:50% !default;
|
||||
$u-button-before-width:100% !default;
|
||||
$u-button-before-height:100% !default;
|
||||
$u-button-before-transform:translate(-50%, -50%) !default;
|
||||
$u-button-before-opacity:0 !default;
|
||||
$u-button-before-background-color:#000 !default;
|
||||
$u-button-before-border-color:#000 !default;
|
||||
$u-button-active-before-opacity:.15 !default;
|
||||
$u-button-icon-margin-left:4px !default;
|
||||
$u-button-plain-u-button-info-color:$u-info;
|
||||
$u-button-plain-u-button-success-color:$u-success;
|
||||
$u-button-plain-u-button-error-color:$u-error;
|
||||
$u-button-plain-u-button-warning-color:$u-error;
|
||||
|
||||
.u-button {
|
||||
width: 100%;
|
||||
|
||||
&__text {
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top:$u-button-before-top;
|
||||
left:$u-button-before-left;
|
||||
width:$u-button-before-width;
|
||||
height:$u-button-before-height;
|
||||
border: inherit;
|
||||
border-radius: inherit;
|
||||
transform:$u-button-before-transform;
|
||||
opacity:$u-button-before-opacity;
|
||||
content: " ";
|
||||
background-color:$u-button-before-background-color;
|
||||
border-color:$u-button-before-border-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
&:before {
|
||||
opacity: .15
|
||||
}
|
||||
}
|
||||
|
||||
&__icon+&__text:not(:empty),
|
||||
&__loading-text {
|
||||
margin-left:$u-button-icon-margin-left;
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--primary {
|
||||
color: $u-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--info {
|
||||
color:$u-button-plain-u-button-info-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--success {
|
||||
color:$u-button-plain-u-button-success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--error {
|
||||
color:$u-button-plain-u-button-error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--warning {
|
||||
color:$u-button-plain-u-button-warning-color;
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="u-calendar-header u-border-bottom">
|
||||
<text
|
||||
class="u-calendar-header__title"
|
||||
v-if="showTitle"
|
||||
>{{ title }}</text>
|
||||
<text
|
||||
class="u-calendar-header__subtitle"
|
||||
v-if="showSubtitle"
|
||||
>{{ subtitle }}</text>
|
||||
<view class="u-calendar-header__weekdays">
|
||||
<text class="u-calendar-header__weekdays__weekday">一</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">二</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">三</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">四</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">五</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">六</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">日</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'u-calendar-header',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin],
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 副标题
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
name() {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-calendar-header {
|
||||
padding-bottom: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: $u-main-color;
|
||||
text-align: center;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: $u-main-color;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__weekdays {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__weekday {
|
||||
font-size: 13px;
|
||||
color: $u-main-color;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,85 @@
|
||||
export default {
|
||||
methods: {
|
||||
// 设置月份数据
|
||||
setMonth() {
|
||||
// 月初是周几
|
||||
const day = dayjs(this.date).date(1).day()
|
||||
const start = day == 0 ? 6 : day - 1
|
||||
|
||||
// 本月天数
|
||||
const days = dayjs(this.date).endOf('month').format('D')
|
||||
|
||||
// 上个月天数
|
||||
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
|
||||
|
||||
// 日期数据
|
||||
const arr = []
|
||||
// 清空表格
|
||||
this.month = []
|
||||
|
||||
// 添加上月数据
|
||||
arr.push(
|
||||
...new Array(start).fill(1).map((e, i) => {
|
||||
const day = prevDays - start + i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加本月数据
|
||||
arr.push(
|
||||
...new Array(days - 0).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 添加下个月
|
||||
arr.push(
|
||||
...new Array(42 - days - start).fill(1).map((e, i) => {
|
||||
const day = i + 1
|
||||
|
||||
return {
|
||||
value: day,
|
||||
disabled: true,
|
||||
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 分割数组
|
||||
for (let n = 0; n < arr.length; n += 7) {
|
||||
this.month.push(
|
||||
arr.slice(n, n + 7).map((e, i) => {
|
||||
e.index = i + n
|
||||
|
||||
// 自定义信息
|
||||
const custom = this.customList.find((c) => c.date == e.date)
|
||||
|
||||
// 农历
|
||||
if (this.lunar) {
|
||||
const {
|
||||
IDayCn,
|
||||
IMonthCn
|
||||
} = this.getLunar(e.date)
|
||||
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
|
||||
}
|
||||
|
||||
return {
|
||||
...e,
|
||||
...custom
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否打乱键盘按键的顺序
|
||||
random: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 输入一个中文后,是否自动切换到英文
|
||||
autoChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
props: {
|
||||
// 分组标题
|
||||
title: {
|
||||
type: String,
|
||||
default: uni.$u.props.cellGroup.title
|
||||
},
|
||||
// 是否显示外边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.cellGroup.border
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
props: {
|
||||
percentage: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.circleProgress.percentage
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
props: {
|
||||
// 倒计时总秒数
|
||||
seconds: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.code.seconds
|
||||
},
|
||||
// 尚未开始时提示
|
||||
startText: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.startText
|
||||
},
|
||||
// 正在倒计时中的提示
|
||||
changeText: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.changeText
|
||||
},
|
||||
// 倒计时结束时的提示
|
||||
endText: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.endText
|
||||
},
|
||||
// 是否在H5刷新或各端返回再进入时继续倒计时
|
||||
keepRunning: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.code.keepRunning
|
||||
},
|
||||
// 为了区分多个页面,或者一个页面多个倒计时组件本地存储的继续倒计时变了
|
||||
uniqueKey: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.uniqueKey
|
||||
}
|
||||
}
|
||||
}
|