Compare commits
10 Commits
bf418395ab
...
81ca8c57f1
| Author | SHA1 | Date |
|---|---|---|
jiazhipeng
|
81ca8c57f1 | 15 hours ago |
|
jiazhipeng
|
af7953b78f | 15 hours ago |
|
jiazhipeng
|
90c0412f58 | 3 days ago |
|
jiazhipeng
|
6ec8d1ea2c | 4 days ago |
|
jiazhipeng
|
20b9d18b68 | 5 days ago |
|
jiazhipeng
|
4e57c15616 | 6 days ago |
|
jiazhipeng
|
be8293a420 | 6 days ago |
|
jiazhipeng
|
2176fc5757 | 6 days ago |
|
jiazhipeng
|
2aa6e1de73 | 6 days ago |
|
jiazhipeng
|
d975257dfe | 6 days ago |
39 changed files with 2890 additions and 499 deletions
@ -1,190 +1,278 @@ |
|||
<template> |
|||
<view style="padding-top: 88rpx;"> |
|||
<view class="login-tip">时味苏州PHoneLogin 申请获得</view> |
|||
<view class="login-tip2">以下权限</view> |
|||
<view class="login-tip-box"> |
|||
<text>获得你的公开信息（昵称、头像、地区及性别）</text> |
|||
<view class="bg"> |
|||
<view class="form-box"> |
|||
<view class="form-item"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/Login/newMobile.png" alt=""></image> |
|||
<input type="number" v-model="form.phone" placeholder="请输入手机号" /> |
|||
</view> |
|||
<view class="form-item"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/Login/newCaptcha.png" alt=""></image> |
|||
<input type="text" v-model="form.captcha" placeholder="请输入图形验证码" /> |
|||
<image :src="captchaUrl" @click="refreshCaptcha()" alt="" style="width: 200rpx;height: 50rpx;" |
|||
class="captcha"> |
|||
</view> |
|||
<view class="form-item"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/Login/newMobilecode.png" alt=""></image> |
|||
<input type="number" v-model="form.code" placeholder="请输入验证码" /> |
|||
<view @click="handleGetCode()" class="getCode">{{ codeText }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="btn-box"> |
|||
<button bindtap="cancel" type="default" @click="redirectIndex">取消</button> |
|||
<button type="primary" @click="getUserInfo">同意</button> |
|||
</view> |
|||
<view class="flex-center article-box"> |
|||
<radio-group @change="toggleAgreement"> |
|||
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio> |
|||
</radio-group> |
|||
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view> |
|||
<view @click="handleLogin()" class="submit">登录</view> |
|||
<view class="flex-center" style="margin-top: 30rpx;"> |
|||
<radio-group @change="toggleAgreement"> |
|||
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio> |
|||
</radio-group> |
|||
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view> |
|||
</view> |
|||
|
|||
</view> |
|||
<uni-popup ref="popup" type="bottom" background-color="#fff"> |
|||
<button type="default" open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber" style="width: 100%;height: 12vh;line-height: 12vh;">点击授权手机号</button> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "login", |
|||
data() { |
|||
return { |
|||
isAgreed: false, |
|||
openid: '' |
|||
}; |
|||
form: { |
|||
phone: "", |
|||
code: "", |
|||
captcha: "", // 新增图形验证码字段 |
|||
}, |
|||
// 验证码逻辑 |
|||
codeText: "获取验证码", |
|||
codeDisabled: false, |
|||
countdown: 60, |
|||
// 图形验证码相关 |
|||
captchaUrl: "", // 图形验证码图片地址 |
|||
captchaId: "", |
|||
// 记住账号 |
|||
rememberPhone: false, |
|||
// 加载状态 |
|||
submitting: false, |
|||
smsCodeId: "", |
|||
|
|||
checked: false, |
|||
isAgreed: false, |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
onReady() { |
|||
this.refreshCaptcha(); |
|||
}, |
|||
methods: { |
|||
// 处理手机号授权 |
|||
handlePhoneNumber(e) { |
|||
if (e.detail.errMsg === "getPhoneNumber:ok") { // 成功 |
|||
this.$refs.popup.close(); |
|||
this.Post({ |
|||
code: e.detail.code, |
|||
encryptedData: e.detail.encryptedData, |
|||
iv: e.detail.iv, |
|||
openid: this.openid |
|||
}, '/api/uservice/user/bindPhoneNumber') |
|||
.then(res => { |
|||
this.$store.commit('changeUserInfo', res.data); |
|||
this.navigateBasedOnPath(); |
|||
}) |
|||
.catch(error => { |
|||
console.error('绑定手机号失败:', error); |
|||
uni.showToast({ |
|||
title: '绑定手机号失败，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
}); |
|||
} else { |
|||
console.error('获取手机号失败:', e.detail.errMsg); |
|||
uni.showToast({ |
|||
title: '获取手机号失败，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
// 跳转到协议页面 |
|||
gotoInfo(id) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/user/privacyInfo?id=' + id |
|||
}); |
|||
}, |
|||
// 切换协议同意状态 |
|||
toggleAgreement() { |
|||
this.isAgreed = !this.isAgreed; |
|||
}, |
|||
// 重定向到首页 |
|||
redirectIndex() { |
|||
uni.switchTab({ |
|||
url: '/pages/index/index', |
|||
}); |
|||
}, |
|||
// 获取用户信息 |
|||
getUserInfo() { |
|||
if (!this.isAgreed) { |
|||
uni.showToast({ |
|||
title: '请先勾选同意《用户服务协议》、《隐私政策》', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
let data = { |
|||
avatar: "https://jdsz.obs.cn-east-3.myhuaweicloud.com:443/backend/upload/202509281759047643d42d0a25de93f030757727b6a74a999c2f5f0426.png", |
|||
birthday: "2020-02-05", |
|||
createtime: 1760087570, |
|||
email: "", |
|||
expires_in: 2592000, |
|||
expiretime: 1762679570, |
|||
from_source: "WECHAT", |
|||
fullname: "", |
|||
gender: 1, |
|||
id: 6069705, |
|||
id_number: "", |
|||
isBindMobile: 1, |
|||
is_enterprise: 2, |
|||
mobile: "19941952818", |
|||
name_verification: "UNCERTFIED", |
|||
nickname: "abc", |
|||
score: 106, |
|||
token: "c04a0d8e-b2dd-4a47-a2e8-0a7652520bad", |
|||
user_id: 6069705, |
|||
username: "", |
|||
uuid: "3c6f7d59-5c27-42ad-902b-89043fc4b4f8", |
|||
// 刷新图形验证码 |
|||
refreshCaptcha() { |
|||
this.Post({}, "/api/uservice/user/getCaptchaImg").then((res) => { |
|||
if (res) { |
|||
this.captchaUrl = res.data.code; |
|||
this.captchaId = res.data.id; |
|||
} |
|||
this.$store.commit('changeUserInfo', data); |
|||
}, |
|||
// 根据路径进行导航 |
|||
navigateBasedOnPath() { |
|||
if (this.$store.state.user.toPath.includes('user/user')) { |
|||
uni.switchTab({ |
|||
url: this.$store.state.user.toPath |
|||
}); |
|||
} else { |
|||
uni.navigateBack({}); |
|||
} |
|||
} |
|||
}, |
|||
}; |
|||
}); |
|||
}, |
|||
// 切换协议同意状态 |
|||
toggleAgreement() { |
|||
this.isAgreed = !this.isAgreed; |
|||
}, |
|||
// 重置表单 |
|||
resetForm() { |
|||
this.form.code = ""; |
|||
this.form.captcha = ""; // 重置图形验证码 |
|||
// 刷新图形验证码 |
|||
this.refreshCaptcha(); |
|||
}, |
|||
|
|||
// 获取短信验证码（添加图形验证码校验） |
|||
handleGetCode() { |
|||
// 先验证手机号和图形验证码 |
|||
if (!this.form.phone) { |
|||
this.$message.warning("请先输入手机号码"); |
|||
return; |
|||
} |
|||
if (!this.form.captcha) { |
|||
this.$message.warning("请先输入图形验证码"); |
|||
return; |
|||
} |
|||
|
|||
this.Post( |
|||
{ |
|||
mobile: this.form.phone, |
|||
captchaCode: this.form.captcha, |
|||
captchaCodeId: this.captchaId, |
|||
}, |
|||
"/api/uservice/user/getMobileCodeForLogin" |
|||
).then((res) => { |
|||
console.log(res); |
|||
if (res.code == 1) { |
|||
this.codeDisabled = true; |
|||
this.smsCodeId = res.data.id; |
|||
this.codeText = `重新发送(${this.countdown}s)`; |
|||
const timer = setInterval(() => { |
|||
this.countdown--; |
|||
this.codeText = `重新发送(${this.countdown}s)`; |
|||
if (this.countdown <= 0) { |
|||
clearInterval(timer); |
|||
this.codeText = "获取验证码"; |
|||
this.codeDisabled = false; |
|||
this.countdown = 60; |
|||
} |
|||
}, 1000); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 登录提交（包含图形验证码校验） |
|||
handleLogin() { |
|||
if (!this.form.phone) { |
|||
uni.showToast({ |
|||
title:"请输入手机号码", |
|||
icon:"none" |
|||
}) |
|||
return; |
|||
} |
|||
if (!this.form.captcha) { |
|||
uni.showToast({ |
|||
title:"请输入图形验证码", |
|||
icon:"none" |
|||
}) |
|||
return; |
|||
} |
|||
if (!this.form.code) { |
|||
uni.showToast({ |
|||
title:"请输入短信校验码", |
|||
icon:"none" |
|||
}) |
|||
return; |
|||
} |
|||
if (!this.isAgreed) { |
|||
uni.showToast({ |
|||
title:"请先勾选同意《用户服务协议》、《隐私政策》", |
|||
icon:"none" |
|||
}) |
|||
return; |
|||
} |
|||
this.submitting = true; |
|||
this.Post( |
|||
{ |
|||
mobile: this.form.phone, |
|||
smsCodeId: this.smsCodeId, |
|||
smsCode: this.form.code, |
|||
fromSource: "mini" |
|||
},"/api/uservice/user/loginByMobileCode").then((res) => { |
|||
this.submitting = false; |
|||
if (res.code == 1) { |
|||
this.$store.commit('changeUserInfo', res.data); |
|||
this.navigateBasedOnPath(); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.login-tip { |
|||
font-size: 28rpx; |
|||
margin: 0 60rpx; |
|||
margin-top: 40rpx; |
|||
<style scoped lang="scss"> |
|||
.bg { |
|||
/* background: #FFFFFF; */ |
|||
padding-bottom: 120rpx; |
|||
position: relative; |
|||
background-image: url("https://m.cloud.sz-trip.com/static/images/Login/newTopBg.png"); |
|||
background-size: 100% 100%; |
|||
padding-top: 240rpx; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.login-tip2 { |
|||
font-size: 44rpx; |
|||
margin: 0rpx 60rpx; |
|||
margin-top: 20rpx; |
|||
font-weight: 400; |
|||
.form-box { |
|||
margin: 0 auto; |
|||
padding: 0 50rpx; |
|||
.form-item { |
|||
padding: 20rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
background: #fff; |
|||
border-radius: 25px; |
|||
height: 80rpx; |
|||
margin-bottom: 50rpx; |
|||
padding-left: 30rpx; |
|||
&>image { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
vertical-align: middle; |
|||
} |
|||
input { |
|||
border: none; |
|||
padding-left: 20rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: #ABABAB; |
|||
} |
|||
.captcha { |
|||
position: absolute; |
|||
right: 50rpx; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
.getCode { |
|||
position: absolute; |
|||
right: 50rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
color: #0B898E; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
border: 1px solid #0B898E; |
|||
border-radius: 30rpx; |
|||
padding: 0 20rpx; |
|||
text-align: center; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.login-tip-box { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin: 0 60rpx; |
|||
font-size: 28rpx; |
|||
margin-top: 40rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.login-tip-box .icon-gou1 { |
|||
line-height: 80rpx; |
|||
margin-top: -20rpx; |
|||
margin-right: 30rpx; |
|||
color: #666; |
|||
.submit { |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
background: #0B898E; |
|||
border-radius: 50rpx; |
|||
margin: 0 auto; |
|||
width: 600rpx; |
|||
margin-top: .6rem; |
|||
} |
|||
|
|||
.btn-box { |
|||
display: flex; |
|||
position: absolute; |
|||
bottom: 100rpx; |
|||
left: 0; |
|||
right: 0; |
|||
|
|||
input::placeholder { |
|||
color: #ABABAB; |
|||
} |
|||
|
|||
.btn-box button { |
|||
width: 400rpx; |
|||
.yuan { |
|||
width: .37rem; |
|||
height: .37rem; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.article-box { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
color: #1aad19; |
|||
bottom: 40rpx; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #00B200; |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.iconfont { |
|||
margin-right: 10rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
text { |
|||
border-bottom: 1px solid; |
|||
} |
|||
} |
|||
|
|||
.article-box .iconfont { |
|||
margin-right: 10rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.article-box text { |
|||
border-bottom: 1px solid; |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||
@ -0,0 +1,455 @@ |
|||
<template> |
|||
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
|||
|
|||
<view class="main-container"> |
|||
<view class="coupon-box" v-for="(prize,prizeIndex) in prizeList" :key="prizeIndex" |
|||
:style="{'background-image':`url(${prize.backgroundImg})`}"> |
|||
<view class="flex-between" style="flex-wrap: wrap;" v-if="prize.isCoupon"> |
|||
<image :class="['coupon-img','coupon-img'+i]" v-for="(item,i) in couponList" :key="i" |
|||
:src="item.img" @click="getCoupon(item)" mode="widthFix"></image> |
|||
</view> |
|||
<view class="w-full" v-else @click="gotoPath(prize.path)"> |
|||
<image style="width: 100%;height: 262rpx;" :src="prize.img" mode="widthFix"></image> |
|||
</view> |
|||
|
|||
<view class="rule flex-center" v-if="prize.isCoupon" @click="showRule(item)"> |
|||
活动规则 |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20251015/d63427138ebdec9e4a780736c0cece2c.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="type-container" :style="{'background-image':`url(${typeList[typeIndex].backgroundImg})`}"> |
|||
<view :class="['type-item','type-item'+i,typeIndex==i?'active':'']" @click="typeIndex=i" |
|||
v-for="(item,i) in typeList" :key="i">{{item.title}}</view> |
|||
</view> |
|||
<view class="product-container"> |
|||
<view class="row-product" @click="gotoDetailByType(item)" :key="index" |
|||
v-for="(item,index) in typeList[typeIndex].list.slice(0,typeList[typeIndex].viewNum)"> |
|||
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
<view class="content flex-column"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<!-- <view class="tags" v-if="item.display_tags"> |
|||
<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI">{{tag}}</view> |
|||
</view> --> |
|||
<view class="flex-between"> |
|||
<view > |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="btn"> |
|||
<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
|||
v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6" mode="heightFix" |
|||
@click="typeList[typeIndex].viewNum=999"></image> |
|||
</view> |
|||
|
|||
<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> --> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> |
|||
|
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
|||
<view class="flex-column flex-center"> |
|||
<image style="width: 636rpx;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/bcfccc761d5f48589a92d83cf2ad89f5.png"></image> |
|||
|
|||
<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
|
|||
prizeList: [ |
|||
{ |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251015/1de2e7b5d2c81859da64a03c08a2abab.png", |
|||
isCoupon: true, |
|||
ruleImg: "https://static.ticket.sz-trip.com/uploads/20251015/bcfccc761d5f48589a92d83cf2ad89f5.png", |
|||
}, |
|||
{ |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251015/869d6ad6500513201a42b2f05d315281.png", |
|||
img: "https://static.ticket.sz-trip.com/uploads/20251015/94f1e10dc0f45347a243481d28044a52.png", |
|||
path: "/subPackages/activity/dzxConSeasonNH" |
|||
}, |
|||
{ |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251015/b57675474d037bfe3c141a73e22a1514.png", |
|||
img:"https://static.ticket.sz-trip.com/uploads/20251015/54710ff93860f871f533d6affcf4b7fc.png", |
|||
path: "/subPackages/activity/dzxConSeasonPrize" |
|||
}, |
|||
], |
|||
couponList: [ |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/9b516a020e2783787f7a95156d1ae1f9.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/8321d506adeaeb4b84d5e2cbfb113870.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/26099ebefdf08e2b60c5ee41c22ffeb9.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/a300c6a3b39bdc8d4a8801bfde9efa9f.png"}, |
|||
{id: null, img: "https://static.ticket.sz-trip.com/uploads/20251015/7c1c2b9b20a5ec9dc5693a2f34429d36.png"}, |
|||
], |
|||
isReceive: true, |
|||
typeIndex: 0, |
|||
typeList: [ |
|||
{ |
|||
id: 116,title: "正宗好蟹",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/cf772d70307dccb70fbc6221174144f9.png", |
|||
}, |
|||
{ |
|||
id: 117,title: "秋冬进补",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/6be24679dbfec9efc8703627c764aa3d.png", |
|||
}, |
|||
{ |
|||
id: 118,title: "时令甄选",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/c92d5c63f216b27ce77522e17e06f1d6.png", |
|||
}, |
|||
{ |
|||
id: 119,title: "苏韵文创",viewNum:6, list: [], |
|||
backgroundImg: "https://static.ticket.sz-trip.com/uploads/20251016/339be8cc94d8b21c192c5911fa73de70.png", |
|||
}, |
|||
], |
|||
showGoTop: false, |
|||
popShow: false, |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2401) |
|||
this.getGoods() |
|||
}, |
|||
methods: { |
|||
changPopShow (e) { |
|||
this.popShow = e.show |
|||
}, |
|||
getHeadImg (id) { |
|||
this.Post({id},'/api/multimedia/detail').then(res => { |
|||
this.headImg = res.data.head_img |
|||
uni.setNavigationBarTitle({ |
|||
title:res.data.title |
|||
}) |
|||
if (res.data.company_name) { |
|||
res.data.company_name.split(',').forEach((item, index) => { |
|||
this.couponList[index].id = item |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
showRule (item) { |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
// 产品列表 |
|||
getGoods() { |
|||
for(let p of this.typeList) { |
|||
this.Post({ |
|||
tag_id: p.id, |
|||
offset: 0, |
|||
limit: 999, |
|||
},'/api/product/get_product_by_tag_subject').then(res => { |
|||
if (res.data.list.length < p.viewNum) { |
|||
p.viewNum = 999 |
|||
} |
|||
p.list = res.data.list |
|||
console.log(p) |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
getCoupon(item) { |
|||
if (!this.isReceive) { |
|||
uni.showToast({ |
|||
title: "短时间内请勿重复点击！", |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.isReceive = false |
|||
setTimeout(() => {this.isReceive = true}, 3000) |
|||
this.Post({ |
|||
ids: item.id, |
|||
is_all: 1, |
|||
},"/api/coupon/getNewCouponsByActivitiesIds").then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: res.data, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
|
|||
viewDetail(item) { |
|||
this.gotoDetailByType(item) |
|||
}, |
|||
returnTop(){ |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 200, |
|||
}) |
|||
}, |
|||
}, |
|||
onPageScroll(res) { |
|||
this.showGoTop = res.scrollTop > 200 ? true : false; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/306f4e5db6cc77c111c73f78acecad18.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: repeat-y; /* 竖向重复 */ |
|||
background-position: bottom; /* 从底部开始显示 */ |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -1610rpx; |
|||
padding: 0 17rpx 60rpx; |
|||
} |
|||
.coupon-box{ |
|||
width: 100%; |
|||
position: relative; |
|||
padding: 95rpx 12rpx 3rpx; |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
margin-bottom: 30rpx; |
|||
.rule{ |
|||
width: 165rpx; |
|||
height: 49rpx; |
|||
background: #63C083; |
|||
border-radius: 35rpx 35rpx 35rpx 35rpx; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
top: 12rpx; |
|||
right: 0; |
|||
image{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 5rpx; |
|||
margin-top: 1rpx; |
|||
} |
|||
} |
|||
|
|||
.coupon-img{ |
|||
width: 160rpx; |
|||
height: 190rpx; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
.coupon-img4{ |
|||
width: 100%; |
|||
height: 196.67rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.row-product{ |
|||
width: 100%; |
|||
height: 240rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(177,177,177,0.25); |
|||
border-radius: 20rpx 20rpx 20rpx 20rpx; |
|||
border: 1rpx solid #F4F4F4; |
|||
padding: 20rpx 22rpx; |
|||
display: flex; |
|||
margin-bottom: 13rpx; |
|||
.img{ |
|||
width: 200rpx; |
|||
height: 100%; |
|||
border-radius: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.content{ |
|||
width: 100rpx; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
padding: 0 0 0rpx 13rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 39rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 27rpx; |
|||
} |
|||
// &::after{ |
|||
// content: "起"; |
|||
// font-size: 24rpx; |
|||
// } |
|||
} |
|||
.old-price{ |
|||
font-weight: 400; |
|||
font-size: 29rpx; |
|||
color: #B1B1B1; |
|||
text-decoration-line: line-through; |
|||
margin-left: 13rpx; |
|||
&::before{ |
|||
content: "￥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
.tags{ |
|||
width: 100%; |
|||
display: flex; |
|||
overflow: hidden; |
|||
.tag{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
height: 38rpx; |
|||
line-height: 38rpx; |
|||
color: #4C9BB4; |
|||
padding: 0rpx 6rpx; |
|||
border-radius: 5rpx; |
|||
border: 1px solid #4C9BB4; |
|||
margin-right: 13rpx; |
|||
} |
|||
} |
|||
.view-more{ |
|||
height: 24rpx; |
|||
margin: 31rpx auto 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
display: block; |
|||
} |
|||
|
|||
.type-container{ |
|||
display: flex; |
|||
// padding: 24rpx 34rpx 0; |
|||
height: 324rpx; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
.type-item{ |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
text-align: left; |
|||
height: 80rpx; |
|||
// background-color: rgba(0,0,0,0.5); |
|||
opacity: 0; |
|||
flex: 1; |
|||
&.active{ |
|||
// font-weight: bold; |
|||
// font-size: 33rpx; |
|||
// color: #000000; |
|||
// text-shadow: |
|||
// -3px -3px 0 #fff, /* 左上白边 */ |
|||
// 3px -3px 0 #fff, /* 右上白边 */ |
|||
// -3px 3px 0 #fff, /* 左下白边 */ |
|||
// 3px 3px 0 #fff, /* 右下白边 */ |
|||
// 0px 3px 3px rgba(255,119,0,0.25); |
|||
// text-stroke: 3px #FFFFFF; |
|||
|
|||
} |
|||
} |
|||
// .type-item0{ |
|||
// width: 180rpx; |
|||
// } |
|||
// .type-item1{ |
|||
// width: 170rpx; |
|||
// } |
|||
// .type-item2{ |
|||
// width: 170rpx; |
|||
// } |
|||
} |
|||
|
|||
.product-container{ |
|||
margin-top: -210rpx; |
|||
padding:0 21rpx 34rpx 27rpx; |
|||
position: relative; |
|||
background: #FFFEFF; |
|||
border-radius: 0rpx 0rpx 35rpx 35rpx; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 340rpx; |
|||
height: 497rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 6rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 16rpx; |
|||
.img{ |
|||
width: 327rpx; |
|||
height: 327rpx; |
|||
border-radius: 13rpx 13rpx 0rpx 0rpx; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 150rpx; |
|||
justify-content: space-between; |
|||
padding: 4rpx 10rpx; |
|||
} |
|||
.price{ |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #E62525; |
|||
&::before{ |
|||
content: "￥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 100rpx; |
|||
height: 40rpx; |
|||
background: #FF9838; |
|||
border-radius: 20rpx; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,310 @@ |
|||
<template> |
|||
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix" :show-menu-by-longpress="true"></image> |
|||
|
|||
<view class="rule-box"> |
|||
<view class="rule-btn" @click="showRule(1)">活动 细则</view> |
|||
<!-- <view class="rule-btn">操作 流程</view> --> |
|||
</view> |
|||
|
|||
<view class="main-container"> |
|||
<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20251015/472caac1ca249c1701dc1c58fa458be4.png"></image> |
|||
<view class="product-container flex-between" style="flex-wrap: wrap;"> |
|||
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
|||
v-for="(item,index) in list"> |
|||
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
<view class="content flex-column"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="flex-between"> |
|||
<view > |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="btn"> |
|||
<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
|||
v-if="!finish" mode="heightFix" @click="getGoods()"></image> |
|||
</view> |
|||
|
|||
<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> --> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> |
|||
|
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
|||
<view class="flex-column flex-center"> |
|||
<view class="pop-image"> |
|||
<view class="content"> |
|||
<image mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/d1cf83965be001dc35389648c8749570.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
finish:false, |
|||
list: [], |
|||
showGoTop: false, |
|||
popShow: false, |
|||
ruleImg: "", |
|||
|
|||
|
|||
typeList: [], |
|||
|
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2402) |
|||
// this.getGoods() |
|||
this.productInit() |
|||
}, |
|||
methods: { |
|||
productInit () { |
|||
let _this = this |
|||
// 获取所有农产品子类目 pid_type 20 |
|||
this.Post({pid: 20},'/api/product/tag_list').then(res => { |
|||
let typeList = (res.data || []).map(v=>v.id) |
|||
Promise.all( |
|||
typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list')) |
|||
).then(typeRes => { |
|||
typeRes.forEach(type => { |
|||
if (type.data.length>0) { |
|||
typeList = typeList.concat(type.data.map(x=>x.id)) |
|||
} |
|||
}) |
|||
this.typeList = typeList |
|||
this.getGoods() |
|||
}) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
changPopShow (e) { |
|||
this.popShow = e.show |
|||
}, |
|||
getHeadImg (id) { |
|||
this.Post({id},'/api/multimedia/detail').then(res => { |
|||
this.headImg = res.data.head_img |
|||
uni.setNavigationBarTitle({ |
|||
title:res.data.title |
|||
}) |
|||
}); |
|||
}, |
|||
showRule (type) { |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
// 产品列表 |
|||
getGoods() { |
|||
this.Post({ |
|||
tag_id: this.typeList.join(","), |
|||
offset: this.list.length, |
|||
limit: 6, |
|||
order:"desc", |
|||
sort:"sales_number", |
|||
},'/api/product/get_product_by_tag').then(res => { |
|||
if (res.data.length < 6) { |
|||
this.finish = true |
|||
} |
|||
this.list = this.list.concat(res.data.list||[]) |
|||
}) |
|||
}, |
|||
|
|||
returnTop(){ |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 200, |
|||
}) |
|||
}, |
|||
}, |
|||
onPageScroll(res) { |
|||
this.showGoTop = res.scrollTop > 200 ? true : false; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/306f4e5db6cc77c111c73f78acecad18.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: repeat-y; /* 竖向重复 */ |
|||
background-position: bottom; /* 从底部开始显示 */ |
|||
position: relative; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
|
|||
.rule-box{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 220rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 150rpx; |
|||
width: 67rpx; |
|||
z-index: 20; |
|||
.rule-btn{ |
|||
width: 66.67rpx; |
|||
height: 66.67rpx; |
|||
background-size: 100% 100%; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 0rpx 0rpx; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/98e2184f7003a6d3ae3ae7246550260e.png"); |
|||
line-height: 1.2; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -250rpx; |
|||
padding: 0 34rpx 60rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title-image{ |
|||
width: 316.67rpx; |
|||
height: 68.67rpx; |
|||
margin: 0 auto; |
|||
display: block; |
|||
} |
|||
|
|||
.view-more{ |
|||
height: 24rpx; |
|||
margin: 31rpx auto 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
display: block; |
|||
} |
|||
|
|||
.product-container{ |
|||
padding:30rpx 0 0; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 333rpx; |
|||
height: 484rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(186,144,108,0.1); |
|||
border-radius: 27rpx 27rpx 27rpx 27rpx; |
|||
padding: 6rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 19rpx; |
|||
.img{ |
|||
width: 320rpx; |
|||
height: 320rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 150rpx; |
|||
justify-content: space-between; |
|||
padding: 0rpx 10rpx 10rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 34rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
// &::after{ |
|||
// content: "起"; |
|||
// font-size: 24rpx; |
|||
// } |
|||
} |
|||
.old-price{ |
|||
font-weight: 400; |
|||
font-size: 25rpx; |
|||
color: #B1B1B1; |
|||
text-decoration-line: line-through; |
|||
margin-left: 10rpx; |
|||
&::before{ |
|||
content: "￥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
|
|||
.pop-image{ |
|||
width: 636rpx; |
|||
height: 1262.11rpx; |
|||
background: url("https://static.ticket.sz-trip.com/uploads/20251015/dbe71e60d36a04a908651045d67f9582.png"); |
|||
background-size: 100% 100%; |
|||
padding: 223rpx 42rpx 30rpx; |
|||
.content{ |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,650 @@ |
|||
<template> |
|||
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix" :show-menu-by-longpress="true"></image> |
|||
<view v-else style="height: 1200rpx;"></view> |
|||
<view class="rule-box"> |
|||
<view class="rule-btn" @click="showRule(1)">活动 规则</view> |
|||
</view> |
|||
|
|||
<view class="main-container"> |
|||
<view class="zhuanpan"> |
|||
<view class="zhuanpanImg" :style="{ transform: `rotate(${rotateAngle}deg)` }"></view> |
|||
<image class="choujiang" src="https://static.ticket.sz-trip.com/uploads/20251015/a24d553d3d8707579ad74b9a7d8181d6.png" @click="getPrize"></image> |
|||
</view> |
|||
|
|||
|
|||
<view class="flex-between" style="margin-bottom: 27rpx;position: relative;"> |
|||
<button class="my-share" open-type="share">1</button> |
|||
<image style="width: 371.33rpx;height: 101.33rpx;" mode="heightFix" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/c5ca2c1e8a96b4340776ca6af92c6711.png"></image> |
|||
|
|||
<image @click="openMyPrize()" style="width: 288rpx;height: 101.33rpx;" mode="heightFix" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/1b04f59f632af0d7fcdb58a5c2eb39d5.png"></image> |
|||
</view> |
|||
|
|||
<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20251015/580622a02ffe192d428f0e90ca020e3f.png"></image> |
|||
<view class="product-container flex-between" style="flex-wrap: wrap;"> |
|||
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
|||
v-for="(item,index) in list"> |
|||
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
<view class="content flex-column"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="flex-between"> |
|||
<view > |
|||
<text class="price">{{item.price/100}}</text> |
|||
<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text> |
|||
</view> |
|||
<view class="btn"> |
|||
<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png" |
|||
v-if="!finish" mode="heightFix" @click="getGoods()"></image> |
|||
</view> |
|||
|
|||
<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> --> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image> |
|||
<image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> |
|||
|
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow"> |
|||
<view class="flex-column flex-center"> |
|||
<image style="width: 636rpx;" mode="widthFix" :src="ruleImg"></image> |
|||
|
|||
<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="prizePop" type="bottom" :safe-area="false" |
|||
mask-background-color="rgba(0,0,0,0.6)" |
|||
@change="changPopShow"> |
|||
<view class="my-prize"> |
|||
<view class="title-container"> |
|||
<image mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20251016/3a65b98b7014225ae635f39a1b5d9a96.png"></image> |
|||
<image @click="$refs.prizePop.close()" class="close" src="https://static.ticket.sz-trip.com/uploads/20251016/77d62de0d8a19c5a940506f49662e640.png"></image> |
|||
</view> |
|||
|
|||
<view class="prize-content"> |
|||
<view class="flex-center" v-if="prizeList.length<=0"> |
|||
<image class="no-data" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251016/4e54bd967090f9db540e8df28500ef0e.png"></image> |
|||
</view> |
|||
|
|||
<view v-else> |
|||
<view class="prize-item" v-for="(item,i) in prizeList" :key="i"> |
|||
<image class="prize-img" :src="item.head_img"></image> |
|||
<view class="flex-1 w-1rpx" style="height: 100%;"> |
|||
<view class="title">{{item.prize_name}}</view> |
|||
<view >抽奖时间：{{item.create_time}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="kefu" v-if="prizeList.length>0" @click="$refs.kfpopup.open()"> |
|||
<image src="https://static.ticket.sz-trip.com/uploads/20251016/f871b8870ffffcc5c6b02714caee8e11.png"></image> |
|||
<text style="padding-left: 5rpx;">联系客服</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="kfpopup" type="bottom" :safe-area="false"> |
|||
<view class="kf-popup-content"> |
|||
<!-- 标题栏 --> |
|||
<view class="popup-header"> |
|||
<text class="title">联系我们</text> |
|||
<text class="close-icon" @click="$refs.kfpopup.close()">×</text> |
|||
</view> |
|||
|
|||
<!-- 内容区域 --> |
|||
<view class="popup-body"> |
|||
<!-- 电话咨询 --> |
|||
<view class="contact-item" @click="clickPhone('15370135755')"> |
|||
<view class="info"> |
|||
<text class="label">电话咨询</text> |
|||
<text class="detail">15370135755</text> |
|||
</view> |
|||
<view class="arrow"> |
|||
<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/a58432ad47582207f9f03ac31a6e2d98.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 在线客服 --> |
|||
<button class="concat-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="contact-item"> |
|||
|
|||
<view class="info"> |
|||
<text class="label">在线客服</text> |
|||
<text class="detail">工作时间: 9:00-18:00</text> |
|||
</view> |
|||
<view class="arrow"> |
|||
<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/11761e83954ecb845a8c9ea26e95c6e0.png"></image> |
|||
</view> |
|||
</view> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
|
|||
</uni-popup> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
finish:false, |
|||
list: [], |
|||
typeList: [], |
|||
showGoTop: false, |
|||
popShow: false, |
|||
ruleImg: "", |
|||
|
|||
prizeId: 9, // 9 |
|||
prizeName: '', |
|||
rotateAngle: 0, |
|||
prizeList: [], |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getHeadImg(2403) |
|||
this.productInit() |
|||
}, |
|||
methods: { |
|||
productInit () { |
|||
let _this = this |
|||
let typeList = [650,651,647,649,653,654,656] |
|||
// 获取所有农产品子类目 pid_type 20 |
|||
Promise.all( |
|||
typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list')) |
|||
).then(typeRes => { |
|||
typeRes.forEach(type => { |
|||
if (type.data.length>0) { |
|||
typeList = typeList.concat(type.data.map(x=>x.id)) |
|||
} |
|||
}) |
|||
this.typeList = typeList |
|||
this.getGoods() |
|||
}) |
|||
}, |
|||
changPopShow (e) { |
|||
this.popShow = e.show |
|||
}, |
|||
getHeadImg (id) { |
|||
this.Post({id},'/api/multimedia/detail').then(res => { |
|||
this.headImg = res.data.head_img |
|||
uni.setNavigationBarTitle({ |
|||
title:res.data.title |
|||
}) |
|||
}); |
|||
// 抽奖规则 |
|||
this.Post({id:2404},'/api/multimedia/detail').then(res => { |
|||
this.ruleImg = res.data.head_img |
|||
}); |
|||
}, |
|||
showRule (type) { |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
openMyPrize () { |
|||
this.Post({sweepstakes_id: this.prizeId, limit: 999,show_none:1},'/api/sweepstakes/sweepstakes_act/prizeLog') |
|||
.then(res => { |
|||
if(res.data) { |
|||
this.prizeList = res.data.data || [] |
|||
this.$refs.prizePop.open() |
|||
console.log(this.prizeList) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 抽奖 |
|||
getPrize: function() { |
|||
// 逆时针对应 |
|||
let prize = [ |
|||
{name: '五等奖',level: 5,deg:0}, |
|||
{name: '三等奖',level: 3,deg:60}, |
|||
{name: '二等奖',level: 2,deg:120}, |
|||
{name: '五等奖',level: 5,deg:180}, |
|||
{name: '一等奖',level: 1,deg:240}, |
|||
{name: '四等奖',level: 4,deg:300}, |
|||
] |
|||
|
|||
|
|||
this.Post({sweepstakes_id: this.prizeId},'/api/sweepstakes/sweepstakes_act/luckyDrawv2') |
|||
.then(res => { |
|||
if(res.data) { |
|||
let prizeData = prize.find(v=>v.level == res.data.level) |
|||
if (prizeData) { |
|||
this.rotateAngle = (720 + prizeData.deg)+ (this.rotateAngle-this.rotateAngle%720); |
|||
} |
|||
|
|||
setTimeout(() => { |
|||
uni.showModal({ |
|||
content:'恭喜您已中奖，具体请查看奖品。' |
|||
}) |
|||
},3000) |
|||
} |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
// 产品列表 |
|||
getGoods() { |
|||
this.Post({ |
|||
tag_id: this.typeList.join(","), |
|||
offset: this.list.length, |
|||
limit: 6, |
|||
order:"desc", |
|||
sort:"sales_number", |
|||
},'/api/product/get_product_by_tag').then(res => { |
|||
if (res.data.length < 6) { |
|||
this.finish = true |
|||
} |
|||
this.list = this.list.concat(res.data.list||[]) |
|||
}) |
|||
}, |
|||
|
|||
returnTop(){ |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 200, |
|||
}) |
|||
}, |
|||
}, |
|||
onPageScroll(res) { |
|||
this.showGoTop = res.scrollTop > 200 ? true : false; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/895dc12ffe394be03f4831ddcd280308.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: repeat-y; /* 竖向重复 */ |
|||
background-position: bottom; /* 从底部开始显示 */ |
|||
position: relative; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
|
|||
.rule-box{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 410rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 150rpx; |
|||
width: 67rpx; |
|||
z-index: 20; |
|||
.rule-btn{ |
|||
width: 66.67rpx; |
|||
height: 66.67rpx; |
|||
background-size: 100% 100%; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 0rpx 0rpx; |
|||
text-align: center; |
|||
background: linear-gradient( 180deg, #FF8B8D 0%, #FF544E 100%); |
|||
border-radius: 7rpx 7rpx 7rpx 7rpx; |
|||
border: 2rpx solid #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
line-height: 1.2; |
|||
} |
|||
} |
|||
|
|||
.my-share{ |
|||
position: absolute; |
|||
width: 360rpx; |
|||
left: 0; |
|||
top: 0; |
|||
opacity: 0; |
|||
} |
|||
.zhuanpan{ |
|||
width: 654rpx; |
|||
height: 654rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 auto 28rpx; |
|||
position: relative; |
|||
z-index: 2; |
|||
.zhuanpanImg{ |
|||
width: 654rpx; |
|||
height: 654rpx; |
|||
background-image: url('https://static.ticket.sz-trip.com/uploads/20251015/60b23c0c2faead4eb415592d88e6519c.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
transform-origin: center center; /* 设置旋转中心为元素中心 */ |
|||
transition-duration: 2s; |
|||
} |
|||
.choujiang{ |
|||
width: 240rpx; |
|||
height: 240rpx; |
|||
position: relative; |
|||
z-index: 99; |
|||
} |
|||
} |
|||
|
|||
|
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -950rpx; |
|||
padding: 0 34rpx 60rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title-image{ |
|||
width: 316.67rpx; |
|||
height: 68.67rpx; |
|||
margin: 0 auto; |
|||
display: block; |
|||
} |
|||
|
|||
.view-more{ |
|||
height: 24rpx; |
|||
margin: 31rpx auto 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
display: block; |
|||
} |
|||
|
|||
.product-container{ |
|||
padding:30rpx 0 0; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 333rpx; |
|||
height: 484rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(186,144,108,0.1); |
|||
border-radius: 27rpx 27rpx 27rpx 27rpx; |
|||
padding: 6rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 19rpx; |
|||
.img{ |
|||
width: 320rpx; |
|||
height: 320rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 150rpx; |
|||
justify-content: space-between; |
|||
padding: 0rpx 10rpx 10rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 34rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
// &::after{ |
|||
// content: "起"; |
|||
// font-size: 24rpx; |
|||
// } |
|||
} |
|||
.old-price{ |
|||
font-weight: 400; |
|||
font-size: 25rpx; |
|||
color: #B1B1B1; |
|||
text-decoration-line: line-through; |
|||
margin-left: 10rpx; |
|||
&::before{ |
|||
content: "￥"; |
|||
} |
|||
} |
|||
.btn{ |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
|
|||
.pop-image{ |
|||
width: 636rpx; |
|||
height: 1262.11rpx; |
|||
background: url("https://static.ticket.sz-trip.com/uploads/20251015/dbe71e60d36a04a908651045d67f9582.png"); |
|||
background-size: 100% 100%; |
|||
padding: 223rpx 42rpx 30rpx; |
|||
.content{ |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.my-prize{ |
|||
border-radius: 61rpx 61rpx 0rpx 0rpx; |
|||
width: 100%; |
|||
min-height: 500rpx; |
|||
max-height: 1000rpx; |
|||
background: white; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.title-container{ |
|||
background: linear-gradient( 182deg, #FEF9DC 0%, #FFFFFF 100%); |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
image{ |
|||
width: 170rpx; |
|||
height: 111.33rpx; |
|||
} |
|||
.close{ |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 34rpx; |
|||
width: 26.67rpx; |
|||
height: 26.67rpx; |
|||
} |
|||
} |
|||
|
|||
.prize-content{ |
|||
flex: 1; |
|||
height: 20rpx; |
|||
padding: 40rpx 31rpx 20rpx; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
.no-data{ |
|||
width: 394rpx; |
|||
height: 255.33rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.prize-item{ |
|||
display: flex; |
|||
align-items: center; |
|||
height: 167rpx; |
|||
background: #FFFCF1; |
|||
border-radius: 28rpx 28rpx 28rpx 28rpx; |
|||
border: 1rpx solid #FFEC8B; |
|||
width: 100%; |
|||
margin-bottom: 13rpx; |
|||
padding: 27rpx 29rpx; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #747474; |
|||
.prize-img{ |
|||
width: 112rpx; |
|||
height: 112rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
.flex-1{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
padding-left: 20rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 500; |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.kefu{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #333333; |
|||
padding-bottom: 30rpx; |
|||
image{ |
|||
width: 30.67rpx; |
|||
height: 30.67rpx; |
|||
} |
|||
} |
|||
} |
|||
/* 弹窗内容容器 */ |
|||
.kf-popup-content { |
|||
width: 100%; |
|||
background-color: #fff; |
|||
border-top-left-radius: 16px; |
|||
border-top-right-radius: 16px; |
|||
overflow: hidden; |
|||
.popup-header { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 16px; |
|||
position: relative; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
.title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.close-icon { |
|||
position: absolute; |
|||
right: 16px; |
|||
font-size: 20px; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 弹窗内容区 */ |
|||
.popup-body { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
/* 联系项样式 */ |
|||
.contact-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 16px 20px; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
|
|||
|
|||
|
|||
.info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.label { |
|||
font-size: 16px; |
|||
display: block; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.detail { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.arrow { |
|||
width: 20px; |
|||
height: 20px; |
|||
color: #ccc; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
.concat-btn{ |
|||
/* 清除默认背景和边框 */ |
|||
background: none; |
|||
border: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
|
|||
/* 清除默认圆角 */ |
|||
border-radius: 0; |
|||
|
|||
/* 清除默认文字样式 */ |
|||
color: inherit; |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
|
|||
/* 清除点击效果（灰色背景） */ |
|||
-webkit-tap-highlight-color: transparent; |
|||
text-align: left; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,421 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<uni-page-head uni-page-head-type="default"> |
|||
<div class="uni-page-head" style="background-color: rgb(248, 248, 248); color: rgb(0, 0, 0);"> |
|||
<div class="uni-page-head-hd"> |
|||
<div class="uni-page-head-btn" @click="clickBack()"> |
|||
<uni-icons type="left" size="27"></uni-icons> |
|||
</div> |
|||
<div class="uni-page-head-ft"></div> |
|||
</div> |
|||
<div class="uni-page-head-bd"> |
|||
<div class="uni-page-head__title" style="font-size: 16px; opacity: 1;"> |
|||
支付 |
|||
</div> |
|||
</div> |
|||
<div class="uni-page-head-ft"></div> |
|||
</div> |
|||
<div class="uni-placeholder"></div> |
|||
</uni-page-head> |
|||
|
|||
<view class="title">支付剩余时间</view> |
|||
<view class="time-box"> |
|||
<uni-countdown :font-size="40" :show-day="false" :hour="times.hours" :minute="times.minutes" |
|||
:second="times.seconds" @timeup="timeup"></uni-countdown> |
|||
</view> |
|||
<view class="money-box" style="padding-bottom: 30rpx;"> |
|||
<view>应付金额</view> |
|||
<view style="color: red;">￥{{detail.paid_money / 100}}</view> |
|||
</view> |
|||
<view class="money-box" style="border-bottom: none;"> |
|||
<view>支付方式:</view> |
|||
</view> |
|||
|
|||
<!-- 优惠券 --> |
|||
<view v-if="coupon_activity"> |
|||
<view class="pay-box" @click="payType = 1" v-if="pay_type.includes('WEIXIN')"> |
|||
<view style="display: flex; align-items: center;"> |
|||
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wxPay.png" mode="widthFix"></image> |
|||
微信支付 |
|||
</view> |
|||
|
|||
<view class="select-box"> |
|||
<view class="select" v-if="payType == 1"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="walletList.length > 0 && pay_type.includes('SUBWALLET')"> |
|||
<view class="pay-box"> |
|||
<view style="display: flex; align-items: center;"> |
|||
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/numLogo.png" mode="widthFix"> |
|||
</image> |
|||
数字人民币子钱包支付 |
|||
</view> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/selectB.png" class="select-img" |
|||
mode="widthFix" :style="{'transform': showMore ? 'rotate(180deg)' : ''}" |
|||
@click="showMore = !showMore"></image> |
|||
</view> |
|||
|
|||
<view v-show="showMore" style="padding-left: 40rpx;"> |
|||
<view class="pay-box" v-for="(item,index) in walletList" :key="index" @click="payType = 2;walletIndex = index"> |
|||
<view style="display: flex; align-items: center;"> |
|||
<image :src="item.bank_logo" mode="widthFix"></image> |
|||
{{item.bank_name}} |
|||
</view> |
|||
|
|||
<view class="select-box"> |
|||
<view class="select" v-if="payType == 2 && walletIndex === index"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="" v-else> |
|||
<view class="pay-box" @click="payType = 1"> |
|||
<view style="display: flex; align-items: center;"> |
|||
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wxPay.png" mode="widthFix"></image> |
|||
微信支付 |
|||
</view> |
|||
|
|||
<view class="select-box"> |
|||
<view class="select" v-if="payType == 1"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="walletList.length > 0"> |
|||
<view class="pay-box"> |
|||
<view style="display: flex; align-items: center;"> |
|||
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/numLogo.png" mode="widthFix"> |
|||
</image> |
|||
数字人民币子钱包支付 |
|||
</view> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/selectB.png" class="select-img" |
|||
mode="widthFix" :style="{'transform': showMore ? 'rotate(180deg)' : ''}" |
|||
@click="showMore = !showMore"></image> |
|||
</view> |
|||
|
|||
<view v-show="showMore" style="padding-left: 40rpx;"> |
|||
<view class="pay-box" v-for="(item,index) in walletList" :key="index" @click="payType = 2;walletIndex = index"> |
|||
<view style="display: flex; align-items: center;"> |
|||
<image :src="item.bank_logo" mode="widthFix"></image> |
|||
{{item.bank_name}} |
|||
</view> |
|||
|
|||
<view class="select-box"> |
|||
<view class="select" v-if="payType == 2 && walletIndex === index"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="btn" @click="pay"> |
|||
立即付款 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: '', |
|||
token: {}, |
|||
detail: {}, |
|||
closeTime: 1000 * 60 * 30, |
|||
times: {}, |
|||
showMore: true, |
|||
walletList: [], |
|||
walletIndex: 0, |
|||
payType: null, |
|||
coupon_activity: false, |
|||
pay_type: "", |
|||
JDSZAPIURL: 'https://api.cloud.sz-trip.com' |
|||
} |
|||
}, |
|||
onReady() { |
|||
|
|||
}, |
|||
onLoad(option) { |
|||
this.id = option.orderId |
|||
// this.Post({}, '/api/subwallet.ermb/wallet').then(res => { |
|||
// this.walletList = res.data |
|||
// }) |
|||
this.Post({order_id: option.orderId}, "/api/order/query").then(res => { |
|||
// 选择优惠券需要判断优惠券支付方式 |
|||
if(res.data.coupon_activity && res.data.coupon_activity.pay_type) { |
|||
this.coupon_activity = true |
|||
this.pay_type = res.data.coupon_activity.pay_type |
|||
} |
|||
|
|||
if(res.data.paid_money == 0) { |
|||
uni.redirectTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
return; |
|||
} |
|||
this.detail = res.data |
|||
let createTime = new Date((this.detail.create_time + "").replace(/-/g, "/")).getTime(); |
|||
createTime += this.detail.auto_close_time * 1000; |
|||
this.closeTime = createTime - new Date().getTime(); |
|||
const hours = parseInt((this.closeTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
|||
const minutes = parseInt((this.closeTime % (1000 * 60 * 60)) / (1000 * 60)); |
|||
const seconds = (this.closeTime % (1000 * 60)) / 1000; |
|||
this.times = { |
|||
hours: hours, |
|||
minutes: minutes, |
|||
seconds: seconds |
|||
} |
|||
}) |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onBackPress() { |
|||
return true; // 返回 true 表示阻止默认返回行为 |
|||
}, |
|||
methods: { |
|||
// 返回 |
|||
clickBack () { |
|||
let pages = getCurrentPages() |
|||
let prePage = null |
|||
// 看上个页面 |
|||
if (pages.length>=2) { |
|||
prePage = pages[pages.length - 2]; |
|||
} else { |
|||
uni.redirectTo({ |
|||
url: "/subPackages/order/trades" |
|||
}) |
|||
return |
|||
} |
|||
// 有问题 |
|||
if (prePage.$page.fullPath.indexOf('trades')>=0 || prePage.$page.fullPath.indexOf('orderDetail')>=0) { |
|||
uni.navigateBack() |
|||
} else { |
|||
uni.redirectTo({ |
|||
url: "/subPackages/order/trades" |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 倒计时时间到触发事件 |
|||
timeup() { |
|||
let flag = false |
|||
setTimeout(() => { |
|||
flag = true |
|||
}, 2000) |
|||
if (flag) { |
|||
console.log('倒计时结束') |
|||
} |
|||
}, |
|||
// 支付 |
|||
pay() { |
|||
if(this.payType == null) { |
|||
uni.showToast({ |
|||
title: '请选择支付方式', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
uni.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
if(this.payType == 1) { |
|||
// 微信支付 |
|||
uni.request({ |
|||
method: 'POST', |
|||
url: this.JDSZAPIURL + '/api/order/pay', |
|||
header: { |
|||
'content-type': 'application/json', |
|||
'token': this.token |
|||
}, |
|||
data: { |
|||
order_id: this.id, |
|||
pay_method: "WEIXIN", |
|||
pay_platform: "MINI", |
|||
app_name: "WxXcxConfig" |
|||
}, |
|||
success: res => { |
|||
uni.hideLoading() |
|||
if (res.data.code == 1) { |
|||
let data = JSON.parse(res.data.data) |
|||
uni.requestPayment({ |
|||
nonceStr: data.nonceStr || data.noncestr, |
|||
package: data.package, |
|||
paySign: data.paySign || data.sign, |
|||
signType: data.signType, |
|||
timeStamp: "" + (data.timeStamp || data.timestamp), |
|||
complete: function(res) { |
|||
// setTimeout(() => { |
|||
// uni.redirectTo({ |
|||
// url: '/subPackages/order/trades' |
|||
// }) |
|||
// }, 1000) |
|||
} |
|||
}); |
|||
} else { |
|||
uni.showToast({ |
|||
title:res.data.msg, |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}, |
|||
}) |
|||
}else if(this.payType == 2) { |
|||
// 数币支付 |
|||
uni.request({ |
|||
method: 'POST', |
|||
url: this.JDSZAPIURL + '/api/subwallet.ermb/wallet', |
|||
header: { |
|||
'content-type': 'application/json', |
|||
'token': this.token |
|||
}, |
|||
data: { |
|||
order_id: this.id, |
|||
pay_method: "SUBWALLET", |
|||
pay_platform: "MWEB", |
|||
ins_no: this.walletList[this.walletIndex].ins_no, |
|||
return_url: "https://m.cloud.sz-trip.com/OrderWaiting", |
|||
}, |
|||
success: res => { |
|||
uni.request({ |
|||
method: 'POST', |
|||
url: this.JDSZAPIURL + '/api/order/pay', |
|||
header: { |
|||
'content-type': 'application/json', |
|||
'token': this.token |
|||
}, |
|||
data: { |
|||
order_id: this.id, |
|||
pay_method: "SUBWALLET", |
|||
pay_platform: "MWEB", |
|||
ins_no: this.walletList[this.walletIndex].ins_no, |
|||
return_url: "https://https://m.cloud.sz-trip.com/OrderWaiting", |
|||
}, |
|||
success: res => { |
|||
let data = JSON.parse(res.data.data); |
|||
if(data && data.RESULT && data.RESULT=='Y'){ |
|||
uni.request({ |
|||
method: 'POST', |
|||
url: this.JDSZAPIURL + '/api/order/query', |
|||
header: { |
|||
'content-type': 'application/json', |
|||
'token': this.token |
|||
}, |
|||
data: { |
|||
order_id: this.id, |
|||
}, |
|||
success: res => { |
|||
uni.hideLoading() |
|||
if (res.data.data.state != "UNPAID") { |
|||
uni.redirectTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '未查询到支付结果！', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
complete: (res) => {uni.hideLoading()} |
|||
}) |
|||
} else { |
|||
uni.hideLoading() |
|||
if (res.data.code!=1 && res.data.msg) { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
}) |
|||
}, |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.bg { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.title { |
|||
text-align: center; |
|||
font-size: 35rpx; |
|||
line-height: 60rpx; |
|||
padding-top: 100rpx; |
|||
} |
|||
|
|||
.time-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 100rpx; |
|||
} |
|||
|
|||
.money-box { |
|||
width: 670rpx; |
|||
margin: 30rpx auto 0; |
|||
font-size: 35rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
border-bottom: 1rpx solid #000; |
|||
height: 60rpx; |
|||
align-items: center; |
|||
} |
|||
|
|||
.pay-box { |
|||
padding: 0 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 35rpx; |
|||
margin-top: 40rpx; |
|||
|
|||
image { |
|||
width: 70rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.select-box { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border: 1rpx solid #000; |
|||
border-radius: 50%; |
|||
|
|||
.select { |
|||
width: 15rpx; |
|||
height: 15rpx; |
|||
background: #000; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.select-img { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
margin-right: 0rpx; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
margin: 80rpx auto 0; |
|||
width: 670rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
font-size: 40rpx; |
|||
background: #d62828; |
|||
color: #fff; |
|||
border-radius: 40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="popupBox"> |
|||
<view class="name">请输入卡密兑换</view> |
|||
<input type="text" v-model="password"> |
|||
<view class="btns" @click="submitPassword"> |
|||
立即兑换 |
|||
</view> |
|||
</view> |
|||
|
|||
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251014/e935f1d616f992dc05c702ba763cece2.png"></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
password:'' |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
methods: { |
|||
submitPassword() { |
|||
console.log('提交的兑换码',this.password); |
|||
let that = this |
|||
that.password = that.password.trim() |
|||
if (that.password== '') { |
|||
uni.showToast({ |
|||
title: '请输入优惠券领取卡号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
that.Post({ |
|||
key: that.password |
|||
}, "/api/coupon/get_coupon").then((res) => { |
|||
console.log(res.code); |
|||
if (res.code == 200) { |
|||
uni.showToast({ |
|||
title: '兑换成功', |
|||
icon: 'none' |
|||
}) |
|||
} else{ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
that.password = '' |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #EDF5DC; |
|||
position: relative; |
|||
padding-top: 94rpx; |
|||
} |
|||
.bottom-img{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 591.33rpx; |
|||
height: 535.27rpx; |
|||
z-index: 1; |
|||
} |
|||
|
|||
|
|||
.popupBox { |
|||
height: 862rpx; |
|||
width: 708.67rpx; |
|||
background-image: url("https://static.ticket.sz-trip.com/uploads/20251014/24a49d4a15b1b9a1270253d7a68cfd9e.png"); |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
z-index: 2; |
|||
padding-top: 174rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.popupBox .name { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #6A8A2D; |
|||
text-align: center; |
|||
margin-bottom: 59rpx; |
|||
} |
|||
|
|||
.popupBox input { |
|||
width: 433rpx; |
|||
height: 80rpx; |
|||
background: #F7F7F7; |
|||
border-radius: 13rpx; |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
} |
|||
|
|||
.popupBox .btns { |
|||
width: 400rpx; |
|||
height: 80rpx; |
|||
background: #6A8A2D; |
|||
border-radius: 40rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
margin: 264rpx auto 0; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue