1135 lines
27 KiB
Vue
1135 lines
27 KiB
Vue
<template>
|
||
<view class="page fc">
|
||
<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false" @clickLeft="back"
|
||
title="换装"></uni-nav-bar>
|
||
<image class="back"
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/5199a68fb335c7d892665b66637f60c4.png"
|
||
mode="widthFix"></image>
|
||
<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar>
|
||
<view class="body">
|
||
<view class="list">
|
||
<image class="list_backA"
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/7c383199322fbf1544fe3acf58c6cae5.png"
|
||
mode="widthFix"></image>
|
||
<view class="list_content">
|
||
<view class="list_top">
|
||
<view class="list_module">
|
||
<view class="list_title">上衣</view>
|
||
<scroll-view scroll-x="true" class="list_table fa" show-scrollbar>
|
||
<view class="list_detail"
|
||
:class="{ 'list_detail_selected': isSelectedTop(item.id) }"
|
||
v-for="(item, index) in outfitListInfo.top" :key="index"
|
||
@click="selectTop(item)">
|
||
<image class="list_picture"
|
||
:src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'"
|
||
mode="aspectFill" @longpress="handleLongPress(item)"></image>
|
||
<view class="list_name" v-if="item.is_current">使用中</view>
|
||
<image class="list_lock" v-if="item.is_lock && !item.is_free"
|
||
src="/static/images/replacement_lock.png"></image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="list_module">
|
||
<view class="list_title">下装</view>
|
||
<scroll-view scroll-x="true" class="list_table fa">
|
||
<view class="list_detail"
|
||
:class="{ 'list_detail_selected': isSelectedBottom(item.id) }"
|
||
v-for="(item, index) in outfitListInfo.bottom" :key="index"
|
||
@click="selectBottom(item)">
|
||
<image class="list_picture"
|
||
:src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'"
|
||
mode="aspectFill" @longpress="handleLongPress(item)"></image>
|
||
<view class="list_name" v-if="item.is_current">使用中</view>
|
||
<image class="list_lock" v-if="item.is_lock && !item.is_free"
|
||
src="/static/images/replacement_lock.png"></image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="list_module">
|
||
<view class="list_title">连体服</view>
|
||
<scroll-view scroll-x="true" class="list_table fa">
|
||
<view class="list_detail"
|
||
:class="{ 'list_detail_selected': isSelectedDress(item.id) }"
|
||
v-for="(item, index) in outfitListInfo.dress" :key="index"
|
||
@click="selectDress(item)">
|
||
<image class="list_picture"
|
||
:src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'"
|
||
mode="aspectFill" @longpress="handleLongPress(item)"></image>
|
||
<view class="list_name" v-if="item.is_current">使用中</view>
|
||
<image class="list_lock" v-if="item.is_lock && !item.is_free"
|
||
src="/static/images/replacement_lock.png"></image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="list_bottom">
|
||
<view class="list_title">形象栏</view>
|
||
<scroll-view scroll-x="true" class="list_table fa">
|
||
<view class="list_detailB"
|
||
:class="selectedAvatarIndex === index ? 'list_detailB_active' : ''"
|
||
v-for="(item, index) in outfitListInfo.looks" :key="index"
|
||
@click="selectAvatar(index)">
|
||
<image class="list_pictureB"
|
||
:class="selectedAvatarIndex === index ? 'list_pictureB_active' : ''"
|
||
:src="item.image_url ? item.image_url : '/static/images/replacement_pictureB.png'"
|
||
mode="aspectFill"></image>
|
||
<image class="list_delete" v-if="selectedAvatarIndex === index"
|
||
src="/static/images/replacement_delete.png" @click="showsChat(item.id)">
|
||
</image>
|
||
<image class="list_switch" v-if="selectedAvatarIndex === index"
|
||
src="/static/images/replacement_switch.png" @click="switchAvatar(item.id)">
|
||
</image>
|
||
</view>
|
||
<view class="list_detailB" v-if="outfitListInfo"
|
||
v-for="(item, index) in (outfitListInfo.outfit_slots - outfitListInfo.looks.length)"
|
||
:key="index">
|
||
<image class="list_pictureB" src="/static/images/replacement_pictureB.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="opt">
|
||
<view class="opt_module">
|
||
<view class="opt_data">
|
||
<view class="opt_btn faj" @click="bottomClick()">
|
||
换装
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom" v-if="bottomStats">
|
||
<view class="bottom_content">
|
||
<view class="bottom_title">确认是否换装
|
||
<image src="/static/images/close.png" @click="bottomClick()"></image>
|
||
</view>
|
||
<view class="bottom_number faj" @click="tofrequency">换装次数：{{ outfitListInfo.clothes_num }}次<image
|
||
src="/static/images/replacement_more.png"></image>
|
||
</view>
|
||
<view class="bottom_module">
|
||
<scroll-view scroll-x="true" class="bottom_table fa">
|
||
<view class="bottom_details" v-for="(item, index) in outfitListInfo.looks" :key="index">
|
||
<image class="bottom_picture"
|
||
:src="item.image_url ? item.image_url : '/static/images/replacement_pictureB.png'"
|
||
mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="bottom_detail faj" @click="selectClick()">
|
||
<view class="bottom_select faj">
|
||
<image :src="selectStats ? '/static/images/selectA.png' : '/static/images/select.png'">
|
||
</image>
|
||
</view>
|
||
<view class="bottom_name">保存为形象栏</view>
|
||
</view>
|
||
<view class="bottom_item fa sb">
|
||
<view class="bottom_btn faj" @click="noClick()">否</view>
|
||
<view class="bottom_btn faj" @click="yesClick()">是</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail" v-if="detailStats">
|
||
<view class="detail_content">
|
||
<view class="detail_title">详情
|
||
<image src="/static/images/close.png" @click="detailClick()"></image>
|
||
</view>
|
||
<view class="detail_module fa">
|
||
<image class="detail_image"
|
||
:src="detailList.image_url ? detailList.image_url : '/static/images/replacement_image.png'"
|
||
mode="aspectFill">
|
||
</image>
|
||
<view class="detail_detail f1">
|
||
<view class="detail_item fa">
|
||
<image src="/static/images/star.png"></image>
|
||
<view class="detail_name">{{ detailList.name ? detailList.name : '-' }}</view>
|
||
<image src="/static/images/star.png"></image>
|
||
</view>
|
||
<view class="detail_money fx">
|
||
{{ detailList.price_gold ? detailList.price_gold : '0' }}<text>金币</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="detail_btn faj" v-if="detailList.is_lock && !detailList.is_free"
|
||
@click="shoppingClick()">购买</view>
|
||
<view class="detail_btn faj" v-if="!detailList.is_lock || detailList.is_free">已拥有</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
OutfitList,
|
||
OutfitPurchase,
|
||
OutfitChange,
|
||
OutfitLooks,
|
||
OutfitLooksUse,
|
||
LoverBasic
|
||
} from '@/utils/api.js'
|
||
import notHave from '@/components/not-have.vue';
|
||
import topSafety from '@/components/top-safety.vue';
|
||
|
||
export default {
|
||
components: {
|
||
notHave,
|
||
topSafety,
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
item_id: '',
|
||
},
|
||
bottomStats: false,
|
||
detailStats: false,
|
||
selectStats: false,
|
||
selectedAvatarIndex: -1,
|
||
outfitListInfo: '',
|
||
detailList: '',
|
||
// 当前选择模式：1为连体服模式，2为上衣下装模式
|
||
currentMode: null, // null表示未选择模式
|
||
formTopBottom: {
|
||
"top_item_id": '',
|
||
"bottom_item_id": '',
|
||
"save_to_look": false
|
||
},
|
||
formDress: {
|
||
"dress_item_id": '',
|
||
"save_to_look": false
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
// 根据 outfitListInfo.outfit_slots 数量显示形象栏，没有的使用默认图片
|
||
displayAvatarList() {
|
||
if (this.outfitListInfo && this.outfitListInfo.outfit_slots && Array.isArray(this.outfitListInfo.outfit_slots)) {
|
||
// 如果有 outfit_slots 数据，使用该数据
|
||
return this.outfitListInfo.outfit_slots.map(slot => {
|
||
return {
|
||
id: slot.id,
|
||
image: slot.image_url || '/static/images/replacement_pictureB.png'
|
||
};
|
||
});
|
||
} else {
|
||
// 如果没有数据，返回空数组，稍后在方法中处理
|
||
return Array(7).fill().map((_, index) => {
|
||
return {
|
||
id: null,
|
||
image: '/static/images/replacement_pictureB.png'
|
||
};
|
||
});
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.outfitList()
|
||
},
|
||
mounted() {
|
||
// 页面加载完成后，自动选中当前正在使用的服装
|
||
this.$nextTick(() => {
|
||
this.selectCurrentOutfit();
|
||
});
|
||
},
|
||
methods: {
|
||
// 自动选中当前正在使用的服装
|
||
selectCurrentOutfit() {
|
||
// 检查是否有当前使用的连体服
|
||
if (this.outfitListInfo && this.outfitListInfo.current_outfit && this.outfitListInfo.current_outfit.dress_id) {
|
||
const currentDress = this.outfitListInfo.dress.find(item => item.id === this.outfitListInfo.current_outfit.dress_id);
|
||
if (currentDress) {
|
||
// 设置当前模式为连体服模式
|
||
this.currentMode = 1;
|
||
// 设置选中的连体服
|
||
this.formDress.dress_item_id = currentDress.id;
|
||
// 清除上衣和下装选择
|
||
this.formTopBottom.top_item_id = '';
|
||
this.formTopBottom.bottom_item_id = '';
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 检查是否有当前使用的上衣或下装
|
||
if (this.outfitListInfo && this.outfitListInfo.current_outfit) {
|
||
const currentTop = this.outfitListInfo.top.find(item => item.id === this.outfitListInfo.current_outfit.top_id);
|
||
const currentBottom = this.outfitListInfo.bottom.find(item => item.id === this.outfitListInfo.current_outfit.bottom_id);
|
||
|
||
if (currentTop || currentBottom) {
|
||
// 设置当前模式为上衣下装模式
|
||
this.currentMode = 2;
|
||
if (currentTop) {
|
||
this.formTopBottom.top_item_id = currentTop.id;
|
||
}
|
||
if (currentBottom) {
|
||
this.formTopBottom.bottom_item_id = currentBottom.id;
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
},
|
||
outfitList() {
|
||
OutfitList({}).then(res => {
|
||
if (res.code == 1) {
|
||
this.outfitListInfo = res.data
|
||
console.log(this.outfitListInfo)
|
||
|
||
// 处理上衣
|
||
for (let i = 0; i < this.outfitListInfo.top.length; i++) {
|
||
if (this.outfitListInfo.current_outfit.top_id == this.outfitListInfo.top[i].id) {
|
||
this.outfitListInfo.top[i].is_current = true;
|
||
} else {
|
||
this.outfitListInfo.top[i].is_current = false;
|
||
}
|
||
// 根据 owned_outfit_ids 确定是否已解锁
|
||
this.outfitListInfo.top[i].is_lock = !this.outfitListInfo.owned_outfit_ids.includes(this.outfitListInfo.top[i].id);
|
||
console.log(this.outfitListInfo.top[i].is_lock)
|
||
}
|
||
|
||
// 处理下装
|
||
for (let i = 0; i < this.outfitListInfo.bottom.length; i++) {
|
||
if (this.outfitListInfo.current_outfit.bottom_id == this.outfitListInfo.bottom[i].id) {
|
||
this.outfitListInfo.bottom[i].is_current = true;
|
||
} else {
|
||
this.outfitListInfo.bottom[i].is_current = false;
|
||
}
|
||
// 根据 owned_outfit_ids 确定是否已解锁
|
||
this.outfitListInfo.bottom[i].is_lock = !this.outfitListInfo.owned_outfit_ids.includes(this.outfitListInfo.bottom[i].id);
|
||
console.log(this.outfitListInfo.bottom[i].is_lock)
|
||
}
|
||
|
||
// 处理连体服
|
||
for (let i = 0; i < this.outfitListInfo.dress.length; i++) {
|
||
if (this.outfitListInfo.current_outfit.dress_id == this.outfitListInfo.dress[i].id) {
|
||
this.outfitListInfo.dress[i].is_current = true;
|
||
} else {
|
||
this.outfitListInfo.dress[i].is_current = false;
|
||
}
|
||
// 根据 owned_outfit_ids 确定是否已解锁
|
||
this.outfitListInfo.dress[i].is_lock = !this.outfitListInfo.owned_outfit_ids.includes(this.outfitListInfo.dress[i].id);
|
||
console.log(this.outfitListInfo.dress[i].is_lock)
|
||
}
|
||
|
||
// 在数据加载完成后，自动选中当前正在使用的服装
|
||
this.$nextTick(() => {
|
||
this.selectCurrentOutfit();
|
||
});
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
outfitPurchase() {
|
||
OutfitPurchase(this.form).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '购买成功',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
this.detailStats = false
|
||
this.outfitList()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
outfitLooks(id) {
|
||
OutfitLooks(id).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '换装成功',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
this.outfitList()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
outfitLooksUse(id) {
|
||
OutfitLooksUse(id).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '更换成功',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
this.outfitList()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
loverBasic() {
|
||
LoverBasic().then(res => {
|
||
if (res.code == 1) {
|
||
this.loverBasicList = res.data
|
||
uni.setStorageSync('loverBasicList', res.data)
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
shoppingClick() {
|
||
console.log(this.form)
|
||
this.outfitPurchase()
|
||
},
|
||
// 选择上衣
|
||
selectTop(item) {
|
||
// 如果是当前使用的服装，不需要弹出购买弹窗
|
||
if (item.is_current) {
|
||
// 直接选中当前使用的服装
|
||
this.currentMode = 2;
|
||
|
||
// 如果再次点击已选中的上衣，则取消选择
|
||
if (this.formTopBottom.top_item_id === item.id) {
|
||
this.formTopBottom.top_item_id = '';
|
||
} else {
|
||
this.formTopBottom.top_item_id = item.id;
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 检查是否已解锁或是否免费
|
||
if (item.is_lock && !item.is_free) {
|
||
// 如果服装未解锁且不是免费的，弹出购买弹窗
|
||
this.detailClick(item);
|
||
return;
|
||
}
|
||
|
||
// 如果当前是连体服模式，不能选择上衣
|
||
if (this.currentMode === 1 && this.formDress.dress_item_id) {
|
||
uni.showToast({
|
||
title: '连体服模式下不能选择上衣',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 设置当前模式为上衣下装模式
|
||
this.currentMode = 2;
|
||
|
||
// 如果再次点击已选中的上衣，则取消选择
|
||
if (this.formTopBottom.top_item_id === item.id) {
|
||
this.formTopBottom.top_item_id = '';
|
||
} else {
|
||
this.formTopBottom.top_item_id = item.id;
|
||
}
|
||
},
|
||
// 选择下装
|
||
selectBottom(item) {
|
||
// 如果是当前使用的服装，不需要弹出购买弹窗
|
||
if (item.is_current) {
|
||
// 直接选中当前使用的服装
|
||
this.currentMode = 2;
|
||
|
||
// 如果再次点击已选中的下装，则取消选择
|
||
if (this.formTopBottom.bottom_item_id === item.id) {
|
||
this.formTopBottom.bottom_item_id = '';
|
||
} else {
|
||
this.formTopBottom.bottom_item_id = item.id;
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 检查是否已解锁或是否免费
|
||
if (item.is_lock && !item.is_free) {
|
||
// 如果服装未解锁且不是免费的，弹出购买弹窗
|
||
this.detailClick(item);
|
||
return;
|
||
}
|
||
|
||
// 如果当前是连体服模式，不能选择下装
|
||
if (this.currentMode === 1 && this.formDress.dress_item_id) {
|
||
uni.showToast({
|
||
title: '连体服模式下不能选择下装',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 设置当前模式为上衣下装模式
|
||
this.currentMode = 2;
|
||
|
||
// 如果再次点击已选中的下装，则取消选择
|
||
if (this.formTopBottom.bottom_item_id === item.id) {
|
||
this.formTopBottom.bottom_item_id = '';
|
||
} else {
|
||
this.formTopBottom.bottom_item_id = item.id;
|
||
}
|
||
},
|
||
// 选择连体服
|
||
selectDress(item) {
|
||
// 如果是当前使用的服装，不需要弹出购买弹窗
|
||
if (item.is_current) {
|
||
// 直接选中当前使用的服装
|
||
this.currentMode = 1;
|
||
|
||
// 如果再次点击已选中的连体服，则取消选择
|
||
if (this.formDress.dress_item_id === item.id) {
|
||
this.formDress.dress_item_id = '';
|
||
} else {
|
||
// 选择新的连体服时，取消上衣和下装的选择
|
||
this.formTopBottom.top_item_id = '';
|
||
this.formTopBottom.bottom_item_id = '';
|
||
this.formDress.dress_item_id = item.id;
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 检查是否已解锁或是否免费
|
||
if (item.is_lock && !item.is_free) {
|
||
// 如果服装未解锁且不是免费的，弹出购买弹窗
|
||
this.detailClick(item);
|
||
return;
|
||
}
|
||
|
||
// 如果当前是上衣下装模式，不能选择连体服
|
||
if (this.currentMode === 2 && (this.formTopBottom.top_item_id || this.formTopBottom.bottom_item_id)) {
|
||
uni.showToast({
|
||
title: '上衣下装模式下不能选择连体服',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 设置当前模式为连体服模式
|
||
this.currentMode = 1;
|
||
|
||
// 如果再次点击已选中的连体服，则取消选择
|
||
if (this.formDress.dress_item_id === item.id) {
|
||
this.formDress.dress_item_id = '';
|
||
} else {
|
||
// 选择新的连体服时，取消上衣和下装的选择
|
||
this.formTopBottom.top_item_id = '';
|
||
this.formTopBottom.bottom_item_id = '';
|
||
this.formDress.dress_item_id = item.id;
|
||
}
|
||
},
|
||
// 检查是否选中了指定上衣
|
||
isSelectedTop(id) {
|
||
return this.formTopBottom.top_item_id === id;
|
||
},
|
||
// 检查是否选中了指定下装
|
||
isSelectedBottom(id) {
|
||
return this.formTopBottom.bottom_item_id === id;
|
||
},
|
||
// 检查是否选中了指定连体服
|
||
isSelectedDress(id) {
|
||
return this.formDress.dress_item_id === id;
|
||
},
|
||
// 处理长按事件
|
||
handleLongPress(item) {
|
||
// 检查是否已解锁或是否免费
|
||
if (item.is_lock && !item.is_free) {
|
||
// 如果服装未解锁且不是免费的，不触发长按事件
|
||
uni.showToast({
|
||
title: '请先解锁该服装',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 如果满足条件，触发详情查看
|
||
this.detailClick(item);
|
||
},
|
||
// 换装按钮点击
|
||
yesClick() {
|
||
if (!this.outfitListInfo.clothes_num) {
|
||
uni.showToast({
|
||
title: '当前暂无次数',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (this.currentMode === 1 && this.formDress.dress_item_id) {
|
||
// 连体服模式：调用连体服换装接口
|
||
this.changeDress();
|
||
} else if (this.currentMode === 2 && (this.formTopBottom.top_item_id || this.formTopBottom.bottom_item_id)) {
|
||
// 上衣下装模式：调用上衣下装换装接口
|
||
this.changeTopBottom();
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先选择要换装的服装',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (this.bottomStats) {
|
||
this.bottomStats = false
|
||
} else {
|
||
this.bottomStats = true
|
||
}
|
||
},
|
||
// 调用连体服换装接口
|
||
changeDress() {
|
||
OutfitChange(this.formDress).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '换装成功',
|
||
icon: 'success'
|
||
});
|
||
// 重新加载数据以更新当前使用状态
|
||
this.outfitList();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 调用上衣下装换装接口
|
||
changeTopBottom() {
|
||
OutfitChange(this.formTopBottom).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '换装成功',
|
||
icon: 'success'
|
||
});
|
||
// 重新加载数据以更新当前使用状态
|
||
this.outfitList();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
noClick() {
|
||
this.bottomStats = false
|
||
},
|
||
back() {
|
||
this.loverBasic()
|
||
|
||
},
|
||
selectAvatar(index) {
|
||
this.selectedAvatarIndex = index;
|
||
},
|
||
selectClick() {
|
||
if (this.selectStats) {
|
||
this.selectStats = false
|
||
this.formDress.save_to_look = false
|
||
this.formTopBottom.save_to_look = false
|
||
} else {
|
||
this.selectStats = true
|
||
this.formDress.save_to_look = true
|
||
this.formTopBottom.save_to_look = true
|
||
}
|
||
},
|
||
bottomClick() {
|
||
if (this.bottomStats) {
|
||
this.bottomStats = false
|
||
} else {
|
||
this.bottomStats = true
|
||
}
|
||
},
|
||
detailClick(item) {
|
||
if (this.detailStats) {
|
||
this.detailStats = false
|
||
this.form.item_id = ''
|
||
this.detailList = ''
|
||
} else {
|
||
this.detailStats = true
|
||
this.form.item_id = item.id
|
||
this.detailList = item
|
||
}
|
||
console.log(this.detailList)
|
||
console.log(this.form.item_id)
|
||
},
|
||
showsChat(id) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认删除吗',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.outfitLooks(id)
|
||
}
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
switchAvatar(id) {
|
||
this.outfitLooksUse(id)
|
||
},
|
||
tofrequency() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/frequency'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
position: relative;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-view {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.body {
|
||
position: relative;
|
||
}
|
||
|
||
.back {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 1624rpx;
|
||
display: block;
|
||
}
|
||
|
||
|
||
.body {
|
||
position: relative;
|
||
padding: 54rpx 0 0 0;
|
||
}
|
||
|
||
.list {
|
||
position: relative;
|
||
}
|
||
|
||
.list_backA {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.list_content {
|
||
position: relative;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.list_top {
|
||
position: relative;
|
||
}
|
||
|
||
.list_module {
|
||
position: relative;
|
||
}
|
||
|
||
.list_title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_table {
|
||
position: relative;
|
||
margin: 30rpx 0 0 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.list_detail {
|
||
position: relative;
|
||
margin: 0 42rpx 0 0;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
border-radius: 12rpx;
|
||
border: 4rpx solid #FFFFFF;
|
||
}
|
||
|
||
.list_picture {
|
||
width: 220rpx;
|
||
height: 240rpx;
|
||
display: block;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.list_name {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 2rpx 5rpx;
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #FFFFFF;
|
||
line-height: 28rpx;
|
||
background: #F661B5;
|
||
border-radius: 0 12rpx 0 12rpx;
|
||
}
|
||
|
||
.list_lock {
|
||
position: absolute;
|
||
right: 0;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.list_detail_selected {
|
||
border: 4rpx solid #4CAF50;
|
||
/* 绿色边框表示选中 */
|
||
border-radius: 12rpx;
|
||
/* 保持与原始样式一致的圆角 */
|
||
box-sizing: border-box;
|
||
/* 确保边框不会影响布局 */
|
||
}
|
||
|
||
.list_bottom {
|
||
position: relative;
|
||
}
|
||
|
||
.list_detailB {
|
||
position: relative;
|
||
margin: 0 20rpx 0 0;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.list_pictureB {
|
||
width: 210rpx;
|
||
/* height: 250rpx; */
|
||
border-radius: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.list_detailB_active {
|
||
position: relative;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 0 20rpx rgba(204, 204, 204, 0.8);
|
||
}
|
||
|
||
.list_pictureB_active {
|
||
width: 260rpx;
|
||
/* height: 280rpx; */
|
||
border-radius: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.list_delete {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
bottom: 10rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.list_switch {
|
||
position: absolute;
|
||
left: 10rpx;
|
||
top: 10rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
|
||
.list_image {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 12rpx 8rpx;
|
||
background: rgba(249, 249, 249, 0.5);
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.list_image image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.opt {
|
||
position: relative;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.opt_module {
|
||
position: fixed;
|
||
padding: 5rpx 0 70rpx 0;
|
||
height: 85rpx;
|
||
width: 100%;
|
||
bottom: 0;
|
||
left: 0;
|
||
box-sizing: content-box;
|
||
z-index: 2;
|
||
}
|
||
|
||
.opt_data {
|
||
padding: 5rpx 50rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.opt_btn {
|
||
padding: 24rpx 0;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.bottom {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
z-index: 2;
|
||
}
|
||
|
||
.bottom_content {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(180deg, #EDD6F5 0%, #FFFFFF 100%);
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
padding: 46rpx 80rpx 68rpx 80rpx;
|
||
}
|
||
|
||
.bottom_title {
|
||
position: relative;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bottom_title image {
|
||
position: absolute;
|
||
right: -20rpx;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin: auto 0;
|
||
}
|
||
|
||
.bottom_number {
|
||
position: relative;
|
||
margin: 42rpx 0 0 0;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #9779FA;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bottom_number image {
|
||
margin: 0 0 0 14rpx;
|
||
width: 10rpx;
|
||
height: 18rpx;
|
||
}
|
||
|
||
.bottom_module {
|
||
position: relative;
|
||
margin: 42rpx 0 0 0;
|
||
}
|
||
|
||
.bottom_table {
|
||
position: relative;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bottom_details {
|
||
display: inline-block;
|
||
}
|
||
|
||
.bottom_picture {
|
||
margin: 0 78rpx 0 0;
|
||
width: 144rpx;
|
||
height: 198rpx;
|
||
border-radius: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.bottom_detail {
|
||
position: relative;
|
||
margin: 38rpx 0 0 0;
|
||
}
|
||
|
||
.bottom_select {
|
||
position: relative;
|
||
}
|
||
|
||
.bottom_select image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.bottom_name {
|
||
margin: 0 0 0 10rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #8449FE;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.bottom_item {
|
||
position: relative;
|
||
margin: 42rpx 0 0 0;
|
||
}
|
||
|
||
.bottom_btn {
|
||
position: relative;
|
||
padding: 26rpx 112rpx;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #8449FE;
|
||
line-height: 50rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #817EFE;
|
||
}
|
||
|
||
.bottom_btn:nth-child(2) {
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
|
||
}
|
||
|
||
|
||
.detail {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
z-index: 2;
|
||
}
|
||
|
||
.detail_content {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(180deg, #EDD6F5 0%, #FFFFFF 100%);
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
padding: 46rpx 40rpx 68rpx 40rpx;
|
||
}
|
||
|
||
.detail_title {
|
||
position: relative;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.detail_title image {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin: auto 0;
|
||
}
|
||
|
||
.detail_module {
|
||
position: relative;
|
||
margin: 30rpx 0 0 0;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.detail_image {
|
||
width: 260rpx;
|
||
height: 300rpx;
|
||
display: block;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.detail_detail {
|
||
position: relative;
|
||
margin: 0 0 0 60rpx;
|
||
}
|
||
|
||
.detail_item {
|
||
position: relative;
|
||
}
|
||
|
||
.detail_item image {
|
||
width: 36rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.detail_name {
|
||
margin: 0 28rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #9779FA;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.detail_money {
|
||
margin: 12rpx 0 0 0;
|
||
font-weight: 700;
|
||
font-size: 44rpx;
|
||
color: #FF0000;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.detail_money text {
|
||
font-size: 28rpx;
|
||
line-height: 58rpx;
|
||
}
|
||
|
||
.detail_btn {
|
||
position: relative;
|
||
margin: 162rpx 0 0 0;
|
||
padding: 26rpx 112rpx;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
line-height: 50rpx;
|
||
border-radius: 12rpx;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
|
||
}
|
||
</style> |