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