Compare commits
10 Commits
bf418395ab
...
81ca8c57f1
| Author | SHA1 | Date |
|---|---|---|
jiazhipeng
|
81ca8c57f1 | 1 day ago |
|
jiazhipeng
|
af7953b78f | 1 day ago |
|
jiazhipeng
|
90c0412f58 | 4 days ago |
|
jiazhipeng
|
6ec8d1ea2c | 4 days ago |
|
jiazhipeng
|
20b9d18b68 | 6 days ago |
|
jiazhipeng
|
4e57c15616 | 7 days ago |
|
jiazhipeng
|
be8293a420 | 7 days ago |
|
jiazhipeng
|
2176fc5757 | 7 days ago |
|
jiazhipeng
|
2aa6e1de73 | 7 days ago |
|
jiazhipeng
|
d975257dfe | 7 days ago |
39 changed files with 2890 additions and 499 deletions
@ -1,190 +1,278 @@ |
|||||
<template> |
<template> |
||||
<view style="padding-top: 88rpx;"> |
<view class="bg"> |
||||
<view class="login-tip">时味苏州PHoneLogin 申请获得</view> |
<view class="form-box"> |
||||
<view class="login-tip2">以下权限</view> |
<view class="form-item"> |
||||
<view class="login-tip-box"> |
<image src="https://m.cloud.sz-trip.com/static/images/Login/newMobile.png" alt=""></image> |
||||
<text>获得你的公开信息（昵称、头像、地区及性别）</text> |
<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> |
||||
<view class="btn-box"> |
<view @click="handleLogin()" class="submit">登录</view> |
||||
<button bindtap="cancel" type="default" @click="redirectIndex">取消</button> |
<view class="flex-center" style="margin-top: 30rpx;"> |
||||
<button type="primary" @click="getUserInfo">同意</button> |
<radio-group @change="toggleAgreement"> |
||||
</view> |
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio> |
||||
<view class="flex-center article-box"> |
</radio-group> |
||||
<radio-group @change="toggleAgreement"> |
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view> |
||||
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio> |
</view> |
||||
</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> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "login", |
|
||||
data() { |
data() { |
||||
return { |
return { |
||||
isAgreed: false, |
form: { |
||||
openid: '' |
phone: "", |
||||
}; |
code: "", |
||||
}, |
captcha: "", // 新增图形验证码字段 |
||||
onLoad(options) { |
}, |
||||
|
// 验证码逻辑 |
||||
|
codeText: "获取验证码", |
||||
|
codeDisabled: false, |
||||
|
countdown: 60, |
||||
|
// 图形验证码相关 |
||||
|
captchaUrl: "", // 图形验证码图片地址 |
||||
|
captchaId: "", |
||||
|
// 记住账号 |
||||
|
rememberPhone: false, |
||||
|
// 加载状态 |
||||
|
submitting: false, |
||||
|
smsCodeId: "", |
||||
|
|
||||
|
checked: false, |
||||
|
isAgreed: false, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.refreshCaptcha(); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
// 处理手机号授权 |
// 刷新图形验证码 |
||||
handlePhoneNumber(e) { |
refreshCaptcha() { |
||||
if (e.detail.errMsg === "getPhoneNumber:ok") { // 成功 |
this.Post({}, "/api/uservice/user/getCaptchaImg").then((res) => { |
||||
this.$refs.popup.close(); |
if (res) { |
||||
this.Post({ |
this.captchaUrl = res.data.code; |
||||
code: e.detail.code, |
this.captchaId = res.data.id; |
||||
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", |
|
||||
} |
} |
||||
this.$store.commit('changeUserInfo', data); |
}); |
||||
}, |
}, |
||||
// 根据路径进行导航 |
// 切换协议同意状态 |
||||
navigateBasedOnPath() { |
toggleAgreement() { |
||||
if (this.$store.state.user.toPath.includes('user/user')) { |
this.isAgreed = !this.isAgreed; |
||||
uni.switchTab({ |
}, |
||||
url: this.$store.state.user.toPath |
// 重置表单 |
||||
}); |
resetForm() { |
||||
} else { |
this.form.code = ""; |
||||
uni.navigateBack({}); |
this.form.captcha = ""; // 重置图形验证码 |
||||
} |
// 刷新图形验证码 |
||||
} |
this.refreshCaptcha(); |
||||
}, |
}, |
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style> |
// 获取短信验证码（添加图形验证码校验） |
||||
.login-tip { |
handleGetCode() { |
||||
font-size: 28rpx; |
// 先验证手机号和图形验证码 |
||||
margin: 0 60rpx; |
if (!this.form.phone) { |
||||
margin-top: 40rpx; |
this.$message.warning("请先输入手机号码"); |
||||
} |
return; |
||||
|
} |
||||
|
if (!this.form.captcha) { |
||||
|
this.$message.warning("请先输入图形验证码"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
.login-tip2 { |
this.Post( |
||||
font-size: 44rpx; |
{ |
||||
margin: 0rpx 60rpx; |
mobile: this.form.phone, |
||||
margin-top: 20rpx; |
captchaCode: this.form.captcha, |
||||
font-weight: 400; |
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> |
||||
|
|
||||
.login-tip-box { |
<style scoped lang="scss"> |
||||
display: flex; |
.bg { |
||||
align-items: flex-start; |
/* background: #FFFFFF; */ |
||||
margin: 0 60rpx; |
padding-bottom: 120rpx; |
||||
font-size: 28rpx; |
position: relative; |
||||
margin-top: 40rpx; |
background-image: url("https://m.cloud.sz-trip.com/static/images/Login/newTopBg.png"); |
||||
line-height: 40rpx; |
background-size: 100% 100%; |
||||
|
padding-top: 240rpx; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
.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 .icon-gou1 { |
|
||||
line-height: 80rpx; |
.submit { |
||||
margin-top: -20rpx; |
font-size: 36rpx; |
||||
margin-right: 30rpx; |
font-weight: 500; |
||||
color: #666; |
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; |
input::placeholder { |
||||
position: absolute; |
color: #ABABAB; |
||||
bottom: 100rpx; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
} |
} |
||||
|
|
||||
.btn-box button { |
.yuan { |
||||
width: 400rpx; |
width: .37rem; |
||||
|
height: .37rem; |
||||
|
flex-shrink: 0; |
||||
} |
} |
||||
|
|
||||
.article-box { |
.article-box { |
||||
position: absolute; |
font-weight: 400; |
||||
left: 0; |
font-size: 27rpx; |
||||
right: 0; |
color: #00B200; |
||||
justify-content: center; |
margin-top: 30rpx; |
||||
font-size: 24rpx; |
display: flex; |
||||
color: #1aad19; |
align-items: center; |
||||
bottom: 40rpx; |
.iconfont { |
||||
} |
margin-right: 10rpx; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
.article-box .iconfont { |
text { |
||||
margin-right: 10rpx; |
border-bottom: 1px solid; |
||||
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