first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,11 @@
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"type": "uniCloud",
"default": {
"launchtype": "remote"
}
}
]
}

View File

@@ -0,0 +1,17 @@
【谢文军】1: 登录注册
2:首页
【应越波】九宫格 点击 进入列表页面
【应越波】明星爆款
【应越波】轮播图
【应越波】搜索
【逯帅帅】tabs切换,为您推荐 走量采购
【逯帅帅】3:分类 点击进入详情页面
【应越波】4:我的
跳转到订单
我的订单查看全部
【谢文军】5:详情页面
【逯帅帅】6:购物车

View File

@@ -0,0 +1,50 @@
<script>
import {mapActions} from 'vuex'
export default {
data: () => {
return {}
},
async created() {
await this.carList()
},
methods: {
...mapActions({
carList: 'PUT_SET_CARLIST'
})
},
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*清除样式css */
@import "common/less/clear.less";
@import "uview-ui/index.scss";
uni-checkbox .uni-checkbox-input {
border-radius: 50%;
color: #ffffff !important;
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
color: #fff;
border-color: rgb(0, 122, 255);
background: rgb(0, 122, 255);
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:after {
font-size: 18px;
}
</style>

View File

@@ -0,0 +1,17 @@
export default {
devBaseUrl: 'https://api.ydyd51.com',
testBaseUrl: '',
prodBaseUrl: '',
apiList: {
index: '/index/index', //首页
searchList:'/Goods/searchList', // 搜索列表
x_goodsDetail: '/Goods/detail', // 商品详情
search:'/Goods/search', // 搜索
tell: '/user/tell', //用户手机号码(个人中心)
x_register: '/user/register_App', //注册
login: '/token/login', // 登录
cart:'/cart/getList', // 购物车
activity:'/activity/index', //活动详情
classify:'/Classification/index', //商品分类
}
}

View File

@@ -0,0 +1,77 @@
import config from "../config";
class Http {
get(params) {
uni.showLoading({ title: '请求中..' });
return new Promise((success, error) => {
uni.request({
url: this.CheckBaseUrl() + params.url,
data: params.data,
method: 'GET',
header: Object.assign({
token: uni.getStorageSync('token')
}, params.header),
success: (res) => {
success(this.ResponseCheck(res.data));
},
fail: (err) => {
console.log("6");
console.log(err);
}
});
})
}
post(params) {
uni.showLoading({ title: '请求中..' });
return new Promise((success, error) => {
uni.request({
url: this.CheckBaseUrl() + params.url,
data: params.data,
method: 'POST',
header: Object.assign({
token: uni.getStorageSync('token')
}, params.header),
success: (res) => {
success(this.ResponseCheck(res.data));
},
fail: (err) => {
console.log("6");
console.log(err);
}
});
})
}
ResponseCheck(res) {
uni.hideLoading();
switch (res.code) {
case 200:
return res.data
break;
case 5010:
uni.showToast({
title: res.message,
duration: 2000
});
throw new Error(res.message);
break;
case 40000:
uni.showToast({
title: res.message,
duration: 2000
});
throw new Error(res.message);
break;
}
}
CheckBaseUrl() {
if (process.env.NODE_ENV === 'development') {
return config.devBaseUrl;
} else {
return config.prodBaseUrl;
}
}
}
export default new Http();

View File

@@ -0,0 +1,32 @@
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.iconfont {
font-size: 0.16rem;
}

View File

@@ -0,0 +1,12 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.iconfont {
font-size: .16rem;
}

View File

@@ -0,0 +1,50 @@
.class{
header {
height: 150rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background: linear-gradient(right ,#6b68dd,#1286ca);
display: flex;
padding-bottom: 34rpx;
align-items: center;
box-sizing: border-box;
div{
font-size: 16px;
margin-top: 46px;
color: #fff;
width: 100%;
text-align: center;
}
}
.content {
margin-top:75px ;
font-size: 13px;
span{
display: inline-block;
padding: 15px 0 13px 3px;
font-weight: bold;
}
.list{
ul{
margin-left: 8px;
display: flex;
flex-wrap: wrap;
li{
height: 52px;
line-height: 52px;
margin-left:-1px ;
text-align: center;
width: 32%;
color: #343a40;
border: 1px solid #f2f2f2;
}
}
}
}
}

View File

@@ -0,0 +1,187 @@
page {
background-color: #f2f2f2;
}
.con {
margin: 0 10rpx;
}
.floot {
height: 200rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background: linear-gradient(right, #1286ca, #6b68dd);
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding-bottom: 34rpx;
box-sizing: border-box;
}
.floot .inputs {
height: 56rpx;
display: flex;
align-items: center;
width: 75%;
background-color: #fff;
border-radius: 50rpx;
}
.floot .inputs img {
width: 26rpx;
height: 26rpx;
padding-left: 40rpx;
}
.floot .inputs p {
padding-left: 10rpx;
font-size: 28rpx;
}
.floot .rightimg {
height: 42rpx;
margin: 0 40rpx;
}
.swiper {
margin-top: 210rpx;
height: 386rpx;
}
.swiper .swiper-item img {
width: 100%;
height: 386rpx;
}
.palaceGrid {
margin-top: 20rpx;
background-color: #fff;
border-radius: 20rpx;
width: 100%;
height: 200rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.palaceGrid view {
display: flex;
flex-direction: column;
align-items: center;
}
.palaceGrid view img {
width: 88rpx;
height: 88rpx;
}
.palaceGrid view p {
margin-top: 10rpx;
font-size: 26rpx;
}
.notice {
background-color: #fff;
border-radius: 20rpx;
height: 50rpx;
margin-top: 20rpx;
position: relative;
}
.notice .noticeImg {
margin-left: 10rpx;
width: 24rpx;
position: absolute;
top: 15rpx;
background-color: #fff;
}
.notice .swp {
line-height: 50rpx;
position: absolute;
margin-left: 50rpx;
color: #40b2ff;
font-size: 30rpx;
}
.prerog {
margin-top: 30rpx;
width: 100%;
}
.faddish {
margin-top: 40rpx;
display: flex;
align-items: center;
color: red;
}
.faddish img {
height: 30rpx;
}
.faddish p {
margin-left: 10rpx;
}
.scroll {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.box {
margin-right: 20rpx;
margin-top: 30rpx;
box-sizing: border-box;
display: inline-block;
width: 322rpx;
height: 438rpx;
background-color: #fff;
border-radius: 20rpx;
padding-left: 20rpx;
}
.box img {
padding-right: 20rpx;
margin: 30rpx auto;
display: block;
width: 280rpx;
height: 174rpx;
}
.box .info {
display: flex;
align-items: center;
font-size: 20rpx;
width: 95%;
}
.box .info .ling {
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
border-radius: 6rpx;
margin-right: 16rpx;
color: #fff;
background: linear-gradient(top, #86fead, #3ad423);
}
.box .info .hot {
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
color: #fff;
border-radius: 6rpx;
background: linear-gradient(top, #db577c, #d71c5e);
}
.box .info .jieshao {
margin-left: 4rpx;
font-weight: 800;
line-height: 36rpx;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.box .gs {
margin-top: 10rpx;
font-size: 20rpx;
width: 95.5%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.box .zhi {
margin-top: 15rpx;
font-size: 20rpx;
}
.box .jiage {
margin-top: 20rpx;
font-size: 30rpx;
font-weight: 800;
color: red;
}
.box:last-child {
margin-right: 0;
}

View File

@@ -0,0 +1,200 @@
page{
background-color: #f2f2f2;
}
.con{
margin: 0 10rpx;
}
.floot{
height: 200rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background: linear-gradient(right ,#1286ca,#6b68dd);
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding-bottom: 34rpx;
box-sizing: border-box;
.inputs{
height: 56rpx;
display: flex;
align-items: center;
width: 75%;
background-color: #fff;
border-radius: 50rpx;
img{
width: 26rpx;
height: 26rpx;
padding-left: 40rpx;
}
p{
padding-left: 10rpx;
font-size: 28rpx;
}
}
.rightimg{
height: 42rpx;
margin: 0 40rpx;
}
}
.swiper{
margin-top: 210rpx;
height: 386rpx;
.swiper-item{
img{
width: 100%;
height: 386rpx;
}
}
}
.palaceGrid{
margin-top: 20rpx;
background-color: #fff;
border-radius: 20rpx;
width: 100%;
height: 200rpx;
display: flex;
align-items: center;
justify-content: space-around;
view{
display: flex;
flex-direction: column;
align-items: center;
img{
width: 88rpx;
height: 88rpx;
}
p{
margin-top: 10rpx;
font-size: 26rpx;
}
}
}
.notice{
background-color: #fff;
border-radius: 20rpx;
height: 50rpx;
margin-top: 20rpx;
position: relative;
.noticeImg{
margin-left: 10rpx;
width: 24rpx;
position: absolute;
top: 15rpx;
background-color: #fff;
}
.swp{
line-height: 50rpx;
position: absolute;
margin-left: 50rpx;
color: #40b2ff;
font-size: 30rpx;
}
}
.prerog{
margin-top: 30rpx;
width: 100%;
}
.faddish{
margin-top: 40rpx;
display: flex;
align-items: center;
color: red;
img{
height: 30rpx;
}
p{
margin-left: 10rpx;
}
}
// ----------------------------------
.scroll {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.box {
margin-right: 20rpx;
margin-top: 30rpx;
box-sizing: border-box;
display: inline-block;
width: 322rpx;
height: 438rpx;
background-color: #fff;
border-radius: 20rpx;
padding-left: 20rpx;
img{
padding-right: 20rpx;
margin: 30rpx auto;
display: block;
width: 280rpx;
height: 174rpx;
}
.info{
display: flex;
align-items: center;
font-size: 20rpx;
width: 95%;
.ling{
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
border-radius: 6rpx;
margin-right: 16rpx;
color: #fff;
background: linear-gradient(top ,#86fead,#3ad423);
}
.hot{
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
color: #fff;
border-radius: 6rpx;
background: linear-gradient(top ,#db577c,#d71c5e);
}
.jieshao{
margin-left: 4rpx;
font-weight: 800;
line-height: 36rpx;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.gs{
margin-top: 10rpx;
font-size: 20rpx;
width: 95.5%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.zhi{
margin-top: 15rpx;
font-size: 20rpx;
}
.jiage{
margin-top: 20rpx;
font-size: 30rpx;
font-weight: 800;
color: red;
}
}
.box:last-child{
margin-right: 0;
}

View File

@@ -0,0 +1,102 @@
page {
background-color: #f2f2f2;
}
.comm {
margin: 0 10rpx;
}
.flood {
display: flex;
align-items: center;
height: 340rpx;
background: linear-gradient(right, #1286ca, #6b68dd);
position: relative;
}
.flood .imgcom {
position: absolute;
top: 74rpx;
right: 40rpx;
width: 44rpx;
height: 40rpx;
}
.flood .right {
right: 120rpx;
}
.flood .imp {
margin-left: 36rpx;
width: 128rpx;
height: 128rpx;
}
.flood p {
color: #fff;
margin-left: 40rpx;
}
.order {
box-sizing: border-box;
border-radius: 20rpx;
top: -82rpx;
position: relative;
background-color: #fff;
}
.order .meTop {
border-bottom: solid 1px #ccc;
height: 82rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.order .meTop p {
font-size: 20rpx;
margin-left: 20rpx;
}
.order .meTop img {
width: 18rpx;
height: 30rpx;
margin-right: 20rpx;
}
.order .state {
margin: 0 70rpx;
display: flex;
align-items: center;
height: 170rpx;
justify-content: space-between;
}
.order .state img {
width: 60rpx;
height: 52rpx;
}
.order .state p {
margin-top: 10rpx;
font-size: 10rpx;
}
.other {
margin-top: 30rpx;
}
.other .otherstat {
height: 270rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.other .otherstat view {
margin: 20rpx 20rpx 0;
}
.other .otherstat view img {
width: 90rpx;
height: 90rpx;
}
.other .otherstat view p {
margin-top: 20rpx;
font-size: 26rpx;
}
.copyright {
box-sizing: border-box;
position: absolute;
width: 100%;
text-align: center;
bottom: 30rpx;
font-size: 20rpx;
color: #919192;
}
.copyright .bottoms {
margin-bottom: 20rpx;
}

View File

@@ -0,0 +1,3 @@
p {
color: red;
}

View File

@@ -0,0 +1,106 @@
page{
background-color: #f2f2f2;
}
.comm{
margin: 0 10rpx;
}
.flood{
display: flex;
align-items: center;
height: 340rpx;
background: linear-gradient(right ,#1286ca,#6b68dd);
position: relative;
.imgcom{
position: absolute;
top: 74rpx;
right: 40rpx;
width: 44rpx;
height: 40rpx;
}
.right{
right: 120rpx;
}
.imp{
margin-left: 36rpx;
width: 128rpx;
height:128rpx;
}
p{
color: #fff;
margin-left: 40rpx;
}
}
.order{
box-sizing: border-box;
border-radius: 20rpx;
top: -82rpx;
position: relative;
background-color: #fff;
.meTop{
border-bottom: solid 1px #ccc;
height: 82rpx;
display: flex;
align-items: center;
justify-content: space-between;
p{
font-size: 20rpx;
margin-left: 20rpx;
}
img{
width: 18rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
.state{
margin: 0 70rpx;
display: flex;
align-items: center;
height: 170rpx;
justify-content: space-between;
img{
width: 60rpx;
height: 52rpx;
}
p{
margin-top: 10rpx;
font-size: 10rpx;
}
}
}
.other{
margin-top: 30rpx;
.otherstat{
height: 270rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
view{
margin: 20rpx 20rpx 0;
img{
width: 90rpx;
height: 90rpx;
}
p{
margin-top: 20rpx;
font-size: 26rpx;
}
}
}
}
.copyright{
box-sizing: border-box;
position: absolute;
width: 100%;
text-align: center;
bottom: 30rpx;
font-size: 20rpx;
color: #919192;
.bottoms{
margin-bottom: 20rpx;
}
}

View File

@@ -0,0 +1,54 @@
page {
background-color: #f2f2f2;
}
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.flood {
box-sizing: border-box;
display: flex;
align-items: flex-end;
justify-content: center;
height: 148rpx;
padding-bottom: 30rpx;
background: linear-gradient(right, #1286ca, #6b68dd);
}
.flood img {
position: absolute;
left: 20rpx;
width: 18rpx;
height: 30rpx;
}
.flood p {
font-size: 30rpx;
color: #fff;
display: flex;
}
.flag {
height: 148rpx;
}
.end-title {
display: flex;
justify-content: space-around;
height: 92rpx;
line-height: 92rpx;
background-color: #fff;
}
.end-title view {
text-align: center;
}
.end-cont {
display: none;
}
.btna {
border-bottom: 2px solid #6E67FF;
color: #6E67FF;
font-weight: bold;
}
.dis {
display: block;
}

View File

@@ -0,0 +1,56 @@
page{
background-color: #f2f2f2;
}
.top{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.flood{
box-sizing: border-box;
display: flex;
align-items:flex-end;
justify-content: center;
height: 148rpx;
padding-bottom: 30rpx;
background: linear-gradient(right ,#1286ca,#6b68dd);
img{
position: absolute;
left: 20rpx;
width: 18rpx;
height: 30rpx;
}
p{
font-size: 30rpx;
color: #fff;
display: flex;
}
}
.flag{
height: 148rpx;
}
.end-title{
display: flex;
justify-content: space-around;
height: 92rpx;
line-height: 92rpx;
background-color: #fff;
}
.end-title view{
text-align: center;
}
.end-cont{
display: none;
}
.btna{
border-bottom: 2px solid #6E67FF;
color: #6E67FF;
font-weight: bold;
}
.dis{
display: block;
}

View File

@@ -0,0 +1,102 @@
page {
background-color: #f2f2f2;
}
.comm {
margin: 0 10rpx;
}
.flood {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: linear-gradient(right, #1286ca, #6b68dd);
display: flex;
align-items: center;
justify-content: center;
height: 168rpx;
box-sizing: border-box;
padding-top: 70rpx;
}
.flood .jiantou {
width: 18rpx;
height: 30rpx;
margin-right: 25rpx;
}
.flood .input {
height: 56rpx;
display: flex;
align-items: center;
width: 75%;
background-color: #fff;
border-radius: 50rpx;
}
.flood .input img {
width: 26rpx;
height: 26rpx;
padding-right: 10rpx;
}
.flood img {
margin-left: 30rpx;
width: 50rpx;
height: 42rpx;
}
.zhan {
height: 168rpx;
}
.hots {
margin-top: 180rpx;
font-weight: 800;
font-size: 30rpx;
}
.sousuo {
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.sousuo img {
width: 588rpx;
height: 200rpx;
}
.sousuo p {
font-size: 30rpx;
margin-top: 100rpx;
color: #989898;
}
.tablist {
position: fixed;
top: 168rpx;
left: 0;
right: 0;
z-index: 99;
background-color: #fff;
}
.end-title {
height: 90rpx;
line-height: 90rpx;
display: flex;
justify-content: space-around;
background-color: #fff;
}
.end-title .shops {
display: flex;
}
.end-title .shops .shopsimgs {
margin-left: 10rpx;
}
.end-title .shops .shopsimgs img {
width: 18rpx;
height: 28rpx;
}
.end-cont {
display: none;
}
.btna {
border-bottom: 2px solid #6E67FF;
color: #6E67FF;
font-weight: bold;
}
.dis {
display: block;
}

View File

@@ -0,0 +1,105 @@
page{
background-color: #f2f2f2;
}
.comm{
margin: 0 10rpx;
}
.flood{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: linear-gradient(right ,#1286ca,#6b68dd);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 168rpx;
box-sizing: border-box;
padding-top: 70rpx;
.jiantou{
width: 18rpx;
height: 30rpx;
margin-right: 25rpx;
}
.input{
height: 56rpx;
display: flex;
align-items: center;
width: 75%;
background-color: #fff;
border-radius: 50rpx;
img{
width: 26rpx;
height: 26rpx;
padding-right: 10rpx;
}
}
img{
margin-left: 30rpx;
width: 50rpx;
height: 42rpx;
}
}
.zhan{
height: 168rpx;
}
.hots{
margin-top: 180rpx;
font-weight: 800;
font-size: 30rpx;
}
.sousuo{
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
img{
width: 588rpx;
height: 200rpx;
}
p{
font-size: 30rpx;
margin-top: 100rpx;
color: #989898;
}
}
.tablist{
position: fixed;
top: 168rpx;
left: 0;
right: 0;
z-index: 99;
background-color: #fff;
}
.end-title {
height: 90rpx;
line-height: 90rpx;
display: flex;
justify-content: space-around;
background-color: #fff;
.shops {
display: flex;
.shopsimgs {
margin-left: 10rpx;
img {
width: 18rpx;
height: 28rpx;
}
}
}
}
.end-cont {
display: none;
}
.btna {
border-bottom: 2px solid #6E67FF;
color: #6E67FF;
font-weight: bold;
}
.dis {
display: block;
}

View File

@@ -0,0 +1,162 @@
.status_bar {
background-color: #fd013ee;
}
.page-header {
height: 150rpx;
padding: 26rpx 30rpx;
display: flex;
position: relative;
color: #fff;
font-size: 36rpx;
background: linear-gradient(right ,#6b68dd,#1286ca);
.title{
margin-top: 23px;
text-align: center;
width: 100%;
}
.text-center {
width: 100%;
text-align: center;
}
.edit {
position: absolute;
top: 66%;
transform: translateY(-50%);
right: 30rpx;
font-size: 32rpx;
}
}
.item {
display: flex;
justify-content: space-between;
padding: 0 20rpx 20rpx;
align-items: center;
.cart-img {
width: 200rpx;
height: 69%;
margin-top: 18px;
border-radius: 12rpx;
overflow: hidden;
image {
width: 100%;
}
}
.title-wrap {
width: 354rpx;
.right{
font-size: 13px;
line-height: 1.6;
.title{
display: flex;
.hot{
margin-top: 4px;
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
color: #fff;
border-radius: 6rpx;
background-color: #ef3624;
}
.effect{
margin-left: 13px;
font-weight: bold;
}
}
.firm,.slice,.case{
display: flex;
color: #989898;
.zero{
margin-top: 5px;
margin-left: 14px;
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
color: #fff;
border-radius: 6rpx;
background-color: #2cdf1e;
}
}
}
.price {
font-weight: bold;
font-size: 14px;
color: #EB5159;
}
}
.u-numberbox {
position: absolute;
bottom: 20rpx;
right: 20rpx;
/deep/.u-number-input{
width: 35px!important;
}
}
}
// emputy
.emputy {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 200rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: -webkit-linear-gradient(to right, rgba(253, 1, 62, 0.3) 0%, rgba(253, 1, 62, 1) 100%);
background: linear-gradient(to right, rgba(253, 1, 62, 0.3) 0%, rgba(253, 1, 62, 1) 100%);
}
}
.bottom {
width: 100%;
position: fixed;
left: 0;
bottom: var(--window-bottom);
display: flex;
align-items: center;
justify-content: flex-end;
z-index: 99;
height: 110rpx;
background-color: #fff;
box-sizing: border-box;
box-shadow: 0 0 10rpx 6rpx rgba(0, 0, 0, 0.1);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.checkall {
position: absolute;
left: 20rpx;
top: 50%;
transform: translateY(-50%);
span {
color: #999;
font-size: 32rpx;
}
}
/deep/.u-round-circle{
}
.price {
width: 113px;
margin-right: 20rpx;
color: #fd013e;
.sml {
margin-right: 10rpx;
color: #666;
font-size: 26rpx!important;
text-align: center;
width: 198px;
}
}
}

View File

@@ -0,0 +1,75 @@
import http from "../http";
import config from "../config";
export default class IndexServer {
//首页
async getIndex(data = {}, header = {}) {
return await http.get({
url: config.apiList.index,
data: data,
header: header
});
}
//搜索
async search(data = {}, header = {}) {
return await http.post({
url: config.apiList.search,
data: data,
header: header
});
}
//用户手机号码(个人中心)
async tell(data = {}, header = {}) {
return await http.post({
url: config.apiList.tell,
data: data,
header: header
});
}
//商品详情
async goodsDetail(data = {}, header = {}) {
return await http.post({
url: config.apiList.x_goodsDetail,
data: data,
header: header
});
}
//登录
async login (data = {}, header = {}) {
return await http.post({
url: config.apiList.login,
data: data,
headers: header
});
}
//注册
async reg (data = {}, header = {}) {
return await http.post({
url: config.apiList.x_register,
data: data,
headers: header
});
}
// //活动详情
async getActivity(data = {}, header = {}) {
return await http.get({
url: config.apiList.activity,
data: data,
header: header
});
}
//购物车
async cartList(data = {}, header = {}) {
return await http.post({
url: config.apiList.cart,
data: data,
header: header
});
}
}

View File

@@ -0,0 +1,7 @@
import IndexServer from "./IndexServer";
import classServer from "./classServer";
export default {
index: new IndexServer(),
class: new classServer()
}

View File

@@ -0,0 +1,13 @@
import http from "../http";
import config from "../config";
export default class classServer {
//分类
async getClass(data = {}, header = {}) {
return await http.post({
url: config.apiList.classify,
data: data,
header: header
});
}
}

View File

@@ -0,0 +1,182 @@
<template>
<view class="alarmList">
<view class="switchHead">
<view v-for="(item,index) in tabTitleData" class="boxList" :class="{activeCss:activeIndex==index}" :key="index">
<text @click="clickTab(index)">{{item.name}}</text>
</view>
</view>
<view class="content">
<view v-if="current === 0">
<ul>
<view class="scroll">
<view class="box" v-for="(i,j) in 6" :key="j" @click="togo(j)">
<img src="/static/home/renzheng.jpg" alt="">
<view class="info">
<p class="ling">零</p>
<p class="jieshao">安神补脑液安神补脑液安神补脑液</p>
</view>
<p class="gs">吉林药业股份有限公司吉林药业股份有限公司</p>
<p class="zhi">10ml*10支</p>
<p class="jiage">¥16.99</p>
</view>
</view>
</ul>
</view>
<view v-else>
<ul>
<view class="scroll">
<view class="box" v-for="(i,j) in 6" :key="j" @click="togo(j)" >
<img src="/static/home/renzheng.jpg" alt="">
<view class="info">
<p class="ling">零</p>
<p class="jieshao">安神补脑液安神补脑液安神补脑液</p>
</view>
<p class="gs">吉林药业股份有限公司吉林药业股份有限公司</p>
<p class="zhi">10ml*10支</p>
<p class="jiage">¥16.99</p>
</view>
</view>
</ul>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current:0,
index:0,
activeIndex:'0',
tabTitleData:[
{
name:'为您推荐'
},
{
name:'走量订购'
}
]
}
},
created(){
this.getAct()
console.log(111)
},
methods: {
clickTab(index){
this.activeIndex=index;
this.current=index;
},
async getAct(){
let res = await this.$http.index.getActivity({});
console.log(res)
},
togo(j) {
// console.log(this.hot[j].keyword);
uni.navigateTo({
//加上id
url: `/pages/index/search`,
});
},
}
}
</script>
<style scoped lang="less">
.alarmList {
margin-top: 12px;
height: 100%;
.switchHead {
line-height: 29px;
display: flex;
justify-content: space-around;
font-size: 16px;
font-weight: bold;
.activeCss {
border-bottom: 2px solid #018EEA;
color: #018EEA;
}
}
}
.scroll {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.box {
margin-top: 30rpx;
margin-left: 8px;
box-sizing: border-box;
width: 173px;
height: 438rpx;
background-color: #fff;
border-radius: 20rpx;
img{
padding-right: 20rpx;
margin: 30rpx auto;
display: block;
width: 280rpx;
height: 174rpx;
}
.info{
display: flex;
align-items: center;
font-size: 20rpx;
width: 95%;
.ling{
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
border-radius: 6rpx;
margin-right: 16rpx;
color: #fff;
background: linear-gradient(top ,#86fead,#3ad423);
}
.hot{
width: 30rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
color: #fff;
border-radius: 6rpx;
background: linear-gradient(top ,#db577c,#d71c5e);
}
.jieshao{
margin-left: 4rpx;
font-weight: 800;
line-height: 36rpx;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.gs{
margin-top: 10rpx;
font-size: 20rpx;
width: 95.5%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.zhi{
margin-top: 15rpx;
font-size: 20rpx;
}
.jiage{
margin-top: 20rpx;
font-size: 30rpx;
font-weight: 800;
color: red;
}
}
.box:last-child{
margin-right: 0;
}
</style>

View File

@@ -0,0 +1,137 @@
<template>
<view>
<!-- 购物列表 -->
<view class="shoplist" v-for="(i, j) in shop" :key="j">
<view class="jieshao"><img :src="'https://' + i.pc_thumb" alt="" /></view>
<view class="right">
<view class="first">
<img v-if='i.limit_info' src="/static/me/xian.png" alt="" class="imga" />
<img v-if="i.retail_flag==0" src="/static/me/re.png" alt="" class="imgb" />
<p>{{ i.goods_name }}</p>
</view>
<p class="pice">{{i.limit_info}}</p>
<p class="changshang">
{{ i.manufacturer_name }}
</p>
<view class="next">
<p>{{ i.spec_desc }}</p>
<img src="/static/me/ling.png" alt="" />
<p>1{{i.unit}}/件</p>
</view>
<view class="last">
<p>¥{{ i.price }}</p>
<img src="/static/me/cart_icon.png" alt="" />
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
shop: {},
},
data() {
return {};
},
methods: {},
};
</script>
<style lang='less' scoped>
.shoplist {
display: flex;
border-radius: 20rpx;
height: 300rpx;
background-color: #fff;
width: 100%;
.jieshao {
display: flex;
align-items: center;
img {
width: 248rpx;
height: 150rpx;
margin: 0 20rpx;
}
}
.right {
img {
width: 30rpx;
height: 30rpx;
}
.first {
display: flex;
margin-top: 40rpx;
align-items: center;
.imga {
padding-right: 30rpx;
}
.imgb {
padding-right: 30rpx;
}
p {
font-weight: 800;
font-size: 30rpx;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.next {
display: flex;
}
.last {
display: flex;
}
}
.pice {
width: 70%;
margin-top: 10rpx;
color: red;
font-size: 27rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.changshang {
width: 60%;
margin-top: 10rpx;
font-size: 20rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.next {
margin-top: 10rpx;
font-size: 20rpx;
img {
margin: 0 20rpx;
}
}
.last {
width: 400rpx;
margin-top: 20rpx;
font-size: 30rpx;
color: red;
font-weight: 800;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
img {
width: 50rpx;
height: 50rpx;
position: absolute;
top: 0;
right: 0;
}
}
}
</style>

View File

@@ -0,0 +1,54 @@
<template>
<view class="mysss">
<!--#ifdef H5-->
<view class="video-js" ref="video">
</view>
<!-- #endif -->
<!--#ifdef APP-PLUS-->
<video
class="my_video"
object-fit="fill"
:src="src"
controls></video>
<!-- #endif -->
</view>
</template>
<script>
//
export default {
props: {
src: {
type: String,
default: ''
}
},
data() {
return {
};
},
mounted() {
// #ifdef H5
var video = document.createElement('video')
video.id = 'video'
video.style = 'width: 100%;height: 150px;'
video.controls = true
var source = document.createElement('source')
source.src = this.src
video.appendChild(source)
this.$refs.video.$el.appendChild(video)
videojs('video')
// #endif
},
}
</script>
<style>
.my_video {
width: 100%;
}
</style>

View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- Open Graph data -->
<!-- <meta property="og:title" content="Title Here" /> -->
<!-- <meta property="og:url" content="http://www.example.com/" /> -->
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<!-- <meta property="og:description" content="Description Here" /> -->
<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>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -0,0 +1,18 @@
import Vue from 'vue'
import App from './App'
import http from './common/service/_';
import store from './store'
import uView from "uview-ui";
Vue.config.productionTip = false
Vue.prototype.$http = http;
Vue.prototype.$store = store;
App.mpType = 'app'
Vue.use(uView)
const app = new Vue({
uView,
store,
...App
})
app.$mount()

View File

@@ -0,0 +1,77 @@
{
"name" : "hahah",
"appid" : "__UNI__8E176DC",
"description" : "",
"versionName" : "1.0.1",
"versionCode" : 101,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {
"VideoPlayer" : {}
},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {
"ad" : {}
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"h5" : {
"template" : "index.html"
}
}

View File

@@ -0,0 +1,117 @@
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle":"custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
],
"backButton": {
"background": "#00FF00"
}
}
}
}
},
{
"path": "pages/index/search",
"style": {
"navigationBarTitleText": "",
"navigationStyle":"custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/classify/classify",
"style": {
"navigationBarTitleText": "",
"navigationStyle":"custom",
"enablePullDownRefresh": false
},
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index"
}
},
{
"path": "pages/shop/shop",
"style": {
"navigationBarTitleText": "",
"navigationStyle":"custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/me/me",
"style": {
"navigationStyle":"custom",
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/info/info",
"style": {
"navigationBarTitleText": "页面详情",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/me/meInfo",
"style": {
"navigationStyle":"custom",
"navigationBarTitleText": "我的详情",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/classify/classify",
"text": "分类"
},
{
"pagePath": "pages/shop/shop",
"text": "购物车"
},
{
"pagePath": "pages/me/me",
"text": "我的"
}
]
}
}

View File

@@ -0,0 +1,98 @@
<template>
<div class="class">
<header>
<div>分类</div>
</header>
<div class="content">
<div class="list" v-for="(item,index) in list" :key='index'>
<span>{{ item.name }}</span>
<ul>
<li v-for='(item1,index1,key) in item.sub_cate' :key='index1' @tap='to_goodsDetail(item1,index,key)' >
<view v-if="!item1.show">{{item1.name}}</view>
<image v-if="item1.show" src="../../static/home/xia.png" mode="" style="height:18upx; width:30upx;"></image>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [], // 分类列表菜单
all:[],
item1:[]
}
},
created(){
this.getClass()
},
methods: {
to_goodsDetail(item,index,key) {
if(key == 8 && item.show){
let arr = this.all[item.pid]
let int = 0
this.list[index].sub_cate.pop()
for (let j in arr) {
int++
if(int>8){
this.list[index].sub_cate.push(arr[j])
}
}
}else{
uni.navigateTo({
url: '/pages/index/search??cate_id=' + item.cate_id,
})
}
},
async getClass(){
this.list = []
let res = await this.$http.class.getClass({});
for (let i in res){
let arr = res[i].sub_cate
let son = []
let int = 0
this.all[i] =[]
for (let j in arr){
int++
if(int<9){
son.push(arr[j])
}
if(int==9){
let parames = {
name:'',
pid:arr[j].pid,
show:true
}
son.push(parames)
}
this.all[i].push(arr[j])
}
res[i].sub_cate = son
this.list.push(res[i])
console.log(arr)
}
// this.classli.forEach((v,i) =>{
// let name = v.sub_cate
// for (let k in name) {
// this.namey = name[k]
// // console.log(this.namey.name)
// }
// })
// console.log(this.classli)
// console.log(this.classli[0].sub_cate)
// console.log(JSON.stringify(this.classli[0].sub_cate).name)
}
}
}
</script>
<style scoped lang="less">
@import "../../common/less/page/classify.less";
</style>

View File

@@ -0,0 +1,165 @@
<template>
<view class="con">
<!-- 搜索栏 -->
<view class="floot">
<view class="inputs" @click="input">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAC50lEQVRIS7WWz08TURDHv9OSkiYCCZqQKI0EjVExUePJsx5MvEAEPBhveJHuwtuiCKc9ISL7FrtbPejRU/EHJ/Xgv2DUBPyR+DOFAwmYdL0ISTvm2RYLlHZp4Z02b9/MZ2fmO/OWUGKZphlqbNzXycydRHQW4P0AVgHMM+MtEc143tKMaZpqz/eijSeldLsAngBwuIKXL0Q8LIT+zC9tDZZMJoOp1OIYEW7mjT8AeJTN4mUoxN/VXiYTbGfOXgDQB+C42mPGRCTSMtrb25upBF2DWZZzJw9aJSIjnV56YJpmdos0Bxoamq8RkQ0grICxmDbsC2bb8W5mmlZ1IeKLQuivKxmq95blniPiFwBCRNwjhP6knB3lxLD3K4BWAP2God33AyqcsW23n5ldAAuet9xeTjRk2/ErzPQYwFxra8tJP7kv/hhV6/n5xfcAOphxNRbTlK+Si6R0pwFWaRSxWHRqO1EVzlqWO0jEqn5PDUPrLgNzfgA4mM3i2NCQ9qka2OSkczQQwEcAPw1DaysH+wOg3vOW67fbpAWn+bqvKIEZhlZfLo0ewA21wBKJxJ6VlexvHzDnM4AjtaRRSrcD4FkfaaxdIFI6AwCUuMoLpCB9ZsxGIi2nqpF+KrX4jggnKkq/1qaW0rkOIKGauq6OD+m6roRSus9yY8fpIUKylnEF0GXDiCofW661QSylOwHwjRxwe4M4N/05YRiaRkRcNjL1Mj92VJGj+cNzAB4GAplX4XD4m+d5oWAw3AbweWb0qRqVcOoKEdW3Am66PC3LuUSEcZ+X5whz4DTAowUwMxzDiA6UAm6CKSMlmqam5h5m6gLoDMAHcs5oAeA3RPw8nf41XZg4tu2MMWPkf6QUF6J/cCOwJKya+SilcxvArSLbe0JERTFwx2AKYtvxcWYqvrHXAXcUlm+jwu9FLvHEU0Lo4t9zNSmrZFPURuuAuwLLR3iXCEPF0e0aTEGkdCeJssFdTeNWaf4LfE9oKz70n2kAAAAASUVORK5CYII="
draggable="true"
/>
<p>请输入药名/厂家</p>
</view>
<img
class="rightimg"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAArCAYAAAA65tviAAAEzElEQVRoQ+2ZW6hVVRSG/7HWGGvvE6UV2c2itOimZEQkpBGEJHUio/QhwUuRYCL1kF2eJHqK8hBJZAbRTbphYJGWhT1YPtRLKUYXwpIudhHRtNp7z7HWiLnbS6bLc99rn3OgM9/2vIzxf3OsveaYYxF6afV6/ZIoipYDuBHAeQAqvc0bwb46gL0AtmRZtr5SqXxd9E1hh5klqvo4gJUA4hEUOhRXKYCnmflBImrkC4+CtCDeATB3KFZHce5WZr4lhzkK4pxbA+D+URQ2HNc9IrLKL2yC1Gq1C+M4/goAB9Z+M7PVIrIZwD4iyobjqd01ZhYBOMs5101EjwI4I7CpaZpeWq1Wv2uCOOeeANAka7VfmflqIvqxXSFlrjezc1X1MwBnBnbXiMgDOchuANPyQTO7M0mSF8sUUZatRqOxlIheCOx9KSLTc5B/AFTzQWaeSER/luW8TDtmNkFVDwU2ayLSlYNYMHBERE4q03nZtpxzhwGcmNsVEeoN5JCInFy28zLtOecOApg4DlLmrrZjazwi7exeJ9aOR6QTu9qOzVIjYmZnq+pDAKaY2WYReY6IwvOoqVVVF5rZAiL63Tn3WFdX1/dFCOecz7iXmdlfZtZTqVR29QdaGoiZiap+AeCywOEqEekJBajqYjN7Kej7hZkvJqIjeZ9zbg6ArQB8cujbYWae1l+eVxpIo9HwCeWnhV3bJSIzwj7nnBd4Q9hHRN3MvCXvU9XnzeyucI6ZrUiSZF1fUSkNpF6vXx5F0c6Co+0icl0BZBOAeYV514rIJ0FEngJwbwF2ETNv6DiId+Cc2wjg9pYzf/28SUQ+KIBcA2BbkJB+xMxzwv9S6y7kU/NTWmt3t64QPpHttZUWEW/dzOI0TW/NsmyymX1YqVT8xey4VqvVLoiiqDuKov1xHL9JRFqc5F8czjkfubqIvE5Ef/cF0drE8Vyrvw0a8bFSH60RVx84HAcZzd3vzff/IiL+lZiXSI2ZhYj82TDmmpmxqvpSaV5cTEWE8zv7TwAmB6pni8iOMUfx30E8G8DHgbafReScJkij0XiViO4IBrcx89yxFhV/CKuqzx6uz7Wa2WtJkixsgqhqt5m9W4jARmZeQUR/jIXImNkkVX0GwPxQDxHdzMybwyK2T+RmFUT7Z9FnuQeI6ACA9+I43tjbvSNcZ2anq+oyAFcAkBI24lQAMwEkBVs7RMQ/akf/ML6QPTWOYy/6tAEcb2Lm+X09dqq6wMyeBeCdd7LtT9N0ZrVa3XMMiP9Rr9enx3H8tplN7U+Bmd2XJMnaQhQmOOfWEtGSTqpviibak6bpvEql4mvWzXbMFyvfYWYnqKr/TnKPL+f3IepzEbkyH3POzSKiV8xsSoch9gFYx8w9xQz5OJDgbRA552ZEUXR+lmWTiGh9IDLzhW4fRFV9BMDDwVU1n+a/p6w1s+IFbMisURQdyrLsBxHZ2dd3mj5Bit6cc98AuCgAXU5EdwO4qjjXzPYS0WIR2T5k1cNcMGiQRqPxMhEtGsiPmW0QkZVEFJb+B1rW9vigQVT1NjN7qx+PB4loOTO/0baqYRgYNIiZkaq+X6yKtHz6u/gSIvKpzqi0QYMEb7TVAJa2Pkp+a2ZPisj6gQ7JTtMNCaTTYtqx/y/2ZXxKzaQkWgAAAABJRU5ErkJggg=="
draggable="true"
/>
</view>
<!-- 轮播图 -->
<swiper
class="swiper"
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration"
:current="current"
:indicator-active-color="color"
>
<swiper-item v-for="(i, j) in list.banner" :key="j" @click="bann(j)">
<view class="swiper-item">
<img :src="'https://' + i.app_pic_url" draggable="true" />
</view>
</swiper-item>
</swiper>
<!-- 9宫格 -->
<view class="palaceGrid">
<view v-for="(i, j) in icons" :key="j" @click="newlist(j)">
<img :src="'https://' + i.cover_img" />
<p>{{ i.activity_name }}</p>
</view>
</view>
<!-- 通知栏 -->
<view class="notice">
<img src="/static/home/laba.png" class="noticeImg" />
<swiper :autoplay="autoplay" :interval="interval">
<swiper-item class="swp">
<p>医点医滴-中秋国庆放假通知</p>
</swiper-item>
<swiper-item class="swp">
<p>医点医滴APP上线拉!</p>
</swiper-item>
</swiper>
</view>
<!-- 新客特权 -->
<img src="/static/home/renzheng.jpg" class="prerog" />
<!-- 明星爆款 -->
<view>
<view
class="faddish"
v-for="(i, j) in list.activity_self_true"
:key="j"
@click="sous(j)"
>
<img src="/static/home/shu.png" alt="" />
<p>{{ i.activity_name }}</p>
</view>
<view>
<scroll-view scroll-x="true" class="scroll">
<view class="box" v-for="(i, j) in hot" :key="j" @click="sous(j)">
<img :src="'https://' + i.pc_thumb" alt="" />
<view class="info">
<p class="ling" v-if="i.retail_flag == 0">零</p>
<p class="hot" v-if="i.is_limit == 1">限</p>
<p class="jieshao">{{ i.goods_name }}</p>
</view>
<p class="gs">{{ i.manufacturer_name }}</p>
<p class="zhi">{{ i.spec_desc }}</p>
<p class="jiage">¥{{ i.sales_price }}</p>
</view>
</scroll-view>
</view>
<Tabs></Tabs>
</view>
</view>
</template>
<script>
import Tabs from "../../components/homeTabs";
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
current: 0,
color: "#fff",
//保存首页接口数据
list: [],
//保存明星爆款数据
hot: [],
//保存九宫格的数据
icons: [],
};
},
created() {
this.getIndex();
},
onLoad() {},
methods: {
//掉首页接口
async getIndex() {
let res = await this.$http.index.getIndex();
this.list = res;
// console.log("接口原数据", res);
this.icons = res.activity_icons;
// console.log("九宫格数据", this.icons);
this.list.activity_self_true.forEach((i) => {
this.hot = i.goods_list.data;
// console.log("明星爆款6条数据", i.goods_list.data);
});
},
//搜索点击跳转事件
input() {
uni.navigateTo({
url: `/pages/index/search`,
});
},
//点击明星爆款跳转到搜索页面
sous(j) {
// console.log(this.hot[j].keyword);
uni.navigateTo({
url: `/pages/index/search?key=${this.hot[j].keyword}`,
});
},
//点击九宫格跳转到搜索页面
newlist(el) {
uni.navigateTo({
url: `/pages/index/search?newlist=${this.icons[el].id}`,
});
},
//轮播图点击跳转进搜索页面
bann(el){
uni.navigateTo({
url: `/pages/index/search?banner=${this.list.banner[el].id}`,
});
},
},
components: {
Tabs
}
};
</script>
<style scoped lang="less">
@import "../../common/less/page/index.less";
</style>

View File

@@ -0,0 +1,256 @@
<template>
<view>
<!-- 头部 -->
<view class="flood">
<img
@click="back"
class="jiantou"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAfCAYAAAAFkva3AAAA9ElEQVRIS63UIW5CQRSF4f8YXFeAKHtgBU3qWlPRlWBqcDgSdoCoq6G+qhXV3Q6quWQIkCG8ee/emTd+vsxJ5hzRcMzsHvgA7oBX1Von6AeYnYx1FdYB7YGHMFaAXiR9hTAzS5G+s2jpRUcoRXVjQ5Ab80AuzAsNYhGoF4tCRawG6sRqoRusBbrCWqELNgZ0xMxsCvxmFfkHns4ViaxKwibAZwKyiytJywiUxxwFvBR9jBderUYreDNBLWDnntWCxXGsAXuXNgoOznYEHMTSZ/SCLiwDd8BzqSluzAOGsB5wIWkTxgrgn6R5FZaBW+AReJP0fgD6yKcB+KwshwAAAABJRU5ErkJggg=="
draggable="true"
/>
<view class="input">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAC50lEQVRIS7WWz08TURDHv9OSkiYCCZqQKI0EjVExUePJsx5MvEAEPBhveJHuwtuiCKc9ISL7FrtbPejRU/EHJ/Xgv2DUBPyR+DOFAwmYdL0ISTvm2RYLlHZp4Z02b9/MZ2fmO/OWUGKZphlqbNzXycydRHQW4P0AVgHMM+MtEc143tKMaZpqz/eijSeldLsAngBwuIKXL0Q8LIT+zC9tDZZMJoOp1OIYEW7mjT8AeJTN4mUoxN/VXiYTbGfOXgDQB+C42mPGRCTSMtrb25upBF2DWZZzJw9aJSIjnV56YJpmdos0Bxoamq8RkQ0grICxmDbsC2bb8W5mmlZ1IeKLQuivKxmq95blniPiFwBCRNwjhP6knB3lxLD3K4BWAP2God33AyqcsW23n5ldAAuet9xeTjRk2/ErzPQYwFxra8tJP7kv/hhV6/n5xfcAOphxNRbTlK+Si6R0pwFWaRSxWHRqO1EVzlqWO0jEqn5PDUPrLgNzfgA4mM3i2NCQ9qka2OSkczQQwEcAPw1DaysH+wOg3vOW67fbpAWn+bqvKIEZhlZfLo0ewA21wBKJxJ6VlexvHzDnM4AjtaRRSrcD4FkfaaxdIFI6AwCUuMoLpCB9ZsxGIi2nqpF+KrX4jggnKkq/1qaW0rkOIKGauq6OD+m6roRSus9yY8fpIUKylnEF0GXDiCofW661QSylOwHwjRxwe4M4N/05YRiaRkRcNjL1Mj92VJGj+cNzAB4GAplX4XD4m+d5oWAw3AbweWb0qRqVcOoKEdW3Am66PC3LuUSEcZ+X5whz4DTAowUwMxzDiA6UAm6CKSMlmqam5h5m6gLoDMAHcs5oAeA3RPw8nf41XZg4tu2MMWPkf6QUF6J/cCOwJKya+SilcxvArSLbe0JERTFwx2AKYtvxcWYqvrHXAXcUlm+jwu9FLvHEU0Lo4t9zNSmrZFPURuuAuwLLR3iXCEPF0e0aTEGkdCeJssFdTeNWaf4LfE9oKz70n2kAAAAASUVORK5CYII="
/>
<input
type="text"
placeholder="请输入药名/厂家"
v-model="value"
@keydown.enter="onenter"
@input="onInput"
/>
</view>
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAArCAYAAAA65tviAAAEzElEQVRoQ+2ZW6hVVRSG/7HWGGvvE6UV2c2itOimZEQkpBGEJHUio/QhwUuRYCL1kF2eJHqK8hBJZAbRTbphYJGWhT1YPtRLKUYXwpIudhHRtNp7z7HWiLnbS6bLc99rn3OgM9/2vIzxf3OsveaYYxF6afV6/ZIoipYDuBHAeQAqvc0bwb46gL0AtmRZtr5SqXxd9E1hh5klqvo4gJUA4hEUOhRXKYCnmflBImrkC4+CtCDeATB3KFZHce5WZr4lhzkK4pxbA+D+URQ2HNc9IrLKL2yC1Gq1C+M4/goAB9Z+M7PVIrIZwD4iyobjqd01ZhYBOMs5101EjwI4I7CpaZpeWq1Wv2uCOOeeANAka7VfmflqIvqxXSFlrjezc1X1MwBnBnbXiMgDOchuANPyQTO7M0mSF8sUUZatRqOxlIheCOx9KSLTc5B/AFTzQWaeSER/luW8TDtmNkFVDwU2ayLSlYNYMHBERE4q03nZtpxzhwGcmNsVEeoN5JCInFy28zLtOecOApg4DlLmrrZjazwi7exeJ9aOR6QTu9qOzVIjYmZnq+pDAKaY2WYReY6IwvOoqVVVF5rZAiL63Tn3WFdX1/dFCOecz7iXmdlfZtZTqVR29QdaGoiZiap+AeCywOEqEekJBajqYjN7Kej7hZkvJqIjeZ9zbg6ArQB8cujbYWae1l+eVxpIo9HwCeWnhV3bJSIzwj7nnBd4Q9hHRN3MvCXvU9XnzeyucI6ZrUiSZF1fUSkNpF6vXx5F0c6Co+0icl0BZBOAeYV514rIJ0FEngJwbwF2ETNv6DiId+Cc2wjg9pYzf/28SUQ+KIBcA2BbkJB+xMxzwv9S6y7kU/NTWmt3t64QPpHttZUWEW/dzOI0TW/NsmyymX1YqVT8xey4VqvVLoiiqDuKov1xHL9JRFqc5F8czjkfubqIvE5Ef/cF0drE8Vyrvw0a8bFSH60RVx84HAcZzd3vzff/IiL+lZiXSI2ZhYj82TDmmpmxqvpSaV5cTEWE8zv7TwAmB6pni8iOMUfx30E8G8DHgbafReScJkij0XiViO4IBrcx89yxFhV/CKuqzx6uz7Wa2WtJkixsgqhqt5m9W4jARmZeQUR/jIXImNkkVX0GwPxQDxHdzMybwyK2T+RmFUT7Z9FnuQeI6ACA9+I43tjbvSNcZ2anq+oyAFcAkBI24lQAMwEkBVs7RMQ/akf/ML6QPTWOYy/6tAEcb2Lm+X09dqq6wMyeBeCdd7LtT9N0ZrVa3XMMiP9Rr9enx3H8tplN7U+Bmd2XJMnaQhQmOOfWEtGSTqpviibak6bpvEql4mvWzXbMFyvfYWYnqKr/TnKPL+f3IepzEbkyH3POzSKiV8xsSoch9gFYx8w9xQz5OJDgbRA552ZEUXR+lmWTiGh9IDLzhW4fRFV9BMDDwVU1n+a/p6w1s+IFbMisURQdyrLsBxHZ2dd3mj5Bit6cc98AuCgAXU5EdwO4qjjXzPYS0WIR2T5k1cNcMGiQRqPxMhEtGsiPmW0QkZVEFJb+B1rW9vigQVT1NjN7qx+PB4loOTO/0baqYRgYNIiZkaq+X6yKtHz6u/gSIvKpzqi0QYMEb7TVAJa2Pkp+a2ZPisj6gQ7JTtMNCaTTYtqx/y/2ZXxKzaQkWgAAAABJRU5ErkJggg=="
draggable="true"
/>
</view>
<view class="zhan"></view>
<!-- 搜索框下面的排序栏 -->
<view v-if="tanchu">
<view class="end-title tablist">
  <view @click="change(0);sort('goods_id')" :class="{ btna: btnnum == 0 }">综合</view>
 <view
:class="{ btna: btnnum == 1 }"
class="shops"
@click="
change(1);
sort('sale_num');
"
>
<p>销量</p>
<view class="shopsimgs">
<img
v-if="!xiaoliangarr"
src="/static/home/shangxia_hui.png"
alt=""
/>
<img
v-if="xiaoliangarr && xiaolianglist"
src="/static/home/down_paixu.png"
alt=""
/>
<img
v-if="xiaoliangarr && !xiaolianglist"
src="/static/home/up_paixu.png"
alt=""
/>
</view>
</view>
 <view
:class="{ btna: btnnum == 2 }"
class="shops"
@click="
change(2);
sort('price');
"
>
<p>价格</p>
<view class="shopsimgs">
<img v-if="!jiagearr" src="/static/home/shangxia_hui.png" alt="" />
<img
v-if="jiagearr && jiagelist"
src="/static/home/down_paixu.png"
alt=""
/>
<img
v-if="jiagearr && !jiagelist"
src="/static/home/up_paixu.png"
alt=""
/>
</view>
</view>
</view>
<view class="end-cont" :class="{ dis: btnnum == 0 }">
<shoplist :shop="list" class="comm"></shoplist>
</view>
<view class="end-cont" :class="{ dis: btnnum == 1 }">
<shoplist :shop="list" class="comm"></shoplist>
</view>
<view class="end-cont" :class="{ dis: btnnum == 2 }">
<shoplist :shop="list" class="comm"></shoplist>
</view>
</view>
<!-- 搜索不到内容给的提示 -->
<view class="sousuo" v-if="kon">
<img src="/static/home/nopic.png" draggable="true" />
<p>暂无数据</p>
</view>
</view>
</template>
<script>
import shoplist from "../../components/shoplist.vue";
export default {
data() {
return {
//判断搜索内容是否为空
kong: [],
//判断搜索内容标志位
kon: false,
value: "",
list: [],
//标准位,取消重复发生ajax请求
flag: false,
//保存明星爆款传来的值
hots: [],
//保存九宫格传来的id
newlist: [],
//保存轮播图传来的id
bann: [],
//tab栏切换
btnnum: 0,
//判断tab切换是否出现
tanchu: false,
//判断是否点击了销量
xiaoliangarr: false,
//判断是否点击了价格
jiagearr: false,
//销量
xiaolianglist: false,
//价格
jiagelist: false,
//排序
order: false,
sortType: null,
};
},
onLoad(el) {
this.hots = el.key;
this.newlist = el.newlist;
this.bann = el.banner;
},
created() {
//判断明星爆款是否传来了值
if (this.hots != null || this.newlist != null || this.bann != null) {
this.getsearch();
}
},
methods: {
//搜索接口
async getsearch() {
let res = await this.$http.index.search({
//根据关键字搜索
search_words: this.value || this.hots,
//根据id搜索
activity_id: this.newlist || this.bann,
});
//这里写true的原因就是首页点进来进入搜索页面tab栏切换也要打开
this.tanchu = true;
//price 是价格-----------------sale_num 是销售数量
console.log(res.data.data);
this.list = res.data.data;
//判断搜索内容是否为空
if (this.list.length == 0) {
this.kon = !this.kon;
}
},
//键盘确认键按下事件
onenter() {
if (this.value.length != 0) {
if (this.flag == true) {
this.getsearch();
this.flag = false;
this.tanchu = true;
}
} else {
uni.showToast({
title: "关键词不能为空",
icon: "none",
duration: 2000,
});
//当输入框内的值为0,清空搜索内容
this.list = "";
this.tanchu = false;
}
},
//输入框事件
onInput() {
this.flag = true;
},
//点击返回上一层
back() {
uni.navigateBack();
},
//tab栏切换事件 0-综合 1-销量 2-价格
change(e) {
//判断当前点击位置是否是综合
if (e == 0) {
}
//当前点击的位置等于销量
if (e == 1) {
this.xiaoliangarr = true;
this.jiagearr = false;
this.xiaolianglist = !this.xiaolianglist;
}
//当前点击的位置等于价格
if (e == 2) {
this.xiaoliangarr = false;
this.jiagearr = true;
this.jiagelist = !this.jiagelist;
}
this.btnnum = e;
console.log("当前点击的下标", e);
},
//实现排序
sort(type) {
this.order = !this.order; // 更改为 升序或降序
this.sortType = type;
this.list.sort(this.compare(type));
},
// 排序方法
compare(attr) {
let that = this;
return function (a, b) {
let val1 = a[attr];
let val2 = b[attr];
if (that.order) {
return val1 - val2;
} else {
return val2 - val1;
}
};
},
},
components: {
shoplist,
},
computed: {},
};
</script>
<style lang="less" scoped>
@import "../../common/less/page/search.less";
/deep/.shoplist {
margin-top: 20rpx;
}
/deep/.shoplist:first-child {
margin-top: 100rpx;
}
</style>

View File

@@ -0,0 +1,267 @@
<template>
<view class="info">
<view class="header">
<image src="/static/info/left.png" mode="" class="left"></image>
</view>
<view class="content">
<view class="shang">
<view class="tupian">
</view>
<view class="neirong">
<view class="mingzi">
<view class="left">
<image src="/static/info/xian.png" mode="" style="height:15px; width:15px;margin-right: 15px;"></image>
<!-- <image src="/static/info/re.png" mode="" style="height:15px; width:15px;margin-right:15px;" v-if='list.supplier_id<=10000'></image> -->
<view>碧生源牌常润茶</view>
</view>
<image src="/static/info/coll1.png" alt="" class='shouc'></image>
<!-- <image src="/static/info/coll2.png" alt="" class='shouc' v-if='list.is_collect==0' @click='to_change(1)'></image> -->
</view>
<view class="gongsi">
北京澳特舒尔保健品开发有限公司
</view>
<view class="shuliang">
62.5g(2.5g*20袋+12.5g)
<image src="/static/info/zheng.png" class="lingling" mode="" style="height:15px; width:15px;"></image>
<!-- <image src="/static/info/ling.png" class="lingling" mode="" style="height:15px; width:15px;" v-if='list.retail_flag == 0'></image> -->
<view class="hejian">1盒/件</view>
</view>
<view class="price">
<view class="jiage">¥60.5</view>
</view>
</view>
</view>
<view class="zhong">
<view class="">
<view class="" style="width:30%">商品名称</view>
<view>碧生源牌常润茶</view>
</view>
<view class="">
<view class="" style="width:30%">生产厂家</view>
<view>北京澳特舒尔保健品开发有限公司</view>
</view>
<view class="">
<view class="" style="width:30%">规格</view>
<view>62.5g(2.5g*20袋+12.5g)</view>
</view>
<view class="">
<view class="" style="width:30%">有效期</view>
<view>2022-07-11</view>
</view>
<view class="">
<view class="" style="width:30%">批准文号</view>
<view>Q/FATS0001-2011</view>
</view>
</view>
<view class="xia">
<view class="zhuyi">注意事项</view>
<view class="">
<view class="guiding">
1.根据国家规定,药品类商品一般情况下无质量问题不支持退货;
</view>
<view class="guiding">
2.客户在收取商品时,应当面确认商品有无破损,若发生破损,应及时联系客服;确认收货后,概不支持退换货。
</view>
</view>
</view>
</view>
<view class="footer">
<view class="the_car">
<image src="/static/info/car2.png" mode="" class="gouwuc"></image>
</view>
<view class="jiache">加入购物车</view>
<view class="ligou">立即购买</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
info: {},
sku_id: this.$route.query.id,
}
},
onShow() {
this.getInfoData();
},
onLoad(params) {
this.sku_id = params.sku_id
},
methods:{
async getInfoData() {
let res = await this.$http.index.goodsDetail({
sku_id: this.sku_id,
}
);
this.info = res;
console.log(res)
},
},
};
</script>
<style scoped lang="less">
.info{
height: 100%;
font-size: 13px;
line-height: 1.8;
.header{
height: 74px;
position: relative;
line-height: 105px;
font-size: 16px;
background: linear-gradient(to left,#6B68DC,#008BE6);
position: sticky;
top: 44px;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
z-index: 999;
flex: 1;
flex-direction: column;
overflow: hidden;
.left{
position: absolute;
bottom: 14px;
left: 15px;
height: 15px;
width: 9px;
padding: 0 10px;
}
}
.content{
height: calc(100% - 114px);
overflow-y: auto;
background-color: #F2F2F2;
.shang{
background-color: #FFFFFF;
margin-bottom: 11px;
.tupian{
background-image: url(https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/pc_shop_thumb_url_1606785749538.png);
background-size: contain;
background-position: center center;
height: 175px;
background-repeat: no-repeat;
}
.neirong{
padding: 15px 5px;
.mingzi{
display: flex;
justify-content: space-between;
.left{
font-size: 14px;
font-weight: bold !important;
display: flex;
justify-content: space-between;
align-items: center;
image{
height: 15px;
width: 15px;
margin-right: 15px;
}
view{
font-size: 14px;
}
}
.shouc{
height: 18px;
width: 18px;
margin-right: 15px;
will-change: transform;
}
}
.gongsi{
width: 100%;
}
.shuliang{
display: flex;
align-items: center;
.lingling{
margin: 0 10px;
}
.hejian{}
}
.price{
.jiage{
color: #EB5159;
font-size: 14px;
font-weight: bold !important;
}
}
}
}
.zhong{
background: #FFFFFF;
padding: 15px 5px;
margin-bottom: 11px;
view{
display: flex;
view{
width: 30%;
}
view{
width: 70%;
}
}
}
.xia{
background: #FFFFFF;
padding: 15px 5px;
margin-bottom: 11px;
.zhuyi{
font-weight: bold !important;
}
view{
.guiding{
margin: 10px 0 10px 0;
color: #989898;
}
}
}
}
.footer{
height: 40px;
overflow: hidden;
display: flex;
align-items: center;
position: sticky;
/* #ifdef H5 */
bottom: 50px;
/* #ifndef H5 */
bottom: 0;
/* #endif */
z-index: 999;
flex: 1;
overflow: hidden;
background-color: #ffffff;
.the_car{
flex: 1;
text-align: center;
position: relative;
.gouwuc{
height: 20px;
width: 23px;
}
}
.jiache{
background-color: #EDCA4A;
line-height: 40px;
width: 38%;
color: #FFFFFF;
text-align: center;
}
.ligou{
background-color: #EB5159;
line-height: 40px;
width: 38%;
color: #FFFFFF;
text-align: center;
}
}
}
</style>

View File

@@ -0,0 +1,319 @@
<template>
<view class="content h-100">
<view class="imgaaa">
<!-- <image src="/static/login/login.png"></image> -->
<view v-if="login_flag" class="L_left">登录</view>
<view v-if="!login_flag" class="L_left">注册</view>
</view>
<view class="L_Z">
<view class="L_Z_A">
<view class="menu_items" @click="chooseMenu(index)" :class="{menu_active: menu_index==index}" v-for="(item,index) of form_menu" :key='index'>{{item.name}}</view>
</view>
</view>
<!-- 登录 -->
<view class="my_L_Z" v-if="menu_index==0">
<view class="my_phone">
<image src="/static/login/phone.png" mode="" class="phone"></image>
<input class="inputtt" type="text" cursor-spacing="20" focus placeholder="请输入手机号" v-model="phone"/>
</view>
<view class="my_key">
<image src="/static/login/suo.png" mode="" class="phone"></image>
<input class="inputtt" cursor-spacing="20" :type="is_type" placeholder="请输入密码" v-model="password"/>
<image src="/static/login/bukan.png" mode="" class="is_seen" v-if="seen==false" @tap='change_seen()'></image>
<image src="/static/login/kan.png" mode="" class="is_seen1" v-if="seen==true" @tap='change_seen()'></image>
</view>
<button class="my_login" @tap="UserLogin">登录</button>
<text class="my_forget">忘记密码?</text>
</view>
<!-- 注册 -->
<view class="my_L_Z" v-if="menu_index==1">
<view class="my_phone">
<image src="/static/login/phone.png" mode="" class="phone"></image>
<input class="inputtt" type="text" cursor-spacing="20" focus placeholder="请输入手机号" v-model="phone"/>
</view>
<view class="my_key">
<image src="/static/login/loginadd.png" mode="" class="phone" style="height: 21px;width: 27px;"></image>
<input class="inputtt" type="number" placeholder="验证码">
<view class="yanzheng" v-if="get_code==false" @click="getCode()">获取验证码</view>
<view class="yanzheng" v-else>{{count_time}}s后再次获取验证码</view>
</view>
<view class="my_key">
<image src="/static/login/suo.png" mode="" class="phone"></image>
<input class="inputtt" cursor-spacing="20" :type="is_RseenType" placeholder="请设置密码" v-model="new_password"/>
<image src="/static/login/bukan.png" mode="" class="is_seen" v-if="Rseen==false" @tap='change_Rseen()'></image>
<image src="/static/login/kan.png" mode="" class="is_seen1" v-if="Rseen==true" @tap='change_Rseen()'></image>
</view>
<view class="my_key">
<image src="/static/login/suo.png" mode="" class="phone"></image>
<input class="inputtt" cursor-spacing="20" :type="is_rseenType" placeholder="确认密码" v-model="sure_password"/>
<image src="/static/login/bukan.png" mode="" class="is_seen" v-if="rseen==false" @tap='change_rseen()'></image>
<image src="/static/login/kan.png" mode="" class="is_seen1" v-if="rseen==true" @tap='change_rseen()'></image>
</view>
<button class="my_login" @tap='UserReg'>注册</button>
<view class="agree">
<view>点击“注册”即表示您已阅读并同意</view>
<view style="color: #D82008;">《医点医滴会员服务协议》</view>
</view>
</view>
</view>
</template>
<script>
import md5 from "../../utils/md5.min.js";
export default{
data() {
return {
seen:false,
Rseen:false,
rseen:false,
login_flag:true,
is_type:'password',
is_RseenType:'password',
is_rseenType:'password',
form_menu:[{
name:'登录',
id:0
},{
name:'注册',
id:1
}],
menu_index:0,
get_code:false,
phone:'',
password:'',
new_password: '',
sure_password: '',
};
},
methods:{
// jinru(){
// uni.switchTab({
// url: '/pages/index/index'
// });
// },
// 密码内容是否可见
change_seen(){
this.seen = !this.seen
if(this.seen == true){
this.is_type = 'text'
}else{
this.is_type = 'password'
}
},
change_rseen(){
this.rseen = !this.rseen
if(this.rseen == true){
this.is_rseenType = 'text'
}else{
this.is_rseenType = 'password'
}
},
change_Rseen(){
this.Rseen = !this.Rseen
if(this.Rseen == true){
this.is_RseenType = 'text'
}else{
this.is_RseenType = 'password'
}
},
// 选择菜单(登录或者注册)
chooseMenu(index){
// 解决登录 或 注册 重复点击标题切换
if (this.menu_index != index){
this.menu_index = index;
this.login_flag = !this.login_flag
}
},
// 注册
async UserReg() {
if (!this.$util.checkPhone(this.phone)) {
this.$toast.fail("手机号必须正确");
return false;
}
if (this.new_password.length == 0) {
this.$toast.fail("密码必填");
return false;
}
if (this.sure_password.length == 0) {
this.$toast.fail("密码必填");
return false;
}
let res = await this.$http.index.reg(this.phone,this.new_password,this.sure_password);
// this.currentPage = true;
},
//登录
async UserLogin() {
if (this.phone.length == 0) {
uni.showToast({
title: '号码必填',
duration: 2000
})
return false;
}
if (this.password.length == 0) {
uni.showToast({
title: '密码必填',
duration: 2000
})
return false;
}
var now_time = (Date.parse(new Date()))/1000;
var is_sign = md5('123456' + 'test' + this.phone + md5(this.password) + now_time)
let res = await this.$http.index.login({
phone: this.phone,
password: this.password,
appid: "test",
timestamp: now_time,
sign: is_sign
});
localStorage.setItem("token", res.access_token);
setTimeout(function() {
uni.switchTab({
url: '/pages/index/index'
})
}, 500);
},
}
}
</script>
<style scoped lang="less">
.content {
line-height: 1.8;
.imgaaa{
height: 202px;
padding-top: 30px;
position: relative;
background-image: url(/static/login/login.png);
background-position: 100% 100%;
background-size: cover;
border:none;
outline: none;
-webkit-box-sizing: border-box;
.L_left{
font-size: 16px;
// margin-top:30px;
text-align: center;
color: #FFFFFF;
}
}
.L_Z{
padding: 0 32px;
font-size: 13px;
line-height: 1.8;
.L_Z_A{
display: flex;
font-size: 13px;
line-height: 1.8;
.menu_items{
margin-right:22px;
}
}
.menu_active{
color: #282828;
font-size: 16px;
border-bottom:3px solid #6B68DC;
font-weight: bold;
}
}
.my_L_Z{
padding: 50px 32px;
.my_phone{
border-bottom: 3px solid #F2F2F2;
height: 50px;
display: flex;
align-items: center;
.phone{
height: 20px;
width: 18px;
}
.inputtt{
height:20upx;
width:47upx;
border: none;
outline: none;
padding-left: 10px;
height: 100%;
width: 100%;
}
}
.my_key{
border-bottom: 3px solid #F2F2F2;
height: 50px;
display: flex;
align-items: center;
.phone{
height: 20px;
width: 18px;
}
.inputtt{
height:20upx;
width:47upx;
border: none;
outline: none;
padding-left: 10px;
height: 100%;
width: 100%;
}
.is_seen{
height: 10px;
width: 23px;
}
.is_seen1{
height:30upx;
width:47upx;
}
}
.my_login{
margin-top: 30px;
height: 34px;
color: #FFFFFF;
text-align: center;
line-height: 34px;
font-size: 15px;
background: linear-gradient(to left,#6B68DC,#008BE6);
}
.my_forget{
display: inline-block;
margin: 7px 0;
color: #6B6AD5;
border-bottom: 0.5px solid #6B6AD5;
font-size: 13px;
// line-height: 1.8;
}
.yanzheng{
color: #D82008;
font-size: 12px;
width: 50%;
text-align: right;
}
.agree {
font-size: 13px;
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}
}
}
</style>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,92 @@
<template>
<view>
<!-- 订单 -->
<view class="top flood">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAfCAYAAAAFkva3AAAA9ElEQVRIS63UIW5CQRSF4f8YXFeAKHtgBU3qWlPRlWBqcDgSdoCoq6G+qhXV3Q6quWQIkCG8ee/emTd+vsxJ5hzRcMzsHvgA7oBX1Von6AeYnYx1FdYB7YGHMFaAXiR9hTAzS5G+s2jpRUcoRXVjQ5Ab80AuzAsNYhGoF4tCRawG6sRqoRusBbrCWqELNgZ0xMxsCvxmFfkHns4ViaxKwibAZwKyiytJywiUxxwFvBR9jBderUYreDNBLWDnntWCxXGsAXuXNgoOznYEHMTSZ/SCLiwDd8BzqSluzAOGsB5wIWkTxgrgn6R5FZaBW+AReJP0fgD6yKcB+KwshwAAAABJRU5ErkJggg=="
@click="back" />
<p>我的订单</p>
</view>
<p class="flag"></p>
<!-- tab栏切换 -->
<view>
<view class="end-title">
  <view
@tap="change(j)"
v-for="(i, j) in navList"
:key="j"
:class="{ btna: btnnum == j }"
>{{ i.text }}</view
>
 
</view>
<view
class="end-cont"
:class="{ dis: btnnum == j }"
v-for="(i, j) in navList"
:key="j"
>{{ i.state }}</view
>
</view>
</view>
</template>
<script>
export default {
data() {
return {
btnnum: 0,
//保存的是上一个页面带来的索引
index: [],
navList: [
{
state: "全部",
text: "全部",
orderList: [],
},
{
state: "待付款",
text: "待付款",
orderList: [],
},
{
state: "待发货",
text: "待发货",
orderList: [],
},
{
state: "待收获",
text: "待收获",
orderList: [],
},
{
state: "已完成",
text: "已完成",
orderList: [],
},
],
};
},
onLoad(el) {
this.index = el.index;
},
created() {
console.log("上一页传来的下标", this.index);
this.btnnum = this.index;
},
methods: {
change(e) {
this.btnnum = e;
console.log(this.btnnum);
},
back() {
uni.navigateBack();
},
},
};
</script>
<style lang='less' scoped>
@import "../../common/less/page/meinfo.less";
</style>

View File

@@ -0,0 +1,435 @@
<template>
<view class="container">
<view class="status_bar"><!-- 这里是状态栏 --></view>
<view class="page-header">
<view :class="['title', cartList.length > 0 ? '' : 'text-center']">购物车</view>
<block v-if="cartList.length > 0">
<view class="edit" v-if="btnType === 'edit'" @click="$u.throttle(btnTool('edit'), 2000)">管理</view>
<view class="edit" v-if="btnType === 'done'" @click="$u.throttle(btnTool('done'), 2000)">完成</view>
</block>
</view>
<!-- <u-checkbox-group> -->
<view class="cart-box" v-if="cartList.length > 0">
<u-swipe-action
:show="item.show"
:disabled="swipeAction"
btn-width="160"
:index="index"
v-for="(item, index) in cartList"
:key="item._id"
@click="$u.throttle(actionClick($event, item._id), 2000)"
@open="actionOpen"
:options="options"
>
<view class="item u-border-bottom">
<u-checkbox-group @change="checkboxChange" width="36rpx">
<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#007aff" class="checkbox"></u-checkbox>
</u-checkbox-group>
<view class="cart-img"><image mode="widthFix" :src="item.product.image" @click.stop="$u.throttle(gotoDetail(item.product._id), 2000)"></image></view>
<!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 -->
<view class="title-wrap" @click.stop="$u.throttle(gotoDetail(item.product._id), 2000)">
<div class="right">
<div class="title">
<p class="hot">热</p>
<p class="effect">降脂通便胶囊</p>
</div>
<div class="firm">
<p>河南辅仁堂制药有限公司</p>
</div>
<div class="slice">
0.5*24片
</div>
<div class="case">
<p>1盒/件</p>
<p class="zero">零</p>
</div>
</div>
<view class="price">
¥
<text class="large">{{ priceInt(item.product.price) }}</text>
.{{ priceDecimal(item.product.price) }}
</view>
</view>
<u-number-box
v-model="item.product.number"
:min="1"
:max="item.product.stock"
input-width="100"
input-height="50"
@change="valChange($event, item.product._id)"
></u-number-box>
</view>
</u-swipe-action>
</view>
<view class="page-box" v-else>
<view>
<view class="emputy">
<image src="/static/order/emputy.png"></image>
<view class="explain">
您还没有相关的订单
<view class="tips">可以去看看有哪些想买的</view>
</view>
<view class="btn" @click="$u.throttle(gotoHome, 2000)">随便逛逛</view>
</view>
</view>
</view>
<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
<u-gap height="100" bg-color="#fff"></u-gap>
<view class="bottom" v-if="cartList.length > 0">
<u-checkbox @change="checkedAll" v-model="checked" size="40" shape="circle" active-color="#007aff" class="checkall"><span>全选</span></u-checkbox>
<text class="price fill" v-if="btnType === 'edit'">
<text class="sml">总计:</text>
¥{{ totalPrice }}
</text>
<u-button
class="button"
throttle-time="2000"
v-if="btnType === 'edit'"
@click="$u.throttle(btnClick('order'), 2000)"
size="medium"
:ripple="true"
ripple-bg-color="#FEBABD"
:customStyle="customStyle"
>
结算(
<text v-if="totalCount > 0">{{ totalCount }}</text>
<text v-else>0</text>
)件
</u-button>
<u-button
class="button"
throttle-time="2000"
v-if="btnType === 'done'"
size="medium"
:ripple="true"
ripple-bg-color="#EB5159"
shape="circle"
:customStyle="customStyle3"
@click="$u.throttle(btnClick('collect'), 2000)"
>
移入收藏夹
</u-button>
<u-button
class="button"
throttle-time="2000"
v-if="btnType === 'done'"
size="medium"
:ripple="true"
ripple-bg-color="#EB5159"
shape="circle"
:customStyle="customStyle2"
@click="$u.throttle(btnClick('del'), 2000)"
>
删除
</u-button>
</view>
<u-modal
v-model="showModal"
:title="title"
:content="content"
:title-style="titleStyle"
:content-style="contentStyle"
:confirm-style="confirmStyle"
:show-cancel-button="true"
@confirm="confirm"
></u-modal>
<u-toast ref="uToast" />
</view>
</template>
<script>
import sortdata from 'static/data/cartData.js';
export default {
data() {
return {
loadStatus: 'loadmore',
cartList: [], //购物车列表
showModal: false, //modal弹窗
title: '提示', //弹窗标题
content: '确认删除商品?', //弹窗内容
delId: '', //删除id,
options: [
{
text: '删除',
style: {
backgroundColor: '#FD013E'
}
}
], //u-swipe-action样式
btnType: 'edit', //按钮类型
checked: false, //是否全选
swipeAction: false, //是否禁止滑动
// u-button样式
customStyle: {
color: '#fff',
backgroundColor: '#eb5159',
margin: '0',
padding: '0 20rpx',
width: '260rpx',
height: '100%',
fontSize: '32rpx',
},
customStyle2: {
color: '#eb5159',
backgroundColor: 'rgba(0,0,0, 0)',
margin: '0 30rpx',
padding: '0 10rpx',
border: 'none',
width: '150rpx',
height: '60rpx',
fontSize: '32rpx'
},
customStyle3:{
border: '0.5px solid #EDCA4A',
height: '30px',
width:'99px',
color: '#EDCA4A',
margin: '0 22px 0 30px',
},
// 模态窗样式
titleStyle: {
fontSize: '36rpx'
},
contentStyle: {
fontSize: '36rpx'
},
confirmStyle: {
color: '#fff',
backgroundColor: '#FD013E'
}
};
},
onShow() {
this.checked = false;
this.getCart();
console.log(this.cartList);
},
computed: {
// 价格合计
totalPrice() {
let sumPrice = 0,
items = this.cartList;
items.forEach(val => {
let priceVal = parseFloat(val.product.price),
salesVal = parseFloat(val.product.number);
if (val.check) {
sumPrice += priceVal * salesVal;
}
});
// sumPrice = sumPrice == 0 ? 0 : sumPrice.toFixed(2);
let tofixNum = sumPrice.toFixed(2);
return parseFloat(tofixNum);
},
// 数量统计
totalCount() {
let totalNumber = 0,
items = this.cartList;
items.forEach(val => {
if (val.check) {
totalNumber += val.number;
}
});
return totalNumber;
},
// 价格整数
priceInt() {
return val => {
let priceStr = val.toString();
if (priceStr != parseInt(priceStr)) {
return priceStr.split('.')[0];
} else {
return priceStr;
}
};
},
// 价格小数
priceDecimal() {
return val => {
let priceStr = val.toString();
if (priceStr != parseInt(priceStr)) {
return priceStr.split('.')[1];
} else {
return '00';
}
};
}
},
methods: {
// 购物车列表
getCart() {
const resData = sortdata.cartData;
resData.forEach(val => {
val.show = false;
val.check = false;
});
this.cartList = resData;
},
gotoHome() {
uni.switchTab({
url: '/pages/tabbar/home/home'
});
},
// 管理按钮
btnTool(type) {
switch (type) {
case 'edit':
this.btnType = 'done';
this.swipeAction = true;
let items = this.cartList;
items.forEach(val => {
val.show = false;
});
break;
case 'done':
this.btnType = 'edit';
this.swipeAction = false;
break;
}
},
// 删除
actionClick(index, del) {
this.showModal = true;
this.delId = del;
},
// 删除确认
confirm() {
let _self = this;
let delArr = [],
type = _self.btnType,
items = _self.cartList;
if (type === 'edit') {
delArr.push(_self.delId);
} else {
items.forEach(val => {
if (val.check) {
delArr.push(val._id);
}
});
_self.btnType = 'edit';
}
// 为了模拟清空购物车
if (delArr.length == items.length) {
_self.cartList = [];
}
_self.$refs.uToast.show({
title: '删除了id为' + delArr + '的商品',
icon: false
});
},
// 如果打开一个的时候,不需要关闭其他,则无需实现本方法
actionOpen(index) {
// 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
// 原本为'false',再次设置为'false'会无效
let items = this.cartList;
items[index].show = true;
items.forEach((val, idx) => {
if (index != idx) {
items[idx].show = false;
}
});
},
// 跳转详情
gotoDetail(id) {
console.log(id);
uni.navigateTo({
url: '/pages/info/info'
})
},
// 选中商品
checkboxChange(e) {
let items = this.cartList;
let checkedArr = [];
items.forEach(val => {
if (val.check) {
checkedArr.push(val);
}
});
let len = checkedArr.length;
// 如果选择的数组中有值,并且长度等于列表长度,就是全选
if (len > 0 && len == items.length) {
this.checked = true;
} else {
this.checked = false;
}
},
// 数量增减
valChange(e, id) {
// console.log(e, id);
},
// 全选
checkedAll() {
this.checked = !this.checked;
let flag = this.checked,
items = this.cartList;
items.forEach(val => {
if (flag) {
val.check = true;
} else {
val.check = false;
}
});
},
// 结算
btnClick(type) {
let _self = this;
switch (type) {
case 'order':
let items = _self.cartList;
let checkedArr = [];
items.forEach(val => {
if (val.check) {
checkedArr.push(val._id);
}
});
let shopIds = checkedArr.toString();
if (!shopIds) {
_self.$refs.uToast.show({
title: '请选择要结算的商品!',
icon: false
});
return;
}
console.log(shopIds);
// uni.navigateTo({
// url: '/pages/order/createOrder?cartId=' + shopIds
// });
break;
case 'del':
if (!_self.totalCount) {
_self.$refs.uToast.show({
title: '请选择要删除的商品!',
icon: false
});
return;
}
_self.showModal = true;
break;
case 'collect':
if (!_self.totalCount) {
_self.$refs.uToast.show({
title: '请选择要收藏的商品!',
icon: false
});
return;
} else if(_self.totalCount) {
_self.$refs.uToast.show({
title: '收藏成功!',
icon: false
})
break;
}
}
}
}
};
</script>
<style lang="scss" scoped>
// 状态栏占位
@import "../../common/less/page/shop";
</style>

View File

@@ -0,0 +1,359 @@
let cartData = [{
"_id": "001",
"add_time": 1609911170014,
"number": 1,
"checked": true,
"sku": {
"_id": "1503f3385f1bcc7d009a50fa75ed068a",
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657323459999375.jpg",
"market_price": null,
"name": "【三重护唇】柠檬2支装",
"price": 34.9,
"product_id": "3d23c0a05f1bcc7d00880a3b0489774c",
"stock": 498
},
"uid": "d81cd5415f8d02b4016f3896373ac949",
"product_id": "3d23c0a05f1bcc7d00880a3b0489774c",
"sku_id": "1503f3385f1bcc7d009a50fa75ed068a",
"product": {
"_id": "3d23c0a05f1bcc7d00880a3b0489774c",
"look_num": 2165,
"rating_ratio": "75.0",
"collection_num": 0,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657054187475813.jpg",
"is_del": 0,
"number": 1,
"market_price": null,
"price": 16.95,
"title": "曼秀雷敦什果冰润唇膏滋润嘴唇保湿女男士学生补水防冻防干裂无色",
"add_time": 1595657341004,
"cate_id": "1503f3385f1ae74d008df2376ada0de2",
"cate_name": "口红",
"first_cate_name": "个护彩妆",
"is_hot": 1,
"is_sales": 1,
"sales": 0,
"stock": 7022,
"content": "",
"first_cate_id": "f47f682c5f1ae67f007ad8226bb01b44",
"skuData": {
"attrList": [{
"parent": "款式",
"name": "【三重护唇】柠檬"
},
{
"name": "【卸妆护唇】草莓",
"parent": "款式"
},
{
"name": "【抵御阳光】苹果",
"parent": "款式"
},
{
"name": "【果汁清香】青提+葡萄",
"parent": "款式"
},
{
"name": "【唇妆显色】香橙+蜜柑",
"parent": "款式"
},
{
"parent": "款式",
"name": "【三重护唇】柠檬2支装"
},
{
"parent": "款式",
"name": "【卸妆护唇】草莓2支装"
},
{
"name": "【抵御阳光】苹果2支装",
"parent": "款式"
},
{
"name": "【果汁清香】青提+葡萄 2支装",
"parent": "款式"
},
{
"name": "【唇妆显色】香橙+蜜柑2支装",
"parent": "款式"
}
],
"skuList": [{
"stock": 500,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657309180697883.jpg",
"market_price": null,
"name": "【三重护唇】柠檬",
"price": 16.9
},
{
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657311909727052.jpg",
"market_price": null,
"name": "【卸妆护唇】草莓",
"price": 16.9,
"stock": 600
},
{
"market_price": null,
"name": "【抵御阳光】苹果",
"price": 16.9,
"stock": 500,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657314697951048.jpg"
},
{
"price": 16.9,
"stock": 600,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657317349907606.jpg",
"market_price": null,
"name": "【果汁清香】青提+葡萄"
},
{
"market_price": null,
"name": "【唇妆显色】香橙+蜜柑",
"price": 16.9,
"stock": 888,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657320538296159.jpg"
},
{
"price": 34.9,
"stock": 500,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657323459999375.jpg",
"market_price": null,
"name": "【三重护唇】柠檬2支装"
},
{
"price": 34.9,
"stock": 600,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657326265180617.jpg",
"market_price": null,
"name": "【卸妆护唇】草莓2支装"
},
{
"name": "【抵御阳光】苹果2支装",
"price": 34.9,
"stock": 888,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657329511313690.jpg",
"market_price": null
},
{
"name": "【果汁清香】青提+葡萄 2支装",
"price": 34.9,
"stock": 999,
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657336928488221.jpg",
"market_price": null
},
{
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657340512684847.jpg",
"market_price": null,
"name": "【唇妆显色】香橙+蜜柑2支装",
"price": 34.9,
"stock": 999
}
],
"specList": [{
"name": "款式",
"newAttr": ""
}]
},
"status": 1,
"thumb": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657049599668876.jpg"
},
"title": "曼秀雷敦什果冰润唇膏滋润嘴唇保湿女男士学生补水防冻防干裂无色",
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657049599668876.jpg",
"price": 34.9,
"stock": 498,
"invalid": false
},
{
"_id": "002",
"add_time": 1609911161853,
"number": 1,
"checked": true,
"sku": {
"_id": "1b64dd7b5f899c370199c1245a6994a6",
"image": "",
"market_price": 0,
"name": "【美白提亮】全新升级小白管35g",
"price": 0.8,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 233
},
"uid": "d81cd5415f8d02b4016f3896373ac949",
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"sku_id": "1b64dd7b5f899c370199c1245a6994a6",
"product": {
"_id": "15d399db5f1bd1420084d37a17d2c336",
"add_time": 1595658562878,
"cate_id": "9bf625a55f1aeaf20061c51741ef092c",
"cate_name": "隔离霜",
"collection_num": 0,
"content": "",
"first_cate_id": "f47f682c5f1ae67f007ad8226bb01b44",
"first_cate_name": "个护彩妆",
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658506576937405.jpg",
"is_del": 0,
"number": 3,
"is_hot": 1,
"is_sales": 1,
"look_num": 6242,
"market_price": 0,
"price": 0.7,
"sales": 2,
"sku": [{
"_id": "d81cd5415f899b9e015bb4cc25841a86",
"image": "",
"market_price": 0,
"name": "【修饰暗沉】紫隔离35g",
"price": 0.07,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 595
},
{
"_id": "d81cd5415f899b9e015bb4cd7f46a36f",
"image": "",
"market_price": 0,
"name": "【美白提亮】全新升级小白管35g",
"price": 0.8,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 309
},
{
"_id": "d81cd5415f899b9e015bb4ce4dfe6a4a",
"image": "",
"market_price": 0,
"name": "【修饰敏感泛红】绿隔离35g",
"price": 0.9,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 876
}
],
"skuData": {
"attrList": [{
"name": "【美白提亮】全新升级小白管35g",
"parent": "颜色"
},
{
"name": "【修饰敏感泛红】绿隔离35g",
"parent": "颜色"
},
{
"name": "【修饰暗沉】紫隔离35g",
"parent": "颜色"
}
],
"skuList": [{
"image": "",
"market_price": 0,
"name": "【修饰暗沉】紫隔离35g",
"price": 0.07,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 595
},
{
"image": "",
"market_price": 0,
"name": "【美白提亮】全新升级小白管35g",
"price": 0.8,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 309
},
{
"image": "",
"market_price": 0,
"name": "【修饰敏感泛红】绿隔离35g",
"price": 0.9,
"product_id": "15d399db5f1bd1420084d37a17d2c336",
"stock": 876
}
],
"specList": [{
"name": "颜色",
"newAttr": ""
}]
},
"status": 1,
"stock": 1686,
"thumb": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658502634202887.jpg",
"title": "资生堂 Za白色新焕真皙美白隔离霜",
"update_time": 1602853943340
},
"title": "资生堂 Za白色新焕真皙美白隔离霜",
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658502634202887.jpg",
"price": 0.8,
"stock": 233,
"invalid": false
},
{
"_id": "003",
"add_time": 1609911148297,
"number": 1,
"checked": true,
"sku": {
"_id": "15d399db5f202a0000afdca07713f42c",
"image": "",
"name": "",
"price": 0.01,
"product_id": "94f505805f1bd20b00766b1308fbc437",
"stock": 86
},
"uid": "d81cd5415f8d02b4016f3896373ac949",
"product_id": "94f505805f1bd20b00766b1308fbc437",
"sku_id": "15d399db5f202a0000afdca07713f42c",
"product": {
"_id": "94f505805f1bd20b00766b1308fbc437",
"first_cate_id": "f47f682c5f1ae67f007ad8226bb01b44",
"is_del": 0,
"number": 2,
"look_num": 13290,
"sales": 10,
"update_time": 1595943424979,
"add_time": 1595658763127,
"collection_num": 0,
"first_cate_name": "个护彩妆",
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658723799535148.jpg",
"is_hot": 1,
"cate_name": "隔离霜",
"content": "",
"market_price": 68,
"price": 30.05,
"status": 1,
"stock": 86,
"title": "MR.WISH 心愿先生 多效修颜隔离霜",
"cate_id": "9bf625a55f1aeaf20061c51741ef092c",
"is_sales": 1,
"rating_ratio": "100.0",
"sku": [{
"_id": "15d399db5f1d0072008ceed202f2e6d8",
"image": "",
"name": "",
"price": 49,
"product_id": "94f505805f1bd20b00766b1308fbc437",
"stock": 986
}],
"skuData": {
"attrList": [
],
"skuList": [{
"product_id": "94f505805f1bd20b00766b1308fbc437",
"stock": 986,
"image": "",
"name": "",
"price": 0.01
}],
"specList": [
]
},
"thumb": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658721258946187.jpg"
},
"title": "MR.WISH 心愿先生 多效修颜隔离霜",
"image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658721258946187.jpg",
"price": 0.01,
"stock": 86,
"invalid": false
}
]
module.exports = {
cartData: cartData
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 499 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 944 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 800 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 551 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 505 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 423 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@@ -0,0 +1,13 @@
import Vue from 'vue';
import Vuex from 'vuex'
import car from './modules/cart'
Vue.use(Vuex);//vue的插件机制
const store = new Vuex.Store({
modules: {
car
}
})
export default store

View File

@@ -0,0 +1,29 @@
import http from "../../common/service/_"
export default {
state: {//存放状态
carCount: 0,
carList: []
},
getters: {//读取状态
GET_CARLIST(state) {
return state.carList
}
},
mutations: {
SET_CARLIST(state, data) {
state.carList = data
},
STE_COUNT(state,leng=1){
state.carCount += leng
}
},
actions: {
async PUT_SET_CARLIST({commit}) {
let res = await http.index.cartList();
console.log('actions', res)
// commit('STE_COUNT', res.length)
commit('SET_CARLIST', res)
}
}
}

View File

@@ -0,0 +1,77 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
@import 'uview-ui/theme.scss';
/* 颜色变量 */
/* 行为相关颜色 */
$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:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;

View File

@@ -0,0 +1,4 @@
## 1.1.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.1.5(2021-02-05)
- 调整为uni_modules目录规范

View File

@@ -0,0 +1,220 @@
<template>
<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
class="uni-collapse-cell">
<view :class="{ 'uni-collapse-cell--disabled': disabled}" class="uni-collapse-cell__title" @click="onClick">
<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
<text class="uni-collapse-cell__title-text">{{ title }}</text>
<!-- #ifdef MP-ALIPAY -->
<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow">
<uni-icons color="#bbb" size="20" type="arrowdown" />
</view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
<!-- #endif -->
</view>
<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
<slot />
</view>
</view>
</view>
</template>
<script>
/**
* CollapseItem 折叠面板子组件
* @description 折叠面板子组件
* @property {String} title 标题文字
* @property {String} thumb 标题左侧缩略图
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
*/
export default {
name: 'UniCollapseItem',
props: {
title: {
// 列表标题
type: String,
default: ''
},
name: {
// 唯一标识符
type: [Number, String],
default: 0
},
disabled: {
// 是否禁用
type: Boolean,
default: false
},
showAnimation: {
// 是否显示动画
type: Boolean,
default: false
},
open: {
// 是否展开
type: Boolean,
default: false
},
thumb: {
// 缩略图
type: String,
default: ''
}
},
data() {
return {
isOpen: false
}
},
watch: {
open(val) {
this.isOpen = val
}
},
inject: ['collapse'],
created() {
this.isOpen = this.open
this.nameSync = this.name ? this.name : this.collapse.childrens.length
this.collapse.childrens.push(this)
if (String(this.collapse.accordion) === 'true') {
if (this.isOpen) {
let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
if (lastEl) {
this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
}
}
}
},
methods: {
onClick() {
if (this.disabled) {
return
}
if (String(this.collapse.accordion) === 'true') {
this.collapse.childrens.forEach(vm => {
if (vm === this) {
return
}
vm.isOpen = false
})
}
this.isOpen = !this.isOpen
this.collapse.onChange && this.collapse.onChange()
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse-cell {
flex-direction: column;
border-color: $uni-border-color;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.uni-collapse-cell--hover {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell--open {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell--disabled {
background-color: $uni-bg-color-hover;
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
// opacity: 0.3;
}
.uni-collapse-cell--hide {
height: 48px;
}
.uni-collapse-cell--animation {
// transition: transform 0.3s ease;
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.uni-collapse-cell__title {
padding: 12px 12px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
height: 48px;
line-height: 24px;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-collapse-cell__title:active {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell__title-img {
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-collapse-cell__title-arrow {
width: 20px;
height: 20px;
transform: rotate(0deg);
transform-origin: center center;
}
.uni-collapse-cell__title-arrow-active {
transform: rotate(180deg);
}
.uni-collapse-cell__title-text {
flex: 1;
font-size: $uni-font-size-base;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
.uni-collapse-cell__content {
overflow: hidden;
}
.uni-collapse-cell__wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-collapse-cell__content--hide {
height: 0px;
line-height: 0px;
}
</style>

View File

@@ -0,0 +1,59 @@
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
/**
* Collapse 折叠面板
* @description 展示可以折叠 / 展开的内容区域
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发,activeNames(Array):展开状态的uniCollapseItem的 name 值
*/
export default {
name: 'UniCollapse',
props: {
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
}
},
data() {
return {}
},
provide() {
return {
collapse: this
}
},
created() {
this.childrens = []
},
methods: {
onChange() {
let activeItem = []
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
this.$emit('change', activeItem)
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: $uni-bg-color;
}
</style>

View File

@@ -0,0 +1,18 @@
{
"version": "1.1.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"vue": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
"vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
"dev": true
}
}
}

View File

@@ -0,0 +1,90 @@
{
"id": "uni-collapse",
"displayName": "Collapse 折叠面板",
"version": "1.1.6",
"description": " collapse uni-ui 折叠面板 手风琴",
"keywords": [
"Collapse",
"组件,可以折叠",
"/",
"展开的内容区域。"
],
"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-icons"
],
"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"
}
}
}
},
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"vuex": "^3.6.2"
}
}

View File

@@ -0,0 +1,107 @@
## Collapse 折叠面板
> 代码块: `uCollapse`
> 关联组件:`uni-collapse-item`、`uni-icons`。
展示可以折叠 / 展开的内容区域。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中引用组件
```html
<!-- 一般用法 -->
<uni-collapse @change="change">
<uni-collapse-item title="标题文字">
<uni-list>
<uni-list-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
<uni-list-item title="标题文字" note="描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
<uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="默认开启" open="true">
<view style="padding: 30rpx;"> 折叠内容主体,可自定义内容及样式 </view>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled="true">
<view style="padding: 30rpx;"> 禁用状态 </view>
</uni-collapse-item>
</uni-collapse>
<!-- 手风琴效果 -->
<uni-collapse accordion="true">
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
</uni-collapse>
<!-- 带图标 -->
<uni-collapse>
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view style="padding: 30rpx;">
折叠内容主体,可自定义内容及样式
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view style="padding: 30rpx;">
折叠内容主体,可自定义内容及样式
</view>
</uni-collapse-item>
</uni-collapse>
```
## API
### Collapse Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|accordion |Boolean|false |是否开启手风琴效果 |
### Collapse Event
|事件称名 |说明 |返回值 |
|:-: |:-: :-: |
|@change |切换面板时触发 |activeNames(Array):展开状态的uniCollapseItem的name值|
### Collapse Methods
|方法名称 |说明 |
|:-: |:-: |
|resize |更新当前列表高度,只有 `animation:true` 下生效|
> - resize 方法解决动态添加数据,带动画的折叠面板高度不更新的问题
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.nextTick()` 中使用
### CollapseItem Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|title |String |- |标题文字 |
|thumb |String |- |标题左侧缩略图 |
|disabled |Boolean|false |是否禁用 |
|open |Boolean|false |是否展开面板 |
|showAnimation |Boolean |false |开启动画 |

View File

@@ -0,0 +1,2 @@
## 1.2.3(2021-02-05)
- 调整为uni_modules目录规范

View File

@@ -0,0 +1,127 @@
<template>
<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
class="uni-grid-item__box" @click="_onClick">
<slot />
</view>
</view>
</template>
<script>
/**
* GridItem 宫格
* @description 宫格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=27
* @property {Number} index 子组件的唯一标识 ,点击gird会返回当前的标识
*/
export default {
name: 'UniGridItem',
inject: ['grid'],
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
column: 0,
showBorder: true,
square: true,
highlight: true,
left: 0,
top: 0,
openNum: 2,
width: 0,
borderColor: '#e5e5e5'
}
},
created() {
this.column = this.grid.column
this.showBorder = this.grid.showBorder
this.square = this.grid.square
this.highlight = this.grid.highlight
this.top = this.hor === 0 ? this.grid.hor : this.hor
this.left = this.ver === 0 ? this.grid.ver : this.ver
this.borderColor = this.grid.borderColor
this.grid.children.push(this)
// this.grid.init()
this.width = this.grid.width
},
beforeDestroy() {
this.grid.children.forEach((item, index) => {
if (item === this) {
this.grid.children.splice(index, 1)
}
})
},
methods: {
_onClick() {
this.grid.change({
detail: {
index: this.index
}
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-grid-item {
/* #ifndef APP-NVUE */
height: 100%;
display: flex;
/* #endif */
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-grid-item__box {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
position: relative;
flex: 1;
flex-direction: column;
// justify-content: center;
// align-items: center;
}
.uni-grid-item--border {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
border-right-color: $uni-border-color;
border-right-style: solid;
border-right-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
z-index: 0;
border-bottom: 1px $uni-border-color solid;
border-right: 1px $uni-border-color solid;
/* #endif */
}
.uni-grid-item--border-top {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
border-top: 1px $uni-border-color solid;
z-index: 0;
/* #endif */
}
.uni-highlight:active {
background-color: $uni-bg-color-hover;
}
</style>

View File

@@ -0,0 +1,141 @@
<template>
<view class="uni-grid-wrap">
<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
<slot />
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
/**
* Grid 宫格
* @description 宫格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=27
* @property {Number} column 每列显示个数
* @property {String} borderColor 边框颜色
* @property {Boolean} showBorder 是否显示边框
* @property {Boolean} square 是否方形显示
* @property {Boolean} Boolean 点击背景是否高亮
* @event {Function} change 点击 grid 触发,e={detail:{index:0}},index 为当前点击 gird 下标
*/
export default {
name: 'UniGrid',
props: {
// 每列显示个数
column: {
type: Number,
default: 3
},
// 是否显示边框
showBorder: {
type: Boolean,
default: true
},
// 边框颜色
borderColor: {
type: String,
default: '#e5e5e5'
},
// 是否正方形显示,默认为 true
square: {
type: Boolean,
default: true
},
highlight: {
type: Boolean,
default: true
}
},
provide() {
return {
grid: this
}
},
data() {
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
elId,
width: 0
}
},
created() {
this.children = []
},
mounted() {
this.$nextTick(()=>{
this.init()
})
},
methods: {
init() {
setTimeout(() => {
this._getSize((width) => {
this.children.forEach((item, index) => {
item.width = width
})
})
}, 50)
},
change(e) {
this.$emit('change', e)
},
_getSize(fn) {
// #ifndef APP-NVUE
uni.createSelectorQuery()
.in(this)
.select(`#${this.elId}`)
.boundingClientRect()
.exec(ret => {
this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
fn(this.width)
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
fn(this.width)
})
// #endif
}
}
}
</script>
<style lang="scss" scoped>
.uni-grid-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
/* #ifdef H5 */
width: 100%;
/* #endif */
}
.uni-grid {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// flex: 1;
flex-direction: row;
flex-wrap: wrap;
}
.uni-grid--border {
position: relative;
/* #ifdef APP-NVUE */
border-left-color: $uni-border-color;
border-left-style: solid;
border-left-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
z-index: 1;
border-left: 1px $uni-border-color solid;
/* #endif */
}
</style>

View File

@@ -0,0 +1,82 @@
{
"id": "uni-grid",
"displayName": "Grid 宫格",
"version": "1.2.3",
"description": "Grid 宫格组件,提供移动端常见的宫格布局,如九宫格。",
"keywords": [
"grid",
"uni-ui",
"九宫格",
"表格"
],
"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": [],
"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"
}
}
}
}
}

Some files were not shown because too many files have changed in this diff Show More