396316021
/
warm_man
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

商品详情

1.0
396316021 2 years ago
parent
30bb2e1665
commit
bca3b21e5e
3 changed files with 518 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      pages.json
  2. 206
      pages/Goods/components/index.scss
  3. 307
      pages/Goods/index.vue

5
pages.json
Unescape View File

@ -111,6 +111,11 @@
"style" : {
"navigationBarTitleText" : "公寓详情"
}
},{
"path" : "pages/Goods/index",
"style" : {
"navigationBarTitleText" : "商品详情"
}
}
],
"globalStyle" : {

206
pages/Goods/components/index.scss
Unescape View File

@ -0,0 +1,206 @@
.detail-container{
position: relative;
top:-40rpx;
border-radius: 40rpx;
background:{
color:#F5F5F6;
}
padding:24rpx 26rpx;
padding-bottom:150rpx;
.detail-item{
background:{
color:#FEFEFE;
}
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-bottom:20rpx;
padding:20rpx 24rpx;
justify-content: flex-start;
.cell-two-container{
align-items: center;
line-height:1;
.cell-title {
font-size: 32rpx;
font-weight: 400;
color: #020B18;
line-height: 1;
}
.cell-border{
height:40rpx;
width: 8rpx;
margin:{
right:12rpx;
}
background:{
color:#FF9545;
}
}
}
&.price{
padding:20rpx 0;
.pad-26{
padding-left:24rpx;
padding-right:24rpx;
}
width:auto;
align-items: flex-end;
justify-content: space-between;
.price-container{
justify-content: flex-start;
align-items: flex-end;
width:auto;
}
.item-desc{
margin-top:26rpx;
justify-content: space-between;
.item{
text-align: left;
justify-content: left;
}
}
.tags{
margin-top:20rpx;
.tag{
font-size:24rpx;
color:#AFB5BE;
font-weight: 400;
padding:10rpx 12rpx;
background-color:rgba(175, 181, 190, 0.1);
border-radius: 8rpx;
margin-right:8rpx;
margin-bottom:8rpx;
}
}
.hr{
width:100%;
height: 2rpx;
background: #F5F5F6;
}
.address{
justify-content: space-between;
padding-top:24rpx;
.address-btn{
padding:10rpx;
background:{
color:#FF9545;
}
border-radius: 50%;
}
}
}
&.info,&.detail{
.body{
padding:50rpx 14rpx;
.item{
.check-item{
margin-bottom:32rpx;
}
}
}
}
}
}
::v-deep .u-text__price{
display:none;
}
.foot-button{
padding:40rpx 26rpx;
position: fixed;
bottom:0;
left:0;
z-index: 9999;
width: 100%;
background: {
color:#FFFFFF;
};
justify-content: space-between;
.button-group{
display:flex;
.desc{
align-items: center;
margin-right: 38rpx;
}
.button{
padding:22rpx 40rpx;
border-radius: 40rpx;
&.phone{
background-color:#80C5B6;
display: flex;
margin-right:16rpx;
}
&.exchange{
background-color:#FF9545;
}
}
}
}
.cell-title{
margin-bottom:18rpx;
}
.cell-title-desc{
align-items: center;
.icon{
margin-right:6rpx;
}
}
.cell-icon{
align-items: flex-start;
margin-right:40rpx;
}
.detail-image{
width:100%;
}
.price-container-out{
width:100%;
display: flex;
height:auto;
margin-bottom:68rpx;
margin-top:48rpx;
align-items: flex-end;
}
.popup-container{
align-items: flex-end;
justify-content: space-between;
.price-container{
align-items: flex-end;
}
.hr{
width:100%;
height: 2rpx;
background: #F5F5F6;
}
.pad-26{
padding-left:24rpx;
padding-right:24rpx;
}
.tags{
margin-top:20rpx;
.tag{
font-size:28rpx;
color:#020B18;
font-weight: 400;
padding:18rpx 50rpx;
background-color:rgba(175, 181, 190, 0.1);
border-radius: 8rpx;
margin-right:16rpx;
margin-bottom:16rpx;
flex-wrap: wrap;
}
}
}
.pop-cell{
align-items: center;
padding:{
top:28rpx;
bottom:28rpx;
}
.left{
margin-right:44rpx;
}
}
.submit-button{
margin-top:78rpx;
}

307
pages/Goods/index.vue
Unescape View File

@ -0,0 +1,307 @@
<template>
<view class="body-background"></view>
<u-navbar
:title="title"
:auto-back="true"
left-icon-size="40rpx"
:safe-area-inset-top="true"
:placeholder="true"
bgColor="#fff"
></u-navbar>
<u-swiper
:list="detail.images"
indicatorMode="line"
indicator
height="720"
></u-swiper>
<view class="detail-container">
<view class="detail-item price row ">
<view class="price-container row pad-26">
<view class="price-item">
<u-text size="32" color="#FF9545" text="暖新币" custom-style="margin-right:10rpx;"></u-text>
</view>
<view class="price-item">
<u-text mode="price" size="48" color="#FF9545" :text="detail.price"></u-text>
</view>
</view>
<view class="street pad-26">
<u-text size="28" color="#AFB5BE" text="已兑换 50件"></u-text>
</view>
<view class="item-desc row pad-26">
<view class="item">
<view class="title">
<u-text align="left" size="36" color="#020B18"
text="新鲜鹿茸菇特级干货鹿茸菌云南特产煲汤脆姑蘑菇香菇48元500g包邮"></u-text>
</view>
</view>
</view>
<view class="hr"></view>
<view class="cell row pad-26">
<u-cell-group :border="false">
<u-cell
:rightIconStyle="{
fontSize:'28rpx'
}"
:center="true"
:border="false"
:clickable="false"
>
<template v-slot:icon>
<viwew class="cell-icon">
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="50" width="50"></u-image>
</viwew>
</template>
<template v-slot:title>
<view class="cell-container ">
<view class="cell-title">
<u-text align="left" size="28" color="#020B18"
text="退换货售后服务请联系客服"></u-text>
</view>
<view class="cell-border"></view>
<view class="cell-title-desc row">
<view class="icon">
<u-icon name="phone-fill" size="30" color="#FF9545"></u-icon>
</view>
<view class="value">
<u-text align="left" size="28" color="#FF9545"
text="028-66668888"></u-text>
</view>
</view>
</view>
</template>
</u-cell>
<view class="hr"></view>
<u-cell
:rightIconStyle="{
fontSize:'28rpx'
}"
:center="true"
:border="false"
:clickable="false"
>
<template v-slot:icon>
<viwew class="cell-icon">
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="50" width="50"></u-image>
</viwew>
</template>
<template v-slot:title>
<view class="cell-container ">
<view class="cell-title">
<u-text align="left" size="28" color="#020B18"
text="全暖新币兑换"></u-text>
</view>
</view>
</template>
</u-cell>
<view class="hr"></view>
<u-cell
:rightIconStyle="{
fontSize:'28rpx'
}"
:center="true"
:border="false"
:clickable="false"
>
<template v-slot:icon>
<viwew class="cell-icon">
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="50" width="50"></u-image>
</viwew>
</template>
<template v-slot:title>
<view class="cell-container ">
<view class="cell-title">
<u-text align="left" size="28" color="#020B18"
text="全国包邮"></u-text>
</view>
</view>
</template>
</u-cell>
<view class="hr"></view>
</u-cell-group>
</view>
<u-loadmore
fontSize="28"
color="#AFB5BE"
loadmore-text="商品详情"
marginTop="72"
marginBottom="32"
line
/>
<view class="detail-image">
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
<u-image mode="aspectFill" class="img" src="http://baidu.co/" height="500" width="100%"></u-image>
</view>
</view>
</view>
<view class="foot-button border-box row">
<view class="collect">
<!-- <u-icon name="heart-fill" size="48" color="#FF9545"></u-icon>-->
<!-- <u-text size="28" color="#FF9545" text="收藏" align="center"></u-text>-->
<!-- <u-icon name="heart-fill" size="48" color="#AFB5BE"></u-icon>-->
</view>
<view class="button-group">
<view class="desc row col">
<view class="desc-content">
<u-text size="32" color="#020B18" text="可用暖新币："></u-text>
</view>
<view class="desc-content">
<u-text size="32" color="#FF9545" text="3986"></u-text>
</view>
<view class="desc-content">
<u-text size="32" color="#020B18" text="币"></u-text>
</view>
</view>
<view class="button exchange">
<u-text size="32" color="#020B18" text="立即兑换"></u-text>
</view>
</view>
</view>
<u-popup :show="true" mode="bottom" :round="10" @close="close" @open="open">
<view class="popup-container row">
<view class="price-container-out ">
<view class="price-container row col pad-26">
<view class="price-item">
<u-text size="32" color="#FF9545" text="暖新币" custom-style="margin-right:10rpx;"></u-text>
</view>
<view class="price-item">
<u-text mode="price" size="48" color="#FF9545" :text="detail.price"></u-text>
</view>
</view>
<view class="street pad-26">
<u-text size="28" color="#AFB5BE" text="库存充足"></u-text>
</view>
</view>
<view class="hr"></view>
<view class="pop-cell row pad-26">
<view class="left">
<u-text size="32" color="#AFB5BE" text="规格" custom-style="margin-right:10rpx;"></u-text>
</view>
<view class="right col">
<view class="tags row">
<view class="tag">123</view>
<view class="tag">456</view>
<view class="tag">789</view>
<view class="tag">321</view>
</view>
</view>
</view>
<view class="hr"></view>
<view class="pop-cell row pad-26">
<view class="left">
<u-text size="32" color="#AFB5BE" text="数量" custom-style="margin-right:10rpx;"></u-text>
</view>
<view class="right col">
<u-number-box inputWidth="60" buttonSize="60" v-model="value">
<template #input>
<view class="number">
<u-input type="number" v-model="value" @minus="" @plus="" customStyle="width:60rpx;height:60rpx"></u-input>
</view>
</template>
</u-number-box>
</view>
</view>
<view class="hr"></view>
<view class="submit-button col-12 pad-26">
<u-button
type="primary"
text="确认兑换"
shape="circle"
:custom-style="{
color:'#020B18',
backgroundColor:'#FF9545',
border:'none',
fontSize:'36',
fontWeight:'400',
height:'80rpx'
}"
@click="submit"
></u-button>
</view>
</view>
</u-popup>
</template>
<script>
import api from "@/utils/functions.js";
import {roomDetail} from "@/api/shop";
export default {
computed: {},
components: {},
data() {
return {
title: '商品详情',
size: {
height: 0
},
value:1,
detail: {
id: '',
images: '',
price: '',
street: '',
bedroom_number: '',
area: '',
toward: '',
year: '',
payment_cycle: '',
payment_type: '',
address: '',
coordinate: '',
rental_overview: '',
jiadian: '',
furniture: '',
tel: '',
}
}
},
onLoad(option) {
this.getDetail(option.id)
},
onReady() {
this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
},
methods: {
getDetail(id) {
roomDetail({
house_id: id
}).then(res => {
console.log(res.data)
this.detail = res.data;
});
}
},
onPageScroll(res) {
},
created() {
},
mounted() {
},
}
</script>
<style lang="scss">
@import './components/index.scss';
</style>
Write Preview
Loading…
Cancel
Save