liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：2702 【商城小程序】千县—农民店铺详情展示效果与设计图不一致，需要调整一下

Browse Source
This commit is contained in:
linxi
2024-11-26 17:47:26 +08:00
parent b7b23ddab4
commit 6a58bf6e45
2 changed files with 106 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/inn/farmerStore.vue
+100 -43
View File
@@ -114,18 +114,18 @@
<view class="bg"></view>
<view class="map-info">
<view class="map-info-hd">
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
<image :src="webUrl + '/page/qianxian/icon-location.png'" class="icon" />
</view>
<view class="map-info-bd more-t">
{{ store.address }}
</view>
<view class="map-info-ft flex">
<view class="item" @click="showLocation">
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
<image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
<view>导航</view>
</view>
<view class="item" @click="call">
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
<image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
<view>客服</view>
</view>
</view>
@@ -139,10 +139,10 @@
class="tab"
@click="changeTab(item.value)"
>
<text :class="activeIndex === index ? 'tab-item-active' : 'tab-item-no-active'">
<view :class="activeIndex === index ? 'active' : ''" class="tab-item">
{{ item.text }}
</text>
<view v-show="activeIndex === index" class="btLine"></view>
</view>
<!-- <view v-show="activeIndex === index" class="btLine"></view> -->
</view>
</view>
<view>
@@ -160,16 +160,28 @@
:src="item.productImage"
class="cover"
/>
<view class="">
<view class="name more-t">{{ item.productName }}</view>
<view class="price-line flex ai-center">
<view class="" style="padding: 20rpx">
<view class="v12-pt-2 v12-font-bold v12-font-28 more-t" style="height: 84rpx">{{ item.productName }}</view>
<view class="v12-justify-between v12-align-center v12-pt-2">
<view>
<text class="v12-font-bold v12-primary-text v12-font-24">￥</text>
<text class="v12-font-bold v12-primary-text v12-font-28">{{ item.productPrice }}</text>
</view>
<view class="btn">
<image
:src="webUrl + '/home/icon-cart.png'"
class="img"
/>
</view>
</view>
<!-- <view class="price-line flex ai-center">
<image
:src="webUrl + '/20221118104357701129.png'"
class="label"
mode="scaleToFill"
/>
<text>￥{{ item.productPrice }}</text>
</view>
<text class="v12-primary-text">￥{{ item.productPrice }}</text>
</view> -->
</view>
</view>
</view>
@@ -322,9 +334,8 @@
</template>
<script>
import { getFarmerShop, setFarmerShopZan, getFarmerShopNews, getFarmerShopQualification } from '@/api/farmer'
import { getFarmerShop, setFarmerShopZan, getFarmerShopNews, setFarmerShopCollection } from '@/api/farmer'
import { postCountyFamousNewsZan, postCountyFamousNewsView } from '@/api/qianxian'
import {addStore, removeStore} from "@/api/favorite"
import imgBox from '@/components/imageTypeSet/imagebox.vue'
export default {
components: {
@@ -333,6 +344,10 @@ export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
videoStyle: {
width: '750rpx',
height: '500rpx'
},
scrollData: {},
id: '',
store: {},
@@ -467,21 +482,15 @@ export default {
}
})
},
async doneFavorite() {
if (this.store.hasFavorite) {
const res = await removeStore(this.id)
if (res.success) {
this.getFarmerData()
}
} else {
const res = await addStore(this.id)
if (res.success) {
this.getFarmerData()
}
doneFavorite() {
const params = {
farmerShopId: this.id
}
setFarmerShopCollection(params).then(res => {
this.getFarmerData()
})
},
showPic: function (index) {
showPic (index) {
uni.previewImage({
current: index,
urls: this.store.cultureImages
@@ -492,6 +501,16 @@ export default {
</script>
<style lang="less" scoped>
.btn {
.img {
display: block;
width: 48rpx;
height: 48rpx;
}
}
.container{
background: #fff;
}
.store-img {
width: 686rpx;
margin-bottom: 20rpx;
@@ -643,18 +662,18 @@ export default {
}
.goods-section {
padding: 40rpx 32rpx 0;
background: #F5F5FA;
background: #f0f0f0;
.item {
position: relative;
width: 332rpx;
height: 528rpx;
// height: 528rpx;
box-sizing: border-box;
margin-right: 22rpx;
margin-bottom: 24rpx;
border-radius: 8rpx;
border-radius: 20rpx;
background: #fff;
overflow: hidden;
.name {
padding: 8rpx 6rpx;
font-size: 26rpx;
@@ -709,7 +728,6 @@ export default {
}
.btn {
display: flex;
padding: 20rpx 0 40rpx 0;
justify-content: center;
.btn-cont {
padding: 13rpx 30rpx;
@@ -738,16 +756,53 @@ export default {
font-size:28rpx;
}
.top-tab {
margin: 60rpx 0 0 0;
border-bottom: 1px solid #ddd;
padding-bottom: 30rpx;
padding-top: 30rpx;
background: #fff;
.tab {
margin: 0 35rpx;
width: 20%;
.tab-item {
height: 52rpx;
padding: 0 30rpx;
border-radius: 26rpx 0 0 26rpx;
font-size: 32rpx;
line-height: 52rpx;
font-weight: bold;
&.active {
color: #fff;
background: linear-gradient(90deg, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
}
}
&.hide {
display: none;
}
}
}
.map-info {
.map-wrapper {
position: relative;
z-index: 2;
height: 200rpx;
margin: 20rpx 0 0 0;
overflow: hidden;
.map-cont {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
opacity: 0.3;
transform: translateY(-50rpx);
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
height: 60rpx;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.map-info {
position: relative;
z-index: 5;
display: flex;
@@ -755,11 +810,12 @@ export default {
padding: 40rpx 10rpx 40rpx 32rpx;
color: #333;
font-size: 14px;
background: rgba(255,255,255,0.4);
.map-info-hd {
.icon {
display: block;
width: 56rpx;
height: 56rpx;
width: 34rpx;
height: 42rpx;
}
}
.map-info-bd {
@@ -776,13 +832,14 @@ export default {
font-weight: 500;
.img {
display: block;
width: 96rpx;
height: 96rpx;
margin: 0 0 -16rpx 0;
width: 64rpx;
height: 64rpx;
margin: 0 0 16rpx 16rpx;
}
}
}
}
}
.inn-signature-wrap {
position: relative;
z-index: 5;
@@ -801,11 +858,11 @@ export default {
.inn-signature {
position: relative;
padding: 20rpx;
border-radius: 8rpx;
border-radius: 20rpx;
font-size: 24rpx;
color: #080F1A;
background: rgba(243,243,246,0.39);
box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
background: #fff;
box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.08);
}
.share-btn {
position: absolute;
pkg_product/views/famousQianxianShop.vue
+6 -6
View File
@@ -1161,12 +1161,12 @@ export default {
}
}
.btn {
.img {
display: block;
width: 48rpx;
height: 48rpx;
}
}
.img {
display: block;
width: 48rpx;
height: 48rpx;
}
}
.my-inn-page {
padding: 0 0 100rpx 0;
background-color: #f6f6f6;