feat(fittingRoom): 新增试衣间功能
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
This commit is contained in:
liguigong
@@ -21,10 +21,7 @@
|
||||
<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])"
|
||||
>
|
||||
<div class="good-img-box good-img-bottom" @click="toGoodsInfo(item[4])">
|
||||
<img :src="item[4].file_name" class="good-img-detail" />
|
||||
</div>
|
||||
</view>
|
||||
@@ -48,316 +45,317 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, watchEffect } from "vue";
|
||||
import { defineProps, ref, watchEffect } from 'vue';
|
||||
|
||||
const autoplay = ref(true);
|
||||
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);
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
/**小程序内跳转 */
|
||||
// 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);
|
||||
const current = ref(0);
|
||||
|
||||
// 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"
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
const animationfinish = (e) => {
|
||||
// console.log('e: ', e.detail.current);
|
||||
current.value = e.detail.current;
|
||||
};
|
||||
|
||||
// // #endif
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.error("请求失败:", err);
|
||||
// uni.showToast({
|
||||
// title: "网络错误",
|
||||
// icon: "none"
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
// 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;
|
||||
|
||||
// 初始化微信 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
|
||||
// });
|
||||
// // #ifdef H5
|
||||
// // 1. 检查是否在微信浏览器中
|
||||
// const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
|
||||
// console.log("是否在微信浏览器", isWechatBrowser);
|
||||
|
||||
// wx.ready(() => {
|
||||
// wx.miniProgram.navigateTo({
|
||||
// path: "/pages/goods/goodsDetail/index",
|
||||
// success: () => console.log("跳转成功"),
|
||||
// fail: (err) => {
|
||||
// console.error("跳转失败:", err);
|
||||
// uni.showToast({
|
||||
// title: "跳转失败",
|
||||
// icon: "none"
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
// 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}`
|
||||
};
|
||||
|
||||
// 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;
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
.flex .arrow-icon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 336px;
|
||||
height: 330px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.swiper {
|
||||
width: 336px;
|
||||
height: 330px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 336px;
|
||||
height: 330px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.swiper-item {
|
||||
width: 336px;
|
||||
height: 330px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.swiper-item .left {
|
||||
width: 223px;
|
||||
height: 330px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swiper-item .left {
|
||||
width: 223px;
|
||||
height: 330px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-item .left .left-img {
|
||||
height: 330px;
|
||||
/* width: 100%; */
|
||||
object-fit: scale-down;
|
||||
}
|
||||
.swiper-item .left .left-img {
|
||||
height: 330px;
|
||||
/* width: 100%; */
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.swiper-item .right {
|
||||
width: 102px;
|
||||
height: 330px;
|
||||
overflow: hidden;
|
||||
.swiper-item .right {
|
||||
width: 102px;
|
||||
height: 330px;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
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 {
|
||||
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 {
|
||||
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 .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;
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
background-color: #edf0f0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dots .dot:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
.dots .dot:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dots .active {
|
||||
width: 10px;
|
||||
background-color: #031c24;
|
||||
}
|
||||
.dots .active {
|
||||
width: 10px;
|
||||
background-color: #031c24;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user