jiazhipeng
4 months ago
15 changed files with 1982 additions and 115 deletions
@ -0,0 +1,457 @@ |
|||
<template> |
|||
<view class="bg" > |
|||
<view class="goods-container"> |
|||
<view class="goods-type-tag">酒店</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="goods-container"> |
|||
<view class="goods-type-tag">自提</view> |
|||
<view class="post-item" v-for="(item,i) in pickupOrderList" :key="i"> |
|||
<view class="sku-item"> |
|||
<image class="sku-img" :src="item.sInfo.headimg"></image> |
|||
<view class="sku-content"> |
|||
<view class="sku-title flex-between" style="align-items: flex-start;"> |
|||
<view class="title flex-1 w-1rpx text-overflowRows">{{item.pInfo.title}}</view> |
|||
<view class="flex-shrink-0 price">￥{{item.sInfo.price/100}}</view> |
|||
</view> |
|||
<view class="flex-between subtitle" > |
|||
<view class=" flex-1 w-1rpx text-overflow">{{item.sInfo.sku_name}}</view> |
|||
<view class="flex-shrink-0">x{{item.sInfo.buyNum}}</view> |
|||
</view> |
|||
<view class="flex text-overflow" v-if="item.sInfo.display_tags"> |
|||
<view class="tag" v-for="(tag,tagIndex) in info.display_tags.split(',')" :key="tagIndex">{{tag}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other-info"> |
|||
<view class="flex-between"> |
|||
<view>自提点:</view> |
|||
<view>{{item.pickupAddress.title}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="cal-price"> |
|||
小计: <text class="price">205</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="goods-container"> |
|||
<view class="goods-type-tag">邮寄</view> |
|||
<view class="post-item" v-for="(item,i) in postOrderList" :key="i"> |
|||
<view class="sku-item"> |
|||
<image class="sku-img" :src="item.sInfo.headimg"></image> |
|||
<view class="sku-content"> |
|||
<view class="sku-title flex-between" style="align-items: flex-start;"> |
|||
<view class="title flex-1 w-1rpx text-overflowRows">{{item.pInfo.title}}</view> |
|||
<view class="flex-shrink-0 price">￥{{item.sInfo.price/100}}</view> |
|||
</view> |
|||
<view class="flex-between subtitle" > |
|||
<view class=" flex-1 w-1rpx text-overflow">{{item.sInfo.sku_name}}</view> |
|||
<view class="flex-shrink-0">x{{item.sInfo.buyNum}}</view> |
|||
</view> |
|||
<view class="flex text-overflow" v-if="item.sInfo.display_tags"> |
|||
<view class="tag" v-for="(tag,tagIndex) in info.display_tags.split(',')" :key="tagIndex">{{tag}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="other-info"> |
|||
<view class="flex-between"> |
|||
<view>运费:</view> |
|||
<view>￥{{item.post}}</view> |
|||
</view> |
|||
<view class="flex-between" style="align-items: flex-start;"> |
|||
<view class="flex-shrink-0">收货人信息:</view> |
|||
<view style="padding-left: 20rpx;">{{item.contacts.name}} {{item.contacts.tel}}</view> |
|||
</view> |
|||
<view class="flex-between" style="align-items: flex-start;"> |
|||
<view class="flex-shrink-0">收货人地址:</view> |
|||
<view style="padding-left: 20rpx;">{{item.contacts.address}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="cal-price"> |
|||
小计: <text class="price">205</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="goods-container"> |
|||
<view class="goods-type-tag">游玩</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view style="width: 1rpx;height: 200rpx;"></view> |
|||
|
|||
<!-- 优惠券 --> |
|||
<view @click="goOrderCoupon" class="tickets-container flex-between"> |
|||
<view class="order-title">优惠券</view> |
|||
<view class="coupon-btn" v-if="coupon==''"> |
|||
<view class="select">选择优惠券</view> |
|||
<uni-icons style="height: 42rpx;" color="#999999" type="right" size="18"></uni-icons> |
|||
</view> |
|||
<div class="coupon-price" v-else> |
|||
<span v-if="coupon.activity.fold == 0">-￥{{coupon.activity.money/100}}</span> |
|||
<span v-else>-{{coupon.activity.fold*10}}%</span> |
|||
<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span> |
|||
</div> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<view class="btn-list"> |
|||
<view class="price-box"> |
|||
<view class="text">合计:</view> |
|||
<view class="price">{{ total() }}</view> |
|||
<!-- <view class="post-text" v-if="info.is_user_post==1&&post">含邮费:¥{{ post / 100 }}</view> --> |
|||
</view> |
|||
<view class="btn" @click="order()">提交订单</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
|
|||
data() { |
|||
return { |
|||
orderList: [], |
|||
postOrderList: [], // 邮寄 |
|||
pickupOrderList: [], // 自提 |
|||
|
|||
coupon: "", |
|||
allprice: 0, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
this.$store.commit("choseCoupon", ""); |
|||
this.handleOrderGoods() |
|||
}, |
|||
onShow() { |
|||
if (!this.isShoppingCart) { |
|||
this.coupon = this.$store.state.user.coupon |
|||
} |
|||
}, |
|||
|
|||
onReady () { |
|||
|
|||
}, |
|||
methods: { |
|||
handleOrderGoods () { |
|||
// 特产处理 |
|||
// let techanOrderList = this.$store.state.user.techanOrderList; |
|||
let techanOrderList = JSON.parse(uni.getStorageSync("techanOrderList")) |
|||
console.log(techanOrderList) |
|||
// 邮寄 |
|||
this.postOrderList = techanOrderList.filter(v=>v.is_user_post == 1) |
|||
// 自提 |
|||
this.pickupOrderList = techanOrderList.filter(v=>v.is_user_post == 2) |
|||
|
|||
let ticketOrderList = this.$store.state.user.ticketOrderList; |
|||
let foodOrderList = this.$store.state.user.foodOrderList; |
|||
let hotelOrderList = this.$store.state.user.hotelOrderList; |
|||
|
|||
}, |
|||
|
|||
|
|||
goOrderCoupon () { |
|||
let allPrice = 0 |
|||
let skuIds= [] |
|||
this.orderList.forEach(v=>{ |
|||
allPrice+= v.sInfo.price*v.sInfo.buyNum |
|||
if (v.sInfo.buyNum>0) { |
|||
skuIds.push(v.sInfo.id) |
|||
} |
|||
}) |
|||
uni.navigateTo({ |
|||
url: `/subPackages/order/orderCoupon?allprice=${allPrice}&sku_ids=${skuIds.join(',')}` |
|||
}) |
|||
}, |
|||
|
|||
// 总价 |
|||
total() { |
|||
|
|||
}, |
|||
// 预定 |
|||
order() { |
|||
|
|||
}, |
|||
|
|||
|
|||
// 获取最大优惠券 |
|||
async getMaxCouponData () { |
|||
let allPrice =0 |
|||
let skuIds = [] |
|||
if (this.info && Array.isArray(this.info.goods)) { |
|||
this.info.goods.forEach(v=>{ |
|||
allPrice += v.skuInfo.money*v.skuInfo.buyNum |
|||
if (v.skuInfo.buyNum>0) { |
|||
skuIds.push(v.skuInfo.id) |
|||
} |
|||
}) |
|||
} |
|||
let param = {money:allPrice,sku_ids:skuIds.join(',')} |
|||
let res = await this.getMaxCoupon(param) |
|||
if (res.id) { |
|||
this.coupon = res |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: #f2f4f7; |
|||
padding: 26rpx; |
|||
} |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
.flex-shrink-0{ |
|||
flex-shrink: 0; |
|||
} |
|||
.goods-container{ |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 73rpx 27rpx 27rpx; |
|||
position: relative; |
|||
margin-bottom: 20rpx; |
|||
.goods-type-tag{ |
|||
width: 107rpx; |
|||
height: 53rpx; |
|||
background: #F2F8E6; |
|||
border-radius: 20rpx 0rpx 20rpx 0rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #6A8A27; |
|||
text-align: center; |
|||
line-height: 53rpx; |
|||
} |
|||
} |
|||
|
|||
.sku-item{ |
|||
display: flex; |
|||
.sku-img{ |
|||
width: 173rpx; |
|||
height: 173rpx; |
|||
border-radius: 7rpx; |
|||
} |
|||
.sku-content{ |
|||
flex: 1; |
|||
width: 1rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-left: 10rpx; |
|||
.sku-title{ |
|||
.price{ |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.title{ |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
padding-right: 20rpx; |
|||
|
|||
} |
|||
.subtitle{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
padding-top: 18rpx; |
|||
} |
|||
.tags{ |
|||
height: 31rpx; |
|||
border-radius: 7rpx; |
|||
border: 1px solid #6A8A2D; |
|||
font-weight: 500; |
|||
font-size: 20rpx; |
|||
color: #6A8A2D; |
|||
padding: 0 11rpx; |
|||
line-height: 31rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.post-item{ |
|||
margin-bottom: 26rpx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
.other-info{ |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
&>view{ |
|||
padding: 20rpx 0 0; |
|||
&:last-child{ |
|||
padding-bottom: 20rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.cal-price{ |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #111111; |
|||
text-align: right; |
|||
.price{ |
|||
font-size: 28rpx; |
|||
color: #D62828; |
|||
font-weight: bold; |
|||
padding-left: 20rpx; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-list { |
|||
width: 100%; |
|||
height: 166rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5); |
|||
display: flex; |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 20rpx 20rpx; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
left: 0; |
|||
.btn { |
|||
width: 294rpx; |
|||
height: 88rpx; |
|||
background: #6A8A2D; |
|||
border-radius: 11rpx; |
|||
text-align: center; |
|||
line-height: 88rpx; |
|||
|
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
|
|||
} |
|||
.price-box { |
|||
display: flex; |
|||
align-items: center; |
|||
.text { |
|||
font-size: 29rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
.price { |
|||
margin-left: 15rpx; |
|||
font-size: 36rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: bold; |
|||
color: #DC2525; |
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
.post-text { |
|||
margin-left: 15rpx; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.tickets-box { |
|||
width: 698rpx; |
|||
margin: 26rpx auto 0; |
|||
border-radius: 13rpx; |
|||
background: #fff; |
|||
height: 120rpx; |
|||
.order-title { |
|||
margin: 31rpx 0 31rpx 30rpx; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
|
|||
.coupon-price { |
|||
color:#DD0000; |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.top-line{ |
|||
border-top:rgba(216, 216, 216, 1) solid 2rpx ; |
|||
} |
|||
.post{ |
|||
height: 120rpx; |
|||
padding: 0 30rpx; |
|||
|
|||
font-size: 32rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
|
|||
} |
|||
.tickets-container { |
|||
width: 698rpx; |
|||
background: #fff; |
|||
height: 120rpx; |
|||
margin: 22rpx auto 0; |
|||
border-radius: 13rpx; |
|||
.order-title { |
|||
margin: 31rpx 0 31rpx 30rpx; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
|
|||
.coupon-price { |
|||
color:#DD0000; |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
.coupon-btn { |
|||
color: #999999;; |
|||
display: flex; |
|||
align-items: center; |
|||
.select { |
|||
display: block; |
|||
width: 153rpx; |
|||
height: 40rpx; |
|||
background: #6A8A2D; |
|||
border-radius: 9rpx; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
font-family: PingFang SC; |
|||
margin-right: 20rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<div class="search-box"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt=""> |
|||
<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search()" /> |
|||
<div class="btn" @click="search()">搜索</div> |
|||
</div> |
|||
<div class="search-title com-flex-tao"> |
|||
搜索历史 |
|||
<img @click="delHis()" src="https://static.ticket.sz-trip.com/taizhou/images/delete.png" alt=""> |
|||
</div> |
|||
<div class="search-list"> |
|||
<div v-for="his,hisIndex in history.slice(0,10)" @click="gotoHot(his)" :key="hisIndex" |
|||
class="search-item textOver">{{his}}</div> |
|||
</div> |
|||
<div class="search-title">大家在搜</div> |
|||
<div class="search-list"> |
|||
<div @click="gotoHot(hot.name)" class="search-item textOver" v-for="hot,hotIndex in hot" :key="hotIndex"> |
|||
{{hot.name}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Search", |
|||
data() { |
|||
return { |
|||
list: [], |
|||
keywords: '', |
|||
history: [], |
|||
hot: [], |
|||
keywords_name: 'tz_trip_keyowrds', |
|||
options: {}, |
|||
type: '', // techan时跳转techanResult |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.type) { |
|||
this.type = options.type |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.history = uni.getStorageSync(this.keywords_name) ? JSON.parse(uni.getStorageSync(this.keywords_name)) :[]; |
|||
this.getHot() |
|||
}, |
|||
methods: { |
|||
getHot() { |
|||
this.Post({ |
|||
limit: 10, |
|||
}, '/api/search/hot').then(res => { |
|||
this.hot = res.data; |
|||
}) |
|||
}, |
|||
delHis() { |
|||
this.history = []; |
|||
uni.removeStorageSync(this.keywords_name) |
|||
uni.showToast({ |
|||
title: '删除成功' |
|||
}) |
|||
}, |
|||
search(e) { |
|||
let url = '/subPackages/search/result' |
|||
if (this.type == 'techan') { url = '/subPackages/search/techanResult' } |
|||
if (this.keywords) { |
|||
this.pushHis(this.keywords); |
|||
uni.navigateTo({ |
|||
url: url+`?keywords=${this.keywords}` |
|||
}) |
|||
} |
|||
}, |
|||
gotoHot(name) { |
|||
let url = '/subPackages/search/result' |
|||
if (this.type == 'techan') { url = '/subPackages/search/techanResult' } |
|||
uni.navigateTo({ |
|||
url: url+`?keywords=${this.keywords}` |
|||
}) |
|||
this.pushHis(name) |
|||
}, |
|||
pushHis(keywords) { |
|||
let history = this.history; |
|||
let index = history.findIndex(item => item == keywords); |
|||
if (index >= 0) history.splice(index, 1); |
|||
history.unshift(keywords); |
|||
uni.setStorageSync(this.keywords_name, JSON.stringify(history)) |
|||
this.history = history; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
padding: 20rpx 26rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.search-box { |
|||
width: 697rpx; |
|||
height: 67rpx; |
|||
margin: 0 auto 30rpx; |
|||
background: #F2F2F2; |
|||
border-radius: 33rpx; |
|||
padding: 6rpx 7rpx 6rpx 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
img { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
.input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
margin: 0 20rpx; |
|||
} |
|||
.btn { |
|||
background: #6A8A27; |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
padding: 10rpx 26rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.search-title { |
|||
color: #000000; |
|||
font-size: 32rpx; |
|||
margin: 36rpx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.search-title img { |
|||
width: 30rpx; |
|||
height: 32rpx; |
|||
} |
|||
|
|||
.search-list { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.search-item { |
|||
padding: 0 25rpx; |
|||
font-size: 24rpx; |
|||
color: #000; |
|||
line-height: 42rpx; |
|||
border-radius: 7rpx; |
|||
background: #F1F1F1; |
|||
margin-right: 22rpx; |
|||
margin-bottom: 23rpx; |
|||
} |
|||
|
|||
.road-list { |
|||
display: flex; |
|||
margin: 20rpx 0; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.road-item { |
|||
width: 332rpx; |
|||
border-radius: 10rpx; |
|||
box-shadow: 0px 0px 10rpx 0px rgba(4, 0, 0, 0.16); |
|||
margin-bottom: 26rpx; |
|||
min-height: 156rpx; |
|||
} |
|||
|
|||
.road-item image { |
|||
border-top-right-radius: 10rpx; |
|||
border-top-left-radius: 10rpx; |
|||
width: 332rpx; |
|||
height: 246rpx; |
|||
object-fit: cover; |
|||
display: block; |
|||
} |
|||
|
|||
.road-info { |
|||
padding: 10rpx 15rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.road-title { |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
font-weight: 500; |
|||
margin-top: 6rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.hotel-subtitle { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
line-height: 24rpx; |
|||
margin-bottom: 18rpx; |
|||
min-height: 48rpx; |
|||
} |
|||
|
|||
.hotel-price { |
|||
text-align: right; |
|||
color: #FC524B; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 30rpx; |
|||
} |
|||
|
|||
.hotel-price:after { |
|||
content: "起"; |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
margin-left: 5rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,326 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<view class="top-bg"> |
|||
<div class="search-box"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt=""> |
|||
<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search" /> |
|||
<div class="btn" @click="search()">搜索</div> |
|||
</div> |
|||
<view class="common-box"> |
|||
<view class="common-types com-flex-tao"> |
|||
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id" |
|||
:class="['common-type', typeIndex == index ? 'active' : '']"> |
|||
{{ item.name }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<div class="search-list"> |
|||
<view @click="gotoDetailByType(item)" v-for="(item, key) in list" :key="item.id" class="search-item"> |
|||
<image class="img" :src="showImg(item.ext.headimg)" mode=""></image> |
|||
<view class="content"> |
|||
<view class="title text-overflowRows"> |
|||
{{item.ext.title}} |
|||
</view> |
|||
<view class="distance text-overflow" > |
|||
<!-- <image v-if="item.ext.address||item.ext.scene_address" :src="showImg('/uploads/20241024/b7d33bf405526f09212ff3d9485e6d06.png')" class="icon-tip"></image> --> |
|||
<text v-if="item.ext.address">{{item.ext.address}}</text> |
|||
<text v-else-if="item.ext.scene_address">{{item.ext.scene_address}}</text> |
|||
</view> |
|||
|
|||
|
|||
<view class="bottom"> |
|||
<view class="price ticlet-price" v-if="item.ext.price"> |
|||
{{item.ext.price/100}} |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<div class="list-common-empty" v-if="!showMore"> |
|||
|
|||
<p class="list-common-empty-tip">—— 暂无更多 ——</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Search", |
|||
data() { |
|||
return { |
|||
typeList: [ |
|||
{name: '全部', type: ''}, |
|||
{name: '门票', type: 'ticket'}, |
|||
{name: '酒店', type: 'hotel'}, |
|||
{name: '特产', type: 'post'}, |
|||
{name: '线路', type: 'line'}, |
|||
{name: '美食', type: 'food'}, |
|||
], |
|||
typeIndex: 0, |
|||
showMore: true, |
|||
list: [], |
|||
keywords: "", |
|||
|
|||
types: { |
|||
'goods': "商品", |
|||
// 'scenic': "景点", |
|||
'article': "文章", |
|||
'activity':'活动' |
|||
}, |
|||
options: {} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.options = options |
|||
this.keywords = options.keywords; |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
setType(index) { |
|||
if (this.typeIndex!==index) { |
|||
this.typeIndex = index; |
|||
this.list = [] |
|||
this.getList() |
|||
} |
|||
}, |
|||
search() { |
|||
this.pushHis(this.keywords); |
|||
this.list = []; |
|||
this.getList(); |
|||
}, |
|||
pushHis(keywords) { |
|||
let history = JSON.parse(uni.getStorageSync('tz_trip_keyowrds')) || []; |
|||
let index = history.findIndex(item => item == keywords); |
|||
if (index >= 0) history.splice(index, 1); |
|||
history.unshift(keywords); |
|||
uni.setStorageSync('tz_trip_keyowrds',JSON.stringify(history)) |
|||
}, |
|||
gotoDetail(item) { |
|||
|
|||
}, |
|||
getList() { |
|||
this.Post({ |
|||
name: this.keywords, |
|||
offset: this.list.length, |
|||
type: this.typeList[this.typeIndex].type, |
|||
limit: 10, |
|||
lon: uni.getStorageSync('location').lon || '120', |
|||
lat: uni.getStorageSync('location').lat || '36', |
|||
}, '/api/search/search').then(res => { |
|||
|
|||
this.list = [...this.list, ...res.data.list]; |
|||
this.showMore = true |
|||
if (res.data.length<10) { |
|||
this.showMore = false |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (this.showMore) this.getList() |
|||
},1000) |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
// padding: 0 30rpx; |
|||
} |
|||
.top-bg{ |
|||
padding: 20rpx 30rpx; |
|||
.search-box { |
|||
width: 100%; |
|||
height: 67rpx; |
|||
background: #F2F2F2; |
|||
border-radius: 33rpx; |
|||
padding: 6rpx 7rpx 6rpx 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
img { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
.input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
margin: 0 20rpx; |
|||
} |
|||
.btn { |
|||
background-color: #6A8A27; |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
padding: 10rpx 26rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-list { |
|||
padding: 0 30rpx; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
|
|||
.search-item { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
display: flex; |
|||
margin: 26rpx 0rpx; |
|||
.img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
background: #87CD93; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.content { |
|||
padding:13rpx 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
} |
|||
.title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
width: 100%; |
|||
} |
|||
.distance { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
width: 100%; |
|||
padding-right: 10rpx; |
|||
|
|||
image{ |
|||
flex-shrink: 0; |
|||
} |
|||
text{ |
|||
flex: 1; |
|||
width: 1rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.price { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 33.33rpx; |
|||
color: #D90F00; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
.price::before{ |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
.ticlet-price::after{ |
|||
content: '起'; |
|||
font-size: 24rpx; |
|||
} |
|||
.food-price::after{ |
|||
content: '/人'; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.list-common-empty{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
margin: 26rpx 0; |
|||
|
|||
} |
|||
.list-common-empty-tip{ |
|||
color:#999; |
|||
} |
|||
|
|||
.common-box { |
|||
height: 90rpx; |
|||
.common-types { |
|||
background: white; |
|||
height: 90rpx; |
|||
font-size: 31rpx; |
|||
z-index: 10; |
|||
margin: auto; |
|||
color: #666; |
|||
overflow-x: scroll; |
|||
overflow-y: hidden; |
|||
padding: 0; |
|||
display: flex; |
|||
} |
|||
|
|||
.common-types::-webkit-scrollbar { |
|||
width: 0rpx; |
|||
height: 0; |
|||
display: none; |
|||
} |
|||
|
|||
.common-type { |
|||
flex-shrink: 0; |
|||
margin: 0 26rpx; |
|||
line-height: 90rpx; |
|||
height: 90rpx; |
|||
position: relative; |
|||
color: #000000; |
|||
} |
|||
|
|||
.common-type.active { |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #6A8A27; |
|||
} |
|||
|
|||
.common-type.active:after { |
|||
display: block; |
|||
width: 60%; |
|||
font-size: 0; |
|||
content: '1'; |
|||
margin: auto; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 1rpx; |
|||
height: 4rpx; |
|||
background: #6A8A27; |
|||
border-radius: 2rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.icon-tip{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
.bottom{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,699 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<!-- 搜索 --> |
|||
<view class="flex-column" style="height: 100%;"> |
|||
<view style="padding: 20rpx 26rpx 0;background: white;"> |
|||
<view class="search-box"> |
|||
<image src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt=""> |
|||
<input type="text" class="input" placeholder="请输入关键字" v-model="searchText" @confirm="search();" /> |
|||
<view class="btn" @click="search()">搜索</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="search-container" style="background: #FFFFFF;"> |
|||
<view > |
|||
<text :class="[search_type==0?'active-search-item':'']" @click="changeSearchParm(0)">综合</text> |
|||
</view> |
|||
<view > |
|||
<text :class="[[1,2].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(search_type==1?2:1)">销量</text> |
|||
<view class="search-item"> |
|||
<view :class="[search_type==1?'active-search-item':'','triangle-up']" @click="changeSearchParm(1)">▼</view> |
|||
<view :class="[search_type==2?'active-search-item':'']" @click="changeSearchParm(2)">▼</view> |
|||
</view> |
|||
</view> |
|||
<view > |
|||
<text :class="[[3,4].includes(search_type)?'active-search-item':'']" @click="changeSearchParm(search_type==3?4:3)">价格</text> |
|||
<view class="search-item"> |
|||
<view :class="[search_type==3?'active-search-item':'','triangle-up']" @click="changeSearchParm(3)">▼</view> |
|||
<view :class="[search_type==4?'active-search-item':'']" @click="changeSearchParm(4)">▼</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="list.length<=0" class="flex-center" style="width: 100%;height: 100%;flex-direction: column;"> |
|||
<view style="font-weight: 500;font-size: 28rpx;color: #666666; |
|||
text-align: center;margin-top: 67rpx;padding-bottom: 300rpx;">暂无搜索结果</view> |
|||
</view> |
|||
<scroll-view class="right-container no-scrollbar" :scroll-y="true" @scrolltolower="scrollLow()" v-else> |
|||
<view class="search-result" > |
|||
<view v-for="(item,i) in list" class="search-item" :key="i" @click="viewDetail(item.goods)"> |
|||
<image :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
<view class="search-result-container"> |
|||
<view> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="tags text-overflow" v-if="item.display_tags"> |
|||
<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI"> |
|||
{{tag}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex-between" style="padding-top: 20rpx;"> |
|||
<view> |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="oldPrice">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="buy-cart" style="border-radius: 8rpx;" @click.stop="showOrderCart(item)">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view > |
|||
</view> |
|||
|
|||
|
|||
<uni-popup ref="popup" type="bottom" :safe-area="true"> |
|||
<view class="popup-content" v-if="sku.length>0"> |
|||
<view @click="closePopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;"> |
|||
<uni-icons type="closeempty" size="24"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="bottom-productImg"> |
|||
<img :src="showImg(sku[productIndex].headimg)" alt=""> |
|||
<view class="right-content"> |
|||
<view class="bottom-productPrice com-price">{{(sku[productIndex].price||0)/100}}</view> |
|||
<view class="bottom-content">已选择：{{sku[productIndex].sku_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view style="max-height: 600rpx;overflow-y: auto;"> |
|||
<view class="sp"> |
|||
规格 |
|||
</view> |
|||
<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;"> |
|||
<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
|||
<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]" |
|||
@click="changeProduct(botItem,botIndex)"> |
|||
{{botItem.sku_name}} |
|||
</view> |
|||
<view class="noStore-text" v-if="botItem.store==0"> |
|||
不可购买 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="buy-num com-flex-tao"> |
|||
数量 |
|||
<view class="number-btn"> |
|||
<view> |
|||
<text @click="delNumber">-</text> |
|||
</view> |
|||
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view> |
|||
<view> |
|||
<text @click="addNumber">+</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="placeholder-content"> |
|||
<view style="height: 100rpx;"></view> |
|||
<view class="btn-cover"> |
|||
<view class="btn" @click.stop="addToCart">加入购物车</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
type_pid: 20, |
|||
searchText: '', |
|||
search_type: 0, |
|||
|
|||
list:[], |
|||
finished: false, |
|||
currentGoods: {}, |
|||
sku: [], |
|||
productIndex: 0, |
|||
buyNum: 1, |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if(options.keywords) { |
|||
this.searchText = options.keywords |
|||
this.search() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
changeSearchParm(value) { |
|||
console.log(value) |
|||
this.search_type = value |
|||
this.search() |
|||
}, |
|||
search () { |
|||
if (this.searchText.trim().length<=0) { |
|||
uni.showToast({ |
|||
title:'请输入搜索关键字', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.pushHis(this.searchText.trim()); |
|||
this.finished = false |
|||
this.list = [] |
|||
this.getList() |
|||
}, |
|||
pushHis(keywords) { |
|||
let history = JSON.parse(uni.getStorageSync('tz_trip_keyowrds')) || []; |
|||
let index = history.findIndex(item => item == keywords); |
|||
if (index >= 0) history.splice(index, 1); |
|||
history.unshift(keywords); |
|||
uni.setStorageSync('tz_trip_keyowrds',JSON.stringify(history)) |
|||
}, |
|||
|
|||
// 根据产品分类获取产品列表 |
|||
getList(){ |
|||
let param = {} |
|||
if (this.search_type == 1) { param = {order: 'asc',sort:'sales_number'} } |
|||
if (this.search_type == 2) { param = {order: 'desc',sort:'sales_number'} } |
|||
if (this.search_type == 3) { param = {order: 'asc',sort:'price'} } |
|||
if (this.search_type == 4) { param = {order: 'desc',sort:'price'} } |
|||
this.Post({ |
|||
title: this.searchText.trim(), |
|||
tag_id: this.type_pid, |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
...param |
|||
},'/api/product/get_product_by_tag').then(res => { |
|||
this.list = [...this.list, ...res.data.list]; |
|||
if (res.data.list.length < 10) { |
|||
this.finished = true |
|||
} |
|||
console.log(this.list) |
|||
}) |
|||
}, |
|||
scrollLow () { |
|||
if (!this.finished) { |
|||
this.getList() |
|||
} |
|||
}, |
|||
viewDetail(item) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/detail?id=' + item.id |
|||
}) |
|||
|
|||
}, |
|||
|
|||
|
|||
// 购物车相关 |
|||
showOrderCart (item) { |
|||
console.log(item) |
|||
this.sku = [] |
|||
this.productIndex = 0 |
|||
this.buyNum = 1 |
|||
this.currentGoods = JSON.parse(JSON.stringify(item)) |
|||
this.getSpecificationsByGoodsId(item.id) |
|||
}, |
|||
changeProduct(item,index) { |
|||
if (item.store==0) { |
|||
uni.showToast({ |
|||
title:"库存不足！", |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.productIndex = index |
|||
}, |
|||
getSpecificationsByGoodsId(goods_id) { |
|||
this.Post({id: goods_id},'/api/product/get_product_detail' |
|||
).then(res => { |
|||
if (res) { |
|||
this.sku = res.data.sku || []; |
|||
if (!this.sku||this.sku.length<=0) { |
|||
uni.showToast({ |
|||
title:'暂无可选规格', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.openPop() |
|||
} |
|||
}); |
|||
}, |
|||
//数量加减 |
|||
addNumber() { |
|||
this.buyNum += 1; |
|||
}, |
|||
delNumber() { |
|||
if (this.buyNum <= 1) { |
|||
return; |
|||
} |
|||
this.buyNum -= 1; |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
openPop(){ |
|||
this.$refs.popup.open() |
|||
}, |
|||
addToCart() { |
|||
let goods = this.sku[this.productIndex] |
|||
goods.buyNum = this.buyNum |
|||
this.Post({sku_id: goods.id,num: this.buyNum },'/api/cart/add_sku').then(res => { |
|||
if (res.code == 1) { |
|||
uni.showToast({title: res.msg,icon: 'none'}); |
|||
// uni.$emit("updateDataByConnect", {msgType:'updateCartDataInfo',data:null}) |
|||
this.closePopup() |
|||
// this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}); |
|||
}, |
|||
goCartOrder () { |
|||
this.$refs.cartDataVueRef.goCartOrder() |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.search-box { |
|||
width: 100%; |
|||
height: 67rpx; |
|||
background: #F2F2F2; |
|||
border-radius: 33rpx; |
|||
padding: 6rpx 7rpx 6rpx 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
image { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
.input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
margin: 0 20rpx; |
|||
} |
|||
.btn { |
|||
background-color: #6A8A27; |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
padding: 10rpx 26rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.bg { |
|||
height: 100vh; |
|||
padding-bottom: 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #F8FAFB; |
|||
} |
|||
|
|||
|
|||
|
|||
.search-container{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
height: 107rpx; |
|||
flex-shrink: 0; |
|||
padding: 0 32rpx; |
|||
&>view{ |
|||
display: flex; |
|||
min-width: 70rpx; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 100%; |
|||
} |
|||
.search-item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
line-height: 16rpx; |
|||
font-size: 14rpx; |
|||
} |
|||
} |
|||
|
|||
.right-container{ |
|||
flex: 1; |
|||
width: 100%; |
|||
height: 1rpx; |
|||
background: white; |
|||
.item { |
|||
width: 100%; |
|||
padding:0 32rpx 32rpx 32rpx; |
|||
display: flex; |
|||
.item-img { |
|||
width: 161rpx; |
|||
height: 161rpx; |
|||
border-radius: 15rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.content { |
|||
height: 161rpx; |
|||
padding-left: 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
} |
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
width: 100%; |
|||
} |
|||
.bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.price { |
|||
font-size: 33.33rpx; |
|||
color: #DC2525; |
|||
font-weight: 400; |
|||
} |
|||
.price::before { |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
.oldPrice{ |
|||
font-weight: 500; |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
text-decoration-line: line-through; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.buy-cart{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
color: #FFFFFF; |
|||
background: #6A8A2D; |
|||
line-height: 44rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.popup-content { |
|||
background-color: white; |
|||
padding: 0rpx 39rpx 51rpx 39rpx; |
|||
height: auto; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
.bottom-productImg { |
|||
display: flex; |
|||
margin-bottom: 23rpx; |
|||
} |
|||
|
|||
.bottom-productImg img { |
|||
width: 218rpx; |
|||
height: 179rpx; |
|||
background: #666666; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.right-content { |
|||
margin: 10rpx 0 0 41rpx; |
|||
} |
|||
|
|||
.bottom-productPrice { |
|||
font-size: 40rpx; |
|||
color: #FC524B; |
|||
|
|||
&:before { |
|||
content: "￥"; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom-content { |
|||
width: 331rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
} |
|||
|
|||
.botProduct { |
|||
width: 320rpx; |
|||
// height: 78rpx; |
|||
border-radius: 13rpx; |
|||
background-color: #F5F5F5; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
line-height: 78rpx; |
|||
text-align: center; |
|||
margin-bottom: 25rpx; |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 0 40rpx; |
|||
} |
|||
.noStore{ |
|||
background-color: rgba(239, 239, 239, 1); |
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
.noStore-text{ |
|||
width: 113rpx; |
|||
height: 43rpx; |
|||
background: #C0C0C0; |
|||
border-radius: 7rpx 0rpx 7rpx 0rpx; |
|||
text-align: center; |
|||
line-height: 43rpx; |
|||
position: absolute; |
|||
right: -14rpx; |
|||
top: -20rpx; |
|||
font-size: 23rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.botProducts { |
|||
background: #6A8A27; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.buy-num { |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
// border-top: 1rpx solid #CCCCCC; |
|||
padding: 39rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.buy-num .number-btn { |
|||
display: flex; |
|||
} |
|||
|
|||
.buy-num .number-btn view { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 69rpx; |
|||
height: 69rpx; |
|||
border: 1rpx solid #CCCCCC; |
|||
border-radius: 7rpx; |
|||
} |
|||
|
|||
.buy-num .number-btn>view text { |
|||
font-size: 46rpx; |
|||
} |
|||
|
|||
.buy-btn { |
|||
width: 670rpx; |
|||
height: 78rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 40rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.btn-box { |
|||
width: 750rpx; |
|||
height: 151rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.sp { |
|||
width: 100%; |
|||
height: 30rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #060001; |
|||
line-height: 30rpx; |
|||
border-top: solid 2rpx #ccc; |
|||
margin: 60rpx 0; |
|||
padding-top: 30rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.placeholder-content{ |
|||
background: white; |
|||
position: relative; |
|||
.btn-cover{ |
|||
z-index: 200; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1); |
|||
.btn{ |
|||
width: 670rpx; |
|||
height: 78rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
background: #6A8A2D; |
|||
border-radius: 11rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-result{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
padding:0 26rpx; |
|||
.search-item{ |
|||
width: 100%; |
|||
height: 200rpx; |
|||
margin-bottom: 30rpx; |
|||
display: flex; |
|||
image{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
|
|||
.search-result-container{ |
|||
padding:0 20rpx; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
width: 1rpx; |
|||
.title{ |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
.price{ |
|||
font-weight: 400; |
|||
font-size: 33rpx; |
|||
color: #C3282E; |
|||
} |
|||
.price:before{ |
|||
content: "￥"; |
|||
font-size: 23rpx; |
|||
} |
|||
.oldPrice{ |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #999999; |
|||
text-decoration-line: line-through; |
|||
padding-left: 12rpx; |
|||
} |
|||
|
|||
.tags{ |
|||
display: flex; |
|||
padding-top: 20rpx; |
|||
.tag{ |
|||
height: 35rpx; |
|||
line-height: 35rpx; |
|||
border-radius: 17rpx; |
|||
border: 1px solid #000000; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
padding: 0 20rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.typePopup-container{ |
|||
.place-area{ |
|||
width: 100%; |
|||
opacity: 0; |
|||
} |
|||
.type-container.typedata-container{ |
|||
flex-wrap: wrap;background: #EDF5DC;padding: 30rpx 40rpx 0; |
|||
width: 100%; |
|||
display: flex; |
|||
height: auto; |
|||
padding-bottom: 30rpx; |
|||
.type-item { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
} |
|||
.bottom-close{ |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #111111; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.triangle-up { |
|||
transform: rotate(180deg); |
|||
display: inline-block; |
|||
} |
|||
.active-search-item{ |
|||
color: #6A8A2D; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue