新增商城系列
|
@ -95,6 +95,27 @@
|
||||||
.lianShare{height: 90rpx;width: 220rpx;}
|
.lianShare{height: 90rpx;width: 220rpx;}
|
||||||
.backH{width: 190rpx;height: 190rpx;top: -126rpx;}
|
.backH{width: 190rpx;height: 190rpx;top: -126rpx;}
|
||||||
|
|
||||||
|
/* 商城 */
|
||||||
|
.activecate,.shopMo{width: 216rpx;height: 65rpx;border-radius: 20rpx;line-height: 65rpx;text-align: center;background-color: #f2f2f2;color: #333333;}
|
||||||
|
.activecate{color: #FFFFFF;}
|
||||||
|
.shopMo span::after,.activecate span::after{display: inline-block;content: '';width: 16rpx;height: 13rpx;margin-left: 6rpx;}
|
||||||
|
.shopMo span::after{background: url(/static/public/shopSJ.png) no-repeat;background-size: 100% 90%;}
|
||||||
|
.activecate span::after{background: url(/static/public/shopSJ-active.png) no-repeat;background-size: 100% 90%;transform: rotate(180deg);background-position: 0 2rpx;}
|
||||||
|
.shop_list_box>view>view:last-child{margin-bottom: 200rpx;}
|
||||||
|
|
||||||
|
.activebcate,.shopBMo{border-radius: 20rpx;background-color: #f2f2f2;color: #333333;padding: 12rpx 24rpx;}
|
||||||
|
.activebcate{color: #FFFFFF;}
|
||||||
|
|
||||||
|
|
||||||
|
/* 商品详情 */
|
||||||
|
.activelei,.molei{border-radius: 20rpx;padding: 10rpx 24rpx;color: #333333;margin-left: 20rpx;}
|
||||||
|
.activelei{color: #FFFFFF;}
|
||||||
|
|
||||||
|
|
||||||
|
/* 准备下单 */
|
||||||
|
.activeT,.expressT{width: 124rpx;height: 60rpx;line-height: 60rpx;text-align: center;margin-left: 20rpx;border-radius: 20rpx;}
|
||||||
|
.activeT{color: #FFFFFF;}
|
||||||
|
.activeQuan::before{content: '';display: block;width: 50%;height: 8rpx;background: #3875F6;position: absolute;bottom: -20rpx;left: 50%;transform: translateX(-50%);}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -131,7 +131,8 @@
|
||||||
if(!this.jieDuan){
|
if(!this.jieDuan){
|
||||||
let isAuth = this.$toolAll.tools.returnAuth()
|
let isAuth = this.$toolAll.tools.returnAuth()
|
||||||
if(!isAuth){
|
if(!isAuth){
|
||||||
this.isShowT = true
|
uni.reLaunch({url:'/pages/tabbar/shop/shop'})
|
||||||
|
// this.isShowT = true
|
||||||
} else this.jieDuan = true
|
} else this.jieDuan = true
|
||||||
}
|
}
|
||||||
// uni.navigateTo({url:'/pages/tabbar/shop/shop'})
|
// uni.navigateTo({url:'/pages/tabbar/shop/shop'})
|
||||||
|
|
|
@ -0,0 +1,121 @@
|
||||||
|
<template>
|
||||||
|
<view class="pad20 shop_list_box">
|
||||||
|
<view style="width: 48.6%;float: left;">
|
||||||
|
<view class="bacf radius15 mar-x20" @tap="goPage">
|
||||||
|
<image src="../../../static/public/wen-one.png" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||||
|
<view class="pad-zy20 pad-s10 pad-x30">
|
||||||
|
<view class="fon28 bold col3 clips2">【99皮皮节】【种植发际 线】1000单位FUE技术...</view>
|
||||||
|
<view class="disac fon20 mar-sx20">
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;margin-right: 10rpx;" :style="{background:publicColor}">秃顶种植</view>
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">¥3888</view>
|
||||||
|
<view class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥4205</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf radius15 mar-x20">
|
||||||
|
<image src="../../../static/public/wen-one.png" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||||
|
<view class="pad-zy20 pad-s10 pad-x30">
|
||||||
|
<view class="fon28 bold col3 clips2">【99皮皮节】【种植发际 线】1000单位FUE技术...</view>
|
||||||
|
<view class="disac fon20 mar-sx20">
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;margin-right: 10rpx;" :style="{background:publicColor}">秃顶种植</view>
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">拼团价¥3888</view>
|
||||||
|
<view class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥4205</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-s20">
|
||||||
|
<view class="fon24 col80">已拼团10组</view>
|
||||||
|
<view class="disac">
|
||||||
|
<image src="../../../static/tabbar/mya.png" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;"></image>
|
||||||
|
<image src="../../../static/tabbar/mym.png" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
|
||||||
|
<image src="../../../static/tabbar/homeAc.png" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf radius15 mar-x20">
|
||||||
|
<image src="../../../static/public/wen-one.png" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||||
|
<view class="pad-zy20 pad-s10 pad-x30">
|
||||||
|
<view class="fon28 bold col3 clips2">【99皮皮节】【种植发际 线】1000单位FUE技术...</view>
|
||||||
|
<view class="disac fon20 mar-sx20">
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;margin-right: 10rpx;" :style="{background:publicColor}">秃顶种植</view>
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">促销价¥3888</view>
|
||||||
|
<view class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥4205</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon24 col80 mar-s20">结束时间:15小时00分00秒</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="width: 48.6%;float: right;">
|
||||||
|
<view class="bacf radius15 mar-x20">
|
||||||
|
<image src="../../../static/public/wen-one.png" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||||
|
<view class="pad-zy20 pad-s10 pad-x30">
|
||||||
|
<view class="fon28 bold col3 clips2">【99皮皮节】【种植发际 线】1000单位FUE技术...</view>
|
||||||
|
<view class="disac fon20 mar-sx20">
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;margin-right: 10rpx;" :style="{background:publicColor}">秃顶种植</view>
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">拼团价¥3888</view>
|
||||||
|
<view class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥4205</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="fon24 col80">已拼团10组</view>
|
||||||
|
<view>
|
||||||
|
<image src="" mode="" style="width: 40rpx;height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf radius15 mar-x20">
|
||||||
|
<image src="../../../static/public/wen-one.png" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||||
|
<view class="pad-zy20 pad-s10 pad-x30">
|
||||||
|
<view class="fon28 bold col3 clips2">【99皮皮节】【种植发际 线】1000单位FUE技术...</view>
|
||||||
|
<view class="disac fon20 mar-sx20">
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;margin-right: 10rpx;" :style="{background:publicColor}">秃顶种植</view>
|
||||||
|
<view class="radius10 colf" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">¥3888</view>
|
||||||
|
<view class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥4205</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"shop-list",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
publicColor:uni.getStorageSync('publicColor'),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
goPage(){//进入商品详情事件
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/shopDetail/shopDetail'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
45
pages.json
|
@ -46,6 +46,33 @@
|
||||||
"path" : "suggestions/suggestions",//投诉及建议
|
"path" : "suggestions/suggestions",//投诉及建议
|
||||||
"style" : {}
|
"style" : {}
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "shopCart/shopCart",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "getReadyDan/getReadyDan",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "immediatePayment/immediatePayment",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{//B包
|
{//B包
|
||||||
|
@ -110,6 +137,24 @@
|
||||||
"path":"customer/customer",
|
"path":"customer/customer",
|
||||||
"style":{}
|
"style":{}
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "shopDetail/shopDetail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "orderDetail/orderDetail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -78,6 +78,11 @@
|
||||||
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
||||||
<!-- 底部客服 -->
|
<!-- 底部客服 -->
|
||||||
<!-- <public-customer></public-customer> -->
|
<!-- <public-customer></public-customer> -->
|
||||||
|
<!-- 弹框优惠券 -->
|
||||||
|
<view class="" v-if="isQuan" style="background: rgba(0,0,0,.54);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 11;display: flex;justify-content: center;flex-direction: column;align-items: center;">
|
||||||
|
<image src="../../../static/public/yquan.png" style="width: 542rpx;height: 600rpx;" mode="aspectFill"></image>
|
||||||
|
<image @tap="closeEv" src="../../../static/public/closequan.png" style="width: 96rpx;height: 96rpx;margin-top: 56rpx;" mode=""></image>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -126,7 +131,8 @@
|
||||||
reNum:0,
|
reNum:0,
|
||||||
bannerList:[],//轮播图
|
bannerList:[],//轮播图
|
||||||
jieDuan:false,
|
jieDuan:false,
|
||||||
isNewRenderDone:false //锁的作用
|
isNewRenderDone:false ,//锁的作用
|
||||||
|
isQuan:true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
|
@ -211,6 +217,9 @@
|
||||||
this.$toolAll.tools.buriedPointAll()//查询需要埋点的事件id
|
this.$toolAll.tools.buriedPointAll()//查询需要埋点的事件id
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
closeEv(){
|
||||||
|
this.isQuan = false;
|
||||||
|
},
|
||||||
checkSwi(){
|
checkSwi(){
|
||||||
checkBanner({position:'home-banner'}).then(res=>{
|
checkBanner({position:'home-banner'}).then(res=>{
|
||||||
if(res.code==0){
|
if(res.code==0){
|
||||||
|
|
|
@ -1,21 +1,82 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<!-- 状态栏 -->
|
<!-- 状态栏 -->
|
||||||
<status-nav :titleVal="'商城'" :statusTitle="true"></status-nav>
|
<status-nav :titleVal="'商城'" :statusBack="false" :statusTitle="true"></status-nav>
|
||||||
|
<!-- 搜索输入框 -->
|
||||||
|
<view class="search-input-box bacf" :style="{top: statusHNH+'px'}" style="position: fixed;left: 0;right: 0;">
|
||||||
|
<view class="disac pad-zy30 mar-s20">
|
||||||
|
<!-- 输入框 -->
|
||||||
|
<input style="border: 2rpx solid #E0E0E0;padding: 0rpx 20rpx;height: 80rpx;line-height: 80rpx;" class="width100 fon34 radius10" type="text" v-model="searchVal" placeholder="请输入商品名称"/>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<view class="flexs mar-z30 radius10 pad-zy40 fon34 colf" style="height: 80rpx;line-height: 80rpx;" :style="{background:publicColor}">搜索</view>
|
||||||
|
</view>
|
||||||
|
<!-- 分类标题 -->
|
||||||
|
<view style="background: #FFFFFF;font-size: 24rpx;" class="disjbac pad-zy20 pad-s20">
|
||||||
|
<view v-for="(item,index) in shopCate" @tap="chooseShopCate(index)" :class="activeIndex==index?'activecate':'shopMo'" :style="{background:activeIndex==index?publicColor:'#F2F2F2'}" :key="index"><span>{{item}}</span></view>
|
||||||
|
</view>
|
||||||
|
<!-- 筛选结果 -->
|
||||||
|
<view v-if="isClick" class="pad-zy50 disac fw pad-x20">
|
||||||
|
<view class="col3 fon28 mar-s30">筛选:</view>
|
||||||
|
<view v-for="(item,indexx) in shaiList" :key="indexx" style="background: #3875F6;color: #FFFFFF;border-radius: 30rpx;padding: 8rpx 20rpx;font-size: 24rpx;display: flex;align-items: center;margin-right: 20rpx;margin-top: 30rpx;">{{item}} <view class="mar-z10" @tap="deleteSX(indexx)">×</view></view>
|
||||||
|
</view>
|
||||||
|
<view v-if="isXiao">
|
||||||
|
<view class="pad-zy30">
|
||||||
|
<view class="mar-s50 mar-x20 fon28 bold">{{cateTitle}}</view>
|
||||||
|
<view class="disac fw">
|
||||||
|
<view @tap="chooseBing(indexb)" v-for="(itemb,indexb) in bingzList" class="mar-y30 fon26 mar-s30" :key="indexb" :class="bingIndex==indexb?'activebcate':'shopBMo'" :style="{background:bingIndex==indexb?publicColor:'#F2F2F2'}">{{itemb}}</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="activeIndex==1">
|
||||||
|
<view class="fon28 bold mar-sx40">医生选择</view>
|
||||||
|
<input type="text" class="mar-x40" value="" style="height: 60rpx;border: 2rpx solid #E0E0E0;border-radius: 10rpx;width: 100%;box-sizing: border-box;padding-left: 20rpx;font-size: 24rpx;" placeholder="请输入医生姓名并选择" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 重置、筛选 -->
|
||||||
|
<view class="disjbac pad-zy20 mar-s50 mar-x30 pad-s20">
|
||||||
|
<view @tap="chongz" style="font-size: 28rpx;width: 294rpx;height: 60rpx;border-radius: 10rpx;text-align: center;line-height: 60rpx; background: #E6E6E6;color: #4D4D4D;">重置</view>
|
||||||
|
<view @tap="shaix" style="font-size: 28rpx;width: 294rpx;height: 60rpx;border-radius: 10rpx;text-align: center;line-height: 60rpx; background: #3875F6;color: #FFFFFF;">筛选</view>
|
||||||
|
</view>
|
||||||
|
<view @tap="isXiao=false" style="background: rgba(0,0,0,.54);width: 100%;height: 600rpx;float: left;position: relative;"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 数据列表 -->
|
||||||
|
<view :style="{marginTop:statusHNH+titleHeight+'px'}">
|
||||||
|
<shopList></shopList>
|
||||||
|
</view>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='3'></foot-tab>
|
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='3'></foot-tab>
|
||||||
|
<!-- 购物车 -->
|
||||||
|
<navigator url="/pagesA/shopCart/shopCart" hover-class="none">
|
||||||
|
<view style="position: fixed;right: 30rpx;bottom: 200rpx;">
|
||||||
|
<view class="posir" style="width: 112rpx;height: 112rpx;">
|
||||||
|
<image src="/static/public/cart.png" mode="aspectFill" style="width: 112rpx;height: 112rpx;"></image>
|
||||||
|
<view class="posia" style="background: #F85050;width: 28rpx;height: 28rpx;border-radius: 100%;color: #FFFFFF;font-size: 24rpx;text-align: center;line-height: 28rpx;top: 20rpx;right: 20rpx;"><view style="transform: scale(.8);">99</view></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import shopList from '@/components/shop-list.vue';
|
||||||
export default {
|
export default {
|
||||||
|
components:{
|
||||||
|
shopList
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
titleList:[],
|
titleList:[],
|
||||||
imgList:[]
|
imgList:[],
|
||||||
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||||||
|
publicColor:uni.getStorageSync('publicColor'),
|
||||||
|
activeIndex:'-1',
|
||||||
|
shopCate:['全部病种','全部医生','全部活动'],
|
||||||
|
cateTitle:'',
|
||||||
|
bingIndex:0,
|
||||||
|
bingzList:[],//小分类列表
|
||||||
|
isXiao:false,//
|
||||||
|
titleHeight:'',//标题高度
|
||||||
|
shaiList:[],//筛选后的结果列表
|
||||||
|
isClick:false,//是否点击了筛选
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
@ -24,13 +85,61 @@
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.titleList = uni.getStorageSync('footTitle')
|
this.titleList = uni.getStorageSync('footTitle')
|
||||||
this.imgList = uni.getStorageSync('footimg')
|
this.imgList = uni.getStorageSync('footimg')
|
||||||
|
// 缓存状态栏+标题栏的高度
|
||||||
|
const query = wx.createSelectorQuery()
|
||||||
|
query.select('.search-input-box').boundingClientRect((rect) => {
|
||||||
|
// console.log('状态栏+标题栏:',rect.height);
|
||||||
|
this.titleHeight = rect.height
|
||||||
|
}).exec()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
chooseShopCate(index){//大分类选择事件
|
||||||
|
this.activeIndex = index;
|
||||||
|
this.isClick = false;
|
||||||
|
this.bingIndex = 0;
|
||||||
|
if(!this.isXiao) {
|
||||||
|
this.isXiao = true;
|
||||||
|
}
|
||||||
|
if(this.activeIndex==0) {
|
||||||
|
this.cateTitle = '病种选择';
|
||||||
|
this.bingzList = ['全部','秃顶植发','眉毛种植','发际线种植','耳发种植','胡须种植','植发失败修复','其他'];
|
||||||
|
}
|
||||||
|
if(this.activeIndex==1) {
|
||||||
|
this.cateTitle = '职位选择';
|
||||||
|
this.bingzList = ['全部','植发','医师','主任'];
|
||||||
|
}
|
||||||
|
if(this.activeIndex==2) {
|
||||||
|
this.cateTitle = '活动选择';
|
||||||
|
this.bingzList = ['全部','拼团活动','团购活动','限时促销'];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chooseBing(index){//小分类选择事件
|
||||||
|
this.bingIndex = index;
|
||||||
|
let cun = this.shaiList.indexOf(this.bingzList[index]);
|
||||||
|
if(cun==-1){
|
||||||
|
this.shaiList.push(this.bingzList[index]);
|
||||||
|
}
|
||||||
|
console.log(this.shaiList);
|
||||||
|
},
|
||||||
|
chongz(){//重置
|
||||||
|
this.bingIndex = 0
|
||||||
|
this.isClick = false;
|
||||||
|
this.shaiList = []
|
||||||
|
},
|
||||||
|
shaix(){//筛选
|
||||||
|
this.isXiao = false
|
||||||
|
this.isClick = true;
|
||||||
|
},
|
||||||
|
deleteSX(index){//删除筛选
|
||||||
|
this.shaiList.splice(index,1);
|
||||||
|
if(this.shaiList.length==0){
|
||||||
|
this.isClick = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
page{background: #F5F5F5;}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,187 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 状态栏 -->
|
||||||
|
<status-nav :titleVal="'购物车'" :statusTitle="true"></status-nav>
|
||||||
|
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
|
||||||
|
<view class="bacf radius20 mar-s20 disjbac" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">配送方式</view>
|
||||||
|
<view class="fon26 col3 disac">
|
||||||
|
<view @tap="isExpress=true" :class="isExpress?'activeT':'expressT'" :style="{background:isExpress?publicColor:''}">快递</view>
|
||||||
|
<view @tap="isExpress=false" :class="!isExpress?'activeT':'expressT'" :style="{background:isExpress?'':publicColor}">自提</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 地址信息 -->
|
||||||
|
<view v-if="isExpress" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">收件人信息</view>
|
||||||
|
<view class="fon26 col3 disjbac">
|
||||||
|
<view>
|
||||||
|
<view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">蒋灰灰 <span>188****0362</span></view>
|
||||||
|
<view class="fon24 col9">四川省成都市成华区中环路双店路段奥园广场</view>
|
||||||
|
</view>
|
||||||
|
<image src="/static/public/nextM.png" style="width: 16px;height: 16px;flex-shrink: 0;" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自提地址 -->
|
||||||
|
<view v-else class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">自提地址</view>
|
||||||
|
<view class="fon26 col3 disjbac" style="margin-top: 50rpx;">
|
||||||
|
<view>
|
||||||
|
<view class="fon28 col3 bold" style="margin-bottom: 20rpx;">恒美植发</view>
|
||||||
|
<view class="fon24 col9">四川省成都市青羊区青羊大道213号</view>
|
||||||
|
</view>
|
||||||
|
<image @tap="goThere" src="/static/public/daoh.png" style="width: 96rpx;height: 93rpx;flex-shrink: 0;" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 订单信息 -->
|
||||||
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">订单信息</view>
|
||||||
|
<view class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||||||
|
<image src="/static/public/banner.png" class="flexs" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;" mode="aspectFill"></image>
|
||||||
|
<view class="width100">
|
||||||
|
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
||||||
|
<view style="font-size: 22rpx;color: #808080;font-weight: 500;">试用</view>
|
||||||
|
<view class="disjbac mar-s10">
|
||||||
|
<view style="color: #F85050;font-size: 32rpx;font-weight: bold;">¥3888</view>
|
||||||
|
<view class="fon28 col6">x2</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 优惠 -->
|
||||||
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">优惠</view>
|
||||||
|
<view @tap="showQuan=true" class="fon28 col3 disjbac mar-sx40">
|
||||||
|
<view>优惠券</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view style="color: #F85050;font-weight: bold;">-¥99.00</view>
|
||||||
|
<image src="/static/public/nextM.png" style="width: 16px;height: 16px;flex-shrink: 0;" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 col3 disjbac">
|
||||||
|
<view>立减优惠</view>
|
||||||
|
<view style="color: #F85050;font-weight: bold;">-¥99.00</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 快递费用 -->
|
||||||
|
<view class="bacf radius20 mar-s20 disjbac" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">快递费用</view>
|
||||||
|
<view class="fon28" style="color: #F85050;font-weight: bold;">¥10.00</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac posixzy bacf" style="height: 124rpx;line-height: 124rpx;padding: 0 32rpx;">
|
||||||
|
<!-- 去支付 -->
|
||||||
|
<view class="fon40 bold" style="color: #F85050;">合计:¥7166.00</view>
|
||||||
|
<view @tap="goPayment" style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #3875F6;border-radius: 35rpx;margin-left: 10rpx;">去支付</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="showQuan" @tap.stop="showQuan=false" class="posAll">
|
||||||
|
<view class="bacf posixzy" style="border-radius: 40rpx 40rpx 0rpx 0rpx;" @tap.stop="showQuan=true">
|
||||||
|
<view style="padding: 20rpx 50rpx;">
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="fon28 bold col3">优惠券</view>
|
||||||
|
<image @tap.stop="showQuan=false" src="/static/public/cha-close.png" style="width: 30rpx;height: 30rpx;" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 bold col3" style="display: flex;justify-content: space-around;align-items: center;padding: 50rpx 0 16rpx 0;">
|
||||||
|
<view class="posir" :class="switchQuan?'activeQuan':''" @tap="switchQuan=true">可用优惠券(1)</view>
|
||||||
|
<view class="posir" :class="!switchQuan?'activeQuan':''" @tap="switchQuan=false">失效优惠券(0)</view>
|
||||||
|
</view>
|
||||||
|
<view class="mar-s40">
|
||||||
|
<view style="height: 200rpx;" class="disjbac">
|
||||||
|
<view class="posir" style="width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;">
|
||||||
|
<image class="posia" src="/static/public/quan-left.png" style="width: 218rpx;height: 200rpx;left: 0;top: 0;" mode=""></image>
|
||||||
|
<view class="posir" style="z-index: 1;">
|
||||||
|
<view style="margin: 40rpx 0 30rpx 0rpx;" class="fon28">¥<span style="font-size: 56rpx;font-weight: bold;">10</span></view>
|
||||||
|
<view class="fon24">满300元可使用</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;">
|
||||||
|
<view class="fon28 col3 mar-s20">黄金会员专属优惠券</view>
|
||||||
|
<view>
|
||||||
|
<image src="/static/public/chooseQuan.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;float: right;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon20 col3 mar-x20">有效期:2021-09-06至2021-09-15</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="mar-s40">
|
||||||
|
<view style="height: 200rpx;" class="disjbac">
|
||||||
|
<view class="posir" style="width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;">
|
||||||
|
<image class="posia" src="/static/public/quan-left.png" style="width: 218rpx;height: 200rpx;left: 0;top: 0;" mode=""></image>
|
||||||
|
<view class="posir" style="z-index: 1;">
|
||||||
|
<view style="margin: 40rpx 0 30rpx 0rpx;" class="fon28">¥<span style="font-size: 56rpx;font-weight: bold;">10</span></view>
|
||||||
|
<view class="fon24">满300元可使用</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;">
|
||||||
|
<view class="fon28 col3 mar-s20">黄金会员专属优惠券</view>
|
||||||
|
<view>
|
||||||
|
<image src="/static/public/cancleQuan.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;float: right;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon20 col3 mar-x20">有效期:2021-09-06至2021-09-15</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 领取优惠券按钮 -->
|
||||||
|
<view @tap.stop="showQuan=false" style="font-size: 36rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 20rpx;height: 90rpx;line-height: 90rpx;text-align: center;margin-top: 156rpx;margin-bottom: 20rpx;">领取优惠券</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 确认兑换弹框 -->
|
||||||
|
<view v-if="isDui" @tap.stop="isDui=false" class="posAll" style="display: flex;justify-content: center;align-items: center;padding: 0 85rpx;">
|
||||||
|
<view class="bacf radius20 width100 tc fon28 col3 pad20" @tap.stop="isDui=true">
|
||||||
|
<view class="bold" style="margin: 0rpx 0 56rpx 0;">兑换商品</view>
|
||||||
|
<view style="margin: 0rpx 0 66rpx 0;">您确定使用7666积分兑换吗?</view>
|
||||||
|
<view class="disjbac mar-x20 pad-zy20">
|
||||||
|
<view @tap.stop="isDui=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;background: #C8C8C8;color: #FFFFFF;">暂不兑换</view>
|
||||||
|
<view @tap.stop="isDui=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;background: #3875F6;color: #FFFFFF;">立即兑换</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||||||
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||||
|
isExpress:true,
|
||||||
|
switchQuan:true,
|
||||||
|
showQuan:false,
|
||||||
|
isDui:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.$toolAll.tools.isLogin()
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goThere(){
|
||||||
|
wx.getLocation({//获取当前经纬度
|
||||||
|
type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
|
||||||
|
success: function (res) {
|
||||||
|
wx.openLocation({//使用微信内置地图查看位置。
|
||||||
|
latitude: 22.5542080000,//要去的纬度-地址
|
||||||
|
longitude: 113.8878770000,//要去的经度-地址
|
||||||
|
name: "宝安中心A地铁口",
|
||||||
|
address:'宝安中心A地铁口'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goPayment(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesA/immediatePayment/immediatePayment'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 状态栏 -->
|
||||||
|
<status-nav :titleVal="'立即支付'" :statusTitle="true"></status-nav>
|
||||||
|
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
|
||||||
|
<view v-if="!isSuccess">
|
||||||
|
<!-- 订单信息 -->
|
||||||
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold fon28">订单支付</view>
|
||||||
|
<view class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||||||
|
<image src="/static/public/banner.png" class="flexs" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;" mode="aspectFill"></image>
|
||||||
|
<view class="width100">
|
||||||
|
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
||||||
|
<view style="font-size: 22rpx;color: #808080;font-weight: 500;">试用</view>
|
||||||
|
<view class="disjbac mar-s10">
|
||||||
|
<view style="color: #F85050;font-size: 32rpx;font-weight: bold;">¥3888</view>
|
||||||
|
<view class="fon28 col6">x2</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 disjbac" style="margin: 60rpx 0 20rpx 0;">
|
||||||
|
<view class="col6">共4件</view>
|
||||||
|
<view style="font-weight: bold;color: #F85050;">应付款:3888.00+300孔雀币</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 支付方式 -->
|
||||||
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;font-size: 28rpx;color: #333333;">
|
||||||
|
<view class="disac">
|
||||||
|
<image src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;" mode=""></image>
|
||||||
|
<view style="margin-left: 26rpx;">微信支付</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac" style="margin-top: 30rpx;">
|
||||||
|
<view class="disac">
|
||||||
|
<image src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;" mode=""></image>
|
||||||
|
<view style="margin-left: 26rpx;">孔雀币</view>
|
||||||
|
</view>
|
||||||
|
<view>余3000</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 col3" style="padding: 55rpx 0 64rpx 0;text-align: center;">请在<span style="color: #F85050;font-weight: bold;">23时25分36秒</span>完成支付</view>
|
||||||
|
<!-- 确认支付 -->
|
||||||
|
<view @tap="payment" style="margin: 0 auto;color: #FFFFFF;font-weight: bold;font-size: 36rpx;text-align: center;width: 546rpx;height: 90rpx;line-height: 90rpx;background-color: #3875F6;border-radius: 20rpx;">确认支付</view>
|
||||||
|
</view>
|
||||||
|
<!-- 支付成功 -->
|
||||||
|
<view v-if="isSuccess" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;text-align: center;">
|
||||||
|
<image src="/static/public/pay-success.png" style="width: 194rpx;height: 194rpx;" mode=""></image>
|
||||||
|
<view class="fon28 col3" style="margin: 20rpx 0 40rpx 0;">支付成功</view>
|
||||||
|
<view class="" style="font-size: 46rpx;margin-bottom: 120rpx;color: #F85050;">¥3888.00</view>
|
||||||
|
<view class="disja" style="margin-bottom: 150rpx;">
|
||||||
|
<view @tap="goDetail" style="width: 244rpx;height: 70rpx;border-radius: 10rpx;text-align: center;line-height: 70rpx;background: #E9E9E9;color: #333333;">查看订单</view>
|
||||||
|
<view @tap="goShop" style="width: 244rpx;height: 70rpx;border-radius: 10rpx;text-align: center;line-height: 70rpx;background: #3875F6;color: #FFFFFF;">再逛一逛</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||||||
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||||
|
isSuccess:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.$toolAll.tools.isLogin()
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
payment(){
|
||||||
|
this.isSuccess = true
|
||||||
|
},
|
||||||
|
goDetail(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/orderDetail/orderDetail'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goShop(){
|
||||||
|
uni.reLaunch({
|
||||||
|
url:'/pages/tabbar/shop/shop'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,120 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 状态栏 -->
|
||||||
|
<status-nav :titleVal="'购物车'" :statusTitle="true"></status-nav>
|
||||||
|
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30">
|
||||||
|
<view class="bacf radius20 mar-s20 pad20">
|
||||||
|
<view class="fon28 col3 disjbac" style="height: 43rpx;">
|
||||||
|
<view class="bold">订单信息</view>
|
||||||
|
<view v-if="!cancle_del" @tap="cancle_del=true">管理</view>
|
||||||
|
<view v-else @tap="cancle_del=false" style="width: 113rpx;height: 43rpx;border-radius: 20rpx;background: #3875F6;text-align: center;color: #FFFFFF;line-height: 43rpx;">管理 ×</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="disjbac pad-sx40 bbot posir" style="overflow: hidden;" @touchstart="moveStart" @touchend="moveEnd">
|
||||||
|
<view class="disjbac" :style="{marginLeft:showDel?'-70px':'',paddingRight:showDel?'70px':''}">
|
||||||
|
<!-- 圈 -->
|
||||||
|
<image src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;flex-shrink: 0;" mode=""></image>
|
||||||
|
<image src="/static/tabbar/mya.png" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;flex-shrink: 0;margin: 0 12rpx 0 24rpx;" mode=""></image>
|
||||||
|
<view>
|
||||||
|
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
||||||
|
<view style="font-size: 22rpx;color: #808080;">试用</view>
|
||||||
|
<view class="disjbac mar-s10">
|
||||||
|
<view style="font-size: 32rpx;color: #F85050;font-weight: bold;">¥3888</view>
|
||||||
|
<view class="fon26 col3 disac bold" style="border-radius: 4rpx;overflow: hidden;">
|
||||||
|
<image src="/static/public/del.png" mode="" style="width: 46rpx;height: 26px;"></image>
|
||||||
|
<input type="text" value="1" style="width: 60rpx;height: 24px;text-align: center;border-top: 2rpx solid #3875F6;border-bottom: 2rpx solid #3875F6;"/>
|
||||||
|
<image src="/static/public/add.png" mode="" style="width: 46rpx;height: 26px;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="showDel" style="width: 117rpx;height: 205rpx;background: #F85050;line-height: 205rpx;text-align: center;color: #FFFFFF;font-size: 24rpx;flex-shrink: 0;position: absolute;right: 0;bottom: 40rpx;top: 2rpx;">删除</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac pad-sx40 bbot posir" style="overflow: hidden;" @touchstart="moveStart" @touchend="moveEnd">
|
||||||
|
<view class="disjbac" :style="{marginLeft:showDel?'-70px':'',paddingRight:showDel?'70px':''}">
|
||||||
|
<!-- 圈 -->
|
||||||
|
<image src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;flex-shrink: 0;" mode=""></image>
|
||||||
|
<image src="/static/tabbar/mya.png" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;flex-shrink: 0;margin: 0 12rpx 0 24rpx;" mode=""></image>
|
||||||
|
<view>
|
||||||
|
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
||||||
|
<view style="font-size: 22rpx;color: #808080;">试用</view>
|
||||||
|
<view class="disjbac mar-s10">
|
||||||
|
<view style="font-size: 32rpx;color: #F85050;font-weight: bold;">¥3888</view>
|
||||||
|
<view class="fon26 col3 disac bold" style="border-radius: 4rpx;overflow: hidden;">
|
||||||
|
<image src="/static/public/del.png" mode="" style="width: 46rpx;height: 26px;"></image>
|
||||||
|
<input type="text" value="1" style="width: 60rpx;height: 24px;text-align: center;border-top: 2rpx solid #3875F6;border-bottom: 2rpx solid #3875F6;"/>
|
||||||
|
<image src="/static/public/add.png" mode="" style="width: 46rpx;height: 26px;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="showDel" style="width: 117rpx;height: 205rpx;background: #F85050;line-height: 205rpx;text-align: center;color: #FFFFFF;font-size: 24rpx;flex-shrink: 0;position: absolute;right: 0;bottom: 40rpx;top: 2rpx;">删除</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac posixzy bacf" style="height: 124rpx;line-height: 124rpx;padding: 0 32rpx;">
|
||||||
|
<view class="disac">
|
||||||
|
<view style="width: 40rpx;height: 40rpx;border-radius: 100%;border: 2rpx solid #3875F6;flex-shrink: 0;display: flex;justify-content: center;align-items: center;">
|
||||||
|
<!-- <view style="width: 24rpx;height: 24rpx;background-color: #3875F6;border-radius: 100%;"></view> -->
|
||||||
|
</view>
|
||||||
|
<view class="fon28 col3 mar-z10">全选</view>
|
||||||
|
</view>
|
||||||
|
<!-- 去支付 -->
|
||||||
|
<view v-if="!cancle_del" class="disjbac">
|
||||||
|
<view>
|
||||||
|
<view class="fon28">合计:<span class="fon40 bold" style="color: #F85050;">¥7166.00</span></view>
|
||||||
|
</view>
|
||||||
|
<view @tap="goGetReadyDan" style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #3875F6;border-radius: 35rpx;margin-left: 10rpx;">去支付</view>
|
||||||
|
</view>
|
||||||
|
<!-- 删除 -->
|
||||||
|
<view v-else style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #F85050;border-radius: 35rpx;">删除</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||||||
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||||
|
showDel:false,
|
||||||
|
startX:'',//开始位置
|
||||||
|
endX:'',//结束位置
|
||||||
|
cancle_del:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.$toolAll.tools.isLogin()
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickGL(){
|
||||||
|
console.log('管理');
|
||||||
|
},
|
||||||
|
moveStart(e){
|
||||||
|
this.startX = e.touches[0].pageX
|
||||||
|
},
|
||||||
|
moveEnd(e){
|
||||||
|
this.endX = e.changedTouches[0].pageX
|
||||||
|
if(this.startX-this.endX>0){
|
||||||
|
this.showDel = true;
|
||||||
|
} else this.showDel = false;
|
||||||
|
},
|
||||||
|
goGetReadyDan(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesA/getReadyDan/getReadyDan'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,185 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 状态栏 -->
|
||||||
|
<status-nav :titleVal="'订单详情'" :statusTitle="true"></status-nav>
|
||||||
|
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
|
||||||
|
<!-- 订单类型 -->
|
||||||
|
<view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="bold">商城订单</view>
|
||||||
|
<view style="color: #F85050;font-weight: bold;">待付款</view>
|
||||||
|
</view>
|
||||||
|
<view class="bold col3 mar-s40 mar-x20">订单号:1234567890</view>
|
||||||
|
<view class="fon24 col9">2021-09-06 10:30</view>
|
||||||
|
</view>
|
||||||
|
<!-- 物流信息 -->
|
||||||
|
<view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">物流信息</view>
|
||||||
|
<view class="bold col3 mar-s40 fon26 disjbac">
|
||||||
|
<view>韵达快递:2983625984729</view>
|
||||||
|
<view>复制</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 地址信息 -->
|
||||||
|
<view v-if="isExpress" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">收件人信息</view>
|
||||||
|
<view class="fon26 col3">
|
||||||
|
<view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">蒋灰灰 <span>188****0362</span></view>
|
||||||
|
<view class="fon24 col9">四川省成都市成华区中环路双店路段奥园广场</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 订单信息 -->
|
||||||
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||||||
|
<image src="/static/public/banner.png" class="flexs" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;" mode="aspectFill"></image>
|
||||||
|
<view class="width100">
|
||||||
|
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
||||||
|
<view style="font-size: 22rpx;color: #808080;font-weight: 500;">试用</view>
|
||||||
|
<view class="disjbac mar-s10">
|
||||||
|
<view style="color: #F85050;font-size: 32rpx;font-weight: bold;">¥3888</view>
|
||||||
|
<view class="fon28 col6">x2</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 disjbac" style="margin: 60rpx 0 20rpx 0;">
|
||||||
|
<view class="col6">共4件</view>
|
||||||
|
<view style="font-weight: bold;color: #F85050;">应付款:3888.00+300孔雀币</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 优惠 -->
|
||||||
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">优惠</view>
|
||||||
|
<view @tap="showQuan=true" class="fon28 col3 disjbac mar-sx40">
|
||||||
|
<view>优惠券</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view style="color: #F85050;font-weight: bold;">-¥99.00</view>
|
||||||
|
<image src="/static/public/nextM.png" style="width: 16px;height: 16px;flex-shrink: 0;" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 col3 disjbac">
|
||||||
|
<view>立减优惠</view>
|
||||||
|
<view style="color: #F85050;font-weight: bold;">-¥99.00</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 快递费用 -->
|
||||||
|
<view class="bacf radius20 mar-s20 disjbac" style="padding: 27rpx 20rpx;">
|
||||||
|
<view class="bold">快递费用</view>
|
||||||
|
<view class="fon28" style="color: #F85050;font-weight: bold;">¥10.00</view>
|
||||||
|
</view>
|
||||||
|
<!-- 消费 -->
|
||||||
|
<view class="fon28 col3" style="margin: 40rpx 0 40rpx 0;text-align: right;">消费:<span style="font-size: 36rpx;font-weight: bold;color: #F85050;">¥3898+300孔雀币</span></view>
|
||||||
|
<view class="disjbac posixzy bacf" style="height: 124rpx;padding: 0 32rpx;display: flex;align-items: center;">
|
||||||
|
<view class="posir">
|
||||||
|
<image src="/static/public/weix.png" style="width: 56rpx;height: 56rpx;" mode=""></image>
|
||||||
|
<view class="fon28 col3">分享</view>
|
||||||
|
<button open-type="share" class="posia" style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;"></button>
|
||||||
|
</view>
|
||||||
|
<!-- 待收货 -->
|
||||||
|
<!-- <view class="disac">
|
||||||
|
<view style="width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #E9E9E9;color: #808080;">取消订单</view>
|
||||||
|
<view style="width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #3875F6;color: #FFFFFF;margin-left: 20rpx;">立即支付</view>
|
||||||
|
</view> -->
|
||||||
|
<!-- 确认收货 -->
|
||||||
|
<view style="width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #3875F6;color: #FFFFFF;margin-left: 20rpx;">确认收货</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="showQuan" @tap.stop="showQuan=false" class="posAll">
|
||||||
|
<view class="bacf posixzy" style="border-radius: 40rpx 40rpx 0rpx 0rpx;" @tap.stop="showQuan=true">
|
||||||
|
<view style="padding: 20rpx 50rpx;">
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="fon28 bold col3">优惠券</view>
|
||||||
|
<image @tap.stop="showQuan=false" src="/static/public/cha-close.png" style="width: 30rpx;height: 30rpx;" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 bold col3" style="display: flex;justify-content: space-around;align-items: center;padding: 50rpx 0 16rpx 0;">
|
||||||
|
<view class="posir" :class="switchQuan?'activeQuan':''" @tap="switchQuan=true">可用优惠券(1)</view>
|
||||||
|
<view class="posir" :class="!switchQuan?'activeQuan':''" @tap="switchQuan=false">失效优惠券(0)</view>
|
||||||
|
</view>
|
||||||
|
<view class="mar-s40">
|
||||||
|
<view style="height: 200rpx;" class="disjbac">
|
||||||
|
<view class="posir" style="width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;">
|
||||||
|
<image class="posia" src="/static/public/quan-left.png" style="width: 218rpx;height: 200rpx;left: 0;top: 0;" mode=""></image>
|
||||||
|
<view class="posir" style="z-index: 1;">
|
||||||
|
<view style="margin: 40rpx 0 30rpx 0rpx;" class="fon28">¥<span style="font-size: 56rpx;font-weight: bold;">10</span></view>
|
||||||
|
<view class="fon24">满300元可使用</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;">
|
||||||
|
<view class="fon28 col3 mar-s20">黄金会员专属优惠券</view>
|
||||||
|
<view>
|
||||||
|
<image src="/static/public/chooseQuan.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;float: right;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon20 col3 mar-x20">有效期:2021-09-06至2021-09-15</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="mar-s40">
|
||||||
|
<view style="height: 200rpx;" class="disjbac">
|
||||||
|
<view class="posir" style="width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;">
|
||||||
|
<image class="posia" src="/static/public/quan-left.png" style="width: 218rpx;height: 200rpx;left: 0;top: 0;" mode=""></image>
|
||||||
|
<view class="posir" style="z-index: 1;">
|
||||||
|
<view style="margin: 40rpx 0 30rpx 0rpx;" class="fon28">¥<span style="font-size: 56rpx;font-weight: bold;">10</span></view>
|
||||||
|
<view class="fon24">满300元可使用</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;">
|
||||||
|
<view class="fon28 col3 mar-s20">黄金会员专属优惠券</view>
|
||||||
|
<view>
|
||||||
|
<image src="/static/public/cancleQuan.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;float: right;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon20 col3 mar-x20">有效期:2021-09-06至2021-09-15</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 领取优惠券按钮 -->
|
||||||
|
<view @tap.stop="showQuan=false" style="font-size: 36rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 20rpx;height: 90rpx;line-height: 90rpx;text-align: center;margin-top: 156rpx;margin-bottom: 20rpx;">领取优惠券</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||||||
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||||
|
isExpress:true,
|
||||||
|
switchQuan:true,
|
||||||
|
showQuan:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.$toolAll.tools.isLogin()
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goThere(){
|
||||||
|
wx.getLocation({//获取当前经纬度
|
||||||
|
type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
|
||||||
|
success: function (res) {
|
||||||
|
wx.openLocation({//使用微信内置地图查看位置。
|
||||||
|
latitude: 22.5542080000,//要去的纬度-地址
|
||||||
|
longitude: 113.8878770000,//要去的经度-地址
|
||||||
|
name: "宝安中心A地铁口",
|
||||||
|
address:'宝安中心A地铁口'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goPayment(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesA/immediatePayment/immediatePayment'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,719 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 状态栏 -->
|
||||||
|
<status-nav v-if="invite_code==''" :titleVal="'商品详情'" :statusTitle="true"></status-nav>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<view :style="{top: statusHNH+'px'}" class="posiszy" style="height: 50px;">
|
||||||
|
<view class="bacf pad-zy32 pad-sx20">
|
||||||
|
<cate-pu @choosecateEv="choosecateEv" :activeb="invite_code!=''?'#3875F6':publicColor" :newCurrent="cateCurrent*1" :newbmo="'#F2F2F2'" :isCenter="false" :newcateList="cateList"></cate-pu>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-x180" :style="{paddingTop: (statusHNH+50)+'px'}">
|
||||||
|
<!-- 自定义轮播 -->
|
||||||
|
<swiper-pu :browseP="true" :bannerList="bannerList" :newHeight="'250'" :newRadius="'0'" :newBottom="'5'"></swiper-pu>
|
||||||
|
<view v-if="isLoading">
|
||||||
|
<view v-show="cateCurrent==isNum">
|
||||||
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="mar-x20 fon36 col3 bold clips3">
|
||||||
|
<span class="radius15 colf fon20" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">秃顶种植</span>
|
||||||
|
<span class="radius15 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">团购</span>
|
||||||
|
<span class="radius15 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</span>
|
||||||
|
<span class="radius15 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">促销活动</span>
|
||||||
|
<span style="line-height: 50rpx;">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人尖/头顶加密/微针/纤维/脱发</span>
|
||||||
|
</view>
|
||||||
|
<view class="fon24" style="color: #7D7D7D;">无任何额外消费</view>
|
||||||
|
<!-- 团购商品详情时显示 -->
|
||||||
|
<view class="disjbac fon24 mar-s20" style="color: #7D7D7D;">
|
||||||
|
<view>团购累计参与人员:300人</view>
|
||||||
|
<view>还剩余:60人</view>
|
||||||
|
</view>
|
||||||
|
<view class="mar-s20" style="color: #F85050;font-size: 40rpx;font-weight: bold;"><span>团购价:</span>¥3888 <span style="color: #B3B3B3;font-size: 24rpx;text-decoration: line-through;font-weight: 400;margin-left: 20rpx;">¥4205</span></view>
|
||||||
|
<view class="mar-s20" style="color: #F85050;font-size: 40rpx;font-weight: bold;"><span>拼团价:</span>¥3888 <span style="color: #B3B3B3;font-size: 24rpx;text-decoration: line-through;font-weight: 400;margin-left: 20rpx;">¥4205</span></view>
|
||||||
|
<view class="disjbac" style="align-items: flex-end;margin-top: -20rpx;padding-bottom: 20rpx;">
|
||||||
|
<view class="disac">
|
||||||
|
<image class="flexs" src="/static/public/huiy.png" style="width: 42rpx;height: 30rpx;" mode="aspectFill"></image>
|
||||||
|
<view class="fon24 col9">黄金会员可购买</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac flexs">
|
||||||
|
<view @tap="shareEv" class="disac fc mar-zy36 posir">
|
||||||
|
<image src="/static/public/weix.png" style="width: 42rpx;height: 42rpx;" mode=""></image>
|
||||||
|
<view class="fon24 col9">分享</view>
|
||||||
|
<button class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button>
|
||||||
|
<!-- <button v-if="haveImg" class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button> -->
|
||||||
|
</view>
|
||||||
|
<view class="disac fc" @tap="tapConllection">
|
||||||
|
<image v-if="isDetailConllection" src="/static/public/yconllection.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
|
||||||
|
<image v-else src="/static/public/conllection.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
|
||||||
|
<view class="fon24 col9">收藏</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-x30 pad-s10" style="border-bottom: 2rpx solid #E6E6E6;">
|
||||||
|
<view class="fon36 colf bold pbackc tc pad-sx20" style="border-radius: 45rpx;">倒计时:25小时35分26秒</view>
|
||||||
|
</view>
|
||||||
|
<!-- 规格 -->
|
||||||
|
<view class="disjbac tc mar-s20">
|
||||||
|
<view class="disjcac fon28 col3">规格:</view>
|
||||||
|
<view>
|
||||||
|
<view class="fon26 col3 mar-x20">上市时间</view>
|
||||||
|
<view class="fon24" style="color: #B3B3B3;">2021.02.01</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="fon26 col3 mar-x20">有效期</view>
|
||||||
|
<view class="fon24" style="color: #B3B3B3;">三个月</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="fon26 col3 mar-x20">可用时间</view>
|
||||||
|
<view class="fon24" style="color: #B3B3B3;">正常使用</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="fon26 col3 mar-x20">术前须知</view>
|
||||||
|
<view class="fon24" style="color: #B3B3B3;">无</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 销量,库存 -->
|
||||||
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||||||
|
<view class="fon28 disjbac">
|
||||||
|
<view class="col3">销量:</view>
|
||||||
|
<view style="color: #B3B3B3;">已售30件</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon28 disjbac mar-s40">
|
||||||
|
<view class="col3">库存:</view>
|
||||||
|
<view style="color: #B3B3B3;">剩余3000件</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 拼团 -->
|
||||||
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||||||
|
<view class="fon28 col3">2人正在拼团,可以直接参与</view>
|
||||||
|
<swiper :autoplay="true" :interval="3000" :duration="1000" circular="true" vertical="true" style="height: 176px;">
|
||||||
|
<swiper-item>
|
||||||
|
<view class="disjbac posir pad-sx20">
|
||||||
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
||||||
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
||||||
|
<view class="fon28 col3" style="width: 45%;">廖恒利</view>
|
||||||
|
<view class="fon28 disjbac" style="color: #7D7D7D;width: 55%;">
|
||||||
|
<view>
|
||||||
|
<view>还差1人拼成</view>
|
||||||
|
<view style="margin-top: 7rpx;">剩余19:47:28</view>
|
||||||
|
</view>
|
||||||
|
<view @tap="comeTuan" class="colf bold" style="width: 140rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #F85050;border-radius: 20rpx;">去拼单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="border-bottom: 2rpx solid #E6E6E6;position: absolute;bottom: 0;width: 87%;right: 0;"></view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac posir pad-sx20">
|
||||||
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
||||||
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
||||||
|
<view class="fon28 col3" style="width: 45%;">廖恒利</view>
|
||||||
|
<view class="fon28 disjbac" style="color: #7D7D7D;width: 55%;">
|
||||||
|
<view>
|
||||||
|
<view>还差1人拼成</view>
|
||||||
|
<view style="margin-top: 7rpx;">剩余19:47:28</view>
|
||||||
|
</view>
|
||||||
|
<view @tap="comeTuan" class="colf bold" style="width: 140rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #F85050;border-radius: 20rpx;">去拼单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view style="border-bottom: 2rpx solid #E6E6E6;position: absolute;bottom: 0;width: 87%;right: 0;"></view> -->
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<view class="disjbac posir pad-sx20">
|
||||||
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
||||||
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
||||||
|
<view class="fon28 col3" style="width: 45%;">廖恒利</view>
|
||||||
|
<view class="fon28 disjbac" style="color: #7D7D7D;width: 55%;">
|
||||||
|
<view>
|
||||||
|
<view>还差1人拼成</view>
|
||||||
|
<view style="margin-top: 7rpx;">剩余19:47:28</view>
|
||||||
|
</view>
|
||||||
|
<view @tap="comeTuan" class="colf bold" style="width: 140rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #F85050;border-radius: 20rpx;">去拼单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<!-- 详情 -->
|
||||||
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||||||
|
<view class="fon28 col3 bold">产品详情</view>
|
||||||
|
<view class="fon28 mar-s20" style="color: #1A1A1A; line-height: 40rpx;">
|
||||||
|
<rich-text :nodes="detailInfo"></rich-text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 医生 -->
|
||||||
|
<view class="pad20 bacf mar-zy20 radius20 mar-s20">
|
||||||
|
<view class="fon28 col3 bold">医生</view>
|
||||||
|
<view class="disjbac posir pad-sx20">
|
||||||
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
||||||
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
||||||
|
<view class="fon28 col3" style="width: 50%;">廖恒利医生</view>
|
||||||
|
<view class="fon24" style="color: #7D7D7D;width: 50%;">擅长:毛发种植</view>
|
||||||
|
</view>
|
||||||
|
<view style="border-bottom: 2rpx solid #E6E6E6;position: absolute;bottom: 0;width: 87%;right: 0;"></view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac pad-sx20">
|
||||||
|
<image src="/static/public/like.png" mode="aspectFill" class="flexs" style="width: 70rpx;height: 70rpx; border-radius: 100%;"></image>
|
||||||
|
<view class="disjbac width100 mar-z20 pad-sx20">
|
||||||
|
<view class="fon28 col3" style="width: 50%;">廖恒利医生</view>
|
||||||
|
<view class="fon24" style="color: #7D7D7D;width: 50%;">擅长:毛发种植</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 产品推荐 -->
|
||||||
|
<view class="fon30 bold mar-s40 mar-x10 pad-zy50" style="color: #3875F6;">产品推荐</view>
|
||||||
|
<shopList></shopList>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 底部导航 -->
|
||||||
|
<view class="posixzy disjbac bacf pad-zy32 btnBKS">
|
||||||
|
<view class="posir">
|
||||||
|
<image @tap="backHome" class="posia backH" src="/static/public/back-home.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="disac fon26 colf">
|
||||||
|
<view @tap="showTK=true" class="disjcac lianShare" style="background-color: #3875F6; border-top-left-radius: 51rpx;border-bottom-left-radius: 51rpx;">加入购物车</view>
|
||||||
|
<view @tap="showTK=true" class="disjcac lianShare" style="background-color: #F85050;border-top-right-radius: 51rpx;border-bottom-right-radius: 51rpx;">立即购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 购物车 -->
|
||||||
|
<navigator url="/pagesA/shopCart/shopCart" hover-class="none">
|
||||||
|
<view style="position: fixed;right: 30rpx;bottom: 300rpx;">
|
||||||
|
<view class="posir" style="width: 112rpx;height: 112rpx;">
|
||||||
|
<image src="/static/public/cart.png" mode="aspectFill" style="width: 112rpx;height: 112rpx;"></image>
|
||||||
|
<view class="posia" style="background: #F85050;width: 28rpx;height: 28rpx;border-radius: 100%;color: #FFFFFF;font-size: 24rpx;text-align: center;line-height: 28rpx;top: 20rpx;right: 20rpx;"><view style="transform: scale(.8);">99</view></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<!-- 客服 -->
|
||||||
|
<view style="position: fixed;right: 16rpx;bottom: 140rpx;">
|
||||||
|
<view class="posir" style="width: 142rpx;height: 142rpx;">
|
||||||
|
<image src="/static/public/kf-logo.png" mode="aspectFill" style="width: 142rpx;height: 142rpx;"></image>
|
||||||
|
<button open-type="share" class="posia syxzo"></button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 立即购买,加入购物车弹框 -->
|
||||||
|
<view v-if="showTK" class="posAll" @tap="showTK=false">
|
||||||
|
<view class="bacf posixzy" @tap.stop="showTK=true" style="border-radius: 40rpx 40rpx 0rpx 0rpx;">
|
||||||
|
<view class="disjb pad-zy50">
|
||||||
|
<image src="/static/public/like.png" mode="aspectFill" style="width: 214rpx;height: 214rpx;border-radius: 15rpx;bottom: 0;flex-shrink: 0;margin-top: -107rpx;margin-right: 30rpx;"></image>
|
||||||
|
<view class="disjb width100">
|
||||||
|
<view>
|
||||||
|
<view class="fon40 mar-sx10" style="color: #F85050;">¥3888</view>
|
||||||
|
<view><span style="color: #B3B3B3;font-size: 24rpx;text-decoration: line-through;font-weight: 400;">¥4205</span></view>
|
||||||
|
</view>
|
||||||
|
<image @tap.stop="showTK=false" src="../../static/public/cha-close.png" style="width: 24px;height: 24px;margin-top: 20rpx;" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="fon36 col3 bold clips3 pad-zy30 mar-s20">
|
||||||
|
<span class="radius10 colf fon20" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">秃顶种植</span>
|
||||||
|
<span class="radius10 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">团购</span>
|
||||||
|
<span class="radius10 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</span>
|
||||||
|
<span class="radius10 colf fon20 mar-z10" style="padding: 6rpx 10rpx;background: #F85050;">促销活动</span>
|
||||||
|
<span style="line-height: 50rpx;">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人尖/头顶加密/微针/纤维/脱发</span>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-sx40 pad-zy30 col3">
|
||||||
|
<view class="fon28">类型:</view>
|
||||||
|
<view class="fon26 disac">
|
||||||
|
<view @tap="chooselei(indexl)" v-for="(item,indexl) in leiList" :key="indexl" :class="leiIndex==indexl?'activelei':'molei'" :style="{background:leiIndex==indexl?publicColor:'#F2F2F2'}">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-sx40 pad-zy30 fon28">
|
||||||
|
<view class="col3">库存:</view>
|
||||||
|
<view class="fon26 col3" style="color: #5B5B5B;">1000件</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-sx40 pad-zy30 fon28">
|
||||||
|
<view class="col3">购买数量:</view>
|
||||||
|
<view class="fon26 col3 disac bold">
|
||||||
|
<image src="../../static/public/del.png" mode="" style="width: 65rpx;height: 30px;"></image>
|
||||||
|
<input type="text" value="1" style="width: 100rpx;height: 28px;text-align: center;border-top: 2rpx solid #3875F6;border-bottom: 2rpx solid #3875F6;"/>
|
||||||
|
<image src="../../static/public/add.png" mode="" style="width: 65rpx;height: 30px;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 加入购物车,立即购买 -->
|
||||||
|
<view class="disjbac pad-zy30 colf fon28 mar-x20">
|
||||||
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #3875F6;">加入购物车</view>
|
||||||
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #F85050;">立即购买</view>
|
||||||
|
</view>
|
||||||
|
<!-- 单独购买,立即拼团 -->
|
||||||
|
<view class="disjbac pad-zy30 colf fon28 mar-x20">
|
||||||
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #C8C8C8;">单独购买</view>
|
||||||
|
<view style="width: 294rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 10rpx; background: #F85050;">立即拼团</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 去拼单弹框 -->
|
||||||
|
<view v-if="showPD" @tap.stop="showPD=false" style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 6;background: rgba(0,0,0,.54);display: flex;justify-content: center;align-items: center;">
|
||||||
|
<view class="bacf radius20 width100 posir" @tap.stop="showPD=true" style="font-weight: 500;text-align: center;margin: 0 85rpx;height: 458rpx;">
|
||||||
|
<view class="fon28 col3" style="margin: 34rpx 0 27rpx 0;">参与廖恒利的拼单</view>
|
||||||
|
<view class="fon24 col3" style="margin-bottom: 63rpx;">仅剩1个名额,19:05:28后结束</view>
|
||||||
|
<view class="disjcac" style="margin-bottom: 77rpx;">
|
||||||
|
<image src="/static/public/like.png" mode="" style="width: 100rpx;height: 100rpx;border-radius: 100%;"></image>
|
||||||
|
<image src="/static/public/pin-jie.png" mode="" style="width: 42rpx;height: 42rpx;margin: 0 47rpx;"></image>
|
||||||
|
<image src="/static/public/weiz.png" mode="" style="width: 100rpx;height: 100rpx;border-radius: 100%;"></image>
|
||||||
|
</view>
|
||||||
|
<view style="width: 464rpx;height: 60rpx;line-height: 60rpx;color: #FFFFFF;background: #F85050;border-radius: 10rpx;margin: 0 auto;font-size: 28rpx;">参与拼单</view>
|
||||||
|
<image @tap.stop="showPD=false" src="../../static/public/pin-close.png" class="posia" style="width: 77rpx;height: 77rpx;right: -30rpx;top: -30rpx;" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 返回顶部 -->
|
||||||
|
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
||||||
|
<!-- 弹框授权 -->
|
||||||
|
<empower @buttonH="buttonH" :vision="vision" :isWhere="2" @cancleEv="cancleEv"></empower>
|
||||||
|
<!-- 弹框 -->
|
||||||
|
<view v-if="isShowP" @touchmove.stop.prevent="moveHandle" class="disjcac posAll">
|
||||||
|
<view class="bacf radius20 width100 tank-box">
|
||||||
|
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
||||||
|
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
||||||
|
<view @tap="isShowP=false" class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||||||
|
<view class="pad-sx10 radius10 tank-btn posir pbackc">
|
||||||
|
立即绑定
|
||||||
|
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import listDoctor from '@/components/list-doctor.vue';
|
||||||
|
import swiperPu from '@/components/swiper-pu.vue';
|
||||||
|
import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
|
||||||
|
import empower from '@/components/empower.vue';
|
||||||
|
import shopList from '@/components/shop-list.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
listDoctor,
|
||||||
|
swiperPu,
|
||||||
|
empower,
|
||||||
|
shopList
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
||||||
|
isLoading:true,
|
||||||
|
vision:false,
|
||||||
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||||||
|
publicColor:uni.getStorageSync('publicColor') || '#3875F6',//主题颜色
|
||||||
|
cateCurrent:0,
|
||||||
|
haveImg:true,
|
||||||
|
cateList:[
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
title:'商品详情',
|
||||||
|
pid:11,
|
||||||
|
sort:4
|
||||||
|
},{
|
||||||
|
id:2,
|
||||||
|
title:'问题',
|
||||||
|
pid:22,
|
||||||
|
sort:4
|
||||||
|
},{
|
||||||
|
id:3,
|
||||||
|
title:'案例日记',
|
||||||
|
pid:33,
|
||||||
|
sort:4
|
||||||
|
},{
|
||||||
|
id:4,
|
||||||
|
title:'效果模拟',
|
||||||
|
pid:33,
|
||||||
|
sort:4
|
||||||
|
},{
|
||||||
|
id:5,
|
||||||
|
title:'科普视频',
|
||||||
|
pid:33,
|
||||||
|
sort:4
|
||||||
|
}],
|
||||||
|
bannerList:[
|
||||||
|
{imgSrc:'/static/public/banner.png',url:'',isVideo:true,poster:''},
|
||||||
|
{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''}
|
||||||
|
],//轮播
|
||||||
|
xgList:[//相关推荐
|
||||||
|
],
|
||||||
|
dataList:[//推荐医生
|
||||||
|
],
|
||||||
|
showTop:false,
|
||||||
|
isDetailConllection:false,//是否已收藏
|
||||||
|
isNum:0,
|
||||||
|
listArrone:[],//问题
|
||||||
|
listArrtwo:[//案例日记
|
||||||
|
],
|
||||||
|
listArrthree:[//效果模拟
|
||||||
|
],
|
||||||
|
listArrfour:[//科普视频
|
||||||
|
],
|
||||||
|
detailObj:{},//详情
|
||||||
|
detailInfo:'',//富文本
|
||||||
|
category_id:'',//栏目ID
|
||||||
|
active:'',//是否是详情页
|
||||||
|
// jieDuan:false,
|
||||||
|
share_id:0,
|
||||||
|
invite_code:'',
|
||||||
|
isShowP:false,
|
||||||
|
showTK:false,
|
||||||
|
leiIndex:0,
|
||||||
|
leiList:['体验装','正式装'],
|
||||||
|
showPD:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||||||
|
},
|
||||||
|
onReachBottom() {//触底事件
|
||||||
|
// for (let i = 0; i < 4; i++) {
|
||||||
|
// if(this.cateCurrent==0) {
|
||||||
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉?',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:0}
|
||||||
|
// this.listArrone.push(obj)
|
||||||
|
// }
|
||||||
|
// if(this.cateCurrent==1) {
|
||||||
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉?',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:1}
|
||||||
|
// this.listArrtwo.push(obj)
|
||||||
|
// }
|
||||||
|
// if(this.cateCurrent==2) {
|
||||||
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉?',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:2}
|
||||||
|
// this.listArrthree.push(obj)
|
||||||
|
// }
|
||||||
|
// if(this.cateCurrent==3) {
|
||||||
|
// let obj = {status:false,main_img:'',title:'恒美小课堂',content:'饺子会吃肉?',head_img:'/static/public/like.png',name:'吃肉的饺子',isCate:3}
|
||||||
|
// this.listArrfour.push(obj)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
onShareTimeline() {},
|
||||||
|
onShareAppMessage(res) {
|
||||||
|
var ya = this;
|
||||||
|
this.$requst.post('user/record',{type:'content',action:'share',id:this.detailObj.id}).then(res=>{console.log('分享成功:',res);},error=>{})
|
||||||
|
let maiOjb = {
|
||||||
|
e:4,//内容分享
|
||||||
|
c:this.detailObj.id*1,
|
||||||
|
t:new Date().getTime()//当前时间戳
|
||||||
|
}
|
||||||
|
this.$toolAll.tools.maiDian(maiOjb)
|
||||||
|
var shareObj = {
|
||||||
|
title: `${ya.detailObj.title}`, // 默认是小程序的名称(可以写slogan等)
|
||||||
|
path: `/pagesB/problemDetail/problemDetail?id=${this.detailObj.id}&category_id=${this.category_id}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面,必须是以‘/’开头的完整路径
|
||||||
|
imageUrl: ya.$http + ya.detailObj.share_img//自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||||||
|
};
|
||||||
|
return shareObj;
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if(options.category_id!=undefined) {
|
||||||
|
this.category_id = options.category_id
|
||||||
|
this.conid = options.id
|
||||||
|
this.invite_code = options.invite_code
|
||||||
|
uni.setStorageSync('ninvite_code',this.invite_code)
|
||||||
|
if(this.invite_code!='' && this.invite_code!=undefined){
|
||||||
|
uni.login({
|
||||||
|
provider: 'weixin',
|
||||||
|
success: (res)=> {
|
||||||
|
if (res.code) {
|
||||||
|
var params = {
|
||||||
|
code:res.code,
|
||||||
|
invite_code:this.invite_code,//用户邀请码
|
||||||
|
}
|
||||||
|
this.$requst.post('user/login',params).then(res => {
|
||||||
|
if(res.data.token!=''){
|
||||||
|
if(res.data.is_active==0) {
|
||||||
|
this.haveImg = false
|
||||||
|
this.vision = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},error => {})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$toolAll.tools.overdue()
|
||||||
|
this.$toolAll.tools.isLogin()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.checkDetail(this.conid)
|
||||||
|
if(options.share_id!=undefined) this.share_id = options.share_id
|
||||||
|
let maiOjb = {
|
||||||
|
e:4,//内容分享
|
||||||
|
c:this.conid*1,
|
||||||
|
t:new Date().getTime()//当前时间戳
|
||||||
|
}
|
||||||
|
this.$toolAll.tools.maiDian(maiOjb)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
comeTuan(){//去拼单
|
||||||
|
this.showPD = true;
|
||||||
|
},
|
||||||
|
chooselei(index){//类型选择
|
||||||
|
this.leiIndex = index
|
||||||
|
},
|
||||||
|
moveHandle(){//禁止底层滑动
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
getphonenumber(e){//授权绑定手机号
|
||||||
|
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||||||
|
this.$requst.post('user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||||||
|
// console.log('手机号信息:',res);
|
||||||
|
if(res.code==0){
|
||||||
|
this.isShowP = false
|
||||||
|
this.$toolAll.tools.showToast('手机号绑定成功','success')
|
||||||
|
}
|
||||||
|
},error=>{})
|
||||||
|
} else {
|
||||||
|
this.isShowP = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chooseLike(e){//收藏事件
|
||||||
|
// console.log(this.dataList[e].is_collected);
|
||||||
|
let cateId = ''
|
||||||
|
let newArr = []
|
||||||
|
if(this.cateCurrent==0) {
|
||||||
|
newArr = this.listArrone
|
||||||
|
cateId = newArr[e].id
|
||||||
|
}
|
||||||
|
if(this.cateCurrent==1) {
|
||||||
|
newArr = this.listArrtwo
|
||||||
|
cateId = newArr[e].id
|
||||||
|
}
|
||||||
|
if(this.cateCurrent==2) {
|
||||||
|
newArr = this.listArrthree
|
||||||
|
cateId = newArr[e].id
|
||||||
|
}
|
||||||
|
if(this.cateCurrent==3) {
|
||||||
|
newArr = this.listArrfour
|
||||||
|
cateId = newArr[e].id
|
||||||
|
}
|
||||||
|
if(newArr[e].is_collected==0){
|
||||||
|
newArr[e].is_collected = 1
|
||||||
|
// 调用收藏事件
|
||||||
|
collectionEV({action:'collect',archive_id:cateId})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
comfirmev(e){//确认取消收藏事件
|
||||||
|
let cateId = ''
|
||||||
|
if(this.cateCurrent==0) {
|
||||||
|
this.listArrone[e].is_collected = 0
|
||||||
|
cateId = this.listArrone[e].id
|
||||||
|
}
|
||||||
|
if(this.cateCurrent==1) {
|
||||||
|
this.listArrtwo[e].is_collected = 0
|
||||||
|
cateId = this.listArrtwo[e].id
|
||||||
|
}
|
||||||
|
if(this.cateCurrent==2) {
|
||||||
|
this.listArrthree[e].is_collected = 0
|
||||||
|
cateId = this.listArrthree[e].id
|
||||||
|
}
|
||||||
|
if(this.cateCurrent==3) {
|
||||||
|
this.listArrfour[e].is_collected = 0
|
||||||
|
cateId = this.listArrfour[e].id
|
||||||
|
}
|
||||||
|
this.$toolAll.tools.showToast('正在取消...','loading')
|
||||||
|
// 调用取消收藏事件
|
||||||
|
cancleCollectionEV({action:'collect',archive_id:cateId})
|
||||||
|
},
|
||||||
|
chooseLikex(e){//收藏事件
|
||||||
|
if(this.xgList[e].is_collected==0){
|
||||||
|
this.xgList[e].is_collected = 1
|
||||||
|
// 调用收藏事件
|
||||||
|
collectionEV({action:'collect',archive_id:this.xgList[e].id})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
comfirmevx(e){//确认取消收藏事件
|
||||||
|
this.xgList[e].is_collected = 0
|
||||||
|
this.$toolAll.tools.showToast('正在取消...','loading')
|
||||||
|
// 调用取消收藏事件
|
||||||
|
cancleCollectionEV({action:'collect',archive_id:this.xgList[e].id})
|
||||||
|
},
|
||||||
|
buttonH(e){//授权成功
|
||||||
|
this.haveImg = e
|
||||||
|
if(e) {
|
||||||
|
this.vision = false
|
||||||
|
this.isShowP = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancleEv(e){//取消授权
|
||||||
|
if(e==0) this.vision = false
|
||||||
|
},
|
||||||
|
backHome(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/tabbar/pagehome/pagehome'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
shareEv(){
|
||||||
|
if(this.haveImg == false) {
|
||||||
|
this.vision = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// checkDetail(newId){
|
||||||
|
// this.$requst.post('archives/detail',{id:newId,share_id:this.share_id}).then(res=>{
|
||||||
|
// // console.log('详情数据:',res);
|
||||||
|
// if(res.code==0){
|
||||||
|
// this.isLoading=true
|
||||||
|
// // 栏目类别
|
||||||
|
// if(res.data.category.length!=0){
|
||||||
|
// res.data.category.forEach((item,index)=>{
|
||||||
|
// let cateObj = {
|
||||||
|
// id:item.id,//栏目ID
|
||||||
|
// title:item.title,//栏目名称
|
||||||
|
// active:item.active,//是否选中
|
||||||
|
// model_id:item.model_id,//模型ID
|
||||||
|
// model_name:item.model_name,//模型标识
|
||||||
|
// sort:item.sort
|
||||||
|
// }
|
||||||
|
// this.cateList.push(cateObj)
|
||||||
|
// // 默认选中的栏目
|
||||||
|
// if(item.active==1) this.active = this.cateCurrent = index
|
||||||
|
// // 默认展示栏目详情
|
||||||
|
// if(this.category_id==item.id) this.isNum = index
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// if(this.invite_code!='' && this.invite_code!=undefined){
|
||||||
|
// const query = wx.createSelectorQuery()
|
||||||
|
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||||||
|
// // console.log('状态栏+标题栏:',rect);
|
||||||
|
// this.statusHNH = rect.height
|
||||||
|
// // console.log(this.statusHNH );
|
||||||
|
// }).exec()
|
||||||
|
// }
|
||||||
|
// // 详情
|
||||||
|
// this.detailObj = res.data.detail
|
||||||
|
// let maiOjb = {
|
||||||
|
// e:1,//内容访问
|
||||||
|
// c:this.detailObj.id*1,
|
||||||
|
// t:new Date().getTime()//当前时间戳
|
||||||
|
// }
|
||||||
|
// this.$toolAll.tools.maiDian(maiOjb)
|
||||||
|
// // 轮播
|
||||||
|
// // 图片字符串转数组
|
||||||
|
// let arrImg = this.detailObj.images.split(',')
|
||||||
|
// arrImg.forEach(item=>{
|
||||||
|
// let newImgObj = {
|
||||||
|
// imgSrc:this.$http + item,
|
||||||
|
// url:'',
|
||||||
|
// isVideo:false,
|
||||||
|
// poster:'',
|
||||||
|
// }
|
||||||
|
// // 存图片
|
||||||
|
// this.bannerList.push(newImgObj)
|
||||||
|
// })
|
||||||
|
// // 存视频
|
||||||
|
// if(this.detailObj.video!=''){
|
||||||
|
// this.bannerList[0] = {
|
||||||
|
// imgSrc:this.$http + arrImg[0],
|
||||||
|
// url:this.$http + this.detailObj.video,
|
||||||
|
// isVideo:true,
|
||||||
|
// poster:'',
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // 默认显示是否收藏
|
||||||
|
// if(this.detailObj.is_collected==0) this.isDetailConllection = false
|
||||||
|
// if(this.detailObj.is_collected==1) this.isDetailConllection = true
|
||||||
|
// // 富文本
|
||||||
|
// this.detailInfo = this.$toolAll.tools.escape2Html(this.detailObj.content)
|
||||||
|
// // 相关推荐xgList
|
||||||
|
// if(res.data.diary.length!=0){
|
||||||
|
// res.data.diary.forEach(item=>{
|
||||||
|
// let tObj = {
|
||||||
|
// category_id:item.category_id,//栏目ID
|
||||||
|
// id:item.id,
|
||||||
|
// is_collected:item.is_collected,//是否已收藏
|
||||||
|
// collects:item.collects,//收藏量
|
||||||
|
// views:item.views,//查看量
|
||||||
|
// main_img:this.$http + item.cover,//封面图
|
||||||
|
// video:this.$http + item.video,//视频地址
|
||||||
|
// title:item.title,//标题
|
||||||
|
// content:item.subtitle,//副标题
|
||||||
|
// head_img:'/static/public/logo.png',//发布者头像
|
||||||
|
// name:'恒美植发',//发布者昵称
|
||||||
|
// isVideo:item.video.includes(".mp4")//是否是视频
|
||||||
|
// }
|
||||||
|
// if(item.cover!='' && item.video==''){
|
||||||
|
// this.xgList.push(tObj)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// // 推荐医生
|
||||||
|
// if(res.data.doctor.length!=0){
|
||||||
|
// res.data.doctor.forEach(item=>{
|
||||||
|
// let doObj = {
|
||||||
|
// id:item.id,
|
||||||
|
// imgSrc: item.headimg!=null ? item.headimg : '',
|
||||||
|
// name:item.name,
|
||||||
|
// cyear:parseFloat(item.work_time),
|
||||||
|
// bmen:item.dept_name,
|
||||||
|
// zcheng:'主任医师',
|
||||||
|
// goodAt:item.diseases,
|
||||||
|
// show_detail:item.show_detail
|
||||||
|
// }
|
||||||
|
// this.dataList.push(doObj)
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// this.choosecateEv(this.cateCurrent)
|
||||||
|
// }
|
||||||
|
// },error=>{})
|
||||||
|
// },
|
||||||
|
choosecateEv(e){
|
||||||
|
this.cateCurrent = e
|
||||||
|
this.$requst.post('archives/category',{category_id:this.cateList[e].id,keyword:''}).then(res=>{
|
||||||
|
// console.log('该分类下的列表:',res);
|
||||||
|
if(res.code==0){
|
||||||
|
if(e==0 && this.active!=e) this.listArrone = []
|
||||||
|
if(e==1 && this.active!=e) this.listArrtwo = []
|
||||||
|
if(e==2 && this.active!=e) this.listArrthree = []
|
||||||
|
if(e==3 && this.active!=e) this.listArrfour = []
|
||||||
|
if(res.data.list.list.length!=0){
|
||||||
|
res.data.list.list.forEach(item=>{
|
||||||
|
let num = item.video.search(".mp4")
|
||||||
|
let isVideo = false
|
||||||
|
if(num!='-1') isVideo = true
|
||||||
|
let arrObj = {
|
||||||
|
category_id:item.category_id,//栏目ID
|
||||||
|
id:item.id,
|
||||||
|
is_collected:item.is_collected,//是否已收藏
|
||||||
|
collects:item.collects,//收藏量
|
||||||
|
views:item.views,//查看量
|
||||||
|
main_img:this.$http + item.cover,//封面图
|
||||||
|
video:this.$http + item.video,//视频地址
|
||||||
|
title:item.title,//标题
|
||||||
|
content:item.subtitle,//副标题
|
||||||
|
head_img:'/static/public/logo.png',//发布者头像
|
||||||
|
name:'恒美植发',//发布者昵称
|
||||||
|
isVideo:isVideo//是否是视频
|
||||||
|
}
|
||||||
|
if(item.cover!=''){
|
||||||
|
if(e==0 && this.active!=e) this.listArrone.push(arrObj)
|
||||||
|
if(e==1 && this.active!=e) this.listArrtwo.push(arrObj)
|
||||||
|
if(e==2 && this.active!=e) this.listArrthree.push(arrObj)
|
||||||
|
if(e==3 && this.active!=e) this.listArrfour.push(arrObj)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},error=>{})
|
||||||
|
},
|
||||||
|
tapConllection(){//收藏、取消收藏事件
|
||||||
|
let isLikeCon = 'collect'
|
||||||
|
// if(!this.jieDuan){
|
||||||
|
// let isAuth = this.$toolAll.tools.returnAuth()
|
||||||
|
// if(!isAuth){
|
||||||
|
// 调用收藏事件
|
||||||
|
if(!this.isDetailConllection) collectionEV({action:isLikeCon,archive_id:this.detailObj.id})
|
||||||
|
// 调用取消收藏事件
|
||||||
|
else cancleCollectionEV({action:isLikeCon,archive_id:this.detailObj.id})
|
||||||
|
this.isDetailConllection = !this.isDetailConllection
|
||||||
|
// } else this.jieDuan = true
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
backTop(){//回到顶部事件
|
||||||
|
uni.pageScrollTo({
|
||||||
|
scrollTop: 0,
|
||||||
|
duration: 300
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
After Width: | Height: | Size: 383 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 976 B |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 297 B |
After Width: | Height: | Size: 1011 B |
After Width: | Height: | Size: 7.7 KiB |
After Width: | Height: | Size: 6.5 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 227 B |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 248 B |
After Width: | Height: | Size: 289 B |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 197 KiB |