main
parent
23847d31a5
commit
7a87624e53
@ -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;
|
||||