exchangePrize.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <view class="exchangePrize">
  3. <!-- 表单 -->
  4. <view class="form">
  5. <uni-forms :modelValue="formData" >
  6. <uni-forms-item name="type" v-if="istype">
  7. <view class="selectType">
  8. <picker mode="selector" :value="formData.type" :range='typeSelect'
  9. @change="bindTypeChange">
  10. <view class="uni-input" >
  11. <text v-if="formData.type==''||formData.type==null"
  12. style="color: #999999 ;">请选择配送方式</text>
  13. <text v-if="formData.type!=''">{{formData.type}}</text>
  14. </view>
  15. <image src="/static/icon/right.png"
  16. style="width: 14rpx;height: 24rpx;position: absolute;top:20rpx;right: 30rpx;"></image>
  17. </picker>
  18. </view>
  19. </uni-forms-item>
  20. <uni-forms-item name="name" v-if="formData.type!=''||isVerification==true">
  21. <uni-easyinput type="text" v-model="formData.name" placeholder="填写联系人" />
  22. </uni-forms-item>
  23. <uni-forms-item name="phone" v-if="formData.type!=''||isVerification==true">
  24. <uni-easyinput type="number" v-model="formData.phone" placeholder="填写联系电话" />
  25. </uni-forms-item>
  26. <uni-forms-item name="region" v-if="formData.type=='快递配送'">
  27. <uni-easyinput type="text" v-model="formData.region" placeholder="所在地区" />
  28. </uni-forms-item>
  29. <uni-forms-item name="region" v-if="formData.type=='快递配送'">
  30. <uni-easyinput type="text" v-model="formData.region" placeholder="详细地址" />
  31. </uni-forms-item>
  32. <uni-forms-item name="region" v-if="formData.type=='到店自提'||isVerification==true">
  33. <view class="selectType">
  34. <picker mode="selector" :value="formData.region" :range='regionSelect'
  35. @change="bindregionChange">
  36. <view class="uni-input" >
  37. <text v-if="formData.region==''||formData.region==null"
  38. style="color: #999999 ;">请选择门店</text>
  39. <text v-if="formData.region!=''">{{formData.region}}</text>
  40. </view>
  41. <image src="/static/icon/right.png"
  42. style="width: 14rpx;height: 24rpx;position: absolute;top:20rpx;right: 30rpx;"></image>
  43. </picker>
  44. </view>
  45. </uni-forms-item>
  46. </uni-forms>
  47. </view>
  48. <!-- 奖品信息 -->
  49. <view class="msg">
  50. <view class="title">
  51. <text>奖品信息</text>
  52. </view>
  53. <view class="shopCard">
  54. <image src="/static/icon/Kudosbg.png"></image>
  55. <view style="margin-left: 24rpx;">
  56. <text class="name">端午佳节五香肉粽子,仅限前</text>
  57. <text class="tag">礼盒装 </text>
  58. </view>
  59. </view>
  60. <view class="shopNumber">
  61. <text>件数</text>
  62. <text>1件</text>
  63. </view>
  64. </view>
  65. <!-- 兑换按钮 -->
  66. <view class="bottombtn" @click="goExDetail">
  67. <view class="btnitem" >
  68. <text>确认兑换</text>
  69. </view>
  70. </view>
  71. </view>
  72. </template>
  73. <script>
  74. export default {
  75. data(){
  76. return{
  77. //产品
  78. id:'',
  79. // 是否核销
  80. isVerification:false,
  81. // 表单数据
  82. formData:{
  83. type:'',
  84. phone:'',
  85. name:'',
  86. region:'',
  87. address:'',
  88. },
  89. // 配送方式
  90. typeSelect:['快递配送','到店自提'],
  91. // 是否显示配送方式
  92. istype:true,
  93. // 选择门店
  94. regionSelect:['第一门店','第二门店','第三门店','第四门店']
  95. }
  96. },
  97. onLoad(o) {
  98. if(o.id){
  99. this.id = o.id
  100. this.getProductDetail()
  101. }
  102. },
  103. methods:{
  104. getProductDetail(){
  105. this.$api.product.getProductDetail({
  106. product_id:this.id
  107. }).then(res=>{
  108. console.log(res,'------->res');
  109. })
  110. },
  111. // 选择快递方式
  112. bindTypeChange:function(e){
  113. if(e.detail.value==0){
  114. this.formData.type='快递配送'
  115. }else{
  116. this.formData.type='到店自提'
  117. }
  118. },
  119. // 跳转兑换详情
  120. goExDetail(){
  121. uni.navigateTo({
  122. url:'/pages/my/prize/exchangeDetail'
  123. })
  124. },
  125. // 选择门店
  126. bindregionChange:function(e){
  127. this.formData.region=this.regionSelect[e.detail.value]
  128. },
  129. }
  130. }
  131. </script>
  132. <style lang="scss" scoped>
  133. $pageColor:#F9F9F9;
  134. $bgColor:#FFFFFF;
  135. @mixin flexlayout {
  136. display: flex;
  137. align-items: center;
  138. justify-content: center;
  139. }
  140. .exchangePrize{
  141. height: 100%;
  142. background:$bgColor ;
  143. }
  144. ::v-deep .uni-forms-item{
  145. margin-bottom: 24rpx;
  146. }
  147. ::v-deep .uni-forms-item__content{
  148. font-size: 30rpx;
  149. border: 2rpx solid #EAEAEA;
  150. padding:18rpx 0;
  151. border-radius: 8rpx;
  152. background-color: #fff;
  153. }
  154. ::v-deep .is-input-border{
  155. border: none;
  156. }
  157. .form{
  158. background:$pageColor ;
  159. width: 750rpx;
  160. padding:24rpx 30rpx 12rpx 30rpx;
  161. box-sizing: border-box;
  162. .selectType{
  163. width: 690rpx;
  164. height: 68rpx;
  165. background: #FFFFFF;
  166. display: flex;
  167. align-items:center;
  168. padding-left: 20rpx;
  169. box-sizing: border-box;
  170. position: relative;
  171. }
  172. }
  173. .msg{
  174. width: 750rpx;
  175. height: 700rpx;
  176. background:$bgColor;
  177. border-radius: 12rpx 12rpx 0px 0px;
  178. padding:32rpx 30rpx;
  179. .title{
  180. margin-bottom: 24rpx;
  181. text{
  182. font-size: 32rpx;
  183. font-family: PingFang-SC-Bold, PingFang-SC;
  184. font-weight: bold;
  185. color: #080F18;
  186. }
  187. }
  188. .shopCard{
  189. margin-top: 28rpx;
  190. width: 694rpx;
  191. height: 164rpx;
  192. background: #F4F5F6;
  193. border-radius: 10rpx;
  194. display: flex;
  195. align-items: center;
  196. image{
  197. width: 132rpx;
  198. height: 132rpx;
  199. margin-left: 16rpx;
  200. display: inline-block;
  201. border-radius: 10rpx;
  202. }
  203. .name{
  204. font-size: 28rpx;
  205. font-family: PingFangSC-Medium, PingFang SC;
  206. font-weight: 500;
  207. color: #080F18;
  208. display: block;
  209. }
  210. .tag{
  211. font-size: 24rpx;
  212. font-family: PingFang-SC-Medium, PingFang-SC;
  213. font-weight: 500;
  214. color: #666666;
  215. }
  216. }
  217. .shopNumber{
  218. display: flex;
  219. justify-content: space-between;
  220. align-items: center;
  221. margin-top: 25rpx;
  222. text{
  223. font-size: 26rpx;
  224. font-family: PingFang-SC-Medium, PingFang-SC;
  225. font-weight: 500;
  226. color: #000000;
  227. }
  228. }
  229. }
  230. .bottombtn{
  231. width: 690rpx;
  232. height: 92rpx;
  233. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  234. border-radius: 12rpx;
  235. margin-left: 30rpx;
  236. position: fixed;
  237. bottom: 72rpx;
  238. @include flexlayout();
  239. .btnitem{
  240. @include flexlayout();
  241. text{
  242. font-size: 30rpx;
  243. font-family: PingFang-SC-Bold, PingFang-SC;
  244. font-weight: bold;
  245. color: $bgColor;
  246. }
  247. }
  248. }
  249. </style>