feat : 合并代码

This commit is contained in:
赵毅 2025-07-18 16:51:59 +08:00
commit 62442b4798
8 changed files with 404 additions and 87 deletions

View File

@ -8,4 +8,9 @@ export const apiArr = {
deleteCar: "/api/v2/wechat/commodity/cart/delete",//删除购物车 deleteCar: "/api/v2/wechat/commodity/cart/delete",//删除购物车
updateCar: "/api/v2/wechat/commodity/cart/update",//更新购物车信息 updateCar: "/api/v2/wechat/commodity/cart/update",//更新购物车信息
getUserDefAddress: "/api/v2/wechat/commodity/receiving_address/get_default",//获取用户默认地址 getUserDefAddress: "/api/v2/wechat/commodity/receiving_address/get_default",//获取用户默认地址
createOrder: "/api/v2/wechat/commodity/order/create",//创建商品订单
payOrder: "/api/v2/wechat/commodity/order/pay",//支付订单
settingDefaultAddress: '/api/v2/wechat/commodity/receiving_address/default', // 收货地址设置默认
updateAddress: '/api/v2/wechat/commodity/receiving_address/update', // 收货地址修改
queryOrder: '/api/v2/wechat/commodity/order/trade_query', // 查询订单
} }

View File

@ -78,6 +78,9 @@ export default {
console.log('新市区跟旧市区不一直') console.log('新市区跟旧市区不一直')
this.xsq = newDist; this.xsq = newDist;
this.getDistList(newDist, x); this.getDistList(newDist, x);
} else {
console.log('新市区跟旧市区一直');
this.confirmDist = this.defaultDist[x]
} }
return return
} }

View File

@ -3,14 +3,14 @@
<div class="row"> <div class="row">
<div class="row_label"><span>*</span>收货人</div> <div class="row_label"><span>*</span>收货人</div>
<div class="row_con"> <div class="row_con">
<u--input placeholder="请输入姓名" clearable border="none" v-model="value" @change="change"></u--input> <u--input placeholder="请输入姓名" clearable border="none" v-model="name"></u--input>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label"><span>*</span>手机号</div> <div class="row_label"><span>*</span>手机号</div>
<div class="row_con"> <div class="row_con">
<u--input placeholder="请输入手机号" clearable border="none" v-model="value" @change="change"></u--input> <u--input type="number" placeholder="请输入手机号" clearable border="none" v-model="phone" ></u--input>
</div> </div>
</div> </div>
@ -24,24 +24,23 @@
<div class="row_label">地址</div> <div class="row_label">地址</div>
<div class="row_con"> <div class="row_con">
<div class="choseAddress" @click="chooseAddress"> <div class="choseAddress" @click="chooseAddress">
请选择地址 <text v-if="showOrientation">请选择地址</text>
<text v-if="!showOrientation" style="color: #000;">{{ orientation.region }} {{orientation.district}}</text>
</div> </div>
<div class="currentAddress"> <div class="currentAddress" v-if="showOrientation">
<div class="currentAddress1"> <div class="currentAddress1">
<div class="currentAddress1_left">当前定位和平里社区综合 服务站</div> <div class="currentAddress1_left">当前定位{{orientation.district}}</div>
<div class="currentAddress1_right">使用</div> <div class="currentAddress1_right" @click="headerConfirmClick">使用</div>
</div> </div>
<div class="currentAddress2">河北衡水市桃城区</div> <div class="currentAddress2">{{orientation.region}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label">门牌号</div> <div class="row_label">门牌号</div>
<div class="row_con noneborder"> <div class="row_con noneborder">
<u--input placeholder="例6栋201室" clearable border="none" v-model="value" <u--input placeholder="例6栋201室" clearable border="none" v-model="houseNumber"></u--input>
@change="change"></u--input>
<!-- <div class="tips">记得完善门牌号</div> --> <!-- <div class="tips">记得完善门牌号</div> -->
</div> </div>
</div> </div>
@ -69,24 +68,24 @@
<div class="row"> <div class="row">
<div class="row_label"><span>*</span>详细地址</div> <div class="row_label"><span>*</span>详细地址</div>
<div class="row_con"> <div class="row_con">
<u--input placeholder="小区、门牌号" clearable border="none" v-model="value" @change="change"></u--input> <u--input placeholder="小区、门牌号" clearable border="none" v-model="houseNumber"></u--input>
</div> </div>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="isdef"> <div class="isdef" @click="headerSettingDefaultAddressClick">
<div class="isdef_left"> <div class="isdef_left">
<div class="isdef_left1">设置默认地址</div> <div class="isdef_left1">设置默认地址</div>
<div class="isdef_left2">提醒下单时会优先选择</div> <div class="isdef_left2">提醒下单时会优先选择</div>
</div> </div>
<div class="isdef_right"> <div class="isdef_right">
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" /> <img v-if="isDefault == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" />
<!-- <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" /> --> <img v-if="isDefault == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" />
</div> </div>
</div> </div>
<div class="btn">确定</div> <div class="btn" @click="headerSubmitClick">确定</div>
</view> </view>
</template> </template>
@ -95,6 +94,7 @@
import { import {
apiArr apiArr
} from '../../../api/area'; } from '../../../api/area';
import { apiArr as apiArr2 } from '../../../api/shop';
import { import {
picUrl, picUrl,
menuButtonInfo, menuButtonInfo,
@ -122,6 +122,16 @@ export default {
sf: true, sf: true,
xsq: {}, xsq: {},
value2: '', value2: '',
isShow: false,
id: '',
type: '',
orientation: uni.getStorageSync('location'),
name: '',
phone: '',
houseNumber: '',
isDefault: 2,
showOrientation: true,
} }
}, },
methods: { methods: {
@ -130,6 +140,7 @@ export default {
}, },
chooseAddress() { chooseAddress() {
console.log(123); console.log(123);
this.isShow = true;
NavgateTo("/pages/shopcity/shopcity") NavgateTo("/pages/shopcity/shopcity")
}, },
/////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////// ///////////////////////////////////////////
@ -143,8 +154,9 @@ export default {
}, },
// //
async getCityList(sq, x) { async getCityList(sq, x,) {
console.log('11swq', sq); console.log('11swq', sq);
console.log('获取x', x);
if (!this.sf) { if (!this.sf) {
console.log('省份没变,查市跟区', this.cityList) console.log('省份没变,查市跟区', this.cityList)
let newDist = this.cityList[sq]; let newDist = this.cityList[sq];
@ -153,6 +165,9 @@ export default {
console.log('新市区跟旧市区不一直') console.log('新市区跟旧市区不一直')
this.xsq = newDist; this.xsq = newDist;
this.getDistList(newDist, x); this.getDistList(newDist, x);
} else {
console.log('新市区跟旧市区一直');
this.confirmDist = this.defaultDist[x]
} }
return return
} }
@ -166,11 +181,101 @@ export default {
}, },
// / // /
async getDistList(xsq, x) { async getDistList(xsq, x) {
console.log('页面传递的x',x);
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false }); const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
this.distList = res.rows; this.distList = res.rows;
this.defaultDist = res.rows; this.defaultDist = res.rows;
this.confirmDist = res.rows[0] // this.confirmDist = res.rows[0] //
}, },
async headerSubmitClick() {
console.log('省' ,this.confirmProv1);
console.log('xsq' ,this.xsq);
console.log('confirmCity' ,this.confirmCity);
console.log('confirmDist' ,this.confirmDist);
const { confirmProv1, xsq, confirmCity, confirmDist } = this;
if(!this.name) {
uni.showToast({
title: '请输入收货人名称',
icon: 'none'
})
return
}
if(!this.phone) {
uni.showToast({
title: '请输入收货人手机号',
icon: 'none'
})
return
}
if(this.tab == 0 && this.showOrientation) {
uni.showToast({
title: '请输入收货地址',
icon: 'none'
})
return
}
if(!this.houseNumber) {
uni.showToast({
title: '请输入门牌号',
icon: 'none'
})
return
}
if(this.type === 'edit') {
const res = await request(apiArr2.updateAddress, "POST", {
id: this.id,
name: this.name,
phone: this.phone,
address: this.tab === 0 ? this.orientation.region + this.orientation.district : `${confirmProv1.short_name}${xsq.short_name ? xsq.short_name : confirmCity.short_name}${confirmDist.short_name}`,
house_number: this.houseNumber,
is_default: this.isDefault
}, { nested: true})
console.log('编辑成功', res);
if(res.code === 1) {
uni.showToast({
title: '地址更新成功',
icon: 'success',
mask: true
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
}
} else {
const res = await request(apiArr2.addAddress, 'POST', {
name: this.name,
phone: this.phone,
address: this.tab === 0 ? this.orientation.region + this.orientation.district : `${confirmProv1.short_name}${xsq.short_name ? xsq.short_name : confirmCity.short_name}${confirmDist.short_name}`,
house_number: this.houseNumber,
is_default: this.isDefault
}, { nested: true})
if(res.code === 1) {
uni.showToast({
title: '地址添加成功',
icon: 'success',
mask: true
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
}
}
},
headerConfirmClick() {
this.showOrientation = false;
this.isShow = true;
this.orientation = uni.getStorageSync('location');
},
headerSettingDefaultAddressClick() {
this.isDefault = this.isDefault == 2 ? 1 : 2;
},
async init() { async init() {
uni.showLoading({ uni.showLoading({
title: '加载中', title: '加载中',
@ -205,11 +310,35 @@ export default {
/////////////////////////////////// /////////////////////////////////////////// /////////////////////////////////// ///////////////////////////////////////////
}, },
onLoad(options) { onLoad(options) {
console.log('12231', options);
if(options.item) {
const item = JSON.parse(options.item);
console.log('1231', item);
this.name = item.name;
this.phone = item.phone;
this.orientation = {
region: item.address,
district: ''
}
this.showOrientation = false;
this.id = item.id;
this.type = 'edit';
this.isShow = false;
this.isDefault = item.is_default;
this.houseNumber = item.house_number;
}
const meun = menuButtonInfo(); const meun = menuButtonInfo();
this.top = meun.top; this.top = meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.init() this.init()
}, },
onShow() {
if(!this.isShow ) return;
if(this.orientation.district !== uni.getStorageSync('location').district) {
this.orientation = uni.getStorageSync('location');
this.showOrientation = false;
}
},
onReachBottom() { onReachBottom() {
}, },

View File

@ -3,29 +3,27 @@
<div class="hasAddress"> <div class="hasAddress">
<div class="addressList"> <div class="addressList">
<div class="addressItem" v-for="item, index in 3" :key="index" :class="{ 'addressItem_def': index == 0 }"> <div class="addressItem" v-for="item, index in list" :key="index" :class="{ 'addressItem_def': index == 0 }">
<div class="addressItem_top"> <div class="addressItem_top">
高世霞 15901518415 <div class="is_def">默认</div> {{item.name}} {{item.phone}} <div v-if="item.is_default === 1" class="is_def">默认</div>
</div>
<div class="addressItem_mid">
河北 衡水 桃城区 上海公馆 赞寓17层
</div> </div>
<div class="addressItem_mid">{{item.address}}{{ item.house_number }}</div>
<div class="addressItem_footer"> <div class="addressItem_footer">
<div class="addressItem_footer_left"> <div class="addressItem_footer_left">
<div> <div v-if="item.is_default !== 1" @click="headerSettingDefault(item.id)">
<image src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image> <image src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
设为默认 设为默认
</div> </div>
<div v-if="false"> <div v-if="item.is_default === 1">
<image src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image> <image src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
已默认 已默认
</div> </div>
</div> </div>
<div class="addressItem_footer_right"> <div class="addressItem_footer_right">
<div class="btn1" @click="deleteItem">删除</div> <div class="btn1" @click="deleteItem(item.id )">删除</div>
<div class="btn2">修改</div> <div class="btn2" @click="editItem(item)">修改</div>
</div> </div>
</div> </div>
</div> </div>
@ -46,11 +44,8 @@
</template> </template>
<script> <script>
import { apiArr } from '../../../api/shop';
import { import {
apiArr
} from '../../../api/doorToDoor';
import {
picUrl,
menuButtonInfo, menuButtonInfo,
request, request,
NavgateTo NavgateTo
@ -62,32 +57,66 @@ export default {
localHeight: "", localHeight: "",
value: 3, value: 3,
type: "error", type: "error",
list: [],
} }
}, },
methods: { methods: {
addAddress(){ addAddress(){
NavgateTo("../addAddress/index") NavgateTo("../addAddress/index")
}, },
deleteItem(){
editItem(item) {
NavgateTo(`../addAddress/index?item=${JSON.stringify(item)}`)
},
async headerSettingDefault(id) {
const res = await request(apiArr.settingDefaultAddress, 'POST', { id }, { silent: true, nested: true });
if(res.code === 1){
uni.showToast({
title: '设置成功',
icon: 'success',
mask: true
})
this.init();
}
},
deleteItem(id){
const _this = this;
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '是否删除地址', content: '是否删除地址',
success: function (res) { success: async function (res) {
if (res.confirm) { if (res.confirm) {
console.log('用户点击确定'); console.log('用户点击确定');
const res = await request(apiArr.addressDel, 'POST', { id });
uni.showToast({
title: '删除成功',
icon: 'success',
mask: true
})
_this.init();
} else if (res.cancel) { } else if (res.cancel) {
console.log('用户点击取消'); console.log('用户点击取消');
} }
} }
}); });
}, },
async init() {
const res = await request(apiArr.addressList, 'POST', {});
this.list = res.address_list;
}
}, },
onLoad(options) { onLoad(options) {
const meun = menuButtonInfo(); const meun = menuButtonInfo();
this.top = meun.top; this.top = meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
}, },
onShow() {
this.init();
},
onReachBottom() { onReachBottom() {
}, },

View File

@ -267,6 +267,7 @@ export default {
}).then(res => { }).then(res => {
console.log(res); console.log(res);
this.info = res this.info = res
//
res.commodity_goods_info_list.forEach(item => { res.commodity_goods_info_list.forEach(item => {
item.goods_detail_pic = item.goods_detail_pic.split(',') item.goods_detail_pic = item.goods_detail_pic.split(',')
item.goods_carousel = item.goods_carousel.split(',') item.goods_carousel = item.goods_carousel.split(',')
@ -290,14 +291,8 @@ export default {
}); });
}, },
// changeGG2(item, index) {
// request(apiArr.addCar,"POST",{
// goods_id:item.id,
// count:1
// })
// },
//
changeGG(item, index) { changeGG(item, index) {
this.currentGG = item this.currentGG = item
this.currentGGIndex = index this.currentGGIndex = index
@ -319,7 +314,7 @@ export default {
}) })
}, },
// //( id )
getShopCarList() { getShopCarList() {
request(apiArr.getCar, 'POST', {}).then(res => { request(apiArr.getCar, 'POST', {}).then(res => {
this.carOrderList = res.commodity_cart_list this.carOrderList = res.commodity_cart_list
@ -327,67 +322,41 @@ export default {
}, },
addCar() { addCar() {
let that = this let that = this
// //
let goods_id_and_count = [] let goods_id_and_count = []
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = { count: 1 } this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = { count: 1 }
this.info.commodity_goods_info_list.forEach(item => { this.info.commodity_goods_info_list.forEach(item => {
console.log(item); console.log(item);
goods_id_and_count.push({ goods_id_and_count.push({
goods_id: item.id, goods_id: item.id,
count: item.cart_count.count count: 1
}) })
}) })
// update
request(apiArr.updateCar, "POST", { request(apiArr.updateCar, "POST", {
goods_id_and_count goods_id_and_count
}).then(res => { }).then(res => {
that.getShopCar() that.getShopCar()
that.getShopCarList() that.getShopCarList()
}) })
// let flag = false
// this.carOrderList.forEach(item => {
// if (item.goods_id == this.info.commodity_goods_info_list[this.currentGGIndex].id) {
// flag = true
// }
// })
// console.log(flag);
// if (flag) {
// this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = { count: 1 }
// let carNum = 0
// this.info.commodity_goods_info_list.forEach(item => {
// carNum += item.cart_count.count
// })
// this.carNum = carNum
// } else {
// }
}, },
//
changeCar(newValue) { changeCar(newValue) {
//
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count.count = newValue.value this.info.commodity_goods_info_list[this.currentGGIndex].cart_count.count = newValue.value
//
this.carOrderList.forEach(item=>{ this.carOrderList.forEach(item=>{
if(item.commodity_goods_info.id == this.info.commodity_goods_info_list[this.currentGGIndex].id){ if(item.commodity_goods_info.id == this.info.commodity_goods_info_list[this.currentGGIndex].id){
console.log(item,'item');
item.count = newValue.value item.count = newValue.value
} }
}) })
//
let carNum = 0 let carNum = 0
this.carOrderList.forEach(item=>{ this.carOrderList.forEach(item=>{
carNum += item.count carNum += item.count
}) })
// let carNum = 0
// this.info.commodity_goods_info_list.forEach(item => {
// if (item.cart_count) {
// carNum += item.cart_count.count
// }
// })
this.carNum = carNum this.carNum = carNum
}, },

View File

@ -7,12 +7,12 @@
<div class="address_Info" @click="choseAddress" v-if="defAddress"> <div class="address_Info" @click="choseAddress" v-if="defAddress">
<div class="address_Info_left"> <div class="address_Info_left">
<div class="address_Info_left_tit">收货地址</div> <div class="address_Info_left_tit">收货地址</div>
<div class="address_Info_left_name">李佳 15901518415</div> <div class="address_Info_left_name">{{ defAddress.name }} {{ defAddress.phone }}</div>
<div class="address_Info_left_addr">北京北京市朝阳区珠江绿洲文化广场</div> <div class="address_Info_left_addr">{{ defAddress.address }}{{ defAddress.house_number }}</div>
</div> </div>
</div> </div>
<div class="address_Info" @click="choseAddress" v-if="!defAddress"> <div class="address_Info" @click="addAddress" v-if="!defAddress">
<div class="address_Info_left noneDef"> <div class="address_Info_left noneDef">
<div class="address_Info_btn">添加收货地址</div> <div class="address_Info_btn">添加收货地址</div>
</div> </div>
@ -62,7 +62,7 @@
<div class="footer"> <div class="footer">
<div class="btn">立即支付{{ totalMony }}</div> <div class="btn" @click="craeteOrder">立即支付{{ totalMony }}</div>
</div> </div>
</view> </view>
@ -89,13 +89,17 @@ export default {
carList: [], carList: [],
totalMony: 0, totalMony: 0,
defAddress: {}, defAddress: {},
order_id: ""
} }
}, },
methods: { methods: {
choseAddress() { choseAddress() {
NavgateTo('../address/index') NavgateTo('../address/index')
}, },
addAddress() {
NavgateTo('../addAddress/index')
},
calcTotal() { calcTotal() {
let total = 0 let total = 0
this.carList.forEach(item => { this.carList.forEach(item => {
@ -128,6 +132,91 @@ export default {
}) })
}, },
craeteOrder() {
uni.showLoading({
title: '加载中',
})
let goods_list = []
this.carList.forEach(item => {
goods_list.push({
goods_id: item.commodity_goods_info.id,
count: item.count,
})
})
request(apiArr.createOrder, "POST", {
goods_list,
address_id: this.defAddress.id
}).then(res => {
uni.hideLoading()
this.order_id = res.order_id
this.payOrder()
}).catch(err => {
uni.hideLoading()
})
},
payOrder() {
request(apiArr.payOrder, "POST", {
order_id: this.order_id
}).then(res => {
let that = this; // this
let resCopy = JSON.parse(JSON.stringify(res))
this.WxPay(resCopy)
})
},
WxPay(resCopy) {
let that = this
uni.requestPayment({
"provider": "wxpay",
"orderInfo": {
"appid": "wxb4018c78fa143450", //
"noncestr": resCopy.nonceStr, //
"package": resCopy.package, //
"prepayid":resCopy.prepayId,
"timestamp": resCopy.timeStamp, //
"paysign": resCopy.paySign,
"partnerid":resCopy.partnerId
},
timeStamp: resCopy.timeStamp,
nonceStr: resCopy.nonceStr,
package: resCopy.package,
signType: resCopy.signType,
paySign: resCopy.paySign,
success(res) {
console.log(res);
},
fail(e) {
console.log(e.errMsg);
}
})
// uni.requestPayment({
// provider: 'wxpay',
// timeStamp: resCopy.timeStamp,
// nonceStr: resCopy.nonceStr,
// package: resCopy.package,
// signType: resCopy.signType,
// paySign: resCopy.paySign,
// success: function (res) {
// console.log('success:' + JSON.stringify(res));
// that.queryOrder()
// },
// fail: function (err) {
// console.log('fail:' + JSON.stringify(err));
// }
// })
},
queryOrder() {
request(apiArr.queryOrder, "POST", {
order_id: this.order_id
}).then(res => {
console.log(res);
})
},
}, },
onShow() { onShow() {
this.getUserAddress() this.getUserAddress()

View File

@ -189,6 +189,7 @@ export default {
district: res.address.match(/市(.*)/)[1], district: res.address.match(/市(.*)/)[1],
lat: res.latitude, lat: res.latitude,
lng: res.longitude, lng: res.longitude,
region: res.address.match(/^(.*?省.*?(?:市|自治州|盟).*?(?:县|区|旗))/)[1], //
}; };
uni.setStorageSync("location", selectLocation); // uni.setStorageSync("location", selectLocation); //
// uni.setStorageSync('city', selectLocation.cityName); // // uni.setStorageSync('city', selectLocation.cityName); //

92
pages/test.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div class="animation-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<img :src="spriteImage" :style="spriteStyle" alt="Animation sprite" />
</div>
</template>
<script>
export default {
name: 'SpriteAnimation',
data() {
return {
frame: 1, // (1-60)
type: '外', // ('''')
running: false, //
timer: null, //
spriteImage: 'http://192.168.0.172:5500/test1.png' // base64
}
},
computed: {
spriteStyle() {
return {
position: 'absolute',
top: `-${(this.frame - 1) * 120}px`,
left: '0px',
width: '100%',
height: 'auto'
}
}
},
methods: {
clearAnimationTimer() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
startAnimation() {
this.clearAnimationTimer()
this.running = true
const targetFrame = this.type === '内' ? 60 : 1
const step = this.type === '内' ? 1 : -1
const frameDuration = 2000 / 60 // 260
this.timer = setInterval(() => {
this.frame += step
if ((step > 0 && this.frame >= targetFrame) ||
(step < 0 && this.frame <= targetFrame)) {
this.frame = targetFrame
this.clearAnimationTimer()
this.running = false
this.checkAutoReverse()
}
}, frameDuration)
},
handleMouseEnter() {
this.type = '内'
if (!this.running) this.startAnimation()
},
handleMouseLeave() {
this.type = '外'
if (!this.running) this.startAnimation()
},
checkAutoReverse() {
if (this.type === '外' && this.frame === 60) {
this.type = '内'
this.startAnimation()
} else if (this.type === '内' && this.frame === 1) {
this.type = '外'
this.startAnimation()
}
}
},
beforeUnmount() {
this.clearAnimationTimer()
}
}
</script>
<style scoped>
.animation-container {
width: 120px;
height: 120px;
position: relative;
border: 1px solid pink;
overflow: hidden;
cursor: pointer;
left: 20%;
top: 200px;
}
</style>