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="bg"></view>
<view class="map-info"> <view class="map-info">
<view class="map-info-hd"> <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>
<view class="map-info-bd more-t"> <view class="map-info-bd more-t">
{{ store.address }} {{ store.address }}
</view> </view>
<view class="map-info-ft flex"> <view class="map-info-ft flex">
<view class="item" @click="showLocation"> <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>
</view> </view>
<view class="item" @click="call"> <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>
</view> </view>
</view> </view>
@@ -139,10 +139,10 @@
class="tab" class="tab"
@click="changeTab(item.value)" @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 }} {{ item.text }}
</text> </view>
<view v-show="activeIndex === index" class="btLine"></view> <!-- <view v-show="activeIndex === index" class="btLine"></view> -->
</view> </view>
</view> </view>
<view> <view>
@@ -160,16 +160,28 @@
:src="item.productImage" :src="item.productImage"
class="cover" class="cover"
/> />
<view class=""> <view class="" style="padding: 20rpx">
<view class="name more-t">{{ item.productName }}</view> <view class="v12-pt-2 v12-font-bold v12-font-28 more-t" style="height: 84rpx">{{ item.productName }}</view>
<view class="price-line flex ai-center"> <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 <image
:src="webUrl + '/20221118104357701129.png'" :src="webUrl + '/20221118104357701129.png'"
class="label" class="label"
mode="scaleToFill" mode="scaleToFill"
/> />
<text>￥{{ item.productPrice }}</text> <text class="v12-primary-text">￥{{ item.productPrice }}</text>
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
@@ -322,9 +334,8 @@
</template> </template>
<script> <script>
import { getFarmerShop, setFarmerShopZan, getFarmerShopNews, getFarmerShopQualification } from '@/api/farmer' import { getFarmerShop, setFarmerShopZan, getFarmerShopNews, setFarmerShopCollection } from '@/api/farmer'
import { postCountyFamousNewsZan, postCountyFamousNewsView } from '@/api/qianxian' import { postCountyFamousNewsZan, postCountyFamousNewsView } from '@/api/qianxian'
import {addStore, removeStore} from "@/api/favorite"
import imgBox from '@/components/imageTypeSet/imagebox.vue' import imgBox from '@/components/imageTypeSet/imagebox.vue'
export default { export default {
components: { components: {
@@ -333,6 +344,10 @@ export default {
data() { data() {
return { return {
webUrl: this.$VUE_APP_RESOURCES_URL, webUrl: this.$VUE_APP_RESOURCES_URL,
videoStyle: {
width: '750rpx',
height: '500rpx'
},
scrollData: {}, scrollData: {},
id: '', id: '',
store: {}, store: {},
@@ -467,21 +482,15 @@ export default {
} }
}) })
}, },
async doneFavorite() { doneFavorite() {
if (this.store.hasFavorite) { const params = {
const res = await removeStore(this.id) farmerShopId: this.id
if (res.success) {
this.getFarmerData()
}
} else {
const res = await addStore(this.id)
if (res.success) {
this.getFarmerData()
}
} }
setFarmerShopCollection(params).then(res => {
this.getFarmerData()
})
}, },
showPic: function (index) { showPic (index) {
uni.previewImage({ uni.previewImage({
current: index, current: index,
urls: this.store.cultureImages urls: this.store.cultureImages
@@ -492,6 +501,16 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.btn {
.img {
display: block;
width: 48rpx;
height: 48rpx;
}
}
.container{
background: #fff;
}
.store-img { .store-img {
width: 686rpx; width: 686rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
@@ -643,18 +662,18 @@ export default {
} }
.goods-section { .goods-section {
padding: 40rpx 32rpx 0; padding: 40rpx 32rpx 0;
background: #F5F5FA; background: #f0f0f0;
.item { .item {
position: relative; position: relative;
width: 332rpx; width: 332rpx;
height: 528rpx; // height: 528rpx;
box-sizing: border-box; box-sizing: border-box;
margin-right: 22rpx; margin-right: 22rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
border-radius: 8rpx; border-radius: 20rpx;
background: #fff; background: #fff;
overflow: hidden;
.name { .name {
padding: 8rpx 6rpx; padding: 8rpx 6rpx;
font-size: 26rpx; font-size: 26rpx;
@@ -709,7 +728,6 @@ export default {
} }
.btn { .btn {
display: flex; display: flex;
padding: 20rpx 0 40rpx 0;
justify-content: center; justify-content: center;
.btn-cont { .btn-cont {
padding: 13rpx 30rpx; padding: 13rpx 30rpx;
@@ -738,16 +756,53 @@ export default {
font-size:28rpx; font-size:28rpx;
} }
.top-tab { .top-tab {
margin: 60rpx 0 0 0; padding-bottom: 30rpx;
border-bottom: 1px solid #ddd; padding-top: 30rpx;
background: #fff;
.tab { .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 { &.hide {
display: none; 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; position: relative;
z-index: 5; z-index: 5;
display: flex; display: flex;
@@ -755,11 +810,12 @@ export default {
padding: 40rpx 10rpx 40rpx 32rpx; padding: 40rpx 10rpx 40rpx 32rpx;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
background: rgba(255,255,255,0.4);
.map-info-hd { .map-info-hd {
.icon { .icon {
display: block; display: block;
width: 56rpx; width: 34rpx;
height: 56rpx; height: 42rpx;
} }
} }
.map-info-bd { .map-info-bd {
@@ -776,13 +832,14 @@ export default {
font-weight: 500; font-weight: 500;
.img { .img {
display: block; display: block;
width: 96rpx; width: 64rpx;
height: 96rpx; height: 64rpx;
margin: 0 0 -16rpx 0; margin: 0 0 16rpx 16rpx;
} }
} }
} }
} }
}
.inn-signature-wrap { .inn-signature-wrap {
position: relative; position: relative;
z-index: 5; z-index: 5;
@@ -801,11 +858,11 @@ export default {
.inn-signature { .inn-signature {
position: relative; position: relative;
padding: 20rpx; padding: 20rpx;
border-radius: 8rpx; border-radius: 20rpx;
font-size: 24rpx; font-size: 24rpx;
color: #080F1A; color: #080F1A;
background: rgba(243,243,246,0.39); background: #fff;
box-shadow: 0px 6px 12px rgba(0,0,0,0.12); box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.08);
} }
.share-btn { .share-btn {
position: absolute; position: absolute;
pkg_product/views/famousQianxianShop.vue
+6 -6
View File
@@ -1161,12 +1161,12 @@ export default {
} }
} }
.btn { .btn {
.img { .img {
display: block; display: block;
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
} }
.my-inn-page { .my-inn-page {
padding: 0 0 100rpx 0; padding: 0 0 100rpx 0;
background-color: #f6f6f6; background-color: #f6f6f6;