349 lines
7.3 KiB
Vue
349 lines
7.3 KiB
Vue
<template>
|
|
<view class="image-recognition-result-page">
|
|
<hx-navbar
|
|
:back="true"
|
|
:fixed="true"
|
|
:statusBar="true"
|
|
left-icon="arrowleft"
|
|
color="#333"
|
|
transparent="auto"
|
|
barPlaceholder="hidden"
|
|
title="识别结果"
|
|
/>
|
|
<view
|
|
class="page-body"
|
|
:style="{ 'padding-top': (44 + statusBarHeight) + 'px' }"
|
|
>
|
|
<view class="header">
|
|
<view
|
|
class="header-bg"
|
|
:style="{ 'background-image': imageUrl ? `url(${imageUrl})` : '' }"
|
|
/>
|
|
<view class="header-mask" />
|
|
<view class="scan-wrap">
|
|
<image
|
|
v-if="imageUrl"
|
|
:src="imageUrl"
|
|
class="scan-image"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="corner tl" />
|
|
<view class="corner tr" />
|
|
<view class="corner bl" />
|
|
<view class="corner br" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sheet">
|
|
<view class="sheet-thumb-row">
|
|
<image
|
|
v-if="imageUrl"
|
|
:src="imageUrl"
|
|
class="sheet-thumb"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
<view class="sheet-divider" />
|
|
|
|
<view class="goods-grid">
|
|
<view
|
|
v-for="(item, index) in goodsList"
|
|
:key="index"
|
|
class="goods-card"
|
|
@click="goGoods(item)"
|
|
>
|
|
<image
|
|
:src="item.img"
|
|
class="goods-img"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="goods-title">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="goods-price-row">
|
|
<view class="price-left">
|
|
<text class="price-symbol">￥</text>
|
|
<text class="price-val">{{ item.price }}</text>
|
|
<text v-if="item.originPrice" class="origin-price">￥{{ item.originPrice }}</text>
|
|
</view>
|
|
<image
|
|
:src="webUrl + '/home/icon-cart.png'"
|
|
class="cart-btn"
|
|
mode="aspectFit"
|
|
@click.stop="addToCart(item)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiChatImageRecognitionResultPage',
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
statusBarHeight: 20,
|
|
imageUrl: '',
|
|
goodsList: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.initSystemInfo()
|
|
const urlFromQuery = options.imageUrl || ''
|
|
const urlFromStorage = uni.getStorageSync('recognitionImage') || ''
|
|
this.imageUrl = urlFromQuery || urlFromStorage || ''
|
|
if (urlFromStorage) {
|
|
uni.removeStorageSync('recognitionImage')
|
|
}
|
|
this.goodsList = this.buildMockGoods(this.imageUrl)
|
|
},
|
|
methods: {
|
|
initSystemInfo() {
|
|
uni.getSystemInfo({
|
|
success: (e) => {
|
|
this.statusBarHeight = e.statusBarHeight || 20
|
|
}
|
|
})
|
|
},
|
|
buildMockGoods(fallbackImg) {
|
|
const img = fallbackImg || (this.webUrl + '/home/no-data-bg.png')
|
|
return [
|
|
{
|
|
id: 0,
|
|
img,
|
|
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
|
price: '39.8',
|
|
originPrice: '40.00'
|
|
},
|
|
{
|
|
id: 1,
|
|
img,
|
|
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
|
price: '39.8',
|
|
originPrice: '40.00'
|
|
},
|
|
{
|
|
id: 2,
|
|
img,
|
|
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
|
price: '39.8',
|
|
originPrice: '40.00'
|
|
},
|
|
{
|
|
id: 3,
|
|
img,
|
|
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
|
price: '39.8',
|
|
originPrice: '40.00'
|
|
}
|
|
]
|
|
},
|
|
goGoods(item) {
|
|
if (!item || !item.productId) return
|
|
uni.navigateTo({
|
|
url: `/pages/shop/GoodsCon/index?id=${item.productId}`
|
|
})
|
|
},
|
|
addToCart() {
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-recognition-result-page {
|
|
min-height: 100vh;
|
|
background: #F5F8FF;
|
|
|
|
.page-body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
height: 520rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #DDE6FF;
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: blur(18rpx);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.header-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.scan-wrap {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 320rpx;
|
|
height: 320rpx;
|
|
transform: translate(-50%, -52%);
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 18rpx 48rpx rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.scan-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border: 6rpx solid rgba(255, 255, 255, 0.95);
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.corner.tl {
|
|
left: 16rpx;
|
|
top: 16rpx;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
}
|
|
.corner.tr {
|
|
right: 16rpx;
|
|
top: 16rpx;
|
|
border-left: 0;
|
|
border-bottom: 0;
|
|
}
|
|
.corner.bl {
|
|
left: 16rpx;
|
|
bottom: 16rpx;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
}
|
|
.corner.br {
|
|
right: 16rpx;
|
|
bottom: 16rpx;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.sheet {
|
|
position: relative;
|
|
margin-top: -70rpx;
|
|
background: #FFFFFF;
|
|
border-top-left-radius: 42rpx;
|
|
border-top-right-radius: 42rpx;
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 28rpx);
|
|
}
|
|
|
|
.sheet-thumb-row {
|
|
padding: 28rpx 0 18rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-thumb {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 18rpx;
|
|
display: block;
|
|
box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.sheet-divider {
|
|
height: 2rpx;
|
|
background: #EDEDED;
|
|
margin: 0 32rpx;
|
|
}
|
|
|
|
.goods-grid {
|
|
padding: 28rpx 24rpx 0 24rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.goods-card {
|
|
width: 344rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 22rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 22rpx;
|
|
box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.goods-img {
|
|
width: 344rpx;
|
|
height: 344rpx;
|
|
display: block;
|
|
}
|
|
|
|
.goods-title {
|
|
padding: 14rpx 14rpx 0 14rpx;
|
|
font-size: 28rpx;
|
|
line-height: 38rpx;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
min-height: 76rpx;
|
|
}
|
|
|
|
.goods-price-row {
|
|
padding: 10rpx 14rpx 16rpx 14rpx;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.price-left {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.price-symbol {
|
|
font-size: 26rpx;
|
|
color: #C52733;
|
|
line-height: 1;
|
|
margin-right: 2rpx;
|
|
}
|
|
|
|
.price-val {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #C52733;
|
|
line-height: 1;
|
|
}
|
|
|
|
.origin-price {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 1;
|
|
margin-left: 12rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.cart-btn {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|