历史页面增加分享框以及若干操作优化
This commit is contained in:
潇
parent
f116020bbc
commit
d1b1ff58f3
@ -50,6 +50,7 @@ class Request {
|
||||
return response;
|
||||
}
|
||||
}
|
||||
console.log(response);
|
||||
throw new Error(response.data)
|
||||
});
|
||||
}
|
||||
@ -93,7 +94,7 @@ class Request {
|
||||
if(!config.ignoreError){
|
||||
wx.showToast({
|
||||
icon:'error',
|
||||
title: response.data.message||'未知错误',
|
||||
title: res.data.message||'未知错误',
|
||||
})
|
||||
}
|
||||
reject(error);
|
||||
|
||||
19
app.json
19
app.json
@ -6,7 +6,8 @@
|
||||
"pages/closet/index/index",
|
||||
"pages/my/index/index",
|
||||
"pages/my/setting/index",
|
||||
"pages/my/setting/name/index"
|
||||
"pages/my/setting/name/index",
|
||||
"pages/my/history/list"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarTextStyle": "black",
|
||||
@ -14,20 +15,22 @@
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
},
|
||||
"tabBar": {
|
||||
"selectedColor": "#FF2727",
|
||||
"color": "#999",
|
||||
"selectedColor": "#000000",
|
||||
"borderStyle": "black",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/closet/index/index",
|
||||
"text": "衣橱",
|
||||
"iconPath": "/assets/tabbar/tab1.png",
|
||||
"selectedIconPath": "/assets/tabbar/tab1-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/try/index/index",
|
||||
"text": "试衣间",
|
||||
"iconPath": "/assets/tabbar/tab2.png",
|
||||
"selectedIconPath": "/assets/tabbar/tab2-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/closet/index/index",
|
||||
"text": "衣橱",
|
||||
"iconPath": "/assets/tabbar/tab1.png",
|
||||
"selectedIconPath": "/assets/tabbar/tab1-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/my/index/index",
|
||||
"text": "我的",
|
||||
|
||||
5
app.wxss
5
app.wxss
@ -1,6 +1,7 @@
|
||||
@import './assets/icon.wxss';
|
||||
page{
|
||||
--main-color:#FF2727;
|
||||
/* --main-color:#FF2727; */
|
||||
--main-color:#000;
|
||||
--main-bgclolor:#ffffff;
|
||||
--main-font-color:#333;
|
||||
--safe-bottom:constant(safe-area-inset-bottom);
|
||||
@ -26,7 +27,7 @@ button{
|
||||
border-radius: 80rpx;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition-duration: .4s;
|
||||
/* transition-duration: .4s; */
|
||||
margin:0;
|
||||
}
|
||||
wx-button:not([size=mini]){
|
||||
|
||||
@ -55,6 +55,14 @@
|
||||
mask-image: var(--icon-history);
|
||||
-webkit-mask-image: var(--icon-history);
|
||||
}
|
||||
.icon.more{
|
||||
mask-image: var(--icon-more);
|
||||
-webkit-mask-image: var(--icon-more);
|
||||
}
|
||||
.icon.lajitong{
|
||||
mask-image: var(--icon-lajitong);
|
||||
-webkit-mask-image: var(--icon-lajitong);
|
||||
}
|
||||
.icon.warn{
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
@ -86,5 +94,7 @@ page{
|
||||
--icon-warn:url(data:image/svg+xml,%3Csvg%20t%3D%221744472102058%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2255997%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M512%200C229.205333%200%200%20229.205333%200%20512s229.205333%20512%20512%20512%20512-229.205333%20512-512S794.794667%200%20512%200z%20m0%20796.458667A56.917333%2056.917333%200%201%201%20511.957333%20682.666667%2056.917333%2056.917333%200%200%201%20512%20796.458667z%20m54.186667-227.797334h0.128a60.501333%2060.501333%200%200%201-53.802667%2055.893334c2.048%200.256%203.882667%201.152%205.973333%201.152h-11.818666c2.048%200%203.84-0.981333%205.845333-1.109334a59.093333%2059.093333%200%200%201-53.162667-55.893333l-13.056-284.16a54.314667%2054.314667%200%200%201%2054.613334-57.045333h26.282666a52.992%2052.992%200%200%201%2054.186667%2057.002666l-15.146667%20284.16z%22%20fill%3D%22%23B94343%22%20p-id%3D%2255998%22%3E%3C/path%3E%3C/svg%3E);
|
||||
--icon-delete:url(data:image/svg+xml,%3Csvg%20t%3D%221744473381401%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2258654%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M512%200C228.864%200%200%20228.864%200%20512%200%20795.136%20228.864%201024%20512%201024%20795.136%201024%201024%20795.136%201024%20512%201024%20228.864%20795.136%200%20512%200ZM768%20695.808%20695.808%20768%20512%20584.192%20328.192%20768%20256%20695.808%20439.808%20512%20256%20328.192%20328.192%20256%20512%20439.808%20695.808%20256%20768%20328.192%20584.192%20512%20768%20695.808Z%22%20fill%3D%22%23000000%22%20p-id%3D%2258655%22%20data-spm-anchor-id%3D%22a313x.search_index.0.i52.389b3a81KbR0ru%22%3E%3C/path%3E%3C/svg%3E);
|
||||
--icon-history:url(data:image/svg+xml,%3Csvg%20t%3D%221744605585155%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2259650%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M512.00768%2015.15008a496.19456%20496.19456%200%200%201%20351.38944%20145.63328l1.92896%202.176a496.768%20496.768%200%200%201-1.92896%20700.52864l-2.15424%201.60256a496.77952%20496.77952%200%200%201-700.65024-1.60256%20496.78976%20496.78976%200%200%201%200-702.43456v-0.2752h0.2752A494.51904%20494.51904%200%200%201%20512.00768%2015.15008z%20m217.07008%20458.60224H550.27712V169.71904a38.40768%2038.40768%200%201%200-76.81536%200v342.25664a38.85824%2038.85824%200%200%200%2038.54592%2038.528h217.07008c20.88832%200%2037.99424-17.34656%2037.99424-38.528a38.15936%2038.15936%200%200%200-37.99424-38.22336z%20m80.04608-259.0016a419.48288%20419.48288%200%200%200-297.11616-123.136c-116.43776%200-221.42848%2046.63296-297.69216%20123.136a421.504%20421.504%200%200%200%200%20594.47424%20420.77568%20420.77568%200%200%200%20593.20448%201.62688l1.60384-1.62688c76.0128-75.92064%20123.7504-181.15328%20123.7504-297.24928a419.904%20419.904%200%200%200-121.57184-295.59808l-2.176-1.62688z%22%20fill%3D%22%233B3F51%22%20p-id%3D%2259651%22%3E%3C/path%3E%3C/svg%3E);
|
||||
--icon-close:url(data:image/svg+xml,%3Csvg%20t%3D%221744706202919%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2260727%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M942.506667%200L512%20430.506667%2081.493333%200%200%2081.493333%20430.506667%20512%200%20942.506667%2081.493333%201024%20512%20593.493333%20942.506667%201024%201024%20942.506667%20593.493333%20512%201024%2081.493333%20942.506667%200z%22%20fill%3D%22%23000000%22%20p-id%3D%2260728%22%3E%3C/path%3E%3C/svg%3E)
|
||||
--icon-close:url(data:image/svg+xml,%3Csvg%20t%3D%221744706202919%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2260727%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M942.506667%200L512%20430.506667%2081.493333%200%200%2081.493333%20430.506667%20512%200%20942.506667%2081.493333%201024%20512%20593.493333%20942.506667%201024%201024%20942.506667%20593.493333%20512%201024%2081.493333%20942.506667%200z%22%20fill%3D%22%23000000%22%20p-id%3D%2260728%22%3E%3C/path%3E%3C/svg%3E);
|
||||
--icon-more:url(data:image/svg+xml,%3Csvg%20t%3D%221744806307165%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2267903%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M227.14123%20413.647995c-52.14973%200-94.587262%2042.439578-94.587262%2094.587262%200%2052.14973%2042.437531%2094.587262%2094.587262%2094.587262%2052.147684%200%2094.587262-42.437531%2094.587262-94.587262C321.728492%20456.087573%20279.288914%20413.647995%20227.14123%20413.647995z%22%20fill%3D%22%23272636%22%20p-id%3D%2267904%22%3E%3C/path%3E%3Cpath%20d%3D%22M510.903016%20413.647995c-52.14973%200-94.587262%2042.439578-94.587262%2094.587262%200%2052.14973%2042.437531%2094.587262%2094.587262%2094.587262%2052.147684%200%2094.587262-42.437531%2094.587262-94.587262C605.490278%20456.087573%20563.051723%20413.647995%20510.903016%20413.647995z%22%20fill%3D%22%23272636%22%20p-id%3D%2267905%22%3E%3C/path%3E%3Cpath%20d%3D%22M794.665825%20413.647995c-52.14973%200-94.587262%2042.439578-94.587262%2094.587262%200%2052.14973%2042.437531%2094.587262%2094.587262%2094.587262%2052.147684%200%2094.587262-42.437531%2094.587262-94.587262C889.253086%20456.087573%20846.813508%20413.647995%20794.665825%20413.647995z%22%20fill%3D%22%23272636%22%20p-id%3D%2267906%22%3E%3C/path%3E%3C/svg%3E);
|
||||
--icon-lajitong:url(data:image/svg+xml,%3Csvg%20t%3D%221744885965978%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2269978%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M844.8%20326.4c-19.2%200-38.4%2019.2-38.4%2038.4v550.4c0%2019.2-19.2%2038.4-38.4%2038.4H256c-19.2%200-38.4-19.2-38.4-38.4V364.8c0-19.2-12.8-38.4-38.4-38.4-19.2%200-38.4%2019.2-38.4%2038.4v550.4c6.4%2057.6%2051.2%20108.8%20115.2%20108.8h512c64%200%20115.2-51.2%20115.2-115.2V364.8c0-19.2-19.2-38.4-38.4-38.4z%20m-409.6%20435.2V364.8c0-19.2-12.8-38.4-38.4-38.4-19.2%200-38.4%2019.2-38.4%2038.4V768c0%2019.2%2012.8%2038.4%2038.4%2038.4%2025.6-6.4%2038.4-19.2%2038.4-44.8z%20m224%200V364.8c0-19.2-19.2-38.4-38.4-38.4s-38.4%2019.2-38.4%2038.4V768c0%2019.2%2019.2%2038.4%2038.4%2038.4%2019.2-6.4%2038.4-19.2%2038.4-44.8z%20m326.4-582.4h-179.2V108.8c0-57.6-51.2-108.8-108.8-108.8H326.4c-64%200-108.8%2044.8-108.8%20108.8v76.8H38.4c-19.2-6.4-38.4%2012.8-38.4%2032s19.2%2032%2038.4%2032h947.2c19.2%200%2038.4-12.8%2038.4-32s-19.2-38.4-38.4-38.4z%20m-256%200H288V108.8c0-19.2%2019.2-38.4%2038.4-38.4h371.2c19.2%200%2032%2012.8%2032%2038.4v70.4z%20m0%200%22%20fill%3D%22%23383838%22%20p-id%3D%2269979%22%3E%3C/path%3E%3C/svg%3E)
|
||||
}
|
||||
BIN
assets/tabbar/_tab1-active.png
Normal file
BIN
assets/tabbar/_tab1-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/tabbar/_tab1.png
Normal file
BIN
assets/tabbar/_tab1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/tabbar/_tab2-active.png
Normal file
BIN
assets/tabbar/_tab2-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
assets/tabbar/_tab2.png
Normal file
BIN
assets/tabbar/_tab2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/tabbar/_tab3-active.png
Normal file
BIN
assets/tabbar/_tab3-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/tabbar/_tab3.png
Normal file
BIN
assets/tabbar/_tab3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
60
component/share-modal-view/index.js
Normal file
60
component/share-modal-view/index.js
Normal file
@ -0,0 +1,60 @@
|
||||
// component/share-modal-view.js
|
||||
Component({
|
||||
|
||||
externalClasses:'custom-class',
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
show:{
|
||||
type:Boolean,
|
||||
value:false
|
||||
},
|
||||
data:Object,
|
||||
buttonType:String,
|
||||
pageHeight:Number
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
maxHeight:0
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
tryon(){
|
||||
this.triggerEvent('tryon')
|
||||
},
|
||||
share(){
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
currentPage.onShareAppMessage = ()=>{
|
||||
return {
|
||||
title:'我的美搭，分享给你',
|
||||
imageUrl:this.properties.data.completion_url,
|
||||
path:`/pages/try/index/index?shared_history_id=${this.properties.data.id}`
|
||||
}
|
||||
}
|
||||
},
|
||||
afterLeave(){
|
||||
this.triggerEvent('afterLeave')
|
||||
},
|
||||
closeModal(){
|
||||
this.selectComponent('#modalView').cancelButtonTap();
|
||||
}
|
||||
},
|
||||
lifetimes:{
|
||||
ready(){
|
||||
const windowInfo = wx.getWindowInfo();
|
||||
console.log(this.properties.pageHeight,windowInfo.windowHeight);
|
||||
this.setData({
|
||||
maxHeight:(this.properties.pageHeight||windowInfo.windowHeight)-40
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
7
component/share-modal-view/index.json
Normal file
7
component/share-modal-view/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "page-shared",
|
||||
"usingComponents": {
|
||||
"modal-view":"/miniprogram_npm/@beefast-wxmp/modal-view"
|
||||
}
|
||||
}
|
||||
24
component/share-modal-view/index.wxml
Normal file
24
component/share-modal-view/index.wxml
Normal file
@ -0,0 +1,24 @@
|
||||
<modal-view model:show="{{show}}" class="comment-modal-view" pageHeight="{{pageHeight}}"
|
||||
id="modalView"
|
||||
isShowCancel="{{false}}" isShowOk="{{false}}" bind:afterLeave="afterLeave" showCloseButton>
|
||||
<view class="comment-container" style="max-height:{{maxHeight}}px">
|
||||
<view class="image-area">
|
||||
<view class="close-area" bind:tap="closeModal">
|
||||
<view class="icon close"></view>
|
||||
</view>
|
||||
<image src="{{data.completion_url}}" class="image" mode="aspectFill"/>
|
||||
<view class="top-bottom">
|
||||
<image class="top" src="{{data.top_clothing_url}}"/>
|
||||
<image class="bottom" src="{{data.bottom_clothing_url}}"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment">
|
||||
<view class="point">{{data.score}}</view>
|
||||
<view class="cmt-title">AI 点评：</view>
|
||||
<view class="cmt-content">{{data.comment}}</view>
|
||||
<button wx:if="{{buttonType=='tryon'}}" class="button" type="primary" bind:tap="tryon">试穿</button>
|
||||
<button class="button" type="primary" bind:tap="share" open-type="share"
|
||||
wx:elif="{{buttonType=='share'}}">分享</button>
|
||||
</view>
|
||||
</view>
|
||||
</modal-view>
|
||||
124
component/share-modal-view/index.wxss
Normal file
124
component/share-modal-view/index.wxss
Normal file
@ -0,0 +1,124 @@
|
||||
.comment-modal-view .modal-view-main{
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .close-btn-area{
|
||||
right:0;top:0;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .close-btn-area .close-btn{
|
||||
content: '';
|
||||
top:0;left:0;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
.comment-modal-view .modal-view-main .close-btn-area .close-btn::after{
|
||||
width:1em;height:1em;
|
||||
-webkit-mask-position:0 0;
|
||||
mask-position:0 0;
|
||||
-webkit-mask-repeat:no-repeat;
|
||||
mask-repeat:no-repeat;
|
||||
-webkit-mask-size:100%;
|
||||
mask-size:100%;
|
||||
background-color:currentColor;
|
||||
color: #ddd;
|
||||
mask-image: var(--icon-plus);
|
||||
-webkit-mask-image: var(--icon-plus);
|
||||
font-size: 36rpx;
|
||||
transform: rotate(45deg);
|
||||
left:10rpx;
|
||||
top:8rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .close-btn-area .close-btn::before{
|
||||
display: none;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .close-area{
|
||||
position:absolute;
|
||||
right:0;top:0;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
width:70rpx;height:70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area{
|
||||
width:100%;
|
||||
/* 54是弹出框左右的宽度 */
|
||||
height:calc((100vw - 54px)*4/3);
|
||||
/* flex:1; */
|
||||
position: relative;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area .image{
|
||||
width:100%;height:100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area .top-bottom{
|
||||
position: absolute;
|
||||
bottom:20rpx;
|
||||
left:20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area .top,
|
||||
.comment-modal-view .modal-view-main .image-area .bottom{
|
||||
width:140rpx;
|
||||
height:140rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .comment{
|
||||
padding:40rpx;
|
||||
position: relative;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .point{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
|
||||
color:var(--main-color);
|
||||
font-size: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .point::after{
|
||||
content:'分';
|
||||
line-height: 30rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: normal;
|
||||
margin-left:10rpx;
|
||||
color: var(--main-font-color);
|
||||
}
|
||||
.comment-modal-view .cmt-title{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin:20rpx 0;
|
||||
}
|
||||
.comment-modal-view .cmt-content{
|
||||
line-height: 40rpx;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.comment-modal-view .button{
|
||||
margin-top:40rpx;
|
||||
}
|
||||
.comment-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio:5/9){
|
||||
.comment-modal-view .modal-view-main .comment{
|
||||
padding:20rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .point{
|
||||
position:absolute;
|
||||
left:160rpx;
|
||||
top:22rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
/* @media (min-aspect-ratio:3/5){ */
|
||||
/* .comment-modal-view .modal-view-main .image-area{
|
||||
height:calc(100vw - 54px);
|
||||
} */
|
||||
/* } */
|
||||
@ -22,10 +22,16 @@ Page({
|
||||
hasDefaultImage:false,
|
||||
|
||||
topClothingCId:'',
|
||||
bottomClothingCId:''
|
||||
bottomClothingCId:'',
|
||||
|
||||
statusBarHeight:0
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const windowInfo = wx.getWindowInfo();
|
||||
this.setData({
|
||||
statusBarHeight:windowInfo.statusBarHeight,
|
||||
})
|
||||
this.loadClosetList();
|
||||
clothingAPI.getCategories().then((data)=>{
|
||||
data.map((item)=>{
|
||||
@ -104,7 +110,8 @@ Page({
|
||||
},
|
||||
addClothing(){
|
||||
this.setData({
|
||||
isShowUploader:true
|
||||
isShowUploader:true,
|
||||
uploadImg:{}
|
||||
})
|
||||
},
|
||||
chooseImg(){
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<nav-bar/>
|
||||
<view class="header">
|
||||
<view class="header-title">我的衣橱</view>
|
||||
<button class="icon-button" size="mini" bind:tap="addClothing">
|
||||
<!-- <button class="icon-button" size="mini" bind:tap="addClothing">
|
||||
<view class="icon cloud"></view>
|
||||
</button>
|
||||
</button> -->
|
||||
</view>
|
||||
<view class="category">
|
||||
<button class="item {{categoryIndex==0?'current':''}}" size="mini" plain
|
||||
@ -17,6 +17,10 @@
|
||||
refresher-triggered="{{pager.refreshTriggered}}" class="main list"
|
||||
loading="{{pager.loading}}" load-all="{{pager.loadAll}}">
|
||||
<view class="list-content">
|
||||
<view class="item btn-upload" bind:tap="addClothing">
|
||||
<view class="icon cloud"></view>
|
||||
<view>上传衣服图</view>
|
||||
</view>
|
||||
<view class="item" wx:for="{{list}}" wx:key="index">
|
||||
<image class="image" src="{{item.image_url}}"/>
|
||||
<view class="to-try" wx:if="{{hasDefaultImage}}" bind:tap="toTry" data-item="{{item}}">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 40rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.closet-container .header .button{
|
||||
@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
}
|
||||
.closet-container .category{
|
||||
margin:40rpx 0 20rpx 0;
|
||||
margin:40rpx 0 40rpx 0;
|
||||
}
|
||||
|
||||
.list-content{
|
||||
@ -27,10 +27,23 @@
|
||||
width:calc(50vw - 60rpx);
|
||||
height:calc(50vw - 60rpx);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.list .item.btn-upload{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #eee;
|
||||
color: #666;
|
||||
gap: 10rpx;
|
||||
}
|
||||
.list .item.btn-upload .icon{
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.list .item .image{
|
||||
width:100%;height:100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.list .item .delete-area{
|
||||
position: absolute;
|
||||
|
||||
173
pages/my/history/list.js
Normal file
173
pages/my/history/list.js
Normal file
@ -0,0 +1,173 @@
|
||||
import userAPI from '../../../api/user';
|
||||
|
||||
Page({
|
||||
customShare:true,
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
list:[],
|
||||
scrollViewHeight:0,
|
||||
autoBack:false,
|
||||
pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTrigger:false},
|
||||
|
||||
isShowShare:false,
|
||||
currentHistory:{},
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
const windowInfo = wx.getWindowInfo();
|
||||
this.setData({
|
||||
autoBack:options.auto_back||false,
|
||||
scrollViewHeight:windowInfo.windowHeight
|
||||
});
|
||||
this.data.pager.loading = false;
|
||||
this.data.pager.loadAll = false;
|
||||
this.loadList();
|
||||
},
|
||||
refreshList(){
|
||||
this.data.pager.pageIndex = 0;
|
||||
this.data.pager.loadAll = false;
|
||||
this.setData({
|
||||
pager:this.data.pager
|
||||
});
|
||||
this.loadList();
|
||||
},
|
||||
loadList(){
|
||||
if(this.data.pager.loading||this.data.pager.loadAll){
|
||||
return;
|
||||
}
|
||||
this.data.pager.loading = true;
|
||||
this.setData({
|
||||
pager:this.data.pager
|
||||
});
|
||||
userAPI.tryonHistory({
|
||||
skip:this.data.pager.limit*this.data.pager.pageIndex,
|
||||
limit:this.data.pager.limit
|
||||
}).then((data)=>{
|
||||
|
||||
if(this.data.pager.pageIndex==0){
|
||||
this.data.list = data;
|
||||
}else{
|
||||
this.data.list = this.data.list.concat(data);
|
||||
}
|
||||
this.data.pager.refreshTrigger = false;
|
||||
this.data.pager.loading = false;
|
||||
this.data.pager.pageIndex++;
|
||||
if(data.length<this.data.pager.limit){
|
||||
this.data.pager.loadAll = true;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
list:this.data.list,
|
||||
pager:this.data.pager
|
||||
})
|
||||
}).catch(()=>{
|
||||
this.setData({
|
||||
"pager.loading":false,
|
||||
"pager.refreshTrigger":false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
share(event){
|
||||
const item = event.currentTarget.dataset.item;
|
||||
this.setData({
|
||||
isShowShare:true,
|
||||
currentHistory:item
|
||||
})
|
||||
},
|
||||
|
||||
deleteHistory(event){
|
||||
const index = event.currentTarget.dataset.index;
|
||||
const item = event.currentTarget.dataset.item;
|
||||
wx.showModal({
|
||||
title: '是否删除这个形象',
|
||||
complete: (res) => {
|
||||
if (res.confirm) {
|
||||
this.confirmDelete(item,index);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
confirmDelete(item,index){
|
||||
// this.selectComponent('#listView').loadMoreIfNeed();
|
||||
|
||||
userAPI.deleteTryon(item.id).then(async(data)=>{
|
||||
if(this.data.pager.loadAll){
|
||||
this.data.list.splice(index,1);
|
||||
this.setData({
|
||||
list:this.data.list
|
||||
})
|
||||
}else{
|
||||
this.refreshList();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
viewImage(event){
|
||||
const item = event.currentTarget.dataset.item;
|
||||
const urls = this.data.list.map((item)=>{
|
||||
return item.completion_url;
|
||||
})
|
||||
console.log(urls);
|
||||
wx.previewImage({
|
||||
urls: urls,
|
||||
current:item
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
console.log(new Date());
|
||||
}
|
||||
})
|
||||
7
pages/my/history/list.json
Normal file
7
pages/my/history/list.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"list-view":"/miniprogram_npm/@beefast-wxmp/list-view",
|
||||
"share-modal-view":"/component/share-modal-view"
|
||||
},
|
||||
"navigationBarTitleText": "试穿历史"
|
||||
}
|
||||
27
pages/my/history/list.wxml
Normal file
27
pages/my/history/list.wxml
Normal file
@ -0,0 +1,27 @@
|
||||
<!-- <view class="page">
|
||||
<view class="page-head">我的形象照</view>
|
||||
</view> -->
|
||||
|
||||
<list-view class="images-list" bind:refresh="refreshList" bind:loadMore="loadList"
|
||||
refresher-triggered="{{pager.refreshTrigger}}" id="listView"
|
||||
show-load-more="{{!(list.length==0&&pager.loadAll)}}"
|
||||
loading="{{pager.loading}}" load-all="{{pager.loadAll}}">
|
||||
<view class="item-container">
|
||||
<view class="item" wx:for="{{list}}" wx:key="index" bind:longpress="deleteHistory"
|
||||
data-item="{{item}}">
|
||||
<image class="image" src="{{item.completion_url}}" mode="aspectFit" bind:tap="viewImage"
|
||||
data-item="{{item.completion_url}}"/>
|
||||
<view class="btn-close" data-item="{{item}}" data-index="{{index}}" bind:tap="deleteHistory">
|
||||
<view class="icon close"></view>
|
||||
</view>
|
||||
<button class="btn-share" size="mini" type="primary" data-item="{{item}}"
|
||||
data-index="{{index}}" bind:tap="share">
|
||||
AI 点评
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</list-view>
|
||||
|
||||
|
||||
<share-modal-view show="{{isShowShare}}" data="{{currentHistory}}" buttonType="share"
|
||||
custom-class="has-navbar"/>
|
||||
65
pages/my/history/list.wxss
Normal file
65
pages/my/history/list.wxss
Normal file
@ -0,0 +1,65 @@
|
||||
.images-list{
|
||||
height:100vh;
|
||||
}
|
||||
.item-container{
|
||||
padding:0 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
margin-top:20rpx;
|
||||
}
|
||||
.images-list .item{
|
||||
width:calc(50vw - 30rpx);
|
||||
height:calc((50vw - 30rpx)/3*4);
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.images-list .item .loading-area{
|
||||
position: absolute;
|
||||
left:0;right:0;
|
||||
width:100%;height:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
color:#fff;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.images-list .default-mark{
|
||||
position: absolute;
|
||||
top:0;left:0;
|
||||
background-color: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
padding:10rpx;
|
||||
border-radius: 0 0 20rpx 0;
|
||||
}
|
||||
.images-list .image{
|
||||
width:100%;height:100%;
|
||||
}
|
||||
.images-list .btn-close{
|
||||
width:50rpx;height:50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right:0;top:0;
|
||||
border-radius: 0 0 0 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #777;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
.images-list .btn-share{
|
||||
position: absolute;
|
||||
bottom:30rpx;
|
||||
left:0;
|
||||
font-size: 24rpx;
|
||||
font-weight:normal;
|
||||
left:50%;
|
||||
margin-left:-2.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap:10rpx;
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import userAPI from '../../../api/user';
|
||||
import commonAPI from '../../../api/common';
|
||||
|
||||
Page({
|
||||
|
||||
@ -9,7 +10,9 @@ Page({
|
||||
list:[],
|
||||
scrollViewHeight:0,
|
||||
autoBack:false,
|
||||
pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTrigger:false}
|
||||
pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTrigger:false},
|
||||
|
||||
uploadImg:{}
|
||||
},
|
||||
|
||||
/**
|
||||
@ -125,7 +128,45 @@ Page({
|
||||
list:this.data.list
|
||||
})
|
||||
}else{
|
||||
refreshList();
|
||||
this.refreshList();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
chooseImg(){
|
||||
wx.chooseMedia({
|
||||
count:1,
|
||||
success:(res)=>{
|
||||
wx.cropImage({
|
||||
cropScale:'3:4',
|
||||
src: res.tempFiles[0].tempFilePath,
|
||||
success:(_res)=>{
|
||||
_res.uploading = true;
|
||||
this.setData({
|
||||
uploadImg:_res
|
||||
})
|
||||
commonAPI.upload(_res).then((data)=>{
|
||||
this.setData({
|
||||
"uploadImg.serverUrl":data.url
|
||||
});
|
||||
userAPI.addPersonImages(data.url).then(()=>{
|
||||
this.setData({
|
||||
uploadImg:{}
|
||||
})
|
||||
this.refreshList();
|
||||
})
|
||||
}).finally(()=>{
|
||||
this.setData({
|
||||
'uploadImg.uploading':false
|
||||
})
|
||||
});
|
||||
_res.task.onProgressUpdate((detail)=>{
|
||||
this.setData({
|
||||
uploadPercent:detail.progress
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -7,6 +7,18 @@
|
||||
show-load-more="{{!(list.length==0&&pager.loadAll)}}"
|
||||
loading="{{pager.loading}}" load-all="{{pager.loadAll}}">
|
||||
<view class="item-container">
|
||||
<view class="item btn-upload" bind:tap="chooseImg">
|
||||
<block wx:if="{{uploadImg&&uploadImg.tempFilePath}}">
|
||||
<view class="loading-area">
|
||||
<view class="icon loading"></view>
|
||||
</view>
|
||||
<image class="image" src="{{uploadImg.tempFilePath}}"/>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="icon cloud"></view>
|
||||
<view>上传新的形象照</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="item" wx:for="{{list}}" wx:key="index" bind:longpress="deleteImage"
|
||||
data-item="{{item}}">
|
||||
<image class="image" src="{{item.image_url}}" mode="aspectFit"/>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
margin-top:20rpx;
|
||||
}
|
||||
.images-list .item{
|
||||
width:calc(50vw - 30rpx);
|
||||
@ -14,6 +15,29 @@
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.images-list .item.btn-upload{
|
||||
background-color: #ddd;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20rpx;
|
||||
color:#666;
|
||||
}
|
||||
.images-list .item .loading-area{
|
||||
position: absolute;
|
||||
left:0;right:0;
|
||||
width:100%;height:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
color:#fff;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.images-list .btn-upload .cloud{
|
||||
font-size: 80rpx;
|
||||
}
|
||||
.images-list .default-mark{
|
||||
position: absolute;
|
||||
top:0;left:0;
|
||||
|
||||
@ -12,16 +12,21 @@
|
||||
<view class="cell-bd">我的形象照</view>
|
||||
<view class="cell-ft"></view>
|
||||
</navigator>
|
||||
|
||||
<navigator class="cell" url="/pages/my/history/list">
|
||||
<view class="cell-bd">我的试穿</view>
|
||||
<view class="cell-ft"></view>
|
||||
</navigator>
|
||||
|
||||
<navigator class="cell" url="/pages/my/setting/index">
|
||||
<view class="cell-bd">个人设置</view>
|
||||
<view class="cell-ft"></view>
|
||||
</navigator>
|
||||
|
||||
<view class="cell">
|
||||
<view class="cell-bd">用户协议</view>
|
||||
<button class="cell button" open-type="contact">
|
||||
<view class="cell-bd">联系客服</view>
|
||||
<view class="cell-ft"></view>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
<button class="cells cells-access share" open-type="share">
|
||||
<view class="cell">
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
flex-direction: column;
|
||||
align-items:flex-start;
|
||||
justify-content: center;
|
||||
padding:20rpx 0;
|
||||
padding:10rpx 0;
|
||||
}
|
||||
.share .cell-bd .title{
|
||||
font-weight: bold;
|
||||
@ -49,7 +49,14 @@
|
||||
margin-top:30rpx;
|
||||
}
|
||||
.share .count{
|
||||
color:var(--main-color);
|
||||
color:red;
|
||||
margin:0 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cell.button{
|
||||
background-color: transparent;
|
||||
width:auto!important;
|
||||
color:var(--main-font-color);
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "设置"
|
||||
"navigationBarTitleText": "个人设置"
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<view class="cells cells-access">
|
||||
<!-- <view class="cells cells-access">
|
||||
<view class="cell" bind:tap="navToPrivacy">
|
||||
<view class="cell-bd">隐私政策</view>
|
||||
<view class="cell-ft"></view>
|
||||
@ -24,8 +24,8 @@
|
||||
<view class="cell-bd">用户协议</view>
|
||||
<view class="cell-ft"></view>
|
||||
</view>
|
||||
</view>
|
||||
<button type="default" class="logout-btn" bind:tap="logout">退出登录</button>
|
||||
</view> -->
|
||||
<!-- <button type="default" class="logout-btn" bind:tap="logout">退出登录</button> -->
|
||||
</view>
|
||||
<page-container show="{{isShowPopup}}" close-on-slide-down>
|
||||
<view class="content">
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import userAPI from "../../../api/user";
|
||||
import commonAPI from "../../../api/common";
|
||||
import {rpxToPx} from '../../../utils/util';
|
||||
const app = getApp();
|
||||
|
||||
// pages/try/index/index.js
|
||||
Page({
|
||||
|
||||
useCustomShare:true,
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
@ -36,7 +37,11 @@ Page({
|
||||
|
||||
userInfo:{},
|
||||
|
||||
hasMultiPersonImages:false
|
||||
hasMultiPersonImages:false,
|
||||
|
||||
statusBarHeight:0,
|
||||
|
||||
userCode:''
|
||||
},
|
||||
|
||||
/**
|
||||
@ -44,17 +49,36 @@ Page({
|
||||
*/
|
||||
onLoad(options) {
|
||||
const windowInfo = wx.getWindowInfo();
|
||||
console.log(windowInfo);
|
||||
const imgWidth = windowInfo.windowWidth - rpxToPx(80);
|
||||
const imgHeight = imgWidth*4/3;
|
||||
this.setData({
|
||||
imgHeight,
|
||||
statusBarHeight:windowInfo.statusBarHeight,
|
||||
pageHeight:windowInfo.screenHeight
|
||||
})
|
||||
this.getHistory();
|
||||
this.getUserInfo();
|
||||
this.getPersonImages();
|
||||
|
||||
if(wx.getStorageSync('token')){
|
||||
this.getHistory();
|
||||
this.getUserInfo();
|
||||
this.getPersonImages();
|
||||
}else{
|
||||
wx.showLoading({
|
||||
title: '请等待...',
|
||||
mask:true
|
||||
})
|
||||
wx.login({
|
||||
success: (res) => {
|
||||
userAPI.login(res.code,this.data.userCode).then((data)=>{
|
||||
wx.hideLoading();
|
||||
wx.setStorageSync('token', data.access_token);
|
||||
this.onLoad(this.options);
|
||||
this.onShow();
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
//目前用于查看历史条数，用于显示添加或者修改形象按钮
|
||||
getPersonImages(){
|
||||
userAPI.getPersonImages({skip:0,limit:2}).then((data)=>{
|
||||
this.setData({
|
||||
@ -63,7 +87,9 @@ Page({
|
||||
})
|
||||
},
|
||||
getHistory(){
|
||||
userAPI.tryonHistory().then((data)=>{
|
||||
userAPI.tryonHistory({
|
||||
skip:0,limit:10
|
||||
}).then((data)=>{
|
||||
let hasTryon = false;
|
||||
data.map((item)=>{
|
||||
if(!item.completion_url&&item.status!=userAPI.tryOnStatus.error){
|
||||
@ -153,6 +179,7 @@ Page({
|
||||
tryon(){
|
||||
if(!this.data.topClothing.serverUrl&&!this.data.bottomClothing.serverUrl){
|
||||
wx.showToast({
|
||||
icon:'none',
|
||||
title: '请先选择衣服',
|
||||
})
|
||||
return;
|
||||
@ -166,7 +193,8 @@ Page({
|
||||
}).then((data)=>{
|
||||
this.setData({
|
||||
topClothing:{},
|
||||
bottomClothing:{}
|
||||
bottomClothing:{},
|
||||
"userInfo.tryon_remain_count":data.tryon_remain_count
|
||||
})
|
||||
this.getHistory();
|
||||
}).finally(()=>{
|
||||
@ -200,6 +228,8 @@ Page({
|
||||
|
||||
addNew(){
|
||||
this.setData({
|
||||
topClothing:{},
|
||||
bottomClothing:{},
|
||||
currentHistory:{}
|
||||
})
|
||||
},
|
||||
@ -232,6 +262,7 @@ Page({
|
||||
})
|
||||
},
|
||||
showComment(){
|
||||
// const commentViewHeight = 40+35+38+
|
||||
if(this.data.tryonCommentLoading)return;
|
||||
this.setData({
|
||||
tryonCommentLoading:true
|
||||
@ -253,14 +284,16 @@ Page({
|
||||
},
|
||||
commentViewLeave(){
|
||||
wx.showTabBar();
|
||||
this.setData({
|
||||
shared_history_id:''
|
||||
})
|
||||
if(this.options){
|
||||
this.options.shared_history_id = '';
|
||||
}
|
||||
wx.rewriteRoute({
|
||||
url:'/pages/try/index/index',
|
||||
preserveQuery:true
|
||||
});
|
||||
this.setData({
|
||||
shared_history_id:''
|
||||
})
|
||||
this.options.shared_history_id = '';
|
||||
},
|
||||
|
||||
/**
|
||||
@ -282,7 +315,14 @@ Page({
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
this.setData({
|
||||
userCode:app.globalData.shared_user_code||''
|
||||
})
|
||||
if(!wx.getStorageSync('token')){
|
||||
return;
|
||||
}
|
||||
this.getDefaultPersonImage();
|
||||
this.getPersonImages();
|
||||
if(this.options&&this.options.shared_history_id){
|
||||
userAPI.tryonDetail(this.options.shared_history_id).then((data)=>{
|
||||
wx.hideTabBar({
|
||||
@ -309,6 +349,10 @@ Page({
|
||||
this.setData({
|
||||
defaultPersonImage:data.image_url
|
||||
})
|
||||
}).catch(()=>{
|
||||
this.setData({
|
||||
defaultPersonImage:''
|
||||
})
|
||||
});
|
||||
},
|
||||
setTop(url){
|
||||
@ -342,6 +386,16 @@ Page({
|
||||
url: '/pages/my/images/index?auto_back=true',
|
||||
})
|
||||
},
|
||||
showChooseImageAS(){
|
||||
wx.showActionSheet({
|
||||
itemList: ['更换形象照'],
|
||||
success:(res)=>{
|
||||
if(res.tapIndex==0){
|
||||
this.navToPersonImage()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
@ -376,7 +430,7 @@ Page({
|
||||
onShareAppMessage() {
|
||||
if(this.data.currentHistory.id){
|
||||
return {
|
||||
title:'美搭，美达，美美哒',
|
||||
title:'我的美搭，分享给你',
|
||||
imageUrl:this.data.currentHistory.completion_url,
|
||||
path:`/pages/try/index/index?shared_history_id=${this.data.currentHistory.id}`
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"nav-bar":"/miniprogram_npm/@beefast-wxmp/nav-bar",
|
||||
"modal-view":"/miniprogram_npm/@beefast-wxmp/modal-view"
|
||||
"modal-view":"/miniprogram_npm/@beefast-wxmp/modal-view",
|
||||
"share-modal-view":"/component/share-modal-view"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@ -1,18 +1,9 @@
|
||||
<scroll-view class="try-container" scroll-y show-scrollbar="{{false}}" enhanced>
|
||||
<view class="top">
|
||||
<nav-bar/>
|
||||
<view class="header">
|
||||
<!-- <view class="header">
|
||||
<view>我的试衣间</view>
|
||||
<button plain size="mini" class="button" bind:tap="navToPersonImage"
|
||||
wx:if="{{hasMultiPersonImages}}"
|
||||
loading="{{personImage.uploading}}">
|
||||
更换形象照
|
||||
</button>
|
||||
<button plain size="mini" class="button" bind:tap="chooseImg" wx:else
|
||||
loading="{{personImage.uploading}}" disabled="{{personImage.uploading}}">
|
||||
添加形象照
|
||||
</button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="main" style="height:{{imgHeight}}px">
|
||||
<block wx:if="{{defaultPersonImage}}">
|
||||
@ -20,19 +11,32 @@
|
||||
isViewPersonImage:长按显示模特照片，松开显示生成的照片，如果生成失败，就还是显示模特照片
|
||||
-->
|
||||
<image class="person-image" mode="aspectFit"
|
||||
src="{{isViewPersonImage?currentHistory.person_image.image_url:(currentHistory.completion_url||currentHistory.person_image.image_url)}}"
|
||||
data-item="{{isViewPersonImage?currentHistory.person_image.image_url:(currentHistory.completion_url||currentHistory.person_image.image_url)}}"
|
||||
src="{{isViewPersonImage?currentHistory.person_image_url:(currentHistory.completion_url||currentHistory.person_image_url)}}"
|
||||
data-item="{{isViewPersonImage?currentHistory.person_image_url:(currentHistory.completion_url||currentHistory.person_image_url)}}"
|
||||
wx:if="{{currentHistory.id}}" bind:longpress="viewPersonImage"
|
||||
bind:tap="viewImageInView"
|
||||
bind:touchcancel="viewCompleteImage" bind:touchend="viewCompleteImage"/>
|
||||
<image class="person-image" src="{{defaultPersonImage}}" mode="aspectFit" wx:else/>
|
||||
<image class="person-image" src="{{defaultPersonImage}}" mode="aspectFit" wx:else
|
||||
bind:tap="showChooseImageAS"/>
|
||||
|
||||
</block>
|
||||
<block wx:else>
|
||||
<!-- <button plain size="mini" class="top-btn" bind:tap="chooseImg">添加形象照</button> -->
|
||||
|
||||
<view class="upload-btn">
|
||||
<view class="icon body"></view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- <button plain size="mini" class="top-btn" bind:tap="navToPersonImage"
|
||||
wx:if="{{hasMultiPersonImages}}"
|
||||
loading="{{personImage.uploading}}">
|
||||
更换形象照
|
||||
</button>
|
||||
<button plain size="mini" class="top-btn" bind:tap="chooseImg" wx:else
|
||||
loading="{{personImage.uploading}}" disabled="{{personImage.uploading}}">
|
||||
添加形象照
|
||||
</button> -->
|
||||
<view class="clothing" wx:if="{{defaultPersonImage}}">
|
||||
<view class="item c-top" bind:tap="chooseTopClothing">
|
||||
<image src="{{currentHistory.top_clothing_url}}" class="image" mode="aspectFit"
|
||||
@ -58,58 +62,80 @@
|
||||
</block>
|
||||
<view class="icon bottom-clothing" wx:else></view>
|
||||
</view>
|
||||
<!-- <view class="item share-area">
|
||||
<view class="icon share"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="right-bottom-area" wx:if="{{currentHistory.id}}" bind:tap="deleteHistory"
|
||||
data-item="{{currentHistory}}">
|
||||
<view class="delete-area">
|
||||
<view class="icon lajitong"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" wx:if="{{defaultPersonImage}}">
|
||||
<block wx:if="{{currentHistory.id}}">
|
||||
<view class="bottom">
|
||||
<button type="primary" bind:tap="tryon" wx:if="{{!defaultPersonImage}}" bind:tap="chooseImg"
|
||||
loading="{{personImage.uploading}}" disabled="{{personImage.uploading}}">添加形象照</button>
|
||||
<block wx:elif="{{currentHistory.id}}">
|
||||
<button type="primary" bind:tap="showComment" wx:if="{{currentHistory.completion_url}}"
|
||||
loading="{{tryonCommentLoading}}">查看 AI 点评</button>
|
||||
<button type="primary" wx:else disabled>生成失败</button>
|
||||
</block>
|
||||
<button type="primary" bind:tap="tryon"
|
||||
loading="{{hasTryon||trying}}"
|
||||
disabled="{{hasTryon||trying||userInfo.tryon_remain_count<1}}" wx:else>
|
||||
{{hasTryon||trying?'请等待上一个试穿任务':'立刻试穿（剩余：'+userInfo.tryon_remain_count+'次）'}}
|
||||
loading="{{trying}}"
|
||||
disabled="{{trying||userInfo.tryon_remain_count<1}}" wx:else>
|
||||
立刻试穿（剩余：{{userInfo.tryon_remain_count}}次）
|
||||
</button>
|
||||
</view>
|
||||
<scroll-view class="history" scroll-x="{{true}}" enable-flex show-scrollbar="{{false}}" enhanced>
|
||||
<view class="history" wx:if="{{history.length>0}}">
|
||||
<view class="item btn-new {{currentHistory.id?'':'current'}}" bind:tap="addNew">
|
||||
<view class="icon plus"></view>
|
||||
</view>
|
||||
<view class="item {{currentHistory.id==item.id?'current':''}}" wx:for="{{history}}"
|
||||
bind:tap="selectHistory" data-item="{{item}}" wx:key="index"
|
||||
bind:longpress="deleteHistory">
|
||||
<image wx:if="{{item.completion_url}}" src="{{item.completion_url}}" class="image"
|
||||
mode="aspectFit"/>
|
||||
<block wx:else>
|
||||
<image src="{{item.top_clothing_url}}" class="top-img"/>
|
||||
<image src="{{item.bottom_clothing_url}}" class="bottom-img"/>
|
||||
<view class="error-area" wx:if="{{item.status==tryonStatus.error}}">
|
||||
<view type="warn" size="60rpx" class="icon warn"><view class="dispatch"/></view>
|
||||
<view class="tips">失败</view>
|
||||
</view>
|
||||
<view class="loading-area" wx:else>
|
||||
<view class="icon loading"></view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- <view class="delete-area" capture-catch:tap="deleteHistory" data-item="{{item}}">
|
||||
<view class="icon delete"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="list" scroll-x="{{true}}" enable-flex show-scrollbar="{{false}}" enhanced>
|
||||
<view class="item {{currentHistory.id==item.id?'current':''}}" wx:for="{{history}}"
|
||||
bind:tap="selectHistory" data-item="{{item}}" wx:key="index"
|
||||
bind:longpress="deleteHistory">
|
||||
<image wx:if="{{item.completion_url}}" src="{{item.completion_url}}" class="image"
|
||||
mode="aspectFit"/>
|
||||
<block wx:else>
|
||||
<image src="{{item.top_clothing_url}}" class="top-img"/>
|
||||
<image src="{{item.bottom_clothing_url}}" class="bottom-img"/>
|
||||
<view class="error-area" wx:if="{{item.status==tryonStatus.error}}">
|
||||
<view type="warn" size="60rpx" class="icon warn"><view class="dispatch"/></view>
|
||||
<view class="tips">失败</view>
|
||||
</view>
|
||||
<view class="loading-area" wx:else>
|
||||
<view class="icon loading"></view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- <view class="delete-area" capture-catch:tap="deleteHistory" data-item="{{item}}">
|
||||
<view class="icon delete"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
<navigator url="/pages/my/history/list" class="item item-more" wx:if="{{history.length==10}}">
|
||||
<!-- <view class="icon more"></view> -->
|
||||
<view>更多</view>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<modal-view show="{{isShowComment}}" class="comment-modal-view" pageHeight="{{pageHeight}}"
|
||||
<share-modal-view show="{{isShowComment}}" data="{{tryonComment}}" pageHeight="{{pageHeight}}"
|
||||
buttonType="{{shared_history_id?'tryon':'share'}}" bind:tryon="tryonShared"
|
||||
bind:afterLeave="commentViewLeave"/>
|
||||
|
||||
<!-- <modal-view show="{{isShowComment}}" class="comment-modal-view" pageHeight="{{pageHeight}}"
|
||||
isShowCancel="{{false}}" isShowOk="{{false}}" bind:afterLeave="commentViewLeave" showCloseButton>
|
||||
<image src="{{tryonComment.completion_url}}" class="main-img" mode="aspectFill"/>
|
||||
<view class="image-area">
|
||||
<image src="{{tryonComment.completion_url}}" class="image" mode="aspectFill"/>
|
||||
<view class="top-bottom">
|
||||
<image class="top" src="{{tryonComment.top_clothing_url}}"/>
|
||||
<image class="bottom" src="{{tryonComment.bottom_clothing_url}}"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment">
|
||||
<view class="point">{{tryonComment.score}}</view>
|
||||
<view class="cmt-title">AI 点评：</view>
|
||||
<view class="cmt-content">{{tryonComment.comment}}</view>
|
||||
<button wx:if="{{shared_history_id}}" class="button" type="primary" bind:tap="tryonShared">试穿</button>
|
||||
<button class="button" type="primary" bind:tap="share" open-type="share" wx:else>分享</button>
|
||||
<button class="button" type="primary" open-type="share" wx:else>分享</button>
|
||||
</view>
|
||||
</modal-view>
|
||||
</modal-view> -->
|
||||
@ -5,6 +5,7 @@
|
||||
}
|
||||
.try-container .header{
|
||||
font-size: 52rpx;
|
||||
line-height: 88rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -20,11 +21,15 @@
|
||||
margin-top:20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
}
|
||||
.try-container .main .top-btn{
|
||||
position: absolute;
|
||||
right:40rpx;top:40rpx;
|
||||
right:20rpx;top:20rpx;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
z-index: 100;
|
||||
font-size: 28rpx;
|
||||
box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.try-container .main .upload-btn{
|
||||
width:100%;height:100%;
|
||||
@ -80,16 +85,18 @@
|
||||
.try-container .main .item .image{
|
||||
width:100%;height:100%;
|
||||
}
|
||||
.try-container .main .share-area{
|
||||
.try-container .main .right-bottom-area{
|
||||
position: absolute;
|
||||
right:20rpx;bottom:20rpx;
|
||||
}
|
||||
.try-container .main .right-bottom-area .delete-area{
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
width:70rpx;height:70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
margin-left:auto;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border-radius: 50%;
|
||||
width: 80rpx;height: 80rpx;
|
||||
color: #666;
|
||||
}
|
||||
.try-container .bottom{
|
||||
margin:40rpx 0 22rpx 0;
|
||||
@ -98,6 +105,13 @@
|
||||
.history{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.history .list{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
.history .item{
|
||||
border-radius: 20rpx;
|
||||
@ -115,6 +129,14 @@
|
||||
margin-left:16rpx;
|
||||
margin-top:18rpx;
|
||||
}
|
||||
.history .item .icon.more{
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.history .item.item-more{
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.history .item:first-child{
|
||||
margin-left:0;
|
||||
}
|
||||
@ -171,7 +193,7 @@
|
||||
margin-top:-20rpx;
|
||||
}
|
||||
|
||||
.comment-modal-view .modal-view-main{
|
||||
/* .comment-modal-view .modal-view-main{
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -204,13 +226,33 @@
|
||||
.comment-modal-view .modal-view-main .close-btn-area .close-btn::before{
|
||||
display: none;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .main-img{
|
||||
.comment-modal-view .modal-view-main .image-area{
|
||||
width:100%;
|
||||
/* 54是弹出框左右的宽度 */
|
||||
54是弹出框左右的宽度
|
||||
height:calc((100vw - 54px)*4/3);
|
||||
position: relative;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area .image{
|
||||
width:100%;height:100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area .top-bottom{
|
||||
position: absolute;
|
||||
bottom:20rpx;
|
||||
left:20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .image-area .top,
|
||||
.comment-modal-view .modal-view-main .image-area .bottom{
|
||||
width:140rpx;
|
||||
height:140rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .comment{
|
||||
padding:40rpx;
|
||||
position: relative;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .point{
|
||||
display: flex;
|
||||
@ -241,4 +283,22 @@
|
||||
}
|
||||
.comment-modal-view .button{
|
||||
margin-top:40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio:5/9){
|
||||
.comment-modal-view .modal-view-main .comment{
|
||||
padding:20rpx;
|
||||
}
|
||||
.comment-modal-view .modal-view-main .point{
|
||||
position:absolute;
|
||||
left:160rpx;
|
||||
top:22rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
@media (min-aspect-ratio:3/5){
|
||||
.comment-modal-view .modal-view-main .image-area{
|
||||
height:calc(100vw - 54px);
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
"list": [
|
||||
{
|
||||
"name": "测试分享码",
|
||||
"pathName": "pages/my/login/index",
|
||||
"pathName": "pages/try/index/index",
|
||||
"query": "shared_user_code=ASSDJK",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
@ -17,12 +17,12 @@
|
||||
{
|
||||
"name": "测试分享穿搭",
|
||||
"pathName": "pages/try/index/index",
|
||||
"query": "shared_history_id=33",
|
||||
"query": "shared_history_id=44",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"libVersion": "3.7.12"
|
||||
"libVersion": "3.8.0"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user