You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
4.5 KiB
176 lines
4.5 KiB
<template>
|
|
<view class="make-container">
|
|
<view class="content">
|
|
<view class="model-content border-radius">
|
|
<view class="model-image border-radius">
|
|
<image :src="data.modelImg" style="width: 100%; height: 100%"></image>
|
|
</view>
|
|
<view class="model-info">
|
|
<view class="model-title">{{ data.modelTitle }}</view>
|
|
<view class="model-tips">
|
|
<uni-icons
|
|
type="info-filled"
|
|
class="tips-icon"
|
|
color=""
|
|
size="20"
|
|
/>
|
|
<text>注意事项</text>
|
|
</view>
|
|
<view class="tips-content">
|
|
<view class="memo-tips" v-for="memo in data.memoList" :key="memo">{{
|
|
memo
|
|
}}</view>
|
|
</view>
|
|
<view class="bot-right">
|
|
<text>{{ "消耗：" + data.starNum }}</text>
|
|
<image
|
|
style="width: 26rpx; height: 26rpx"
|
|
src="../../static/jd.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="part-title">
|
|
<view class="flag"></view>
|
|
上传照片
|
|
</view>
|
|
<button class="make-btn-style">
|
|
<uni-icons type="plusempty" color="" size="24" />
|
|
</button>
|
|
<view class="part-title">
|
|
<view class="flag"></view>
|
|
历史相册
|
|
</view>
|
|
<view class="img-history border-radius">
|
|
<view
|
|
class="img-content border-radius"
|
|
v-for="img in data.imgHistoryList"
|
|
:key="img.source_img_url"
|
|
>
|
|
<image :src="img.source_img_url" style="width: 100%; height: 100%" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button @click="toMake" class="make-btn-style">立即制作</button>
|
|
</view>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import getData from "./make";
|
|
const { data, toMake } = getData();
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.make-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
padding: $uni-spacing-col-base;
|
|
box-sizing: border-box;
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100% - 112rpx);
|
|
.model-content {
|
|
width: 100%;
|
|
height: 550rpx;
|
|
background-color: white;
|
|
padding: $uni-spacing-col-base;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
margin-bottom: $uni-spacing-col-base;
|
|
.model-image {
|
|
width: 340rpx;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.model-info {
|
|
flex: 1;
|
|
height: 100%;
|
|
padding-left: $uni-spacing-col-base;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.model-title {
|
|
width: 100%;
|
|
font-size: $uni-font-size-lg;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.model-tips {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: $uni-color-warning;
|
|
margin: 10rpx 0;
|
|
.tips-icon {
|
|
margin-left: -5rpx;
|
|
}
|
|
text {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.tips-content {
|
|
width: 100%;
|
|
height: auto;
|
|
font-size: $uni-font-size-base;
|
|
color: $uni-text-color-grey;
|
|
.memo-tips {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
.bot-right {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
color: #ffd100;
|
|
font-size: $uni-font-size-base;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.part-title {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $uni-font-size-lg;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
.flag {
|
|
width: 10rpx;
|
|
height: 35rpx;
|
|
border-radius: 10rpx;
|
|
background-color: $uni-color-primary;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.img-history {
|
|
width: 100%;
|
|
height: auto;
|
|
background-color: white;
|
|
padding: $uni-spacing-col-base;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
.img-content {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.make-btn-style {
|
|
width: 100%;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
margin-bottom: $uni-spacing-col-base;
|
|
}
|
|
}
|
|
</style>
|