268 lines
6.0 KiB
Vue
268 lines
6.0 KiB
Vue
<template>
|
||
<view class="info">
|
||
<view class="header">
|
||
<image src="/static/info/left.png" mode="" class="left"></image>
|
||
</view>
|
||
<view class="content">
|
||
<view class="shang">
|
||
<view class="tupian">
|
||
|
||
</view>
|
||
<view class="neirong">
|
||
<view class="mingzi">
|
||
<view class="left">
|
||
<image src="/static/info/xian.png" mode="" style="height:15px; width:15px;margin-right: 15px;"></image>
|
||
<!-- <image src="/static/info/re.png" mode="" style="height:15px; width:15px;margin-right:15px;" v-if='list.supplier_id<=10000'></image> -->
|
||
<view>碧生源牌常润茶</view>
|
||
</view>
|
||
<image src="/static/info/coll1.png" alt="" class='shouc'></image>
|
||
<!-- <image src="/static/info/coll2.png" alt="" class='shouc' v-if='list.is_collect==0' @click='to_change(1)'></image> -->
|
||
</view>
|
||
<view class="gongsi">
|
||
北京澳特舒尔保健品开发有限公司
|
||
</view>
|
||
<view class="shuliang">
|
||
62.5g(2.5g*20袋+12.5g)
|
||
<image src="/static/info/zheng.png" class="lingling" mode="" style="height:15px; width:15px;"></image>
|
||
<!-- <image src="/static/info/ling.png" class="lingling" mode="" style="height:15px; width:15px;" v-if='list.retail_flag == 0'></image> -->
|
||
<view class="hejian">1盒/件</view>
|
||
</view>
|
||
<view class="price">
|
||
<view class="jiage">￥60.5</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zhong">
|
||
<view class="">
|
||
<view class="" style="width:30%">商品名称</view>
|
||
<view>碧生源牌常润茶</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="" style="width:30%">生产厂家</view>
|
||
<view>北京澳特舒尔保健品开发有限公司</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="" style="width:30%">规格</view>
|
||
<view>62.5g(2.5g*20袋+12.5g)</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="" style="width:30%">有效期</view>
|
||
<view>2022-07-11</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="" style="width:30%">批准文号</view>
|
||
<view>Q/FATS0001-2011</view>
|
||
</view>
|
||
</view>
|
||
<view class="xia">
|
||
<view class="zhuyi">注意事项</view>
|
||
<view class="">
|
||
<view class="guiding">
|
||
1.根据国家规定，药品类商品一般情况下无质量问题不支持退货；
|
||
</view>
|
||
<view class="guiding">
|
||
2.客户在收取商品时，应当面确认商品有无破损，若发生破损，应及时联系客服；确认收货后，概不支持退换货。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="the_car">
|
||
<image src="/static/info/car2.png" mode="" class="gouwuc"></image>
|
||
</view>
|
||
<view class="jiache">加入购物车</view>
|
||
<view class="ligou">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
info: {},
|
||
sku_id: this.$route.query.id,
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getInfoData();
|
||
},
|
||
onLoad(params) {
|
||
this.sku_id = params.sku_id
|
||
},
|
||
methods:{
|
||
async getInfoData() {
|
||
let res = await this.$http.index.goodsDetail({
|
||
sku_id: this.sku_id,
|
||
}
|
||
);
|
||
this.info = res;
|
||
console.log(res)
|
||
},
|
||
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.info{
|
||
height: 100%;
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
.header{
|
||
height: 74px;
|
||
position: relative;
|
||
line-height: 105px;
|
||
font-size: 16px;
|
||
background: linear-gradient(to left,#6B68DC,#008BE6);
|
||
position: sticky;
|
||
top: 44px;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
top: 0;
|
||
/* #endif */
|
||
z-index: 999;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
.left{
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 15px;
|
||
height: 15px;
|
||
width: 9px;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
.content{
|
||
height: calc(100% - 114px);
|
||
overflow-y: auto;
|
||
background-color: #F2F2F2;
|
||
.shang{
|
||
background-color: #FFFFFF;
|
||
margin-bottom: 11px;
|
||
.tupian{
|
||
background-image: url(https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/pc_shop_thumb_url_1606785749538.png);
|
||
background-size: contain;
|
||
background-position: center center;
|
||
height: 175px;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.neirong{
|
||
padding: 15px 5px;
|
||
.mingzi{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left{
|
||
font-size: 14px;
|
||
font-weight: bold !important;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
image{
|
||
height: 15px;
|
||
width: 15px;
|
||
margin-right: 15px;
|
||
}
|
||
view{
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.shouc{
|
||
height: 18px;
|
||
width: 18px;
|
||
margin-right: 15px;
|
||
will-change: transform;
|
||
}
|
||
}
|
||
.gongsi{
|
||
width: 100%;
|
||
}
|
||
.shuliang{
|
||
display: flex;
|
||
align-items: center;
|
||
.lingling{
|
||
margin: 0 10px;
|
||
}
|
||
.hejian{}
|
||
}
|
||
.price{
|
||
.jiage{
|
||
color: #EB5159;
|
||
font-size: 14px;
|
||
font-weight: bold !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.zhong{
|
||
background: #FFFFFF;
|
||
padding: 15px 5px;
|
||
margin-bottom: 11px;
|
||
view{
|
||
display: flex;
|
||
view{
|
||
width: 30%;
|
||
}
|
||
view{
|
||
width: 70%;
|
||
}
|
||
}
|
||
}
|
||
.xia{
|
||
background: #FFFFFF;
|
||
padding: 15px 5px;
|
||
margin-bottom: 11px;
|
||
.zhuyi{
|
||
font-weight: bold !important;
|
||
}
|
||
view{
|
||
.guiding{
|
||
margin: 10px 0 10px 0;
|
||
color: #989898;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer{
|
||
height: 40px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
position: sticky;
|
||
/* #ifdef H5 */
|
||
bottom: 50px;
|
||
/* #ifndef H5 */
|
||
bottom: 0;
|
||
/* #endif */
|
||
z-index: 999;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
background-color: #ffffff;
|
||
.the_car{
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
.gouwuc{
|
||
height: 20px;
|
||
width: 23px;
|
||
}
|
||
}
|
||
.jiache{
|
||
background-color: #EDCA4A;
|
||
line-height: 40px;
|
||
width: 38%;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
.ligou{
|
||
background-color: #EB5159;
|
||
line-height: 40px;
|
||
width: 38%;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|