Merge pull request 'xbx' (#23) from xbx into master
Reviewed-on: http://git.luyuan.tk/luyuan/deming/pulls/23
This commit is contained in:
commit
3f63d8ade9
10
common/api/shop.js
Normal file
10
common/api/shop.js
Normal file
@ -0,0 +1,10 @@
|
||||
export default {
|
||||
init(vm){
|
||||
return {
|
||||
postlogn({id,name}){
|
||||
return vm.$u.get('url',{id,name});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
10
common/api/user.js
Normal file
10
common/api/user.js
Normal file
@ -0,0 +1,10 @@
|
||||
export default {
|
||||
init(vm){
|
||||
return {
|
||||
getlogn({id,name}){
|
||||
return vm.$u.get('popArticles');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
16
common/http.api.js
Normal file
16
common/http.api.js
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
|
||||
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
|
||||
import shop from "./api/shop"
|
||||
import user from "./api/user"
|
||||
|
||||
const install = (Vue, vm) => {
|
||||
let userapi = user.init(vm)
|
||||
let shopapi = shop.init(vm)
|
||||
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
|
||||
vm.$u.api = {...userapi,...shopapi};
|
||||
}
|
||||
|
||||
export default {
|
||||
install
|
||||
}
|
||||
62
common/http.interceptor.js
Normal file
62
common/http.interceptor.js
Normal file
@ -0,0 +1,62 @@
|
||||
const install = (Vue, vm) => {
|
||||
// 此为自定义配置参数，具体参数见上方说明
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
baseUrl: 'https://luyuan.tk/api',
|
||||
loadingText: '努力加载中~',
|
||||
loadingTime: 800
|
||||
// ......
|
||||
});
|
||||
|
||||
// 请求拦截，配置Token等参数
|
||||
Vue.prototype.$u.http.interceptor.request = (config) => {
|
||||
// 引用token
|
||||
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
|
||||
// 见：https://uviewui.com/components/globalVariable.html
|
||||
// config.header.token = vm.token;
|
||||
|
||||
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
|
||||
// config.header.token = vm.$store.state.token;
|
||||
|
||||
// 方式三，如果token放在了globalData，通过getApp().globalData获取
|
||||
// config.header.token = getApp().globalData.username;
|
||||
|
||||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
|
||||
// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
||||
// const token = uni.getStorageSync('token');
|
||||
// config.header.token = token;
|
||||
// config.header.Token = 'xxxxxx';
|
||||
|
||||
// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
|
||||
// if(config.url == '/user/login') config.header.noToken = true;
|
||||
// 最后需要将config进行return
|
||||
return config;
|
||||
// 如果return一个false值，则会取消本次请求
|
||||
// if(config.url == '/user/rest') return false; // 取消某次请求
|
||||
}
|
||||
|
||||
// // 响应拦截，判断状态码是否通过
|
||||
// Vue.prototype.$u.http.interceptor.response = (res) => {
|
||||
// if(res.code == 200) {
|
||||
// // res为服务端返回值，可能有code，result等字段
|
||||
// // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
|
||||
// // 如果配置了originalData为true，请留意这里的返回值
|
||||
// return res.result;
|
||||
// } else if(res.code == 201) {
|
||||
// // 假设201为token失效，这里跳转登录
|
||||
// vm.$u.toast('验证失败，请重新登录');
|
||||
// setTimeout(() => {
|
||||
// // 此为uView的方法，详见路由相关文档
|
||||
// vm.$u.route('/pages/user/login')
|
||||
// }, 1500)
|
||||
// return false;
|
||||
// } else {
|
||||
// // 如果返回false，则会调用Promise的reject回调，
|
||||
// // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
export default {
|
||||
install
|
||||
}
|
||||
66
components/shop/group/index.vue
Normal file
66
components/shop/group/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view class="group">
|
||||
<view class="top">
|
||||
<text>全部拼团</text>
|
||||
<text>查看更多></text>
|
||||
</view>
|
||||
<view class="label">
|
||||
<text>sda</text>
|
||||
<text>asda</text>
|
||||
<text>dsad</text>
|
||||
<text>asdas</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import sitem from "./item"
|
||||
export default {
|
||||
name:"group",
|
||||
components:{
|
||||
sitem
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.group{
|
||||
.top{
|
||||
height: 90rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>text:first-child{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
>text{
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 21rpx;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
components/shop/group/item.vue
Normal file
47
components/shop/group/item.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<image class="head"></image>
|
||||
<text class="title">商品名</text>
|
||||
<view class="price">
|
||||
<text>￥99</text>
|
||||
<text>立即购买</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"item"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item{
|
||||
width: 210rpx;
|
||||
.head{
|
||||
width: 210rpx;
|
||||
height: 131rpx;
|
||||
border-radius: 6rpx;
|
||||
|
||||
}
|
||||
.title{
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 19rpx;
|
||||
>text:first-child{
|
||||
font-size: 26rpx;
|
||||
color: #FF3131;
|
||||
}
|
||||
>text:last-child{
|
||||
color: #FDD360;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
54
components/shop/list/index.vue
Normal file
54
components/shop/list/index.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="list">
|
||||
<view class="top">
|
||||
商品推荐
|
||||
</view>
|
||||
<view class="label">
|
||||
<text>asd</text>
|
||||
<text>sda</text>
|
||||
<text>w3eq</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
<item></item>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import item from "./item"
|
||||
export default {
|
||||
name:"list",
|
||||
components:{
|
||||
item
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.list{
|
||||
.top{
|
||||
font-size: 30rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
.label{
|
||||
display: flex;
|
||||
color: #999;
|
||||
|
||||
>text{
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
components/shop/list/item.vue
Normal file
49
components/shop/list/item.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<image class="img"></image>
|
||||
<view class="info">
|
||||
<text class="title"></text>
|
||||
<text class="jianjie"></text>
|
||||
<text class="price"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"item"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item{
|
||||
|
||||
width: 330rpx;
|
||||
height: 469rpx;
|
||||
margin-bottom: 27rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 272rpx;
|
||||
|
||||
}
|
||||
.info{
|
||||
padding: 0 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.jianjie{
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.price{
|
||||
color: #FF3131;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
components/shop/recommend/index.vue
Normal file
101
components/shop/recommend/index.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="recommend">
|
||||
<view class="top">
|
||||
<text>今日秒杀推荐</text>
|
||||
<text>点击查看更多></text>
|
||||
</view>
|
||||
<view class="connect">
|
||||
<view class="time">
|
||||
<image></image>
|
||||
<text>12:00</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>修身套头上衣</text>
|
||||
<text class="u-line-2">珂莱蒂尔雪纺衫2020春装新简约百搭V领蕾丝九分... </text>
|
||||
<view>
|
||||
<text>￥99</text>
|
||||
<text>￥299</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"recommend"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recommend{
|
||||
.top{
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>text:first-child{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.connect{
|
||||
display: flex;
|
||||
.time{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 18rpx;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
>text{
|
||||
font-size: 36rpx;
|
||||
margin-top: 25rpx;
|
||||
color: #FDD360;
|
||||
}
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
>text:nth-child(1){
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
>text:nth-child(2){
|
||||
margin-top: 17rpx;
|
||||
line-height: 36rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
>view{
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
>text:first-child{
|
||||
font-size: 27rpx;
|
||||
color: #FF3131;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: 33rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img{
|
||||
width: 213rpx;
|
||||
height: 160rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 13rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
components/shop/seckill/index.vue
Normal file
71
components/shop/seckill/index.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="seckill">
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<view class="name">全部秒杀</view>
|
||||
<view class="time">
|
||||
<text class="num">12</text>
|
||||
<text class="mah">:</text>
|
||||
<text class="num">12</text>
|
||||
<text class="mah">:</text>
|
||||
<text class="num">12</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="next">
|
||||
查看更多>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import sitem from "./item"
|
||||
export default {
|
||||
name:"seckill",
|
||||
components:{
|
||||
sitem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.seckill{
|
||||
.top{
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.time{
|
||||
margin-left: 39rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
.num{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
background-color: #bfbfbf;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.next{
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
components/shop/seckill/item.vue
Normal file
63
components/shop/seckill/item.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<image class="head"></image>
|
||||
<text class="title">商品名</text>
|
||||
<view class="price">
|
||||
<text>￥99</text>
|
||||
<text>￥299</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>剩余21件</text>
|
||||
<text>立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"item"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item{
|
||||
width: 210rpx;
|
||||
.head{
|
||||
width: 210rpx;
|
||||
height: 131rpx;
|
||||
border-radius: 6rpx;
|
||||
|
||||
}
|
||||
.title{
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 19rpx;
|
||||
>text:first-child{
|
||||
font-size: 26rpx;
|
||||
color: #FF3131;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
margin-top: 19rpx;
|
||||
>text:first-child{
|
||||
color: #666;
|
||||
}
|
||||
>text:last-child{
|
||||
color: #FDD360;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
components/shop/shop-item/index.vue
Normal file
29
components/shop/shop-item/index.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="shop-item">
|
||||
<image></image>
|
||||
<text>名字哦</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"shopItem"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.shop-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
>image{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
>text{
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
components/shop/youhq/index.vue
Normal file
72
components/shop/youhq/index.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="youhq">
|
||||
<view class="top">
|
||||
<text>全部优惠券</text>
|
||||
<text>查看更多></text>
|
||||
</view>
|
||||
<view class="label">
|
||||
<text>sda</text>
|
||||
<text>asda</text>
|
||||
<text>dsad</text>
|
||||
<text>asdas</text>
|
||||
</view>
|
||||
<scroll-view style="width:100%;margin-top: 21rpx;" scroll-x="true">
|
||||
<view class="list">
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
<sitem></sitem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import sitem from "./item"
|
||||
export default {
|
||||
name:"youhq",
|
||||
components:{
|
||||
sitem
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.youhq{
|
||||
.top{
|
||||
height: 90rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>text:first-child{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
>text{
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
components/shop/youhq/item.vue
Normal file
83
components/shop/youhq/item.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="top">
|
||||
<view class="pic">
|
||||
<text>￥</text>
|
||||
<text>12</text>
|
||||
</view>
|
||||
<view class="man">
|
||||
<text></text>
|
||||
<text></text>
|
||||
</view>
|
||||
<text class="button">
|
||||
立即<br />领取
|
||||
</text>
|
||||
</view>
|
||||
<view class="time">
|
||||
使用时间：2020.01.24-2020.05.08
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"item"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item{
|
||||
padding: 10rpx;
|
||||
|
||||
width: 254rpx;
|
||||
height: 94rpx;
|
||||
border: 2rpx solid #FDD360;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
.top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.pic{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color:#FDD360;
|
||||
>text:first-child{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
.man{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #FDD360;
|
||||
>text:first-child{
|
||||
font-size: 14rpx;
|
||||
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.button{
|
||||
width: 61rpx;
|
||||
height: 61rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 18rpx;
|
||||
background-color: #FDD360;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: 12rpx;
|
||||
color: #FDD360;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
main.js
7
main.js
@ -8,4 +8,11 @@ App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
|
||||
import httpInterceptor from '@/common/http.interceptor.js'
|
||||
Vue.use(httpInterceptor, app)
|
||||
|
||||
// http接口API集中管理引入部分
|
||||
import httpApi from '@/common/http.api.js'
|
||||
Vue.use(httpApi, app)
|
||||
app.$mount()
|
||||
|
||||
30
pageB/components/sdetails/navs.vue
Normal file
30
pageB/components/sdetails/navs.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="nav">
|
||||
<text>dsadasdas</text>
|
||||
<image></image>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"navs"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nav{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
// margin-bottom: 2rpx;
|
||||
border-bottom: 2rpx solid #ececec;
|
||||
color:#333;
|
||||
background-color: #fff;
|
||||
>image{
|
||||
width: 13rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
pageB/components/sdetails/tloos.vue
Normal file
55
pageB/components/sdetails/tloos.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="tloos">
|
||||
<view class="navs">
|
||||
<image></image>
|
||||
123
|
||||
</view>
|
||||
<view class="navs" style="margin-right:30rpx">
|
||||
<image></image>
|
||||
123
|
||||
</view>
|
||||
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
|
||||
<view class="button" style="background:rgba(253,211,96,1);">加入购物车</view>
|
||||
<view class="button" style="background:rgba(255,120,15,1);">立即购买</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"tloos"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tloos{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
height: 98rpx;
|
||||
width: 100%;
|
||||
bottom:0;
|
||||
border-top: 1rpx solid #ececec;
|
||||
.navs{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
margin-left: 30rpx;
|
||||
>image{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.button{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 98rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
pageB/components/sdetails/youhuiitem.vue
Normal file
53
pageB/components/sdetails/youhuiitem.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<view class="youhuiitem">
|
||||
<view class="left">
|
||||
<view>
|
||||
<text>￥41</text>
|
||||
<text>店铺优惠券</text>
|
||||
</view>
|
||||
<text>新用户可用</text>
|
||||
<text>有效期2018.09.06-2018.10.06</text>
|
||||
</view>
|
||||
<view class="right">立即领取</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"youhuiitem"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.youhuiitem{
|
||||
width: 689rpx;
|
||||
height: 173rpx;
|
||||
padding: 0 60rpx 0 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
>text{
|
||||
margin-top: 17rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
>view{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #fff;
|
||||
>text:first-child{
|
||||
font-size: 50rpx;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
27
pageB/components/sdetails/youhuiquan.vue
Normal file
27
pageB/components/sdetails/youhuiquan.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<view class="youhuiquan">
|
||||
<view class="top">
|
||||
优惠券详情
|
||||
</view>
|
||||
<view class="title">
|
||||
领取优惠券
|
||||
</view>
|
||||
<scroll-view class="gundong" :scroll-y="true">
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"youhuiquan"
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.youhuiquan{
|
||||
.gundong{
|
||||
width: 100%;
|
||||
height: 447rpx;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
pageB/sdetails/index.vue
Normal file
113
pageB/sdetails/index.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="sdetails">
|
||||
<u-swiper :list="list" height="500" border-radius="0"></u-swiper>
|
||||
<view class="info">
|
||||
<view class="title">
|
||||
<text>萨的环境</text>
|
||||
|
||||
套装新款小个子春季时尚韩版短袖衬衫套装
|
||||
新款小个子春季时尚韩版...
|
||||
|
||||
</view>
|
||||
<view class="pic">
|
||||
<text>￥24</text>
|
||||
<s>￥12</s>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<navs></navs>
|
||||
<navs></navs>
|
||||
<navs></navs>
|
||||
<view class="xiangqing">
|
||||
<view class="heng"></view>
|
||||
<view class="title">商品详情</view>
|
||||
<view class="heng"></view>
|
||||
</view>
|
||||
<tloos></tloos>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import navs from "../components/sdetails/navs"
|
||||
import tloos from "../components/sdetails/tloos"
|
||||
export default {
|
||||
name:"sdetails",
|
||||
components:{
|
||||
navs,
|
||||
tloos
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
image: '/static/uView/swiper/swiper1.jpg',
|
||||
title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
|
||||
},
|
||||
{
|
||||
image: '/static/uView/swiper/swiper2.jpg',
|
||||
title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
|
||||
},
|
||||
{
|
||||
image: '/static/uView/swiper/swiper3.jpg',
|
||||
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sdetails{
|
||||
/deep/image{
|
||||
background-color: #0f0;
|
||||
}
|
||||
.info{
|
||||
padding: 30rpx;
|
||||
.title{
|
||||
flex-wrap: wrap;
|
||||
>text{
|
||||
padding: 13rpx;
|
||||
font-size: 24rpx;
|
||||
color:#fff;
|
||||
margin-right: 13rpx;
|
||||
background-color: #FF780F;
|
||||
display: inline-block;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
}
|
||||
.pic{
|
||||
>text{
|
||||
font-size: 32rpx;
|
||||
color: #FF3131;
|
||||
}
|
||||
>s{
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hr{
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.xiangqing{
|
||||
display: flex;
|
||||
height: 85rpx;
|
||||
background-color: #ececec;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.heng{
|
||||
width: 79rpx;
|
||||
height: 2rpx;
|
||||
background-color: #a9a9a9;
|
||||
|
||||
}
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
.title{
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
pages.json
11
pages.json
@ -83,6 +83,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sdetails/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"app-plus":{
|
||||
"titleNView":{
|
||||
"backgroundColor":"#ffffff"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "search/index",
|
||||
"style": {
|
||||
|
||||
@ -196,6 +196,14 @@ export default {
|
||||
this.num = a
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
this.$u.api.getlogn({
|
||||
id:1,
|
||||
name:2
|
||||
}).then((res)=>{
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
163
pages/shop/index.vue
Normal file
163
pages/shop/index.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="shop">
|
||||
<view class="top">
|
||||
<image class="local"></image>
|
||||
<view class="add">
|
||||
<text></text>
|
||||
<image></image>
|
||||
</view>
|
||||
<u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999"></u-search>
|
||||
<image class="mnue"></image>
|
||||
</view>
|
||||
<u-swiper :list="list"></u-swiper>
|
||||
<view class="chengnuo">
|
||||
<view>
|
||||
<image></image>
|
||||
<text>免费洗衣</text>
|
||||
</view>
|
||||
<view>
|
||||
<image></image>
|
||||
<text>全国包邮</text>
|
||||
</view>
|
||||
<view>
|
||||
<image></image>
|
||||
<text>延误必赔</text>
|
||||
</view>
|
||||
<view>
|
||||
<image></image>
|
||||
<text>上门取件</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fenlei">
|
||||
<shopitem v-for="item in 5" class="item"></shopitem>
|
||||
</view>
|
||||
<view class="fenlei">
|
||||
<shopitem v-for="item in 5" class="item"></shopitem>
|
||||
</view>
|
||||
<view class="hr" style="margin-top:80rpx"></view>
|
||||
<recommend></recommend>
|
||||
<view class="hr" style="margin-top:40rpx"></view>
|
||||
<seckill></seckill>
|
||||
<view class="hr" style="margin-top:40rpx"></view>
|
||||
<recommend></recommend>
|
||||
<view class="hr" style="margin-top:40rpx"></view>
|
||||
<group></group>
|
||||
<image class="lingquan"></image>
|
||||
<youhq></youhq>
|
||||
<view class="hr" style="margin-top:40rpx"></view>
|
||||
<list></list>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import shopitem from "@/components/shop/shop-item/index"
|
||||
import recommend from "@/components/shop/recommend/index"
|
||||
import seckill from "@/components/shop/seckill/index"
|
||||
import group from "@/components/shop/group/index"
|
||||
import youhq from "@/components/shop/youhq/index"
|
||||
import list from "../../components/shop/list/index"
|
||||
|
||||
export default {
|
||||
name:"shop",
|
||||
components:{
|
||||
shopitem,
|
||||
recommend,
|
||||
seckill,
|
||||
group,
|
||||
youhq,
|
||||
list
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
keyword:"",
|
||||
list:[{
|
||||
image: '/static/uView/swiper/swiper1.jpg',
|
||||
title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
|
||||
},
|
||||
{
|
||||
image: '/static/uView/swiper/swiper2.jpg',
|
||||
title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
|
||||
},
|
||||
{
|
||||
image: '/static/uView/swiper/swiper3.jpg',
|
||||
title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/image{
|
||||
background-color: #0f0;
|
||||
}
|
||||
.shop{
|
||||
padding: 0 33rpx;
|
||||
.top{
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.local{
|
||||
width: 31rpx;
|
||||
height: 37rpx;
|
||||
}
|
||||
}
|
||||
.add{
|
||||
width: 115rpx;
|
||||
height: 25rpx;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 14rpx;
|
||||
margin-right: 37rpx;
|
||||
>image{
|
||||
width: 24rpx;
|
||||
height: 15rpx;
|
||||
}
|
||||
}
|
||||
.mnue{
|
||||
width: 35rpx;
|
||||
height: 26rpx;
|
||||
margin-left: 36rpx;
|
||||
}
|
||||
.chengnuo{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 24rpx;
|
||||
>view{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>image{
|
||||
width: 23rpx;
|
||||
height: 23rpx;
|
||||
}
|
||||
>text{
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fenlei{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.hr{
|
||||
width: 750rpx;
|
||||
margin-left: -33rpx;
|
||||
height: 20rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.lingquan{
|
||||
width: 750rpx;
|
||||
height: 177rpx;
|
||||
margin-left: -33rpx;
|
||||
margin-top: 29rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
static/js/http.js
Normal file
1
static/js/http.js
Normal file
@ -0,0 +1 @@
|
||||
let baseurl = "";
|
||||
Loading…
Reference in New Issue
Block a user