wyy
2 years ago
parent
30648951bc
commit
1277f51bf9
@ -0,0 +1,67 @@
|
||||
.prod-items {
|
||||
width: 43%;
|
||||
background: #fff;
|
||||
margin-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
.hot-imagecont {
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
}
|
||||
.hot-text {
|
||||
margin-top: 20rpx;
|
||||
.prod-info {
|
||||
font-size: 20rpx;
|
||||
color: #777;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.prod-text-info {
|
||||
position: relative;
|
||||
height: 50rpx;
|
||||
line-height: 70rpx;
|
||||
font-family: Arial;
|
||||
.price {
|
||||
color: #eb2444;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
prod {
|
||||
&:nth-child(2n-1) {
|
||||
.prod-items {
|
||||
padding: 20rpx 10rpx 10rpx 20rpx;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
.prod-items {
|
||||
padding: 20rpx 20rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hot-imagecont {
|
||||
.hotsaleimg {
|
||||
width: 100%;
|
||||
height: 345rpx;
|
||||
}
|
||||
}
|
||||
.hot-text {
|
||||
.hotprod-text {
|
||||
height: 76rpx;
|
||||
font-size: 28rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
padding: 0 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.deadline-price {
|
||||
font-size: 22rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view
|
||||
class="prod-items"
|
||||
:data-prodid="item.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="hot-imagecont">
|
||||
<image
|
||||
:src="item.pic"
|
||||
class="hotsaleimg"
|
||||
/>
|
||||
</view>
|
||||
<view class="hot-text">
|
||||
<view class="hotprod-text">
|
||||
{{ item.prodName }}
|
||||
</view>
|
||||
<view
|
||||
v-if="sts===6"
|
||||
class="prod-info"
|
||||
>
|
||||
{{ item.prodCommNumber }}评价 {{ item.positiveRating }}%好评
|
||||
</view>
|
||||
<view class="prod-text-info">
|
||||
<view class="price">
|
||||
<text
|
||||
v-if="sts===2"
|
||||
class="deadline-price"
|
||||
>
|
||||
限时价
|
||||
</text>
|
||||
<text class="symbol">
|
||||
￥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return null
|
||||
}
|
||||
},
|
||||
sts: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 2
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const toProdPage = (e) => {
|
||||
const prodid = e.currentTarget.dataset.prodid
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + prodid
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './production.scss';
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
.container {
|
||||
background-color: #f4f4f4;
|
||||
border-top: 2rpx solid #e9eaec;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.main {
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
.address {
|
||||
margin-bottom: 15rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-bottom: 2rpx solid #e9eaec;
|
||||
.personal {
|
||||
position: relative;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 3rpx dashed #e9eaec;
|
||||
.info-tit {
|
||||
.name {
|
||||
margin-right: 30rpx;
|
||||
font-size: 32rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.tel {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
image {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 46rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 50rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-btn {
|
||||
padding: 15rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.box {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal {
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
margin: 10rpx 0;
|
||||
margin-top: 20rpx;
|
||||
.addr-get {
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
.img {
|
||||
text-align: center;
|
||||
margin-top: 130rpx;
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.txt {
|
||||
margin-top: 30rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="main">
|
||||
<view
|
||||
v-if="addressList.length===0"
|
||||
class="empty"
|
||||
>
|
||||
<view class="img">
|
||||
<image src="http://jiales.gz-yami.com/addr.png" />
|
||||
</view>
|
||||
<view class="txt">
|
||||
您还没有收货地址
|
||||
</view>
|
||||
</view>
|
||||
<radio-group class="radio-group">
|
||||
<block
|
||||
v-for="(item, index) in addressList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="address">
|
||||
<view
|
||||
class="personal"
|
||||
@tap="selAddrToOrder(item)"
|
||||
>
|
||||
<view class="info-tit">
|
||||
<text class="name">
|
||||
{{ item.receiver }}
|
||||
</text>
|
||||
<text class="tel">
|
||||
{{ item.mobile }}
|
||||
</text>
|
||||
<image
|
||||
src="@/static/images/icon/revise.png"
|
||||
:data-addrid="item.addrId"
|
||||
@tap.stop="toEditAddress"
|
||||
/>
|
||||
</view>
|
||||
<view class="addr">
|
||||
<text class="addr-get">
|
||||
{{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="select-btn"
|
||||
:data-addrid="item.addrId"
|
||||
@tap="onDefaultAddr"
|
||||
>
|
||||
<view class="box">
|
||||
<radio
|
||||
:value="item.prodId"
|
||||
:checked="item.commonAddr==1"
|
||||
color="#eb2444"
|
||||
:data-addrid="item.addrId"
|
||||
@tap="onDefaultAddr"
|
||||
/>
|
||||
设为默认地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view
|
||||
class="footer"
|
||||
@tap="onAddAddr"
|
||||
>
|
||||
<text>新增收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const order = ref(-1)
|
||||
onLoad((option) => {
|
||||
if (option.order) {
|
||||
order.value = option.order
|
||||
}
|
||||
})
|
||||
|
||||
const addressList = ref([])
|
||||
/**
|
||||
* 加载地址列表
|
||||
*/
|
||||
onShow(() => {
|
||||
onGetList()
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取收获列表接口
|
||||
*/
|
||||
const onGetList = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/address/list',
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
addressList.value = data
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增收货地址
|
||||
*/
|
||||
const onAddAddr = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/editAddress/editAddress'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置为默认地址
|
||||
*/
|
||||
const onDefaultAddr = (e) => {
|
||||
const addrId = e.currentTarget.dataset.addrid
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/address/defaultAddr/' + addrId,
|
||||
method: 'PUT',
|
||||
data: {
|
||||
addrId
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改地址
|
||||
*/
|
||||
const toEditAddress = (e) => {
|
||||
const addrId = e.currentTarget.dataset.addrid
|
||||
uni.navigateTo({
|
||||
url: '/pages/editAddress/editAddress?addrId=' + addrId
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择地址 跳转回提交订单页
|
||||
*/
|
||||
const selAddrToOrder = (item) => {
|
||||
if (order.value == 0) {
|
||||
const pages = getCurrentPages() // 当前页面
|
||||
const prevPage = pages[pages.length - 2] // 上一页面
|
||||
prevPage.item = item // 直接给上一页面赋值
|
||||
prevPage.selAddress = 'yes'
|
||||
// 返回
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './delivery-address.scss';
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
.container {
|
||||
background: #fff;
|
||||
}
|
||||
.input-box {
|
||||
margin-bottom: 50rpx;
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
.section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 0;
|
||||
line-height: 48rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #e5e5e5;
|
||||
text {
|
||||
width: 20%;
|
||||
color: #333;
|
||||
}
|
||||
input {
|
||||
width: 70%;
|
||||
padding: 0 20rpx;
|
||||
color: #333;
|
||||
}
|
||||
picker {
|
||||
width: 70%;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.pca {
|
||||
width: 70%;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.arrow {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
padding: 5px 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.clear.btn {
|
||||
width: 60%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
border: 1rpx solid #eb2444;
|
||||
border-radius: 50rpx;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
margin-top: 40rpx;
|
||||
color: #eb2444;
|
||||
background-color: #f8f0f1b6;
|
||||
}
|
||||
.keep {
|
||||
color: #fff;
|
||||
background-color: #eb2444;
|
||||
}
|
||||
}
|
||||
.keep.btn {
|
||||
width: 60%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
border: 1rpx solid #eb2444;
|
||||
border-radius: 50rpx;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.infoText {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
picker-view {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 380rpx;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
text {
|
||||
color: #999;
|
||||
display: inline-flex;
|
||||
position: fixed;
|
||||
margin-top: 20rpx;
|
||||
height: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
font-size: 34rpx;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
}
|
||||
picker-view-column {
|
||||
view {
|
||||
vertical-align: middle;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.animation-element-wrapper {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
}
|
||||
.animation-element {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 470rpx;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.animation-button {
|
||||
top: 20rpx;
|
||||
width: 290rpx;
|
||||
height: 100rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.left-bt {
|
||||
left: 30rpx;
|
||||
}
|
||||
.right-bt {
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
position: absolute;
|
||||
width: 80rpx !important;
|
||||
}
|
||||
.line {
|
||||
display: block;
|
||||
position: fixed;
|
||||
height: 2rpx;
|
||||
width: 100%;
|
||||
margin-top: 89rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
@ -0,0 +1,175 @@
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
.padding20 {
|
||||
padding-top: 88rpx;
|
||||
}
|
||||
.f-fl {
|
||||
float: left;
|
||||
}
|
||||
.f-fr {
|
||||
float: right;
|
||||
}
|
||||
.navWrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
height: 92rpx;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.nav-slider {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4rpx;
|
||||
background-color: #b4282d;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
float: left;
|
||||
height: 88rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 28rpx;
|
||||
text {
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
padding: 27rpx 16rpx 23rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
.nav-item.active {
|
||||
text {
|
||||
color: #b4282d;
|
||||
}
|
||||
}
|
||||
.u-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.deliveryInfo {
|
||||
height: 198rpx;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
padding-left: 30rpx;
|
||||
background-size: cover;
|
||||
display: table;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.companyname {
|
||||
line-height: 1;
|
||||
margin-left: 136rpx;
|
||||
font-size: 28rpx;
|
||||
.key {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.expno {
|
||||
line-height: 1;
|
||||
margin-left: 136rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
.key {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-express {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 48rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
.infoWarp {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.deliveryDetail {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 40rpx;
|
||||
background-color: #fff;
|
||||
min-height: 670rpx;
|
||||
}
|
||||
.detailItem {
|
||||
border-left: 1px dashed #f4f4f4;
|
||||
margin-left: 42rpx;
|
||||
position: relative;
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
.dot {
|
||||
image {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
left: -18rpx;
|
||||
}
|
||||
}
|
||||
.lastest {
|
||||
.dot {
|
||||
image {
|
||||
top: -2rpx;
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
.desc {
|
||||
color: #105c3e;
|
||||
margin-top: 0;
|
||||
}
|
||||
.time {
|
||||
color: #105c3e;
|
||||
}
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
color: #999;
|
||||
margin-top: 15rpx;
|
||||
margin-bottom: 39rpx;
|
||||
}
|
||||
border-top: 1px solid #f4f4f4;
|
||||
margin-left: 28rpx;
|
||||
overflow: hidden;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
.deliveryTip {
|
||||
height: 80rpx;
|
||||
background-color: #fff8d8;
|
||||
padding-left: 30rpx;
|
||||
color: #f48f18;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.empty-space {
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
.news-detail {
|
||||
padding: 20rpx;
|
||||
.news-detail-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.news-detail-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: justify;
|
||||
text-justify: inter-ideograph;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
> {
|
||||
> {
|
||||
>img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="news-detail">
|
||||
<view class="news-detail-title">
|
||||
{{ news.title }}
|
||||
</view>
|
||||
<rich-text
|
||||
class="content"
|
||||
:nodes="news.content"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const news = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
id: null
|
||||
})
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
// 加载公告详情
|
||||
http.request({
|
||||
url: '/shop/notice/info/' + options.id,
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
data.content = data.content.replace(/width=/gi, 'sss=')
|
||||
data.content = data.content.replace(/height=/gi, 'sss=')
|
||||
data.content = data.content.replace(/ \/>/gi, ' style="max-width:100% !important;display:block;" />')
|
||||
news.value = data
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './news-detail.scss';
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
.container {
|
||||
background: #fff;
|
||||
margin: 7px;
|
||||
}
|
||||
.line-fix {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: #e1e1e1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.tit-background {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.prod-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 空 */
|
||||
.empty {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-top: 20vh;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view>
|
||||
<block
|
||||
v-for="(item, index) in prodList"
|
||||
:key="index"
|
||||
>
|
||||
<production :item="item" />
|
||||
</block>
|
||||
<view
|
||||
v-if="!prodList.length"
|
||||
class="empty"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const sts = ref(0)
|
||||
const title = ref('')
|
||||
const current = ref(1)
|
||||
const size = ref(10)
|
||||
const pages = ref(0)
|
||||
const tagid = ref(0)
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
current.value = 1
|
||||
pages.value = 0
|
||||
sts.value = options.sts
|
||||
title.value = options.title ? options.title : ''
|
||||
|
||||
if (options.tagid) {
|
||||
tagid.value = options.tagid
|
||||
}
|
||||
|
||||
if (sts.value == 0) {
|
||||
if (options.tagid == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '每日上新'
|
||||
})
|
||||
} else if (options.tagid == 2) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '商城热卖'
|
||||
})
|
||||
} else if (options.tagid == 3) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '更多宝贝'
|
||||
})
|
||||
}
|
||||
} else if (sts.value == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新品推荐'
|
||||
})
|
||||
} else if (sts.value == 2) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '限时特惠'
|
||||
})
|
||||
} else if (sts.value == 3) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '每日疯抢'
|
||||
})
|
||||
} else if (sts.value == 4) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '优惠券活动商品'
|
||||
})
|
||||
} else if (sts.value == 5) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '我的收藏商品'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: title.value
|
||||
})
|
||||
}
|
||||
|
||||
loadProdData(options)
|
||||
})
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom(() => {
|
||||
if (current.value < pages.value) {
|
||||
current.value = current.value + 1
|
||||
loadProdData()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 加载商品数据
|
||||
*/
|
||||
const loadProdData = (options) => {
|
||||
const stsParam = sts.value
|
||||
|
||||
if (stsParam == 0) {
|
||||
// 分组标签商品列表
|
||||
getTagProd()
|
||||
} else if (stsParam == 1) {
|
||||
// 新品推荐
|
||||
const url = '/prod/lastedProdPage'
|
||||
getActProd(url)
|
||||
} else if (stsParam == 2) {
|
||||
// 限时特惠
|
||||
const url = '/prod/discountProdList'
|
||||
getActProd(url)
|
||||
} else if (stsParam == 3) {
|
||||
// 每日疯抢
|
||||
const url = '/prod/moreBuyProdList'
|
||||
getActProd(url)
|
||||
} else if (stsParam == 4) {
|
||||
// 优惠券商品列表
|
||||
getProdByCouponId(options.tagid)
|
||||
} else if (stsParam == 5) {
|
||||
// 收藏商品列表
|
||||
getCollectionProd()
|
||||
}
|
||||
}
|
||||
|
||||
const prodList = ref([])
|
||||
const getActProd = (url) => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current === 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value
|
||||
list = list.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取我的收藏商品
|
||||
*/
|
||||
const getCollectionProd = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/p/user/collection/prods',
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current == 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value
|
||||
list = list.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取标签列表
|
||||
*/
|
||||
const getTagProd = () => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/prod/prodListByTagId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
tagId: tagid.value,
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current === 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取优惠券商品列表
|
||||
*/
|
||||
const getProdByCouponId = (id) => {
|
||||
uni.showLoading()
|
||||
http.request({
|
||||
url: '/coupon/prodListByCouponId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
couponId: id,
|
||||
current: current.value,
|
||||
size: size.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
let list
|
||||
if (data.current === 1) {
|
||||
list = data.records
|
||||
} else {
|
||||
list = prodList.value.concat(data.records)
|
||||
}
|
||||
prodList.value = list
|
||||
pages.value = data.pages
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './prod-classify.scss';
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
.recent-news {
|
||||
background: #fff;
|
||||
.news-item {
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #e1e1e1;
|
||||
left: 20rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.news-item-title {
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.news-item-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
display: block;
|
||||
padding-top: 200rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="recent-news">
|
||||
<block
|
||||
v-for="(item, index) in news"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="news-item"
|
||||
:data-id="item.id"
|
||||
@tap="toNewsDetail"
|
||||
>
|
||||
<view class="news-item-title">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="news-item-date">
|
||||
{{ item.publishTime }}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view
|
||||
v-if="!news || !news.length"
|
||||
class="empty"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const news = ref([])
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
// 加载公告
|
||||
http.request({
|
||||
url: '/shop/notice/noticeList',
|
||||
method: 'GET'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
news.value = data.records
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 跳转公告详情页
|
||||
* @param e
|
||||
*/
|
||||
const toNewsDetail = (e) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/news-detail/news-detail?id=' + e.currentTarget.dataset.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './recent-news.scss';
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #777;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
|
||||
z-index: 3;
|
||||
.search-box {
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
background: #f7f7f7;
|
||||
z-index: 999;
|
||||
width: 80%;
|
||||
margin-left: 70rpx;
|
||||
border-radius: 50rpx;
|
||||
margin: 20rpx 0 20rpx 20rpx;
|
||||
.search-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 14rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.search-hint {
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 31rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
.sear-input {
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 0;
|
||||
margin: 0 30rpx 0 64rpx;
|
||||
line-height: 48rpx;
|
||||
vertical-align: top;
|
||||
background: #f7f7f7;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.search-display {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
margin-top: 100rpx;
|
||||
.title-text {
|
||||
padding: 30rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.hot-search {
|
||||
.hot-search-tags {
|
||||
overflow: hidden;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
padding-bottom: 30rpx;
|
||||
.tags {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
border-radius: 50rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f2f2f2;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history-search {
|
||||
.title-text.history-line {
|
||||
position: relative;
|
||||
border-top: 2rpx solid #e1e1e1;
|
||||
}
|
||||
.his-search-tags {
|
||||
overflow: hidden;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
.tags {
|
||||
max-width: 300rpx;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
border-radius: 50rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f2f2f2;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clear-history {
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
.search-tit-empty {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-box">
|
||||
<input
|
||||
placeholder="输入关键字搜索"
|
||||
class="sear-input"
|
||||
confirm-type="search"
|
||||
:value="prodName"
|
||||
@confirm="toSearchProdPage"
|
||||
@input="getSearchContent"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/search.png"
|
||||
class="search-img"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
class="search-hint"
|
||||
@tap="goBackIndex"
|
||||
>
|
||||
取消
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="search-display">
|
||||
<!-- 热门搜索 -->
|
||||
<view class="hot-search">
|
||||
<view class="title-text">
|
||||
热门搜索
|
||||
</view>
|
||||
<view
|
||||
v-if="hotSearchList && hotSearchList.length"
|
||||
class="hot-search-tags"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in hotSearchList"
|
||||
:key="index"
|
||||
>
|
||||
<text
|
||||
class="tags"
|
||||
:data-name="item.content"
|
||||
@tap="onHistSearch"
|
||||
>
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="search-tit-empty"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<view
|
||||
v-if="recentSearch && recentSearch.length"
|
||||
class="history-search"
|
||||
>
|
||||
<view class="title-text history-line">
|
||||
搜索历史
|
||||
<view class="clear-history">
|
||||
<image
|
||||
src="@/static/images/icon/clear-his.png"
|
||||
@tap="clearSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<block
|
||||
v-for="(item, index) in recentSearch"
|
||||
:key="index"
|
||||
>
|
||||
<view class="his-search-tags">
|
||||
<text
|
||||
class="tags"
|
||||
:data-name="item"
|
||||
@tap="onHistSearch"
|
||||
>
|
||||
{{ item }}
|
||||
</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const hotSearchList = ref([])
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
http.request({
|
||||
url: '/search/hotSearchByShopId',
|
||||
method: 'GET',
|
||||
data: {
|
||||
number: 10,
|
||||
shopId: 1,
|
||||
sort: 1
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
hotSearchList.value = data
|
||||
})
|
||||
// 获取历史搜索
|
||||
getRecentSearch()
|
||||
})
|
||||
|
||||
const prodName = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide(() => {
|
||||
prodName.value = ''
|
||||
})
|
||||
|
||||
const recentSearch = ref([])
|
||||
/**
|
||||
* 获取历史搜索
|
||||
*/
|
||||
const getRecentSearch = () => {
|
||||
recentSearch.value = uni.getStorageSync('recentSearch')
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索提交
|
||||
*/
|
||||
const toSearchProdPage = () => {
|
||||
if (prodName.value.trim()) {
|
||||
// 记录最近搜索
|
||||
let recentSearchStorage = uni.getStorageSync('recentSearch') || []
|
||||
recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value)
|
||||
recentSearchStorage.unshift(prodName.value)
|
||||
if (recentSearchStorage.length > 10) {
|
||||
recentSearchStorage.pop()
|
||||
}
|
||||
uni.setStorageSync('recentSearch', recentSearchStorage) // 跳转到商品列表页
|
||||
uni.navigateTo({
|
||||
url: '/pages/search-prod-show/search-prod-show?prodName=' + prodName.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空搜索历史
|
||||
*/
|
||||
const clearSearch = () => {
|
||||
uni.removeStorageSync('recentSearch')
|
||||
getRecentSearch()
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回首页
|
||||
*/
|
||||
const goBackIndex = () => {
|
||||
uni.navigateBack({
|
||||
url: '/pages/search-page/search-page'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入商品名获取数据 || 绑定输入值
|
||||
*/
|
||||
const getSearchContent = (e) => {
|
||||
prodName.value = e.detail.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击搜素历史
|
||||
*/
|
||||
const onHistSearch = (e) => {
|
||||
prodName.value = e.currentTarget.dataset.name
|
||||
toSearchProdPage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './search-page.scss';
|
||||
</style>
|
||||
@ -0,0 +1,186 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.empty.empty-top {
|
||||
margin-top: 300rpx;
|
||||
}
|
||||
}
|
||||
.fixed-box {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 10rpx 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #e1e1e1;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform-origin: 50% 100% 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.tab-item.on {
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: #777;
|
||||
background: #fff;
|
||||
z-index: 3;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 30rpx 0;
|
||||
.search-box {
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
background: #f7f7f7;
|
||||
z-index: 999;
|
||||
width: 80%;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 30rpx;
|
||||
flex: 1;
|
||||
.search-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 14rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.search-hint {
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 31rpx;
|
||||
color: #eb2444;
|
||||
}
|
||||
.search-list-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
font-size: 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sear-input {
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 0;
|
||||
margin: 0 30rpx 0 64rpx;
|
||||
line-height: 48rpx;
|
||||
vertical-align: top;
|
||||
background: #f7f7f7;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.prod-show {
|
||||
background: #fff;
|
||||
.prod-items {
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.prod-items {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.hotsale-item-cont {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.prod-list {
|
||||
padding-top: 150rpx;
|
||||
min-height: calc(100vh - 150rpx);
|
||||
.cont-item {
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
.show-item {
|
||||
.more-prod-pic {
|
||||
text-align: center;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
font-size: 0;
|
||||
.more-pic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
|
||||
.prod-text-right {
|
||||
margin-left: 20rpx;
|
||||
width: 75%;
|
||||
.cate-prod-info {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin: 10rpx 0 20rpx 0;
|
||||
}
|
||||
.go-to-buy {
|
||||
font-size: 26rpx;
|
||||
background: #eb2444;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
padding: 8rpx 3rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
.prod-text.more {
|
||||
margin: 0;
|
||||
height: 78rpx;
|
||||
font-size: 28rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #000;
|
||||
}
|
||||
.prod-price.more {
|
||||
font-size: 28rpx;
|
||||
color: #eb2444;
|
||||
font-family: arial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="fixed-box">
|
||||
<view class="search-bar">
|
||||
<view class="search-box">
|
||||
<input
|
||||
placeholder="输入关键字搜索"
|
||||
class="sear-input"
|
||||
:value="prodName"
|
||||
confirm-type="search"
|
||||
@input="getSearchContent"
|
||||
@confirm="toSearchConfirm"
|
||||
>
|
||||
<image
|
||||
src="@/static/images/icon/search.png"
|
||||
class="search-img"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="search-list-img"
|
||||
@tap="changeShowType"
|
||||
>
|
||||
<image
|
||||
v-if="showType==1"
|
||||
src="@/static/images/icon/search-col.png"
|
||||
/>
|
||||
<image
|
||||
v-if="showType==2"
|
||||
src="@/static/images/icon/search-col2.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<text
|
||||
:class="'tab-item complete ' + (sts==0?'on':'')"
|
||||
data-sts="0"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
综合
|
||||
</text>
|
||||
<text
|
||||
:class="'tab-item ' + (sts==1?'on':'')"
|
||||
data-sts="1"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
销量
|
||||
</text>
|
||||
<text
|
||||
:class="'tab-item ' + (sts==2?'on':'')"
|
||||
data-sts="2"
|
||||
@tap="onStsTap"
|
||||
>
|
||||
价格
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="prod-list">
|
||||
<!-- 横向列表 -->
|
||||
<view
|
||||
v-if="showType==1"
|
||||
class="prod-show"
|
||||
>
|
||||
<view class="hotsale-item-cont">
|
||||
<block
|
||||
v-for="(item, index) in searchProdList"
|
||||
:key="index"
|
||||
>
|
||||
<production
|
||||
:item="item"
|
||||
sts="6"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 纵向列表 -->
|
||||
<view
|
||||
v-if="showType==2"
|
||||
class="cont-item"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in searchProdList"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="show-item"
|
||||
:data-prodid="item.prodId"
|
||||
@tap="toProdPage"
|
||||
>
|
||||
<view class="more-prod-pic">
|
||||
<image
|
||||
:src="item.pic"
|
||||
class="more-pic"
|
||||
/>
|
||||
</view>
|
||||
<view class="prod-text-right">
|
||||
<view class="prod-text more">
|
||||
{{ item.prodName }}
|
||||
</view>
|
||||
<view class="cate-prod-info">
|
||||
{{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评
|
||||
</view>
|
||||
<view class="prod-price more">
|
||||
<text class="symbol">
|
||||
￥
|
||||
</text>
|
||||
<text class="big-num">
|
||||
{{ wxs.parsePrice(item.price)[0] }}
|
||||
</text>
|
||||
<text class="small-num">
|
||||
.{{ wxs.parsePrice(item.price)[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 空占位 -->
|
||||
<view
|
||||
v-if="!searchProdList.length"
|
||||
:class="['empty',showType==1? 'empty-top':'']"
|
||||
>
|
||||
暂无结果
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wxs = number()
|
||||
const prodName = ref('')
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad((options) => {
|
||||
prodName.value = options.prodName
|
||||
})
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow(() => {
|
||||
toLoadData()
|
||||
})
|
||||
|
||||
const showType = ref(2)
|
||||
const changeShowType = () => {
|
||||
if (showType.value == 1) {
|
||||
showType.value = 2
|
||||
} else {
|
||||
showType.value = 1
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入商品获取数据
|
||||
* @param e
|
||||
*/
|
||||
const getSearchContent = (e) => {
|
||||
prodName.value = e.detail.value
|
||||
}
|
||||
|
||||
const sts = ref(0)
|
||||
const searchProdList = ref([])
|
||||
/**
|
||||
* 请求热门搜索商品接口
|
||||
*/
|
||||
const toLoadData = () => {
|
||||
http.request({
|
||||
url: '/search/searchProdPage',
|
||||
method: 'GET',
|
||||
data: {
|
||||
current: 1,
|
||||
prodName: prodName.value,
|
||||
size: 10,
|
||||
sort: sts.value
|
||||
}
|
||||
})
|
||||
.then(({ data }) => {
|
||||
searchProdList.value = data.records
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前搜索页二次搜索商品
|
||||
*/
|
||||
const toSearchConfirm = (e) => {
|
||||
if (e.detail.value) {
|
||||
let recentSearch = uni.getStorageSync('recentSearch') || []
|
||||
recentSearch = recentSearch.filter(item => item !== prodName.value)
|
||||
recentSearch.unshift(prodName.value)
|
||||
if (recentSearch.length > 10) {
|
||||
recentSearch.pop()
|
||||
}
|
||||
uni.setStorageSync('recentSearch', recentSearch)
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pages/search-prod-show/search-prod-show?prodName=' + e.detail.value
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态点击事件
|
||||
*/
|
||||
const onStsTap = (e) => {
|
||||
sts.value = e.currentTarget.dataset.sts
|
||||
toLoadData()
|
||||
}
|
||||
|
||||
const toProdPage = (e) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/prod/prod?prodid=' + e.currentTarget.dataset.prodid
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use './search-prod-show.scss';
|
||||
</style>
|
||||
@ -0,0 +1,433 @@
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.submit-order {
|
||||
margin-bottom: 100rpx;
|
||||
padding-bottom: 160rpx;
|
||||
.delivery-addr {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.addr-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 24rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
padding-top: 20rpx;
|
||||
line-height: 48rpx;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
.item {
|
||||
font-size: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
width: 90%;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 15rpx;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.arrow {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-top: 2rpx solid #777;
|
||||
border-right: 2rpx solid #777;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 60rpx;
|
||||
}
|
||||
.arrow.empty {
|
||||
top: 39rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.delivery-addr {
|
||||
.addr-bg {
|
||||
.add-addr {
|
||||
.plus-sign {
|
||||
color: #eb2444;
|
||||
border: 2rpx solid #eb2444;
|
||||
padding: 0rpx 6rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.addr-bg.whole {
|
||||
padding: 0 39rpx 0 77rpx;
|
||||
}
|
||||
}
|
||||
.addr-bg {
|
||||
.add-addr {
|
||||
.plus-sign-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-size: 0;
|
||||
margin-right: 10rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.item-cont {
|
||||
.prod-pic {
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
font-size: 0;
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f1f1f1;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 160rpx;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
.prodname {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
max-height: 86rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.prod-info-cont {
|
||||
color: #999;
|
||||
line-height: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-num {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
.clear-btn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-size: 0;
|
||||
vertical-align: top;
|
||||
margin-top: 6rpx;
|
||||
margin-left: 42rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 1px;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: #ddd;
|
||||
}
|
||||
.clear-list-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-num {
|
||||
text-align: right;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
.prodprice {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
}
|
||||
.prodcount {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.price-nums {
|
||||
.prodprice {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.prodcount {
|
||||
position: absolute;
|
||||
bottom: 5rpx;
|
||||
right: 0;
|
||||
color: #999;
|
||||
font-family: verdana;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order-msg {
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 28rpx;
|
||||
.msg-item {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
&:first-child {
|
||||
border: 0;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 16rpx 0;
|
||||
align-items: center;
|
||||
.item-tit {
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.item-txt {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
font-family: arial;
|
||||
max-height: 48rpx;
|
||||
overflow: hidden;
|
||||
line-height: 48rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.item-txt.price {
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
.coupon-btn {
|
||||
display: block;
|
||||
margin: 0 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
.arrow {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
}
|
||||
}
|
||||
.item.payment {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
color: #eb2444;
|
||||
}
|
||||
.item.coupon {
|
||||
border-bottom: 2rpx solid #e1e1e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit-order-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
display: -webkit-flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.sub-order {
|
||||
flex: 1;
|
||||
margin: 0 30rpx;
|
||||
line-height: 100rpx;
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
.item-txt {
|
||||
.price {
|
||||
display: inline;
|
||||
color: #eb2444;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-box {
|
||||
padding: 0 10rpx;
|
||||
width: 200rpx;
|
||||
background: #eb2444;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.popup-hide {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.popup-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
.popup-tit {
|
||||
position: relative;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
border-radius: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 18px;
|
||||
padding: 1px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
&::before {
|
||||
content: "\2716";
|
||||
}
|
||||
}
|
||||
.coupon-tabs {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.coupon-tab {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.coupon-tab.on {
|
||||
border-bottom: 2px solid #eb2444;
|
||||
font-weight: 600;
|
||||
}
|
||||
.popup-cnt {
|
||||
height: calc(100% - 88px);
|
||||
overflow: auto;
|
||||
padding: 0 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.coupon-ok {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
box-shadow: 0px -1px 1px #ddd;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
text {
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 450rpx;
|
||||
padding: 7px;
|
||||
background: -o-linear-gradient(right, #f45c43, #eb2444);
|
||||
background: linear-gradient(right, #f45c43, #eb2444);
|
||||
background: -webkit-linear-gradient(right, #f45c43, #eb2444);
|
||||
color: #fff;
|
||||
box-shadow: -1px 3px 3px #aaa;
|
||||
}
|
||||
}
|
||||
.botm-empty {
|
||||
height: 60px;
|
||||
}
|
||||
checkbox {
|
||||
.wx-checkbox-input {
|
||||
border-radius: 50%;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
.wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background: #eb2444;
|
||||
border-color: #eb2444;
|
||||
&::before {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue