历史页面增加分享框以及若干操作优化

api/request.js

@@ -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);

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": "我的",

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]){

assets/icon.wxss

@@ -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)
 }

component/share-modal-view/index.js

@@ -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
+      })
+    }
+  }
+
+})

component/share-modal-view/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "page-shared",
+  "usingComponents": {
+    "modal-view":"/miniprogram_npm/@beefast-wxmp/modal-view"
+  }
+}

component/share-modal-view/index.wxml

@@ -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>

component/share-modal-view/index.wxss

@@ -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);
+  } */
+/* } */

pages/closet/index/index.js

@@ -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(){

pages/closet/index/index.wxml

@@ -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}}">

pages/closet/index/index.wxss

@@ -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;

pages/my/history/list.js

@@ -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());
+  }
+})

pages/my/history/list.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "list-view":"/miniprogram_npm/@beefast-wxmp/list-view",
+    "share-modal-view":"/component/share-modal-view"
+  },
+  "navigationBarTitleText": "试穿历史"
+}

pages/my/history/list.wxml

@@ -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"/>

pages/my/history/list.wxss

@@ -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;
+}

pages/my/images/index.js

@@ -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
+              })
+            })
+          }
+        })
       }
     })
   },

pages/my/images/index.wxml

@@ -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"/>

pages/my/images/index.wxss

@@ -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;

pages/my/index/index.wxml

@@ -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">
+    <button class="cell button" open-type="contact">
-      <view class="cell-bd">用户协议</view>
+      <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">

pages/my/index/index.wxss

@@ -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;
 }

pages/my/setting/index.json

@@ -1,4 +1,4 @@
 {
   "usingComponents": {},
-  "navigationBarTitleText": "设置"
+  "navigationBarTitleText": "个人设置"
 }

pages/my/setting/index.wxml

@@ -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>
+  </view> -->
-  <button type="default" class="logout-btn" bind:tap="logout">退出登录</button>
+  <!-- <button type="default" class="logout-btn" bind:tap="logout">退出登录</button> -->
 </view>
 <page-container show="{{isShowPopup}}" close-on-slide-down>
   <view class="content">

pages/try/index/index.js

@@ -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();
+    if(wx.getStorageSync('token')){
-    this.getPersonImages();
+      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}`
       }

pages/try/index/index.json

@@ -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"
 }

pages/try/index/index.wxml

@@ -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" 
+    </view> -->
-        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 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)}}" 
+        src="{{isViewPersonImage?currentHistory.person_image_url:(currentHistory.completion_url||currentHistory.person_image_url)}}" 
-        data-item="{{isViewPersonImage?currentHistory.person_image.image_url:(currentHistory.completion_url||currentHistory.person_image.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>
-        <view class="icon share"></view>
+    <view class="right-bottom-area" wx:if="{{currentHistory.id}}" bind:tap="deleteHistory" 
-      </view> -->
+      data-item="{{currentHistory}}">
+      <view class="delete-area">
+        <view class="icon lajitong"></view>
+      </view>
     </view>
   </view>
-  <view class="bottom" wx:if="{{defaultPersonImage}}">
+  <view class="bottom">
-    <block wx:if="{{currentHistory.id}}">
+    <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}}" 
+      loading="{{trying}}" 
-      disabled="{{hasTryon||trying||userInfo.tryon_remain_count<1}}" wx:else>
+      disabled="{{trying||userInfo.tryon_remain_count<1}}" wx:else>
-    {{hasTryon||trying?'请等待上一个试穿任务':'立刻试穿（剩余：'+userInfo.tryon_remain_count+'次）'}}
+      立刻试穿（剩余：{{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}}" 
+    <scroll-view class="list" scroll-x="{{true}}" enable-flex show-scrollbar="{{false}}" enhanced>
-      bind:tap="selectHistory" data-item="{{item}}" wx:key="index" 
+      <view class="item {{currentHistory.id==item.id?'current':''}}" wx:for="{{history}}" 
-      bind:longpress="deleteHistory">
+        bind:tap="selectHistory" data-item="{{item}}" wx:key="index" 
-      <image wx:if="{{item.completion_url}}" src="{{item.completion_url}}" class="image" 
+        bind:longpress="deleteHistory">
-        mode="aspectFit"/>
+        <image wx:if="{{item.completion_url}}" src="{{item.completion_url}}" class="image" 
-      <block wx:else>
+          mode="aspectFit"/>
-        <image src="{{item.top_clothing_url}}" class="top-img"/>
+        <block wx:else>
-        <image src="{{item.bottom_clothing_url}}" class="bottom-img"/>
+          <image src="{{item.top_clothing_url}}" class="top-img"/>
-        <view class="error-area" wx:if="{{item.status==tryonStatus.error}}">
+          <image src="{{item.bottom_clothing_url}}" class="bottom-img"/>
-          <view type="warn" size="60rpx" class="icon warn"><view class="dispatch"/></view>
+          <view class="error-area" wx:if="{{item.status==tryonStatus.error}}">
-          <view class="tips">失败</view>
+            <view type="warn" size="60rpx" class="icon warn"><view class="dispatch"/></view>
-        </view>
+            <view class="tips">失败</view>
-        <view class="loading-area" wx:else>
+          </view>
-          <view class="icon loading"></view>
+          <view class="loading-area" wx:else>
-        </view>
+            <view class="icon loading"></view>
-      </block>
+          </view>
-      <!-- <view class="delete-area" capture-catch:tap="deleteHistory" data-item="{{item}}">
+        </block>
-        <view class="icon delete"></view>
+        <!-- <view class="delete-area" capture-catch:tap="deleteHistory" data-item="{{item}}">
-      </view> -->
+          <view class="icon delete"></view>
-    </view>
+        </view> -->
-  </scroll-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> -->

pages/try/index/index.wxss

@@ -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: #666;
-  color: #fff;
-  margin-left:auto;
-  background-color: rgba(0, 0, 0, .1);
-  border-radius: 50%;
-  width: 80rpx;height: 80rpx;
 }
 .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);
+  }
+} */
+

project.private.config.json

@@ -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"
 }