对接口之前
This commit is contained in:
asd
@@ -34,7 +34,9 @@
|
||||
"@dcloudio/uni-mp-weixin": "^2.0.0-24220191115011",
|
||||
"@dcloudio/uni-stat": "^2.0.0-24220191115011",
|
||||
"flyio": "^0.6.2",
|
||||
"node-sass": "^4.13.0",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue": "^2.6.10",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
|
||||
47
src/components/addr/addr-add.vue
Normal file
47
src/components/addr/addr-add.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="addrAdd">
|
||||
<text class="username">{{desc}}</text>
|
||||
<input @input="input" :value=value type="text" class="shuru" placeholder="请输入">
|
||||
<!-- <input type="text" class="shuru" placeholder="请输入" v-ref:mycom> -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'addrAdd',
|
||||
props:{
|
||||
desc:{
|
||||
type:String
|
||||
},
|
||||
value:{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
input(a){
|
||||
this.$emit("input",a.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
// desc : 输入框前面提示的要输入内容
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.addrAdd{
|
||||
height: 91upx;
|
||||
border-top:1upx solid #D9D9D9;
|
||||
border-bottom: 1upx solid #D9D9D9;
|
||||
display: flex;
|
||||
.username{
|
||||
color: #222222;
|
||||
font-size: 22upx;
|
||||
line-height: 91upx;
|
||||
text-indent: 31upx;
|
||||
}
|
||||
.shuru{
|
||||
margin: auto 0;
|
||||
margin-left: 50upx;
|
||||
font-size: 22upx;
|
||||
width: 74%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
201
src/components/assess/assess-list.vue
Normal file
201
src/components/assess/assess-list.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<view class="assessList">
|
||||
<view class="userinfo">
|
||||
<view class="user">
|
||||
<img :src="userpic" alt class="photo" />
|
||||
<view class="info">
|
||||
<text class="username">{{username}}</text>
|
||||
<!-- <text class="proname">{{proname}}</text> -->
|
||||
<view class="stars">
|
||||
<view v-for="item in stararr " :key="item">
|
||||
<img src="../../static/img/star.png" alt class="star" />
|
||||
</view>
|
||||
<text class="pingfen">{{pingfen}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="date">{{date}}</view>
|
||||
</view>
|
||||
<view class="detail">
|
||||
<text class="assessdetail">
|
||||
{{detail}}
|
||||
</text>
|
||||
<!-- <view class="deal">全文</view> -->
|
||||
</view>
|
||||
<view class="pictures">
|
||||
<view v-for="(i,j) in pinglunpic" :key="j">
|
||||
<img :src="i.imgpaththumb " alt class="shoppic" />
|
||||
<!-- ikjoiphbio -->
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="buyinfo">
|
||||
<view>{{shop}}</view>
|
||||
<view>购买时间：{{buydate}}</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "assessLIst",
|
||||
data(){
|
||||
return {
|
||||
stararr:[1,2]
|
||||
}
|
||||
},
|
||||
props:{
|
||||
userpic:{
|
||||
type:String
|
||||
},
|
||||
username:{
|
||||
type:String
|
||||
},
|
||||
proname:{
|
||||
type:String
|
||||
},
|
||||
photo:{
|
||||
type:String
|
||||
},
|
||||
detail:{
|
||||
type:String
|
||||
},
|
||||
shop:{
|
||||
type:String
|
||||
},
|
||||
date:{
|
||||
type:String
|
||||
},
|
||||
stars:{
|
||||
type:Number
|
||||
},
|
||||
shoppic:{
|
||||
type:String
|
||||
},
|
||||
pingfen:{
|
||||
type:Number
|
||||
},
|
||||
buydate:{
|
||||
type:String
|
||||
},
|
||||
pinglunpic:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
// username: 评论的用户名 proname 商品名 photo 用户头像 detail 评论内容 date 发表评论的日期 stars 评论几个星星 shoppic 商品图片
|
||||
mounted(){
|
||||
var stararr=[];
|
||||
for(var i=0;i<this.stars;i++){
|
||||
stararr.push(i)
|
||||
}
|
||||
console.log(this.stararr)
|
||||
this.stararr=stararr
|
||||
console.log(this.stararr)
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.assessList {
|
||||
.userinfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.user {
|
||||
display: flex;
|
||||
margin-top: 30upx;
|
||||
.photo {
|
||||
width: 49upx;
|
||||
height: 49upx;
|
||||
margin-left: 29upx;
|
||||
margin-right: 18upx;
|
||||
}
|
||||
.info{
|
||||
margin-top: -7upx;
|
||||
.username {
|
||||
color: #333333;
|
||||
font-size: 30upx;
|
||||
padding-right:10upx;
|
||||
}
|
||||
.proname {
|
||||
color: #9b9b9b;
|
||||
font-size: 23upx;
|
||||
}
|
||||
.stars {
|
||||
display: flex;
|
||||
height:6upx;
|
||||
position: relative;
|
||||
top: -15upx;
|
||||
.star {
|
||||
width: 16upx;
|
||||
height: 16upx;
|
||||
margin-right: 9upx;
|
||||
}
|
||||
.pingfen{
|
||||
color: #DF3347;
|
||||
font-size: 22upx;
|
||||
line-height:55upx;
|
||||
margin-left: 16upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.date {
|
||||
color: #9b9b9b;
|
||||
font-size: 24upx;
|
||||
margin-right: 34upx;
|
||||
line-height: 100upx;
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
width: 631upx;
|
||||
margin: 0 auto;
|
||||
margin-top:25upx;
|
||||
padding-left: 40upx;
|
||||
.assessdetail {
|
||||
width: 631upx;
|
||||
height: 123upx;
|
||||
color: #686868;
|
||||
font-size: 26upx;
|
||||
}
|
||||
.deal {
|
||||
color: #4372a9;
|
||||
font-size: 23upx;
|
||||
}
|
||||
}
|
||||
.pictures {
|
||||
width: 596upx;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
margin-top:30upx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.shoppic {
|
||||
width: 139upx;
|
||||
height: 135upx;
|
||||
margin-right: 12upx;
|
||||
}
|
||||
}
|
||||
.buyinfo{
|
||||
width: 624upx;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22upx;
|
||||
color: #999999;
|
||||
margin: 0 auto;
|
||||
margin-top:24upx;
|
||||
}
|
||||
.line{
|
||||
width:679upx;
|
||||
height: 2upx;
|
||||
background-color: #DCDCDC;
|
||||
margin: 0 auto;
|
||||
margin-top:26upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/components/assess/assess-top.vue
Normal file
51
src/components/assess/assess-top.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view class="choosesizeTop">
|
||||
<view :class="select[0]" @click="choose" data-type="1">全部99+</view>
|
||||
<view :class="select[1]" @click="choose" data-type="2">晒图43</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"assessTop",
|
||||
data(){
|
||||
return {
|
||||
select:['select','selected'],
|
||||
leixing:2
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
choose(e){
|
||||
this.leixing=e.currentTarget.dataset.type
|
||||
if(this.leixing==1){
|
||||
this.select=['selected','select']
|
||||
}else{
|
||||
this.select=['select','selected']
|
||||
}
|
||||
this.$emit('changes',this.leixing);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeTop{
|
||||
height: 78upx;
|
||||
background-color: white;
|
||||
border-bottom: 2upx solid #EEEEEE;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 26upx;
|
||||
text-align: center;
|
||||
line-height: 78upx;
|
||||
.select{
|
||||
width: 116upx;
|
||||
color:#999999;
|
||||
}
|
||||
.selected{
|
||||
width: 116upx;
|
||||
color:#DD233A;
|
||||
border-bottom: 2upx solid #DD233A;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
661
src/components/ceshi/ceshi.vue
Normal file
661
src/components/ceshi/ceshi.vue
Normal file
@@ -0,0 +1,661 @@
|
||||
<template>
|
||||
<view class="i-index i-class">
|
||||
<view>
|
||||
<view class="serch">
|
||||
<searchShuru content="汽车品牌关键字"></searchShuru>
|
||||
</view>
|
||||
|
||||
<xzcxlistTitle title="热门品牌"></xzcxlistTitle>
|
||||
<xzcxlistIconList :iconlist="list.list_hot" @xuanzhong="xuanzhong"></xzcxlistIconList>
|
||||
</view>
|
||||
<slot>
|
||||
<view v-for="(i,j) in list.list_barand" :key="j">
|
||||
<view class="index-title">{{i.szm}}</view>
|
||||
<view
|
||||
class="c"
|
||||
v-for="(item,index) in i.brand_list"
|
||||
:key="index"
|
||||
@click="open('right',item.brand_name,item.brand_logo,item.brand_id)"
|
||||
>
|
||||
<xzcxlistCars :carpic="item.brand_logo" :carname="item.brand_name" class="car"></xzcxlistCars>
|
||||
<!-- <span class="i-index-line"></span> -->
|
||||
<!-- <xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="index-title">B</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">C</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">D</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">E</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">F</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">G</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">H</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">I</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">J</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">K</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">L</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">M</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">N</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">O</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">P</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">Q</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">R</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">S</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">T</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">U</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">V</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">W</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">X</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">Y</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>
|
||||
<view class="index-title">Z</view>
|
||||
<view class="c">
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
<xzcxlistCars carpic="../../static/img/caricon1.png" carname="阿尔法·罗密欧zz" class="car"></xzcxlistCars>
|
||||
</view>-->
|
||||
</slot>
|
||||
|
||||
<view @touchmove.stop="a" @touchstart.stop="b" class="i-index-fixed">
|
||||
<view catchtap="handlerFixedTap" v-for="(i,j) in list.list_barand" :key="j" class="i-index-fixed-item">{{i.szm}}</view>
|
||||
<!-- <view catchtap="handlerFixedTap" class="i-index-fixed-item">B</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">C</view> -->
|
||||
<!-- <view catchtap="handlerFixedTap" class="i-index-fixed-item">B</view>
|
||||
-->
|
||||
<!-- <view catchtap="handlerFixedTap" class="i-index-fixed-item">D</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">E</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">F</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">G</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">H</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">I</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">J</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">K</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">L</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">M</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">N</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">O</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">P</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">Q</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">R</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">S</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">T</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">U</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">V</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">W</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">X</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">Y</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">Z</view> -->
|
||||
</view>
|
||||
<popup
|
||||
:open="openPopup"
|
||||
:position="position"
|
||||
:percent="percent"
|
||||
:background="background"
|
||||
@close="openPopup = false"
|
||||
>
|
||||
<view class="xzpinpai">
|
||||
<view class="top">
|
||||
<img :src="popcarimg" alt class="caricon" />
|
||||
<view class="carname">{{popcarname}}</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in chexi" :key="index">
|
||||
<view class="chexi">{{item.chexi_name}}</view>
|
||||
<view v-for="(i,j) in chexi[0].chexing" :key="j" @click="tofdj(i.chexing_id,item.chexi_id)">
|
||||
<view class="chexilist">{{i.chexing_name}}</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchShuru from "../../components/search/searchShuru";
|
||||
import xzcxlistTitle from "../../components/xzcxlist/xzcxlist-title";
|
||||
import xzcxlistIcon from "../../components/xzcxlist/xzcxlist-icon";
|
||||
import xzcxlistIconList from "../../components/xzcxlist/xzcxlist-iconlist";
|
||||
import xzcxlistCars from "../../components/xzcxlist/xzcxlist-cars";
|
||||
import popup from "../../components/xzcxlist/popup";
|
||||
import { requestP } from "../../static/js/request";
|
||||
export default {
|
||||
name: "ceshi",
|
||||
components: {
|
||||
searchShuru,
|
||||
xzcxlistTitle,
|
||||
xzcxlistIcon,
|
||||
xzcxlistIconList,
|
||||
xzcxlistCars,
|
||||
popup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dange: 0,
|
||||
height: "",
|
||||
top: "",
|
||||
dange: "",
|
||||
rect: [],
|
||||
list: [],
|
||||
openPopup: false,
|
||||
position: "",
|
||||
background: "#fff",
|
||||
openAdPopup: false,
|
||||
percent: 0,
|
||||
showText: false,
|
||||
change: false,
|
||||
loopTimer: false,
|
||||
sizeSort: "asc",
|
||||
popcarname: "",
|
||||
popcarimg: "",
|
||||
popid: 0,
|
||||
chexi: []
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
var set = setInterval(()=>{
|
||||
if(this.height != "" && this.rect.length !=0){
|
||||
clearInterval(set)
|
||||
|
||||
}
|
||||
this.huoqu();
|
||||
|
||||
},200)
|
||||
requestP({
|
||||
url: "car/get_brand_list"
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
this.list = res.data.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
tofdj(e,f){
|
||||
console.log(e,f,"kjoi")
|
||||
uni.navigateTo({
|
||||
url:"/pages/choosefdj/choosefdj?chexingid="+e+"&popname="+this.popcarname+"&popimg="+this.popcarimg+"&pinpaiid="+this.popid+"&chexingid="+e+"&chexiid="+f
|
||||
})
|
||||
},
|
||||
xuanzhong(a){
|
||||
console.log(a)
|
||||
this.open('right',a.brand_name,a.brand_logo,a.brand_id)
|
||||
},
|
||||
open: function(position, f, g, m) {
|
||||
console.log(f, g, "ppppppppllllll");
|
||||
this.popcarname = f;
|
||||
this.popcarimg = g;
|
||||
this.position = position;
|
||||
this.openPopup = true;
|
||||
this.popid = m;
|
||||
|
||||
requestP({
|
||||
url: "car/get_brand_vehicle_list",
|
||||
data: {
|
||||
brand_id: m
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, 115589);
|
||||
this.chexi = res.data.data;
|
||||
console.log(this.chexi)
|
||||
});
|
||||
},
|
||||
touchend: function() {
|
||||
clearInterval(this.loopTimer);
|
||||
},
|
||||
changeBgColor: function(e) {
|
||||
clearInterval(this.loopTimer);
|
||||
this.loopTimer = setInterval(() => {
|
||||
let r = Math.floor(Math.random() * 256);
|
||||
let g = Math.floor(Math.random() * 256);
|
||||
let b = Math.floor(Math.random() * 256);
|
||||
let color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
|
||||
this.background = color;
|
||||
}, 300);
|
||||
},
|
||||
changeSize: function() {
|
||||
clearInterval(this.loopTimer);
|
||||
this.loopTimer = setInterval(() => {
|
||||
let percents = [40, 45, 50, 55, 60, 65, 70, 75, 80];
|
||||
|
||||
if (this.percent <= 40) this.sizeSort = "asc";
|
||||
if (this.percent >= 80) this.sizeSort = "desc";
|
||||
if (this.sizeSort == "desc") percents = percents.reverse();
|
||||
|
||||
for (let i = 0; i <= percents.length; i++) {
|
||||
if (this.sizeSort == "desc") {
|
||||
if (this.percent > percents[i]) {
|
||||
this.percent = percents[i];
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (this.percent < percents[i]) {
|
||||
this.percent = percents[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
},
|
||||
reset: function() {
|
||||
this.percent = 0;
|
||||
this.background = "#fff";
|
||||
this.showText = false;
|
||||
},
|
||||
//上面的是弹出层的
|
||||
|
||||
a: function(a) {
|
||||
console.log(a);
|
||||
this.jisuan(a.touches[0].clientY - this.top);
|
||||
},
|
||||
b: function(a) {
|
||||
console.log(a);
|
||||
this.jisuan(a.touches[0].clientY - this.top);
|
||||
},
|
||||
huoqu() {
|
||||
var query = uni.createSelectorQuery().in(this);
|
||||
//选择id
|
||||
var that = this;
|
||||
query
|
||||
.select(".i-index-fixed")
|
||||
.boundingClientRect(rect => {
|
||||
console.log(rect, 1);
|
||||
if (rect == null) {
|
||||
this.$nextTick(() => {
|
||||
this.huoqu();
|
||||
});
|
||||
}
|
||||
|
||||
var dan = Math.floor(rect.height / that.list.list_barand.length);
|
||||
console.log(dan, 123);
|
||||
|
||||
(that.height = rect.height), console.log(that.height);
|
||||
(that.top = Math.floor(rect.top) - 6), (that.dange = dan);
|
||||
})
|
||||
.exec();
|
||||
query
|
||||
.selectAll(".index-title")
|
||||
.boundingClientRect(rect => {
|
||||
console.log(rect, 1);
|
||||
this.rect = rect;
|
||||
})
|
||||
.exec();
|
||||
// i-index-line
|
||||
},
|
||||
// c: function (a) {
|
||||
// console.log(a);
|
||||
// this.jisuan(a.target.offsetTop)
|
||||
// },
|
||||
jisuan: function(a) {
|
||||
var c = Math.floor(a / this.dange);
|
||||
// console.log(c)
|
||||
// console.log(Math.floor(a / this.data.dange))
|
||||
var z = "";
|
||||
// switch (c) {
|
||||
// case 1:
|
||||
// z = "A";
|
||||
// break;
|
||||
// case 2:
|
||||
// z = "B";
|
||||
// break;
|
||||
// case 3:
|
||||
// z = "C";
|
||||
// break;
|
||||
// case 4:
|
||||
// z = "D";
|
||||
// break;
|
||||
// case 5:
|
||||
// z = "E";
|
||||
// break;
|
||||
// case 6:
|
||||
// z = "F";
|
||||
// break;
|
||||
// case 7:
|
||||
// z = "G";
|
||||
// break;
|
||||
// case 8:
|
||||
// z = "H";
|
||||
// break;
|
||||
// case 9:
|
||||
// z = "I";
|
||||
// break;
|
||||
// case 10:
|
||||
// z = "J";
|
||||
// break;
|
||||
// case 11:
|
||||
// z = "K";
|
||||
// break;
|
||||
// case 12:
|
||||
// z = "L";
|
||||
// break;
|
||||
// case 13:
|
||||
// z = "M";
|
||||
// break;
|
||||
// case 14:
|
||||
// z = "N";
|
||||
// break;
|
||||
// case 15:
|
||||
// z = "O";
|
||||
// break;
|
||||
// case 16:
|
||||
// z = "P";
|
||||
// break;
|
||||
// case 17:
|
||||
// z = "Q";
|
||||
// break;
|
||||
// case 18:
|
||||
// z = "R";
|
||||
// break;
|
||||
// case 19:
|
||||
// z = "S";
|
||||
// break;
|
||||
// case 20:
|
||||
// z = "T";
|
||||
// break;
|
||||
// case 21:
|
||||
// z = "U";
|
||||
// break;
|
||||
// case 22:
|
||||
// z = "V";
|
||||
// break;
|
||||
// case 23:
|
||||
// z = "W";
|
||||
// break;
|
||||
// case 24:
|
||||
// z = "X";
|
||||
// break;
|
||||
// case 25:
|
||||
// z = "Y";
|
||||
// break;
|
||||
// case 26:
|
||||
// z = "Z";
|
||||
// break;
|
||||
// }
|
||||
z= this.list.list_barand[c].szm
|
||||
var that = this;
|
||||
console.log(that.rect)
|
||||
uni.pageScrollTo({
|
||||
duration: 0,
|
||||
scrollTop: that.rect[c].top
|
||||
});
|
||||
|
||||
console.log(z);
|
||||
if (z) {
|
||||
wx.showToast({
|
||||
title: z,
|
||||
|
||||
icon: "none",
|
||||
|
||||
duration: 2000 //持续的时间
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.serch {
|
||||
position: relative;
|
||||
top: 17upx;
|
||||
}
|
||||
.i-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.i-index-line {
|
||||
width: 80%;
|
||||
height: 2rpx;
|
||||
background-color: #f7f7f7;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.i-index-content {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.i-index-fixed {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
padding-left: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.i-index-fixed-item {
|
||||
display: block;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
text-align: center;
|
||||
color: #595959;
|
||||
font-size: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.i-index-fixed-item-current {
|
||||
background: #2d8cf0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.i-index-tooltip {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 48rpx;
|
||||
border-radius: 50%;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
line-height: 160rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.local-position-content {
|
||||
height: 160rpx;
|
||||
padding-left: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.local-position-content span {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #ff5344;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.index-title {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 26rpx;
|
||||
padding-left: 40rpx;
|
||||
color: #999;
|
||||
background: #f6f6f6;
|
||||
position: relative;
|
||||
top: 32upx;
|
||||
}
|
||||
.c {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
/* height: 140rpx; */
|
||||
font-size: 32rpx;
|
||||
/* padding-left: 40rpx; */
|
||||
position: relative;
|
||||
top: 44upx;
|
||||
}
|
||||
.c span {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
.b {
|
||||
display: block;
|
||||
}
|
||||
.router-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 750upx;
|
||||
height: 100%;
|
||||
background-color: rgba(126, 126, 126, 0.8);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.xzpinpai {
|
||||
width: 618upx;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// z-index: 9999;
|
||||
.top {
|
||||
height: 93upx;
|
||||
display: flex;
|
||||
.caricon {
|
||||
width: 92upx;
|
||||
height: 53upx;
|
||||
margin-top: 20upx;
|
||||
margin-left: 11upx;
|
||||
}
|
||||
.carname {
|
||||
color: #1d1d1d;
|
||||
font-size: 28upx;
|
||||
margin-top: 25rpx;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.chexi {
|
||||
height: 59upx;
|
||||
width: 100%;
|
||||
background-color: #f0efed;
|
||||
line-height: 59upx;
|
||||
text-indent: 30upx;
|
||||
color: #666666;
|
||||
font-size: 22upx;
|
||||
}
|
||||
.chexilist {
|
||||
height: 85upx;
|
||||
width: 100%;
|
||||
text-indent: 29upx;
|
||||
line-height: 85upx;
|
||||
color: #3C3A3C;
|
||||
font-size: 26upx;
|
||||
}
|
||||
.line {
|
||||
width: 590upx;
|
||||
height: 2upx;
|
||||
background-color: #d9d9d9;
|
||||
margin-left: 28upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
89
src/components/changecar/changecar-car.vue
Normal file
89
src/components/changecar/changecar-car.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="changecarCar">
|
||||
<view class="cardetail">
|
||||
<img src="../../static/img/caricon1.png" alt class="caricon" />
|
||||
<view class="carinfo">
|
||||
<view>阿尔法·罗密欧-Stelvio</view>
|
||||
<view class="cardesc">2019款2.9T 手自一体 510HPF1限量款</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../../static/img/selected.png" :data-k="current" class="xz1" v-if="ifxz" @click="xz">
|
||||
<img src="../../static/img/select.png" :data-k="current" class="xz" v-else @click="xz"/>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "changecarCar",
|
||||
data() {
|
||||
return {
|
||||
ifxz: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
val: {
|
||||
type: String
|
||||
},
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
ids: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
xz(){
|
||||
console.log(80)
|
||||
this.$emit('select');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.changecarCar {
|
||||
height: 105upx;
|
||||
border: 1upx solid gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cardetail {
|
||||
display: flex;
|
||||
margin: auto 0;
|
||||
.caricon {
|
||||
width: 82upx;
|
||||
height: 82upx;
|
||||
}
|
||||
.carinfo {
|
||||
width: 394upx;
|
||||
height: 59upx;
|
||||
margin-left: 33upx;
|
||||
font-size: 24upx;
|
||||
color: #222222;
|
||||
.cardesc {
|
||||
color: #999999;
|
||||
font-size: 22upx;
|
||||
margin-top: 15upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.xz{
|
||||
width:50upx;
|
||||
height: 50upx;
|
||||
margin-top: 25upx;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
.xz1{
|
||||
width:50upx;
|
||||
height: 50upx;
|
||||
margin-top: 25upx;
|
||||
margin-right: 24upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/components/chooseaddr/chooseaddr-btn.vue
Normal file
22
src/components/chooseaddr/chooseaddr-btn.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="chooseaddrBtn">
|
||||
一键获取微信地址
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'chooseaddrBtn'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.chooseaddrBtn{
|
||||
width: 690upx;
|
||||
height: 82upx;
|
||||
text-align: center;
|
||||
line-height: 82upx;
|
||||
color: white;
|
||||
font-size: 30upx;
|
||||
background-color: #DF3348;
|
||||
|
||||
}
|
||||
</style>
|
||||
42
src/components/chooseaddr/chooseaddr-btn1.vue
Normal file
42
src/components/chooseaddr/chooseaddr-btn1.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<view class="chooseaddrBtn1" @click="sub">
|
||||
<img src="../../static/img/addr-add.png" alt="" class="add" v-if="ifadd">
|
||||
<text>添加联系人信息</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "chooseaddrBtn1",
|
||||
props:{
|
||||
ifadd:{
|
||||
type:Boolean
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sub(){
|
||||
this.$emit("sub",true)
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
// 判断是否有加号图片
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chooseaddrBtn1 {
|
||||
width: 690upx;
|
||||
height: 82upx;
|
||||
text-align: center;
|
||||
line-height: 82upx;
|
||||
font-size: 30upx;
|
||||
border: 2px solid rgba(223, 51, 72, 1);
|
||||
color: #df3348;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.add{
|
||||
width: 26upx;
|
||||
height: 26upx;
|
||||
margin: auto 0;
|
||||
margin-right: 12upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/components/chooseaddr/chooseaddr-info.vue
Normal file
82
src/components/chooseaddr/chooseaddr-info.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="chooseaddr">
|
||||
<view class="userinfo">
|
||||
<view class="info">
|
||||
<view>{{name}}</view>
|
||||
<view class="info1">
|
||||
<view class="tel">{{phone}}</view>
|
||||
<view class="mr" v-if="defined">默认</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>{{address}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../../static/img/edit.png" @click.stop="modify" alt class="edit" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<img src="../../static/img/border.png" alt class="line" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "chooseaddrInfo",
|
||||
props:["name","phone","defined","address","aid"],
|
||||
methods:{
|
||||
modify(){
|
||||
console.log(this.aid)
|
||||
this.$emit("addid")
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.chooseaddr {
|
||||
height: 182upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.userinfo {
|
||||
// width: 449upx;
|
||||
height: 97upx;
|
||||
font-size: 27upx;
|
||||
padding-left: 31upx;
|
||||
.info {
|
||||
width: 500upx;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
margin-top: 44upx;
|
||||
margin-bottom: 41upx;
|
||||
.info1 {
|
||||
display: flex;
|
||||
.tel {
|
||||
margin-right: 20upx;
|
||||
margin-left:107upx;
|
||||
}
|
||||
.mr {
|
||||
width: 84upx;
|
||||
height: 41upx;
|
||||
background: rgba(239, 98, 116, 1);
|
||||
border: 2upx solid rgba(223, 51, 72, 1);
|
||||
border-radius: 21upx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 41upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit {
|
||||
width: 33upx;
|
||||
height: 34upx;
|
||||
margin-top: 47upx;
|
||||
margin-right: 25upx;
|
||||
}
|
||||
|
||||
}
|
||||
.line {
|
||||
height: 9upx;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
79
src/components/choosebaoyang/choosebaoyang-bottom.vue
Normal file
79
src/components/choosebaoyang/choosebaoyang-bottom.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class="choosebaoyangBottom">
|
||||
<view class="left">
|
||||
<img src="../../static/img/serve.png" alt class="serve" />
|
||||
<view class="desc">在线客服</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="pri">总价：<text class="money">￥{{price}}</text ></view>
|
||||
<!-- <view class="zhushi">不包含安装费</view> -->
|
||||
</view>
|
||||
<view class="btn" @click="jiesuan">添加购物车</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "choosebaoyangBottom",
|
||||
props:{
|
||||
price:{
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
jiesuan(){
|
||||
this.$emit("jiesuan",true)
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
//price 总价
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosebaoyangBottom {
|
||||
height: 121upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
width: 82upx;
|
||||
height: 63upx;
|
||||
margin: auto 0;
|
||||
margin-left: 24upx;
|
||||
.serve {
|
||||
width: 38upx;
|
||||
height: 40upx;
|
||||
margin-left: 21upx;
|
||||
}
|
||||
.desc {
|
||||
color: #666666;
|
||||
font-size: 20upx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
// width: 145upx;
|
||||
color: #666666;
|
||||
font-size: 23upx;
|
||||
margin: auto 0;
|
||||
.pri{
|
||||
.money{
|
||||
color: #DF3348;
|
||||
}
|
||||
.zhushi{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 279upx;
|
||||
height: 83upx;
|
||||
color: white;
|
||||
background-color: #DF3348;
|
||||
text-align:center;
|
||||
line-height: 83upx;
|
||||
margin: auto 0;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/components/choosebaoyang/choosebaoyang-servedetail.vue
Normal file
22
src/components/choosebaoyang/choosebaoyang-servedetail.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="choosebaoyangServedetail">
|
||||
小保养服务暂时缺货，紧急补货中...
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'choosebaoyangServedetail'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosebaoyangServedetail{
|
||||
height: 77upx;
|
||||
line-height: 77upx;
|
||||
color:#999999;
|
||||
font-size: 22upx;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
91
src/components/choosebaoyang/choosebaoyang-service.vue
Normal file
91
src/components/choosebaoyang/choosebaoyang-service.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="choosebaoyangService">
|
||||
<view class="left">
|
||||
<img src="../../static/img/selected.png" alt="" class="xz" v-if="ifxz">
|
||||
<img src="../../static/img/select.png" alt="" class="xz" v-else>
|
||||
<view class="service">
|
||||
<view class="name">{{serveName}}</view>
|
||||
<view class="desc">{{serveDesc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="pri" v-if="yh">优惠券</text>
|
||||
<text class="qian" v-else>
|
||||
<text class="icon">￥</text>
|
||||
<text class="money">{{pri}}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'choosebaoyangService',
|
||||
props:{
|
||||
yh:{
|
||||
type:Boolean,
|
||||
value:false
|
||||
},
|
||||
ifxz:{
|
||||
type:Boolean,
|
||||
value:false
|
||||
},
|
||||
pri:{
|
||||
type:Number
|
||||
},
|
||||
serveName:{
|
||||
type:String
|
||||
},
|
||||
serveDesc:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
// youhui 是否有优惠那行 ifxz: 单选框是否有选中 pri 价格 servename 服务名称 servedesc 服务详情介绍
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosebaoyangService{
|
||||
height: 110upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
margin:auto 0;
|
||||
margin-left: 30upx;
|
||||
.xz{
|
||||
width: 42upx;
|
||||
height: 42upx;
|
||||
margin: auto 0;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
.service{
|
||||
font-size: 27upx;
|
||||
color: #333333;
|
||||
.desc{
|
||||
font-size: 22upx;
|
||||
color:#999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.pri{
|
||||
color:#EC6515;
|
||||
font-size: 22upx;
|
||||
line-height: 75upx;
|
||||
margin-right: 32upx;
|
||||
}
|
||||
.qian{
|
||||
font-size: 29upx;
|
||||
color: #999999;
|
||||
line-height:75upx;
|
||||
margin-right: 34upx;
|
||||
.icon{
|
||||
font-size:21upx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
28
src/components/choosebaoyang/choosebaoyang-title.vue
Normal file
28
src/components/choosebaoyang/choosebaoyang-title.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="choosebaoyangTitle">
|
||||
{{title0}}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'choosebaoyangTitle',
|
||||
props:{
|
||||
title0:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
// title0 灰色条的字
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosebaoyangTitle{
|
||||
height: 63upx;
|
||||
background-color: #EEEEEE;
|
||||
color: #999999;
|
||||
font-size: 21upx;
|
||||
text-align: center;
|
||||
line-height: 63upx;
|
||||
}
|
||||
</style>
|
||||
82
src/components/choosebaoyang/choosebaoyang-top.vue
Normal file
82
src/components/choosebaoyang/choosebaoyang-top.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="choosebaoyangTop">
|
||||
<picker @change="bindPickerChange" :value="index" :range="carname">
|
||||
<text>{{carname[index]}}</text>
|
||||
<img src="../../static/img/arrowdown.png" alt class="arrow" />
|
||||
</picker>
|
||||
<view class="line"></view>
|
||||
<view class="right">
|
||||
<text>当前里程：</text>
|
||||
<input type="text" @change="input" class="licheng" placeholder="请输入" />
|
||||
<text>KM</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "choosebaoyangTop",
|
||||
props: {
|
||||
carlist: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
carname:[]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
carlist() {
|
||||
for (let i = 0; i < this.carlist.length; i++) {
|
||||
this.$set(this.carname,i,this.carlist[i].car_name)
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange(e) {
|
||||
console.log(e);
|
||||
this.index = e.target.value;
|
||||
this.$emit("cheming", this.carlist[e.target.value].car_id);
|
||||
},
|
||||
input(a) {
|
||||
this.$emit("input", a.detail.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosebaoyangTop {
|
||||
height: 63upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 21upx;
|
||||
color: #222222;
|
||||
line-height: 63upx;
|
||||
.line {
|
||||
width: 2upx;
|
||||
height: 42upx;
|
||||
background-color: #d9d9d9;
|
||||
margin: auto 0;
|
||||
margin-left: 61upx;
|
||||
margin-right: 76upx;
|
||||
}
|
||||
.arrow {
|
||||
width: 21upx;
|
||||
height: 12upx;
|
||||
margin-left: 40upx;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
.licheng {
|
||||
width: 79upx;
|
||||
font-size: 22upx;
|
||||
margin-top: 6upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
src/components/choosesize/choosesize-cardesc.vue
Normal file
91
src/components/choosesize/choosesize-cardesc.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="choosesizeCardesc">
|
||||
<view class="desc">
|
||||
<view class="problem">
|
||||
<view class="desc1">
|
||||
<view class="icon">问</view>
|
||||
<text class="zi">{{problem}}</text>
|
||||
</view>
|
||||
<view class="desc1 answer">
|
||||
<view class="icon icon1">答</view>
|
||||
<text class="zi">{{answer}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line"></view>
|
||||
<img :src="shoppic" alt class="shop" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'choosesizeCardesc',
|
||||
props:{
|
||||
problem:{
|
||||
type:String
|
||||
},
|
||||
answer:{
|
||||
type:String
|
||||
},
|
||||
shoppic:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
// problem 问题 answer 答案 shoppic 商品图片
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeCardesc {
|
||||
width: 706upx;
|
||||
height: 787upx;
|
||||
background-color: white;
|
||||
.desc {
|
||||
width: 659upx;
|
||||
height: 112upx;
|
||||
margin: 0 auto;
|
||||
.problem {
|
||||
padding-top: 41upx;
|
||||
.desc1 {
|
||||
height: 29upx;
|
||||
display: flex;
|
||||
line-height: 29upx;
|
||||
.icon {
|
||||
width: 29upx;
|
||||
height: 29upx;
|
||||
background-color: #c7513f;
|
||||
color: white;
|
||||
font-size: 21upx;
|
||||
text-align: center;
|
||||
}
|
||||
.zi {
|
||||
color: #5c5c5c;
|
||||
font-size: 24upx;
|
||||
margin-left: 9upx;
|
||||
}
|
||||
.icon1 {
|
||||
background-color: #4bb20c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer {
|
||||
margin-top: 24upx;
|
||||
margin-bottom: 32upx;
|
||||
}
|
||||
.line {
|
||||
width: 657upx;
|
||||
height: 1upx;
|
||||
background-color: #dadada;
|
||||
margin-bottom: 16upx;
|
||||
}
|
||||
.shop {
|
||||
width: 632upx;
|
||||
height: 562upx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 23upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
52
src/components/choosesize/choosesize-carinfo.vue
Normal file
52
src/components/choosesize/choosesize-carinfo.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="choosesizeCarinfo">
|
||||
<view class="carinfo">
|
||||
<img src="../../static/img/cariconwhite.png" alt class="icon" />
|
||||
<text class="carname">江淮安驰-小公主</text>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn">145/70R12</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "choosesizeCarinfo"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeCarinfo {
|
||||
background-color: white;
|
||||
padding-bottom: 31upx;
|
||||
.carinfo {
|
||||
padding-top: 26upx;
|
||||
padding-left: 20upx;
|
||||
.icon {
|
||||
width: 83upx;
|
||||
height: 47upx;
|
||||
margin: auto 0;
|
||||
}
|
||||
.carname {
|
||||
color: #222222;
|
||||
font-size: 26upx;
|
||||
position: relative;
|
||||
bottom: 10upx;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
margin-top:36upx;
|
||||
margin-bottom: 31upx;
|
||||
.btn {
|
||||
width: 693upx;
|
||||
height: 84upx;
|
||||
border: 2upx solid #dcdcdc;
|
||||
color: #333333;
|
||||
font-size: 21upx;
|
||||
text-align: center;
|
||||
line-height: 84upx;
|
||||
margin: 0 auto; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/components/choosesize/choosesize-chexing.vue
Normal file
29
src/components/choosesize/choosesize-chexing.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="choosesizeChexing">
|
||||
<choosesizeCarinfo></choosesizeCarinfo>
|
||||
<view class="choosesizeCardesc">
|
||||
<choosesizeCardesc problem="如何知道轮胎规格？" answer="在轮胎的胎侧都摹刻了轮胎的规格，下图中225/450" shoppic="../../static/img/choosesizecarpic.png"></choosesizeCardesc>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import choosesizeCarinfo from "../../components/choosesize/choosesize-carinfo"
|
||||
import choosesizeCardesc from "../../components/choosesize/choosesize-cardesc"
|
||||
export default {
|
||||
name:'choosesizeChexing',
|
||||
components:{
|
||||
choosesizeCarinfo,
|
||||
choosesizeCardesc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeCardesc{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 22upx;
|
||||
}
|
||||
</style>
|
||||
59
src/components/choosesize/choosesize-mid.vue
Normal file
59
src/components/choosesize/choosesize-mid.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view >
|
||||
<view class="choosesizeMid">
|
||||
<img src="../../static/img/choosesize.png" alt="" class="pic">
|
||||
<view class="desc">
|
||||
<view class="attr">
|
||||
<text>轮胎宽</text>
|
||||
<text class="line">/</text>
|
||||
</view>
|
||||
<view class="attr">
|
||||
<text>轮胎宽</text>
|
||||
<text class="line">/</text>
|
||||
</view>
|
||||
<view class="attr">
|
||||
<text>轮胎宽</text>
|
||||
<text class="line">/</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'choosesizeMid',
|
||||
props:{
|
||||
type:{
|
||||
type:Number
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeMid{
|
||||
background-color: white;
|
||||
.pic{
|
||||
width: 750upx;
|
||||
height: 225upx;
|
||||
}
|
||||
.desc{
|
||||
height: 28upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.attr{
|
||||
font-size: 30upx;
|
||||
color:#000000;
|
||||
text-align: center;
|
||||
margin-left: 60upx;
|
||||
}
|
||||
.line{
|
||||
margin-left: 72upx;
|
||||
color: #858282;
|
||||
font-size: 30upx
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
src/components/choosesize/choosesize-search.vue
Normal file
40
src/components/choosesize/choosesize-search.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view class="choosesizeSearch">
|
||||
<input type="text" class="shuru" placeholder="轮胎宽/扁平比R直径">
|
||||
<view class="btn">查找</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'choosesizeSearch'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeSearch{
|
||||
height: 117upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
padding-bottom: 59upx;
|
||||
.shuru{
|
||||
width: 524upx;
|
||||
height: 78upx;
|
||||
border: 2upx solid #E5E5E5;
|
||||
font-size: 26upx;
|
||||
margin: auto 0;
|
||||
margin-left:28upx;
|
||||
}
|
||||
.btn{
|
||||
width: 146upx;
|
||||
height: 78upx;
|
||||
background-color:#E03548;
|
||||
color: white;
|
||||
font-size: 26upx;
|
||||
text-align: center;
|
||||
line-height: 78upx;
|
||||
margin: auto 0;
|
||||
margin-left: 23upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/components/choosesize/choosesize-top.vue
Normal file
51
src/components/choosesize/choosesize-top.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view class="choosesizeTop">
|
||||
<view :class="select[0]" @click="choose" data-type="1">车型适配</view>
|
||||
<view :class="select[1]" @click="choose" data-type="2">自选规格</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"choosesizeTop",
|
||||
data(){
|
||||
return {
|
||||
select:['select','selected'],
|
||||
leixing:2
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
choose(e){
|
||||
this.leixing=e.currentTarget.dataset.type
|
||||
if(this.leixing==1){
|
||||
this.select=['selected','select']
|
||||
}else{
|
||||
this.select=['select','selected']
|
||||
}
|
||||
this.$emit('changes',this.leixing);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.choosesizeTop{
|
||||
height: 78upx;
|
||||
background-color: white;
|
||||
border-bottom: 2upx solid #EEEEEE;
|
||||
display: flex;
|
||||
|
||||
font-size: 26upx;
|
||||
text-align: center;
|
||||
line-height: 78upx;
|
||||
.select{
|
||||
width: 380upx;
|
||||
color: #666666;
|
||||
}
|
||||
.selected{
|
||||
width: 370upx;
|
||||
color:#E68645;
|
||||
border-bottom: 2upx solid #E68645
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
src/components/index/index-ad.vue
Normal file
28
src/components/index/index-ad.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="ad">
|
||||
<img :src="ad" alt="" class="adpic">
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"indexAd",
|
||||
props:{
|
||||
ad:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.ad,44455)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ad{
|
||||
height: 236upx;
|
||||
width: 100%;
|
||||
.adpic{
|
||||
width: 744upx;
|
||||
height: 234upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
src/components/index/index-addcar.vue
Normal file
44
src/components/index/index-addcar.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="addcar">
|
||||
<view class="adds">
|
||||
<view class="a">
|
||||
<img src="../../static/img/add.png" alt class="add" />
|
||||
<text class="cliadd">点击添加车辆</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "indexAddcar",
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.addcar {
|
||||
width: 720upx;
|
||||
height: 92upx;
|
||||
background: rgba(222, 53, 72, 1);
|
||||
box-shadow: 0px 0px 13upx 1upx rgba(49, 49, 49, 0.13);
|
||||
border-radius: 10px;
|
||||
.adds {
|
||||
width: 229upx;
|
||||
height: 92upx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.add {
|
||||
width: 30upx;
|
||||
height: 30upx;
|
||||
margin: auto 0;
|
||||
margin-right: 14upx;
|
||||
}
|
||||
.cliadd {
|
||||
font-size: 30upx;
|
||||
color: white;
|
||||
position: relative;
|
||||
bottom: 5upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
222
src/components/index/index-icon.vue
Normal file
222
src/components/index/index-icon.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="indexicon" v-if="choosecolor==1">
|
||||
<view>
|
||||
<view class="icon">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexicon" v-if="choosecolor==2">
|
||||
<view>
|
||||
<view class="icon1">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexicon" v-if="choosecolor==3">
|
||||
<view>
|
||||
<view class="icon2">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexicon" v-if="choosecolor==4">
|
||||
<view>
|
||||
<view class="icon3">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexicon" v-if="choosecolor==5">
|
||||
<view>
|
||||
<view class="icon4">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexicon" v-if="choosecolor==6">
|
||||
<view>
|
||||
<view class="icon5">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexicon" v-if="choosecolor==7">
|
||||
<view>
|
||||
<view class="icon6">
|
||||
<img :src="imgurl" alt class="iconpic" />
|
||||
</view>
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- choosecolor:1 蓝色, choosecolor:2黄色, choosecolor:3 绿色, choosecolor:4 蓝色1 choosecolor:5 粉色 choosecolor:6 红色 ， choosecolor:7 灰色-->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "indexIcon",
|
||||
data() {
|
||||
return {
|
||||
blue1: "icon",
|
||||
gold: "icon1",
|
||||
green: "icon2",
|
||||
blue2: "icon3",
|
||||
pink: "icon4",
|
||||
red: "icon5",
|
||||
gray: "icon6"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
imgurl: {
|
||||
type: String
|
||||
},
|
||||
desc: {
|
||||
type: String
|
||||
},
|
||||
choosecolor: {
|
||||
// type: Number
|
||||
}
|
||||
}
|
||||
};
|
||||
// imgurl 图片地址 desc 图标功能如：发动机维护 choosecolor 图标的背景色
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.indexicon {
|
||||
width: 123upx;
|
||||
height: 124upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.icon {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(88, 152, 255, 1),
|
||||
rgba(124, 213, 248, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
}
|
||||
.icon1 {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(254, 217, 132, 1),
|
||||
rgba(255, 152, 87, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
|
||||
}
|
||||
.icon2 {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(71, 196, 120, 1),
|
||||
rgba(154, 239, 227, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
|
||||
}
|
||||
.icon3 {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(112, 212, 255, 1),
|
||||
rgba(41, 155, 251, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
|
||||
}
|
||||
.icon4 {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 132, 164, 1),
|
||||
rgba(253, 38, 108, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
|
||||
}
|
||||
.icon5 {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(234, 64, 61, 1),
|
||||
rgba(251, 138, 115, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
|
||||
}
|
||||
.icon6 {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
background: linear-gradient(
|
||||
60deg,
|
||||
rgba(201, 199, 202, 1),
|
||||
rgba(139, 137, 140, 1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21upx;
|
||||
|
||||
}
|
||||
.iconpic {
|
||||
width: 49upx;
|
||||
height: 39upx;
|
||||
margin: auto;
|
||||
}
|
||||
.desc {
|
||||
// width:150upx;
|
||||
color: #818181;
|
||||
font-size: 24upx;
|
||||
text-indent: 3upx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
src/components/index/index-miaosha.vue
Normal file
111
src/components/index/index-miaosha.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-bind:class="[choose==2 ? active : '', errclass]" v-if="choose!=3">
|
||||
<view class="msphoto">
|
||||
<img src="../../static/img/miaosha.png" alt class="mspic" />
|
||||
</view>
|
||||
<view class="pri">
|
||||
<text class="price">￥0.01</text>
|
||||
<view class="btn">
|
||||
<text>立即抢</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-bind:class="ms3" v-if="choose==3">
|
||||
<view class="msphoto">
|
||||
<img src="../../static/img/miaosha.png" alt class="mspic" />
|
||||
</view>
|
||||
<view class="pri">
|
||||
<text class="price">￥{{price}}</text>
|
||||
<view class="btn">
|
||||
<text>立即抢</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- choose:1 蓝色 choose:2 红色 choose3 黑色 -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "indexMiaosha",
|
||||
data() {
|
||||
return {
|
||||
active: "miaosha1",
|
||||
errclass: "miaosha",
|
||||
ms3: "miaosha2"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
choose: {
|
||||
type: Number
|
||||
},
|
||||
price: {
|
||||
type: Number
|
||||
}
|
||||
}
|
||||
};
|
||||
// price 秒杀的价格 choose 秒杀部分的背景色
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.miaosha {
|
||||
width: 176upx;
|
||||
height: 195upx;
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
rgba(0, 74, 157, 1),
|
||||
rgba(116, 180, 251, 1)
|
||||
);
|
||||
box-shadow: 0px 8upx 13upx 0px rgba(68, 136, 212, 0.3);
|
||||
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.msphoto {
|
||||
width: 148upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.mspic {
|
||||
width: 125upx;
|
||||
height: 119upx;
|
||||
}
|
||||
}
|
||||
.pri {
|
||||
display: flex;
|
||||
margin-top: 24upx;
|
||||
.price {
|
||||
color: white;
|
||||
font-size: 19upx;
|
||||
margin-left: 9upx;
|
||||
margin-top: 11upx;
|
||||
}
|
||||
.btn {
|
||||
width: 95upx;
|
||||
height: 38upx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10upx;
|
||||
color: white;
|
||||
font-size: 20upx;
|
||||
text-align: center;
|
||||
margin-left: 11upx;
|
||||
margin-top: 5upx;
|
||||
}
|
||||
}
|
||||
.miaosha1 {
|
||||
width: 176upx;
|
||||
height: 195upx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 95, 24, 1),
|
||||
rgba(255, 28, 28, 1)
|
||||
);
|
||||
box-shadow: 0px 8px 13px 0px rgba(255, 71, 31, 0.3);
|
||||
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.miaosha2 {
|
||||
width: 176upx;
|
||||
height: 195upx;
|
||||
background: linear-gradient(135deg, rgba(87, 87, 87, 1), rgba(55, 55, 55, 1));
|
||||
box-shadow: 0px 8px 13px 0px rgba(74, 74, 74, 0.3);
|
||||
border-radius: 10upx;
|
||||
}
|
||||
</style>
|
||||
79
src/components/index/index-miaosha1.vue
Normal file
79
src/components/index/index-miaosha1.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class="indexMiaosha1" @click="goto">
|
||||
<view class="shop">
|
||||
<img :src="imgpic" alt="" class="shoppic">
|
||||
</view>
|
||||
<view class="pri">
|
||||
<text>￥{{price}}</text>
|
||||
<text class="huaxian">￥{{huaxian}}</text>
|
||||
</view>
|
||||
<view class="xiangou">仅限{{xiangou}}件</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "indexMiaosha1",
|
||||
props:{
|
||||
imgpic:{
|
||||
type:String
|
||||
},
|
||||
price:{
|
||||
|
||||
},
|
||||
huaxian:{
|
||||
|
||||
},
|
||||
xiangou:{
|
||||
|
||||
},
|
||||
msid:{
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.imgpic)
|
||||
},
|
||||
methods:{
|
||||
goto(e){
|
||||
console.log(this.msid)
|
||||
uni.navigateTo({
|
||||
url:"/pages/seckilldetail/seckilldetail?msid="+this.msid
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.indexMiaosha1 {
|
||||
.shop {
|
||||
width: 176upx;
|
||||
height: 165upx;
|
||||
background-color: #cf0f0f;
|
||||
}
|
||||
.pri{
|
||||
color: #E32E10;
|
||||
font-size: 20upx;
|
||||
text-align: center;
|
||||
margin-top: 21upx;
|
||||
.huaxian{
|
||||
color: #CCCCCC;
|
||||
font-size: 14upx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.xiangou{
|
||||
color: #CCCCCC;
|
||||
font-size: 14upx;
|
||||
text-align: center;
|
||||
margin-top: 8upx;
|
||||
margin-left: 5upx;
|
||||
}
|
||||
.shoppic{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src/components/index/index-search.vue
Normal file
55
src/components/index/index-search.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="index-search">
|
||||
<view class="box" @click="nav">
|
||||
<image class="img" src="../../static/img/search.png"></image>
|
||||
<view class="text">{{text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.index-search{
|
||||
.box{
|
||||
width: 694upx;
|
||||
height: 58upx;
|
||||
background-color: #F1B967;
|
||||
position: fixed;
|
||||
left: 28upx;
|
||||
top: 16upx;
|
||||
border-radius: 29upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
.text{
|
||||
font-size: 27upx;
|
||||
color: #fff;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
.img{
|
||||
width: 27upx;
|
||||
height: 27upx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
name:"search";
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props:["text"],
|
||||
methods:{
|
||||
nav(){
|
||||
console.log("跳转")
|
||||
uni.navigateTo({
|
||||
url:"/pages/search/search"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// text 搜索框中的字
|
||||
</script>
|
||||
38
src/components/index/index-select.vue
Normal file
38
src/components/index/index-select.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="index-select">
|
||||
<view class="bag">大保养</view>
|
||||
<view class="sm">小保养</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.index-select {
|
||||
width: 100%;
|
||||
height: 103upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #dcdcdc;
|
||||
box-shadow:0px 1upx 1upx 0px rgba(49,49,49,0.19);
|
||||
.bag {
|
||||
width: 50%;
|
||||
height: 64upx;
|
||||
text-align: center;
|
||||
line-height: 64upx;
|
||||
border-right: 1upx solid #f1f1f1;
|
||||
}
|
||||
.sm {
|
||||
width: 50%;
|
||||
height: 64upx;
|
||||
text-align: center;
|
||||
line-height: 64upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
name: "select";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: []
|
||||
};
|
||||
</script>
|
||||
100
src/components/index/index-shopdetail.vue
Normal file
100
src/components/index/index-shopdetail.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="index-shopdetail" @click="goto">
|
||||
<img :src="picurl" alt class="shoppic" />
|
||||
<view class="desc">
|
||||
<view class="shopname">
|
||||
<text class="tag" v-if="ifbk">爆款</text>
|
||||
<text>{{shopname}}</text>
|
||||
</view>
|
||||
<view class="pri">
|
||||
<view class="pri-icon">￥</view>
|
||||
<view>{{pri}}</view>
|
||||
<view class="sale">已拼{{sale}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "index-shopdetail",
|
||||
props:{
|
||||
picurl:{
|
||||
},
|
||||
ifbk:{
|
||||
|
||||
},
|
||||
shopname:{
|
||||
},
|
||||
pri:{
|
||||
},
|
||||
sale:{
|
||||
},
|
||||
ptid:{
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
goto(){
|
||||
console.log(this.ptid)
|
||||
}
|
||||
}
|
||||
};
|
||||
// 首页底部的商品详情
|
||||
// shoppic 商品图片 ifbk 是否为爆款 shopname 商品名 pri 商品价格 sale 商品售量
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.index-shopdetail {
|
||||
width: 646upx;
|
||||
height: 173upx;
|
||||
// border-bottom: 1upx solid #dcdcdc;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
.shoppic {
|
||||
width: 137upx;
|
||||
height: 132upx;
|
||||
margin-left: 6upx;
|
||||
margin-top: 12upx;
|
||||
margin-right: 36upx;
|
||||
}
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 37upx;
|
||||
margin-bottom: 34upx;
|
||||
.shopname {
|
||||
color: #333333;
|
||||
font-size: 28upx;
|
||||
|
||||
.tag {
|
||||
width: 61upx;
|
||||
height: 29upx;
|
||||
background-color: #e32e10;
|
||||
color: white;
|
||||
font-size: 24upx;
|
||||
text-align: center;
|
||||
line-height: 29upx;
|
||||
border-radius: 3upx;
|
||||
padding-left: 10upx;
|
||||
padding-right: 10upx;
|
||||
margin-right: 7upx;
|
||||
}
|
||||
}
|
||||
.pri {
|
||||
font-size: 24upx;
|
||||
color: #e32e10;
|
||||
display: flex;
|
||||
|
||||
.pri-icon {
|
||||
font-size: 18upx;
|
||||
line-height: 36upx;
|
||||
}
|
||||
.sale {
|
||||
color: #cfcfcf;
|
||||
font-size: 22upx;
|
||||
margin-left: 18upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
src/components/index/index-spike.vue
Normal file
45
src/components/index/index-spike.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<view class="index-spike">
|
||||
<view class="left">{{title}}</view>
|
||||
<view class="right" @click="more">更多</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.index-spike {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 673upx;
|
||||
align-items: center;
|
||||
.left {
|
||||
color: #252525;
|
||||
font-size: 36upx;
|
||||
}
|
||||
.right {
|
||||
font-size: 26upx;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: "spike",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ["title"],
|
||||
methods: {
|
||||
more() {
|
||||
if (this.title == "天天秒杀") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/seckill/seckill"
|
||||
});
|
||||
} else if (this.title == "拼团购") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/pintuanshop/pintuanshop"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// title 页面上每个模块的标题 如 天天秒杀
|
||||
</script>
|
||||
57
src/components/index/index-swiper.vue
Normal file
57
src/components/index/index-swiper.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view class="index-swiper">
|
||||
<swiper class="swiper" :autoplay="true" interval="2500" :circular="true">
|
||||
<swiper-item class="box" v-for="(item,index) in list" @click="nav" :key="index" :data-id="item.goods_id">
|
||||
<image :src="item.imgpath"></image>
|
||||
</swiper-item>
|
||||
<swiper-item class="box">
|
||||
<image src="../../static/img/swiper.png"></image>
|
||||
</swiper-item>
|
||||
<swiper-item class="box">
|
||||
<image src="../../static/img/swiper.png"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.index-swiper{
|
||||
width: 100%;
|
||||
height: 390upx;
|
||||
.swiper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
>image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
name: "swiper";
|
||||
export default {
|
||||
props:{
|
||||
list:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.list[0],1313)
|
||||
},
|
||||
methods:{
|
||||
nav(e){
|
||||
console.log(e)
|
||||
uni.navigateTo({
|
||||
url:"/pages/shopdetail/shopdetail?shopid="+e.currentTarget.dataset.id
|
||||
})
|
||||
},
|
||||
index(){
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
38
src/components/mine/mine-btn.vue
Normal file
38
src/components/mine/mine-btn.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="mineBtn">
|
||||
<view class="title">{{title}}</view>
|
||||
<img src=".../../static/img/arrow.png" alt="" class="arrow">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"mineBtn",
|
||||
props:{
|
||||
title:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mineBtn{
|
||||
height: 100upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 100upx;
|
||||
.arrow{
|
||||
width: 22upx;
|
||||
height: 22upx;
|
||||
margin: auto 0;
|
||||
margin-right: 50upx;
|
||||
}
|
||||
.title{
|
||||
font-size: 28upx;
|
||||
color: #666666;
|
||||
margin-left:30upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/components/mine/mine-menu.vue
Normal file
63
src/components/mine/mine-menu.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="mineMenu">
|
||||
<view class="menu1" @click="select(3)">
|
||||
<img src="../../static/img/wallet.png" alt="" class="wallet">
|
||||
<view class="title">全部</view>
|
||||
</view>
|
||||
<view class="menu1" @click="select(0)">
|
||||
<img src="../../static/img/cart.png" alt="" class="wallet">
|
||||
<view class="title">待付款</view>
|
||||
</view>
|
||||
<view class="menu1" @click="select(1)">
|
||||
<img src="../../static/img/pingjia.png" alt="" class="wallet">
|
||||
<view class="title">待收货</view>
|
||||
</view>
|
||||
<view class="menu1" @click="select(2)">
|
||||
<img src="../../static/img/shouhou.png" alt="" class="wallet">
|
||||
<view class="title title1">待评价</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"mineMenu",
|
||||
methods:{
|
||||
select(e){
|
||||
this.$emit("select",e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mineMenu{
|
||||
width: 711upx;
|
||||
height: 189upx;;
|
||||
background:rgba(255,255,255,1);
|
||||
box-shadow:0upx 5upx 12upx 1upx rgba(222,71,66,0.41);
|
||||
border-radius:20upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.menu1{
|
||||
// width: 68upx;
|
||||
margin:auto 0;
|
||||
.wallet{
|
||||
width: 38upx;
|
||||
height: 34upx;
|
||||
margin-left: 8upx;
|
||||
margin-bottom: 25upx;
|
||||
}
|
||||
.title{
|
||||
font-size: 22upx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
.title1{
|
||||
position: relative;
|
||||
right: 15upx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
87
src/components/mine/mine-top.vue
Normal file
87
src/components/mine/mine-top.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="mineTop">
|
||||
<img src="../../static/img/minebg.png" alt class="minetopbg" />
|
||||
<img :src="iflogin?tx:'../../static/img/usertx.png'" alt class="photo" />
|
||||
|
||||
<text class="username">{{username}}</text>
|
||||
<view class="login" v-if="!iflogin" @click="login">立即登录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mineTop",
|
||||
data() {
|
||||
return {
|
||||
tx: "",
|
||||
username: "",
|
||||
iflogin: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
wx.getSetting({
|
||||
success: res => {
|
||||
wx.getUserInfo({
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.tx = res.userInfo.avatarUrl;
|
||||
this.username = res.userInfo.nickName;
|
||||
this.iflogin = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: res => {
|
||||
this.tx = "../../static/img/usertx.png";
|
||||
this.username = "";
|
||||
this.iflogin = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
uni.redirectTo({
|
||||
url: "/pages/login/login"
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mineTop {
|
||||
.minetopbg {
|
||||
height: 300upx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
.photo {
|
||||
width: 130upx;
|
||||
height: 115upx;
|
||||
position: relative;
|
||||
bottom: 283upx;
|
||||
left: 31upx;
|
||||
border-radius: 80%;
|
||||
}
|
||||
.username {
|
||||
position: relative;
|
||||
bottom: 338upx;
|
||||
color: white;
|
||||
font-size: 26upx;
|
||||
margin-left: 48upx;
|
||||
}
|
||||
.login {
|
||||
width: 147upx;
|
||||
height: 47upx;
|
||||
background: url("../../static/img/minelogin.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 170rpx;
|
||||
color: white;
|
||||
font-size: 20upx;
|
||||
line-height: 47upx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
src/components/mygarage/mygarage-btn.vue
Normal file
42
src/components/mygarage/mygarage-btn.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<view class="mygarageBtn">
|
||||
<view class="btn">
|
||||
<img src="../../static/img/addnewcar.png" alt="" class="addnewcar">
|
||||
<text class="desc">新增车型</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'mygarageBtn'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.mygarageBtn{
|
||||
width:750upx;
|
||||
height: 107upx;
|
||||
background-color:white;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
.btn{
|
||||
width: 717upx;
|
||||
height: 82upx;
|
||||
margin:0 auto;
|
||||
background-color:#E03547;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.addnewcar{
|
||||
width: 47upx;
|
||||
height: 41upx;
|
||||
margin: auto 0;
|
||||
}
|
||||
.desc{
|
||||
color: white;
|
||||
font-size: 31upx;
|
||||
line-height: 85upx;
|
||||
margin-left: 16upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
src/components/mygarage/mygarage-list.vue
Normal file
118
src/components/mygarage/mygarage-list.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="mygarage">
|
||||
<view class="carinfo">
|
||||
<img :src="picurl" alt class="caricon" />
|
||||
<view class="carinfodetail">
|
||||
<view class="carname">{{carname}}</view>
|
||||
<view class="desc">{{cardesc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn" v-if="isdefault" >
|
||||
<img src="../../static/img/bingo.png" alt class="default" />
|
||||
<text class="mr">已设为默认</text>
|
||||
</view>
|
||||
<view class="del" v-else @click="mr(carid)">设为默认</view>
|
||||
<view class="del" @click="del(carid)">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "mygarageList",
|
||||
props:{
|
||||
isdefault:{
|
||||
type:Boolean
|
||||
},
|
||||
picurl:{
|
||||
type:String
|
||||
},
|
||||
carname:{
|
||||
type:String
|
||||
},
|
||||
cardesc:{
|
||||
type:String
|
||||
},
|
||||
carid:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
mr(e){
|
||||
console.log(74500000)
|
||||
this.$emit('mr',e)
|
||||
},
|
||||
del(e){
|
||||
this.$emit('del',e)
|
||||
}
|
||||
}
|
||||
};
|
||||
// isdefault: true 已设为默认 isdefault: false或不填 设为默认
|
||||
// picurl 车库页面商品图片 carname 车名 cardesc 车库页面的商品介绍
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mygarage {
|
||||
height: 295upx;
|
||||
background-color:white;
|
||||
.carinfo {
|
||||
height: 199upx;
|
||||
display: flex;
|
||||
border-bottom: 1upx solid #d9d9d9;
|
||||
.caricon {
|
||||
width: 96upx;
|
||||
height: 96upx;
|
||||
margin: auto 0;
|
||||
margin-left: 55upx;
|
||||
}
|
||||
.carinfodetail {
|
||||
// width: 276upx;
|
||||
height: 95upx;
|
||||
font-size: 26upx;
|
||||
color: #3c3a3c;
|
||||
margin-top: 51upx;
|
||||
border-left: 1upx solid #d9d9d9;
|
||||
margin-left: 56upx;
|
||||
text-indent: 32upx;
|
||||
.carname {
|
||||
margin-top: 16upx;
|
||||
}
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 22upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
height: 94upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.btn {
|
||||
width: 203upx;
|
||||
height: 54upx;
|
||||
border: 2upx solid #df3348;
|
||||
margin: auto 0;
|
||||
.default {
|
||||
width: 27upx;
|
||||
height: 25upx;
|
||||
margin-left: 18upx;
|
||||
}
|
||||
.mr {
|
||||
font-size: 25upx;
|
||||
color: #df3348;
|
||||
margin-left: 8upx;
|
||||
line-height: 54upx;
|
||||
}
|
||||
}
|
||||
.del {
|
||||
width: 203upx;
|
||||
height: 54upx;
|
||||
border: 2upx solid #df3348;
|
||||
margin: auto 0;
|
||||
font-size: 25upx;
|
||||
color: #df3348;
|
||||
text-align: center;
|
||||
line-height: 54upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/components/offer/offer-list.vue
Normal file
48
src/components/offer/offer-list.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<view class="offer-list">
|
||||
<view class="offer">
|
||||
<img :src="picurl" alt="" class="nonepic">
|
||||
<view class="desc">{{desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "offerList",
|
||||
props:{
|
||||
picurl:{
|
||||
type:String
|
||||
},
|
||||
desc:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
// 页面数据为空的时候（仅限于优惠券）
|
||||
// picurl 居中的图片 desc图片下面的字
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.offer-list {
|
||||
width: 750upx;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.offer {
|
||||
width: 479upx;
|
||||
height: 421upx;
|
||||
margin: auto;
|
||||
.nonepic{
|
||||
width: 479upx;
|
||||
height: 356upx;
|
||||
}
|
||||
.desc{
|
||||
width: 479upx;
|
||||
color:#999999;
|
||||
font-size: 26upx;
|
||||
text-align: center;
|
||||
margin-top: 38upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/components/order/order-tab.vue
Normal file
85
src/components/order/order-tab.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="orderTab">
|
||||
<view :class="select[0]" @click="xz" data-tap="3">{{tabname}}</view>
|
||||
<view :class="select[1]" @click="xz" data-tap="0">{{tabname1}}</view>
|
||||
<view :class="select[2]" @click="xz" data-tap="1">{{tabname2}}</view>
|
||||
<view :class="select[3]" @click="xz" data-tap="2">{{tabname3}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "orderTab",
|
||||
data() {
|
||||
return {
|
||||
select: ["active", "", "", ""],
|
||||
tabname:"",
|
||||
tabname2:'wwww',
|
||||
tabname1:'ppp',
|
||||
tabname3:'eeeee',
|
||||
ceshi:"actice"
|
||||
};
|
||||
},
|
||||
props:{
|
||||
tap:{
|
||||
type:Number
|
||||
},
|
||||
tabtittle:{
|
||||
type:String
|
||||
},
|
||||
ifnull:{
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.tabname=this.tabtittle.split(',')[0]
|
||||
this.tabname1=this.tabtittle.split(',')[1]
|
||||
this.tabname2=this.tabtittle.split(',')[2]
|
||||
this.tabname3=this.tabtittle.split(',')[3]
|
||||
if(this.tap==3){
|
||||
this.select = ["active", "", "", ""]
|
||||
}else if(this.tap==0){
|
||||
this.select = ["", "active", "", ""];
|
||||
}else if(this.tap==1){
|
||||
this.select = ["", "", "active", ""];
|
||||
}else if(this.tap==2){
|
||||
this.select = ["", "", "", "active"];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
xz(e) {
|
||||
if(e.currentTarget.dataset.tap==3){
|
||||
this.select = ["active", "", "", ""]
|
||||
}else if(e.currentTarget.dataset.tap==0){
|
||||
this.select = ["", "active", "", ""];
|
||||
}else if(e.currentTarget.dataset.tap==1){
|
||||
this.select = ["", "", "active", ""];
|
||||
}else if(e.currentTarget.dataset.tap==2){
|
||||
this.select = ["", "", "", "active"];
|
||||
}
|
||||
this.$emit("tabchange",e.currentTarget.dataset.tap)
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderTab {
|
||||
height: 75upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 26upx;
|
||||
color: #333333;
|
||||
border-top: 3upx solid #eeeeee;
|
||||
line-height: 75upx;
|
||||
background-color: white;
|
||||
.active {
|
||||
// width:94upx;
|
||||
text-align: center;
|
||||
color: #F57426;
|
||||
border-bottom: 1upx solid #F57426;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
183
src/components/order/orderitem.vue
Normal file
183
src/components/order/orderitem.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="orderItem" v-for="(item,index) in shops" :key="index">
|
||||
<view class="title">
|
||||
<view class="orderno">订单编号：{{item.order_no}}</view>
|
||||
<view class="state">{{item.state}}</view>
|
||||
</view>
|
||||
<view v-for="(i,j) in item.goods_list" :key="j">
|
||||
<view class="shopinfo" >
|
||||
<img :src="i.imgpaththumb" alt class="shoppic" />
|
||||
<view class="right">
|
||||
<view class="shopname">{{i.goods_name}}</view>
|
||||
<view class="pri">
|
||||
<view>共{{i.goods_num}}件</view>
|
||||
<view class="money">￥{{i.price_z}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn" v-if="item.state=='待评价'" @click="pingjia(item.id)">前去评价</view>
|
||||
<view class="btn" v-if="item.state=='待收货'" @click="shouhuo(item.id)">确定收货</view>
|
||||
<view class="btn" v-if="item.state=='待付款'">微信支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import requestP from "../../static/js/request.js";
|
||||
export default {
|
||||
name: "orderItem",
|
||||
data() {
|
||||
return {
|
||||
status: ""
|
||||
};
|
||||
},
|
||||
props: {
|
||||
orderno: {
|
||||
type: String
|
||||
},
|
||||
state: {
|
||||
type: String
|
||||
},
|
||||
shops:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
pingjia(e){
|
||||
uni.navigateTo({
|
||||
url:"/pages/comment/comment?orderid="+e
|
||||
})
|
||||
},
|
||||
shouhuo(e){
|
||||
console.log(e)
|
||||
requestP.requestP({
|
||||
url:"order/shouhuo",
|
||||
data:{
|
||||
order_id:e
|
||||
}
|
||||
}).then((res)=>{
|
||||
uni.showToast({
|
||||
title: "收货成功",
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
this.state=e.kind
|
||||
console.log(this.state)
|
||||
requestP.requestP({
|
||||
url:"order/get_order_list",
|
||||
}).then((res)=>{
|
||||
console.log(res.data.data)
|
||||
this.orderlist=res.data.data
|
||||
})
|
||||
requestP.requestP({
|
||||
url:"order/get_order_list",
|
||||
data:{
|
||||
type:0
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res.data.data)
|
||||
this.orderlist0=res.data.data
|
||||
})
|
||||
requestP.requestP({
|
||||
url:"order/get_order_list",
|
||||
data:{
|
||||
type:1
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res.data.data)
|
||||
this.orderlist1=res.data.data
|
||||
})
|
||||
requestP.requestP({
|
||||
url:"order/get_order_list",
|
||||
data:{
|
||||
type:2
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res.data.data)
|
||||
this.orderlist2=res.data.data
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderItem {
|
||||
background-color: white;
|
||||
.title {
|
||||
width: 695upx;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.orderno {
|
||||
font-size: 22upx;
|
||||
color: #999999;
|
||||
// line-height: 51upx;
|
||||
}
|
||||
.state {
|
||||
font-size: 26upx;
|
||||
color: #f57426;
|
||||
}
|
||||
}
|
||||
.shopinfo {
|
||||
width: 685upx;
|
||||
height: 169upx;
|
||||
border-top: 1upx solid #eeeeee;
|
||||
border-bottom: 1upx solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
// margin-top: upx;
|
||||
.shoppic {
|
||||
width: 149upx;
|
||||
height: 149upx;
|
||||
margin: auto 0;
|
||||
}
|
||||
.right {
|
||||
color: #999999;
|
||||
font-size: 22upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.shopname {
|
||||
width: 513upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
.pri {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10upx;
|
||||
.money {
|
||||
color: #a50b18;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
height: 78upx;
|
||||
font-size: 26upx;
|
||||
margin-top: 8upx;
|
||||
.btn {
|
||||
width: 158upx;
|
||||
height: 59upx;
|
||||
text-align: center;
|
||||
line-height: 59upx;
|
||||
color: #a50b18;
|
||||
border: 1upx solid rgba(165, 11, 24, 1);
|
||||
float: right;
|
||||
margin-right: 32upx;
|
||||
margin-top: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/components/order/pintuanorderitem.vue
Normal file
163
src/components/order/pintuanorderitem.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="pintuanorderitem">
|
||||
<view class="top">
|
||||
<img :src="shoppic" alt class="left" />
|
||||
<view class="right">
|
||||
<view class="shopname">{{shopname}}</view>
|
||||
<view class="pri">
|
||||
<view>
|
||||
<text class="num">{{num}}人团</text>
|
||||
<text class="money">￥{{money}}</text>
|
||||
</view>
|
||||
<view class="state">{{state}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn1" v-if="state=='拼团失败' && is_tuikuan == 0" @click="reboot">退款</view>
|
||||
<!-- <view class="btn" v-if="state=='已成团'">查看订单详情</view> -->
|
||||
<view class="btn" v-else @click="tiaozhuan">查看商品详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {requestP} from "../../static/js/request"
|
||||
export default {
|
||||
name: "pintuanorderitem",
|
||||
data(){
|
||||
return {
|
||||
status:""
|
||||
}
|
||||
},
|
||||
props:{
|
||||
shoppic:{
|
||||
type:String
|
||||
},
|
||||
shopname:{
|
||||
type:String
|
||||
},
|
||||
num:{
|
||||
type:Number
|
||||
},
|
||||
money:{
|
||||
type:Number
|
||||
},
|
||||
state:{
|
||||
type:String
|
||||
},
|
||||
sid:{
|
||||
|
||||
},
|
||||
is_tuikuan:{
|
||||
|
||||
},
|
||||
shopid:{
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
reboot(){
|
||||
|
||||
requestP({
|
||||
url:"pay/pay_pintuan_tuikuan",
|
||||
data:{
|
||||
pt_order_id:this.sid
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
tiaozhuan(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/pintuanshopdetail/pintuanshopdetail?shopid="+this.shopid
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanorderitem {
|
||||
height: 322upx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
.top {
|
||||
width: 712upx;
|
||||
height: 230upx;
|
||||
margin: 0 auto;
|
||||
margin-right: 30upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx solid #D7D7D7;
|
||||
.left {
|
||||
margin-left: 15upx;
|
||||
width: 170upx;
|
||||
height: 186upx;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 380rpx;
|
||||
|
||||
.shopname {
|
||||
color: #393939;
|
||||
font-size: 26upx;
|
||||
font-weight: 800;
|
||||
margin-top: 24upx;
|
||||
}
|
||||
.pri{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40upx;
|
||||
.num{
|
||||
color: #1A1A1A;
|
||||
font-size: 24upx;
|
||||
padding-right:26upx;
|
||||
}
|
||||
.money{
|
||||
color: #FF0107;
|
||||
font-size: 36upx;
|
||||
}
|
||||
.state{
|
||||
color: #FF5001;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
.btn{
|
||||
width: 180upx;
|
||||
height: 56upx;
|
||||
border: 1upx solid #D7D7D7;
|
||||
line-height: 56upx;
|
||||
text-align:center;
|
||||
color:#646464;
|
||||
font-size: 24upx;
|
||||
margin-top: 20upx;
|
||||
float:right;
|
||||
margin-right: 30upx;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.btn1{
|
||||
width: 142upx;
|
||||
height: 56upx;
|
||||
line-height:56upx;
|
||||
background-color: #FF5001;
|
||||
color: white;
|
||||
font-size: 24upx;
|
||||
text-align: center;
|
||||
float:right;
|
||||
margin-top: 20upx;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/components/orderdetail/orderdetail-zongjia.vue
Normal file
33
src/components/orderdetail/orderdetail-zongjia.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view class="orderdetailZongjia">
|
||||
<view class="pri">
|
||||
实付金额：￥{{zong}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'orderdetailZongjia',
|
||||
props:{
|
||||
zong:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderdetailZongjia{
|
||||
height: 80upx;
|
||||
background-color: white;
|
||||
margin-top:2upx;
|
||||
.pri{
|
||||
color: #FD4141;
|
||||
font-size: 30upx;
|
||||
float: right;
|
||||
margin-right: 20upx;
|
||||
line-height: 80upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
32
src/components/orderdetail/orderdetailbtn.vue
Normal file
32
src/components/orderdetail/orderdetailbtn.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<view class="orderdetailBtn">
|
||||
{{text}}
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"orderdetailBtn",
|
||||
props:{
|
||||
text:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderdetailBtn{
|
||||
width: 710upx;
|
||||
height: 80upx;
|
||||
color: #333333;
|
||||
font-size: 30upx;
|
||||
line-height: 80upx;
|
||||
text-align: center;
|
||||
border-radius: 8upx;
|
||||
border:2upx solid rgba(231, 231, 231, 1);
|
||||
background-color: #F8F8F8;
|
||||
|
||||
}
|
||||
</style>
|
||||
35
src/components/orderdetail/orderdetailinfo.vue
Normal file
35
src/components/orderdetail/orderdetailinfo.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view class="orderdetailInfo">
|
||||
<view class="key"> {{key1}}：</view>
|
||||
<view > {{val}}</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"orderdetailInfo",
|
||||
props:{
|
||||
key1:{
|
||||
type:String
|
||||
},
|
||||
val:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderdetailInfo{
|
||||
// width: 478upx;
|
||||
font-size: 26upx;
|
||||
color: #868686;
|
||||
text-indent: 20upx;
|
||||
display: flex;
|
||||
line-height: 46upx;
|
||||
.key{
|
||||
width: 160upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
src/components/orderdetail/orderdetailinfos.vue
Normal file
39
src/components/orderdetail/orderdetailinfos.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<view class="orderdetailInfos">
|
||||
<view class="infos">
|
||||
<orderdetailInfos key1="订单编号" val="415257513567170998833" class="info"></orderdetailInfos>
|
||||
<orderdetailInfos key1="下单时间" val="2018-05-08 11:49 " class="info"></orderdetailInfos>
|
||||
<orderdetailInfos key1="支付方式" val="微信" class="info"></orderdetailInfos>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderdetailInfos from "../../components/orderdetail/orderdetailinfo";
|
||||
|
||||
export default {
|
||||
name: "orderdetailInfos",
|
||||
components: {
|
||||
orderdetailInfos,
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.orderdetailInfos {
|
||||
.infos{
|
||||
height: 186upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
src/components/orderdetail/orderdetailpay.vue
Normal file
58
src/components/orderdetail/orderdetailpay.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<view class="pays">
|
||||
<view class="orderdetailPay">
|
||||
<view class="left">商品总额：</view>
|
||||
<view class="right">￥{{all}} </view>
|
||||
</view>
|
||||
<view class="orderdetailPay">
|
||||
<view class="left">优惠券：</view>
|
||||
<view class="right">-￥{{youhui}} </view>
|
||||
</view>
|
||||
<view class="orderdetailPay">
|
||||
<view class="left">运费：</view>
|
||||
<view class="right">+￥{{yunfei}} </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"orderdetailPay",
|
||||
props:{
|
||||
all:{
|
||||
type:String
|
||||
},
|
||||
youhui:{
|
||||
type:String
|
||||
},
|
||||
yunfei:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pays{
|
||||
// height: 186upx;
|
||||
background-color: white;
|
||||
padding-top: 31upx;
|
||||
padding-bottom: 31upx;
|
||||
}
|
||||
.orderdetailPay{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color:#868686;
|
||||
font-size: 26upx;
|
||||
line-height: 46upx;
|
||||
margin: auto 0;
|
||||
|
||||
.left{
|
||||
margin-left: 20upx;
|
||||
}
|
||||
.right{
|
||||
margin-right: 25upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
src/components/orderdetail/orderdetailreceive.vue
Normal file
21
src/components/orderdetail/orderdetailreceive.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<view class="shopdetailReceive">
|
||||
<orderdetailTittle tittle0="收货信息"></orderdetailTittle>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderdetailTittle from "../../components/orderdetail/orderdetailtitt"
|
||||
export default {
|
||||
name:"orderdetailReceive",
|
||||
components:{
|
||||
orderdetailTittle
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailReceive{
|
||||
|
||||
}
|
||||
</style>
|
||||
72
src/components/orderdetail/orderdetailshopinfo.vue
Normal file
72
src/components/orderdetail/orderdetailshopinfo.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="box">
|
||||
<view class="shopdetailShopinfo" v-for="(i,j) in list" :key="j">
|
||||
<img :src="i.imgpaththumb" alt class="shoppic" />
|
||||
<view class="right">
|
||||
<view class="shopname">{{i.goods_name}}</view>
|
||||
<view class="shoppri">
|
||||
<view class="price">{{i.price_z}}</view>
|
||||
<view class="num">
|
||||
<text class="num1">x</text>
|
||||
<text>{{i.goods_num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shopdetailShopinfo",
|
||||
props:['list']
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailShopinfo {
|
||||
height: 161upx;
|
||||
width: 642upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin:0 auto;
|
||||
.shoppic {
|
||||
width: 161upx;
|
||||
height: 161upx;
|
||||
}
|
||||
.right {
|
||||
margin-left: 20upx;
|
||||
.shopname {
|
||||
width: 461upx;
|
||||
font-size: 28upx;
|
||||
color: #333333;
|
||||
margin-bottom: 44upx;
|
||||
}
|
||||
.shoppri {
|
||||
width: 463upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 30upx;
|
||||
.price {
|
||||
color: #e52323;
|
||||
}
|
||||
.num {
|
||||
color: #333333;
|
||||
.num1{
|
||||
color: #868686;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
height: 208upx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
28
src/components/orderdetail/orderdetailtitt.vue
Normal file
28
src/components/orderdetail/orderdetailtitt.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="shopdetailtittle">
|
||||
{{tittle0}}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailTittle",
|
||||
props:{
|
||||
tittle0:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailtittle{
|
||||
height: 81upx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
font-size: 26upx;
|
||||
text-indent:21upx;
|
||||
color: #333333;
|
||||
line-height: 81upx;
|
||||
}
|
||||
</style>
|
||||
54
src/components/ordersub/ordersub-btn.vue
Normal file
54
src/components/ordersub/ordersub-btn.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="orderdetailBtn">
|
||||
<view class="left">{{left}}</view>
|
||||
<view class="right">
|
||||
<text>{{right}}</text>
|
||||
<img src="../../static/img/arrow.png" alt class="arrow" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ordersubBtn",
|
||||
props:{
|
||||
left:{
|
||||
type:String,
|
||||
},
|
||||
right:{
|
||||
type:String,
|
||||
}
|
||||
}
|
||||
};
|
||||
// 提交订单页面 选择付款方式和优惠券 的按钮
|
||||
// left 选择的标题 如选择付款方式 right 选择的具体选项
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderdetailBtn {
|
||||
height: 86upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color:#333333;
|
||||
font-size: 27upx;
|
||||
line-height: 86upx;
|
||||
.left{
|
||||
margin-left: 29upx;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
margin-right: 25upx;
|
||||
|
||||
.arrow {
|
||||
width: 17upx;
|
||||
height: 31upx;
|
||||
margin: auto 0;
|
||||
margin-left: 22upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
src/components/ordersub/ordersub-nouser.vue
Normal file
111
src/components/ordersub/ordersub-nouser.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="box" v-if="ifnull" @click="close">
|
||||
<view class="mid">
|
||||
<view class="tittle">完善收货人信息</view>
|
||||
<view class="desc">您的收货人信息不完整，请完善收货人信息</view>
|
||||
<!-- <view class="btn">
|
||||
<img src="../../static/img/wechaticon.png" alt class="icon" />
|
||||
<text>一键获取微信地址</text>
|
||||
</view> -->
|
||||
<view class="btn1">
|
||||
<img src="../../static/img/addicon.png" alt class="icon" />
|
||||
<text>手动添加联系人信息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ordersubNouser",
|
||||
data(){
|
||||
return {
|
||||
ifnull1:""
|
||||
}
|
||||
|
||||
},
|
||||
props:{
|
||||
ifnull:{
|
||||
type:Boolean,
|
||||
value:""
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.ifnull1=false
|
||||
this.$emit("charge",this.ifnull1)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// background-color: #7F7F7F;
|
||||
background-color: rgba(127, 127, 127, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// opacity:0.5;
|
||||
.mid {
|
||||
width: 539upx;
|
||||
height: 502upx;
|
||||
background-color: white;
|
||||
margin: 0 auto;
|
||||
border-radius: 5upx;
|
||||
.tittle {
|
||||
color: #333333;
|
||||
font-size: 32upx;
|
||||
font-size: 500;
|
||||
text-align: center;
|
||||
margin-top: 53upx;
|
||||
margin-bottom: 49upx;
|
||||
}
|
||||
.desc {
|
||||
color: #666666;
|
||||
font-size: 26upx;
|
||||
text-align: center;
|
||||
}
|
||||
.btn {
|
||||
width: 449upx;
|
||||
height: 95upx;
|
||||
background-color: #df3348;
|
||||
line-height: 95upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 28upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 36upx;
|
||||
.icon {
|
||||
width: 44upx;
|
||||
height: 45upx;
|
||||
margin: auto 0;
|
||||
margin-right: 7upx;
|
||||
}
|
||||
}
|
||||
.btn1 {
|
||||
width: 449upx;
|
||||
height: 95upx;
|
||||
border: 2px solid rgba(223,51,72,1);
|
||||
line-height: 95upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #DF3348;
|
||||
font-size: 26upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 36upx;
|
||||
.icon {
|
||||
width: 26upx;
|
||||
height: 26upx;
|
||||
margin: auto 0;
|
||||
margin-right: 18upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
src/components/ordersub/ordersub-pay.vue
Normal file
77
src/components/ordersub/ordersub-pay.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="ordersubPay">
|
||||
<view class="desc">
|
||||
<view>
|
||||
<text class="realpay">实付:</text>
|
||||
<text class="icon">￥</text>
|
||||
<text class="money">{{shifu}}</text>
|
||||
</view>
|
||||
<view class="hd">
|
||||
新人(除轮)）满
|
||||
<text class="full">{{full}}</text>元免邮
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @click="pay">立即支付</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ordersubPay",
|
||||
props:{
|
||||
shifu:{
|
||||
type:Number
|
||||
},
|
||||
full:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
pay(){
|
||||
this.$emit("pay",true)
|
||||
}
|
||||
}
|
||||
};
|
||||
// shifu: 实际支付 full满多少减
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ordersubPay {
|
||||
height: 123upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.desc {
|
||||
color: #df3348;
|
||||
margin: auto 0;
|
||||
margin-left: 33upx;
|
||||
.realpay {
|
||||
font-size: 23upx;
|
||||
color: #666666;
|
||||
}
|
||||
.icon {
|
||||
font-size: 33upx;
|
||||
}
|
||||
.money {
|
||||
font-size: 31upx;
|
||||
}
|
||||
}
|
||||
.hd{
|
||||
color:#666666;
|
||||
font-size: 18upx;
|
||||
.full{
|
||||
color: #DF3348;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 357upx;
|
||||
height:83upx;
|
||||
color:white;
|
||||
text-align: center;
|
||||
line-height: 83upx;
|
||||
background-color: #DF3348;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
src/components/ordersub/ordersub-price.vue
Normal file
61
src/components/ordersub/ordersub-price.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view class="ordersubPrice">
|
||||
<view class="pri">
|
||||
<view class="left">{{desc}}</view>
|
||||
<view class="price" v-if="ifyh">
|
||||
<text class="icon yh">-￥</text>
|
||||
<text class="qian yh">{{pri}}</text>
|
||||
</view>
|
||||
<view class="price" v-else>
|
||||
<text class="icon">￥</text>
|
||||
<text class="qian" >{{pri}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ordersubPrice",
|
||||
props: {
|
||||
desc: {
|
||||
type: String
|
||||
},
|
||||
pri: {
|
||||
type: String
|
||||
},
|
||||
ifyh: {
|
||||
type: Boolean
|
||||
}
|
||||
}
|
||||
};
|
||||
// 订单提交页面 各种其他费用
|
||||
// desc 费用名称 pri 价格 ifyh 是否使用优惠券
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ordersubPrice {
|
||||
font-size: 27upx;
|
||||
.pri {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 34upx;
|
||||
.left {
|
||||
margin-left: 30upx;
|
||||
}
|
||||
.price {
|
||||
color: #df3348;
|
||||
margin-right: 30upx;
|
||||
.icon {
|
||||
font-size: 31upx;
|
||||
}
|
||||
.qian {
|
||||
font-size: 29upx;
|
||||
}
|
||||
}
|
||||
.yh {
|
||||
color: #53b01f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
src/components/ordersub/ordersub-pricearr.vue
Normal file
43
src/components/ordersub/ordersub-pricearr.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<!-- <ordersubPrice desc="商品总价" pri="158.00"></ordersubPrice> -->
|
||||
<view class="ordersubPricearr">
|
||||
<ordersubPrice desc="商品总价" :pri="zongjia"></ordersubPrice>
|
||||
<ordersubPrice desc="运费" :pri="yf"></ordersubPrice>
|
||||
<ordersubPrice desc="优惠券" :pri="yhq" class="lastpri" ifyh=true></ordersubPrice>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ordersubPrice from "./ordersub-price";
|
||||
export default {
|
||||
name: "ordersubPricearr",
|
||||
components: {
|
||||
ordersubPrice
|
||||
},
|
||||
props:{
|
||||
zongjia:{
|
||||
type:Number
|
||||
},
|
||||
yf:{
|
||||
type:Number
|
||||
},
|
||||
yhq:{
|
||||
type:Number
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ordersubPricearr {
|
||||
// height: 289upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.lastpri{
|
||||
margin-bottom: 40upx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
65
src/components/ordersub/ordersub-shops.vue
Normal file
65
src/components/ordersub/ordersub-shops.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="orderShop">
|
||||
<view class="shops">
|
||||
<view>
|
||||
<img v-for="item in shops" :key="item" :src="item.imgpaththumb" alt class="shop" />
|
||||
</view>
|
||||
<view class="sum">共{{shops.length}}件商品、1项服务</view>
|
||||
</view>
|
||||
<!-- <img src="../../static/img/arrow.png" alt class="arrow" /> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- shops 传字符串，不同图片用，分割 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ordersubShop",
|
||||
data() {
|
||||
return {
|
||||
shopsarr:[]
|
||||
};
|
||||
},
|
||||
props: {
|
||||
shops: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.shopsarr=this.shops.split(',')
|
||||
console.log(this.shopsarr)
|
||||
}
|
||||
};
|
||||
// shops 提交订单的商品图片数组 字符串形式，不同图片用， 分割
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.orderShop {
|
||||
height: 267upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.shops {
|
||||
height: 194upx;
|
||||
margin-top: 30upx;
|
||||
margin-left: 29upx;
|
||||
.shop {
|
||||
width: 140upx;
|
||||
height: 140upx;
|
||||
margin-right: 8upx;
|
||||
}
|
||||
}
|
||||
.sum {
|
||||
color: #333333;
|
||||
font-size: 27upx;
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.arrow {
|
||||
width: 17upx;
|
||||
height: 31upx;
|
||||
margin: auto 0;
|
||||
margin-right: 25upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/components/ordersub/ordersub-userinfo.vue
Normal file
110
src/components/ordersub/ordersub-userinfo.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="bj">
|
||||
<view class="addrnull" v-if="addrnull" @click="newaddr">添加收货地址</view>
|
||||
<view class="orderdetailUserinfo" v-else>
|
||||
<view class="info">
|
||||
<view class="userinfo">
|
||||
<view>
|
||||
<img src="../../static/img/person.png" alt class="photo" />
|
||||
<text>{{username}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<img src="../../static/img/tel.png" alt class="photo" />
|
||||
<text>{{tel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<img src="../../static/img/position.png" alt class="photo" />
|
||||
<text>{{address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="arrow"></view> -->
|
||||
<img src="../../static/img/arrow.png" alt class="arrow" />
|
||||
</view>
|
||||
|
||||
<img src="../../static/img/border.png" alt="" class="line">
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ordersubUserinfo",
|
||||
props:{
|
||||
username:{
|
||||
type:String
|
||||
},
|
||||
tel:{
|
||||
type:String
|
||||
},
|
||||
address:{
|
||||
type:String
|
||||
},
|
||||
addrnull: {
|
||||
type:Boolean
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
newaddr(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/addr-add/addr-add"
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
// userinfo="张三" tel="12345678910" address="山东省泰安市宁阳县文庙街道XX小区"
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bj{
|
||||
background-color: white;
|
||||
padding-top: 20upx;
|
||||
padding-bottom: 20upx;
|
||||
}
|
||||
.orderdetailUserinfo {
|
||||
height: 155upx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
.info {
|
||||
width: 530upx;
|
||||
height: 99upx;
|
||||
font-size: 27upx;
|
||||
margin-left: 30upx;
|
||||
margin-top: 35upx;
|
||||
.userinfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 27upx;
|
||||
|
||||
}
|
||||
.photo {
|
||||
width: 32upx;
|
||||
height: 35upx;
|
||||
margin-right: 22upx;
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
width: 17upx;
|
||||
height: 31upx;
|
||||
margin: auto 0;
|
||||
margin-right: 25upx;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
height: 9upx;
|
||||
width: 100%;
|
||||
}
|
||||
.addrnull{
|
||||
width: 557upx;
|
||||
height:83upx;
|
||||
color:white;
|
||||
text-align: center;
|
||||
line-height: 83upx;
|
||||
background-color: #DF3348;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
</style>
|
||||
202
src/components/ordersub/ordersub-youhui.vue
Normal file
202
src/components/ordersub/ordersub-youhui.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view class="box" @click="close1">
|
||||
<view class="youhui">
|
||||
<scroll-view :scroll-y="true" class="scroll-Y" @scroll="scroll" @click.stop="a">
|
||||
<view class="top">
|
||||
<text class="tittle">领取优惠券</text>
|
||||
<view class="close" @click="close1">
|
||||
<img src="../../static/img/close.png" alt class="close" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="midbox">
|
||||
<view class="mid">
|
||||
<view class="yhqs">
|
||||
<view class="yhq" v-for="(i,j) in yhqall" :key="j">
|
||||
<view class="left">
|
||||
<view class="price">
|
||||
<text class="moneyicon">￥</text>
|
||||
<text>{{i.price}}</text>
|
||||
</view>
|
||||
<view>满{{i.min}}元可用</view>
|
||||
<view>有效期{{i.starttime}}-{{i.endtime}}</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="getter" v-if="ifget" @click="useyhq" :data-yhqid="i.yhq_id" :data-yhqpri="i.price">立即使用</view>
|
||||
<view class="getter" v-else @click="getyhq" :data-id="i.yhq_id">立即领取</view>
|
||||
<img src="../../static/img/geted.png" alt class="geted" v-if="ifget" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- <view class="bottom">
|
||||
<view class="more">查看更多</view>
|
||||
<view class="btn">更多</view>
|
||||
</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { requestP } from "../../static/js/request";
|
||||
export default {
|
||||
name: "youhui",
|
||||
props: {
|
||||
ifyouhui: {
|
||||
type: Boolean
|
||||
},
|
||||
yhqall: {
|
||||
type: Array
|
||||
},
|
||||
ifget: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
close1() {
|
||||
this.$emit("off", false);
|
||||
},
|
||||
getyhq(e) {
|
||||
console.log("yhq");
|
||||
requestP({
|
||||
url: "youhuiquan/add",
|
||||
data: {
|
||||
yhq_id: e.currentTarget.dataset.id
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code == 1) {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
requestP({
|
||||
url: "youhuiquan/get_list_all"
|
||||
}).then(res => {
|
||||
console.log(res, "youhui");
|
||||
this.yhqall = res.data.data;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
useyhq(e){
|
||||
console.log(e)
|
||||
this.$emit("yhqpri",e.currentTarget.dataset.yhqpri)
|
||||
this.$emit("yhqid",e.currentTarget.dataset.yhqid)
|
||||
this.close1()
|
||||
},
|
||||
a() {},
|
||||
scroll() {}
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scroll-Y {
|
||||
height: 93%;
|
||||
}
|
||||
.box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.youhui {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 377upx;
|
||||
.top {
|
||||
color: #333;
|
||||
font-size: 34rpx;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
.tittle {
|
||||
margin-top: 31upx;
|
||||
}
|
||||
.close {
|
||||
width: 45upx;
|
||||
height: 45upx;
|
||||
float: right;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
}
|
||||
.mid {
|
||||
.yhqs {
|
||||
margin-top: 50upx;
|
||||
.yhq {
|
||||
width: 689upx;
|
||||
height: 173upx;
|
||||
background: url("../../static/img/yhqbj.png");
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
color: #e01212;
|
||||
font-size: 24upx;
|
||||
margin: auto 0;
|
||||
margin-left: 37upx;
|
||||
.price {
|
||||
font-size: 50upx;
|
||||
.moneyicon {
|
||||
font-size: 43upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
color: #e01212;
|
||||
font-size: 32upx;
|
||||
.getter {
|
||||
position: relative;
|
||||
top: 71upx;
|
||||
right: 61upx;
|
||||
}
|
||||
.geted {
|
||||
width: 93upx;
|
||||
height: 80upx;
|
||||
position: relative;
|
||||
top: 42upx;
|
||||
left: 33upx;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
.more {
|
||||
color: #e01212;
|
||||
font-size: 28upx;
|
||||
text-align: center;
|
||||
margin-top: 26upx;
|
||||
margin-bottom: 22upx;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 96upx;
|
||||
color: white;
|
||||
line-height: 96upx;
|
||||
text-align: center;
|
||||
background-color: #e01212;
|
||||
margin-top: 75upx;
|
||||
}
|
||||
}
|
||||
.midbox {
|
||||
position: relative;
|
||||
top: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
src/components/pintuanshop/pintuanshop-line.vue
Normal file
19
src/components/pintuanshop/pintuanshop-line.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view class="pintuanshopLine">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"pintuanshopLine"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanshopLine{
|
||||
width: 100%;
|
||||
height: 20upx;
|
||||
background-color: #FFEEEE
|
||||
}
|
||||
</style>
|
||||
100
src/components/pintuanshop/pintuanshop-nav.vue
Normal file
100
src/components/pintuanshop/pintuanshop-nav.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="pintuanshopNav">
|
||||
<swiper class="swiper" display-multiple-items="4" @change="aa" :current="cupage" circular=true>
|
||||
<swiper-item style="margin-left:50upx" slideTo v-for="(item,index) in navlist" :key="index">
|
||||
<view :class="xz1[index]?active:navitem" @click="xz" :data-id="index">{{item}}</view>
|
||||
|
||||
</swiper-item>
|
||||
<!-- <swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[1]?active:navitem" @click="xz" data-id="1">保养套餐</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[2]?active:navitem" @click="xz" data-id="2">轮胎专区</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[3]?active:navitem" @click="xz" data-id="3">车载电器</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[4]?active:navitem" @click="xz" data-id="4">美容养护</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[5]?active:navitem" @click="xz" data-id="5">安全自驾</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[6]?active:navitem" @click="xz" data-id="6">汽车内饰</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[7]?active:navitem" @click="xz" data-id="7">汽车用品</view>
|
||||
</swiper-item>
|
||||
<swiper-item style="margin-left:50upx">
|
||||
<view :class="xz1[8]?active:navitem" @click="xz" data-id="8">其他</view>
|
||||
</swiper-item> -->
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pintuanshopNav",
|
||||
data() {
|
||||
return {
|
||||
autoplay: false,
|
||||
active: "active",
|
||||
navitem: "navitem",
|
||||
xz1: [1],
|
||||
cupage: 0,
|
||||
nav:[]
|
||||
};
|
||||
},
|
||||
props:{
|
||||
navlist:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
aa(a) {
|
||||
this.a = a.detail.current;
|
||||
},
|
||||
xz(e) {
|
||||
this.xz1 = [];
|
||||
this.xz1[e.currentTarget.dataset.id] = 1;
|
||||
|
||||
if (parseInt(e.currentTarget.dataset.id) <= 1) {
|
||||
this.cupage = 0;
|
||||
} else {
|
||||
if (parseInt(e.currentTarget.dataset.id) < 7) {
|
||||
this.cupage = parseInt(e.currentTarget.dataset.id) - 2;
|
||||
} else {
|
||||
this.cupage = 5;
|
||||
}
|
||||
}
|
||||
this.$emit("selected",e.currentTarget.dataset.id)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.navlist)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanshopNav{
|
||||
background-color: white;
|
||||
line-height: 62upx;
|
||||
}
|
||||
.swiper {
|
||||
height: 62upx;
|
||||
}
|
||||
.navitem {
|
||||
width: 120upx;
|
||||
font-size: 30upx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
width: 120upx;
|
||||
color: #e0394d;
|
||||
font-size: 30upx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
119
src/components/pintuanshop/pintuanshops.vue
Normal file
119
src/components/pintuanshop/pintuanshops.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="pintuanshops" @click="todetail">
|
||||
<view class="pic">
|
||||
<img :src="shoppic" alt class="pic" />
|
||||
</view>
|
||||
<view class="shopname">
|
||||
{{shopname}}
|
||||
</view>
|
||||
<view class="price">
|
||||
<view class="nowmoney">
|
||||
<text class="nowmoneyicon">￥</text>
|
||||
<text>{{pri}}</text>
|
||||
<text class="huaxian">￥{{huaxian}}</text>
|
||||
<view class="num">已拼{{yipin}}件</view>
|
||||
</view>
|
||||
<view class="btn">去开团</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pintuanshops",
|
||||
props:{
|
||||
shoppic:{
|
||||
type:String
|
||||
},
|
||||
shopname:{
|
||||
type:String
|
||||
},
|
||||
pri:{
|
||||
type:Number
|
||||
},
|
||||
huaxian:{
|
||||
type:Number
|
||||
},
|
||||
yipin:{
|
||||
type:Number
|
||||
},
|
||||
shopid:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
todetail(e){
|
||||
console.log(this.shopid)
|
||||
uni.navigateTo({
|
||||
url:"/pages/pintuanshopdetail/pintuanshopdetail?shopid="+this.shopid
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanshops {
|
||||
width: 369upx;
|
||||
height: 553upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.pic {
|
||||
width: 283upx;
|
||||
height: 327upx;
|
||||
margin: 0 auto;
|
||||
margin-top:5upx;
|
||||
}
|
||||
.shopname {
|
||||
width: 259upx;
|
||||
font-size: 22upx;
|
||||
color: #333333;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
width: 326upx;
|
||||
height: 52upx;
|
||||
justify-content: space-between;
|
||||
color: #888888;
|
||||
font-size: 22upx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 30upx;
|
||||
// line-height: 52upx;
|
||||
.nowmoney {
|
||||
color: #e32e10;
|
||||
font-size: 27upx;
|
||||
.nowmoneyicon {
|
||||
font-size: 24upx;
|
||||
}
|
||||
.huaxian {
|
||||
font-size: 18upx;
|
||||
color:#888888;
|
||||
text-decoration: line-through
|
||||
}
|
||||
.num{
|
||||
color: #888888;
|
||||
font-size: 22upx;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 118upx;
|
||||
height: 42upx;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(230, 56, 83, 1) 0%,
|
||||
rgba(228, 61, 84, 1) 100%
|
||||
);
|
||||
border-radius: 21upx;
|
||||
color: white;
|
||||
line-height: 42upx;
|
||||
text-align: center;
|
||||
font-size: 20upx;
|
||||
margin: auto 0;
|
||||
margin-top: 21upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/components/pintuanshopdetail/pintuandetail-ale.vue
Normal file
29
src/components/pintuanshopdetail/pintuandetail-ale.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="pintuanshopdetailale">
|
||||
{{ale}}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pintuanshopdetailale",
|
||||
props:{
|
||||
ale:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanshopdetailale{
|
||||
// height: 121upx;
|
||||
width: 673upx;
|
||||
background-color: white;
|
||||
color: #333333;
|
||||
font-size: 22upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 33upx;
|
||||
margin-bottom: 32upx;
|
||||
}
|
||||
</style>
|
||||
86
src/components/pintuanshopdetail/pintuandetail-bottom.vue
Normal file
86
src/components/pintuanshopdetail/pintuandetail-bottom.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="box">
|
||||
<view class="index" style="margin-left:30upx;margin-right:82upx;">
|
||||
<image src="../../static/img/index.png">
|
||||
|
||||
</image>
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<view class="index" style="margin-right:44upx;"><image src="../../static/img/server.png">
|
||||
|
||||
</image>
|
||||
<view>客服</view></view>
|
||||
<view class="alone" style="margin-right:7upx;" @click="dandubuy">
|
||||
<view>￥{{dan}}</view>
|
||||
<view>单独购买</view>
|
||||
</view>
|
||||
<view class="group" @click="group">
|
||||
<view>￥{{pin}}</view>
|
||||
<view>拼团购卖</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
width: 750upx;
|
||||
height: 106upx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.index{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
>image{
|
||||
width: 38upx;
|
||||
height: 35upx;
|
||||
margin-bottom: 8upx;
|
||||
}
|
||||
>view{
|
||||
font-size: 20upx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.alone{
|
||||
width: 197upx;
|
||||
height: 79upx;
|
||||
border:1px solid rgba(222,53,72,1);
|
||||
border-radius: 5upx;
|
||||
display: flex;
|
||||
font-size: 26upx;
|
||||
color: #DE3548;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.group{
|
||||
width: 287upx;
|
||||
height: 83upx;
|
||||
background:rgba(222,53,72,1);
|
||||
border-radius: 5upx;
|
||||
|
||||
display: flex;
|
||||
font-size: 26upx;
|
||||
color: #FFFFFF;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name:"pintuandetail-bottom",
|
||||
props:['dan','pin'],
|
||||
methods:{
|
||||
dandubuy(){
|
||||
this.$emit("dandu",true)
|
||||
},
|
||||
group(){
|
||||
console.log("pplkio")
|
||||
this.$emit("group",true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
155
src/components/pintuanshopdetail/pintuandetail-list.vue
Normal file
155
src/components/pintuanshopdetail/pintuandetail-list.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="pintuandetaillist">
|
||||
<view class="list" v-for="(item,j) in pintuanlist" :key="j">
|
||||
<view class="left">
|
||||
<img :src="item.avatar_url" alt class="user" />
|
||||
<view class="username">{{item.uname}}</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="xq">
|
||||
<view class="cha">
|
||||
还差
|
||||
<text class="number">{{item.hcrs_num}}人</text>拼成
|
||||
</view>
|
||||
<view class="djs">
|
||||
剩余
|
||||
<countdown :hour="shijian(item.dqtime)[0] " :minute="shijian(item.dqtime)[1]" :second="shijian(item.dqtime)[2]"></countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @click="cantuan" :data-ptorderid="item.pt_order_id">去参团</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="list">
|
||||
<view class="left">
|
||||
<img src="../../static/img/pintuanuser.png" alt class="user" />
|
||||
<view class="username">Awen</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="xq">
|
||||
<view class="cha">
|
||||
还差
|
||||
<text class="number">3人</text>拼成
|
||||
</view>
|
||||
<view class="djs">
|
||||
剩余
|
||||
<countdown hour="1" minute="12" second="40"></countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">去参团</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countdown from "../seckill/countdown";
|
||||
export default {
|
||||
name: "pintuandetaillist",
|
||||
components: {
|
||||
countdown
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
time1:[]
|
||||
}
|
||||
},
|
||||
props:{
|
||||
pintuanlist:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
shijian(completeTime) {
|
||||
console.log(completeTime)
|
||||
var stime = Date.parse(new Date());
|
||||
var etime = Date.parse(new Date(completeTime));
|
||||
console.log(stime,etime)
|
||||
// 两个时间戳相差的毫秒数
|
||||
var usedTime = etime - stime;
|
||||
// 计算相差的天数
|
||||
// var days = Math.floor(usedTime / (24 * 3600 * 1000));
|
||||
// 计算天数后剩余的毫秒数
|
||||
var leave1 = usedTime % (24 * 3600 * 1000);
|
||||
// 计算出小时数
|
||||
var hours = Math.floor(usedTime / (3600 * 1000));
|
||||
// 计算小时数后剩余的毫秒数
|
||||
var leave2 = leave1 % (3600 * 1000);
|
||||
// 计算相差分钟数
|
||||
var minutes = Math.floor(leave2 / (60 * 1000));
|
||||
var leave3 = leave2 % (60 * 1000)
|
||||
var s = Math.floor(leave3 / (1000));
|
||||
var time = [hours,minutes,s];
|
||||
console.log(time)
|
||||
return time;
|
||||
},
|
||||
cantuan(e){
|
||||
console.log(e)
|
||||
this.$emit("cantuan",true)
|
||||
this.$emit("getorderid",e.currentTarget.dataset.ptorderid)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.pintuanlist,7946)
|
||||
// for()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuandetaillist {
|
||||
// height: 347upx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
.list {
|
||||
width: 693upx;
|
||||
height: 65upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 43upx;
|
||||
.left {
|
||||
.user {
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
float: left;
|
||||
}
|
||||
.username {
|
||||
color: #999999;
|
||||
font-size: 28upx;
|
||||
float: left;
|
||||
line-height: 45upx;
|
||||
text-indent: 18upx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
// width: 327upx;
|
||||
height: 65upx;
|
||||
display: flex;
|
||||
.xq {
|
||||
.cha {
|
||||
color: #333333;
|
||||
font-size: 28upx;
|
||||
.number {
|
||||
color: #dd3447;
|
||||
}
|
||||
}
|
||||
.djs {
|
||||
color: #333333;
|
||||
font-size: 22upx;
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 150upx;
|
||||
height: 65upx;
|
||||
background-color: #db3446;
|
||||
color: white;
|
||||
line-height: 65upx;
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
margin-left: 25upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/components/pintuanshopdetail/pintuanline1.vue
Normal file
17
src/components/pintuanshopdetail/pintuanline1.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view class="line"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"pintuanline"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.line{
|
||||
height: 19upx;
|
||||
width: 100%;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
66
src/components/pintuanshopdetail/pintuanlisttop.vue
Normal file
66
src/components/pintuanshopdetail/pintuanlisttop.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view class="pintuanlisttop">
|
||||
<view class="listtop">
|
||||
<view class="left">{{title1}}</view>
|
||||
<!-- <view class="right">
|
||||
<text class="des">{{right}}</text>
|
||||
<img src="../../sctatic/img/arrowmore.png" alt class="arrow" />
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"pintuanlisttop",
|
||||
props:{
|
||||
title1:{
|
||||
type:String
|
||||
},
|
||||
right:{
|
||||
type:String,
|
||||
default:'查看更多'
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.title1,99965552)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanlisttop{
|
||||
.listtop {
|
||||
height: 91upx;
|
||||
display: flex;
|
||||
line-height: 91upx;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
color: #333333;
|
||||
font-size: 26upx;
|
||||
line-height: 91upx;
|
||||
padding-left: 31upx;
|
||||
}
|
||||
.right {
|
||||
height: 91upx;
|
||||
color: #999999;
|
||||
font-size: 28upx;
|
||||
// line-height: 91upx;
|
||||
float: right;
|
||||
padding-right: 21upx;
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 28upx;
|
||||
padding-right: 26upx;
|
||||
}
|
||||
.arrow {
|
||||
width: 14upx;
|
||||
height: 25upx;
|
||||
// float : right;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
src/components/pintuanshopdetail/pintuanrule.vue
Normal file
30
src/components/pintuanshopdetail/pintuanrule.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="pintuanrule">
|
||||
<pintuanlisttop title1="拼团玩法" right="规则说明"></pintuanlisttop>
|
||||
<view class="content">支付开团并邀请3人呢参加，组团成功即可发货</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pintuanlisttop from "../../components/pintuanshopdetail/pintuanlisttop"
|
||||
export default {
|
||||
name:"pintuanrule",
|
||||
components:{
|
||||
pintuanlisttop
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanrule{
|
||||
height:149upx;
|
||||
width: 100%;
|
||||
.content{
|
||||
color: #333333;
|
||||
font-size: 28upx;
|
||||
margin-left:31upx;
|
||||
margin-top: 10upx;
|
||||
margin-bottom: 37upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
src/components/pintuanshopdetail/pintuanshopdetail-top.vue
Normal file
112
src/components/pintuanshopdetail/pintuanshopdetail-top.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="pintuanshopdetailtop">
|
||||
<shopdetailToppic
|
||||
:picarr="picarr"
|
||||
v-on:btnchange="change0"
|
||||
></shopdetailToppic>
|
||||
<view class="price">
|
||||
<text class="money">￥{{money}}</text>
|
||||
<text class="huaxian">￥{{huaxian}}</text>
|
||||
</view>
|
||||
<view class="num">已团{{yituan}}单·{{tuantotle}}人团</view>
|
||||
<view class="shopname">{{shopname}}</view>
|
||||
<shopdetailEnsure :ensurepic="ensurepic" :ensures="ensures" v-on:more="more"></shopdetailEnsure>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import shopdetailToppic from "../../components/shopdetail/shopdetail-toppic";
|
||||
import shopdetailBtn from "../../components/shopdetail/shopdetail-btn";
|
||||
import shopdetailEnsure from "../../components/shopdetail/shopdetail-ensure";
|
||||
export default {
|
||||
name: "pintuanshoptop",
|
||||
props:{
|
||||
money:{
|
||||
type:Number
|
||||
},
|
||||
huaxian:{
|
||||
type:Number
|
||||
},
|
||||
shopname:{
|
||||
type:String
|
||||
},
|
||||
ensures:{
|
||||
type:String
|
||||
},
|
||||
picarr:{
|
||||
type:Array,
|
||||
},
|
||||
yituan:{
|
||||
type:Number
|
||||
},
|
||||
tuantotle:{
|
||||
type:Number
|
||||
},
|
||||
ensurepic:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
components: {
|
||||
shopdetailToppic,
|
||||
shopdetailBtn,
|
||||
shopdetailEnsure,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ifsp: "",
|
||||
ifservice:false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change0(e) {
|
||||
// console.log(e)
|
||||
this.ifsp = e;
|
||||
},
|
||||
off(e){
|
||||
console.log(e)
|
||||
this.ifservice=e
|
||||
},
|
||||
more(e){
|
||||
this.ifservice=e
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pintuanshopdetailtop {
|
||||
.btn {
|
||||
width: 227upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
bottom: 76upx;
|
||||
}
|
||||
.price{
|
||||
margin-left:27upx;
|
||||
margin-top:36upx;
|
||||
.money{
|
||||
color:#E32E10;
|
||||
font-size: 49upx;
|
||||
}
|
||||
.huaxian{
|
||||
color:#666666;
|
||||
font-size: 27upx;
|
||||
padding-left: 21upx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
color:#666666;
|
||||
font-size: 27upx;
|
||||
margin-left: 39upx;
|
||||
}
|
||||
.shopname{
|
||||
width: 673upx;
|
||||
color: #333333;
|
||||
font-size: 26upx;
|
||||
margin: 0 auto;
|
||||
margin-top:33upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
41
src/components/proyear/proyear-carinfo.vue
Normal file
41
src/components/proyear/proyear-carinfo.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="proyearcarinfo">
|
||||
<view>
|
||||
<img :src="carpic" class="icon"/>
|
||||
<text class="carname">{{carname}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "proyearCarinfo",
|
||||
props:{
|
||||
carname:{
|
||||
type:String
|
||||
},
|
||||
carpic:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.proyearcarinfo {
|
||||
height: 90upx;
|
||||
width: 100vm;
|
||||
background-color: #df3348;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
width: 85upx;
|
||||
height: 41upx;
|
||||
margin-left: 17upx;
|
||||
}
|
||||
.carname{
|
||||
color: white;
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
src/components/proyear/proyear-choose.vue
Normal file
61
src/components/proyear/proyear-choose.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view class="proyearchoose">
|
||||
<view>
|
||||
<text class="desc">{{desc}}</text>
|
||||
<img src="../../static/img/arrow.png" alt class="arrow" v-if="ifarrow" />
|
||||
<view class="line" v-if="ifline"></view>
|
||||
</view>
|
||||
|
||||
<view v-if="ifchoosecx">
|
||||
<text class="desc">{{cx}}</text>
|
||||
<img src="../../static/img/arrow.png" alt class="arrow" v-if="ifarrow" />
|
||||
<view class="line" v-if="ifline"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "proyearChoose",
|
||||
props: {
|
||||
ifarrow: {
|
||||
type: Boolean
|
||||
},
|
||||
ifchoosecx: {
|
||||
type: Boolean
|
||||
},
|
||||
desc: {
|
||||
type: String
|
||||
},
|
||||
ifline:{
|
||||
type:Boolean
|
||||
},
|
||||
cx:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.proyearchoose {
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
.desc {
|
||||
font-size: 26upx;
|
||||
color:#3C3A3C;
|
||||
line-height: 90upx;
|
||||
margin-left: 32upx;
|
||||
margin-right: 22upx;
|
||||
}
|
||||
.arrow {
|
||||
width: 11upx;
|
||||
height: 20upx;
|
||||
}
|
||||
.line {
|
||||
width: 722upx;
|
||||
height: 2upx;
|
||||
background: rgba(217, 217, 217, 1);
|
||||
margin:0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/components/proyear/proyear-choose1.vue
Normal file
60
src/components/proyear/proyear-choose1.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view class="proyearchoose">
|
||||
<view>
|
||||
<text class="desc">{{desc}}</text>
|
||||
<img src="../../static/img/arrow.png" alt class="arrow" v-if="ifarrow" />
|
||||
<view class="line" v-if="ifline"></view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="desc">{{cx}}</text>
|
||||
<img src="../../static/img/arrow.png" alt class="arrow" v-if="ifarrow" />
|
||||
<view class="line" v-if="ifline"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "proyearChoose1",
|
||||
props: {
|
||||
ifarrow: {
|
||||
type: Boolean
|
||||
},
|
||||
ifchoosecx: {
|
||||
type: Boolean
|
||||
},
|
||||
desc: {
|
||||
type: String
|
||||
},
|
||||
ifline:{
|
||||
type:Boolean
|
||||
},
|
||||
cx:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.proyearchoose {
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
.desc {
|
||||
font-size: 26upx;
|
||||
color:#3C3A3C;
|
||||
line-height: 90upx;
|
||||
margin-left: 32upx;
|
||||
margin-right: 22upx;
|
||||
}
|
||||
.arrow {
|
||||
width: 11upx;
|
||||
height: 20upx;
|
||||
}
|
||||
.line {
|
||||
width: 722upx;
|
||||
height: 2upx;
|
||||
background: rgba(217, 217, 217, 1);
|
||||
margin:0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
src/components/proyear/proyear-choosetitle.vue
Normal file
25
src/components/proyear/proyear-choosetitle.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<view class="proyearaChoosetitle">
|
||||
{{desc}}
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'proyearChoosetitle',
|
||||
props:{
|
||||
desc:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.proyearaChoosetitle{
|
||||
height: 58upx;
|
||||
background-color: #EEEEEE;
|
||||
text-indent: 30upx;
|
||||
color: #040404;
|
||||
font-size: 22upx;
|
||||
line-height: 58upx
|
||||
}
|
||||
</style>
|
||||
26
src/components/search/searchChexing.vue
Normal file
26
src/components/search/searchChexing.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<view class="searchChexing">{{chexing}}</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "searchChexing",
|
||||
props:{
|
||||
chexing:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
// chexing : tab切换栏下面的那行字
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.searchChexing {
|
||||
height: 77upx;
|
||||
color: #333333;
|
||||
font-size: 24upx;
|
||||
line-height: 77upx;
|
||||
text-indent: 27upx;
|
||||
border-top: 3upx solid #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
97
src/components/search/searchShop.vue
Normal file
97
src/components/search/searchShop.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="searchShop">
|
||||
<img :src="pic" alt class="shop" />
|
||||
<view class="shopdesc">
|
||||
<view class="shopname">
|
||||
{{shopname}}
|
||||
<view style="margin-top:3upx;font-size:20upx;">{{tag}}</view>
|
||||
</view>
|
||||
<view class="pri">
|
||||
<view class="price">
|
||||
<text class="money">
|
||||
<text class="icon">￥</text>{{pri}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="zhushi">{{zhushi}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "searchShop",
|
||||
props:{
|
||||
shopname:{
|
||||
type:String
|
||||
},
|
||||
pri:{
|
||||
type:Number
|
||||
},
|
||||
tag:{
|
||||
type:String
|
||||
},
|
||||
zhushi:{
|
||||
type:String
|
||||
},
|
||||
pic:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
};
|
||||
// shopname : 商品名 pri:商品价格 tag待安装标签里的内容 zhushi：底部注释
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.searchShop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 3upx solid #eeeeee;
|
||||
border-bottom: 3upx solid #eeeeee;
|
||||
.shop {
|
||||
width: 249upx;
|
||||
height: 243upx;
|
||||
margin: auto 0;
|
||||
margin-right: 13upx;
|
||||
}
|
||||
.shopdesc {
|
||||
width: 450upx;
|
||||
font-size: 26upx;
|
||||
color: #666666;
|
||||
.shopname {
|
||||
width: 443upx;
|
||||
}
|
||||
}
|
||||
.pri {
|
||||
margin-top: 86upx;
|
||||
.price {
|
||||
.money {
|
||||
font-size: 36upx;
|
||||
color: #ea2544;
|
||||
.icon {
|
||||
font-size: 19upx;
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
width: 68upx;
|
||||
height: 31upx;
|
||||
border: 1upx solid #3299ba;
|
||||
color: #3299ba;
|
||||
text-align: center;
|
||||
line-height: 31upx;
|
||||
font-size: 16upx;
|
||||
padding: 6upx 9upx;
|
||||
margin-left: 16upx;
|
||||
position: relative;
|
||||
top: -5upx;
|
||||
}
|
||||
}
|
||||
.zhushi {
|
||||
font-size: 18upx;
|
||||
color: #999999;
|
||||
margin-top: 16upx;
|
||||
padding-bottom: 16upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
70
src/components/search/searchShuru.vue
Normal file
70
src/components/search/searchShuru.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="searchShuru">
|
||||
<view class="shuru">
|
||||
<img src="../../static/img/search1.png" alt class="search" />
|
||||
<input type="text" :placeholder="content" style="width:620upx" @confirm="sousuo" />
|
||||
<!-- <img src="../../static/img/del.png" alt class="del" v-if="isdel" /> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "searchShuru",
|
||||
props: {
|
||||
isdel: {
|
||||
type: Boolean
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
value: ""
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sousuo(a){
|
||||
console.log(a.detail.value)
|
||||
this.$emit("sousuo",a.detail.value)
|
||||
}
|
||||
}
|
||||
};
|
||||
// isdel 是否有错号 content: placeholder提示的内容
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.searchShuru {
|
||||
.shuru {
|
||||
width: 704upx;
|
||||
height: 50upx;
|
||||
margin: 0 auto;
|
||||
border-radius: 25upx;
|
||||
color: black;
|
||||
background-color: #efefef;
|
||||
font-size: 22upx;
|
||||
text-indent: 79upx;
|
||||
line-height: 50upx;
|
||||
// position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
top: 24rpx;
|
||||
}
|
||||
.search {
|
||||
width: 26upx;
|
||||
height: 25upx;
|
||||
// position: relative;
|
||||
z-index: 999;
|
||||
top: -30rpx;
|
||||
left: 56upx;
|
||||
}
|
||||
.del {
|
||||
width: 26upx;
|
||||
height: 25upx;
|
||||
// position: relative;
|
||||
z-index: 999;
|
||||
top: -32rpx;
|
||||
left: 630upx;
|
||||
}
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
}
|
||||
</style>
|
||||
71
src/components/search/searchTap.vue
Normal file
71
src/components/search/searchTap.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="searchTap">
|
||||
<view :class="select[0]" @click="xz" data-tap="0">{{tabname}}</view>
|
||||
<view :class="select[1]" @click="xz" data-tap="1">{{tabname1}}</view>
|
||||
<view :class="select[2]" @click="xz" data-tap="2">{{tabname2}}</view>
|
||||
<!-- <view :class="select[3]" @click="xz" data-tap="4">{{tabname3}}</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "searchTap",
|
||||
data() {
|
||||
return {
|
||||
select: ["active", "", "", ""],
|
||||
tabname:"",
|
||||
tabname2:'wwww',
|
||||
tabname1:'ppp',
|
||||
tabname3:'eeeee',
|
||||
ceshi:"actice"
|
||||
};
|
||||
},
|
||||
props:{
|
||||
tabtittle:{
|
||||
type:String
|
||||
},
|
||||
iforder:{
|
||||
type:Boolean
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.tabname=this.tabtittle.split(',')[0]
|
||||
this.tabname1=this.tabtittle.split(',')[1]
|
||||
this.tabname2=this.tabtittle.split(',')[2]
|
||||
// this.tabname3=this.tabtittle.split(',')[3]
|
||||
},
|
||||
methods: {
|
||||
xz(e) {
|
||||
if(e.currentTarget.dataset.tap==0){
|
||||
this.select = ["active", "", ""]
|
||||
}else if(e.currentTarget.dataset.tap==1){
|
||||
this.select = ["", "active", ""];
|
||||
}else if(e.currentTarget.dataset.tap==2){
|
||||
this.select = ["", "", "active"];
|
||||
}
|
||||
this.$emit("shaixuan",e.currentTarget.dataset.tap)
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.searchTap {
|
||||
height: 75upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 26upx;
|
||||
color: #333333;
|
||||
border-top: 3upx solid #eeeeee;
|
||||
line-height: 75upx;
|
||||
.active {
|
||||
color: #d35f79;
|
||||
}
|
||||
.active1{
|
||||
color: #F57426;
|
||||
border-bottom: 1upx solid #F57426;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
src/components/seckill/countdown.vue
Normal file
154
src/components/seckill/countdown.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<view class="uni-countdown">
|
||||
<view v-if="showDay" class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{d}}</view>
|
||||
<view v-if="showDay" class="uni-countdown__splitor" :style="{color:splitorColor}">天</view>
|
||||
<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{h}}</view>
|
||||
<view class="uni-countdown__splitor" :style="{color:splitorColor}">{{showColon ? ':' : '时'}}</view>
|
||||
<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{i}}</view>
|
||||
<view class="uni-countdown__splitor" :style="{color:splitorColor}">{{showColon ? ':' : '分'}}</view>
|
||||
<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color}">{{s}}</view>
|
||||
<view v-if="!showColon" class="uni-countdown__splitor" :style="{color:splitorColor}">秒</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "countdown",
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "#FFFFFF"
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: "#000000"
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
},
|
||||
day: {
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
created: function(e) {
|
||||
// this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
|
||||
// this.countDown()
|
||||
this.timer = setInterval(() => {
|
||||
|
||||
if(this.seconds == 0){
|
||||
// console.log(123)
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
|
||||
}
|
||||
this.seconds--
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp()
|
||||
return
|
||||
}
|
||||
// console.log(this.seconds)
|
||||
this.countDown()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
toSeconds(day, hours, minutes, seconds) {
|
||||
return (day * 60 * 60 * 24) + (hours * 60 * 60) + (minutes * 60) + seconds
|
||||
},
|
||||
timeUp() {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('timeup')
|
||||
},
|
||||
countDown() {
|
||||
let seconds = this.seconds
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0]
|
||||
if (seconds > 0) {
|
||||
day = Math.floor(seconds / (60 * 60 * 24))
|
||||
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
|
||||
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
|
||||
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
|
||||
} else {
|
||||
this.timeUp()
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
if (hour < 10) {
|
||||
hour = '0' + hour
|
||||
}
|
||||
if (minute < 10) {
|
||||
minute = '0' + minute
|
||||
}
|
||||
if (second < 10) {
|
||||
second = '0' + second
|
||||
}
|
||||
this.d = day
|
||||
this.h = hour
|
||||
this.i = minute
|
||||
this.s = second
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$countdown-height:44upx;
|
||||
|
||||
.uni-countdown {
|
||||
// padding: 2upx 0;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
&__splitor {
|
||||
justify-content: center;
|
||||
// line-height: $countdown-height;
|
||||
// padding: 0 5upx;
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
&__number {
|
||||
// line-height: $countdown-height;
|
||||
justify-content: center;
|
||||
// height: $countdown-height;
|
||||
// border-radius: $uni-border-radius-base;
|
||||
margin: 0 5upx;
|
||||
font-size: 24upx;
|
||||
// border: 1px solid #000000;
|
||||
font-size: 24upx;
|
||||
// padding: 0 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/components/seckill/seckillTop.vue
Normal file
83
src/components/seckill/seckillTop.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="seckillTop">
|
||||
<img src="../../static/img/seckilltopbg.png" alt class="topbg" />
|
||||
<view class="timelist">
|
||||
<view v-for="(i,j) in list" :class="cutime==j?active:time" :key="j">
|
||||
<view>{{i.ms_starttime}}</view>
|
||||
<view class="event" style="font-size:24upx">{{j == 0?"开抢中":"未开始" }}</view>
|
||||
</view>
|
||||
<!-- <view :class="cutime==1?active:time">
|
||||
<view>16:00</view>
|
||||
<view class="event" style="font-size:24upx">开抢中</view>
|
||||
</view>
|
||||
<view :class="cutime==2?active:time">
|
||||
<view>16:00</view>
|
||||
<view class="event" style="font-size:24upx">开抢中</view>
|
||||
</view>
|
||||
<view :class="cutime==3?active:time">
|
||||
<view>16:00</view>
|
||||
<view class="event" style="font-size:24upx">开抢中</view>
|
||||
</view>
|
||||
|
||||
<view :class="cutime==4?active:time">
|
||||
<view>16:00</view>
|
||||
<view class="event" style="font-size:24upx">开抢中</view>
|
||||
</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "seckillTop",
|
||||
data() {
|
||||
return {
|
||||
active: "active",
|
||||
time: "time"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cutime: {
|
||||
type: Number
|
||||
},
|
||||
list:{
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.list, 221);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.seckillTop {
|
||||
.topbg {
|
||||
height: 210upx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
.timelist {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
bottom: 143upx;
|
||||
.time {
|
||||
width: 96upx;
|
||||
font-size: 40upx;
|
||||
color: #e49299;
|
||||
text-align: center;
|
||||
.event {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
width: 96upx;
|
||||
font-size: 40upx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
src/components/seckill/seckillad.vue
Normal file
28
src/components/seckill/seckillad.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="seckillAd">
|
||||
<img :src="picurl" alt="" class="pic">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"seckillAd",
|
||||
props:{
|
||||
picurl:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
mounted(e){
|
||||
console.log(this.picurl,"57448185")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.seckillAd{
|
||||
.pic{
|
||||
width: 342upx;
|
||||
height: 165upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
src/components/seckill/seckillceshi.vue
Normal file
47
src/components/seckill/seckillceshi.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="seckillceshi">
|
||||
<swiper
|
||||
class="swiper"
|
||||
:indicator-dots="indicatorDots"
|
||||
:autoplay="autoplay"
|
||||
:duration="duration"
|
||||
circular="true"
|
||||
display-multiple-items="3"
|
||||
@change="aa"
|
||||
>
|
||||
<swiper-item>
|
||||
<view :class="a==0?'seckilltime':'seckilltime1'">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view :class="a==1?'seckilltime':'seckilltime1'">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view :class="a==2?'seckilltime':'seckilltime1'">C</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view :class="a==3?'seckilltime':'seckilltime1'">D</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "selectkillceshi",
|
||||
data() {
|
||||
return {
|
||||
autoplay: false,
|
||||
active: "active",
|
||||
a: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
aa(a) {
|
||||
this.a = a.detail.current;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
98
src/components/seckill/seckilldetailname.vue
Normal file
98
src/components/seckill/seckilldetailname.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="seckillshopdetailname">
|
||||
<view class="left">
|
||||
<view class="left1">
|
||||
<text class="icon">￥</text>
|
||||
<text class="money">{{price}}</text>
|
||||
</view>
|
||||
<view class="right1">
|
||||
<view class="yishou">已售{{yp_kp_bfb}}</view>
|
||||
<view class="huaxian">￥{{price_y}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="ale">距离结束仅剩</view>
|
||||
<view class="djs">
|
||||
<countdown :day="time[0]" :hour="time[1]" :minute="time[2]" :second="time[3]" showDay=true></countdown>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countdown from "../../components/seckill/countdown";
|
||||
export default {
|
||||
name: "seckillshopdetailname",
|
||||
components: {
|
||||
countdown
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
time:[]
|
||||
}
|
||||
},
|
||||
props:['price','price_y','yp_kp_bfb','times'],
|
||||
watch:{
|
||||
times(a){
|
||||
console.log(a)
|
||||
this.time = a
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.seckillshopdetailname {
|
||||
width: 100vw;
|
||||
height: 101upx;
|
||||
background: url("../../static/img/seckillshopdetail.png");
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// float: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
width: 151upx;
|
||||
margin-left: 28upx;
|
||||
color: white;
|
||||
line-height: 101upx;
|
||||
display: flex;
|
||||
.left1 {
|
||||
height: 30upx;
|
||||
.icon {
|
||||
font-size: 30upx;
|
||||
}
|
||||
.money {
|
||||
font-size: 41upx;
|
||||
}
|
||||
}
|
||||
.right1 {
|
||||
position: relative;
|
||||
top: -12upx;
|
||||
left: 10upx;
|
||||
.yishou {
|
||||
height: 20upx;
|
||||
color: #fff600;
|
||||
font-size: 18upx;
|
||||
}
|
||||
.huaxian {
|
||||
width: 100upx;
|
||||
font-size: 21upx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
.ale {
|
||||
color: #e1484e;
|
||||
font-size: 22upx;
|
||||
text-align: center;
|
||||
}
|
||||
height: 61rpx;
|
||||
// margin: auto 0;
|
||||
margin-top: 16rpx;
|
||||
padding-right: 35upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
src/components/seckill/seckillshop.vue
Normal file
174
src/components/seckill/seckillshop.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="seckillshop">
|
||||
<img :src="imgurl" alt class="pic" />
|
||||
<view class="shopinfo">
|
||||
<view>
|
||||
<view class="shopname">{{shopname}}</view>
|
||||
<view class="shopdesc">{{shopdesc}}</view>
|
||||
<view class="tag">{{tag}}</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
|
||||
<view class="price">
|
||||
<view class="money">
|
||||
<text class="moneyicon">￥</text>
|
||||
<text>{{price}}</text>
|
||||
</view>
|
||||
<view class="btn" >{{show == 0 ? '马上抢' : '待抢购'}}</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="huaxian">￥{{huaxian}}</view>
|
||||
<view class="sale">
|
||||
<text>已售{{sale}}</text>
|
||||
<view class="schedule">
|
||||
<view class="progress" :style="progress1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "seckillshop",
|
||||
data(){
|
||||
return {
|
||||
progress1:"width:"+this.sale
|
||||
}
|
||||
},
|
||||
props:{
|
||||
imgurl:{
|
||||
type:String
|
||||
},
|
||||
shopname:{
|
||||
type:String
|
||||
},
|
||||
shopdesc:{
|
||||
type:String
|
||||
},
|
||||
tag:{
|
||||
type:String
|
||||
},
|
||||
price:{
|
||||
type:Number
|
||||
},
|
||||
huaxian:{
|
||||
type:Number
|
||||
},
|
||||
sale:{
|
||||
type:String
|
||||
},
|
||||
show:{
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.seckillshop {
|
||||
width: 100%;
|
||||
height: 225upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.pic {
|
||||
width: 192upx;
|
||||
height: 192upx;
|
||||
margin-left: 11upx;
|
||||
}
|
||||
.shopinfo {
|
||||
width: 475upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top:18upx;
|
||||
margin-right: 49upx;
|
||||
margin-bottom: 24upx;
|
||||
.shopname {
|
||||
color: #393939;
|
||||
font-size: 26upx;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
.shopdesc {
|
||||
color: #e44a59;
|
||||
font-size: 18upx;
|
||||
text-indent: 28upx;
|
||||
}
|
||||
.tag {
|
||||
width: 61upx;
|
||||
height: 27upx;
|
||||
background-color: #52a2de;
|
||||
color: white;
|
||||
line-height: 27upx;
|
||||
text-align: center;
|
||||
font-size: 16upx;
|
||||
font-weight: bold;
|
||||
margin-left: 21upx;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #ea2544;
|
||||
font-size: 36upx;
|
||||
margin-left: 18upx;
|
||||
.money{
|
||||
position: relative;
|
||||
top: 25upx;
|
||||
}
|
||||
.moneyicon {
|
||||
font-size: 19upx;
|
||||
}
|
||||
.btn {
|
||||
width: 158upx;
|
||||
height: 53upx;
|
||||
font-size: 26upx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 53upx;
|
||||
background-color: #df3348;
|
||||
border-radius: 27upx;
|
||||
position: relative;
|
||||
top: 10upx;
|
||||
right:-15upx;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #666666;
|
||||
// margin-left: 23upx;
|
||||
// margin-top: 10upx;
|
||||
position: relative;
|
||||
left: 23upx;
|
||||
top: 11upx;
|
||||
.huaxian {
|
||||
font-size: 18upx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.sale {
|
||||
font-size: 20upx;
|
||||
font-size: bold;
|
||||
display: flex;
|
||||
.schedule {
|
||||
width: 158upx;
|
||||
height: 15upx;
|
||||
background-color: rgba(252, 233, 237, 1);
|
||||
margin-top:10upx;
|
||||
margin-right: 54upx;
|
||||
margin-left: 7upx;
|
||||
border-radius: 8upx;
|
||||
.progress {
|
||||
height: 100%;
|
||||
background-color: rgba(236, 153, 163, 1);
|
||||
border-radius: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
src/components/seckill/seckilltittle.vue
Normal file
62
src/components/seckill/seckilltittle.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="seckillTittle">
|
||||
<view class="left">{{show == 0 ? '抢购中 先到先得哦':'未开始 请耐心等待'}}</view>
|
||||
<view class="right">
|
||||
<view class="text">{{show == 0 ? '据结束' : '待抢购'}}</view>
|
||||
<view class="djs">
|
||||
<countdown
|
||||
:hour="date[0]"
|
||||
:minute="date[1]"
|
||||
:second="date[2]"></countdown>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countdown from "./countdown"
|
||||
export default {
|
||||
name: "seckillTittle",
|
||||
components:{
|
||||
countdown
|
||||
},
|
||||
props:['date','show']
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.seckillTittle {
|
||||
width: 702upx;
|
||||
height: 39upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
color: #333333;
|
||||
font-size: 22upx;
|
||||
font-weight: 800;
|
||||
}
|
||||
.right {
|
||||
width: 254upox;
|
||||
height: 39upx;
|
||||
display: flex;
|
||||
font-weight: 800;
|
||||
line-height: 39upx;
|
||||
.text {
|
||||
width: 96upx;
|
||||
height: 39upx;
|
||||
background-color: #df3348;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 22upx;
|
||||
}
|
||||
.djs {
|
||||
width: 158upx;
|
||||
text-align: center;
|
||||
color: #df3348;
|
||||
font-size: 24upx;
|
||||
background-color: #F9EBEA;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
464
src/components/serchshaixuan/serchshaixuan.vue
Normal file
464
src/components/serchshaixuan/serchshaixuan.vue
Normal file
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<view>
|
||||
<slot>
|
||||
<view class="index-title">A</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">B</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">C</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">D</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">E</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">F</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">G</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">H</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">I</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">J</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">K</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">L</view>
|
||||
<view class="c">
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-title">M</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">N</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">O</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">P</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">Q</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">R</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">S</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">T</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">U</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">V</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">W</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">X</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">Y</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
<view class="index-title">Z</view>
|
||||
<view class="c">
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
<serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
|
||||
</view>
|
||||
</slot>
|
||||
<view @touchmove.stop="a" @touchstart.stop="b" class="i-index-fixed">
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">A</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">B</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">C</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">B</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">D</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">E</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">F</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">G</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">H</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">I</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">J</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">K</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">L</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">M</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">N</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">O</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">P</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">Q</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">R</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">S</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">T</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">U</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">V</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">W</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">X</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">Y</view>
|
||||
<view catchtap="handlerFixedTap" class="i-index-fixed-item">Z</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchShuru from "../../components/search/searchShuru";
|
||||
import xzcxlistTitle from "../../components/xzcxlist/xzcxlist-title";
|
||||
import xzcxlistIcon from "../../components/xzcxlist/xzcxlist-icon";
|
||||
import xzcxlistIconList from "../../components/xzcxlist/xzcxlist-iconlist";
|
||||
import xzcxlistCars from "../../components/xzcxlist/xzcxlist-cars";
|
||||
import serchshaixuanitem from "../../components/serchshaixuan/serchshaixuanitem";
|
||||
export default {
|
||||
name: "test",
|
||||
components: {
|
||||
searchShuru,
|
||||
xzcxlistTitle,
|
||||
xzcxlistIcon,
|
||||
xzcxlistIconList,
|
||||
xzcxlistCars,
|
||||
serchshaixuanitem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dange: 0,
|
||||
height: "",
|
||||
top: "",
|
||||
dange: "",
|
||||
rect: []
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
this.huoqu();
|
||||
},
|
||||
methods: {
|
||||
a: function(a) {
|
||||
console.log(a);
|
||||
this.jisuan(a.touches[0].clientY - this.top);
|
||||
},
|
||||
b: function(a) {
|
||||
console.log(a);
|
||||
this.jisuan(a.touches[0].clientY - this.top);
|
||||
},
|
||||
huoqu() {
|
||||
var query = uni.createSelectorQuery().in(this);
|
||||
//选择id
|
||||
var that = this;
|
||||
query
|
||||
.select(".i-index-fixed")
|
||||
.boundingClientRect(rect => {
|
||||
console.log(rect, 1);
|
||||
if (rect == null) {
|
||||
this.$nextTick(() => {
|
||||
this.huoqu();
|
||||
});
|
||||
}
|
||||
|
||||
var dan = Math.floor(rect.height / 26);
|
||||
console.log(dan, 123);
|
||||
|
||||
(that.height = rect.height), console.log(that.height);
|
||||
(that.top = Math.floor(rect.top) - 6), (that.dange = dan);
|
||||
})
|
||||
.exec();
|
||||
query
|
||||
.selectAll(".index-title")
|
||||
.boundingClientRect(rect => {
|
||||
console.log(rect, 1);
|
||||
this.rect = rect;
|
||||
})
|
||||
.exec();
|
||||
// i-index-line
|
||||
},
|
||||
// c: function (a) {
|
||||
// console.log(a);
|
||||
// this.jisuan(a.target.offsetTop)
|
||||
// },
|
||||
|
||||
jisuan: function(a) {
|
||||
var c = Math.floor(a / this.dange);
|
||||
console.log(c,1232333)
|
||||
// console.log(Math.floor(a / this.data.dange))
|
||||
var z = "";
|
||||
switch (c) {
|
||||
case 1:
|
||||
z = "A";
|
||||
break;
|
||||
case 2:
|
||||
z = "B";
|
||||
break;
|
||||
case 3:
|
||||
z = "C";
|
||||
break;
|
||||
case 4:
|
||||
z = "D";
|
||||
break;
|
||||
case 5:
|
||||
z = "E";
|
||||
break;
|
||||
case 6:
|
||||
z = "F";
|
||||
break;
|
||||
case 7:
|
||||
z = "G";
|
||||
break;
|
||||
case 8:
|
||||
z = "H";
|
||||
break;
|
||||
case 9:
|
||||
z = "I";
|
||||
break;
|
||||
case 10:
|
||||
z = "J";
|
||||
break;
|
||||
case 11:
|
||||
z = "K";
|
||||
break;
|
||||
case 12:
|
||||
z = "L";
|
||||
break;
|
||||
case 13:
|
||||
z = "M";
|
||||
break;
|
||||
case 14:
|
||||
z = "N";
|
||||
break;
|
||||
case 15:
|
||||
z = "O";
|
||||
break;
|
||||
case 16:
|
||||
z = "P";
|
||||
break;
|
||||
case 17:
|
||||
z = "Q";
|
||||
break;
|
||||
case 18:
|
||||
z = "R";
|
||||
break;
|
||||
case 19:
|
||||
z = "S";
|
||||
break;
|
||||
case 20:
|
||||
z = "T";
|
||||
break;
|
||||
case 21:
|
||||
z = "U";
|
||||
break;
|
||||
case 22:
|
||||
z = "V";
|
||||
break;
|
||||
case 23:
|
||||
z = "W";
|
||||
break;
|
||||
case 24:
|
||||
z = "X";
|
||||
break;
|
||||
case 25:
|
||||
z = "Y";
|
||||
break;
|
||||
case 26:
|
||||
z = "Z";
|
||||
break;
|
||||
}
|
||||
var that = this;
|
||||
|
||||
uni.pageScrollTo({
|
||||
duration: 0,
|
||||
scrollTop: that.rect[c].top - 140
|
||||
});
|
||||
|
||||
console.log(z);
|
||||
if (z) {
|
||||
wx.showToast({
|
||||
title: z,
|
||||
|
||||
icon: "none",
|
||||
|
||||
duration: 2000 //持续的时间
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.serch {
|
||||
position: relative;
|
||||
top: 17upx;
|
||||
}
|
||||
.i-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.i-index-line {
|
||||
width: 80%;
|
||||
height: 2rpx;
|
||||
background-color: #f7f7f7;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.i-index-content {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.i-index-fixed {
|
||||
position: fixed;
|
||||
right: -5upx;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
padding-left: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.i-index-fixed-item {
|
||||
display: block;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
text-align: center;
|
||||
color: #595959;
|
||||
font-size: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.i-index-fixed-item-current {
|
||||
background: #2d8cf0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.i-index-tooltip {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 48rpx;
|
||||
border-radius: 50%;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
line-height: 160rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.local-position-content {
|
||||
height: 160rpx;
|
||||
padding-left: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.local-position-content span {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #ff5344;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.index-title {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 26rpx;
|
||||
padding-left: 40rpx;
|
||||
color: #999;
|
||||
background: #f6f6f6;
|
||||
position: relative;
|
||||
top: 32upx;
|
||||
}
|
||||
.c {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
/* height: 140rpx; */
|
||||
font-size: 32rpx;
|
||||
/* padding-left: 40rpx; */
|
||||
position: relative;
|
||||
top: 44upx;
|
||||
}
|
||||
.c span {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
.b {
|
||||
display: block;
|
||||
}
|
||||
.router-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
28
src/components/serchshaixuan/serchshaixuanitem.vue
Normal file
28
src/components/serchshaixuan/serchshaixuanitem.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="serchshaixuanitem">
|
||||
{{carname}}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"serchshiaxuanitem",
|
||||
props:{
|
||||
carname:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.serchshaixuanitem{
|
||||
height:85upx;
|
||||
width: 100%;
|
||||
background-color:white;
|
||||
line-height: 85upx;
|
||||
text-indent:22upx;
|
||||
color: #333333;
|
||||
font-size:24upx;
|
||||
}
|
||||
</style>
|
||||
120
src/components/shaixuan/shaixuan-choice1.vue
Normal file
120
src/components/shaixuan/shaixuan-choice1.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view class="shaixuanChoice">
|
||||
<view class="left">
|
||||
<view @click="selected">
|
||||
<img :src="pic" alt class="select" />
|
||||
<text class="zi">置顶原配轮胎</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mid" @click="tj">
|
||||
<text :class="midtext">推荐排序</text>
|
||||
<img :src="xiala" alt class="xiala" />
|
||||
</view>
|
||||
<view class="right" @click="shaixuan">
|
||||
<text class="righttext">筛选</text>
|
||||
<img src="../../static/img/shaixuan.png" alt class="xiala" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shaixuanChoice",
|
||||
data() {
|
||||
return {
|
||||
pic: "../../static/img/select.png",
|
||||
ifselect: false,
|
||||
midtext: "midtext",
|
||||
xiala:"../../static/img/xiala.png",
|
||||
iftj:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
radioChange(e) {
|
||||
console.log(e);
|
||||
this.select = !e.detail.value;
|
||||
},
|
||||
selected() {
|
||||
this.pic =
|
||||
this.pic == "../../static/img/select.png"
|
||||
? "../../static/img/selected.png"
|
||||
: "../../static/img/select.png";
|
||||
this.ifselect = this.ifselect == false ? true : false;
|
||||
console.log(this.ifselect);
|
||||
},
|
||||
tj(){
|
||||
this.midtext=this.midtext=="midtext"?"midtext active":"midtext"
|
||||
this.xiala=this.xiala=="../../static/img/xiala.png"?"../../static/img/xialared.png":"../../static/img/xiala.png"
|
||||
this.iftj = this.iftj == false ? true : false;
|
||||
this.$emit("tuijian",this.iftj)
|
||||
},
|
||||
shaixuan(){
|
||||
this.$emit('ifsx',true)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shaixuanChoice {
|
||||
width: 100%;
|
||||
height: 78upx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1upx solid #efefef;
|
||||
.left {
|
||||
width: 267upx;
|
||||
text-align: center;
|
||||
color: #545454;
|
||||
font-size: 26upx;
|
||||
line-height: 78upx;
|
||||
.select {
|
||||
width: 28upx;
|
||||
height: 28upx;
|
||||
margin: auto 0;
|
||||
position: relative;
|
||||
top: 5upx;
|
||||
}
|
||||
.zi {
|
||||
margin-left: 22upx;
|
||||
}
|
||||
}
|
||||
.mid {
|
||||
width: 280upx;
|
||||
height: 43upx;
|
||||
margin: auto 0;
|
||||
color: #545454;
|
||||
border-left: 1upx solid #efefef;
|
||||
border-right: 1upx solid #efefef;
|
||||
text-align: center;
|
||||
line-height: 43upx;
|
||||
.midtext {
|
||||
font-size: 26upx;
|
||||
}
|
||||
.xiala {
|
||||
width: 24upx;
|
||||
height: 14upx;
|
||||
margin-left: 14upx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 202upx;
|
||||
line-height: 78upx;
|
||||
color: #545454;
|
||||
.righttext {
|
||||
font-size: 26upx;
|
||||
margin-left: 34upx;
|
||||
}
|
||||
.xiala {
|
||||
width: 24upx;
|
||||
height: 24upx;
|
||||
margin-left: 25upx;
|
||||
margin-top: 5upx;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #d35f79;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
src/components/shaixuan/shaixuan-choise.vue
Normal file
47
src/components/shaixuan/shaixuan-choise.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="shaixuanChoice">
|
||||
<view class="carname">江淮安驰-小公主</view>
|
||||
<view class="xiala">
|
||||
<img src="../../static/img/xiala.png" alt="" class="xiala1">
|
||||
</view>
|
||||
<view class="carname">145/70 R12</view>
|
||||
<view class="xiala">
|
||||
<img src="../../static/img/xiala.png" alt="" class="xiala1">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shaixuanChoice"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shaixuanChoice{
|
||||
width: 514upx;
|
||||
height: 22upx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20upx;
|
||||
padding-bottom: 24upx;
|
||||
.carname{
|
||||
color: #545454;
|
||||
font-size: 22upx;
|
||||
line-height: 15upx;
|
||||
}
|
||||
.xiala{
|
||||
width: 24upx;
|
||||
height: 14upx;
|
||||
position: relative;
|
||||
top: -20upx;
|
||||
|
||||
|
||||
.xiala1{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
468
src/components/shaixuan/shaixuan-condition.vue
Normal file
468
src/components/shaixuan/shaixuan-condition.vue
Normal file
@@ -0,0 +1,468 @@
|
||||
<template>
|
||||
<view class="box" v-if="ifcondition" @click="close">
|
||||
<view class="shaixuanCondition">
|
||||
<scroll-view :scroll-y="true" class="scroll-Y" @scroll="scroll" @click.stop="a">
|
||||
<view class="top">
|
||||
<view class="tittle">价格区间(元)</view>
|
||||
<view class="btns">
|
||||
<!-- <view class="btn">最低价</view> -->
|
||||
<input type="text" class="btn" placeholder="最低价" v-model="zdj" />
|
||||
<!-- <view class="line"> -->
|
||||
<img src="../../static/img/shaixuanline.png" alt class="line" />
|
||||
<!-- </view> -->
|
||||
<!-- <view class="btn">最高价</view> -->
|
||||
<input type="text" class="btn" placeholder="最高价" v-model="zgj"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item1">
|
||||
<view class="tittle">品牌</view>
|
||||
<view @click.stop="xl">
|
||||
<img src="../../static/img/xiala.png" alt class="xiala" />
|
||||
</view>
|
||||
<view class="pinpai">
|
||||
<!-- <view class="pinpaiitem" @click="selected">
|
||||
<img src="../../static/img/pinpai.png" alt class="pinpai1" />
|
||||
<view :class="select">倍耐力/Pirelli</view>
|
||||
</view>-->
|
||||
<view class="pinpaiitem" @click="selected" data-key="0">
|
||||
<img :src="pinpai[0].img" alt class="pinpai1" />
|
||||
<view :class="select[0]">{{pinpai[0].desc}}</view>
|
||||
</view>
|
||||
<view class="pinpaiitem" @click="selected" data-key="1">
|
||||
<img :src="pinpai[1].img" alt class="pinpai1" />
|
||||
<view :class="select[1]">{{pinpai[1].desc}}</view>
|
||||
</view>
|
||||
<view class="pinpaiitem" @click="selected" data-key="2">
|
||||
<img :src="pinpai[2].img" alt class="pinpai1" />
|
||||
<view :class="select[2]">{{pinpai[2].desc}}</view>
|
||||
</view>
|
||||
<view class="pinpai" v-if="ifxl">
|
||||
<view
|
||||
class="pinpaiitem"
|
||||
@click="selected"
|
||||
v-for="(item,index) in pinpai1"
|
||||
:key="item.id"
|
||||
:data-key="index+3"
|
||||
>
|
||||
<img :src="item.img" alt class="pinpai1" />
|
||||
<view :class="select[index+3]">{{item.desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="line"></view> -->
|
||||
</view>
|
||||
|
||||
<view class="item2">
|
||||
<view class="tittle">花纹性能</view>
|
||||
<view @click="xlck">
|
||||
<img src="../../static/img/xiala.png" alt class="xiala" />
|
||||
</view>
|
||||
<view class="xingneng1">
|
||||
<view :class="xzxn[0]" @click="xingnengxz" data-key="0">{{xingneng[0].desc}}</view>
|
||||
<view :class="xzxn[1]" @click="xingnengxz" data-key="1">{{xingneng[1].desc}}</view>
|
||||
<view :class="xzxn[2]" @click="xingnengxz" data-key="2">{{xingneng[2].desc}}</view>
|
||||
<view class="xingneng2" v-if="ifxlck">
|
||||
<view
|
||||
:class="xzxn[index+3]"
|
||||
v-for="(item,index) in xingneng1"
|
||||
:key="item.id"
|
||||
@click="xingnengxz"
|
||||
:data-key="index+3"
|
||||
>操控</view>
|
||||
<!-- <view class="xingneng">操控</view>
|
||||
<view class="xingneng">操控</view>
|
||||
<view class="xingneng">操控</view>-->
|
||||
</view>
|
||||
|
||||
<!-- </view> -->
|
||||
<!-- </view> -->
|
||||
<!-- <view class="line"></view> -->
|
||||
</view>
|
||||
|
||||
<view class="item2">
|
||||
<view class="tittle">速度级别</view>
|
||||
<view @click="xlsd">
|
||||
<img src="../../static/img/xiala.png" alt class="xiala" />
|
||||
</view>
|
||||
<view class="xingneng1">
|
||||
<view :class="suduxz[0]" @click="speed" data-key="0">{{sudu[0].desc}}</view>
|
||||
<view :class="suduxz[1]" @click="speed" data-key="1">{{sudu[1].desc}}</view>
|
||||
<view :class="suduxz[2]" @click="speed" data-key="2">{{sudu[2].desc}}</view>
|
||||
<view class="xingneng2" v-if="ifxlsd">
|
||||
<view
|
||||
:class="suduxz[index+3]"
|
||||
v-for="(item,index) in sudu1"
|
||||
:key="item.id"
|
||||
@click="speed"
|
||||
:data-key="index+3"
|
||||
>{{item.desc}}</view>
|
||||
<!-- <view class="xingneng">H</view>
|
||||
<view class="xingneng">Q</view>
|
||||
<view class="xingneng">M</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="line"></view> -->
|
||||
</view>
|
||||
|
||||
<view class="switch">
|
||||
<view class="left">仅查看防爆胎</view>
|
||||
<view class="right">
|
||||
<switch :checked="switch1" @change="switch1Change" style="transform:scale(0.9)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="switch">
|
||||
<view class="left">仅查看雪地胎</view>
|
||||
<view class="right">
|
||||
<switch :checked="switch2" @change="switch2Change" style="transform:scale(0.9)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="btn1" @click="reset">重置</view>
|
||||
<view class="btn1 btn2">确定</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shaixuanCondition",
|
||||
data() {
|
||||
return {
|
||||
switch1: false,
|
||||
switch2: false,
|
||||
ifxl: false,
|
||||
ifxlck: false,
|
||||
ifxlsd: false,
|
||||
select: [],
|
||||
pinpai: [
|
||||
{ id: 1, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
|
||||
{ id: 2, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
|
||||
{ id: 3, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
|
||||
{ id: 4, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
|
||||
{ id: 5, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
|
||||
{ id: 6, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" }
|
||||
],
|
||||
pinpai1: [],
|
||||
xingneng: [
|
||||
{ id: 1, desc: "操控" },
|
||||
{ id: 2, desc: "操控" },
|
||||
{ id: 3, desc: "操控" },
|
||||
{ id: 4, desc: "操控" },
|
||||
{ id: 5, desc: "操控" },
|
||||
{ id: 6, desc: "操控" }
|
||||
],
|
||||
xingneng1: [],
|
||||
xzxn: [],
|
||||
sudu: [
|
||||
{ id: 1, desc: "Q" },
|
||||
{ id: 2, desc: "W" },
|
||||
{ id: 3, desc: "E" },
|
||||
{ id: 4, desc: "R" },
|
||||
{ id: 5, desc: "M" },
|
||||
{ id: 6, desc: "S" }
|
||||
],
|
||||
sudu1: [],
|
||||
suduxz: [],
|
||||
zgj:"",
|
||||
zdj:""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.pinpai1 = this.pinpai.slice(3, this.pinpai.length);
|
||||
this.xingneng1 = this.xingneng.slice(3, this.xingneng.length);
|
||||
this.sudu1 = this.sudu.slice(3, this.sudu.length);
|
||||
for (var i in this.pinpai) {
|
||||
this.select.push("desc");
|
||||
}
|
||||
for (var i in this.xingneng) {
|
||||
this.xzxn.push("xingneng");
|
||||
}
|
||||
for (var i in this.sudu) {
|
||||
this.suduxz.push("xingneng");
|
||||
}
|
||||
console.log(this.suduxz);
|
||||
},
|
||||
props: {
|
||||
ifcondition: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switch1Change(e) {
|
||||
this.switch1 = e.detail.value;
|
||||
},
|
||||
switch2Change(e) {
|
||||
this.switch2 = e.detail.value;
|
||||
},
|
||||
xl() {
|
||||
this.ifxl = this.ifxl == false ? true : false;
|
||||
},
|
||||
xlck() {
|
||||
console.log(111);
|
||||
this.ifxlck = this.ifxlck == false ? true : false;
|
||||
},
|
||||
xlsd() {
|
||||
this.ifxlsd = this.ifxlsd == false ? true : false;
|
||||
},
|
||||
close() {
|
||||
console.log(7946);
|
||||
this.$emit("condition", false);
|
||||
},
|
||||
scroll() {},
|
||||
a() {},
|
||||
selected(e) {
|
||||
this.select = [];
|
||||
console.log(e.currentTarget.dataset.key);
|
||||
for (var i in this.pinpai) {
|
||||
this.select.push("desc");
|
||||
}
|
||||
this.select[e.currentTarget.dataset.key] =
|
||||
this.select[e.currentTarget.dataset.key] == "desc" ? "active" : "desc";
|
||||
// this.select = this.select == "desc" ? "active" : "desc";
|
||||
},
|
||||
xingnengxz(e) {
|
||||
this.xzxn = [];
|
||||
console.log(e.currentTarget.dataset.key);
|
||||
for (var i in this.pinpai) {
|
||||
this.xzxn.push("xingneng");
|
||||
}
|
||||
this.xzxn[e.currentTarget.dataset.key] =
|
||||
this.xzxn[e.currentTarget.dataset.key] == "xingneng"
|
||||
? "xingnengxz"
|
||||
: "xingneng";
|
||||
// this.select = this.select == "desc" ? "active" : "desc";
|
||||
},
|
||||
speed(e) {
|
||||
this.suduxz = [];
|
||||
console.log(e.currentTarget.dataset.key);
|
||||
for (var i in this.pinpai) {
|
||||
this.suduxz.push("xingneng");
|
||||
}
|
||||
this.suduxz[e.currentTarget.dataset.key] =
|
||||
this.suduxz[e.currentTarget.dataset.key] == "xingneng"
|
||||
? "xingnengxz"
|
||||
: "xingneng";
|
||||
// this.select = this.select == "desc" ? "active" : "desc";
|
||||
},
|
||||
reset() {
|
||||
this.switch1 = false;
|
||||
this.switch2 = false;
|
||||
this.select=[];
|
||||
this.xzxn=[];
|
||||
this.suduxz=[];
|
||||
this.zgj="",
|
||||
this.zdj=""
|
||||
for (var i in this.pinpai) {
|
||||
this.select.push("desc");
|
||||
}
|
||||
for (var i in this.xingneng) {
|
||||
this.xzxn.push("xingneng");
|
||||
}
|
||||
for (var i in this.sudu) {
|
||||
this.suduxz.push("xingneng");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0upx;
|
||||
z-index: 999;
|
||||
background-color: rgba(119, 119, 119, 0.08);
|
||||
}
|
||||
.shaixuanCondition {
|
||||
width: 601upx;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 220upx;
|
||||
z-index: 999;
|
||||
float: right;
|
||||
.tittle {
|
||||
font-size: 26upx;
|
||||
text-indent: 39upx;
|
||||
margin-top: 32upx;
|
||||
margin-bottom: 41upx;
|
||||
}
|
||||
.top {
|
||||
height: 177upx;
|
||||
border-bottom: 2upx solid #dadada;
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.btn {
|
||||
width: 219upx;
|
||||
height: 56upx;
|
||||
color: #666666;
|
||||
font-size: 26upx;
|
||||
text-align: center;
|
||||
line-height: 56upx;
|
||||
background: rgba(248, 248, 248, 1);
|
||||
border: 2upx solid rgba(218, 218, 218, 1);
|
||||
}
|
||||
.line {
|
||||
width: 31upx;
|
||||
height: 4upx;
|
||||
.line1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item1 {
|
||||
// height: 236upx;
|
||||
border-bottom: 2upx solid #dadada;
|
||||
.xiala {
|
||||
width: 30upx;
|
||||
height: 16upx;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: -60upx;
|
||||
right: 34upx;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2upx;
|
||||
position: relative;
|
||||
top: -15upx;
|
||||
background-color: #dadada;
|
||||
}
|
||||
.pinpai {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
top: 4upx;
|
||||
.pinpaiitem {
|
||||
width: 166upx;
|
||||
height: 102upx;
|
||||
margin-bottom: 30upx;
|
||||
.pinpai1 {
|
||||
width: 166upx;
|
||||
height: 72upx;
|
||||
}
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 20upx;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
color: #dc3547;
|
||||
font-size: 20upx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item2 {
|
||||
// height: 183upx;
|
||||
border-bottom: 2upx solid #dadada;
|
||||
.xiala {
|
||||
width: 30upx;
|
||||
height: 16upx;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: -60upx;
|
||||
right: 34upx;
|
||||
}
|
||||
}
|
||||
.xingneng {
|
||||
width: 161upx;
|
||||
height: 61upx;
|
||||
color: #777777;
|
||||
font-size: 30upx;
|
||||
text-align: center;
|
||||
line-height: 61upx;
|
||||
margin-bottom: 25upx;
|
||||
border: 1upx solid #dadada;
|
||||
}
|
||||
.switch {
|
||||
height: 126upx;
|
||||
line-height: 126upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.left {
|
||||
color: #000000;
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2upx;
|
||||
background-color: #dadada;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.btn1 {
|
||||
width: 300upx;
|
||||
height: 108upx;
|
||||
border: 2upx solid #eeeeee;
|
||||
color: #666666;
|
||||
font-size: 30upx;
|
||||
margin-top: 35upx;
|
||||
line-height: 108upx;
|
||||
text-align: center;
|
||||
}
|
||||
.btn2 {
|
||||
background-color: #dc3547;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.xingneng1 {
|
||||
// position: relative;
|
||||
// top:12upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.scroll-Y {
|
||||
height: 1100upx;
|
||||
}
|
||||
.xingneng2 {
|
||||
width: 100%;
|
||||
margin-left: 5upx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
.xingneng {
|
||||
width: 161upx;
|
||||
height: 61upx;
|
||||
color: #777777;
|
||||
font-size: 30upx;
|
||||
text-align: center;
|
||||
line-height: 61upx;
|
||||
margin-bottom: 25upx;
|
||||
border: 1upx solid #dadada;
|
||||
margin-right: 5upx;
|
||||
// margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
.xingnengxz {
|
||||
width: 161upx;
|
||||
height: 61upx;
|
||||
color: white;
|
||||
font-size: 30upx;
|
||||
text-align: center;
|
||||
line-height: 61upx;
|
||||
margin-bottom: 25upx;
|
||||
border: 1upx solid #dadada;
|
||||
margin-right: 5upx;
|
||||
background-color: #dc3547;
|
||||
// margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
src/components/shaixuan/shaixuan-null.vue
Normal file
31
src/components/shaixuan/shaixuan-null.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<view class="shaixuannull">
|
||||
<img src="../../static/img/shaixuannull.png" alt="" class="null">
|
||||
<view class="desc">没有符合当前筛选条件的轮胎</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shaixuannull"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shaixuannull{
|
||||
width: 750upx;
|
||||
.null{
|
||||
width: 276upx;
|
||||
height: 332upx;
|
||||
margin: 0 auto;
|
||||
margin-left: 236upx;
|
||||
margin-top: 123upx;
|
||||
}
|
||||
.desc{
|
||||
color: #999999;
|
||||
font-size: 24upx;
|
||||
text-align:center;
|
||||
margin-top: 61upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
src/components/shaixuan/shaixuan-top.vue
Normal file
21
src/components/shaixuan/shaixuan-top.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<view class="shaixuanTop">145/70R12</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shaixuanTop"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shaixuanTop {
|
||||
height: 167upx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
line-height: 176upx;
|
||||
color: #222222;
|
||||
font-size: 37upx;
|
||||
}
|
||||
</style>
|
||||
54
src/components/shaixuan/shaixuantj.vue
Normal file
54
src/components/shaixuan/shaixuantj.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="box" v-if="iftj" v-on:click="off">
|
||||
<view class="item">推荐排序</view>
|
||||
<view class="line"></view>
|
||||
<view class="item">销量由低到高</view>
|
||||
<view class="line"></view>
|
||||
<view class="item">价格由低到高</view>
|
||||
<view class="line"></view>
|
||||
<view class="item">价格由高到低</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shaixuantj",
|
||||
props:{
|
||||
iftj:{
|
||||
type:Boolean,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
off(){
|
||||
this.iftj=this.iftj==false?true:false
|
||||
this.$emit("tuijian",this.iftj)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 82vh;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
background-color: rgba(119, 119, 119, 0.3);
|
||||
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 85upx;
|
||||
background-color: white;
|
||||
color: #333333;
|
||||
font-size:24upx;
|
||||
line-height: 85upx;
|
||||
text-indent: 34upx;
|
||||
}
|
||||
.line {
|
||||
width: 696upx;
|
||||
height: 1upx;
|
||||
margin:auto 0;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
}
|
||||
</style>
|
||||
38
src/components/shopdetail/shopdetai-allcomments.vue
Normal file
38
src/components/shopdetail/shopdetai-allcomments.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="shopdetailAllcomments" @click="allcomments">
|
||||
查看全部评价（99+)
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailAllcomments",
|
||||
props:{
|
||||
num:{
|
||||
type:Number
|
||||
},
|
||||
shopid:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
allcomments(){
|
||||
console.log(this.shopid)
|
||||
uni.navigateTo({
|
||||
url:"/pages/assess/assess?shopid="+this.shopid
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailAllcomments{
|
||||
height: 95upx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #686868;
|
||||
font-size: 30upx;
|
||||
line-height: 95upx;
|
||||
}
|
||||
</style>
|
||||
42
src/components/shopdetail/shopdetail-attr.vue
Normal file
42
src/components/shopdetail/shopdetail-attr.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<view class="shopdetailAttr">
|
||||
<view class="left">{{left}}</view>
|
||||
<view class="right">{{right}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailAttr",
|
||||
props:{
|
||||
left:{
|
||||
type:String
|
||||
},
|
||||
right:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailAttr{
|
||||
height:84upx;
|
||||
display: flex;
|
||||
font-size: 22upx;
|
||||
border:1upx solid rgba(222,222,222,1);
|
||||
.left{
|
||||
width: 204upx;
|
||||
height: 100%;
|
||||
background-color: #F7F7F7;
|
||||
line-height:84upx;
|
||||
text-align: center;
|
||||
color: #888888;
|
||||
}
|
||||
.right{
|
||||
line-height:84upx;
|
||||
text-align: center;
|
||||
text-indent:30upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
src/components/shopdetail/shopdetail-bottom.vue
Normal file
98
src/components/shopdetail/shopdetail-bottom.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="shopdetailbottom">
|
||||
<!-- <view class="item">
|
||||
<img src="../../static/img/phone.png" alt="" class="itempic">
|
||||
<view>电话咨询</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<img src="../../static/img/kefu.png" alt="" class="itempic">
|
||||
<view>在线客服</view>
|
||||
</view> -->
|
||||
<!-- <view class="item">
|
||||
<img src="../../static/img/shoucang.png" alt="" class="itempic">
|
||||
<view>收藏</view>
|
||||
</view> -->
|
||||
<view class="btn2" @click="buy" v-if="shoptype==1">加入购物车</view>
|
||||
<view class="btn1" @click="buy" v-if="shoptype==1">立即购买</view>
|
||||
<view class="btn3" @click="buy" v-else>立即购买</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"shopdetailbottom",
|
||||
props:{
|
||||
shoptype:{
|
||||
type:Number
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
buy(){
|
||||
this.$emit('buy',true)
|
||||
},
|
||||
gwc(){
|
||||
// this.$emit("gwc",true)
|
||||
console.log(this.shopid,this.shoptype)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailbottom{
|
||||
height: 129upx;
|
||||
width:100%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content:space-around;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
.item{
|
||||
// width: 76upx;
|
||||
height: 76upx;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
font-size: 20upx;
|
||||
margin: auto 0;
|
||||
.itempic{
|
||||
width: 49upx;
|
||||
height: 49upx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.btn1{
|
||||
width: 352upx;
|
||||
height: 83upx;
|
||||
background-color: #DE3548;
|
||||
color: white;
|
||||
font-size: 30upx;
|
||||
line-height: 83upx;
|
||||
text-align: center;
|
||||
margin: auto 0;
|
||||
}
|
||||
.btn2{
|
||||
width: 325upx;
|
||||
height: 72upx;
|
||||
border: 1upx solid #de3449;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
color: #de3449;
|
||||
line-height: 72upx;
|
||||
text-align: center;
|
||||
}
|
||||
.btn3 {
|
||||
width: 600upx;
|
||||
height: 72upx;
|
||||
background-color: #de3449;
|
||||
// border:1upx solid #DE3449;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
color: white;
|
||||
line-height: 72upx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
src/components/shopdetail/shopdetail-btn.vue
Normal file
49
src/components/shopdetail/shopdetail-btn.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="shopdetailBtn">
|
||||
<view class="btn1" v-if="ifsp">{{btn1}}</view>
|
||||
<view class="btn2" v-else>{{btn1}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shopdetailBtn",
|
||||
props: {
|
||||
ifsp: {
|
||||
type: Boolean
|
||||
},
|
||||
btn1: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailBtn {
|
||||
.btn1 {
|
||||
width: 95upx;
|
||||
height: 44upx;
|
||||
font-size: 24upx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 22upx;
|
||||
background-color: #df3348;
|
||||
line-height: 44upx;
|
||||
}
|
||||
.btn2 {
|
||||
width: 95upx;
|
||||
height: 44upx;
|
||||
font-size: 24upx;
|
||||
color: #444444;
|
||||
text-align: center;
|
||||
border-radius: 22upx;
|
||||
line-height: 44upx;
|
||||
border: 2upx solid rgba(247, 239, 239, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
554
src/components/shopdetail/shopdetail-choosesize.vue
Normal file
554
src/components/shopdetail/shopdetail-choosesize.vue
Normal file
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<view class="box" v-if="ifchoose" @click="close">
|
||||
<view class="choosesize" @click.stop="a">
|
||||
<scroll-view :scroll-y="true" class="scroll-Y" @scroll="scroll" @click.stop="a">
|
||||
<view class="top">
|
||||
<!-- <view> -->
|
||||
<img :src="shoppic" alt class="shoppic" />
|
||||
<view class="btn1" v-if="renshu!=0">{{renshu}}人团</view>
|
||||
<view class="price">
|
||||
<view class="money">￥{{price}}</view>
|
||||
<view class="huaxian">￥{{huaxian}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- </view> -->
|
||||
<view class="line"></view>
|
||||
<view v-for="(i,j) in tags" :key="j">
|
||||
<view class="title">{{i.guige_name}}</view>
|
||||
<view class="tags">
|
||||
<view
|
||||
v-for="(item,key) in i.guige_val_list"
|
||||
:key="key"
|
||||
:class="tag[j][key]"
|
||||
@click="xztag(j,key)"
|
||||
>{{item}}</view>
|
||||
<!-- <view :class="tag[1]" @click="xztag" data-no="1">儒雅黑</view>
|
||||
<view :class="tag[2]" @click="xztag" data-no="2">儒雅黑</view>
|
||||
<view :class="tag[3]" @click="xztag" data-no="3">儒雅黑</view>
|
||||
<view :class="tag[4]" @click="xztag" data-no="4">儒雅黑</view>
|
||||
<view :class="tag[5]" @click="xztag" data-no="5">儒雅黑</view>-->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="number">
|
||||
<view class="title">
|
||||
<text class="zi">数量</text>
|
||||
</view>
|
||||
<view class="numbox">
|
||||
<view class="num">
|
||||
<view class="reverse" @click="reverse">
|
||||
<img src="../../static/img/reverse.png" alt class="icon" />
|
||||
</view>
|
||||
<view class="shuliang">{{num}}</view>
|
||||
<view class="reverse" @click="add">
|
||||
<img src="../../static/img/add1.png" alt class="icon1" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<view class="btns" v-if="shoptype==0">
|
||||
<view class="btn1" @click="gwc">加入购物车</view>
|
||||
<view class="btn2" @click="buy">立即购买</view>
|
||||
</view>
|
||||
<view class="btns" v-else-if="shoptype==2">
|
||||
<view class="btn3" @click="buy1">立即购买</view>
|
||||
</view>
|
||||
<view class="btns" v-else-if="shoptype==4">
|
||||
<view class="btn3" @click="buy1">立即购买</view>
|
||||
</view>
|
||||
<view class="btns" v-else>
|
||||
<view class="btn3" @click="buy">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { requestP } from "../../static/js/request";
|
||||
export default {
|
||||
name: "choosesize",
|
||||
data() {
|
||||
return {
|
||||
tag: [],
|
||||
num: 1,
|
||||
typestr: []
|
||||
};
|
||||
},
|
||||
props: {
|
||||
ifchoose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
renshu: {
|
||||
type: Number
|
||||
},
|
||||
shoppic: {
|
||||
type: String
|
||||
},
|
||||
price: {
|
||||
type: Number
|
||||
},
|
||||
huaxian: {
|
||||
type: Number
|
||||
},
|
||||
tags: {
|
||||
// type:Array
|
||||
},
|
||||
shopid: {
|
||||
type: Number
|
||||
},
|
||||
shoptype: {
|
||||
type: Number
|
||||
},
|
||||
msid: {
|
||||
type: Number
|
||||
},
|
||||
max: {
|
||||
type: Number
|
||||
},
|
||||
kucun: {
|
||||
type: Number
|
||||
},
|
||||
ptid:{
|
||||
type:Number
|
||||
},
|
||||
ptorderid:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
a() {},
|
||||
xztag(e, f) {
|
||||
for (let i in this.tags) {
|
||||
if (e == i) {
|
||||
for (let j in this.tags[i].guige_val_list) {
|
||||
// this.tag[i][j] = j == f ? "tag1" : "tag"
|
||||
this.$set(this.tag[i], j, j == f ? "tag1" : "tag");
|
||||
// this.$set(this.typestr[i],j-1,this.tags[e].guige_name)
|
||||
// this.$set(this.typestr[i],j,this.tags[e].guige_val_list[f])
|
||||
}
|
||||
for (let m = 0; m < this.typestr.length; m++) {
|
||||
if (e == m) {
|
||||
// console.log("qwer")
|
||||
// console.log(e,i,m)
|
||||
this.$set(this.typestr[i], 0, this.tags[i].guige_name + ":");
|
||||
this.$set(this.typestr[i], 1, this.tags[e].guige_val_list[f]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(this.typestr.join(','),2000)
|
||||
this.$emit("tagchange", this.typestr.join(","));
|
||||
},
|
||||
reverse() {
|
||||
if (this.num <= 1) {
|
||||
this.num = 1;
|
||||
} else {
|
||||
this.num = this.num - 1;
|
||||
}
|
||||
},
|
||||
add() {
|
||||
if (this.shoptype == 0) {
|
||||
console.log(this.kucun, "kucun");
|
||||
if (this.num >= this.kucun) {
|
||||
this.num = this.kucun;
|
||||
} else {
|
||||
this.num = this.num + 1;
|
||||
}
|
||||
} else if (this.shoptype == 1) {
|
||||
console.log(this.max, "max");
|
||||
if (this.num >= this.max) {
|
||||
this.num = this.max;
|
||||
} else {
|
||||
this.num = this.num + 1;
|
||||
}
|
||||
}else if (this.shoptype == 2) {
|
||||
console.log(this.kucun, "kucun");
|
||||
if (this.num >= this.kucun) {
|
||||
this.num = this.kucun;
|
||||
} else {
|
||||
this.num = this.num + 1;
|
||||
}
|
||||
}
|
||||
// this.num = this.num + 1;
|
||||
},
|
||||
close() {
|
||||
this.$emit("close", false);
|
||||
},
|
||||
scroll() {},
|
||||
gwc() {
|
||||
if (this.shoptype == 0) {
|
||||
requestP({
|
||||
url: "shop_cart/add_cart",
|
||||
data: {
|
||||
goods_id: this.shopid,
|
||||
goods_guige: this.typestr.join(","),
|
||||
num: this.num
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code == 1) {
|
||||
uni.showToast({
|
||||
title: "添加成功",
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/shopping/shopping"
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(this.shopid);
|
||||
}
|
||||
},
|
||||
buy(){
|
||||
|
||||
// console.log(this.typestr.join(","),"jiesuan");
|
||||
if (this.shoptype == 0) {
|
||||
requestP({
|
||||
url: "pay/pay_goods",
|
||||
data: {
|
||||
goods_id: this.shopid,
|
||||
num: this.num
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code) {
|
||||
uni.setStorageSync("ordersubinfo", res.data);
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/order-sub/order-sub?guige=" +
|
||||
this.typestr.join(",") +
|
||||
"&shopid=" +
|
||||
this.shopid +
|
||||
"&num=" +
|
||||
this.num+"&shoptype=0"
|
||||
});
|
||||
}
|
||||
console.log(res.data.code, "code");
|
||||
});
|
||||
} else if (this.shoptype == 1) {
|
||||
requestP({
|
||||
url: "pay/pay_goods",
|
||||
data: {
|
||||
goods_ms_id: this.msid,
|
||||
num: this.num
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code) {
|
||||
uni.setStorageSync("ordersubinfo", res.data);
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/order-sub/order-sub?guige=" +
|
||||
this.typestr.join(",") +
|
||||
"&msid=" +
|
||||
this.msid +
|
||||
"&num=" +
|
||||
this.num+"&shoptype=1"
|
||||
});
|
||||
}
|
||||
console.log(res.data.code, "code");
|
||||
});
|
||||
}
|
||||
|
||||
console.log(this.shopid, this.num);
|
||||
},
|
||||
|
||||
buy1(){
|
||||
console.log("qqweqd")
|
||||
if(this.shoptype==2){
|
||||
requestP({
|
||||
url: "pay/pay_goods_pintuan",
|
||||
data: {
|
||||
goods_pt_id: this.ptid,
|
||||
num: this.num
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code) {
|
||||
uni.setStorageSync("ordersubinfo", res.data);
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/order-sub/order-sub?guige=" +
|
||||
this.typestr.join(",") +
|
||||
"&ptid=" +
|
||||
this.ptid +
|
||||
"&num=" +
|
||||
this.num+"&shoptype=4"
|
||||
});
|
||||
}
|
||||
console.log(res.data.code, "code");
|
||||
});
|
||||
}else if(this.shoptype==4){
|
||||
console.log(this.ptorderid,"ptorderid")
|
||||
requestP({
|
||||
url: "pay/pay_goods_pintuan",
|
||||
data: {
|
||||
goods_pt_id: this.ptid,
|
||||
num: this.num
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.code) {
|
||||
uni.setStorageSync("ordersubinfo", res.data);
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/order-sub/order-sub?guige=" +
|
||||
this.typestr.join(",") +
|
||||
"&ptid=" +
|
||||
this.ptid +
|
||||
"&num=" +
|
||||
this.num+"&shoptype=5&ptorderid="+this.ptorderid
|
||||
});
|
||||
}
|
||||
console.log(res.data.code, "code");
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// conosle.log(this.tags)
|
||||
// this.$set(this.typestr[i], 0, this.tags[i].guige_name + ":");
|
||||
// this.$set(this.typestr[i], 1, this.tags[e].guige_val_list[f]);
|
||||
},
|
||||
watch: {
|
||||
tags() {
|
||||
for (let i in this.tags) {
|
||||
this.tag.push([]);
|
||||
this.typestr.push([]);
|
||||
for (let j in this.tags[i].guige_val_list) {
|
||||
console.log("初始");
|
||||
this.tag[i].push(j == 0 ? "tag1" : "tag");
|
||||
}
|
||||
}
|
||||
console.log(this.tags, 1112);
|
||||
for (let i in this.tags) {
|
||||
this.$set(this.typestr[i], 0, this.tags[i].guige_name + ":");
|
||||
this.$set(this.typestr[i], 1, this.tags[i].guige_val_list[0]);
|
||||
// console.log(this.tags[i].guige_name,this.tags[i].guige_val_list[0])
|
||||
}
|
||||
console.log(this.typestr, "typestr");
|
||||
},
|
||||
tag() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(126, 126, 126, 0.8);
|
||||
}
|
||||
.scroll-Y {
|
||||
height: 100%;
|
||||
}
|
||||
.choosesize {
|
||||
width: 100%;
|
||||
// height:60%;
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
bottom: 0upx;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
height: 936rpx;
|
||||
.top {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
position: relative;
|
||||
// justify-content:;
|
||||
.shoppic {
|
||||
width: 203upx;
|
||||
height: 205upx;
|
||||
margin-top: 39upx;
|
||||
margin: 10upx;
|
||||
}
|
||||
.btn1 {
|
||||
width: 71upx;
|
||||
height: 33upx;
|
||||
border-radius: 17upx;
|
||||
line-height: 33upx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: #de3449;
|
||||
font-size: 16upx;
|
||||
margin-left: 6upx;
|
||||
margin-right: 14upx;
|
||||
position: absolute;
|
||||
top: 190rpx;
|
||||
left: 262rpx;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 190upx;
|
||||
left: 120upx;
|
||||
width: 500upx;
|
||||
height: 20rpx;
|
||||
.money {
|
||||
color: #e32e10;
|
||||
font-size: 26upx;
|
||||
// position: absolute ;
|
||||
// z-index: 9999;
|
||||
}
|
||||
.huaxian {
|
||||
color: #635b5b;
|
||||
font-size: 22upx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
height: 11upx;
|
||||
width: 100%;
|
||||
margin-top: 19upx;
|
||||
background-color: #fbffde;
|
||||
}
|
||||
.title {
|
||||
color: #6a6a6a;
|
||||
font-size: 28upx;
|
||||
margin-top: 29upx;
|
||||
margin-left: 59upx;
|
||||
margin-bottom: 45upx;
|
||||
.zi {
|
||||
position: relative;
|
||||
top: 8upx;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
width: 700upx;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
margin-left: 53upx;
|
||||
flex-wrap: wrap;
|
||||
.tag {
|
||||
// width: 119upx;
|
||||
height: 53upx;
|
||||
border: 2upx solid #d2d2d2;
|
||||
color: #999999;
|
||||
font-size: 26upx;
|
||||
line-height: 53upx;
|
||||
text-align: center;
|
||||
margin-right: 53upx;
|
||||
border-radius: 27upx;
|
||||
margin-bottom: 20upx;
|
||||
padding-left: 23upx;
|
||||
padding-right: 23upx;
|
||||
}
|
||||
.tag1 {
|
||||
// width: 119upx;
|
||||
padding-left: 23upx;
|
||||
padding-right: 23upx;
|
||||
height: 53upx;
|
||||
border: 2upx solid #de3449;
|
||||
color: #b3304e;
|
||||
background-color: #fae7ea;
|
||||
font-size: 26upx;
|
||||
line-height: 53upx;
|
||||
text-align: center;
|
||||
margin-right: 53upx;
|
||||
border-radius: 27upx;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
}
|
||||
.numbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.number {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
margin-bottom: 145upx;
|
||||
.num {
|
||||
width: 240upx;
|
||||
height: 68upx;
|
||||
margin-right: 33upx;
|
||||
display: flex;
|
||||
.reverse {
|
||||
width: 68upx;
|
||||
height: 68upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 2upx solid #dcdcdc;
|
||||
.icon {
|
||||
width: 25upx;
|
||||
height: 3upx;
|
||||
margin-left: 22upx;
|
||||
}
|
||||
.icon1 {
|
||||
width: 25upx;
|
||||
height: 25upx;
|
||||
margin-left: 22upx;
|
||||
}
|
||||
}
|
||||
.shuliang {
|
||||
width: 108upx;
|
||||
height: 68upx;
|
||||
border: 2upx solid #dcdcdc;
|
||||
line-height: 68upx;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 34upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
height: 107upx;
|
||||
width: 100%;
|
||||
border-top: 1upx solid #eeeeee;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
// margin-top: -123rpx;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 0;
|
||||
// top: 1053upx;
|
||||
.btn1 {
|
||||
width: 325upx;
|
||||
height: 72upx;
|
||||
border: 1upx solid #de3449;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
color: #de3449;
|
||||
line-height: 72upx;
|
||||
text-align: center;
|
||||
}
|
||||
.btn2 {
|
||||
width: 325upx;
|
||||
height: 72upx;
|
||||
background-color: #de3449;
|
||||
// border:1upx solid #DE3449;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
color: white;
|
||||
line-height: 72upx;
|
||||
text-align: center;
|
||||
}
|
||||
.btn3 {
|
||||
width: 600upx;
|
||||
height: 72upx;
|
||||
background-color: #de3449;
|
||||
// border:1upx solid #DE3449;
|
||||
margin: auto 0;
|
||||
font-size: 28upx;
|
||||
color: white;
|
||||
line-height: 72upx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/components/shopdetail/shopdetail-commentstop.vue
Normal file
56
src/components/shopdetail/shopdetail-commentstop.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view class="shopdetailCommentstop">
|
||||
<view class="left">
|
||||
<text>{{left}}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text>{{right}}</text>
|
||||
<img src="../../static/img/arrowmore.png" alt="" class="arrow" v-if="ifarrow">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailCommentstop",
|
||||
props:{
|
||||
left:{
|
||||
tytpe:String
|
||||
},
|
||||
right:{
|
||||
type:String
|
||||
},
|
||||
ifarrow:{
|
||||
type:Boolean
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailCommentstop{
|
||||
height: 62upx;
|
||||
width: 100%;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 62upx;
|
||||
.left{
|
||||
font-size: 30upx;
|
||||
margin-left: 33upx;
|
||||
|
||||
}
|
||||
.right{
|
||||
font-size: 26upx;
|
||||
margin-right: 30upx;
|
||||
|
||||
.arrow{
|
||||
width: 16upx;
|
||||
height: 29upx;
|
||||
margin-left: 14upx;
|
||||
position: relative;
|
||||
top: 5upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/components/shopdetail/shopdetail-detail.vue
Normal file
22
src/components/shopdetail/shopdetail-detail.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="shopdetailDetail">
|
||||
<!-- <img src="../../static/img/shopdetail.png" alt="" class="pic"> -->
|
||||
<!-- <editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor> -->
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailDetail",
|
||||
props:["strings"]
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// .pic{
|
||||
// width: 100%;
|
||||
// height: 22509upx;
|
||||
// }
|
||||
</style>
|
||||
110
src/components/shopdetail/shopdetail-ensure.vue
Normal file
110
src/components/shopdetail/shopdetail-ensure.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view :class="ensurepic=='../../static/img/pintuanensure.png'?'shopdetailEnsure1':'shopdetailEnsure'">
|
||||
<view class="left">
|
||||
<view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
|
||||
<img :src="ensurepic" alt class="ensure1"/>
|
||||
<text>{{ensurearr[0]}}</text>
|
||||
</view>
|
||||
<view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
|
||||
<img :src="ensurepic" alt class="ensure1"/>
|
||||
<text>{{ensurearr[1]}}</text>
|
||||
</view>
|
||||
<view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
|
||||
<img :src="ensurepic" alt class="ensure1"/>
|
||||
<text>{{ensurearr[2]}}</text>
|
||||
</view>
|
||||
<view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
|
||||
<img :src="ensurepic" alt class="ensure1"/>
|
||||
<text>{{ensurearr[3]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click="more" v-if="ensurepic!='../../static/img/pintuanensure.png'">
|
||||
<img src="../../static/img/more.png" alt class="more" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shopdetailEnsure",
|
||||
data(){
|
||||
return {
|
||||
ensurearr:[],
|
||||
ensure:"ensure",
|
||||
shopdetailEnsure:'shopdetailEnsure'
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
props:{
|
||||
ensures:{
|
||||
type:String
|
||||
},
|
||||
ensurepic:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.ensurearr=this.ensures.split(',')
|
||||
},
|
||||
methods:{
|
||||
more(){
|
||||
this.$emit("more",true)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailEnsure {
|
||||
height: 78upx;
|
||||
width: 100%;
|
||||
background-color: #f0f3fa;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.shopdetailEnsure1 {
|
||||
height: 78upx;
|
||||
width: 100%;
|
||||
background-color:white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.left {
|
||||
width: 531upx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 78upx;
|
||||
.ensure{
|
||||
color: #4F95E4;
|
||||
font-size: 22upx;
|
||||
margin-left: 11upx;
|
||||
font-weight:500;
|
||||
|
||||
}
|
||||
.ensure1{
|
||||
width:22upx;
|
||||
height: 22upx;
|
||||
margin-right: 11upx
|
||||
|
||||
}
|
||||
.ensure2{
|
||||
color: #D81E50;
|
||||
font-size: 22upx;
|
||||
margin-left: 11upx;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
.more {
|
||||
width: 33upx;
|
||||
height: 9upx;
|
||||
margin-right: 31upx;
|
||||
line-height:78upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/components/shopdetail/shopdetail-line.vue
Normal file
17
src/components/shopdetail/shopdetail-line.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view class="shopdetailLine"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailLine"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailLine{
|
||||
height: 18upx;
|
||||
width: 100%;
|
||||
background-color:#EEEEEE;
|
||||
}
|
||||
</style>
|
||||
50
src/components/shopdetail/shopdetail-pinglun.vue
Normal file
50
src/components/shopdetail/shopdetail-pinglun.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<view class="shopdetailPinglun">
|
||||
<view class="item" v-for="item in content1" :key="item">{{item}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'shopdetailPinglun',
|
||||
props:{
|
||||
content:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
content1:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.content1=this.content.split(',')
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailPinglun{
|
||||
width: 523upx;
|
||||
color: #666666;
|
||||
font-size: 21upx;
|
||||
line-height: 49upx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item{
|
||||
// width: 191upx;
|
||||
height: 49upx;
|
||||
margin-right: 26upx;
|
||||
padding: 10upx 20upx;
|
||||
background-color: #FEF5F6;
|
||||
margin-bottom: 19upx;
|
||||
border-radius: 25upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
src/components/shopdetail/shopdetail-pri.vue
Normal file
30
src/components/shopdetail/shopdetail-pri.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="shopdetailPri">
|
||||
<text class="icon">￥</text>
|
||||
<text class="money">{{pri}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shopdetailPri",
|
||||
props:{
|
||||
pri:{
|
||||
type:String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopdetailPri{
|
||||
color:#DD0000;
|
||||
.icon{
|
||||
font-size: 23upx;
|
||||
}
|
||||
.money{
|
||||
font-size: 40upx;
|
||||
font-weight:800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
src/components/shopdetail/shopdetail-servicelist.vue
Normal file
147
src/components/shopdetail/shopdetail-servicelist.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="box" @touchmove.stop.prevent="moveHandle" v-if="ifservice" @click="turnoff">
|
||||
<view class="servicelist">
|
||||
<view class="top">
|
||||
<text>服务</text>
|
||||
<view class="close" @click="turnoff">
|
||||
<img src="../../static/img/off.png" alt="" class="off">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mid">
|
||||
<scroll-view :scroll-y="true" class="scroll-Y"
|
||||
@scroll="scroll">
|
||||
<view class="item">
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品</text>
|
||||
<view class="desc">各大厂商 直接供货</view>
|
||||
</view>
|
||||
|
||||
<view class="item-1">
|
||||
<img src="../../static/img/serviceicon.png" alt="" class="icon">
|
||||
<text>全正品aaaa</text>
|
||||
<view class="desc">各大厂商 直接供货aaaa</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"servicelist",
|
||||
props:{
|
||||
ifservice:{
|
||||
type:Boolean
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
moveHandle(){
|
||||
|
||||
},
|
||||
scroll(){},
|
||||
turnoff(){
|
||||
this.$emit("turnoff",false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(127, 127, 127, 0.5);
|
||||
|
||||
}
|
||||
.servicelist{
|
||||
background-color: white;
|
||||
height: 949upx;
|
||||
.top{
|
||||
height: 97upx;
|
||||
color: #333333;
|
||||
font-size: 30upx;
|
||||
line-height: 97upx;
|
||||
text-align: center;
|
||||
border-bottom: 2upx solid #D9D9D9;
|
||||
margin-bottom: 35upx;
|
||||
.close{
|
||||
width: 26upx;
|
||||
height: 26upx;
|
||||
float: right;
|
||||
margin: auto 0;
|
||||
margin-right: 33upx;
|
||||
.off{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mid{
|
||||
.item{
|
||||
color: #333333;
|
||||
font-size: 26upx;
|
||||
.item-1{
|
||||
margin-bottom: 60upx;
|
||||
}
|
||||
.icon{
|
||||
width: 24upx;
|
||||
height: 24upx;
|
||||
margin-left:30upx;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
.desc{
|
||||
color: #999999;
|
||||
font-size: 22upx;
|
||||
margin-top: 16upx;
|
||||
margin-left: 73upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-Y{
|
||||
height: 790upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user