liguigong
4ea873c1bd
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
362 lines
9.6 KiB
Vue
362 lines
9.6 KiB
Vue
<template>
|
||
<view class="uni-margin-wrap">
|
||
<view class="flex">
|
||
<text>搭配趋势</text>
|
||
|
||
<img src="./arrow-icon.png" class="arrow-icon" />
|
||
</view>
|
||
<swiper
|
||
@animationfinish="animationfinish"
|
||
class="swiper"
|
||
circular
|
||
:indicator-dots="false"
|
||
:autoplay="true"
|
||
>
|
||
<swiper-item v-for="item in props.items" :key="item.id">
|
||
<view class="swiper-item">
|
||
<view class="left" @click="toGoodsInfo(item[0])">
|
||
<img :src="item[0].file_name" class="left-img" />
|
||
</view>
|
||
|
||
<div class="right">
|
||
<view class="good-img">
|
||
<div class="good-img-box good-img-top"></div>
|
||
<div class="good-img-box good-img-bottom" @click="toGoodsInfo(item[4])">
|
||
<img :src="item[4].file_name" class="good-img-detail" />
|
||
</div>
|
||
</view>
|
||
|
||
<view class="btn" @click="toMini(item[4])">一键试穿</view>
|
||
</div>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<view class="dots">
|
||
<view
|
||
class="dot"
|
||
:class="{ active: index == current }"
|
||
v-for="(item, index) in props.items"
|
||
:key="item.id"
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, ref, watchEffect } from 'vue';
|
||
|
||
const autoplay = ref(true);
|
||
|
||
const props = defineProps({
|
||
items: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
});
|
||
|
||
const current = ref(0);
|
||
|
||
const animationfinish = (e) => {
|
||
// console.log('e: ', e.detail.current);
|
||
current.value = e.detail.current;
|
||
};
|
||
|
||
// weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&query=id=
|
||
const toMini = (item) => {
|
||
console.log(wx, '微信miniProgram');
|
||
wx.miniProgram.navigateTo({
|
||
url: `/pages/fitRoom/index?id=${item.id}`,
|
||
success: function () {
|
||
// alert('成功')
|
||
},
|
||
fail(error) {
|
||
// alert('错误', error)
|
||
console.log('navigateTo error: ', error);
|
||
},
|
||
});
|
||
/**小程序内跳转 */
|
||
// uni.webView.navigateTo({ url: `/pages/fitRoom/index&id=${item.id}` });
|
||
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
|
||
};
|
||
const toGoodsInfo = (item) => {
|
||
wx.miniProgram.navigateTo({
|
||
url: '/pages/goods/goodsDetail/index?goods_id=' + item.goods_id,
|
||
});
|
||
//先去请求后端接口获取数据
|
||
// uni.request({
|
||
// url: "https://llshop.zglvling.com/soapi/text/ceshi1",
|
||
// method: "POST",
|
||
// data: {
|
||
// id: 123
|
||
// },
|
||
// header: {
|
||
// "Content-Type": "application/json"
|
||
// },
|
||
// success: (res) => {
|
||
// const config = res.data;
|
||
|
||
// // #ifdef H5
|
||
// // 1. 检查是否在微信浏览器中
|
||
// const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
|
||
// console.log("是否在微信浏览器", isWechatBrowser);
|
||
|
||
// if (!isWechatBrowser) {
|
||
// uni.showToast({
|
||
// title: "请在微信中打开",
|
||
// icon: "none"
|
||
// });
|
||
// }
|
||
// wx.config({
|
||
// debug: true, // 调试模式
|
||
// appId: config.appId,
|
||
// timestamp: config.timestamp,
|
||
// nonceStr: config.nonceStr,
|
||
// signature: config.signature,
|
||
// jsApiList: ["miniProgram"], // 需要用到的 API
|
||
// });
|
||
// wx.ready(() => {
|
||
// wx.miniProgram.navigateTo({
|
||
// path: "/pages/goods/goodsDetail/index",
|
||
// success: () => console.log("跳转成功"),
|
||
// fail: (err) => {
|
||
// console.error("跳转失败:", err);
|
||
// uni.showToast({
|
||
// title: "跳转失败",
|
||
// icon: "none"
|
||
// });
|
||
// },
|
||
// });
|
||
// });
|
||
|
||
// // #endif
|
||
// },
|
||
// fail: (err) => {
|
||
// console.error("请求失败:", err);
|
||
// uni.showToast({
|
||
// title: "网络错误",
|
||
// icon: "none"
|
||
// });
|
||
// },
|
||
// });
|
||
|
||
// 初始化微信 JS-SDK
|
||
// function initWechatSDK(config) {
|
||
// console.log("阿拉啦啦", wx);
|
||
// wx.config({
|
||
// debug: true, // 调试模式
|
||
// appId: config.appId,
|
||
// timestamp: config.timestamp,
|
||
// nonceStr: config.nonceStr,
|
||
// signature: config.signature,
|
||
// jsApiList: ["miniProgram"], // 需要用到的 API
|
||
// });
|
||
|
||
// wx.ready(() => {
|
||
// wx.miniProgram.navigateTo({
|
||
// path: "/pages/goods/goodsDetail/index",
|
||
// success: () => console.log("跳转成功"),
|
||
// fail: (err) => {
|
||
// console.error("跳转失败:", err);
|
||
// uni.showToast({
|
||
// title: "跳转失败",
|
||
// icon: "none"
|
||
// });
|
||
// },
|
||
// });
|
||
// });
|
||
|
||
// wx.error((err) => {
|
||
// console.error("微信 SDK 配置失败:", err);
|
||
// });
|
||
// }
|
||
// uni.request({
|
||
// url: 'https://llshop.zglvling.com/soapi/text/ceshi1', // 接口地址
|
||
// method: 'POST', // 请求方式（GET/POST/PUT/DELETE）
|
||
// data: { id: 123 }, // 请求参数（GET 用 params，POST 用 data）
|
||
// header: {
|
||
// 'Content-Type': 'application/json', // 请求头
|
||
// },
|
||
// success: (res) => {
|
||
// console.log('请求成功:', res.data);
|
||
// var config = res.data;
|
||
|
||
// const wx = window.wx;
|
||
// // 动态加载微信 JS-SDK
|
||
// if (typeof wx === 'undefined') {
|
||
// const script = document.createElement('script');
|
||
// script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
|
||
// script.onload = () => {
|
||
// initWechatSDK(config); // 加载完成后初始化
|
||
// };
|
||
// document.body.appendChild(script);
|
||
// } else {
|
||
// initWechatSDK(config); // 如果已存在，直接初始化
|
||
// }
|
||
// wx.config({
|
||
// debug: true, // 调试模式
|
||
// appId: config.appId,
|
||
// timestamp: config.timestamp,
|
||
// nonceStr: config.nonceStr,
|
||
// signature: config.signature,
|
||
// jsApiList: ['miniProgram'], // 需要用到的 API
|
||
// });
|
||
// // 4. 配置完成后跳转小程序
|
||
// wx.ready(() => {
|
||
// wx.miniProgram.navigateTo({
|
||
// path: '/pages/home/index?id=123', // 小程序路径 + 参数
|
||
// success: () => console.log('跳转成功'),
|
||
// fail: (err) => {
|
||
// console.error('跳转失败:', err);
|
||
// uni.showToast({ title: '跳转失败，请在微信中打开', icon: 'none' });
|
||
// },
|
||
// });
|
||
// });
|
||
// },
|
||
// fail: (err) => {
|
||
// console.error('请求失败:', err);
|
||
// uni.showToast({ title: '网络错误', icon: 'none' });
|
||
// },
|
||
// complete: () => {
|
||
// console.log('请求完成');
|
||
// },
|
||
// });
|
||
|
||
// const appid = 'wx32d8423809b8d7d4';
|
||
// const path = `/pages/goods/goodsDetail/index`;
|
||
// const scheme = `weixin://dl/business/?appid=${appid}&path=${encodeURIComponent(path)}`;
|
||
// console.log('地址: ', scheme);
|
||
// // 方法1：动态创建 <a> 标签（兼容 iOS）
|
||
// const a = document.createElement('a');
|
||
// a.href = scheme;
|
||
// a.style.display = 'none';
|
||
// document.body.appendChild(a);
|
||
// a.click();
|
||
// document.body.removeChild(a);
|
||
// location.href = scheme;
|
||
|
||
// // 可添加失败回调（通过监听页面跳转失败）
|
||
// setTimeout(() => {
|
||
// alert('跳转失败，请手动打开小程序');
|
||
// }, 1000);
|
||
|
||
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
|
||
};
|
||
|
||
// }
|
||
</script>
|
||
|
||
<style scoped>
|
||
.uni-margin-wrap {
|
||
width: 100%;
|
||
/* height: 330px; */
|
||
padding: 16px 8px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #031c24;
|
||
width: 336px;
|
||
margin: 0 auto;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.flex .arrow-icon {
|
||
width: 24px;
|
||
}
|
||
|
||
.swiper {
|
||
width: 336px;
|
||
height: 330px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.swiper-item {
|
||
width: 336px;
|
||
height: 330px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.swiper-item .left {
|
||
width: 223px;
|
||
height: 330px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.swiper-item .left .left-img {
|
||
height: 330px;
|
||
/* width: 100%; */
|
||
object-fit: scale-down;
|
||
}
|
||
|
||
.swiper-item .right {
|
||
width: 102px;
|
||
height: 330px;
|
||
overflow: hidden;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.swiper-item .right .good-img {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.swiper-item .right .good-img .good-img-box {
|
||
height: 134px;
|
||
overflow: hidden;
|
||
/* background-color: red; */
|
||
}
|
||
|
||
.swiper-item .right .good-img .good-img-box .good-img-detail {
|
||
height: 100%;
|
||
object-fit: scale-down;
|
||
}
|
||
|
||
.swiper-item .right .btn {
|
||
height: 24px;
|
||
background-color: #031c24;
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dots {
|
||
height: 22px;
|
||
margin-top: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dots .dot {
|
||
width: 5px;
|
||
height: 2px;
|
||
background-color: #edf0f0;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.dots .dot:first-of-type {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.dots .active {
|
||
width: 10px;
|
||
background-color: #031c24;
|
||
}
|
||
</style>
|