158 lines
4.5 KiB
Vue
158 lines
4.5 KiB
Vue
<template>
|
|
<view class="Refund">
|
|
<view class="service-content">
|
|
<view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view>
|
|
</view>
|
|
<!-- 商品信息 -->
|
|
<view class="goods-item" @click="onGoods(goodsInfo.goods_id)">
|
|
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
|
|
<view class="item--content">
|
|
<view class="title">{{goodsInfo.name}}</view>
|
|
<view class="sub_title">{{goodsInfo.shop.name}}</view>
|
|
<view class="price">{{goodsInfo.price.price_min || '0'}}
|
|
<view class="price-type">
|
|
<text> DT积分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
goodsInfo: {
|
|
"goods_id": 56,
|
|
"shop": {
|
|
"shop_id": 1,
|
|
"name": "平台自营店铺",
|
|
"cover": "",
|
|
"is_self": true
|
|
},
|
|
"is_self": true,
|
|
"name": "铜锣烧蛋糕",
|
|
"description": "口感丰富，悠闲小食",
|
|
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/11/37ecc570f9d7ad929a693d24118a0311.png",
|
|
"tags": [],
|
|
"original_price": 155,
|
|
"price": {
|
|
"show": "100",
|
|
"score": 1,
|
|
"price_min": 100,
|
|
"price_max": 100
|
|
},
|
|
"clicks": 0,
|
|
"sales": 7394
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.service-content {
|
|
background-color: #Fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
|
|
.service {
|
|
font-size: 24rpx;
|
|
margin: $margin;
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #f9f9f9;
|
|
display: inline-block;
|
|
text-align: center;
|
|
color: #666;
|
|
|
|
span {
|
|
color: $text-price;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-item {
|
|
background-color: #Fff;
|
|
width: 100%;
|
|
display: inline-block;
|
|
border-bottom: solid 1rpx #eee;
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
// padding: $padding;
|
|
padding-left: $padding;
|
|
padding-top: $padding;
|
|
padding-bottom: $padding;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
|
|
.good-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.item--content {
|
|
flex: 1;
|
|
padding: $padding - 10;
|
|
|
|
&>.title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
// @extend .ellipsis-1;
|
|
}
|
|
|
|
&>.sub_title {
|
|
color: #a05f0c;
|
|
font-size: 24rpx;
|
|
padding-top: 4rpx;
|
|
// @extend .ellipsis-1;
|
|
}
|
|
|
|
&>.price {
|
|
padding-top: $padding/2;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: $text-price;
|
|
|
|
// @extend .ellipsis-1;
|
|
.price-type {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
|
|
text {
|
|
margin-right: $margin/2;
|
|
padding-left: 6rpx;
|
|
font-size: 70%;
|
|
}
|
|
|
|
.kucun {
|
|
color: $text-gray;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|